/*
 * Shared citizen calendar + slots component styles (GovConnect).
 *
 * The month calendar and the layout B times panel look identical on the booking
 * wizard's Date & time step and on the reschedule page. These rules are the ONE
 * home for that component so the two cannot drift (a Bootstrap spinner and a
 * hover white-out both slipped through when this lived twice). Page-specific
 * chrome around the component - the booking wizard's two-column shell and slot
 * header, the reschedule page's current-appointment block - stays in each page.
 *
 * Uses the gc- design tokens from citizen-ui.css and its gc-fade-in keyframe;
 * loaded site-wide via hooks.web_include_css, after citizen-ui.css.
 */

/* ---------------------------------------------------------- calendar header */
.bw-cal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.bw-cal-head .bw-cal-title {
    font-size: 14.5px;
    font-weight: 600;
}

.bw-cal-nav {
    display: flex;
    gap: 6px;
}

.bw-cal-nav button {
    width: 34px;
    height: 34px;
    border: 1px solid var(--gc-hairline);
    border-radius: var(--gc-radius);
    background: var(--gc-surface);
    color: var(--gc-ink-2);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bw-cal-nav button svg {
    width: 15px;
    height: 15px;
}

.bw-cal-nav button[disabled] {
    opacity: .35;
    cursor: not-allowed;
}

/* ------------------------------------------------------------ calendar grid */
.bw-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 4px;
    /* Eases from the held-back (dimmed) loading state to full as the dots resolve. */
    transition: opacity .28s ease;
}

.bw-cal-dow {
    text-align: center;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: .06em;
    color: var(--gc-faint);
    padding: 4px 0;
}

.bw-day {
    aspect-ratio: 1;
    min-height: 40px;
    border: 1px solid transparent;
    border-radius: var(--gc-radius);
    background: none;
    font-size: 13.5px;
    color: var(--gc-ink);
    cursor: pointer;
    font-variant-numeric: tabular-nums;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 0;
    transition: background-color .14s ease, border-color .14s ease, color .14s ease, transform .14s ease;
}

.bw-day .bw-day-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--gc-success);
}

/* Hover only the days that are NOT the selected one, and set the text colour
   explicitly, so a selected date can never end up white text on a light hover
   background (the reported "date whites out on hover" bug). */
.bw-day:hover:not([disabled]):not(.bw-sel) {
    background: var(--gc-tint);
    border-color: var(--gc-hairline);
    color: var(--gc-ink);
    transform: translateY(-1px);
}

/* Settles on press, so a tap reads as a physical click on every date. */
.bw-day:active:not([disabled]) {
    transform: translateY(0);
}

.bw-day:focus-visible {
    outline: 3px solid var(--gc-gold);
    outline-offset: 1px;
}

.bw-day[disabled] {
    color: #C4C4C4;
    cursor: not-allowed;
}

.bw-day[disabled] .bw-day-dot {
    display: none;
}

.bw-day.bw-today {
    border-color: var(--gc-hairline);
}

.bw-day.bw-sel {
    background: var(--gc-navy);
    color: #fff;
    border-color: var(--gc-navy);
}

/* The selected date keeps navy-on-white contrast on hover and focus. */
.bw-day.bw-sel:hover:not([disabled]) {
    background: var(--gc-navy-light);
    color: #fff;
    border-color: var(--gc-navy-light);
}

.bw-day.bw-sel .bw-day-dot {
    background: var(--gc-gold);
}

/* While a month is loading or failed, the grid is not the final answer yet, so it
   is visibly held back and non-interactive - never mistakable for a fully loaded
   month with no availability. */
.bw-cal-grid.bw-grid-pending {
    opacity: .5;
    pointer-events: none;
}

.bw-day.bw-day-pending,
.bw-day.bw-day-pending[disabled] {
    color: var(--gc-faint);
    cursor: default;
}

/* -------------------------------------------------- availability status line */
/* Announces the month's honest state (still checking / loaded / none / failed)
   to screen readers; the spinner is decorative on top. */
.bw-cal-status {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    line-height: 1.35;
    padding: 8px 10px;
    margin-bottom: 8px;
    border-radius: var(--gc-radius);
    background: var(--gc-tint);
    color: var(--gc-faint);
    animation: gc-fade-in .18s ease-out;
}

.bw-cal-status:empty {
    display: none;
}

.bw-cal-status[data-state="empty"] {
    background: #FFF6E6;
    color: #7A5712;
}

.bw-cal-status[data-state="error"] {
    background: #FDECEC;
    color: #A31515;
    justify-content: space-between;
    gap: 10px;
}

.bw-cal-status .bw-cal-status-retry {
    flex: 0 0 auto;
}

.bw-spin {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: bw-spin .7s linear infinite;
}

@keyframes bw-spin {
    to { transform: rotate(360deg); }
}

/* ---------------------------------------------------------- times panel (B) */
/* A fixed-height panel that scrolls INTERNALLY so a dense day never grows the
   page. Applied as a class so both pages' slot containers share it. */
.bw-slots-scroll {
    max-height: 340px;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 4px;
}

/* Sticky part-of-day sub-heading with its availability count; pins to the top of
   the scroll panel, not the viewport. */
.bw-sg {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--gc-surface);
    padding: 8px 0 6px;
    margin-bottom: 2px;
}

.bw-sg + .bw-slot-list {
    margin-bottom: 6px;
}

.bw-sg-label {
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--gc-navy);
    text-transform: uppercase;
}

.bw-sg-count {
    font-size: 11px;
    font-weight: 700;
    color: var(--gc-body);
    background: var(--gc-tint);
    border: 1px solid var(--gc-hairline);
    border-radius: 999px;
    padding: 1px 8px;
}

/* Compact multi-column chip grid: more times per row, less height. */
.bw-slot-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
    gap: 8px;
}

.bw-slot {
    border: 1px solid var(--gc-hairline);
    border-radius: var(--gc-radius);
    background: var(--gc-surface);
    color: var(--gc-ink);
    font-size: 14px;
    font-weight: 600;
    min-height: 46px;
    padding: 11px 8px;
    cursor: pointer;
    text-align: center;
    font-variant-numeric: tabular-nums;
    transition: border-color .12s ease, background-color .12s ease, box-shadow .12s ease, transform .12s ease;
}

.bw-slot:hover:not(.bw-sel) {
    border-color: var(--gc-navy);
    box-shadow: 0 0 0 3px rgba(0, 59, 92, .08);
    color: var(--gc-ink);
    transform: translateY(-1px);
}

.bw-slot:active:not(.bw-sel) {
    transform: translateY(0);
}

/* Keyboard focus outline on every time chip - now on both booking and reschedule
   (reschedule's chips lacked this before the shared component). */
.bw-slot:focus-visible {
    outline: 3px solid var(--gc-gold);
    outline-offset: 1px;
}

.bw-slot.bw-sel {
    background: var(--gc-navy);
    border-color: var(--gc-navy);
    color: #fff;
}

/* -------------------------------------------------- calendar/slot animations */
/* Month change slides the grid in from the direction of travel. Transform ONLY,
   so it never fights the dimmed (opacity .5) loading state of a not-yet-loaded
   month. Collapsed under prefers-reduced-motion by the global reset. */
.bw-cal-grid.bw-cal-in-fwd {
    animation: bw-cal-in-fwd .26s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.bw-cal-grid.bw-cal-in-back {
    animation: bw-cal-in-back .26s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes bw-cal-in-fwd {
    from { transform: translateX(14px); }
    to { transform: translateX(0); }
}

@keyframes bw-cal-in-back {
    from { transform: translateX(-14px); }
    to { transform: translateX(0); }
}

/* A gentle pop on the day just picked (added only when the selection changes). */
.bw-day.bw-day-pop {
    animation: bw-day-pop .28s ease;
}

@keyframes bw-day-pop {
    0% { transform: scale(1); }
    40% { transform: scale(1.12); }
    100% { transform: scale(1); }
}

/* The times panel fades and rises when a new day's slots appear or replace. */
.bw-slots-scroll.bw-slots-in {
    animation: bw-slots-in .26s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes bw-slots-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}