/* ------------------------------------------------------------------
 * Shared footer styles — used by both the home page and the
 * products page via _footer.twig.
 *
 * Markup uses BEM-style .footer__* classes (mirrors the home page
 * design). Padding has been trimmed from the original (was
 * 120px 96px 48px) to fit a more compact layout per request.
 * ------------------------------------------------------------------ */

/* z-index: 0 establishes a stacking context for the footer so its
 * absolutely-positioned background layers paint relative to the
 * footer instead of bleeding into siblings' contexts.
 *
 * Background composition mirrors the React reference design exactly:
 * three layers — Rect 2 (back) → image → Rect 3 (front) — all sized
 * 1048px tall, anchored to the bottom of the footer, all rendered at
 * opacity 0.25 so the body navy shows through and the rectangle
 * gradients alone handle the top/bottom fades (no CSS mask needed).
 *
 * `overflow: hidden` is critical here. The 1048px-tall layers are a
 * "big enough canvas" deliberately oversized so the gradient never
 * runs out on tall screens. The footer's natural content height is
 * much smaller (~400px), so without clipping these layers extend
 * upward past the footer's box and paint over the FAQ / why-us /
 * reviews sections above (the footer comes after them in document
 * order, all share the auto z-index, so the footer wins paint
 * order). Clipping confines the gradient to the footer where it
 * was meant to live. */
.footer {
    position: relative;
    z-index: 0;
    /* Pull the footer's box upward so the absolutely-positioned bg
     * layers (especially .footer__bg, which is 1048px tall) extend
     * higher into the area above. The matching padding-top puts the
     * footer CONTENT back where it was — visually, only the city
     * image now fades over a much taller distance, blending more
     * gently with the page above. .cms-page / .product-page sit at
     * z-index: 1 within their own stacking contexts, so the
     * overlap area doesn't visually cover content above. */
    margin-top: -260px;
    padding: 260px clamp(20px, 6vw, 96px) 24px;
    overflow: hidden;
}
/* On narrow viewports the FAQ card stacks above the footer's
 * gradient column, and the 260px upward overlap pulled the footer's
 * brand block (NANO SCRIPTS / socials / payments) right on top of
 * the FAQ card. Drop the overlap entirely on phones so the footer
 * content sits flush below the FAQ — the bottom-anchored bg layers
 * still produce the city-image fade within the footer's own height. */
@media (max-width: 720px) {
    .footer {
        margin-top: 0;
        padding-top: 0;
    }
}

/* Only the homepage / category pages (no body class) want the
 * upward overlap — the FAQ + reviews sections fade into the
 * footer's city image there. Card-based pages
 * (.product-page-body: cms, product, checkout, options, login)
 * have a glass card whose bottom corners would get clipped by
 * the overlap, so reset both the negative margin and the
 * compensating padding-top. The 1048px bg image still sits
 * absolutely bottom-anchored and is clipped by the footer's
 * own overflow:hidden, so visuals stay clean. */
.product-page-body .footer {
    margin-top: 0;
    padding-top: 24px;
}
/* Rectangle 2 — transparent → navy gradient. Sits BEHIND the image. */
.footer::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1048px;
    z-index: 0;
    opacity: 0.8;
    pointer-events: none;
    background: linear-gradient(180deg, rgba(72, 86, 129, 0) 0%, #0F121B 100%);
}
/* Rectangle 3 — navy → transparent gradient. Sits ABOVE the image,
 * fading the top of the layer back into the navy page background.
 *
 * Critical: this layer must span EXACTLY the footer height (top:0
 * to bottom:0), not the legacy 1048px-tall bottom-anchored variant.
 * With a 1048px layer most of the gradient ran above the visible
 * footer, so by the time the visible 0% stop met the footer's top
 * edge the navy alpha had already dropped to ~40%, producing the
 * hard horizontal seam where the city image suddenly appeared.
 * Calibrating the gradient to the footer's real height makes the
 * top stop sit exactly at the page→footer boundary, where it
 * matches the body's #0F121B and the join becomes seamless. */
.footer::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 2;
    pointer-events: none;
    background: linear-gradient(180deg,
        #0F121B 0%,
        rgba(15, 18, 27, 0.92) 25%,
        rgba(15, 18, 27, 0.65) 55%,
        rgba(15, 18, 27, 0) 100%);
}

.footer__bg {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1048px;
    z-index: 1;
    /* Top-to-bottom navy fade (#0F121B 100% → transparent) painted
     * over the footer image, so the image fades out from the top. */
    background:
        linear-gradient(180deg, #0F121B 0%, rgba(15, 18, 27, 0) 100%),
        var(--asset-footer-bg) center bottom / 100% 100% no-repeat;
    opacity: 0.25;
    pointer-events: none;
}

.footer__inner {
    position: relative;
    z-index: 3;
    max-width: 1728px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.footer__main {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 24px 40px;
    align-items: center;
}

.footer__brand {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 418px;
    justify-self: start;
}

.footer__brand-top {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
}

.footer__rights {
    color: rgba(255, 255, 255, 0.46);
    font-size: 13px;
    font-family: 'GTA Art Deco', sans-serif;
    font-weight: 500;
}

.footer__logo {
    width: 100%;
    max-width: 220px;
    height: auto;
    max-height: 76px;
    object-fit: contain;
    display: block;
}

.footer__brand-copy {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.footer__headline {
    margin: 0;
    font-size: 24px;
    font-family: 'GTA Art Deco', sans-serif;
    font-weight: 500;
    line-height: 1.2;
}

.footer__headline-white { color: #fff; }
.footer__headline-accent { color: #fa4039; }

.footer__tagline {
    margin: 0;
    color: rgba(255, 255, 255, 0.45);
    font-size: 14px;
    font-family: 'GTA Art Deco', sans-serif;
    font-weight: 400;
    line-height: 1.45;
}

.footer__social {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
}

.footer__social-sep {
    width: 12px;
    height: 2px;
    background: rgba(198, 212, 255, 0.25);
    flex-shrink: 0;
}

.footer__social-btn {
    width: 36px;
    height: 36px;
    border-radius: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #fff;
    flex-shrink: 0;
}

.footer__social-btn--primary {
    background: radial-gradient(ellipse 94% 188% at 50% 100%, #fa4039 0%, #942622 100%);
}

.footer__social-btn--ghost {
    outline: 1px solid rgba(198, 212, 255, 0.25);
    outline-offset: -1px;
    color: rgba(198, 212, 255, 0.25);
}

.footer__nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px 64px;
    padding-top: 4px;
    justify-self: center;
    width: max-content;
    max-width: 100%;
}

.footer__nav-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    min-width: 85px;
}

.footer__nav-marker {
    width: 17px;
    height: 3px;
    background: #fa4039;
    border-radius: 0 0 2px 2px;
}

.footer__nav-title {
    margin: 0;
    color: #fff;
    font-size: 18px;
    font-family: 'GTA Art Deco', sans-serif;
    font-weight: 500;
}

.footer__nav-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.footer__nav-list a {
    color: rgba(255, 255, 255, 0.35);
    font-size: 13px;
    font-family: 'GTA Art Deco', sans-serif;
    font-weight: 400;
    text-decoration: none;
}

.footer__nav-list a:hover { color: rgba(255, 255, 255, 0.6); }

.footer__payments {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    justify-self: end;
    width: max-content;
    max-width: 100%;
}

.footer__pay-icons {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
}

.footer__pay-slot {
    height: 32px;
    min-width: 44px;
    padding: 4px 12px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0.9;
}

.footer__pay-icon {
    display: block;
    height: 20px;
    width: auto;
    max-width: 52px;
    object-fit: contain;
}

.footer__pay-label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.35);
    font-size: 12px;
    font-family: 'GTA Art Deco', sans-serif;
    font-weight: 400;
}

.footer__pay-dot {
    width: 8px;
    height: 8px;
    background: #2dff7b;
    border-radius: 2px;
    flex-shrink: 0;
}

.footer__meta {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.footer__tebex {
    display: flex;
    align-items: center;
    gap: 8px;
}

.footer__tebex-icon {
    width: 22px;
    height: 22px;
    object-fit: contain;
}

.footer__tebex-badge {
    width: 22px;
    height: 22px;
    background: #fa4039;
    border-radius: 2px;
    flex-shrink: 0;
}

.footer__tebex-text {
    color: rgba(255, 255, 255, 0.3);
    font-size: 13px;
    font-family: 'GTA Art Deco', sans-serif;
    font-weight: 500;
}

.footer__rule {
    height: 1px;
    background: rgba(255, 255, 255, 0.15);
    border: none;
}

.footer__legal {
    margin: 0;
    color: rgba(255, 255, 255, 0.35);
    font-size: 11px;
    font-family: 'GTA Art Deco', sans-serif;
    font-weight: 400;
    line-height: 1.5;
    max-width: 100%;
}

@media (max-width: 1120px) {
    .footer { padding: 28px 32px 20px; }
    .footer__main {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            'brand brand'
            'nav   nav'
            'pay   pay';
    }
    .footer__brand    { grid-area: brand; max-width: none; }
    .footer__nav      { grid-area: nav; justify-content: space-around; gap: 24px 40px; }
    .footer__payments { grid-area: pay; align-items: center; justify-self: center; }
}

@media (max-width: 768px) {
    .footer { padding: 24px 24px 16px; }
    .footer__main {
        grid-template-columns: 1fr;
        grid-template-areas:
            'brand'
            'nav'
            'pay';
    }
    .footer__nav { flex-direction: column; align-items: center; gap: 24px; }
    .footer__payments { align-items: center; }
    .footer__headline { font-size: 22px; }
}

@media (max-width: 480px) {
    .footer { padding: 20px 16px 14px; }
    .footer__headline { font-size: 20px; }
    .footer__tagline  { font-size: 13px; }
    .footer__nav      { gap: 18px; }
    .footer__legal    { font-size: 10px; }
}