/*
 * SPACELAND FOOTER CHARCOAL V6
 * Exact requested color: #1c1c1c
 *
 * This layer deliberately targets both the legacy footer and the newer
 * enterprise footer whose class names may differ between storefront pages.
 */

:root {
    --sl-f6-bg: #1c1c1c;
    --sl-f6-surface: #242424;
    --sl-f6-surface-hover: #292929;
    --sl-f6-line: #303030;
    --sl-f6-text: #f7f7f7;
    --sl-f6-muted: #a8a8a8;
    --sl-f6-accent: #f07a3a;
}

/* =========================================================
   HEADER — KEEP EXACT SAME CHARCOAL
   ========================================================= */

body.sp-ios-home .sl-online-header,
body.sp-ios-product .sl-online-header,
body.sp-ios-storefront .sl-online-header,
body.sp-ios-cart .sl-online-header,
body.sp-ios-checkout .sl-online-header,
body.sp-ios-store .sl-online-header {
    background: var(--sl-f6-bg) !important;
    background-image: none !important;
}

/* =========================================================
   KNOWN LEGACY FOOTER
   ========================================================= */

body.sp-ios-home .sp-store-footer,
body.sp-ios-product .sp-store-footer,
body.sp-ios-storefront .sp-store-footer,
body.sp-ios-cart .sp-store-footer,
body.sp-ios-checkout .sp-store-footer,
body.sp-ios-store .sp-store-footer,
.sp-store-footer {
    width: 100vw !important;
    max-width: none !important;

    margin-top: 32px !important;
    margin-inline: calc(50% - 50vw) !important;

    padding: 0 !important;

    background: var(--sl-f6-bg) !important;
    background-image: none !important;

    color: var(--sl-f6-text) !important;

    border: 0 !important;
    box-shadow: none !important;
}

body.sp-ios-home .sp-store-footer-shell,
body.sp-ios-product .sp-store-footer-shell,
body.sp-ios-storefront .sp-store-footer-shell,
body.sp-ios-cart .sp-store-footer-shell,
body.sp-ios-checkout .sp-store-footer-shell,
body.sp-ios-store .sp-store-footer-shell,
.sp-store-footer-shell {
    width: min(1480px, 100%) !important;
    max-width: 1480px !important;

    margin: 0 auto !important;
    padding: 24px clamp(18px, 3vw, 42px) !important;

    background: var(--sl-f6-bg) !important;
    background-image: none !important;

    border: 0 !important;
    border-radius: 0 !important;

    box-shadow: none !important;
}

.sp-store-footer-shell::before,
.sp-store-footer-shell::after {
    content: none !important;
    display: none !important;
}

/* =========================================================
   ACTUAL ENTERPRISE FOOTER DETECTED BY JS
   ========================================================= */

.sl-enterprise-footer-root {
    position: relative !important;

    width: 100vw !important;
    max-width: none !important;

    margin-inline: calc(50% - 50vw) !important;
    margin-bottom: 0 !important;

    padding: 28px max(20px, calc((100vw - 1480px) / 2 + 20px)) !important;

    background: var(--sl-f6-bg) !important;
    background-color: var(--sl-f6-bg) !important;
    background-image: none !important;

    color: var(--sl-f6-text) !important;

    border: 0 !important;
    border-radius: 0 !important;

    box-shadow: none !important;
}

.sl-enterprise-footer-root,
.sl-enterprise-footer-root > *,
.sl-enterprise-footer-root section,
.sl-enterprise-footer-root article,
.sl-enterprise-footer-root nav {
    border-color: var(--sl-f6-line) !important;
}

.sl-enterprise-footer-root h1,
.sl-enterprise-footer-root h2,
.sl-enterprise-footer-root h3,
.sl-enterprise-footer-root h4,
.sl-enterprise-footer-root h5,
.sl-enterprise-footer-root strong,
.sl-enterprise-footer-root b {
    color: var(--sl-f6-text) !important;
}

.sl-enterprise-footer-root p,
.sl-enterprise-footer-root span,
.sl-enterprise-footer-root small,
.sl-enterprise-footer-root address,
.sl-enterprise-footer-root label {
    color: var(--sl-f6-muted) !important;
}

.sl-enterprise-footer-root a {
    color: #d8d8d8 !important;
    text-decoration: none !important;
}

.sl-enterprise-footer-root a:hover,
.sl-enterprise-footer-root a:focus-visible {
    color: #ffffff !important;
    text-decoration: underline !important;
    text-underline-offset: 4px !important;
}

/* Remove white cards / containers inherited from old footer theme */
.sl-enterprise-footer-root :where(
    [class*="card"],
    [class*="panel"],
    [class*="box"],
    [class*="chip"],
    [class*="item"]
) {
    box-shadow: none !important;
}

/* Contact/customer block becomes subtle instead of white card */
.sl-enterprise-footer-root :where(
    [class*="contact"],
    [class*="customer"],
    [class*="support"]
) {
    background: transparent !important;
    background-image: none !important;

    border-color: var(--sl-f6-line) !important;

    box-shadow: none !important;
}

/* Legal/company section */
.sl-enterprise-footer-root :where(
    [class*="legal"],
    [class*="operator"],
    [class*="company"],
    [class*="brand"]
) {
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}

/* Footer bottom */
.sl-enterprise-footer-root :where(
    [class*="bottom"],
    [class*="copyright"]
) {
    border-color: var(--sl-f6-line) !important;
    color: #929292 !important;
}

/* =========================================================
   REMOVE THE 4 SERVICE CARDS
   ========================================================= */

/* Old generated service strip */
body.sp-ios-home .sp174-services,
body.sp-ios-product .sp174-services,
body.sp-ios-storefront .sp174-services,
body.sp-ios-cart .sp174-services,
body.sp-ios-checkout .sp174-services,
body.sp-ios-store .sp174-services {
    display: none !important;
}

/* JS-detected exact current strip */
.sl-footer-trust-strip-hidden,
.sl-footer-trust-card-hidden {
    display: none !important;
}

/* Common possible class naming */
.sl-enterprise-footer-root :where(
    [class*="trust-grid"],
    [class*="benefit-grid"],
    [class*="feature-grid"],
    [class*="service-grid"],
    [class*="policy-cards"],
    [class*="policy-grid"]
) {
    display: none !important;
}

/* =========================================================
   SIMPLE GOOGLE-FRIENDLY POLICY LINKS
   ========================================================= */

.sp-store-footer-links,
.sl-enterprise-footer-root :where(
    [class*="footer-links"],
    [class*="legal-links"],
    [class*="policy-links"]
) {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;

    gap: 8px 24px !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;
}

.sp-store-footer-link {
    min-height: auto !important;

    margin: 0 !important;
    padding: 6px 0 !important;

    color: #d8d8d8 !important;

    background: transparent !important;
    background-image: none !important;

    border: 0 !important;
    border-radius: 0 !important;

    box-shadow: none !important;

    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.5 !important;

    text-decoration: none !important;
}

.sp-store-footer-link:hover,
.sp-store-footer-link:focus-visible {
    color: #ffffff !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;

    text-decoration: underline !important;
    text-underline-offset: 4px !important;
}

/* =========================================================
   GENERIC SEMANTIC FOOTER FALLBACK
   Only storefront body classes, never admin/POS.
   ========================================================= */

body.sp-ios-home > footer,
body.sp-ios-product > footer,
body.sp-ios-storefront > footer,
body.sp-ios-cart > footer,
body.sp-ios-checkout > footer,
body.sp-ios-store > footer,
body.sp-ios-home .app > footer,
body.sp-ios-product .app > footer,
body.sp-ios-storefront .app > footer {
    background: var(--sl-f6-bg) !important;
    background-image: none !important;
    color: var(--sl-f6-text) !important;
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {
    .sl-enterprise-footer-root,
    .sp-store-footer-shell {
        padding: 22px 16px !important;
    }

    .sl-enterprise-footer-root {
        padding-bottom: calc(
            92px + env(safe-area-inset-bottom, 0px)
        ) !important;
    }

    .sp-store-footer-links,
    .sl-enterprise-footer-root :where(
        [class*="footer-links"],
        [class*="legal-links"],
        [class*="policy-links"]
    ) {
        justify-content: flex-start !important;
        gap: 6px 18px !important;
    }

    .sp-store-footer-link {
        font-size: 12px !important;
    }
}