/* Snowmobile Booking — kabdalis2 design system (Heavy JS — CSS only).
   view.js adds .sm2.b-card to wrapper at runtime.
   Reuses .booking-widget-modal-* + .b-input/.b-select/.b-textarea from theme. */

.kabdalis-snowmobile-booking.sm2{
    padding:var(--card-pad);
    display:flex; flex-wrap:wrap; gap:14px 20px;
    align-items:center; justify-content:space-between;
}
.sm2__intro{ min-width:0; display:flex; flex-direction:column; gap:4px; }
.snowmobile-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:2px 0 0; color:var(--ink);
}
.sm2__lead{
    margin:6px 0 0;
    color:var(--ink-soft); line-height:1.5;
    max-width:52ch; font-size:.92rem;
}
.sm2__open{ flex:0 0 auto; }
.sm2__total{ margin-right:auto; font-size:.9rem; color:var(--ink-soft); }
.sm2__total b{ font-family:var(--font-mono); font-size:1.05rem; color:var(--ink); margin-left:4px; }

.snowmobile-booking-form{ display:flex; flex-direction:column; gap:13px; }
.snowmobile-booking-field{ display:flex; flex-direction:column; gap:6px; }

/* Form controls — the view.js reuses the .table-reservation-* class names for
   inputs/selects/textarea/label/date-display, but this block's CSS loads only
   when snowmobile-booking is on the page (not table-reservation), so define the
   base styling here, scoped to this wrapper. Mirrors skischool-booking. */
.kabdalis-snowmobile-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;
}
.kabdalis-snowmobile-booking .table-reservation-input,
.kabdalis-snowmobile-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-snowmobile-booking .table-reservation-input:focus,
.kabdalis-snowmobile-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; keep room for it. */
.kabdalis-snowmobile-booking select.table-reservation-select{ padding-right:38px; }
.kabdalis-snowmobile-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-snowmobile-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);
}
.kabdalis-snowmobile-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-snowmobile-booking .table-reservation-date-display:hover{ border-color:var(--accent); }
.kabdalis-snowmobile-booking .table-reservation-date-text{ color:var(--ink); }
.kabdalis-snowmobile-booking .table-reservation-date-picker-trigger{
    background:none; border:none; padding:0;
    color:var(--ink-soft); cursor:pointer; line-height:1;
}
.kabdalis-snowmobile-booking .required-indicator{ color:var(--no); }
.kabdalis-snowmobile-booking .field-error{
    border-color:var(--no) !important;
    box-shadow:0 0 0 3px color-mix(in srgb, var(--no) 16%, transparent) !important;
}

/* Guide info panel + terms row + submit button — snowmobile-specific classes
   that had no CSS in v2 (the block was left depending on styles that never
   existed here). */
.snowmobile-booking-guide-info{
    padding:10px 12px; border-radius:var(--radius-sm);
    background:color-mix(in srgb, var(--accent) 6%, var(--surface2));
    border:1px solid var(--line);
}
.snowmobile-booking-guide-text{
    margin:0; font-size:.84rem; line-height:1.5; color:var(--ink-soft);
}
.snowmobile-booking-terms-section{ display:flex; flex-direction:column; gap:6px; }
.snowmobile-booking-terms-row{ display:flex; align-items:flex-start; gap:9px; }
.snowmobile-booking-checkbox{ margin-top:3px; accent-color:var(--accent); }
.snowmobile-booking-terms-link{ color:var(--accent); text-decoration:underline; text-underline-offset:2px; }
.snowmobile-booking-terms-link:hover{ color:var(--ink); }
.snowmobile-booking-submit-container{ width:100%; }
.snowmobile-booking-submit{
    width:100%; padding:13px 20px; min-height:46px;
    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;
}
.snowmobile-booking-submit:hover:not(:disabled){ opacity:.88; }
.snowmobile-booking-submit:disabled{ opacity:.55; cursor:not-allowed; }

/* Contact info-box — "Har du frågor? · phone · email". Defined here because the
   canonical rules live in table-reservation/style.css, which does not load
   on a snowmobile-only page. Supports both the flat and the icon/content
   layouts the view.js emits. */
.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-icon{ flex:0 0 auto; color:var(--accent); font-size:1rem; }
.booking-widget-info-content{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; min-width:0; }
.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; }

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

.snowmobile-booking-terms-label{
    display:flex; gap:9px; align-items:flex-start;
    font-size:.84rem; color:var(--ink-soft); line-height:1.5;
    cursor:pointer;
}
.snowmobile-booking-terms-label input{
    margin-top:3px; accent-color:var(--accent);
}

.snowmobile-booking-calendar-overlay{
    position:absolute; inset:0; z-index:4;
    display:none;
    align-items:center; justify-content:center; padding:20px;
    background:color-mix(in srgb, var(--ink) 45%, transparent);
}
.snowmobile-booking-calendar-overlay.is-open{ display:flex; }
.snowmobile-booking-calendar-dialog{
    width:100%; max-width:330px; padding:16px;
    background:var(--surface); border-radius:var(--radius);
    box-shadow:0 30px 70px -20px color-mix(in srgb, var(--ink) 60%, transparent);
}
.snowmobile-booking-calendar-month{
    display:flex; align-items:center; justify-content:space-between;
    margin-bottom:12px; font-weight:600; color:var(--ink);
}
.snowmobile-booking-calendar-prev,
.snowmobile-booking-calendar-next{
    width:32px; height:32px; border-radius:999px;
    border:1px solid var(--line); background:var(--surface); color:var(--ink);
    display:grid; place-items:center; cursor:pointer;
    transition:border-color .15s ease, color .15s ease;
}
.snowmobile-booking-calendar-prev:hover,
.snowmobile-booking-calendar-next:hover{
    border-color:var(--accent); color:var(--accent);
}
.snowmobile-booking-calendar-grid{
    display:grid; grid-template-columns:repeat(7, 1fr); gap:3px;
}
.snowmobile-booking-calendar-day{
    aspect-ratio:1 / 1;
    display:grid; place-items:center;
    border-radius:var(--radius-sm);
    background:transparent; border:1px solid transparent;
    font-family:var(--font-mono); font-size:.82rem; color:var(--ink); cursor:pointer;
    transition:background .12s ease, border-color .12s ease;
}
.snowmobile-booking-calendar-day:not(.snowmobile-booking-calendar-day-past):not(.snowmobile-booking-calendar-day-disabled):hover{
    border-color:var(--accent);
    background:color-mix(in srgb, var(--accent) 10%, transparent);
}
.snowmobile-booking-calendar-day-past,
.snowmobile-booking-calendar-day-disabled{
    color:var(--muted); opacity:.55; cursor:not-allowed;
}
.snowmobile-booking-calendar-day.is-selected{
    background:var(--accent); color:var(--on-accent);
    border-color:var(--accent);
}