/* Ski-school Booking (Account) — kabdalis2 design system.
   view.js is routed from skischool-booking/view.js (same file, account layer
   gated on .kabdalis-skischool-booking-account class). All .skischool-booking-*
   and .table-reservation-* rules used by that shared JS must live here too,
   since this block's style.css loads independently of the base block's. */

/* Form primitives — scoped so they work without table-reservation on the page. */

.kabdalis-skischool-booking-account .table-reservation-label{
    font-family: var(--font-mono);
    font-size: .66rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--ink-soft);
    font-weight: 600;
}

.kabdalis-skischool-booking-account .table-reservation-input,
.kabdalis-skischool-booking-account .table-reservation-select{
    width: 100%; height: 46px; padding: 0 13px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--line);
    background: var(--surface); color: var(--ink);
    font: inherit; font-size: .94rem;
    transition: border-color .15s, box-shadow .15s;
}
.kabdalis-skischool-booking-account .table-reservation-input:focus,
.kabdalis-skischool-booking-account .table-reservation-select:focus{
    outline: none; border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}
/* The chevron/appearance recipe lives in shared/kab-ui.css; this scoped rule's
   padding shorthand outweighs it, so restore room for the 12px-inset arrow. */
.kabdalis-skischool-booking-account select.table-reservation-select{ padding-right: 38px; }

.kabdalis-skischool-booking-account .table-reservation-textarea{
    width: 100%; padding: 11px 13px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--line);
    background: var(--surface); color: var(--ink);
    font: inherit; font-size: .94rem;
    resize: vertical;
    transition: border-color .15s, box-shadow .15s;
}
.kabdalis-skischool-booking-account .table-reservation-textarea:focus{
    outline: none; border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

.kabdalis-skischool-booking-account .table-reservation-date-display{
    display: flex; align-items: center; justify-content: space-between;
    padding: 11px 13px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--surface); cursor: pointer;
    transition: border-color .15s ease;
}
.kabdalis-skischool-booking-account .table-reservation-date-display:hover{ border-color: var(--accent); }
.kabdalis-skischool-booking-account .table-reservation-date-text{ color: var(--ink); }
.kabdalis-skischool-booking-account .table-reservation-date-picker-trigger{
    background: none; border: none; padding: 0;
    color: var(--ink-soft); cursor: pointer; line-height: 1;
}

.kabdalis-skischool-booking-account .required-indicator{ color: var(--no); }
.kabdalis-skischool-booking-account .field-error{
    border-color: var(--no) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--no) 16%, transparent) !important;
}

/* Widget card — vertical stack (kicker, title, form). */
.kabdalis-skischool-booking-account.ss{
    padding: var(--card-pad);
    display: flex; flex-direction: column; gap: 12px;
}
.skischool-booking-title{
    font-family: var(--font-display);
    font-weight: var(--display-w);
    letter-spacing: var(--display-ls);
    font-size: 1.3rem; line-height: 1.1;
    margin: 0;
    color: var(--ink);
}

/* Form */
.skischool-booking-form{
    display: flex; flex-direction: column; gap: 13px;
}
.skischool-booking-field{
    display: flex; flex-direction: column; gap: 6px;
}

.skischool-booking-message{
    padding: 11px 14px; border-radius: var(--radius-sm);
    font-size: .9rem; line-height: 1.45; margin-bottom: 14px;
}
.skischool-booking-message:empty{ display: none; }
.skischool-booking-message-success{ background: var(--ok-bg); color: var(--ok); }
.skischool-booking-message-error{ background: var(--no-bg); color: var(--no); }

/* Submit button */
.kabdalis-skischool-booking-account .skischool-booking-submit{
    width: 100%; padding: 13px 20px;
    border-radius: var(--radius-sm);
    border: none;
    background: var(--accent); color: var(--on-accent);
    font: inherit; font-size: .94rem; font-weight: 600;
    cursor: pointer;
    transition: opacity .15s ease;
}
.kabdalis-skischool-booking-account .skischool-booking-submit:hover:not(:disabled){ opacity: .88; }
.kabdalis-skischool-booking-account .skischool-booking-submit:disabled{ opacity: .55; cursor: not-allowed; }
.kabdalis-skischool-booking-account .skischool-booking-submit-container{ width: 100%; }

/* Inline status text */
.kabdalis-skischool-booking-account .skischool-booking-loading,
.kabdalis-skischool-booking-account .skischool-booking-error{
    font-size: .88rem; color: var(--ink-soft); padding: 8px 0;
}
.kabdalis-skischool-booking-account .skischool-booking-error{ color: var(--no); }

/* Calendar overlay — shared/calendar-styles.css owns all structural rules via
   the [class$="-calendar-overlay"] attribute selector (position:fixed, z-index,
   flex centering). No block-level overrides: they would conflict with those rules
   and trap the calendar inside the widget card. */

/* Contact info-box — "Har du frågor? · phone · email". Canonical rules live in
   table-reservation/style.css, which does not load on an account-only
   page, so define them here. */
.booking-widget-info-box{
    display:flex; flex-wrap:wrap; align-items:center;
    gap:8px 12px; padding:12px 14px;
    border-radius:var(--radius-sm); background:var(--surface2);
    font-size:.88rem; color:var(--ink-soft); line-height:1.4;
}
.booking-widget-info-text{ color:var(--ink); font-weight:600; flex:0 0 auto; }
.booking-widget-info-link{
    display:inline-flex; align-items:center; gap:6px;
    color:var(--accent); text-decoration:none; font-weight:600;
    white-space:nowrap; transition:color .15s ease;
}
.booking-widget-info-link:hover{ color:var(--ink); }
.booking-widget-info-link i{ font-size:.85rem; line-height:1; }
.booking-widget-info-separator{ color:var(--muted); font-size:.8rem; user-select:none; }

/* Account layer — "Bokar som …" / "Logga in" bar above the form. */
.ss-account-bar{
	display:flex; align-items:center; gap:8px; flex-wrap:wrap;
	margin:0 0 12px; padding:8px 12px;
	background:var(--surface2); border-radius:var(--radius-sm);
	font-size:.85rem; color:var(--ink-soft);
}
.ss-account-bar__as{ font-weight:600; color:var(--ink); }
.ss-account-bar__hint{ color:var(--ink-soft); }
.ss-account-bar__login{
	border:0; background:transparent; font:inherit; font-weight:600;
	color:var(--accent); cursor:pointer; text-decoration:underline;
	text-underline-offset:2px; padding:0;
}
.ss-account-bar__login:hover{ color:var(--ink); }