/**
 * Homepage search widget - tabs, search button and guests popup.
 *
 * Fields, labels, inputs, icons and the trip-type toggle are styled in the
 * widget's css='...' attribute in Views/Home/Index.cshtml (searchBar, field,
 * label, input, fieldIcon, tripToggle...). The date fields are native
 * <input type="date">: the calendar that opens is drawn by the browser and
 * cannot be styled from here.
 *
 * -- Tabs --
 * The widget renders in a shadow DOM; outside CSS reaches it only through
 * ::part(). These rules lay the tabs out as compact single-line tabs (icon
 * beside a semibold label) separated by thin vertical dividers, with no
 * boxes or shadows. Loaded after home.css, so they override its
 * ::part(product-tab) rules. The active tab's fill and the icon colours are
 * set in the widget's css='...' attribute in Views/Home/Index.cshtml
 * (tabActive / tabIcon / tabActiveIcon); the icon SVGs and their 30px size
 * are built at the top of that view.
 *
 * Tabs are sized to their content (not stretched across the panel) and
 * start-aligned. Dividers: every tab carries a divider on its start edge and
 * a -1px start margin, so the first tab's divider is pushed outside the
 * strip and clipped (::part() cannot target :first-child).
 */

travel-search-widget::part(product-tabs) {
    gap: 0;
    padding: 0;
    border-bottom: 1px solid #F1E6DE;
    background: #FFFFFF;
}

travel-search-widget::part(product-tab) {
    flex: 0 0 auto;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 0;
    margin-inline-start: -1px;
    padding: 14px 20px;
    border: 0;
    border-inline-start: 1px solid #E8DDD4;
    border-radius: 0;
    background: transparent;
    color: #3F3934;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    box-shadow: none;
    transition: background-color 0.2s ease, color 0.2s ease;
}

travel-search-widget::part(product-tab):hover {
    background: #FDF5F0;
    color: #8B2225;
}

/* Phones: narrower columns; the row still scrolls sideways. */
@media (max-width: 669px) {
    travel-search-widget::part(product-tab) {
        min-width: 0;
        padding: 12px 14px;
        font-size: 14px;
    }
}

/* ---- Dropdown layering ---------------------------------------------- */
/* The hero <section> is "isolate", so the widget's z-index (home.css) only
   counts inside it and later sections (the offers banner) painted over the
   destination suggestions and guests popup. Lift the whole hero above the
   sections after it - still below the sticky header (40) and the floating
   buttons (35). */
.home-hero-stack {
    z-index: 30;
}

/* ---- Search button ---------------------------------------------------- */
/* Overrides home.css (loaded before this file). */
travel-search-widget::part(search-button) {
    min-height: 68px;
    border-radius: 14px;
    background: linear-gradient(135deg, #B12B30, #8B2225);
    font-size: 16px;
    letter-spacing: 0.08em;
    box-shadow: 0 12px 24px -12px rgba(139, 34, 37, 0.85);
    transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

travel-search-widget::part(search-button):hover {
    filter: brightness(1.06);
    box-shadow: 0 16px 28px -12px rgba(139, 34, 37, 0.9);
}

/* ---- Guests & rooms popup --------------------------------------------- */
travel-search-widget::part(traveller-popup) {
    border-color: #E8DDD4;
    border-radius: 16px;
    box-shadow: 0 24px 48px -20px rgba(31, 26, 23, 0.45);
}

@media (prefers-reduced-motion: reduce) {
    travel-search-widget::part(product-tab) {
        transition: none;
    }

    travel-search-widget::part(search-button) {
        transition: none;
    }
}

/* ---- Search-panel calendar (js/apps/home/search-panel.js) --------------- */
/* Same look as the site's own date selector grid
   (Views/Shared/Travel/DateSelector/_CalendarGrid.cshtml): bold caption,
   chevron buttons, rounded day cells, brand-red start/end, light-red range. */
.spcal {
    position: fixed;
    z-index: 45;
    width: 320px;
    max-width: calc(100vw - 24px);
    padding: 16px;
    border: 1px solid #E8DDD4;
    border-radius: 16px;
    background: #FFFFFF;
    color: var(--color-ink, #1F1A17);
    font-family: inherit;
    box-shadow: 0 24px 48px -20px rgba(31, 26, 23, 0.45);
}

.spcal:has(.spcal-month + .spcal-month) {
    width: 620px;
}

.spcal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.spcal-caption {
    font-size: 15px;
    font-weight: 700;
}

.spcal-nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid #EFE3DA;
    border-radius: 10px;
    background: #FFFFFF;
    color: var(--color-ink-muted, #6B625C);
    cursor: pointer;
}

.spcal-nav svg {
    width: 17px;
    height: 17px;
}

.spcal-nav:hover:not(:disabled) {
    background: var(--color-primary-light, #FBEFE3);
    color: var(--color-primary, #8B2225);
}

.spcal-nav:disabled {
    opacity: 0.3;
    cursor: default;
}

[dir="rtl"] .spcal-nav svg {
    transform: scaleX(-1);
}

.spcal-months {
    display: flex;
    gap: 24px;
}

.spcal-month {
    flex: 1;
    min-width: 0;
}

.spcal-month-label {
    margin-bottom: 10px;
    font-size: 14px;
    font-weight: 700;
    text-align: center;
}

.spcal-weekdays,
.spcal-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 2px;
    text-align: center;
}

.spcal-weekdays {
    margin-bottom: 4px;
    color: var(--color-ink-muted, #6B625C);
    font-size: 11px;
    font-weight: 600;
}

.spcal-day {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--color-ink, #1F1A17);
    font: inherit;
    font-size: 13.5px;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.spcal-day:hover:not(:disabled),
.spcal-day[data-state="between"],
.spcal-day[data-state="hover"] {
    background: var(--color-primary-light, #FBEFE3);
}

.spcal-day[data-state="start"],
.spcal-day[data-state="end"] {
    background: var(--color-primary, #8B2225);
    color: #FFFFFF;
    font-weight: 700;
}

.spcal-day[data-state="unavailable"] {
    color: var(--color-ink-disabled, #B8B0AA);
    opacity: 0.5;
    cursor: not-allowed;
}

.spcal-today:not([data-state="start"]):not([data-state="end"]) {
    box-shadow: inset 0 0 0 1px var(--color-primary, #8B2225);
    font-weight: 700;
}

.spcal-day:focus-visible,
.spcal-nav:focus-visible {
    outline: 2px solid var(--color-primary, #8B2225);
    outline-offset: 1px;
}

.spcal-foot {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid #F1E6DE;
    color: var(--color-ink-muted, #6B625C);
    font-size: 13px;
    font-weight: 600;
    text-align: center;
}

@media (prefers-reduced-motion: reduce) {
    .spcal-day {
        transition: none;
    }
}