/* Homepage controls: one system for buttons, chips, icons and focus across every small component on the page.
   Loaded only by pages/home, last, so it can harmonise the section and component stylesheets before it.

   Sizes   icon button 44px circle · text button 44px pill, 14px/600 · form controls 48px
   Kinds   primary (indigo ink) · secondary (hairline, fills with ink) · glass (night surfaces, photos) · accent (coral, one conversion CTA)
   Motion  press scales to .96 · arrows nudge 3px on hover · one indigo focus ring, lightened on night surfaces */
:root {
    --ui-ink: #141838; --ui-ink-hover: #2a3170; --ui-line: #dde0f2; --ui-tint: #e9ebf8; --ui-tint-ink: #3f47b8;
    --ui-accent: #e5484f; --ui-accent-hover: #d23a41;
    --ui-focus: #4f57d8;
    --ui-ease: cubic-bezier(.2, .7, .2, 1);
}
.home-hero, .home-dmo-spotlight, .iswhere-footer, .home-discovery-section--sticky.is-over-day { --ui-focus: #a3a9ff; }

/* Focus: the same ring everywhere. */
:is(main, .iswhere-footer) :is(a, button, select, input, [tabindex]):focus-visible,
.iw-city-hero :is(button, a, canvas):focus-visible { outline: 2px solid var(--ui-focus); outline-offset: 2px; }
.dmo-stage .dmo-stage-link:focus-visible { outline-offset: -6px; }

/* Icons drawn inline share one stroke. */
.iw-icon { width: 18px; height: 18px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
[dir="rtl"] :is(.travel-service-compact-action, .travel-service-action, .recommendation-card-arrow) .iw-icon { transform: scaleX(-1); }

/* Press feedback for every button-like control. */
:is(.iw-btn, .hero-store-badges a, .hero-carousel-btn, .dmo-stage-btn, .featured-flow-btn, .home-slider-btn:not(:disabled), .travel-service-compact-action,
    .home-search-card--compact .location-switch, .home-search-card--compact .home-direct-search, #directSearchDialog button):active {
    transform: scale(.96);
}

/* Icon buttons. */
:is(.featured-flow-btn, .home-slider-btn) {
    display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--ui-line); border-radius: 50%;
    background: #fff; color: var(--ui-ink); transition: background .2s, color .2s, border-color .2s, opacity .2s, transform .15s var(--ui-ease);
}
:is(.featured-flow-btn, .home-slider-btn):hover:not(:disabled) { border-color: var(--ui-ink); background: var(--ui-ink); color: #fff; }
:is(.featured-flow-btn, .home-slider-btn) svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
[dir="rtl"] :is(.featured-flow-btn, .home-slider-btn) svg { transform: scaleX(-1); }
.home-slider-btn:disabled { opacity: .35; cursor: default; }
.dmo-stage-btn { transition: background .2s, border-color .2s, transform .15s var(--ui-ease); }
#recommendedAreasModal .recommended-areas-close,
#directSearchDialog [data-direct-search-close] { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; }
/* The dock's search control is an icon button like its neighbours, not a stretched blank tile. */
.home-search-card--compact .home-direct-search { flex: 0 0 44px; width: 44px; height: 44px; min-width: 0; align-self: center; border-radius: 50%; }
.home-search-card--compact .home-direct-search svg { width: 20px; height: 20px; }

/* The dock hugs its contents on wide screens, so no dead space trails after Map View; max-width still caps it. */
@media (min-width: 992px) {
    .home-discovery-card.home-search-card--compact { width: fit-content; }
}

/* Phones: the dock is a size smaller, and its action row shares the full width like a tab bar,
   so nothing trails after Map View. Touch targets stay at 40px or more. */
@media (max-width: 767px) {
    .home-discovery-card.home-search-card--compact { padding: 8px; }
    .home-search-card--compact .home-discovery-location-btn { min-height: 56px; padding: 6px 8px; gap: 10px; }
    .home-search-card--compact .home-near-pin { flex-basis: 36px; width: 36px; height: 36px; }
    .home-search-card--compact .home-near-value { font-size: 16px; }
    .home-search-card--compact .home-discovery-label { font-size: 11px; }
    .home-search-card--compact .location-switch { flex-basis: 40px; width: 40px; height: 40px; }
    .home-search-card--compact .home-discovery-search-row { gap: 6px; }
    .home-search-card--compact .home-direct-search { flex-basis: 40px; width: 40px; height: 40px; }
    .home-search-card--compact :is(.home-ask-launch, .location-map-btn) { flex: 1 1 0; justify-content: center; min-width: 0; max-width: none; min-height: 48px; padding: 6px 8px; }
    .home-search-card--compact .home-ask-launch img { flex-basis: 28px; width: 28px; height: 28px; }

    .home-discovery-section--sticky.is-compact .home-discovery-card { padding: 5px; }
    .home-discovery-section--sticky.is-compact .home-discovery-location-btn { min-height: 44px; padding: 2px 6px; gap: 8px; }
    .home-discovery-section--sticky.is-compact .home-near-pin { flex-basis: 30px; width: 30px; height: 30px; }
    .home-discovery-section--sticky.is-compact .home-near-value { font-size: 15px; }
    .home-discovery-section--sticky.is-compact .home-discovery-label { font-size: 10.5px; }
    .home-discovery-section--sticky.is-compact :is(.home-ask-launch, .location-map-btn) { min-height: 40px; padding: 2px 8px; }
    .home-discovery-section--sticky.is-compact .home-ask-launch img { flex-basis: 24px; width: 24px; height: 24px; }
    .home-discovery-section--sticky.is-compact .home-near-map { width: 20px; height: 20px; }
}

/* Text buttons. */
.home-app-slide .hero-app-how .iw-btn-glass { gap: 8px; min-height: 44px; padding: 0 20px; font-size: 14px; font-weight: 600; letter-spacing: .01em; }
.travel-service-compact-action {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 20px;
    font-size: 14px; font-weight: 600; transition: background .2s, color .2s, transform .15s var(--ui-ease);
}
.travel-service-compact-action .iw-icon { transition: transform .3s var(--ui-ease); }
.travel-service-card:hover .travel-service-compact-action { background: var(--ui-ink); color: #fff; }
.travel-service-card:hover .travel-service-compact-action .iw-icon { transform: translateX(3px); }
#directSearchDialog input { min-height: 48px; }
#directSearchDialog button[type="submit"] { min-height: 48px; padding: 0 24px; font-size: 14px; }
#directSearchDialog button[type="submit"]:hover { background: var(--ui-ink-hover); }

/* Primary on night surfaces inverts to white with ink text; coral stays reserved for the footer conversion. */
.home-hero-travel-service .hero-actions .iw-btn-primary {
    min-height: 44px; padding: 0 22px; background: #fff; box-shadow: none; color: var(--ui-ink) !important; font-size: 14px; font-weight: 600;
}
.home-hero-travel-service .hero-actions .iw-btn-primary:hover { background: #e9ebf8; color: var(--ui-ink) !important; }
.home-hero-travel-service .travel-service-hero-kicker { height: 30px; padding: 0 12px; font-size: 11px; font-weight: 600; letter-spacing: .14em; }

/* Hero: store badges share one height and lift together; the carousel controls sit in one cluster under the copy. */
.hero-store-badges { gap: 12px; }
.hero-store-badges a { border-radius: 10px; transition: transform .2s var(--ui-ease), opacity .2s; }
.hero-store-badges img { height: 46px; }
.hero-carousel-nav { position: absolute; inset: auto 0 84px; z-index: 6; pointer-events: none; }
.hero-carousel-nav .container { display: flex; align-items: center; gap: 14px; }
.hero-carousel-nav .container > * { pointer-events: auto; }
.home-hero-slider .hero-carousel-nav .hero-carousel-btn {
    position: static; display: grid; place-items: center; flex: 0 0 44px; width: 44px; height: 44px; padding: 0;
    border: 1px solid #ffffff38; border-radius: 50%; background: #ffffff14; color: #fff; opacity: 1; transform: none;
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: background .2s, border-color .2s, transform .15s var(--ui-ease);
}
.home-hero-slider .hero-carousel-nav .hero-carousel-btn:hover { border-color: #ffffff6b; background: #ffffff29; }
.home-hero-slider .hero-carousel-nav .hero-carousel-btn:active { transform: scale(.96); }
.hero-carousel-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
[dir="rtl"] .hero-carousel-btn svg { transform: scaleX(-1); }
/* Slide pills: the active one stretches, echoing the story bars and chapter progress elsewhere. */
.home-hero-slider .hero-carousel-nav .carousel-indicators { position: static; z-index: auto; display: flex; align-items: center; gap: 6px; margin: 0; padding: 0; }
.home-hero-slider .hero-carousel-nav .carousel-indicators [data-bs-target] {
    position: relative; box-sizing: border-box; flex: 0 0 auto; width: 8px; height: 8px; margin: 0; padding: 0; border: 0; border-radius: 999px;
    background: #ffffff59; background-clip: border-box; opacity: 1; text-indent: -999px; transition: width .45s var(--ui-ease), background-color .3s;
}
.home-hero-slider .hero-carousel-nav .carousel-indicators [data-bs-target]::before { content: ''; position: absolute; inset: -18px -4px; }
.home-hero-slider .hero-carousel-nav .carousel-indicators .active { width: 28px; background: #fff; }

/* Chips: tint chips label content; glass chips sit on photographs. */
.travel-service-compact-copy .travel-service-eyebrow,
.home-recommendations-section .recommendation-label {
    display: inline-flex; align-items: center; height: 24px; margin: 0 0 10px; padding: 0 10px; border: 0; border-radius: 999px;
    background: var(--ui-tint); color: var(--ui-tint-ink); font-size: 10.5px; font-weight: 600; letter-spacing: .14em; line-height: 1; text-transform: uppercase; white-space: nowrap;
}
.home-recommendations-section .recommendation-label {
    margin: 0; background: color-mix(in srgb, var(--recommendation-accent) 12%, #fff); color: color-mix(in srgb, var(--recommendation-accent) 72%, var(--ui-ink));
}
.home-featured-section .listing-distance { height: 26px; align-items: center; padding: 0 10px; font-size: 12px; line-height: 1; }
main:has(> .home-discovery-section--sticky) + .iswhere-footer .footer-chip-link {
    display: inline-flex; align-items: center; height: 28px; min-height: 0; padding: 0 12px; font-size: 12px; font-weight: 600; letter-spacing: .02em; line-height: 1;
}
/* home.css transitions "all" here, which would also animate the focus ring in from the text colour. */
main:has(> .home-discovery-section--sticky) + .iswhere-footer .footer-chip-link { transition: background .2s, color .2s, transform .2s, box-shadow .2s; }
main:has(> .home-discovery-section--sticky) + .iswhere-footer .iw-chip-blue { border-color: #7c83f547; background: #7c83f51f; color: #b9bdff; }
main:has(> .home-discovery-section--sticky) + .iswhere-footer .iw-chip-blue:hover { background: #7c83f533; color: #d4d6ff; }
/* The footer's merchant registration is the page's one accent button. */
main:has(> .home-discovery-section--sticky) + .iswhere-footer .iw-btn-primary {
    min-height: 44px; padding: 0 22px; background: var(--ui-accent); box-shadow: 0 14px 28px -14px #e5484fb3; font-size: 14px; font-weight: 600;
}
main:has(> .home-discovery-section--sticky) + .iswhere-footer .iw-btn-primary:hover { background: var(--ui-accent-hover); transform: translateY(-1px); }

/* Recommendations: the arrow is a small icon button that fills and nudges with the card. */
.home-recommendations-section .recommendation-card-footer { font-size: 13px; font-weight: 600; letter-spacing: .02em; }
.recommendation-card-arrow {
    display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--ui-tint); color: var(--ui-ink);
    transition: background .25s, color .25s, transform .3s var(--ui-ease);
}
.recommendation-card-arrow .iw-icon { width: 16px; height: 16px; }
.home-recommendations-section .recommendation-card:hover .recommendation-card-arrow { background: var(--ui-ink); color: #fff; transform: translateX(3px); }
[dir="rtl"] .home-recommendations-section .recommendation-card:hover .recommendation-card-arrow { transform: translateX(-3px); }
/* A single recommendation reads as one row: icon, then label over title and copy, then the action. */
.home-recommendations-section .home-recommendation-grid[data-count="1"] .recommendation-card {
    display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; grid-template-areas: "icon label cta" "icon body cta";
    align-items: center; column-gap: 24px; row-gap: 8px; padding: 24px 28px;
}
.home-recommendations-section .home-recommendation-grid[data-count="1"] .recommendation-card-top { display: contents; }
.home-recommendations-section .home-recommendation-grid[data-count="1"] .recommendation-icon { grid-area: icon; }
.home-recommendations-section .home-recommendation-grid[data-count="1"] .recommendation-label { grid-area: label; align-self: end; justify-self: start; }
.home-recommendations-section .home-recommendation-grid[data-count="1"] .recommendation-card-body { grid-area: body; align-self: start; }
.home-recommendations-section .home-recommendation-grid[data-count="1"] .recommendation-card-body h3 { margin-bottom: 4px; }
.home-recommendations-section .home-recommendation-grid[data-count="1"] .recommendation-card-footer { grid-area: cta; gap: 12px; margin: 0; padding: 0; border: 0; }

/* Category arrows nudge like the other arrows. */
.home-categories-section .category-card-arrow { transition: color .2s, transform .3s var(--ui-ease); }
.home-categories-section .category-card:hover .category-card-arrow { transform: translateX(3px); }
[dir="rtl"] .home-categories-section .category-card:hover .category-card-arrow { transform: translateX(-3px) scaleX(-1); }

@media (max-width: 991px) {
    /* Phones and tablets swipe the hero; only the slide pills remain, centred above the dock. */
    .hero-carousel-nav { bottom: 34px; }
    .hero-carousel-nav .container { justify-content: center; }
    .home-hero-slider .hero-carousel-nav .hero-carousel-btn { display: none; }
}
@media (max-width: 767px) {
    .hero-store-badges img { height: 42px; }
    .home-recommendations-section .home-recommendation-grid[data-count="1"] .recommendation-card {
        grid-template-columns: 48px minmax(0, 1fr); grid-template-areas: "icon label" "icon body" "cta cta"; padding: 20px;
    }
    .home-recommendations-section .home-recommendation-grid[data-count="1"] .recommendation-icon { width: 48px; height: 48px; }
    .home-recommendations-section .home-recommendation-grid[data-count="1"] .recommendation-card-footer { justify-content: space-between; padding-top: 14px; border-top: 1px solid var(--ui-line); }
}
@media (prefers-reduced-motion: reduce) {
    :is(.iw-btn, .hero-store-badges a, .hero-carousel-btn, .dmo-stage-btn, .featured-flow-btn, .travel-service-compact-action,
        .home-search-card--compact .location-switch, .home-search-card--compact .home-direct-search, #directSearchDialog button):active { transform: none; }
    .home-hero-slider .hero-carousel-nav .carousel-indicators [data-bs-target], .recommendation-card-arrow,
    .travel-service-compact-action .iw-icon, .home-categories-section .category-card-arrow { transition: none; }
}