@layer components {
/* Booking date row for the key transaction info card. */

.psw-booking-date {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);           /* date -> time: 4px mobile, 8px desktop */
    width: 100%;
    min-width: 0;
}

.psw-stack [x-cloak].psw-booking-date {
    display: none !important;
}

.psw-booking-date__date {
    color: var(--color-gray-700);
    font-family: var(--font-sans);
    font-size: var(--text-heading-xs);
    font-weight: var(--font-weight-bold);
    line-height: var(--text-heading-xs--line-height);
}

.psw-booking-date__time {
    color: var(--color-gray-600);
    font-family: var(--font-sans);
    font-size: var(--text-paragraph-md);
    font-weight: var(--font-weight-regular);
    line-height: var(--text-paragraph-md--line-height);
    overflow-wrap: anywhere;
}

.psw-booking-date--reservation {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr);
    align-items: stretch;
    gap: var(--space-2);
}

/* Top-aligned: when one column's time range wraps, the other column's rows
   stay on the same baselines instead of drifting to a centered midpoint. */
.psw-booking-date__reservation-column {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: var(--space-1);           /* label/date/time: 4px mobile, 8px desktop */
    min-width: 0;
}

.psw-booking-date__reservation-column--checkout {
    align-items: flex-end;
    text-align: right;
}

.psw-booking-date__reservation-divider {
    width: 1px;
    min-height: 92px;
    background-color: var(--color-gray-200);
    justify-self: center;
}

/* Show more / Show less — both buttons are the tertiaryLink variant (theme
   color, underline, hover/pressed overlays all come from psw-btn); this wrapper
   only places them and shows the one that matches the current state. */
.psw-booking-date__toggle {
    display: inline-flex;
    align-self: flex-start;
    min-width: 0;
    margin-top: var(--space-4);
}

.psw-stack--with-dividers > .psw-booking-date__toggle {
    margin-top: var(--space-4);
    padding-top: 0;
    border-top: 0;
}

.psw-booking-date__toggle-less,
.psw-booking-date__toggle--expanded .psw-booking-date__toggle-more {
    display: none;
}

.psw-booking-date__toggle--expanded .psw-booking-date__toggle-less {
    display: inline-flex;
}

.psw-booking-date__reservation-label,
.psw-booking-date__reservation-time {
    color: var(--color-gray-600);
    font-family: var(--font-sans);
    font-size: var(--text-paragraph-md);
    font-weight: var(--font-weight-regular);
    line-height: var(--text-paragraph-md--line-height);
}

.psw-booking-date__reservation-date {
    color: var(--color-gray-700);
    font-family: var(--font-sans);
    font-size: var(--text-heading-xs);
    font-weight: var(--font-weight-bold);
    line-height: var(--text-heading-xs--line-height);
}

@media (min-width: 769px) {
    /* Session rhythm: 16px mobile (the stack default) / 24px desktop, so the
       dividers between dates match the card's desktop section rhythm and the
       date sits 24px below the header (Figma 1850:13128). */
    .psw-booking-date-stack.psw-stack--with-dividers {
        --psw-stack-gap: var(--space-6);
    }

    .psw-booking-date {
        gap: var(--space-2);
    }

    .psw-booking-date__reservation-column {
        gap: var(--space-2);
    }

    /* 24px above the toggle on desktop, matching the card's section rhythm. */
    .psw-booking-date__toggle,
    .psw-stack--with-dividers > .psw-booking-date__toggle {
        margin-top: var(--space-6);
    }

    .psw-booking-date__date {
        font-size: var(--text-heading-md);
        line-height: var(--text-heading-md--line-height);
    }

    .psw-booking-date__time {
        font-size: var(--text-paragraph-lg);
        line-height: var(--text-paragraph-lg--line-height);
    }

    .psw-booking-date__reservation-label,
    .psw-booking-date__reservation-time {
        font-size: var(--text-paragraph-lg);
        line-height: var(--text-paragraph-lg--line-height);
    }

    .psw-booking-date__reservation-date {
        font-size: var(--text-heading-md);
        line-height: var(--text-heading-md--line-height);
    }
}
}