/*
 * Shared visual styles for the kr-cal-* booking widgets (month grid, slot
 * grid, session list). Scoped entirely under kr-cal-* class names so it can't
 * collide with the base stylesheet (.btn/.table/.row/...) or theme CSS.
 *
 * Selected/active states reuse the plain ".btn-primary" class
 * instead of a new color variable, so they automatically pick up whatever
 * primary-button color each tenant already configured in the theme editor -
 * no new color-theming plumbing needed.
 */

/* width/box-sizing are load-bearing, not decoration: every kr-cal-* widget can land
   inside a theme's .input-group (display:table), and a display:grid child's
   intrinsic size contributes 0 to table auto-layout in that context - the grid then
   renders as a single collapsed column instead of filling its cell. An explicit width
   takes the box out of that shrink-to-fit sizing path entirely. */
.kr-cal-widget {
    width: 100%;
    font-size: 13.5px;
}

.kr-cal-disabled {
    opacity: 0.5;
    pointer-events: none;
}

/* A real <select> stays in the DOM for form submission (name attribute) and for
   scripts that still read/write it directly; only its native UI is hidden once a
   kr-cal-slots grid mirrors it. !important because theme stylesheets routinely ship
   their own ".input-group .form-control { display: table-cell }" (or similar) at
   higher specificity than a single scoped class + type selector can beat on its own. */
.kr-cal-select-hidden > select {
    display: none !important;
}

/* Plain block wrapper for a date/time field - replaces the base ".input-group"
   (display:table). Nothing in this widget needs table layout, and it's what caused
   the .kr-cal-slots collapse fixed above in the first place; a field that never
   carries that class can't regress into the same trap. */
.kr-cal-field {
    width: 100%;
    box-sizing: border-box;
}

/* Row of adjacent native selects (e.g. split hour/minute/meridian time inputs) - replaces an
   inline "style=display:flex;gap:8px". */
.kr-cal-field-row {
    display: flex;
    gap: 8px;
}

/* Label above a date/time field - replaces the base ".text-left"/".mt-sm" combo. Small-caps
   treatment (matches the "CRÉNEAU DE DÉPÔT" style in the design) instead of a plain sentence,
   so it reads as a section heading rather than a form-field caption. */
.kr-cal-field-label {
    display: block;
    margin: 16px 0 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #98a2b3;
}

/* Spacing between stacked field groups (e.g. pickup/return time rows) - replaces an inline
   "style=margin-top:10px". */
.kr-cal-field-group {
    margin-top: 10px;
}

/* Multisession "Session N" heading - replaces a bare <h4 style="margin-bottom:0">, sized down
   to fit the rest of this widget's typography instead of a full default heading. */
.kr-cal-session-heading {
    margin: 20px 0 0;
    font-size: 15px;
    font-weight: 700;
    color: #172033;
}

/* Self-contained show/hide toggle for this widget's own loader/field swaps - replaces
   the base ".hidden" utility so showing/hiding a field never depends on the theme
   actually shipping (or not overriding) that class. */
.kr-cal-hidden {
    display: none !important;
}

/* A handful of native <select>s never get a kr-cal-slots mirror (e.g. the split
   hour/minute/meridian time inputs) and stay on screen as themselves - replaces
   the base ".form-control" so they still look intentional without it. */
.kr-cal-native-select {
    width: 100%;
    box-sizing: border-box;
    min-height: 45px;
    padding: 8px 12px;
    border: 1.5px solid #e6eaf0;
    border-radius: 10px;
    background: #fff;
    color: #172033;
    font-size: 14px;
}

/* Month grid */

.kr-cal-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 4px 0 10px;
}

/* Selection summary shown above the submit button once a date and time are both picked. */
.kr-cal-summary {
    display: block;
    width: 100%;
    margin: 12px 0 0;
    padding: 10px 14px;
    border: none;
    border-radius: 10px;
    background: #f3f4f6;
    color: #4b5563;
    font-size: 13px;
    text-align: center;
    box-sizing: border-box;
}

/* A summary that points at what is missing - the date-range grid's end date, when the form
   was submitted without one. */
.kr-cal-summary.is-warning {
    background: #fff4e5;
    color: #9a3412;
}

/* Legacy Booking date range (Booking/templates/cell/MiniForm/display.php). Themes derived from
   kindshare draw .date_range_box as a bordered strip for two small date inputs; since the
   inline grid replaced those inputs it framed the whole calendar edge to edge instead.
   booking_calendar_grid.js adds .kr-cal-range once the grid is in place, so a theme whose
   script never ran keeps its own box. */
.date_range_box.kr-cal-range {
    border: 0;
    padding: 0;
    margin-bottom: 12px;
}

/* Stylesheets written for the two inputs lay the box out in two columns, start and end
   (rental-template's: a grid of two halves, !important). The calendar then sat in the
   start half, at half the width of the booking box. Once the grid is in, the box holds
   one column and no frame of its own. The sidebar selectors outrank those stylesheets. */
.date_range_box.kr-cal-range > div,
.listing_info_sidebar .date_range_box.kr-cal-range > div {
    display: block !important;
    margin: 0 !important;
}

.date_range_box.kr-cal-range .kr-cal-field,
.listing_info_sidebar .date_range_box.kr-cal-range .kr-cal-field {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}

.listing_info_sidebar .date_range_box.kr-cal-range {
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
}

/* Multisession only - a completed session's summary is a <button> the customer can click to
   reopen its calendar + time grid, unlike the plain single-session <p> summary. */
.kr-cal-summary-editable {
    cursor: pointer;
    font-family: inherit;
}

.kr-cal-summary-editable:hover,
.kr-cal-summary-editable:focus-visible {
    background: #e9eaed;
}

.kr-cal-month-label {
    font-weight: 700;
    font-size: 15px;
    color: #172033;
    text-transform: capitalize;
}

.kr-cal-nav-btn {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    border: 1.5px solid #e6eaf0;
    background: #fff;
    color: #3d4653;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.kr-cal-nav-btn.is-disabled,
.kr-cal-nav-btn:disabled {
    color: #cfd6e0;
    cursor: default;
}

.kr-cal-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    margin-bottom: 4px;
}

.kr-cal-weekday {
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    color: #98a2b3;
}

.kr-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}

/* !important on the box-model properties (not the colors) - a selected day also carries
   .btn-primary (see header comment), and unlike a plain color rule, there's normally no
   competing declaration of our own for width/min-width/padding/margin at all, so a
   tenant's own ".btn-primary" (sized for a full CTA button elsewhere on their site, e.g.
   "min-width: 170px") wins by simple default and stretches the selected cell across
   several grid columns - not a specificity fight to lose, just an empty seat to fill. */
.kr-cal-day {
    height: 36px !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1;
    padding: 0 !important;
    border: 1.5px solid #eef1f5;
    color: #172033;
    cursor: pointer;
    box-sizing: border-box;
}

/* Default white background lives here, not on the bare .kr-cal-day rule above -
   a selected day also carries .btn-primary (see header comment), and a plain
   ".kr-cal-day { background: #fff }" is the same specificity as the theme's
   ".btn-primary { background-color: ... }", so it would win on source order
   alone and paint every selected day white-on-white regardless of the tenant's
   actual primary color. Excluding .btn-primary here removes the conflict
   instead of out-specificity-ing it. */
.kr-cal-day:not(.btn-primary) {
    background: #fff;
}

.kr-cal-day-blank {
    visibility: hidden;
    border: none;
}

.kr-cal-day.is-disabled {
    color: #cfd6e0;
    cursor: default;
    border-color: transparent;
    background: transparent;
}

.kr-cal-day.is-selected,
.kr-cal-day.is-range-start,
.kr-cal-day.is-range-end {
    border-color: transparent;
    color: #fff;
}

.kr-cal-day.is-in-range {
    border-color: transparent;
    background: color-mix(in srgb, currentColor 14%, #fff);
}

/* Time-slot grid */

.kr-cal-slots {
    display: grid;
    grid-template-columns: repeat(var(--kr-cal-slot-cols, 3), 1fr);
    gap: 8px;
}

/* Same box-model hardening as .kr-cal-day above, same reason: a selected slot also
   carries .btn-primary, and a tenant theme's own min-width/padding/margin on that class
   would otherwise apply completely unopposed. */
.kr-cal-slot {
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 14px 0 !important;
    border-radius: 10px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    border: 1.5px solid #e6eaf0;
    color: #172033;
    box-sizing: border-box;
}

/* Same reasoning as .kr-cal-day:not(.btn-primary) above - keeps a selected slot's
   .btn-primary background from being clobbered by an equal-specificity default. */
.kr-cal-slot:not(.btn-primary) {
    background: #fff;
}

.kr-cal-slot.is-disabled {
    cursor: not-allowed;
    background: #f1f3f7;
    color: #b7bfca;
    text-decoration: line-through;
    border-color: #e6eaf0;
}

.kr-cal-slot.is-selected {
    border-color: transparent;
    color: #fff;
}

/* "See more" toggle for a collapsed .kr-cal-slots grid (see renderSlotGrid's maxVisible) -
   spans every column so it sits on its own row below the visible slots, not squeezed into
   whatever column happens to be next. */
.kr-cal-slots-more {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: auto;
    margin: 4px auto 0;
    padding: 8px 16px;
    border-radius: 999px;
    border: 1.5px solid #e6eaf0;
    background: #fff;
    color: #4b5563;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.kr-cal-slots-more svg {
    flex: 0 0 auto;
    width: 14px;
}

/* Session list (event bookings) */

.kr-cal-sessions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.kr-cal-session {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 12px;
    cursor: pointer;
    width: 100%;
    text-align: left;
    border: 1.5px solid #e6eaf0;
    background: #fff;
}

.kr-cal-session.is-selected {
    border-color: transparent;
    background: color-mix(in srgb, currentColor 8%, #fff);
}

.kr-cal-session.is-disabled {
    cursor: default;
    opacity: 0.55;
}

/* Same box-model hardening as .kr-cal-day/.kr-cal-slot - the dot also carries
   .btn-primary when selected. */
.kr-cal-session-dot {
    width: 18px !important;
    height: 18px !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 50%;
    flex: 0 0 auto;
    box-sizing: border-box;
    border: 2px solid #cfd6e0;
}

.kr-cal-session-dot.btn-primary {
    border: 5px solid transparent;
}

.kr-cal-session-text {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

.kr-cal-session-label {
    font-weight: 600;
    font-size: 14.5px;
    color: #172033;
}

.kr-cal-session-sublabel {
    font-size: 12.5px;
    color: #98a2b3;
}

.kr-cal-session-badge {
    font-size: 12.5px;
    font-weight: 600;
    padding: 4px 9px;
    border-radius: 20px;
    white-space: nowrap;
    color: #16a34a;
    background: #eafaf0;
}

.kr-cal-session-badge.is-low {
    color: #c2410c;
    background: #fff2e8;
}

.kr-cal-empty {
    margin: 0;
    padding: 12px 0;
    color: #98a2b3;
    font-size: 13.5px;
    text-align: center;
}