/* --- SITE FOOTER — "layer below" ending block ---------------------
   Same background/texture as the subcategory expand panels: the page
   layer ends and a darker underground layer shows through. Static block
   at the end of the page. */
.site-footer-bar {
    position: relative;
    width: 100%;
    /* Body is a flex column (min-height 100vh): auto margin pushes the
       footer to the viewport bottom so the layer fills all space below */
    margin-top: auto;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 26px 32px;
    box-sizing: border-box;
    /* Canvas/fabric texture (SVG) instead of the photographic background.
       NOT tiled: the SVG's turbulence filter doesn't wrap seamlessly, so
       repeating it draws a visible line at every tile edge. `cover` + `fixed`
       paints it once across the viewport — no seams, and it stays aligned
       with the same texture used in the other level-0 zones. */
    background: linear-gradient(rgba(6, 10, 16, 0.24), rgba(6, 10, 16, 0.24)),
                var(--underground-texture, url('images/canvas-dark-blue-200.png')) top center / 200px 200px repeat,
                rgba(var(--footer-bg-rgb, 16, 21, 31), var(--footer-bg-opacity, 1));
    /* The canvas texture is an OPAQUE image — without blending it, it fully
       hides whatever colour is configured underneath it (same issue fixed for
       the page background earlier). soft-light on the texture layer turns it
       into grain that modulates the configured colour instead of covering it. */
    background-blend-mode: normal, soft-light, normal;
    /* Top lip — marks where the page background ends and the footer's
       underground layer begins. Same treatment as the catalogue's
       subcategory expand panels: keep the top edge, no bottom edge here
       since the footer is the last thing on the page. */
    box-shadow: inset 0 12px 24px -5px rgba(0, 0, 0, 0.95);
    -webkit-user-select: none;
    user-select: none;
}
/* The underground layer is always dark — no light-theme variant. Which
   means the button tokens must NOT flip with the page theme in here: the
   light values are black washes on near-black text, and against this
   permanently dark strip the feedback pill and the two switches faded to
   the point of being unreadable. Pinning the dark values on the footer
   itself keeps that as a token flip — scoped to the one region that opts
   out of the light theme — rather than a per-component override. The
   selector outscores design-system.css's own :root[data-theme="light"]
   (0,2,1 vs 0,1,1), so file order does not come into it. */
:root[data-theme="light"] .site-footer-bar {
    --btn-bg:            rgba(255, 255, 255, 0.14);
    --btn-bg-hover:      rgba(255, 255, 255, 0.22);
    --btn-bg-active:     rgba(255, 255, 255, 0.10);
    --btn-color:         rgba(255, 255, 255, 0.82);
    --btn-color-hover:   rgba(255, 255, 255, 0.90);
    --btn-border-top:    0.5px solid rgba(255, 255, 255, 0.5);
    --btn-border-bottom: 2px solid rgba(255, 255, 255, 0.2);
    --btn-border-side:   1px solid rgba(255, 255, 255, 0.1);
    --btn-border-hover:  rgba(255, 255, 255, 0.35);
    --btn-shadow-hover:  0 0 14px rgba(255, 255, 255, 0.12), 0 8px 24px rgba(0, 0, 0, 0.3);
    --btn-shadow-active: inset 0 0 10px 1px rgba(0, 0, 0, 0.8);
}

/* --- Left: written logotype, copyright stacked on its own row below --- */
.site-footer-left {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    flex: 1;
    min-width: 0;
}
.footer-logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    flex-shrink: 0;
    transition: opacity 0.2s ease;
}
.footer-logo:hover { opacity: 0.85; }
.footer-logo-name {
    /* Company logotype — Geologica Bold, amber gradient */
    font-family: 'Geologica', sans-serif;
    font-size: 17px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.5px;
    white-space: nowrap;
    background: linear-gradient(135deg, #fec725 0%, #ff8c00 50%, #fec725 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: none;
}
.footer-copyright {
    font-size: 9px;
    color: rgba(255, 255, 255, 0.35);
    white-space: nowrap;
}

/* --- Center: contacts + company data link --- */
.site-footer-center {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 28px;
    flex-wrap: wrap;
    flex: 2;
}
.footer-contact {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 15px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.15s;
}
.footer-contact:hover { color: var(--primary-color, #20d21a); }
.footer-contact-ico {
    display: inline-flex;
    line-height: 1;
}
.footer-contact-ico svg {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}
/* Liquid-glass pill, matching the site-wide .btn-glass button system —
   was a bare text link before, visually orphaned next to the circular
   theme-toggle button it sits beside. */
/* Pill material from design-system.css. */
.footer-write-btn svg { flex-shrink: 0; }

/* --- Right: feedback pill + the two round switches (language, theme) ---
   The switches used to carry their own hand-rolled circle here — a flatter
   fill, a thinner border and a different hover from every other button on
   the page. They are now .footer-ctl-btn, i.e. the icon-only variant of the
   canonical button in design-system.css, so the material, the hover and the
   press come from the same tokens as the feedback pill beside them. Only
   glyph metrics are left in this file. */
.site-footer-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex: 1;
    flex-shrink: 0;
}
.footer-ctl-btn svg { width: 16px; height: 16px; display: block; }

/* Show sun or moon based on theme */
[data-theme="dark"]  .theme-icon-sun  { display: block; }
[data-theme="dark"]  .theme-icon-moon { display: none; }
[data-theme="light"] .theme-icon-sun  { display: none; }
[data-theme="light"] .theme-icon-moon { display: block; }
.theme-icon-sun, .theme-icon-moon { display: block; }

/* --- Inquiry form: preferred contact method toggle ---
   Same visual pattern as the checkout-contact page's toggle (checkout.css),
   duplicated here since this dropdown is injected sitewide by footer.js and
   most pages don't load checkout.css. */
.inquiry-pref-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 10px;
    margin: 4px 0 14px;
}
.inquiry-pref-label {
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
}
/* Compact segmented control for the inquiry form — the tighter variant of
   the base at the bottom of this file. Scoped to .inquiry-pref-row so the
   larger checkout-page version is untouched; both use the same class names
   globally. */
.inquiry-pref-row .contact-toggle-switch {
    display: inline-flex;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.14);
    flex-shrink: 0;
    /* Sits on the form's own surface rather than reading as a raised button */
    background: rgba(255, 255, 255, 0.03);
}
.inquiry-pref-row .contact-toggle-option {
    padding: 0 11px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 0.1px;
    font-family: inherit;
    background: transparent;
    color: rgba(255, 255, 255, 0.55);
    border: none;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.inquiry-pref-row .contact-toggle-option:not(:last-child) {
    border-right: 1px solid rgba(255, 255, 255, 0.12);
}
.inquiry-pref-row .contact-toggle-option:hover { color: rgba(255, 255, 255, 0.85); }
/* Selected state: accent tint + accent text instead of a heavy solid fill.
   The tint is mixed from the configured accent — hardcoding a green wash
   clashed once the theme's accent turned out to be amber. */
.inquiry-pref-row .contact-toggle-option.active {
    background: rgba(255, 255, 255, 0.10); /* fallback where color-mix is unsupported */
    background: color-mix(in srgb, var(--primary-color, #20d21a) 16%, transparent);
    color: var(--primary-color, #20d21a);
}
:root[data-theme="light"] .inquiry-pref-row .contact-toggle-switch {
    border-color: rgba(0, 0, 0, 0.14);
    background: rgba(0, 0, 0, 0.02);
}
:root[data-theme="light"] .inquiry-pref-row .contact-toggle-option { color: rgba(0, 0, 0, 0.5); }
:root[data-theme="light"] .inquiry-pref-row .contact-toggle-option:not(:last-child) { border-right-color: rgba(0, 0, 0, 0.12); }

/* --- "I'm not a robot" tick (replaces the arithmetic captcha) --- */
.captcha-check {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 2px 0 14px;
    cursor: pointer;
    user-select: none;
}
/* The native box is hidden but kept focusable for keyboard users */
.captcha-check input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.captcha-check-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    border-radius: 5px;
    border: 1.5px solid rgba(255, 255, 255, 0.28);
    background: rgba(255, 255, 255, 0.04);
    transition: background 0.15s ease, border-color 0.15s ease;
}
.captcha-check-box svg { width: 12px; height: 12px; opacity: 0; transform: scale(0.7); transition: opacity 0.15s ease, transform 0.15s ease; }
.captcha-check:hover .captcha-check-box { border-color: rgba(255, 255, 255, 0.45); }
.captcha-check input:checked + .captcha-check-box {
    background: var(--primary-color, #20d21a);
    border-color: var(--primary-color, #20d21a);
    color: #08130a;
}
.captcha-check input:checked + .captcha-check-box svg { opacity: 1; transform: scale(1); }
.captcha-check input:focus-visible + .captcha-check-box {
    outline: 2px solid var(--primary-color, #20d21a);
    outline-offset: 2px;
}
.captcha-check-label { font-size: 12.5px; color: rgba(255, 255, 255, 0.72); }
:root[data-theme="light"] .captcha-check-box { border-color: rgba(0, 0, 0, 0.28); background: rgba(0, 0, 0, 0.03); }
:root[data-theme="light"] .captcha-check-label { color: rgba(0, 0, 0, 0.7); }

/* Honeypot: off-screen for people, still fillable by scripts that ignore
   styling. display:none would let smarter bots skip it. */
.hp-field {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

/* Stack on small screens */
@media (max-width: 720px) {
    .site-footer-bar { flex-direction: column; gap: 16px; padding: 22px 18px; }
    .site-footer-left, .site-footer-center, .site-footer-right { flex: none; justify-content: center; }
}


/* ============================================================
   CONTACT METHOD SWITCH — base
   The email/phone segmented control. A segmented control, not a button:
   square inner edges and a shared divider rather than the pill from
   design-system.css, so it is a deliberate exclusion there.

   This is the full-size version used on the checkout contact step; the
   inquiry form's compact variant (.inquiry-pref-row, above) overrides
   the metrics. It lived in checkout.css, which only two pages load, so
   on every other page the control fell back to the generic button pill
   — rounded ends on a segmented control, and no fill on the inactive
   half. footer.css is loaded wherever the footer form appears.

   The `html` prefix is load-bearing. These are <button type="button">,
   and the Livematrix preflight's `[type=button]` scores the same 0,1,0
   as a bare class — without it the inactive half has no fill at all.
   ============================================================ */
html .contact-toggle-switch {
    display: inline-flex;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.15);
}
html .contact-toggle-option {
    height: auto;
    padding: 10px 20px;
    border-radius: 0;
    font-size: 13px;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.6);
    border: none;
    box-shadow: none;
    cursor: pointer;
    transition: all 0.18s ease;
}
html .contact-toggle-option:not(:last-child) { border-right: 1px solid rgba(255, 255, 255, 0.15); }
html .contact-toggle-option:hover {
    background: rgba(255, 255, 255, 0.09);
    color: rgba(255, 255, 255, 0.85);
    transform: none;
    box-shadow: none;
}
html .contact-toggle-option.active {
    background: var(--primary-color, #20d21a);
    color: #08130a;
}
:root[data-theme="light"] html .contact-toggle-switch { border-color: rgba(0, 0, 0, 0.15); }
:root[data-theme="light"] html .contact-toggle-option { background: rgba(0, 0, 0, 0.03); color: rgba(0, 0, 0, 0.55); }
:root[data-theme="light"] html .contact-toggle-option:not(:last-child) { border-right-color: rgba(0, 0, 0, 0.15); }