/* ================================================================
   UTAZÁSFIGYELŐ — Premium Global Background
   ================================================================ */

html {
    min-height: 100%;
    background: #f5f8fc;
}

body {
    position: relative;
    isolation: isolate;

    min-height: 100vh;

    background:
        radial-gradient(
            circle at 8% -5%,
            rgba(59, 130, 246, .16) 0,
            rgba(59, 130, 246, .07) 18rem,
            transparent 38rem
        ),

        radial-gradient(
            circle at 93% 9%,
            rgba(14, 165, 233, .12) 0,
            rgba(14, 165, 233, .05) 17rem,
            transparent 36rem
        ),

        radial-gradient(
            circle at 55% 92%,
            rgba(124, 58, 237, .065) 0,
            transparent 32rem
        ),

        linear-gradient(
            180deg,
            #fbfdff 0%,
            #f7f9fc 28%,
            #f5f8fb 68%,
            #f8fafc 100%
        );

    background-attachment: fixed;
}


/* ================================================================
   LÁGY FÉNYFOLTOK
   ================================================================ */

body::before {
    content: "";

    position: fixed;

    top: 80px;
    left: 50%;

    width: min(1100px, 92vw);
    height: 460px;

    transform: translateX(-50%);

    background:
        radial-gradient(
            ellipse at 30% 30%,
            rgba(96, 165, 250, .15),
            transparent 42%
        ),

        radial-gradient(
            ellipse at 75% 25%,
            rgba(56, 189, 248, .09),
            transparent 39%
        );

    filter: blur(30px);

    pointer-events: none;

    z-index: -2;
}


/* ================================================================
   FINOM PONTMINTA — csak textúra
   ================================================================ */

body::after {
    content: "";

    position: fixed;
    inset: 0;

    pointer-events: none;

    z-index: -1;

    opacity: .18;

    background-image:
        radial-gradient(
            circle,
            rgba(37, 99, 235, .22) .7px,
            transparent .8px
        );

    background-size:
        28px 28px;

    -webkit-mask-image:
        linear-gradient(
            to bottom,
            rgba(0,0,0,.9) 0%,
            rgba(0,0,0,.35) 33%,
            transparent 72%
        );

    mask-image:
        linear-gradient(
            to bottom,
            rgba(0,0,0,.9) 0%,
            rgba(0,0,0,.35) 33%,
            transparent 72%
        );
}


/* ================================================================
   OLDAL KONTÉNER
   ================================================================ */

.trip-page {
    position: relative;
}


/* ================================================================
   PREMIUM SURFACES
   ================================================================ */

.trip-page > .section,
.trip-page .section,
.uf-exp-section,
.uf-extra-section {
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.96),
            rgba(255,255,255,.91)
        );

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

    border-color:
        rgba(219, 228, 239, .82);

    box-shadow:
        0 1px 2px rgba(15,23,42,.02),
        0 12px 38px rgba(15,23,42,.05);
}


/* ================================================================
   FINOM FELSŐ FÉNY A NAGY KÁRTYÁKON
   ================================================================ */

.uf-exp-section,
.uf-extra-section {
    position: relative;
    overflow: hidden;
}

.uf-exp-section::before,
.uf-extra-section::before {
    content: "";

    position: absolute;

    top: -90px;
    right: -70px;

    width: 280px;
    height: 280px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(59, 130, 246, .07),
            transparent 70%
        );

    pointer-events: none;
}


/* ================================================================
   KÁRTYÁK
   ================================================================ */

.uf-experience-card,
.uf-local-card,
.uf-provider-card,
.uf-extra-card {
    border-color:
        rgba(218, 227, 238, .88);

    box-shadow:
        0 1px 2px rgba(15,23,42,.015);
}


/* ================================================================
   MOBIL
   ================================================================ */

@media (max-width: 720px) {

    body {
        background-attachment: scroll;

        background:
            radial-gradient(
                circle at 20% 0%,
                rgba(59, 130, 246, .11),
                transparent 28rem
            ),

            linear-gradient(
                180deg,
                #fbfdff 0%,
                #f6f9fc 40%,
                #f8fafc 100%
            );
    }

    body::before {
        height: 320px;
        opacity: .65;
    }

    body::after {
        opacity: .10;
        background-size: 25px 25px;
    }
}


/* ================================================================
   ACCESSIBILITY / PERFORMANCE
   ================================================================ */

@media (prefers-reduced-motion: reduce) {

    body {
        background-attachment: scroll;
    }

}