/* KabDateInput — styles for the shared single-date picker (kab-date-input.js).
 *
 * The input keeps whatever field styling its form gives it (.b-input,
 * .conference-booking-input, …); this file only adds the calendar affordance
 * icon + invalid state, and styles the .kab-date-pop popup whose grid comes
 * from BookingCalendarUtils (classPrefix "kab-date"). */

input[data-kab-date]{
    /* calendar glyph, right-aligned 12px in — matches the select chevron inset */
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23837a6b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M8 3v4M16 3v4M3 10h18'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 12px center;
    background-size:16px 16px;
    padding-right:38px;
}
input[data-kab-date].is-invalid{
    border-color:var(--no, #b3261e);
    box-shadow:0 0 0 3px rgba(179, 38, 30, .14);
}

/* ---------- popup ---------- */

.kab-date-pop{
    position:absolute;
    z-index:100000; /* above sticky headers and booking modals */
    background:var(--surface, #fff);
    border:1px solid var(--line, #e4ded2);
    border-radius:var(--radius, 12px);
    box-shadow:0 18px 40px -18px rgba(0, 0, 0, .28);
    padding:12px;
    color-scheme:light;
    animation:kab-date-in .14s ease;
}
.kab-date-pop[hidden]{ display:none; }
.kab-date-pop--above{ box-shadow:0 -12px 36px -18px rgba(0, 0, 0, .28); }
@keyframes kab-date-in{
    from{ opacity:0; transform:translateY(-4px); }
}
.kab-date-pop--above{ animation-name:kab-date-in-up; }
@keyframes kab-date-in-up{
    from{ opacity:0; transform:translateY(calc(-100% + 4px)); }
    to{ opacity:1; transform:translateY(-100%); }
}

.kab-date-head{
    display:flex; align-items:center; justify-content:space-between;
    gap:8px; margin-bottom:8px;
}
.kab-date-label{
    font-weight:600; font-size:.95rem;
    color:var(--ink, #25211b);
    text-transform:capitalize;
}
.kab-date-nav{
    width:34px; height:34px;
    border-radius:8px;
    border:1px solid var(--line, #e4ded2);
    background:var(--surface, #fff);
    color:var(--ink, #25211b);
    display:grid; place-items:center;
    cursor:pointer;
    transition:border-color .15s ease, color .15s ease;
}
.kab-date-nav:hover{ border-color:var(--accent); color:var(--accent); }

.kab-date-grid{
    display:grid;
    grid-template-columns:repeat(7, 1fr);
    gap:2px;
}
.kab-date-calendar-day-header{
    text-align:center;
    font-family:var(--font-mono, ui-monospace, monospace);
    font-size:.68rem; text-transform:uppercase; letter-spacing:.04em;
    color:var(--muted, #8a8175);
    padding:4px 0;
}
.kab-date-calendar-day{
    display:grid; place-items:center;
    height:36px; min-width:36px;
    border-radius:8px;
    font-size:.9rem;
    color:var(--ink, #25211b);
    cursor:pointer;
    transition:background .12s ease;
}
.kab-date-calendar-day:hover{ background:var(--surface2, #f5f1ea); }
.kab-date-calendar-day.is-selected{
    background:var(--accent, #ef9300);
    color:#fff; font-weight:600;
}
/* Past dates stay clickable (data-min decides) — just muted. */
.kab-date-calendar-day-past{ color:var(--muted, #8a8175); }
/* Out-of-bounds dates (data-min/data-max) are visibly off. */
.kab-date-calendar-day-disabled{
    color:var(--muted, #8a8175);
    opacity:.38;
    cursor:not-allowed;
    text-decoration:line-through;
}

@media (prefers-reduced-motion: reduce){
    .kab-date-pop{ animation:none; }
    .kab-date-calendar-day{ transition:none; }
}