/* ==========================================================
   Üveg réteg – a style.css / cookies.css / consent.css UTÁN töltődik be
   ========================================================== */

:root {
    --glass-tint: rgba(20, 20, 22, 0.35);
    --glass-fill: linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.03) 55%, rgba(255,255,255,0.08) 100%);
    --glass-edge: inset 1px 1px 0 rgba(255,255,255,0.35), inset -1px -1px 0 rgba(255,255,255,0.07), inset 0 0 18px rgba(255,255,255,0.04);
    --glass-line: 1px solid rgba(255, 255, 255, 0.14);
}

/* ---------- navbar: átlátszó üveglap ----------
   Az üveg egy pszeudo-elemen van, hogy a mobilmenü is tudjon elmosni. */
.site-navbar {
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border: 0;
    box-shadow: none;
}

.site-navbar::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    pointer-events: none;
    background:
        linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.02) 50%, rgba(255,255,255,0.07) 100%),
        rgba(0, 0, 0, 0.10);
    -webkit-backdrop-filter: blur(2.5px) saturate(170%);
    backdrop-filter: blur(2.5px) saturate(170%);
    border: 1px solid rgba(255, 255, 255, 0.22);
    box-shadow: 0 10px 28px rgba(0,0,0,0.30), inset 1px 1px 0 rgba(255,255,255,0.45), inset -1px -1px 0 rgba(255,255,255,0.10), inset 0 0 14px rgba(255,255,255,0.14);
}

/* Chromium alapú böngészőben (Chrome, Edge, Opera, Android): fénytörés a széleken.
   A bdweb.js teszi rá a has-lens osztályt, és építi fel a #navLens szűrőt. */
html.has-lens .site-navbar::before {
    -webkit-backdrop-filter: url(#navLens) blur(0.6px) saturate(150%);
    backdrop-filter: url(#navLens) blur(0.6px) saturate(150%);
}

/* Safari / Firefox: az oldal élő másolatai csíkokban, a széleken megnagyítva (bdweb.js építi) */
.nav-mirror {
    position: absolute;
    inset: 0;
    z-index: -2;
    border-radius: inherit;
    overflow: hidden;
    isolation: isolate;
    transform: translateZ(0);
    -webkit-mask-image: -webkit-radial-gradient(white, black); /* Safari: lekerekítés a mozgó rétegeken is */
    pointer-events: none;
    -webkit-filter: saturate(1.4);
    filter: saturate(1.4);
}

.nav-layer {
    position: absolute;
    left: 0;
    right: 0;
    overflow: hidden;
}

.nav-mirror-page {
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: 0 0;
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
    will-change: transform;
}

html.has-mirror .site-navbar::before {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

/* mobilmenü */
.mobile-menu {
    background:
        linear-gradient(135deg, rgba(255,255,255,0.14), rgba(255,255,255,0.03)),
        rgba(20, 20, 22, 0.35);
    -webkit-backdrop-filter: blur(16px) saturate(170%);
    backdrop-filter: blur(16px) saturate(170%);
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 20px 40px rgba(0,0,0,0.45), inset 1px 1px 0 rgba(255,255,255,0.35), inset -1px -1px 0 rgba(255,255,255,0.07);
}

/* ---------- nagy doboz ---------- */
.overlay-box {
    position: relative;
    isolation: isolate;
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
}

.overlay-box::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(255,255,255,0.09), rgba(255,255,255,0.025)),
        var(--glass-tint);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 40px 80px rgba(0,0,0,0.45), inset 1px 1px 0 rgba(255,255,255,0.25), inset -1px -1px 0 rgba(255,255,255,0.06);
}

/* ---------- kártyák ---------- */
.service-card,
.work-card {
    background: var(--glass-fill);
    border: var(--glass-line);
    box-shadow: 0 8px 24px rgba(0,0,0,0.25), var(--glass-edge);
}

.work-card:hover {
    box-shadow: 0 20px 40px rgba(0,0,0,0.45), var(--glass-edge);
}

/* ---------- gombok ---------- */
.btn {
    color: #0a0a0a;
    background: linear-gradient(135deg, rgba(100,181,246,0.92), rgba(30,136,229,0.78));
    border: 1px solid rgba(255, 255, 255, 0.40);
    box-shadow: 0 6px 18px rgba(30,136,229,0.35), inset 1px 1px 0 rgba(255,255,255,0.55), inset -1px -1px 0 rgba(255,255,255,0.12);
}

.btn:hover {
    background: linear-gradient(135deg, rgba(129,199,255,0.96), rgba(66,165,245,0.85));
}

.btn-secondary {
    color: #ffffff;
    background: var(--glass-fill);
    border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 6px 18px rgba(0,0,0,0.25), var(--glass-edge);
}

.btn-secondary:hover {
    background: linear-gradient(135deg, rgba(255,255,255,0.20), rgba(255,255,255,0.08));
}

/* ---------- űrlap ---------- */
.field input,
.field textarea {
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow: inset 0 2px 6px rgba(0,0,0,0.25), inset 0 1px 0 rgba(255,255,255,0.10);
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.field input:focus,
.field textarea:focus {
    background: rgba(255, 255, 255, 0.10);
    border-color: rgba(100, 181, 246, 0.85);
    box-shadow: inset 0 2px 6px rgba(0,0,0,0.25), 0 0 0 3px rgba(30, 136, 229, 0.30);
}

/* ---------- sütibeállítások kapcsolói ---------- */
.slider {
    background: rgba(255, 255, 255, 0.16);
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.35), inset 0 0 0 1px rgba(255,255,255,0.14);
}

.slider::before {
    background: linear-gradient(180deg, #ffffff, #e6eefb);
    box-shadow: 0 2px 6px rgba(0,0,0,0.40);
}

.switch input:checked + .slider {
    background: linear-gradient(135deg, rgba(100,181,246,0.95), rgba(30,136,229,0.85));
}

/* ---------- süti sáv ---------- */
.consent-banner {
    background: var(--glass-fill), var(--glass-tint);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    backdrop-filter: blur(24px) saturate(180%);
    box-shadow: 0 14px 36px rgba(0,0,0,0.45), inset 1px 1px 0 rgba(255,255,255,0.40), inset -1px -1px 0 rgba(255,255,255,0.08);
}

/* ---------- lábléc ---------- */
.site-footer .footer-inner {
    width: min(92%, 1400px);
    margin: 56px auto 20px;
    padding: 20px 28px;
    background: var(--glass-fill), var(--glass-tint);
    border: var(--glass-line);
    border-radius: 24px;
    box-shadow: 0 12px 32px rgba(0,0,0,0.35), var(--glass-edge);
}

/* ---------- tartalék ---------- */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .site-navbar::before,
    .overlay-box::before,
    .mobile-menu,
    .consent-banner,
    .site-footer .footer-inner {
        background: #25252a;
    }
}

@media (prefers-reduced-transparency: reduce) {
    .site-navbar::before,
    .overlay-box::before,
    .service-card,
    .work-card,
    .mobile-menu,
    .consent-banner,
    .site-footer .footer-inner {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        background: #25252a;
    }
}