/* Ski-school Booking — kabdalis2 design system (Heavy JS — CSS only).
   All .kabdalis-skischool-booking / .skischool-booking-* class names are
   JS-locked. view.js adds .ss to the wrapper at runtime.

   Modal scaffold (booking-widget-modal-*) and form input primitives
   (.table-reservation-input / .table-reservation-select) live in
   table-reservation/style.css — they're loaded alongside this. */

/* Form primitives — scoped to this block so they work whether or not the
   table-reservation block is also on the page (that block's style.css
   defines the canonical .table-reservation-* rules, but only loads when its
   own block is present). */

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

/* Text input + select */
.kabdalis-skischool-booking .table-reservation-input,
.kabdalis-skischool-booking .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 .table-reservation-input:focus,
.kabdalis-skischool-booking .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 select.table-reservation-select{ padding-right: 38px; }

/* Textarea */
.kabdalis-skischool-booking .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 .table-reservation-textarea:focus{
    outline: none; border-color: var(--accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);
}

/* Date display row */
.kabdalis-skischool-booking .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 .table-reservation-date-display:hover{ border-color: var(--accent); }
.kabdalis-skischool-booking .table-reservation-date-text{ color: var(--ink); }
.kabdalis-skischool-booking .table-reservation-date-picker-trigger{
    background: none; border: none; padding: 0;
    color: var(--ink-soft); cursor: pointer; line-height: 1;
}

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

/* Widget card — column layout mirrors .kabdalis-table-reservation.tr */
.kabdalis-skischool-booking.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 — primary CTA */
.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;
}
.skischool-booking-submit:hover:not(:disabled){ opacity: .88; }
.skischool-booking-submit:disabled{ opacity: .55; cursor: not-allowed; }
.skischool-booking-submit-container{ width: 100%; }

/* Contact info-box — "Har du frågor? · phone · email". The canonical rules live
   in table-reservation/style.css, which does not load on a skischool-only
   page, so define them here (scoped globally, they're prefixed enough to be
   unique to the booking widgets). */
.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; }

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

/* Account bar (prefill hint for -account variant) */
.ss-account-bar{
    display: flex; align-items: center; gap: 8px;
    font-size: .82rem; padding-bottom: 6px;
    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{
    background: none; border: 1px solid var(--line); border-radius: var(--radius-sm);
    padding: 2px 10px; font: inherit; font-size: .82rem;
    color: var(--accent); cursor: pointer;
    transition: border-color .15s;
}
.ss-account-bar__login:hover{ border-color: var(--accent); }

/* Calendar overlay + grid — shared/calendar-styles.css owns all structural
   rules (position:fixed, flex centering, dialog sizing, day states) via the
   [class$="-calendar-overlay"] / [class$="-calendar-day"] attribute selectors.
   No block-level overrides needed here: they would conflict with the shared
   `position:fixed` and `display:flex !important` rules and trap the calendar
   inside the widget card rather than centring it in the viewport. */