/* ================================================================
   UTAZÁSFIGYELŐ — Travel-first redesign
   ================================================================ */

:root {
    --travel-bg: #f7f5f0;
    --travel-surface: #ffffff;
    --travel-ink: #162033;
    --travel-text: #475569;
    --travel-muted: #7a8798;

    --travel-blue: #176b87;
    --travel-blue-dark: #10556c;

    --travel-teal: #0f766e;
    --travel-teal-dark: #0a5e58;

    --travel-sand: #f3eee5;
    --travel-border: #e6e2da;

    --travel-shadow:
        0 18px 55px rgba(38, 47, 59, .09);

    --travel-shadow-small:
        0 8px 28px rgba(38, 47, 59, .055);
}


/* ================================================================
   GLOBAL
   ================================================================ */

html {
    background: var(--travel-bg);
}

body {
    background:
        linear-gradient(
            180deg,
            #faf8f4 0%,
            #f7f5f0 38%,
            #f4f6f5 100%
        ) !important;

    color: var(--travel-text);
}

body::before,
body::after {
    display: none !important;
}


/* ================================================================
   TRIP PAGE
   ================================================================ */

.trip-page {
    width: min(
        calc(100% - 38px),
        1220px
    ) !important;

    padding-top: 18px !important;
}


/* ================================================================
   HERO
   ================================================================ */

.uf-travel-hero {
    position: relative;

    min-height: 475px;

    border-radius: 28px;

    background-size: cover;
    background-position: center;

    overflow: visible;

    box-shadow:
        0 28px 75px rgba(28, 39, 48, .16);
}

.uf-travel-hero-content {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    min-height: 475px;

    padding:
        56px
        480px
        48px
        48px;

    color: white;
}

.uf-travel-kicker {
    margin-bottom: 12px;

    font-size: 12px;
    font-weight: 800;

    letter-spacing: .13em;
    text-transform: uppercase;

    color: rgba(255,255,255,.82);
}

.uf-travel-destination {
    margin: 0;

    font-size:
        clamp(
            43px,
            6vw,
            72px
        );

    line-height: .98;

    font-weight: 770;

    letter-spacing: -.055em;

    color: white;
}

.uf-travel-tagline {
    max-width: 500px;

    margin-top: 17px;

    font-size: 18px;
    line-height: 1.45;

    color: rgba(255,255,255,.91);
}

.uf-travel-facts {
    display: flex;
    align-items: center;
    gap: 18px;

    margin-top: 30px;
}

.uf-travel-fact {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.uf-travel-fact-label {
    color: rgba(255,255,255,.68);

    font-size: 11px;
    font-weight: 650;
}

.uf-travel-fact strong {
    color: white;

    font-size: 14px;
    font-weight: 700;
}

.uf-travel-fact-divider {
    width: 1px;
    height: 33px;

    background: rgba(255,255,255,.25);
}


/* ================================================================
   FLOATING BOOKING CARD
   ================================================================ */

.uf-floating-trip-card {
    position: absolute;

    top: 50%;
    right: 34px;

    width: 405px;

    transform: translateY(-50%);

    padding: 24px;

    border-radius: 22px;

    background:
        rgba(
            255,
            255,
            255,
            .96
        );

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    box-shadow:
        0 24px 65px
        rgba(0,0,0,.18);

    color: var(--travel-ink);
}

.uf-floating-route {
    display: grid;

    grid-template-columns:
        1fr 100px 1fr;

    align-items: center;

    gap: 12px;
}

.uf-route-destination {
    text-align: right;
}

.uf-airport-code {
    color: var(--travel-ink);

    font-size: 27px;
    line-height: 1;

    font-weight: 800;

    letter-spacing: -.035em;
}

.uf-airport-name {
    margin-top: 6px;

    color: var(--travel-muted);

    font-size: 11px;
}

.uf-route-line {
    display: flex;
    align-items: center;

    color: var(--travel-blue);
}

.uf-route-dot {
    width: 6px;
    height: 6px;

    flex: 0 0 auto;

    border: 2px solid
        var(--travel-blue);

    border-radius: 50%;
}

.uf-route-track {
    height: 1px;

    flex: 1;

    background:
        #bfd1d8;
}

.uf-route-line svg {
    margin: 0 6px;
}

.uf-floating-meta {
    display: flex;
    gap: 8px;

    margin-top: 22px;
}

.uf-floating-meta span {
    padding: 7px 9px;

    border-radius: 999px;

    background: #f1f5f4;

    color: #506069;

    font-size: 10px;
    font-weight: 700;
}

.uf-floating-price {
    margin-top: 23px;
    padding-top: 20px;

    border-top:
        1px solid #e8eceb;
}

.uf-floating-price > div {
    display: flex;
    flex-direction: column;
}

.uf-floating-price-label {
    color: var(--travel-muted);

    font-size: 11px;
}

.uf-floating-price strong {
    margin-top: 3px;

    color: var(--travel-ink);

    font-size: 30px;
    line-height: 1.15;

    font-weight: 800;

    letter-spacing: -.035em;
}

.uf-floating-actions {
    display: grid;

    grid-template-columns:
        1fr 1.15fr;

    gap: 9px;

    margin-top: 21px;
}

.uf-travel-button {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-height: 46px;

    padding: 0 14px;

    border-radius: 11px;

    font-size: 12px;
    font-weight: 750;

    text-decoration: none;

    transition:
        transform .15s ease,
        background .15s ease;
}

.uf-travel-button:hover {
    transform:
        translateY(-1px);
}

.uf-travel-button-primary {
    gap: 7px;

    background:
        var(--travel-teal);

    color: white;
}

.uf-travel-button-primary:hover {
    background:
        var(--travel-teal-dark);
}

.uf-travel-button-secondary {
    background: #eef2f3;

    color: var(--travel-ink);
}


/* ================================================================
   TRIP SHORTCUTS
   ================================================================ */

.uf-trip-shortcuts {
    position: relative;

    z-index: 3;

    display: grid;

    grid-template-columns:
        repeat(
            4,
            minmax(0, 1fr)
        );

    gap: 0;

    width:
        calc(100% - 70px);

    margin:
        -22px auto
        0;

    overflow: hidden;

    border:
        1px solid
        var(--travel-border);

    border-radius: 18px;

    background:
        rgba(
            255,
            255,
            255,
            .98
        );

    box-shadow:
        var(--travel-shadow);
}

.uf-trip-shortcut {
    display: flex;

    align-items: center;
    gap: 12px;

    min-width: 0;

    padding:
        17px 19px;

    border-right:
        1px solid
        #ece9e3;

    text-decoration: none;

    transition:
        background .15s ease;
}

.uf-trip-shortcut:last-child {
    border-right: 0;
}

.uf-trip-shortcut:hover {
    background: #faf9f6;
}

.uf-trip-shortcut-icon {
    display: flex;

    width: 38px;
    height: 38px;

    flex: 0 0 auto;

    align-items: center;
    justify-content: center;

    border-radius: 11px;

    background: #eef6f5;

    color: var(--travel-teal);
}

.uf-trip-shortcut > span:last-child {
    display: flex;

    min-width: 0;

    flex-direction: column;
}

.uf-trip-shortcut strong {
    color: var(--travel-ink);

    font-size: 13px;
    font-weight: 750;
}

.uf-trip-shortcut small {
    margin-top: 2px;

    overflow: hidden;

    color: var(--travel-muted);

    font-size: 10px;

    white-space: nowrap;
    text-overflow: ellipsis;
}


/* ================================================================
   TRUST STRIP
   ================================================================ */

.uf-trust-strip {
    display: flex;

    justify-content: center;
    flex-wrap: wrap;

    gap: 26px;

    margin:
        22px 0
        7px;

    color: #6e7a80;

    font-size: 11px;
}

.uf-trust-item {
    display: flex;

    align-items: center;
    gap: 7px;
}

.uf-trust-item svg {
    color:
        var(--travel-teal);
}


/* ================================================================
   EXISTING SECTIONS — LESS DASHBOARD, MORE TRAVEL
   ================================================================ */

.trip-page > .section,
.trip-page .section,
.uf-exp-section,
.uf-extra-section {
    border:
        1px solid
        var(--travel-border)
        !important;

    border-radius:
        22px !important;

    background:
        rgba(
            255,
            255,
            255,
            .94
        ) !important;

    box-shadow:
        var(--travel-shadow-small)
        !important;

    backdrop-filter: none !important;
}

.uf-exp-section::before,
.uf-extra-section::before {
    display: none !important;
}


/* ================================================================
   TRAVEL TYPOGRAPHY
   ================================================================ */

.uf-exp-eyebrow,
.uf-extra-eyebrow {
    color:
        var(--travel-teal)
        !important;
}

.uf-exp-title,
.uf-extra-title,
.trip-page h1,
.trip-page h2,
.trip-page h3 {
    color:
        var(--travel-ink);
}


/* ================================================================
   CTA COLOR OVERRIDE
   ================================================================ */

.uf-btn-primary {
    background:
        var(--travel-teal)
        !important;

    box-shadow:
        0 7px 18px
        rgba(
            15,
            118,
            110,
            .18
        )
        !important;
}

.uf-btn-primary:hover {
    background:
        var(--travel-teal-dark)
        !important;
}

.uf-section-icon,
.uf-local-icon,
.uf-extra-icon {
    background:
        #edf6f4
        !important;

    color:
        var(--travel-teal)
        !important;
}

.uf-local-link {
    color:
        var(--travel-blue)
        !important;
}


/* ================================================================
   EXPERIENCE CARDS
   ================================================================ */

.uf-experience-card {
    border-radius:
        18px !important;
}

.uf-experience-media {
    height: 195px !important;
}

.uf-local-card {
    background:
        #faf9f6 !important;

    border-color:
        #ebe7df !important;
}

.uf-provider-card {
    background:
        #faf9f6 !important;
}


/* ================================================================
   RESPONSIVE
   ================================================================ */

@media (max-width: 1030px) {

    .uf-travel-hero-content {
        padding-right: 420px;
    }

    .uf-floating-trip-card {
        width: 360px;

        right: 25px;
    }

    .uf-floating-route {
        grid-template-columns:
            1fr 80px 1fr;
    }
}


@media (max-width: 860px) {

    .uf-travel-hero {
        display: flex;

        flex-direction: column;

        min-height: 0;

        overflow: hidden;
    }

    .uf-travel-hero-content {
        min-height: 410px;

        padding:
            45px 28px 110px;
    }

    .uf-floating-trip-card {
        position: relative;

        top: auto;
        right: auto;

        width:
            calc(100% - 32px);

        margin:
            -76px auto 18px;

        transform: none;
    }

    .uf-trip-shortcuts {
        width:
            calc(100% - 28px);

        margin-top: 14px;

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

    .uf-trip-shortcut:nth-child(2) {
        border-right: 0;
    }

    .uf-trip-shortcut:nth-child(1),
    .uf-trip-shortcut:nth-child(2) {
        border-bottom:
            1px solid #ece9e3;
    }
}


@media (max-width: 600px) {

    .trip-page {
        width:
            calc(100% - 18px)
            !important;
    }

    .uf-travel-hero {
        border-radius: 20px;
    }

    .uf-travel-hero-content {
        min-height: 360px;

        padding:
            35px 22px
            100px;
    }

    .uf-travel-destination {
        font-size: 42px;
    }

    .uf-travel-tagline {
        font-size: 15px;
    }

    .uf-travel-facts {
        gap: 12px;

        margin-top: 23px;
    }

    .uf-travel-fact-divider {
        height: 28px;
    }

    .uf-travel-fact strong {
        font-size: 12px;
    }

    .uf-floating-trip-card {
        width:
            calc(100% - 18px);

        padding: 19px;

        border-radius: 18px;
    }

    .uf-floating-route {
        grid-template-columns:
            1fr 64px 1fr;
    }

    .uf-airport-code {
        font-size: 23px;
    }

    .uf-airport-name {
        font-size: 9px;
    }

    .uf-floating-actions {
        grid-template-columns: 1fr;
    }

    .uf-trip-shortcuts {
        width: 100%;

        grid-template-columns: 1fr 1fr;

        border-radius: 15px;
    }

    .uf-trip-shortcut {
        padding: 14px;
    }

    .uf-trust-strip {
        align-items: flex-start;

        flex-direction: column;

        gap: 9px;

        padding: 0 8px;
    }
}