/*
 * 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 Bootstrap 3 (.btn/.table/.row/...) or theme CSS.
 *
 * Selected/active states reuse the plain Bootstrap ".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 Bootstrap .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 Bootstrap's ".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 Bootstrap's ".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
   Bootstrap's ".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
   Bootstrap's ".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;
}

/* 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;
}