/* ==========================================================================
   ELITE BLOCKS (2026-10-28): the shared pieces every page uses to look like
   the redrawn order page. Prefix .eb-. Brand tokens only (elite.css).
   Macros in templates/partials/_eb.html.

     .eb-hero        photo header: kicker, title, lead, icon chips
     .eb-card        a white card; .eb-card__head with a numbered step + icon
     .eb-label       a form label with its icon in front
     .eb-trust       the trust strip (secure payment, refund promise, company)
     .eb-tiles       photo tiles (destinations, topics), 2 up on a phone
     .eb-icards      icon cards (features, help topics, steps)
     .eb-empty       icon circle + one line where a page would be blank
     .eb-bar         the phone bar under the thumb (total / continue)
     .eb-facts       a row of icon facts (time, price, place, group)
   ========================================================================== */
:root { --eb-blue: var(--et-coral, #2563eb); --eb-blue-soft: var(--et-coral-soft, #eef4ff);
        --eb-ink: var(--et-ink, #0f1a2c); --eb-muted: var(--et-muted, #4f5a6b);
        --eb-line: var(--et-line, #e5e5e7); --eb-soft: var(--et-bg-soft, #f5f7fa);
        --eb-ok: var(--et-success, #1f7a4d); --eb-ok-soft: var(--et-success-soft, #e8f3ec);
        --eb-r: var(--et-r-md, 18px);
        --eb-sh: 0 1px 2px rgba(15, 26, 44, .05), 0 8px 24px rgba(15, 26, 44, .06); }

/* Photo header */
.eb-hero { position: relative; border-radius: var(--eb-r); overflow: hidden; margin: 0 0 20px; min-height: 230px;
           display: flex; align-items: flex-end; color: #fff; background: var(--eb-ink) var(--eb-img, none) center / cover no-repeat; isolation: isolate; }
.eb-hero::before { content: ""; position: absolute; inset: 0; z-index: -1;
                   background: linear-gradient(180deg, rgba(15, 26, 44, .10) 0%, rgba(15, 26, 44, .45) 45%, rgba(15, 26, 44, .88) 100%); }
.eb-hero__in { padding: 22px 20px 20px; width: 100%; }
.eb-hero .eb-kicker { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 8px; padding: 4px 10px; border-radius: 999px;
                      background: rgba(255, 255, 255, .18); backdrop-filter: blur(6px); font-size: .78rem; font-weight: 700; color: #fff; }
.eb-hero h1 { color: #fff; margin: 0 0 6px; font-size: clamp(1.5rem, 5vw, 2.2rem); line-height: 1.15; }
.eb-hero p.eb-lead { margin: 0 0 12px; color: rgba(255, 255, 255, .9); max-width: 60ch; line-height: 1.5; }
.eb-hero .eb-chips li { background: rgba(255, 255, 255, .16); color: #fff; backdrop-filter: blur(6px); }
.eb-hero .eb-chips .et-i { color: #fff; }
@media (min-width: 861px) { .eb-hero { min-height: 280px; } .eb-hero__in { padding: 32px 32px 28px; } }

/* Chips (also used outside the hero) */
.eb-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.eb-chips li { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 999px;
               background: var(--eb-soft); font-size: .85rem; line-height: 1.3; }
.eb-chips .et-i { width: 1.05em; height: 1.05em; color: var(--eb-blue); flex: none; }

/* Cards with a numbered step */
.eb-card { background: #fff; border: 1px solid var(--eb-line); border-radius: var(--eb-r); box-shadow: var(--eb-sh); padding: 18px; margin: 0 0 16px; }
.eb-card__head { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; }
.eb-card__head h2, .eb-card__head h3 { margin: 0; font-size: 1.08rem; }
.eb-card__head small { display: block; color: var(--eb-muted); font-size: .82rem; font-weight: 400; }
.eb-step { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex: none;
           background: var(--eb-blue); color: #fff; font-weight: 800; font-size: .92rem; }
.eb-ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; flex: none; background: var(--eb-blue-soft); color: var(--eb-blue); }
.eb-ico .et-i { width: 20px; height: 20px; }

/* Labels with an icon */
.eb-label { display: inline-flex; align-items: center; gap: 7px; }
.eb-label .et-i { width: 16px; height: 16px; color: var(--eb-blue); flex: none; }

/* Trust strip */
.eb-trust { list-style: none; margin: 16px 0; padding: 14px 16px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 20px;
            border-radius: 14px; background: var(--eb-soft); color: var(--eb-muted); font-size: .84rem; }
.eb-trust li { display: inline-flex; align-items: center; gap: 7px; }
.eb-trust .et-i { width: 16px; height: 16px; color: var(--eb-ok); flex: none; }

/* Photo tiles */
.eb-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0 0 18px; }
@media (min-width: 720px) { .eb-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.eb-tile { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: 16px; overflow: hidden; color: #fff; text-decoration: none;
           background: var(--eb-soft) var(--eb-img, none) center / cover no-repeat; box-shadow: var(--eb-sh); isolation: isolate; }
.eb-tile::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 40%, rgba(15, 26, 44, .82)); }
.eb-tile b { position: absolute; left: 12px; right: 12px; bottom: 10px; font-size: .98rem; line-height: 1.2; }
.eb-tile small { display: block; font-weight: 500; opacity: .9; font-size: .78rem; }
.eb-tile:hover, .eb-tile:focus-visible { transform: translateY(-2px); transition: transform .2s; }

/* Icon cards */
.eb-icards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 12px; margin: 0 0 18px; padding: 0; list-style: none; }
.eb-icard { display: flex; gap: 12px; align-items: flex-start; padding: 16px; border: 1px solid var(--eb-line); border-radius: 16px;
            background: #fff; box-shadow: var(--eb-sh); color: inherit; text-decoration: none; }
.eb-icard b { display: block; margin: 0 0 3px; }
.eb-icard small, .eb-icard p { color: var(--eb-muted); font-size: .88rem; line-height: 1.45; margin: 0; }
a.eb-icard:hover, a.eb-icard:focus-visible { border-color: var(--eb-blue); }

/* Empty state */
.eb-empty { text-align: center; padding: 26px 16px; color: var(--eb-muted); }
.eb-empty .eb-ico { margin: 0 auto 10px; width: 56px; height: 56px; border-radius: 50%; }
.eb-empty .eb-ico .et-i { width: 26px; height: 26px; }
.eb-empty b { display: block; color: var(--eb-ink); margin-bottom: 4px; }

/* Facts row */
.eb-facts { list-style: none; margin: 0 0 16px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 720px) { .eb-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.eb-facts li { display: flex; gap: 10px; align-items: center; padding: 12px; border-radius: 14px; background: var(--eb-soft); min-width: 0; }
.eb-facts small { display: block; color: var(--eb-muted); font-size: .76rem; }
.eb-facts b { display: block; font-size: .92rem; overflow-wrap: anywhere; }

/* Phone bar under the thumb */
.eb-bar { display: none; }
@media (max-width: 860px) {
    .eb-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; position: sticky; z-index: 40; bottom: calc(10px + env(safe-area-inset-bottom));
              margin: 18px 0 0; padding: 10px 10px 10px 16px; border-radius: 18px; background: rgba(255, 255, 255, .96);
              backdrop-filter: blur(10px); border: 1px solid var(--eb-line); box-shadow: 0 10px 30px rgba(15, 26, 44, .18); }
    body.has-tabbar .eb-bar { bottom: calc(var(--tab-h, 62px) + 10px + env(safe-area-inset-bottom)); }
    /* One bar: with this bar on the page the tab bar is hidden (elite.css). */
    body.has-actionbar .eb-bar { bottom: calc(10px + env(safe-area-inset-bottom)); }
    body:has(.eb-bar) .al-fab { bottom: calc(94px + env(safe-area-inset-bottom)); }
    .eb-bar .et-btn { white-space: normal; }
    @media (max-width: 359px) { .eb-bar .et-btn { flex: 1 1 100%; justify-content: center; } }
    .eb-bar div { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
    .eb-bar small { color: var(--eb-muted); font-size: .75rem; }
    .eb-bar b { font-size: 1.05rem; }
    .eb-bar .et-btn { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
}

/* The cookie box on a phone: a slim bar, not half the screen (2026-10-28). */
@media (max-width: 734px) {
    .cookie-popup { left: 10px; right: 10px; width: auto; padding: 12px 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
    .cookie-popup .cookie-title { display: none; }
    /* The long sentence folds to one short line; both policy links stay. */
    .cookie-popup > p { flex: 1 1 180px; margin: 0; font-size: .8rem; line-height: 1.4; }
    .cookie-popup > p [data-i18n="cookie.text_before"] { display: none; }
    .cookie-popup > p::before { content: "We use cookies. "; }
    .cookie-popup .cookie-btns { margin: 0; flex: 0 0 auto; gap: 6px; }
    .cookie-popup .cookie-btn { min-height: 34px; padding: 6px 12px; }
}
@media (prefers-reduced-motion: reduce) { .eb-tile:hover { transform: none; } }