/* ==========================================================================
   EAGLE GLOBAL HUB - OTA FRONTEND THEME (mockup aligned)
   --------------------------------------------------------------------------
   Standalone stylesheet loaded by layouts/site.blade.php.

   Every rule is scoped to the `.egho-` namespace, so this file never overrides
   the existing `.site-*`, `.ota-*`, `.flight-*`, `.travel-*`, `.bookings-*`,
   `.account-*`, `.dashboard-*` or `.admin-*` systems. Pages that still use
   those classes keep their current styling untouched.

   Colours/spacing are tuned to the approved UI mockup: navy chrome, blue
   primary actions, white cards on a light surface, amber promo accents.
   ========================================================================== */

:root {
    --egho-blue: #1256a0;
    --egho-blue-dark: #0b3c78;
    --egho-navy: #0b2545;
    --egho-navy-soft: #123a6b;
    --egho-sky: #eaf2fd;
    --egho-line: #dfe8f4;
    --egho-text: #0f2a4a;
    --egho-muted: #5d7290;
    --egho-amber: #f59e0b;
    --egho-surface: #f5f8fd;
    --egho-radius: 16px;
    --egho-shadow: 0 18px 45px rgba(11, 37, 69, 0.14);
    --egho-shell: 1200px;
}

.egho-shell {
    width: 100%;
    max-width: var(--egho-shell);
    margin: 0 auto;
    padding: 0 20px;
}

/* ---------------------------------------------------------------- topbar */
.egho-topbar {
    background: var(--egho-navy);
    color: rgba(255, 255, 255, 0.86);
    font-size: 12.5px;
}

.egho-topbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 40px;
}

.egho-topbar-group {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}

.egho-topbar-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    /*
       Tap target. The topbar links are text sized, which left them about 18px
       tall on a phone. The minimum keeps them comfortable to hit without
       changing the bar's own height.
    */
    min-height: 32px;
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
}

.egho-topbar-item svg {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

a.egho-topbar-item:hover {
    color: #fff;
}

.egho-switch {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.egho-switch:hover {
    background: rgba(255, 255, 255, 0.16);
}

.egho-switch-chevron {
    font-size: 11px;
    opacity: 0.8;
}

/* ----------------------------------------------------------- main header */
.egho-header {
    position: relative;
    z-index: 30;
    background: #fff;
    border-bottom: 1px solid var(--egho-line);
}

.egho-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    min-height: 76px;
}

.egho-brand {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    text-decoration: none;
    flex: 0 0 auto;
}

.egho-brand-mark {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(140deg, var(--egho-blue) 0%, var(--egho-navy) 100%);
    color: #fff;
    flex: 0 0 auto;
}

.egho-brand-mark svg {
    width: 22px;
    height: 22px;
    fill: currentColor;
}

.egho-brand-copy {
    display: grid;
    gap: 2px;
    line-height: 1.15;
}

.egho-brand-copy strong {
    color: var(--egho-navy);
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -0.2px;
}

.egho-brand-copy small {
    color: var(--egho-muted);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.egho-nav {
    display: flex;
    align-items: center;
    gap: 4px;
    overflow-x: auto;
    scrollbar-width: none;
}

.egho-nav::-webkit-scrollbar {
    display: none;
}

.egho-nav a {
    display: inline-block;
    padding: 9px 12px;
    border-radius: 10px;
    color: var(--egho-navy-soft);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.egho-nav a:hover {
    background: var(--egho-sky);
    color: var(--egho-blue);
}

.egho-nav a.is-active {
    color: var(--egho-blue);
    background: var(--egho-sky);
}

.egho-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
}

.egho-user-chip {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 6px 12px 6px 6px;
    border: 1px solid var(--egho-line);
    border-radius: 999px;
    background: #fff;
}

.egho-user-avatar {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--egho-sky);
    color: var(--egho-blue);
    font-size: 13px;
    font-weight: 800;
    flex: 0 0 auto;
}

.egho-user-copy {
    display: grid;
    line-height: 1.2;
    max-width: 150px;
}

.egho-user-copy strong {
    color: var(--egho-navy);
    font-size: 12.5px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.egho-user-copy small {
    color: var(--egho-muted);
    font-size: 11px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ------------------------------------------------------------------ hero */
.egho-hero {
    position: relative;
    isolation: isolate;
    padding: 68px 0 108px;
    color: #fff;
    background-color: var(--egho-navy);
    background-image: var(--egho-hero-image, none);
    background-size: cover;
    background-position: center 40%;
}

/*
    Hero scrim.

    The photograph has to stay a photograph: an almost opaque wash over the
    whole band flattened it into a plain navy block, which read as an unstyled
    header. The scrim is now a brand-blue gradient that is only dense enough
    behind the headline (which is capped at 620px) and clears almost
    completely over the right-hand side, plus a light floor so the white
    search card lands on a calm edge. A blue-toned scrim also keeps the band
    on brand whatever the photograph's own colour cast is.
*/
.egho-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(
            100deg,
            rgba(8, 27, 55, 0.74) 0%,
            rgba(10, 42, 88, 0.46) 42%,
            rgba(18, 86, 160, 0.14) 100%
        ),
        linear-gradient(
            180deg,
            rgba(8, 27, 55, 0.28) 0%,
            rgba(8, 27, 55, 0) 42%,
            rgba(8, 27, 55, 0.5) 100%
        );
}

.egho-hero-copy {
    max-width: 620px;
}

.egho-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border: 1px solid rgba(255, 255, 255, 0.34);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.egho-hero h1 {
    margin: 18px 0 0;
    color: #fff;
    font-size: clamp(30px, 4.2vw, 46px);
    font-weight: 800;
    line-height: 1.14;
    letter-spacing: -0.6px;
}

.egho-hero-copy p {
    margin: 14px 0 0;
    max-width: 55ch;
    color: rgba(255, 255, 255, 0.9);
    font-size: 16px;
    line-height: 1.6;
}

.egho-hero-points {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
    margin: 22px 0 0;
    padding: 0;
    list-style: none;
}

.egho-hero-points li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.95);
    font-size: 13.5px;
    font-weight: 600;
}

.egho-hero-points span {
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    font-size: 11px;
    flex: 0 0 auto;
}

/* ----------------------------------------------------------- search panel */
.egho-search-wrap {
    position: relative;
    z-index: 10;
    margin-top: -72px;
}

.egho-search-card {
    padding: 18px 20px 20px;
    border: 1px solid var(--egho-line);
    border-radius: var(--egho-radius);
    background: #fff;
    box-shadow: var(--egho-shadow);
}

.egho-search-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--egho-line);
}

.egho-search-tab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 16px;
    border: 0;
    border-radius: 999px;
    background: var(--egho-surface);
    color: var(--egho-navy-soft);
    font: inherit;
    font-size: 13.5px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
}

.egho-search-tab:hover {
    background: var(--egho-sky);
    color: var(--egho-blue);
}

.egho-search-tab.is-active {
    background: var(--egho-blue);
    color: #fff;
    box-shadow: 0 8px 18px rgba(18, 86, 160, 0.28);
}

.egho-search-tab svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.egho-trip-type {
    display: flex;
    gap: 8px;
    margin: 0 0 14px;
    padding: 0;
    border: 0;
}

.egho-trip-type legend {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.egho-trip-type label {
    position: relative;
    cursor: pointer;
}

.egho-trip-type input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.egho-trip-type span {
    display: inline-block;
    padding: 7px 16px;
    border: 1px solid var(--egho-line);
    border-radius: 999px;
    background: #fff;
    color: var(--egho-navy-soft);
    font-size: 13px;
    font-weight: 600;
}

.egho-trip-type input:checked + span {
    border-color: var(--egho-blue);
    background: var(--egho-sky);
    color: var(--egho-blue);
}

.egho-trip-type input:focus-visible + span {
    outline: 2px solid var(--egho-blue);
    outline-offset: 2px;
}

.egho-search-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
    align-items: end;
}

.egho-field {
    display: grid;
    gap: 6px;
    min-width: 0;
}

.egho-field > span,
.egho-field > label {
    color: var(--egho-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.egho-field input,
.egho-field select {
    width: 100%;
    min-height: 48px;
    padding: 10px 13px;
    border: 1px solid var(--egho-line);
    border-radius: 11px;
    background: #fff;
    color: var(--egho-text);
    font: inherit;
    font-size: 14px;
}

.egho-field input:focus,
.egho-field select:focus {
    border-color: var(--egho-blue);
    outline: 2px solid rgba(18, 86, 160, 0.16);
}

.egho-field-help,
.egho-field-error {
    color: var(--egho-muted);
    font-size: 11.5px;
    font-weight: 500;
}

.egho-field-error {
    color: #b42318;
}

.egho-submit {
    grid-column: span 2;
    justify-self: end;
    width: 100%;
    max-width: 260px;
    min-height: 48px;
    padding: 0 26px;
    border: 0;
    border-radius: 11px;
    background: linear-gradient(135deg, var(--egho-blue) 0%, var(--egho-blue-dark) 100%);
    color: #fff;
    font: inherit;
    font-size: 14.5px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 10px 22px rgba(18, 86, 160, 0.28);
}

.egho-submit:hover {
    filter: brightness(1.06);
}

.egho-compare {
    grid-column: span 4;
    align-self: center;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--egho-muted);
    font-size: 12.5px;
    font-weight: 600;
}

.egho-compare input {
    width: 15px;
    height: 15px;
    accent-color: var(--egho-blue);
}

.egho-booking-flow {
    display: grid;
    grid-template-columns: 1.15fr repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--egho-line);
}

.egho-booking-flow > div {
    display: flex;
    align-items: center;
    gap: 10px;
}

.egho-booking-flow span {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 27px;
    height: 27px;
    border-radius: 50%;
    background: var(--egho-sky);
    color: var(--egho-blue);
    font-size: 11.5px;
    font-weight: 800;
}

.egho-booking-flow strong {
    display: block;
    color: var(--egho-navy);
    font-size: 13px;
    font-weight: 700;
}

.egho-booking-flow small {
    display: block;
    color: var(--egho-muted);
    font-size: 11.5px;
}

/* -------------------------------------------------------------- sections */
.egho-section {
    padding: 46px 0;
}

.egho-section-tight {
    padding: 30px 0 6px;
}

.egho-section-alt {
    background: var(--egho-surface);
}

.egho-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 22px;
}

.egho-section-head h2 {
    margin: 0;
    color: var(--egho-navy);
    font-size: clamp(21px, 2.4vw, 27px);
    font-weight: 800;
    letter-spacing: -0.3px;
}

.egho-section-head p {
    margin: 6px 0 0;
    color: var(--egho-muted);
    font-size: 14px;
}

.egho-eyebrow {
    display: block;
    margin-bottom: 6px;
    color: var(--egho-blue);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.egho-section-link {
    display: inline-flex;
    align-items: center;
    /* Tap target: a section link is a standalone control, not prose. */
    min-height: 32px;
    color: var(--egho-blue);
    font-size: 13.5px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.egho-section-link:hover {
    text-decoration: underline;
}

/* ------------------------------------------------------------ quick tiles */
.egho-tiles {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
}

.egho-tile {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--egho-line);
    border-radius: 14px;
    background: #fff;
    text-decoration: none;
    transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

.egho-tile:hover {
    transform: translateY(-3px);
    border-color: rgba(18, 86, 160, 0.35);
    box-shadow: 0 14px 30px rgba(11, 37, 69, 0.12);
}

.egho-tile-icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--egho-sky);
    color: var(--egho-blue);
}

.egho-tile-icon svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.egho-tile strong {
    display: block;
    color: var(--egho-navy);
    font-size: 14px;
    font-weight: 700;
}

.egho-tile small {
    display: block;
    margin-top: 2px;
    color: var(--egho-muted);
    font-size: 11.5px;
}

/* --------------------------------------------------------------- promos */
.egho-promos {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.egho-promo {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 190px;
    padding: 22px;
    border-radius: var(--egho-radius);
    overflow: hidden;
    color: #fff;
    background-color: var(--egho-navy);
    background-image: var(--egho-promo-image, none);
    background-size: cover;
    background-position: center;
    text-decoration: none;
}

.egho-promo::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(110deg, rgba(8, 28, 58, 0.92) 0%, rgba(8, 28, 58, 0.45) 100%);
}

.egho-promo > * {
    position: relative;
    z-index: 1;
}

.egho-promo-badge {
    align-self: flex-start;
    margin-bottom: auto;
    padding: 4px 11px;
    border-radius: 999px;
    background: var(--egho-amber);
    color: #40220a;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.egho-promo h2,
.egho-promo h3 {
    margin: 14px 0 0;
    font-size: 19px;
    font-weight: 800;
    line-height: 1.25;
}

.egho-promo p {
    margin: 7px 0 0;
    color: rgba(255, 255, 255, 0.88);
    font-size: 13px;
    line-height: 1.5;
}

.egho-promo-cta {
    align-self: flex-start;
    margin-top: 16px;
    padding: 9px 18px;
    border-radius: 999px;
    background: #fff;
    color: var(--egho-blue-dark);
    font-size: 13px;
    font-weight: 700;
}

.egho-promo.is-workvisa .egho-promo-cta {
    background: var(--egho-amber);
    color: #40220a;
}

/* --------------------------------------------------------- destinations */
.egho-destinations {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.egho-destination {
    position: relative;
    display: block;
    min-height: 208px;
    border-radius: 14px;
    overflow: hidden;
    background-color: var(--egho-navy-soft);
    background-image: var(--egho-destination-image, none);
    background-size: cover;
    background-position: center;
    text-decoration: none;
    box-shadow: 0 10px 24px rgba(11, 37, 69, 0.12);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.egho-destination:hover {
    transform: translateY(-3px);
    box-shadow: 0 18px 34px rgba(11, 37, 69, 0.2);
}

.egho-destination::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(8, 28, 58, 0.05) 35%, rgba(8, 28, 58, 0.86) 100%);
}

.egho-destination-copy {
    position: absolute;
    inset: auto 0 0 0;
    z-index: 1;
    padding: 16px;
    color: #fff;
}

.egho-destination-copy strong {
    display: block;
    font-size: 16.5px;
    font-weight: 800;
}

.egho-destination-copy small {
    display: block;
    margin-top: 3px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 12px;
    font-weight: 600;
}

.egho-destination-price {
    display: inline-block;
    margin-top: 8px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.2);
    font-size: 11.5px;
    font-weight: 700;
}

/* ------------------------------------------------------------- airlines */
.egho-airlines {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 12px;
    padding: 20px;
    border: 1px solid var(--egho-line);
    border-radius: var(--egho-radius);
    background: #fff;
}

.egho-airline {
    display: grid;
    justify-items: center;
    gap: 8px;
    padding: 12px 8px;
    border-radius: 12px;
    text-align: center;
}

.egho-airline:hover {
    background: var(--egho-surface);
}

.egho-airline-mark {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--egho-line);
    background: var(--egho-surface);
    color: var(--egho-blue-dark);
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.egho-airline strong {
    color: var(--egho-navy-soft);
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.3;
}

/* ------------------------------------------------------------- services */
.egho-services {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.egho-service {
    padding: 18px;
    border: 1px solid var(--egho-line);
    border-radius: 14px;
    background: #fff;
}

.egho-service strong {
    display: block;
    color: var(--egho-navy);
    font-size: 15px;
    font-weight: 700;
}

.egho-service small {
    display: block;
    margin-top: 5px;
    color: var(--egho-muted);
    font-size: 12.5px;
}

.egho-service-status {
    display: inline-block;
    margin-top: 12px;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--egho-surface);
    color: var(--egho-muted);
    font-size: 11px;
    font-weight: 700;
}

.egho-service.is-live .egho-service-status {
    background: #e8f6ee;
    color: #1d7a45;
}

.egho-service a {
    display: inline-flex;
    align-items: center;
    /* Tap target: this link is the card's own "open" control. */
    min-height: 32px;
    color: inherit;
    text-decoration: none;
}

/* --------------------------------------------------------------- footer */
.egho-footer {
    background: var(--egho-navy);
    color: rgba(255, 255, 255, 0.78);
}

.egho-footer-main {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
    gap: 28px;
    padding: 46px 0 30px;
}

.egho-footer h3 {
    margin: 0 0 12px;
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.egho-footer p {
    margin: 10px 0 0;
    font-size: 13px;
    line-height: 1.6;
}

.egho-footer-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    font-size: 16px;
    font-weight: 800;
    text-decoration: none;
}

.egho-footer-brand span {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
    font-size: 15px;
    flex: 0 0 auto;
}

.egho-footer-list {
    display: grid;
    gap: 9px;
}

.egho-footer-list a,
.egho-footer-list span {
    display: inline-flex;
    align-items: center;
    /* Tap target: the footer is the one place every phone user reaches. */
    min-height: 32px;
    color: rgba(255, 255, 255, 0.8);
    font-size: 13px;
    text-decoration: none;
}

.egho-footer-list a:hover {
    color: #fff;
    text-decoration: underline;
}

.egho-footer-contact {
    display: grid;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.egho-footer-contact li {
    display: flex;
    gap: 10px;
    font-size: 13px;
    line-height: 1.5;
}

.egho-footer-contact svg {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    margin-top: 2px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.egho-footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    padding: 16px 0 22px;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    font-size: 12px;
}

.egho-footer-bottom small {
    color: rgba(255, 255, 255, 0.68);
    font-size: 12px;
}

/* ------------------------------------------------------------ responsive */
@media (max-width: 1100px) {
    .egho-nav a {
        padding: 8px 10px;
        font-size: 13px;
    }

    .egho-tiles {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .egho-search-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .egho-compare {
        grid-column: 1 / -1;
    }

    .egho-submit {
        grid-column: 1 / -1;
        justify-self: stretch;
        max-width: none;
    }

    .egho-destinations {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .egho-airlines,
    .egho-services {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .egho-footer-main {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .egho-header-inner {
        flex-wrap: wrap;
        gap: 12px;
        padding: 12px 0;
        min-height: 0;
    }

    .egho-nav {
        order: 3;
        width: 100%;
        padding-bottom: 4px;
    }

    .egho-hero {
        padding: 40px 0 84px;
    }

    .egho-promos {
        grid-template-columns: 1fr;
    }

    .egho-booking-flow {
        grid-template-columns: 1fr 1fr;
    }

    .egho-user-copy {
        display: none;
    }
}

@media (max-width: 720px) {
    .egho-topbar-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        padding: 10px 0;
    }

    .egho-search-wrap {
        margin-top: -56px;
    }

    .egho-search-card {
        padding: 16px;
    }

    .egho-search-grid {
        grid-template-columns: 1fr 1fr;
    }

    .egho-tiles {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .egho-destinations,
    .egho-airlines,
    .egho-services {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .egho-section {
        padding: 34px 0;
    }

    .egho-section-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
}

@media (max-width: 520px) {
    .egho-search-grid,
    .egho-tiles,
    .egho-destinations,
    .egho-airlines,
    .egho-services,
    .egho-footer-main,
    .egho-booking-flow {
        grid-template-columns: 1fr;
    }

    .egho-hero h1 {
        font-size: 28px;
    }

    .egho-brand-copy strong {
        font-size: 15px;
    }
}

/* ==========================================================================
   HOMEPAGE SEARCH ROW, SWAP CONTROL AND ASSURANCE STRIP
   Additions for the reviewed homepage layout. Every selector stays inside the
   `.egho-` namespace, so nothing here can reach the legacy site stylesheets.
   ========================================================================== */

/*
    Search card head.

    The Flights / Hotels / Tours / Visa pills and the trip-type chips share a
    single row with the divider underneath it, which is the arrangement the
    reviewed layout uses. The pills keep their own flex wrapping, so on a
    narrow screen the chips drop to a second line inside the same head block
    instead of colliding with them.
*/
.egho-search-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--egho-line);
}

.egho-search-head .egho-search-tabs {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
}

.egho-search-head .egho-trip-type {
    margin: 0;
}

/*
    Checkbox affordance on each trip-type chip.

    The mark is drawn from the pseudo element rather than a real control,
    because the real control is the radio input the chip already wraps and
    styling that would remove it from the accessibility tree.
*/
.egho-trip-type span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.egho-trip-type span::before {
    content: '\2713';
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    border: 1.5px solid rgba(11, 37, 69, 0.3);
    border-radius: 5px;
    background: #fff;
    color: transparent;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

.egho-trip-type input:checked + span::before {
    border-color: var(--egho-blue);
    background: var(--egho-blue);
    color: #fff;
}

/*
    Origin / destination pair.

    The two airport fields sit in one panel spanning two search-grid columns,
    with the swap control absolutely positioned on the boundary between them.
    The button is removed from the grid flow, so the panel still lays out as
    exactly two fields.
*/
.egho-field-pair {
    position: relative;
    grid-column: span 2;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    align-items: end;
}

.egho-swap {
    position: absolute;
    left: 50%;
    bottom: 9px;
    transform: translateX(-50%);
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid var(--egho-line);
    border-radius: 50%;
    background: #fff;
    color: var(--egho-blue);
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(11, 37, 69, 0.18);
    transition: background 0.18s ease;
}

.egho-swap:hover {
    background: var(--egho-sky);
}

.egho-swap:focus-visible {
    outline: 2px solid var(--egho-blue);
    outline-offset: 2px;
}

/* Still hidden when the script has not run. */
.egho-swap[hidden] {
    display: none;
}

/*
    Only the glyph rotates on hover; the control's own transform is reserved
    for centring it on the boundary between the two fields. Rotating the button
    instead would have to be undone for every breakpoint that repositions it.
*/
.egho-swap svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 0.18s ease;
}

.egho-swap:hover svg {
    transform: rotate(180deg);
}

/*
    Assurance strip under the search card.

    Three statements about how this website behaves. They carry no icon colour
    coding and no link affordance, because none of them is a call to action.
*/
.egho-assurances {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.egho-assurances li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 18px;
    border: 1px solid var(--egho-line);
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 8px 20px rgba(11, 37, 69, 0.06);
}

.egho-assurance-icon {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--egho-sky);
    color: var(--egho-blue);
}

.egho-assurance-icon svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.egho-assurance-copy strong {
    display: block;
    color: var(--egho-navy);
    font-size: 14px;
    font-weight: 700;
}

.egho-assurance-copy small {
    display: block;
    margin-top: 3px;
    color: var(--egho-muted);
    font-size: 12.5px;
    line-height: 1.5;
}

/*
    Destination rail.

    Six square photographs fit one row of the 1200px shell, so above 1080px
    the strip stays a plain grid. Below that width they cannot fit, and
    wrapping them produces a block of rows that no longer reads as a strip of
    destinations — so the strip becomes a snapping horizontal rail instead.
    No arrow control is added: there is no destination index for one to open,
    and the rail is already complete on both a pointer and a thumb.
*/
@media (max-width: 1080px) {
    .egho-destinations {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 12px;

        /* Room for the tile shadow, which a scroll container would clip. */
        padding: 6px 0 10px;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
    }

    .egho-destination {
        flex: 0 0 210px;
        scroll-snap-align: start;
    }
}

@media (max-width: 900px) {
    .egho-assurances {
        grid-template-columns: 1fr;
        gap: 10px;
    }
}

@media (max-width: 720px) {
    .egho-search-head {
        align-items: flex-start;
    }

    .egho-search-head .egho-trip-type {
        width: 100%;
    }

    .egho-assurances li {
        padding: 14px;
    }
}

@media (max-width: 520px) {
    /*
        Two 140px airport fields plus a swap control between them cannot sit
        side by side on a phone without the control covering the fields, so
        the pair stacks and the control moves to the trailing edge.
    */
    .egho-field-pair {
        grid-template-columns: 1fr;
    }

    .egho-swap {
        position: static;
        transform: none;
        justify-self: end;
    }

    .egho-destination {
        flex: 0 0 152px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .egho-swap,
    .egho-swap svg {
        transition: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .egho-tile,
    .egho-destination {
        transition: none;
    }
}

/* ==========================================================================
   HOMEPAGE DESTINATION STRIP
   Six-photograph strip matching the reviewed homepage layout: square tiles,
   one destination photograph each, label over a soft scrim so the photograph
   stays readable. Photographs come from the presentation array in the home
   view; no fare, room rate or availability is claimed.
   ========================================================================== */

.egho-destinations {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 14px;
}

.egho-destination {
    min-height: 0;
    aspect-ratio: 1 / 1;
    border-radius: 16px;
    box-shadow: 0 12px 26px rgba(11, 37, 69, 0.16);

    /*
     * The stock destination frames are muted travel photography (0.20-0.27
     * average saturation), which left the strip looking washed out next to
     * the reviewed layout. A small boost brings the colour back without
     * touching the label, which is pure white and therefore unaffected by
     * saturation.
     */
    filter: saturate(1.18) contrast(1.04);
}

.egho-destination:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 38px rgba(11, 37, 69, 0.24);
}

.egho-destination::before {
    background: linear-gradient(
        180deg,
        rgba(8, 28, 58, 0.34) 0%,
        rgba(8, 28, 58, 0.04) 40%,
        rgba(8, 28, 58, 0.9) 100%
    );
}

.egho-destination-copy {
    display: flex;
    flex-direction: column;
    padding: 13px;
}

.egho-destination-copy strong {
    font-size: 15px;
    letter-spacing: -0.01em;
}

.egho-destination-copy small {
    font-size: 11.5px;
    line-height: 1.35;
}

.egho-destination-tag {
    order: -1;
    align-self: flex-start;
    margin-bottom: auto;
    padding: 4px 9px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.24);
    border: 1px solid rgba(255, 255, 255, 0.32);
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

@media (max-width: 1080px) {
    .egho-destinations {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 720px) {
    .egho-destinations {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }
}

@media (max-width: 520px) {
    .egho-destinations {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    .egho-destination {
        border-radius: 13px;
    }

    .egho-destination-copy {
        padding: 10px;
    }

    .egho-destination-copy strong {
        font-size: 13.5px;
    }

    .egho-destination-tag {
        font-size: 11px;
    }
}

/* ==========================================================================
   ACCOUNT PROFILE HEADER
   Larger initials avatar with a role chip, matching the reviewed profile
   panel. Initials are used because this website does not store a profile
   photo for an account.
   ========================================================================== */

.egho-account-avatar.is-lg {
    width: 62px;
    height: 62px;
    font-size: 24px;
}

.egho-profile-copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.egho-profile-copy strong {
    font-size: 17px;
    font-weight: 800;
    color: var(--egho-navy);
}

.egho-profile-copy small {
    color: var(--egho-muted);
    font-size: 13px;
    word-break: break-word;
}

.egho-profile-badge {
    align-self: flex-start;
    margin-top: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--egho-sky);
    border: 1px solid #cfe0f7;
    color: var(--egho-blue);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* ==========================================================================
   CONTACT MAP PANEL
   Decorative city-grid canvas behind the published-location notice. It is a
   drawn placeholder, not a map service: the panel still states that no office
   location is configured, and no coordinates are implied.
   ========================================================================== */

.egho-map-canvas {
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    overflow: hidden;
    pointer-events: none;
    background:
        radial-gradient(circle at 20% 26%, #e2ecd4 0 17%, transparent 18%),
        radial-gradient(circle at 78% 74%, #e2ecd4 0 14%, transparent 15%),
        repeating-linear-gradient(
            90deg,
            transparent 0 44px,
            #e4eef9 44px 46px
        ),
        repeating-linear-gradient(
            0deg,
            transparent 0 36px,
            #e4eef9 36px 38px
        ),
        linear-gradient(114deg, transparent 42%, #cfe0f3 42%, #cfe0f3 52%, transparent 52%),
        #f4f8fd;
}

.egho-map-panel-copy {
    position: relative;
    z-index: 1;
}

.egho-map-canvas::after {
    content: '';
    position: absolute;
    top: 34%;
    left: 52%;
    width: 16px;
    height: 16px;
    border-radius: 50% 50% 50% 2px;
    transform: rotate(-45deg) translate(-50%, -50%);
    background: var(--egho-blue);
    box-shadow: 0 6px 14px rgba(18, 86, 160, 0.35);
}

@media (max-width: 520px) {
    .egho-account-avatar.is-lg {
        width: 52px;
        height: 52px;
        font-size: 20px;
    }

    .egho-profile-copy strong {
        font-size: 15.5px;
    }
}

/* ==========================================================================
   MODULE PAGES
   Hotel results/search, tour results/search, visa information, contact page.
   Same namespace rules as above: nothing here targets an existing class.
   ========================================================================== */

.egho-page {
    background: var(--egho-surface);
    padding: 30px 0 60px;
}

.egho-page-head {
    margin-bottom: 20px;
}

.egho-page-head h1 {
    font-size: 30px;
    line-height: 1.2;
    margin: 6px 0 8px;
    color: var(--egho-navy);
}

.egho-page-head p {
    margin: 0;
    max-width: 760px;
    color: var(--egho-muted);
    font-size: 15px;
}

/* ------------------------------------------------------------- step bar */
.egho-steps {
    counter-reset: egho-step;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
    list-style: none;
    margin: 0 0 22px;
    padding: 14px 18px;
    background: #fff;
    border: 1px solid var(--egho-line);
    border-radius: var(--egho-radius);
}

.egho-steps li {
    counter-increment: egho-step;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--egho-muted);
}

.egho-steps li::before {
    content: counter(egho-step);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 1px solid var(--egho-line);
    background: #fff;
    display: grid;
    place-items: center;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--egho-muted);
}

.egho-steps li.is-done::before {
    background: var(--egho-sky);
    border-color: #bcd6f3;
    color: var(--egho-blue-dark);
}

.egho-steps li.is-active {
    color: var(--egho-navy);
    font-weight: 600;
}

.egho-steps li.is-active::before {
    background: var(--egho-blue);
    border-color: var(--egho-blue);
    color: #fff;
}

/* --------------------------------------------------------- search panels */
.egho-panel {
    background: #fff;
    border: 1px solid var(--egho-line);
    border-radius: var(--egho-radius);
    padding: 22px;
}

.egho-panel-head {
    margin-bottom: 16px;
}

.egho-panel-head h2 {
    margin: 4px 0 6px;
    font-size: 20px;
    color: var(--egho-navy);
}

.egho-panel-head p {
    margin: 0;
    font-size: 14px;
    color: var(--egho-muted);
}

.egho-searchbar {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 0.9fr 0.8fr auto;
    gap: 12px;
    align-items: end;
    background: #fff;
    border: 1px solid var(--egho-line);
    border-radius: var(--egho-radius);
    padding: 16px;
    margin-bottom: 22px;
    box-shadow: 0 12px 30px rgba(11, 37, 69, 0.07);
}

.egho-search-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 14px;
    align-items: end;
}

.egho-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

/* ------------------------------------------------------------ buttons */
.egho-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 20px;
    border-radius: 10px;
    border: 1px solid transparent;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
}

.egho-btn-primary {
    background: var(--egho-blue);
    color: #fff;
}

.egho-btn-primary:hover {
    background: var(--egho-blue-dark);
}

.egho-btn-ghost {
    background: #fff;
    border-color: var(--egho-line);
    color: var(--egho-navy);
}

.egho-btn-ghost:hover {
    border-color: #bcd6f3;
}

.egho-btn:disabled,
.egho-btn[aria-disabled="true"] {
    opacity: 0.55;
    cursor: not-allowed;
}

.egho-chip-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--egho-blue);
    text-decoration: none;
}

.egho-chip-link:hover {
    text-decoration: underline;
}

/* ------------------------------------------------------- results layout */
.egho-results-layout {
    display: grid;
    grid-template-columns: 270px minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

.egho-filter-card {
    background: #fff;
    border: 1px solid var(--egho-line);
    border-radius: var(--egho-radius);
    padding: 18px;
}

.egho-filter-group + .egho-filter-group {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--egho-line);
}

.egho-filter-group h2 {
    margin: 0 0 10px;
    font-size: 12.5px;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--egho-muted);
}

.egho-check {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 5px 0;
    font-size: 14px;
    color: var(--egho-text);
}

.egho-check input {
    width: 16px;
    height: 16px;
    accent-color: var(--egho-blue);
}

.egho-range {
    width: 100%;
    accent-color: var(--egho-blue);
}

.egho-range-row {
    display: flex;
    justify-content: space-between;
    margin-top: 6px;
    font-size: 12.5px;
    color: var(--egho-muted);
}

.egho-filter-note {
    margin: 14px 0 0;
    padding-top: 12px;
    border-top: 1px dashed var(--egho-line);
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--egho-muted);
}

.egho-results {
    display: grid;
    gap: 16px;
}

.egho-results-head {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: baseline;
    justify-content: space-between;
}

.egho-results-head h2 {
    margin: 0;
    font-size: 18px;
    color: var(--egho-navy);
}

.egho-results-head small {
    color: var(--egho-muted);
    font-size: 13px;
}

/* ------------------------------------------------------- result cards */
.egho-result-card {
    display: grid;
    grid-template-columns: 210px minmax(0, 1fr) 190px;
    gap: 18px;
    background: #fff;
    border: 1px solid var(--egho-line);
    border-radius: var(--egho-radius);
    overflow: hidden;
}

.egho-result-media {
    position: relative;
    min-height: 172px;
    background: linear-gradient(135deg, var(--egho-navy), var(--egho-blue));
}

.egho-result-media img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 172px;
    object-fit: cover;
}

.egho-result-media-glyph {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-size: 34px;
    color: rgba(255, 255, 255, 0.75);
}

.egho-result-body {
    padding: 16px 0;
    min-width: 0;
}

.egho-result-body h3 {
    margin: 0 0 4px;
    font-size: 17.5px;
    color: var(--egho-navy);
}

.egho-result-location,
.egho-result-summary {
    margin: 0 0 8px;
    font-size: 13.5px;
    color: var(--egho-muted);
}

.egho-result-summary {
    margin-bottom: 10px;
}

.egho-rating {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--egho-amber);
}

.egho-rating em {
    font-style: normal;
    color: var(--egho-muted);
}

.egho-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.egho-tag {
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--egho-sky);
    color: var(--egho-blue-dark);
}

.egho-tag-muted {
    background: #f1f4f9;
    color: var(--egho-muted);
}

.egho-result-price {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 8px;
    padding: 16px;
    border-left: 1px solid var(--egho-line);
    text-align: right;
}

.egho-result-price strong {
    font-size: 20px;
    color: var(--egho-navy);
}

.egho-result-price small {
    color: var(--egho-muted);
    font-size: 12.5px;
}

.egho-sample-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 4px 9px;
    border-radius: 6px;
    background: rgba(245, 158, 11, 0.95);
    color: #3b2405;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* -------------------------------------------------------------- notices */
.egho-notice {
    background: #fff;
    border: 1px solid var(--egho-line);
    border-radius: var(--egho-radius);
    padding: 24px;
}

.egho-notice h2 {
    margin: 14px 0 8px;
    font-size: 20px;
    color: var(--egho-navy);
}

.egho-notice p {
    margin: 0 0 14px;
    max-width: 700px;
    color: var(--egho-muted);
    font-size: 14.5px;
}

.egho-notice p:last-child {
    margin-bottom: 0;
}

.egho-notice-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 11px;
    border-radius: 999px;
    border: 1px solid #f4d9ad;
    background: #fdf3e2;
    color: #8a5a00;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.egho-notice-status-is-ready {
    border-color: #bcd6f3;
    background: var(--egho-sky);
    color: var(--egho-blue-dark);
}

.egho-sample-note {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin: 20px 0 14px;
    padding: 13px 15px;
    border: 1px solid #f4d9ad;
    border-radius: 12px;
    background: #fff8ec;
    color: #7a4d05;
    font-size: 13px;
    line-height: 1.55;
}

.egho-sample-note strong {
    color: #613d04;
}

/* ----------------------------------------------------------------- visa */
.egho-visa-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.9fr);
    gap: 22px;
    align-items: stretch;
}

.egho-visa-card {
    background: #fff;
    border: 1px solid var(--egho-line);
    border-radius: var(--egho-radius);
    padding: 26px;
}

.egho-visa-card h1 {
    margin: 6px 0 10px;
    font-size: 28px;
    color: var(--egho-navy);
}

.egho-visa-card > p {
    margin: 0 0 18px;
    color: var(--egho-muted);
    font-size: 14.5px;
}

.egho-visa-primary-fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 14px;
    align-items: end;
}

.egho-visa-media {
    border-radius: var(--egho-radius);
    overflow: hidden;
    background: var(--egho-navy);
    min-height: 280px;
}

.egho-visa-media img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 280px;
    object-fit: cover;
}

.egho-visa-details {
    margin-top: 18px;
    background: #fff;
    border: 1px solid var(--egho-line);
    border-radius: var(--egho-radius);
    padding: 22px;
}

.egho-visa-details h2 {
    margin: 0 0 14px;
    font-size: 17px;
    color: var(--egho-navy);
}

.egho-visa-detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 14px;
}

.egho-visa-types {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
    margin-top: 18px;
}

.egho-visa-type {
    background: #fff;
    border: 1px solid var(--egho-line);
    border-radius: 14px;
    padding: 18px 16px;
    text-align: center;
}

.egho-visa-type span {
    display: block;
    font-size: 22px;
    margin-bottom: 8px;
}

.egho-visa-type strong {
    display: block;
    font-size: 14px;
    color: var(--egho-navy);
    margin-bottom: 4px;
}

.egho-visa-type small {
    display: block;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--egho-muted);
}

/* -------------------------------------------------------------- contact */
.egho-contact-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: 22px;
    align-items: center;
    margin-bottom: 22px;
}

.egho-contact-hero h1 {
    margin: 6px 0 10px;
    font-size: 30px;
    color: var(--egho-navy);
}

.egho-contact-hero p {
    margin: 0;
    max-width: 620px;
    color: var(--egho-muted);
    font-size: 15px;
}

.egho-contact-hero-media {
    border-radius: var(--egho-radius);
    overflow: hidden;
    min-height: 210px;
    background: var(--egho-navy);
}

.egho-contact-hero-media img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 210px;
    object-fit: cover;
}

.egho-contact-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 20px;
    align-items: start;
}

.egho-contact-card {
    background: #fff;
    border: 1px solid var(--egho-line);
    border-radius: var(--egho-radius);
    padding: 22px;
}

.egho-contact-card h2 {
    margin: 0 0 12px;
    font-size: 18px;
    color: var(--egho-navy);
}

.egho-contact-row {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 12px 0;
    border-bottom: 1px dashed var(--egho-line);
}

.egho-contact-row:last-of-type {
    border-bottom: 0;
}

.egho-contact-icon {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--egho-sky);
    color: var(--egho-blue-dark);
    font-size: 16px;
}

.egho-contact-row strong {
    display: block;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--egho-muted);
    margin-bottom: 3px;
}

.egho-contact-row span {
    font-size: 14.5px;
    color: var(--egho-text);
}

.egho-map-panel {
    position: relative;
    margin-top: 16px;
    min-height: 190px;
    border: 1px solid var(--egho-line);
    border-radius: var(--egho-radius);
    background-color: #eaf1fb;
    background-image:
        linear-gradient(#dbe7f6 1px, transparent 1px),
        linear-gradient(90deg, #dbe7f6 1px, transparent 1px);
    background-size: 28px 28px;
    display: grid;
    place-items: center;
    padding: 20px;
    text-align: center;
}

.egho-map-panel-inner {
    max-width: 300px;
    font-size: 13.5px;
    color: var(--egho-muted);
}

.egho-map-pin {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    margin: 0 auto 10px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid var(--egho-line);
    color: var(--egho-blue);
    font-size: 18px;
}

.egho-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px;
}

.egho-field-wide {
    grid-column: 1 / -1;
}

.egho-textarea {
    width: 100%;
    min-height: 132px;
    padding: 12px 14px;
    border: 1px solid var(--egho-line);
    border-radius: 10px;
    font: inherit;
    font-size: 14.5px;
    color: var(--egho-text);
    background: #fff;
    resize: vertical;
}

.egho-textarea:disabled {
    background: #f7f9fc;
    color: var(--egho-muted);
}

.egho-field-help {
    text-transform: none;
    letter-spacing: 0;
    margin-left: 4px;
}

.egho-field input:disabled,
.egho-field select:disabled,
.egho-field input[readonly],
.egho-field select[readonly] {
    background: #f7f9fc;
    color: var(--egho-muted);
    cursor: not-allowed;
}

.egho-visa-list {
    margin: 0;
    padding-left: 18px;
    font-size: 14.5px;
    line-height: 1.7;
    color: var(--egho-text);
}

.egho-visa-list li + li {
    margin-top: 6px;
}

/* ------------------------------------------------- hotel room selection */
.egho-hotel-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 20px;
    background: #fff;
    border: 1px solid var(--egho-line);
    border-radius: var(--egho-radius);
    overflow: hidden;
    margin-bottom: 18px;
}

.egho-hotel-hero-media {
    position: relative;
    min-height: 240px;
    background: linear-gradient(135deg, var(--egho-navy), var(--egho-blue));
}

.egho-hotel-hero-media img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 240px;
    object-fit: cover;
}

.egho-hotel-hero-copy {
    padding: 24px 24px 24px 0;
}

.egho-hotel-hero-copy h1 {
    margin: 6px 0 6px;
    font-size: 26px;
    color: var(--egho-navy);
}

.egho-hotel-hero-copy p {
    margin: 0 0 12px;
    color: var(--egho-muted);
    font-size: 14px;
}

.egho-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 0;
    margin: 0 0 18px;
    list-style: none;
    border-bottom: 1px solid var(--egho-line);
}

.egho-tab {
    padding: 10px 14px;
    font-size: 14px;
    font-weight: 600;
    color: var(--egho-muted);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.egho-tab a {
    color: inherit;
    text-decoration: none;
}

.egho-tab a::after {
    content: "";
    position: absolute;
    inset: 0;
}

.egho-tab {
    position: relative;
}

.egho-tab:hover {
    color: var(--egho-blue-dark);
}

.egho-tab.is-active {
    color: var(--egho-blue-dark);
    border-bottom-color: var(--egho-blue);
}

.egho-room-card {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr) 210px;
    gap: 18px;
    background: #fff;
    border: 1px solid var(--egho-line);
    border-radius: var(--egho-radius);
    overflow: hidden;
}

.egho-room-media {
    position: relative;
    min-height: 200px;
    background: linear-gradient(135deg, var(--egho-navy), var(--egho-blue));
}

.egho-room-media img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 200px;
    object-fit: cover;
}

.egho-room-body {
    padding: 18px 0;
    min-width: 0;
}

.egho-room-body h3 {
    margin: 0 0 6px;
    font-size: 17.5px;
    color: var(--egho-navy);
}

.egho-room-body p {
    margin: 0 0 10px;
    font-size: 13.5px;
    color: var(--egho-muted);
}

.egho-amenities {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin-top: 10px;
    font-size: 13px;
    color: var(--egho-text);
}

.egho-amenities span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.egho-room-price {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 8px;
    padding: 18px;
    border-left: 1px solid var(--egho-line);
    text-align: right;
}

.egho-room-price strong {
    font-size: 21px;
    color: var(--egho-navy);
}

.egho-room-price small {
    color: var(--egho-muted);
    font-size: 12.5px;
}

/* ------------------------------------------------- hotel guest details */
.egho-booking-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 20px;
    align-items: start;
}

.egho-summary-card {
    background: #fff;
    border: 1px solid var(--egho-line);
    border-radius: var(--egho-radius);
    padding: 20px;
}

.egho-summary-card h2 {
    margin: 0 0 14px;
    font-size: 17px;
    color: var(--egho-navy);
}

.egho-summary-hotel {
    display: flex;
    gap: 12px;
    align-items: center;
    padding-bottom: 14px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--egho-line);
}

.egho-summary-thumb {
    flex: 0 0 auto;
    width: 68px;
    height: 68px;
    border-radius: 12px;
    overflow: hidden;
    background: linear-gradient(135deg, var(--egho-navy), var(--egho-blue));
}

.egho-summary-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.egho-summary-hotel strong {
    display: block;
    font-size: 15px;
    color: var(--egho-navy);
}

.egho-summary-hotel small {
    color: var(--egho-muted);
    font-size: 12.5px;
}

.egho-summary-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 0;
    font-size: 14px;
    color: var(--egho-text);
}

.egho-summary-row dt,
.egho-summary-row span:first-child {
    color: var(--egho-muted);
}

.egho-summary-total {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    margin-top: 12px;
    padding-top: 14px;
    border-top: 1px solid var(--egho-line);
}

.egho-summary-total strong {
    font-size: 20px;
    color: var(--egho-navy);
}

.egho-summary-actions {
    display: grid;
    gap: 10px;
    margin-top: 16px;
}

.egho-summary-actions small {
    color: var(--egho-muted);
    font-size: 12.5px;
    line-height: 1.5;
}

/* ------------------------------------------------------------ bookings tab */
.egho-bookings {
    display: grid;
    gap: 12px;
}

.egho-booking {
    display: grid;
    grid-template-columns: 170px minmax(0, 1fr) 150px 165px 150px 130px;
    gap: 14px;
    align-items: center;
    background: #fff;
    border: 1px solid var(--egho-line);
    border-radius: 14px;
    padding: 14px 18px;
}

.egho-booking-ref strong {
    display: block;
    font-size: 14.5px;
    color: var(--egho-navy);
}

.egho-booking-ref small,
.egho-booking-date {
    display: block;
    color: var(--egho-muted);
    font-size: 12.5px;
}

.egho-booking-desc strong {
    display: block;
    font-size: 14.5px;
    color: var(--egho-navy);
    margin-bottom: 3px;
}

.egho-booking-desc small {
    color: var(--egho-muted);
    font-size: 13px;
}

.egho-booking-action {
    text-align: right;
}

.egho-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border-radius: 999px;
    border: 1px solid var(--egho-line);
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.egho-status-ok {
    background: #e8f6ee;
    border-color: #bfe6d0;
    color: #1c7a45;
}

.egho-status-warn {
    background: #fdf3e2;
    border-color: #f4d9ad;
    color: #8a5a00;
}

.egho-status-bad {
    background: #fdeceb;
    border-color: #f6c9c5;
    color: #b42318;
}

.egho-status-info {
    background: var(--egho-sky);
    border-color: #bcd6f3;
    color: var(--egho-blue-dark);
}

.egho-status-muted {
    background: #f1f4f9;
    color: var(--egho-muted);
}

/* ----------------------------------------------------------- account page */
.egho-account-layout {
    display: grid;
    grid-template-columns: 270px minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

.egho-account-nav {
    background: #fff;
    border: 1px solid var(--egho-line);
    border-radius: var(--egho-radius);
    padding: 16px;
}

.egho-account-nav-title {
    display: block;
    margin: 4px 0 10px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--egho-muted);
}

.egho-account-nav a,
.egho-account-nav span.egho-account-nav-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    color: var(--egho-text);
    text-decoration: none;
}

.egho-account-nav a:hover {
    background: var(--egho-sky);
    color: var(--egho-blue-dark);
}

.egho-account-nav a.is-active {
    background: var(--egho-sky);
    color: var(--egho-blue-dark);
}

.egho-account-nav span.egho-account-nav-item {
    color: var(--egho-muted);
    font-weight: 500;
    cursor: not-allowed;
}

.egho-account-nav small {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--egho-muted);
}

.egho-account-id {
    display: flex;
    gap: 14px;
    align-items: center;
    margin-bottom: 16px;
}

.egho-account-avatar {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--egho-navy), var(--egho-blue));
    color: #fff;
    font-size: 24px;
    font-weight: 700;
}

.egho-account-id strong {
    display: block;
    font-size: 16px;
    color: var(--egho-navy);
}

.egho-account-id small {
    display: block;
    color: var(--egho-muted);
    font-size: 13px;
}

/* --------------------------------------------------------- flight results */
/*
   The offer cards themselves are rendered by the flight search script with
   the existing `.flight-offer-*` classes, so nothing here renames or replaces
   them. These rules only add the mockup toolbar, filter rail and two-column
   shell, and the shell reveals itself only while results are on screen.
*/
/*
   Hidden until the offer list is on screen. `:has()` reads the results
   container's own `hidden` state, which the flight search script controls, so
   the toolbar and rail can never appear over an empty result area.
*/
.flight-results-toolbar,
.flight-results-rail {
    display: none;
}

.egho-page-body .flight-results-shell:has(.flight-results:not([hidden])) {
    display: grid;
    grid-template-columns: 270px minmax(0, 1fr);
    gap: 20px;
    align-items: start;
    margin-top: 14px;
}

.egho-page-body
    .flight-results-shell:has(.flight-results:not([hidden]))
    .flight-results-toolbar {
    display: flex;
    grid-column: 1 / -1;
}

.egho-page-body
    .flight-results-shell:has(.flight-results:not([hidden]))
    .flight-results-rail {
    display: block;
    position: sticky;
    top: 92px;
}

.flight-results-toolbar {
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 18px;
    padding: 12px 16px;
    background: #fff;
    border: 1px solid var(--egho-line);
    border-radius: 14px;
}

.flight-results-toolbar-title {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--egho-navy);
}

.flight-results-sort {
    display: flex;
    align-items: center;
    gap: 8px;
}

.flight-results-sort > span {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--egho-muted);
}

.egho-sort-select {
    padding: 9px 12px;
    border: 1px solid var(--egho-line);
    border-radius: 10px;
    background: #f7f9fc;
    color: var(--egho-muted);
    font-size: 13px;
    font-weight: 600;
}

.flight-filter-field {
    display: grid;
    gap: 6px;
    margin-bottom: 10px;
}

.flight-filter-field > span {
    font-size: 12.5px;
    font-weight: 600;
    color: var(--egho-text);
}

.flight-filter-field select {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--egho-line);
    border-radius: 10px;
    background: #f7f9fc;
    color: var(--egho-muted);
    font-size: 13px;
}

/*
   Traveller step: the flow script already renders the traveller cards and a
   selected-fare summary inside the review header, so this only lays that
   header out as the mockup's form-plus-summary split. No generated markup or
   status text is replaced.
*/
.egho-page-body .flight-traveler-review-header {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

.egho-page-body .flight-selected-fare {
    padding: 16px;
    border: 1px solid var(--egho-line);
    border-radius: 14px;
    background: #fff;
    text-align: right;
}

@media (max-width: 900px) {
    .egho-page-body .flight-traveler-review-header {
        grid-template-columns: 1fr;
    }

    .egho-page-body .flight-selected-fare {
        text-align: left;
    }
}

.flight-payment-methods {
    margin-top: 22px;
}

.flight-payment-methods .egho-benefit span span.egho-status {
    margin-top: 8px;
}

@media (max-width: 1024px) {
    .egho-page-body .flight-results-shell:has(.flight-results:not([hidden])) {
        grid-template-columns: 1fr;
    }

    .egho-page-body
        .flight-results-shell:has(.flight-results:not([hidden]))
        .flight-results-rail {
        position: static;
    }
}

/* ------------------------------------------------------------- work visa */
.egho-benefits {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
    margin: 0 0 20px;
    padding: 0;
    list-style: none;
}

.egho-benefit {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    background: #fff;
    border: 1px solid var(--egho-line);
    border-radius: 14px;
    padding: 14px 16px;
}

.egho-benefit-icon {
    color: var(--egho-blue);
    font-weight: 800;
    line-height: 1.3;
}

.egho-benefit strong {
    display: block;
    font-size: 14.5px;
    color: var(--egho-navy);
    margin-bottom: 3px;
}

.egho-benefit small {
    color: var(--egho-muted);
    font-size: 12.5px;
    line-height: 1.5;
}

.egho-country-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 14px;
}

.egho-country-tile {
    position: relative;
    background: #fff;
    border: 1px solid var(--egho-line);
    border-radius: 14px;
    overflow: hidden;
}

.egho-country-tile img {
    display: block;
    width: 100%;
    height: 120px;
    object-fit: cover;
}

.egho-country-tile-body {
    padding: 12px 14px;
}

.egho-country-tile-body strong {
    display: block;
    font-size: 14.5px;
    color: var(--egho-navy);
}

.egho-country-tile-body small {
    color: var(--egho-muted);
    font-size: 12.5px;
}

.egho-radio-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    padding: 4px 0;
}

.egho-radio {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--egho-text);
}

.egho-radio input {
    width: 16px;
    height: 16px;
    accent-color: var(--egho-blue);
}

@media (max-width: 1024px) {
    .egho-hotel-hero,
    .egho-booking-layout,
    .egho-account-layout {
        grid-template-columns: 1fr;
    }

    .egho-booking {
        grid-template-columns: 170px minmax(0, 1fr) 150px;
    }

    .egho-booking-date,
    .egho-booking-action {
        grid-column: 1 / -1;
        text-align: left;
    }

    .egho-hotel-hero-copy {
        padding: 0 20px 20px;
    }

    .egho-room-card {
        grid-template-columns: 200px minmax(0, 1fr);
    }

    .egho-room-price {
        grid-column: 1 / -1;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        text-align: left;
        border-left: 0;
        border-top: 1px solid var(--egho-line);
    }
}

@media (max-width: 760px) {
    .egho-room-card {
        grid-template-columns: 1fr;
    }

    .egho-room-media,
    .egho-room-media img {
        min-height: 180px;
    }

    .egho-room-body {
        padding: 16px;
    }

    .egho-hotel-hero-copy h1 {
        font-size: 22px;
    }
}

.egho-form-foot {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    margin-top: 16px;
}

.egho-form-foot small {
    color: var(--egho-muted);
    font-size: 12.5px;
    max-width: 380px;
    line-height: 1.5;
}

/* ----------------------------------------------------- module responsive */
@media (max-width: 1024px) {
    .egho-results-layout,
    .egho-visa-grid,
    .egho-contact-grid,
    .egho-contact-hero {
        grid-template-columns: 1fr;
    }

    .egho-result-card {
        grid-template-columns: 180px minmax(0, 1fr);
    }

    .egho-result-price {
        grid-column: 1 / -1;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        text-align: left;
        border-left: 0;
        border-top: 1px solid var(--egho-line);
    }

    .egho-visa-types {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .egho-searchbar {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .egho-searchbar .egho-actions {
        grid-column: 1 / -1;
    }

    .egho-result-card {
        grid-template-columns: 1fr;
    }

    .egho-result-media,
    .egho-result-media img {
        min-height: 190px;
    }

    .egho-result-body {
        padding: 16px;
    }

    .egho-visa-types {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .egho-page-head h1,
    .egho-visa-card h1,
    .egho-contact-hero h1 {
        font-size: 24px;
    }
}

@media (max-width: 520px) {
    .egho-searchbar,
    .egho-visa-types,
    .egho-form-grid {
        grid-template-columns: 1fr;
    }

    .egho-page {
        padding: 22px 0 46px;
    }

    .egho-steps {
        gap: 8px 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .egho-result-card,
    .egho-btn {
        transition: none;
    }
}

/* ==========================================================================
   AUTH EXPERIENCE
   Split travel/credential layout used by layouts/auth.blade.php.
   ========================================================================== */

body.auth-body:has(.egho-auth) {
    background: var(--egho-surface);
    color: var(--egho-text);
    font-family:
        "Instrument Sans", ui-sans-serif, system-ui, -apple-system,
        BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.egho-auth {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    min-height: 100vh;
}

.egho-auth-visual {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 42px;
    padding: 40px 48px;
    color: rgba(255, 255, 255, 0.9);
    background:
        radial-gradient(900px 420px at 82% 6%, rgba(18, 86, 160, 0.55), transparent 62%),
        radial-gradient(600px 520px at 4% 98%, rgba(245, 158, 11, 0.16), transparent 58%),
        linear-gradient(155deg, #0b2545 0%, #0d2f5c 52%, #0b2545 100%);
}

.egho-auth-visual::after {
    content: "";
    position: absolute;
    right: -130px;
    bottom: -150px;
    width: 360px;
    height: 360px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow:
        0 0 0 62px rgba(255, 255, 255, 0.04),
        0 0 0 132px rgba(255, 255, 255, 0.022);
    pointer-events: none;
}

.egho-auth-visual-top {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.egho-auth-brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: #fff;
    text-decoration: none;
}

.egho-auth-brand-mark {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.12);
    font-size: 19px;
}

.egho-auth-brand-copy strong {
    display: block;
    font-size: 15px;
}

.egho-auth-brand-copy small {
    display: block;
    margin-top: 2px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.egho-auth-back {
    padding-bottom: 2px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    color: rgba(255, 255, 255, 0.8);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

.egho-auth-back:hover {
    border-color: #fff;
    color: #fff;
}

.egho-auth-visual-body {
    position: relative;
    z-index: 1;
    max-width: 520px;
}

.egho-auth-visual-body h1 {
    margin: 12px 0 14px;
    color: #fff;
    font-size: clamp(28px, 2.6vw, 40px);
    line-height: 1.15;
    letter-spacing: -0.02em;
}

.egho-auth-visual-body > p {
    margin: 0;
    color: rgba(255, 255, 255, 0.78);
    font-size: 15.5px;
    line-height: 1.6;
}

.egho-auth-points {
    display: grid;
    gap: 14px;
    margin: 30px 0 0;
    padding: 0;
    list-style: none;
}

.egho-auth-points li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.egho-auth-tick {
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    flex: 0 0 26px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
}

.egho-auth-points strong {
    display: block;
    color: #fff;
    font-size: 14px;
}

.egho-auth-points small {
    display: block;
    margin-top: 3px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 13px;
    line-height: 1.5;
}

.egho-auth-visual-foot {
    position: relative;
    z-index: 1;
    color: rgba(255, 255, 255, 0.55);
    font-size: 12px;
    letter-spacing: 0.06em;
}

.egho-auth-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 32px;
    background: #fff;
}

.egho-auth-card {
    width: 100%;
    max-width: 428px;
}

.egho-auth-head {
    margin-bottom: 22px;
}

.egho-auth-head h2 {
    margin: 8px 0 6px;
    color: var(--egho-navy);
    font-size: 26px;
    letter-spacing: -0.02em;
}

.egho-auth-head p {
    margin: 0;
    color: var(--egho-muted);
    font-size: 14px;
    line-height: 1.55;
}

.egho-auth-form {
    display: grid;
    gap: 16px;
}

.egho-auth-form .egho-field {
    display: grid;
    gap: 7px;
}

.egho-auth-form .egho-field input {
    width: 100%;
}

.egho-auth-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.egho-auth-row a {
    color: var(--egho-blue);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

.egho-auth-row a:hover {
    text-decoration: underline;
}

.egho-check-row {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--egho-text);
    font-size: 13px;
}

.egho-check-row input {
    width: 16px;
    height: 16px;
    accent-color: var(--egho-blue);
}

.egho-auth-submit {
    width: 100%;
}

.egho-auth-alt {
    margin: 2px 0 0;
    color: var(--egho-muted);
    font-size: 13px;
    text-align: center;
}

.egho-auth-alt a {
    color: var(--egho-blue);
    font-weight: 650;
    text-decoration: none;
}

.egho-auth-alt a:hover {
    text-decoration: underline;
}

.egho-auth-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 26px;
    padding-top: 18px;
    border-top: 1px solid var(--egho-line);
    color: var(--egho-muted);
    font-size: 12px;
}

.egho-auth-meta a {
    color: var(--egho-blue);
    font-weight: 600;
    text-decoration: none;
}

/* Bridges so legacy auth alert markup inside the new shell matches the theme. */
.egho-auth-card .auth-alert {
    margin-bottom: 18px;
    padding: 14px 16px;
    border-radius: 12px;
    font-size: 13px;
}

.egho-auth-card .auth-alert-error {
    border: 1px solid #f6c9c5;
    background: #fdeceb;
    color: #b42318;
}

.egho-auth-card .auth-alert-success {
    border: 1px solid #bfe6d0;
    background: #e8f6ee;
    color: #1c7a45;
}

.egho-auth-card .auth-alert ul {
    margin: 0;
    padding-left: 18px;
}

@media (max-width: 900px) {
    .egho-auth {
        grid-template-columns: 1fr;
        min-height: 0;
    }

    .egho-auth-visual {
        gap: 24px;
        padding: 28px 22px 32px;
    }

    .egho-auth-visual-body {
        max-width: none;
    }

    .egho-auth-visual-body h1 {
        font-size: 26px;
    }

    .egho-auth-points,
    .egho-auth-visual-foot {
        display: none;
    }

    .egho-auth-panel {
        padding: 32px 22px 52px;
    }
}

/* ==========================================================================
   DOCUMENTATION PAGES
   About, terms and other long-form public information pages.
   ========================================================================== */

.egho-doc {
    background: var(--egho-surface);
    padding: 30px 0 64px;
}

.egho-doc-hero {
    position: relative;
    overflow: hidden;
    padding: 38px 40px;
    border-radius: var(--egho-radius);
    color: rgba(255, 255, 255, 0.9);
    background: linear-gradient(150deg, #0b2545 0%, #0d2f5c 58%, #0b2545 100%);
    box-shadow: var(--egho-shadow);
}

.egho-doc-hero::after {
    content: "";
    position: absolute;
    right: -110px;
    top: -130px;
    width: 320px;
    height: 320px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 0 58px rgba(255, 255, 255, 0.035);
    pointer-events: none;
}

.egho-doc-hero h1 {
    position: relative;
    z-index: 1;
    margin: 10px 0 12px;
    color: #fff;
    font-size: clamp(26px, 2.4vw, 36px);
    line-height: 1.15;
    letter-spacing: -0.02em;
}

.egho-doc-hero p {
    position: relative;
    z-index: 1;
    margin: 0;
    max-width: 780px;
    color: rgba(255, 255, 255, 0.78);
    font-size: 15.5px;
    line-height: 1.65;
}

.egho-doc-hero .egho-eyebrow {
    position: relative;
    z-index: 1;
    color: rgba(255, 255, 255, 0.62);
}

.egho-doc-badges {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 22px;
}

.egho-doc-badges span {
    padding: 6px 12px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.09);
    color: rgba(255, 255, 255, 0.86);
    font-size: 12px;
    font-weight: 600;
}

.egho-doc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
    margin-top: 22px;
}

.egho-doc-card {
    padding: 22px;
    border: 1px solid var(--egho-line);
    border-radius: var(--egho-radius);
    background: #fff;
}

.egho-doc-card h2 {
    margin: 12px 0 8px;
    color: var(--egho-navy);
    font-size: 18px;
}

.egho-doc-card p {
    margin: 0;
    color: var(--egho-muted);
    font-size: 14px;
    line-height: 1.65;
}

.egho-doc-card-num {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--egho-sky);
    color: var(--egho-blue-dark);
    font-size: 13px;
    font-weight: 800;
}

.egho-doc-stack {
    display: grid;
    gap: 14px;
    margin-top: 22px;
}

.egho-doc-stack .egho-doc-card {
    display: grid;
    grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
    gap: 6px 26px;
    align-items: start;
}

.egho-doc-stack .egho-doc-card h2 {
    margin: 0;
}

.egho-doc-stack .egho-doc-card p {
    padding-top: 2px;
}

.egho-doc-note {
    margin-top: 20px;
    padding: 16px 18px;
    border: 1px solid var(--egho-line);
    border-left: 3px solid var(--egho-amber);
    border-radius: 12px;
    background: #fff;
    color: var(--egho-muted);
    font-size: 13.5px;
    line-height: 1.65;
}

@media (max-width: 760px) {
    .egho-doc-hero {
        padding: 28px 22px;
    }

    .egho-doc-stack .egho-doc-card {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   ERROR PAGES
   ========================================================================== */

.egho-error {
    background: var(--egho-surface);
    padding: 64px 0 84px;
}

.egho-error-card {
    max-width: 720px;
    margin: 0 auto;
    padding: 46px 40px;
    border: 1px solid var(--egho-line);
    border-radius: var(--egho-radius);
    background: #fff;
    box-shadow: var(--egho-shadow);
    text-align: center;
}

.egho-error-code {
    display: inline-grid;
    place-items: center;
    min-width: 66px;
    padding: 10px 16px;
    border-radius: 14px;
    background: var(--egho-sky);
    color: var(--egho-blue-dark);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.16em;
}

.egho-error-card h1 {
    margin: 18px 0 10px;
    color: var(--egho-navy);
    font-size: clamp(26px, 3vw, 34px);
    letter-spacing: -0.02em;
}

.egho-error-card p {
    max-width: 520px;
    margin: 0 auto;
    color: var(--egho-muted);
    font-size: 15px;
    line-height: 1.65;
}

.egho-error-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 26px;
}

@media (max-width: 520px) {
    .egho-error {
        padding: 40px 0 60px;
    }

    .egho-error-card {
        padding: 32px 22px;
    }
}

/* ==========================================================================
   CUSTOMER RECORDS
   Booking detail and invoice/payment record pages.
   ========================================================================== */

.egho-record-hero {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 22px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.egho-record-hero h1 {
    margin: 8px 0;
    color: var(--egho-navy);
    font-size: clamp(26px, 2.4vw, 34px);
    letter-spacing: -0.02em;
}

.egho-record-hero p {
    margin: 0;
    max-width: 660px;
    color: var(--egho-muted);
    font-size: 14.5px;
    line-height: 1.6;
}

.egho-record-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.egho-record-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 16px;
    margin-bottom: 18px;
}

.egho-record-card {
    padding: 22px;
    border: 1px solid var(--egho-line);
    border-radius: var(--egho-radius);
    background: #fff;
}

.egho-data-list {
    display: grid;
    margin: 6px 0 0;
}

.egho-data-list > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 11px 0;
    border-bottom: 1px dashed var(--egho-line);
}

.egho-data-list > div:last-child {
    border-bottom: 0;
}

.egho-data-list dt {
    margin: 0;
    color: var(--egho-muted);
    font-size: 13px;
}

.egho-data-list dd {
    margin: 0;
    color: var(--egho-navy);
    font-size: 13.5px;
    font-weight: 600;
    text-align: right;
    overflow-wrap: anywhere;
}

.egho-document {
    padding: 30px 32px;
    border: 1px solid var(--egho-line);
    border-radius: var(--egho-radius);
    background: #fff;
}

.egho-document-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--egho-line);
}

.egho-document-head h2 {
    margin: 8px 0 0;
    color: var(--egho-navy);
    font-size: 20px;
}

.egho-document-head strong {
    color: var(--egho-navy);
    font-size: 15px;
}

.egho-document-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px 26px;
    margin: 22px 0 0;
}

.egho-document-grid > div {
    display: grid;
    gap: 5px;
}

.egho-document-grid dt {
    color: var(--egho-muted);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.egho-document-grid dd {
    margin: 0;
    color: var(--egho-navy);
    font-size: 14.5px;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.egho-note-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 14px;
    margin-top: 24px;
}

.egho-note-grid article {
    padding: 16px 18px;
    border: 1px solid var(--egho-line);
    border-radius: 12px;
    background: var(--egho-surface);
}

.egho-note-grid h3 {
    margin: 0 0 8px;
    color: var(--egho-navy);
    font-size: 14px;
}

.egho-note-grid p {
    margin: 0;
    color: var(--egho-muted);
    font-size: 13.5px;
    line-height: 1.6;
}

.egho-empty {
    padding: 22px;
    border: 1px dashed var(--egho-line);
    border-radius: 12px;
    background: #fbfcfe;
    color: var(--egho-muted);
    font-size: 13.5px;
    line-height: 1.6;
}

@media print {
    .egho-print-hide {
        display: none !important;
    }

    .egho-document {
        padding: 0;
        border: 0;
        border-radius: 0;
    }
}

@media (max-width: 760px) {
    .egho-record-hero {
        align-items: flex-start;
        flex-direction: column;
    }

    .egho-document {
        padding: 22px;
    }

    .egho-document-head {
        flex-direction: column;
        gap: 10px;
    }
}