/* =========================================================
HSO SOLUTIONS — PREMIUM FOOTER DESIGN SYSTEM
FILE: footer-designs.css

PURPOSE:
ONLY 10 FOOTER TEMPLATE DESIGNS

NOT INCLUDED:
- Header CSS
- Builder Sidebar CSS
- Builder Editor CSS
- Modal CSS
- Navbar CSS
- Generic Builder UI CSS

IMPORTANT:
- Uses ONLY existing HSO theme root variables
- Dynamic footer colors are controlled by JS:
  --footer-bg
  --footer-heading
  --footer-text
  --footer-primary
  --footer-primary-hover
  --footer-primary-rgb

- No dynamic footer variables are added to :root
- Column widths remain controlled by JS inline styles
- Responsive layouts never force fixed column widths
- Normal text hover = primary color
- Interactive buttons = primary color
- Interactive button hover = primary-hover
========================================================= */


/* =========================================================
HSO THEME ROOT ONLY REQUESTED VARIABLES
========================================================= */

:root{

    --primary-color:#1f7a5b;
    --primary-hover:#17684c;
    --primary-rgb:31,122,91;

    --text-dark:#1b1b1b;
    --text-light:#636363;
    --text-muted:#8f8f8f;

    --background:#f7faf8;
    --extra-light:#eef6f2;
    --border-color:#dce7e1;

    --bg-gradient-start:#eef6f2;
    --bg-gradient-middle:#f7faf8;
    --bg-gradient-end:#e8f3ee;
    --bg-border:#dce7e1;

    --bg-shadow:0 14px 45px rgba(var(--primary-rgb),.10);

    --white:#fff;
    --success:#22c55e;

    /* Universal Decorative */
    --bg-decorative:rgba(var(--primary-rgb),.07);
    --bg-decorative-light:rgba(var(--primary-rgb),.05);

    /* Universal Overlay */
    --overlay:rgba(0,0,0,.58);
    --overlay-light:rgba(0,0,0,.45);
    --image-overlay:rgba(255,255,255,.82);
    --image-overlay-soft:rgba(255,255,255,.25);
    --image-bottom-overlay:rgba(27,27,27,.08);

    /* Universal Shadows */
    --shadow:0 8px 28px rgba(var(--primary-rgb),.08);
    --shadow-sm:0 4px 14px rgba(var(--primary-rgb),.06);
    --shadow-lg:0 18px 42px rgba(var(--primary-rgb),.15);

    /* Universal Radius */
    --radius:10px;
    --radius-md:12px;
    --radius-lg:16px;
    --radius-xl:20px;

    /* Universal Transition */
    --transition-fast:.2s ease;
    --transition:.35s ease;
    --transition-slow:.5s ease;

    /* Universal Effects */
    --hover-lift:-6px;
    --hover-scale:1.08;

    --max-width:1200px;
}


/* =========================================================
GLOBAL FOOTER DESIGN FOUNDATION
========================================================= */

.footer-row[class*="footer-design-"]{

    position:relative;
    width:100%;
    box-sizing:border-box;

    background:var(--footer-bg,#000000) !important;
    color:var(--footer-text,#9ca3af) !important;

    overflow:hidden;
    isolation:isolate;

    transition:
        background var(--transition),
        color var(--transition),
        border-color var(--transition),
        box-shadow var(--transition);
}


/* =========================================================
FOOTER CONTAINER
========================================================= */

.footer-row[class*="footer-design-"] .footer-container{

    width:100%;
    max-width:var(--max-width);

    margin:0 auto;

    box-sizing:border-box;
}


/* =========================================================
FOOTER COLUMNS
========================================================= */

.footer-row[class*="footer-design-"] .footer-columns{

    width:100%;
    box-sizing:border-box;
}

.footer-row[class*="footer-design-"] .footer-column{

    box-sizing:border-box;
    min-width:0;
}


/* =========================================================
COMMON ELEMENT FOUNDATION
========================================================= */

.footer-row[class*="footer-design-"] .logo-preview,
.footer-row[class*="footer-design-"] .text-preview,
.footer-row[class*="footer-design-"] .menu-preview,
.footer-row[class*="footer-design-"] .social-preview,
.footer-row[class*="footer-design-"] .payment-preview,
.footer-row[class*="footer-design-"] .copyright-text{

    position:relative;
    z-index:2;
}


/* =========================================================
LOGO
========================================================= */

.footer-row[class*="footer-design-"] .logo-preview{

    display:inline-flex;
    align-items:center;

    max-width:100%;

    color:var(--footer-heading,#ffffff);

    text-decoration:none;

    font-weight:800;
    line-height:1.1;

    transition:
        opacity var(--transition-fast),
        transform var(--transition-fast),
        color var(--transition-fast);
}

.footer-row[class*="footer-design-"] .logo-preview:hover{

    color:var(--primary-color) !important;
}


/* =========================================================
LOGO IMAGE
========================================================= */

.footer-row[class*="footer-design-"] .logo-image-preview{

    display:block;

    max-width:100%;
    width:auto;
    height:auto;

    max-height:70px;

    object-fit:contain;
}


/* =========================================================
NORMAL TEXT
========================================================= */

.footer-row[class*="footer-design-"] .text-preview{

    max-width:520px;

    color:var(--footer-text,#9ca3af);

    font-size:13px;
    line-height:1.85;

    overflow-wrap:anywhere;
}


/* =========================================================
COLUMN TITLE
========================================================= */

.footer-row[class*="footer-design-"] .footer-column-title{

    margin:0 0 17px;

    color:var(--footer-heading,#ffffff);

    font-size:11px;
    font-weight:800;

    line-height:1.2;

    letter-spacing:.14em;

    text-transform:uppercase;

    transition:
        color var(--transition-fast),
        letter-spacing var(--transition-fast);
}


/* =========================================================
MENU
========================================================= */

.footer-row[class*="footer-design-"] .menu-preview{

    display:flex;

    flex-direction:column;
    align-items:flex-start;

    gap:9px;
}

.footer-row[class*="footer-design-"] .menu-preview a{

    position:relative;

    display:inline-block;

    width:max-content;
    max-width:100%;

    color:var(--footer-text,#9ca3af);

    text-decoration:none;

    font-size:12px;
    font-weight:500;

    line-height:1.5;

    transition:
        color var(--transition-fast),
        transform var(--transition-fast),
        opacity var(--transition-fast);
}


/* IMPORTANT:
Normal footer links:
Gray -> Primary on hover
========================================================= */

.footer-row[class*="footer-design-"] .menu-preview a:hover{

    color:var(--primary-color) !important;

    transform:translateX(4px);
}


/* =========================================================
SOCIAL
========================================================= */

.footer-row[class*="footer-design-"] .social-preview{

    display:flex;

    align-items:center;
    flex-wrap:wrap;

    gap:8px;
}

.footer-row[class*="footer-design-"] .social-preview a{

    display:inline-flex;

    align-items:center;
    justify-content:center;

    width:34px;
    height:34px;

    flex:0 0 34px;

    border:1px solid rgba(255,255,255,.18);

    border-radius:50%;

    background:rgba(255,255,255,.05);

    color:var(--footer-heading,#ffffff);

    text-decoration:none;

    font-size:12px;

    transition:
        background var(--transition-fast),
        color var(--transition-fast),
        border-color var(--transition-fast),
        transform var(--transition-fast),
        box-shadow var(--transition-fast);
}


/* SOCIAL HOVER:
Primary background
========================================================= */

.footer-row[class*="footer-design-"] .social-preview a:hover{

    background:var(--primary-color) !important;

    color:var(--white) !important;

    border-color:var(--primary-color) !important;

    transform:translateY(-3px);

    box-shadow:var(--shadow-sm);
}


/* =========================================================
PAYMENT
========================================================= */

.footer-row[class*="footer-design-"] .payment-preview{

    display:flex;

    align-items:center;
    flex-wrap:wrap;

    gap:6px;

    color:var(--footer-text,#9ca3af);
}

.footer-row[class*="footer-design-"] .payment-preview span{

    display:inline-flex;

    align-items:center;
    justify-content:center;

    min-height:27px;

    padding:0 9px;

    border:1px solid rgba(255,255,255,.16);

    border-radius:6px;

    background:rgba(255,255,255,.05);

    color:var(--footer-text,#9ca3af);

    font-size:8px;
    font-weight:800;

    letter-spacing:.03em;

    transition:
        background var(--transition-fast),
        border-color var(--transition-fast),
        color var(--transition-fast),
        transform var(--transition-fast);
}

.footer-row[class*="footer-design-"] .payment-preview span:hover{

    background:var(--primary-color) !important;

    border-color:var(--primary-color) !important;

    color:var(--white) !important;

    transform:translateY(-2px);
}


/* =========================================================
COPYRIGHT
========================================================= */

.footer-row[class*="footer-design-"] .copyright-text{

    width:100%;

    color:var(--footer-text,#9ca3af);

    font-size:10px;
    font-weight:500;

    line-height:1.6;

    text-align:center;
}


/* =========================================================
FINAL COPYRIGHT Background ALWAYS BLACK
========================================================= */

.footer-row[class*="footer-design-"].copyright-row{

    background:#000000 !important;

    background-color:#000000 !important;
}

.footer-row[class*="footer-design-"].copyright-row .footer-container{

    background:#000000 !important;
}

.footer-row[class*="footer-design-"].copyright-row .copyright-text{

    color:var(--footer-text,#9ca3af) !important;
}


/* =========================================================
01 — LUXURY GRID
========================================================= */

.footer-design-luxury-grid{

    background:var(--footer-bg,#000000) !important;
}

.footer-design-luxury-grid:not(.copyright-row)::before{

    content:"";

    position:absolute;

    inset:0;

    background:
        radial-gradient(
            circle at 0 0,
            rgba(255,255,255,.10),
            transparent 32%
        ),
        radial-gradient(
            circle at 100% 100%,
            rgba(var(--primary-rgb),.30),
            transparent 38%
        );

    pointer-events:none;

    z-index:-1;
}

.footer-design-luxury-grid:not(.copyright-row) .footer-columns{

    gap:0;
}

.footer-design-luxury-grid:not(.copyright-row) .footer-column{

    padding:0 30px;
}

.footer-design-luxury-grid:not(.copyright-row) .footer-column:first-child{

    padding-left:0;
}

.footer-design-luxury-grid:not(.copyright-row) .footer-column:last-child{

    padding-right:0;
}

.footer-design-luxury-grid:not(.copyright-row) .footer-column + .footer-column{

    border-left:1px solid rgba(255,255,255,.12);
}

.footer-design-luxury-grid:not(.copyright-row) .logo-preview{

    margin-bottom:18px;

    font-size:24px;

    letter-spacing:-.04em;
}

.footer-design-luxury-grid:not(.copyright-row) .text-preview{

    max-width:270px;

    font-size:11px;

    line-height:1.8;
}

.footer-design-luxury-grid:not(.copyright-row) .footer-column-title{

    position:relative;

    padding-bottom:11px;
}

.footer-design-luxury-grid:not(.copyright-row) .footer-column-title::after{

    content:"";

    position:absolute;

    left:0;
    bottom:0;

    width:24px;
    height:2px;

    border-radius:10px;

    background:var(--primary-color);
}

.footer-design-luxury-grid:not(.copyright-row) .menu-preview{

    gap:11px;
}

.footer-design-luxury-grid:not(.copyright-row) .social-preview{

    margin-top:4px;
}


/* =========================================================
02 — SPLIT BRAND
========================================================= */

.footer-design-split-brand{

    background:var(--footer-bg,#000000) !important;
}

.footer-design-split-brand:not(.copyright-row){

    border-top:1px solid rgba(255,255,255,.08);
}

.footer-design-split-brand:not(.copyright-row) .footer-columns{

    align-items:stretch;
}

.footer-design-split-brand:not(.copyright-row) .footer-column{

    padding:12px 28px;
}

.footer-design-split-brand:not(.copyright-row) .footer-column:first-child{

    padding-left:0;
}

.footer-design-split-brand:not(.copyright-row) .footer-column:last-child{

    padding-right:0;
}

.footer-design-split-brand:not(.copyright-row) .footer-column:first-child{

    position:relative;
}

.footer-design-split-brand:not(.copyright-row) .footer-column:first-child::after{

    content:"";

    position:absolute;

    top:0;
    right:0;
    bottom:0;

    width:1px;

    background:
        linear-gradient(
            to bottom,
            transparent,
            rgba(255,255,255,.20),
            transparent
        );
}

.footer-design-split-brand:not(.copyright-row) .logo-preview{

    margin-bottom:20px;

    font-size:30px;

    font-weight:800;

    letter-spacing:-.05em;
}

.footer-design-split-brand:not(.copyright-row) .text-preview{

    max-width:370px;

    font-size:13px;

    line-height:1.9;
}

.footer-design-split-brand:not(.copyright-row) .social-preview{

    margin-top:25px;
}

.footer-design-split-brand:not(.copyright-row) .social-preview a{

    border-radius:8px;
}

.footer-design-split-brand:not(.copyright-row) .footer-column-title{

    margin-bottom:20px;

    color:var(--footer-heading,#ffffff);
}

.footer-design-split-brand:not(.copyright-row) .menu-preview{

    gap:12px;
}

.footer-design-split-brand:not(.copyright-row) .payment-preview{

    max-width:180px;

    gap:7px;
}


/* =========================================================
03 — CENTERED
========================================================= */

.footer-design-centered{

    background:var(--footer-bg,#000000) !important;

    text-align:center;
}

.footer-design-centered:not(.copyright-row) .footer-container{

    position:relative;
}

.footer-design-centered:not(.copyright-row) .footer-columns{

    align-items:center;
}

.footer-design-centered:not(.copyright-row) .footer-column{

    padding:0 22px;
}

.footer-design-centered:not(.copyright-row) .footer-column:first-child{

    width:100%;
}

.footer-design-centered:not(.copyright-row) .footer-column .logo-preview{

    justify-content:center;

    margin-bottom:17px;

    font-size:30px;

    letter-spacing:-.05em;
}

.footer-design-centered:not(.copyright-row) .footer-column .text-preview{

    max-width:620px;

    margin:0 auto;

    font-size:12px;

    line-height:1.9;
}

.footer-design-centered:not(.copyright-row) .footer-column .social-preview{

    justify-content:center;

    margin-top:22px;
}

.footer-design-centered:not(.copyright-row) .footer-column-title{

    text-align:center;
}

.footer-design-centered:not(.copyright-row) .menu-preview{

    align-items:center;
}

.footer-design-centered:not(.copyright-row) .menu-preview a:hover{

    transform:translateY(-2px);
}

.footer-design-centered:not(.copyright-row) .footer-column + .footer-column{

    border-left:1px solid rgba(255,255,255,.08);
}

.footer-design-centered:not(.copyright-row) .footer-column:nth-child(1){

    border-left:0;
}


/* =========================================================
04 — EDITORIAL
========================================================= */

.footer-design-editorial{

    background:var(--footer-bg,#000000) !important;
}

.footer-design-editorial:not(.copyright-row){

    position:relative;
}

.footer-design-editorial:not(.copyright-row)::before{

    content:"";

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:1px;

    background:var(--primary-color);
}

.footer-design-editorial:not(.copyright-row) .footer-column{

    padding:0 25px;
}

.footer-design-editorial:not(.copyright-row) .footer-column:first-child{

    padding-left:0;
}

.footer-design-editorial:not(.copyright-row) .footer-column:last-child{

    padding-right:0;
}

.footer-design-editorial:not(.copyright-row) .footer-column + .footer-column{

    border-left:1px solid rgba(255,255,255,.10);
}

.footer-design-editorial:not(.copyright-row) .logo-preview{

    margin-bottom:23px;

    font-size:36px;

    font-weight:800;

    letter-spacing:-.07em;
}

.footer-design-editorial:not(.copyright-row) .text-preview{

    max-width:470px;

    font-size:12px;

    line-height:2;

    color:var(--footer-text,#9ca3af);
}

.footer-design-editorial:not(.copyright-row) .social-preview{

    margin-top:28px;
}

.footer-design-editorial:not(.copyright-row) .footer-column-title{

    padding-bottom:12px;

    border-bottom:1px solid rgba(255,255,255,.12);

    letter-spacing:.20em;
}

.footer-design-editorial:not(.copyright-row) .menu-preview{

    gap:10px;
}

.footer-design-editorial:not(.copyright-row) .menu-preview a{

    font-family:Inter,sans-serif;

    font-size:11px;
}

.footer-design-editorial:not(.copyright-row) .menu-preview a::before{

    content:"↗";

    margin-right:6px;

    color:var(--primary-color);

    opacity:0;

    transition:opacity var(--transition-fast);
}

.footer-design-editorial:not(.copyright-row) .menu-preview a:hover::before{

    opacity:1;
}

.footer-design-editorial:not(.copyright-row) .social-preview a{

    border-radius:4px;
}


/* =========================================================
05 — COMPACT GRID
========================================================= */

.footer-design-compact-grid{

    background:var(--footer-bg,#000000) !important;
}

.footer-design-compact-grid:not(.copyright-row) .footer-container{

    padding-top:46px !important;
    padding-bottom:46px !important;
}

.footer-design-compact-grid:not(.copyright-row) .footer-columns{

    gap:0;
}

.footer-design-compact-grid:not(.copyright-row) .footer-column{

    padding:0 22px;
}

.footer-design-compact-grid:not(.copyright-row) .footer-column:first-child{

    padding-left:0;
}

.footer-design-compact-grid:not(.copyright-row) .footer-column:last-child{

    padding-right:0;
}

.footer-design-compact-grid:not(.copyright-row) .footer-column + .footer-column{

    border-left:1px solid rgba(255,255,255,.07);
}

.footer-design-compact-grid:not(.copyright-row) .logo-preview{

    font-size:20px;

    margin-bottom:14px;
}

.footer-design-compact-grid:not(.copyright-row) .footer-column-title{

    margin-bottom:13px;

    font-size:10px;
}

.footer-design-compact-grid:not(.copyright-row) .menu-preview{

    gap:7px;
}

.footer-design-compact-grid:not(.copyright-row) .menu-preview a{

    font-size:10px;
}

.footer-design-compact-grid:not(.copyright-row) .social-preview{

    gap:5px;
}

.footer-design-compact-grid:not(.copyright-row) .social-preview a{

    width:29px;
    height:29px;

    flex-basis:29px;

    border-radius:5px;

    font-size:10px;
}

.footer-design-compact-grid:not(.copyright-row) .payment-preview span{

    min-height:23px;

    padding:0 7px;

    font-size:7px;
}


/* =========================================================
06 — STATEMENT
========================================================= */

.footer-design-statement{

    background:var(--footer-bg,#000000) !important;
}

.footer-design-statement:not(.copyright-row) .footer-column{

    padding:0 28px;
}

.footer-design-statement:not(.copyright-row) .footer-column:first-child{

    padding-left:0;
}

.footer-design-statement:not(.copyright-row) .footer-column:last-child{

    padding-right:0;
}

.footer-design-statement:not(.copyright-row) .footer-column:first-child{

    text-align:left;
}

.footer-design-statement:not(.copyright-row) .footer-column:first-child .logo-preview{

    display:block;

    margin-bottom:25px;

    font-size:clamp(34px,5vw,68px);

    font-weight:800;

    line-height:.95;

    letter-spacing:-.075em;
}

.footer-design-statement:not(.copyright-row) .footer-column:first-child .text-preview{

    max-width:680px;

    font-size:14px;

    line-height:1.9;
}

.footer-design-statement:not(.copyright-row) .footer-column:nth-child(2),
.footer-design-statement:not(.copyright-row) .footer-column:nth-child(3){

    padding-top:12px;
}

.footer-design-statement:not(.copyright-row) .footer-column + .footer-column{

    border-left:1px solid rgba(255,255,255,.09);
}

.footer-design-statement:not(.copyright-row) .footer-column-title{

    font-size:10px;

    letter-spacing:.18em;
}

.footer-design-statement:not(.copyright-row) .social-preview a{

    border-radius:9px;
}

.footer-design-statement:not(.copyright-row) .menu-preview{

    gap:12px;
}


/* =========================================================
07 — MAGAZINE
========================================================= */

.footer-design-magazine{

    background:var(--footer-bg,#000000) !important;
}

.footer-design-magazine:not(.copyright-row){

    border-top:1px solid rgba(255,255,255,.14);
}

.footer-design-magazine:not(.copyright-row) .footer-columns{

    align-items:flex-start;
}

.footer-design-magazine:not(.copyright-row) .footer-column{

    padding:0 25px;
}

.footer-design-magazine:not(.copyright-row) .footer-column:first-child{

    padding-left:0;
}

.footer-design-magazine:not(.copyright-row) .footer-column:last-child{

    padding-right:0;
}

.footer-design-magazine:not(.copyright-row) .footer-column + .footer-column{

    border-left:1px solid rgba(255,255,255,.10);
}

.footer-design-magazine:not(.copyright-row) .logo-preview{

    margin-bottom:18px;

    font-size:28px;

    letter-spacing:-.055em;
}

.footer-design-magazine:not(.copyright-row) .text-preview{

    max-width:430px;

    font-size:12px;

    line-height:1.95;
}

.footer-design-magazine:not(.copyright-row) .footer-column-title{

    margin-bottom:18px;

    font-size:10px;

    border-bottom:1px solid rgba(255,255,255,.15);

    padding-bottom:11px;
}

.footer-design-magazine:not(.copyright-row) .menu-preview{

    gap:10px;
}

.footer-design-magazine:not(.copyright-row) .social-preview{

    margin-top:20px;
}

.footer-design-magazine:not(.copyright-row) .social-preview a{

    width:31px;
    height:31px;

    flex-basis:31px;

    border-radius:4px;
}


/* =========================================================
08 — FLOATING PANELS
========================================================= */

.footer-design-floating-panels{

    background:var(--footer-bg,#000000) !important;
}

.footer-design-floating-panels:not(.copyright-row) .footer-columns{

    align-items:stretch;

    gap:18px;
}

.footer-design-floating-panels:not(.copyright-row) .footer-column{

    padding:26px 25px;

    border:1px solid rgba(255,255,255,.13);

    border-radius:var(--radius-lg);

    background:rgba(0,0,0,.20);

    box-shadow:
        0 18px 45px rgba(0,0,0,.12),
        inset 0 1px 0 rgba(255,255,255,.05);

    transition:
        transform var(--transition),
        background var(--transition),
        border-color var(--transition),
        box-shadow var(--transition);
}

.footer-design-floating-panels:not(.copyright-row) .footer-column:hover{

    transform:translateY(-4px);

    background:rgba(0,0,0,.27);

    border-color:rgba(var(--primary-rgb),.75);

    box-shadow:var(--shadow-lg);
}

.footer-design-floating-panels:not(.copyright-row) .footer-column:first-child{

    padding-left:28px;
}

.footer-design-floating-panels:not(.copyright-row) .logo-preview{

    margin-bottom:18px;

    font-size:25px;
}

.footer-design-floating-panels:not(.copyright-row) .text-preview{

    font-size:11px;

    line-height:1.85;
}

.footer-design-floating-panels:not(.copyright-row) .footer-column-title{

    color:var(--footer-heading,#ffffff);
}

.footer-design-floating-panels:not(.copyright-row) .social-preview{

    margin-top:20px;
}

.footer-design-floating-panels:not(.copyright-row) .social-preview a{

    border-radius:9px;
}

.footer-design-floating-panels:not(.copyright-row) .menu-preview{

    gap:10px;
}

.footer-design-floating-panels:not(.copyright-row) .payment-preview span{

    background:rgba(255,255,255,.08);
}


/* =========================================================
09 — ULTRA MINIMAL
========================================================= */

.footer-design-ultra-minimal{

    background:var(--footer-bg,#000000) !important;
}

.footer-design-ultra-minimal:not(.copyright-row) .footer-container{

    padding-top:72px !important;
    padding-bottom:72px !important;
}

.footer-design-ultra-minimal:not(.copyright-row) .footer-column{

    padding:0 30px;
}

.footer-design-ultra-minimal:not(.copyright-row) .footer-column:first-child{

    padding-left:0;
}

.footer-design-ultra-minimal:not(.copyright-row) .footer-column:last-child{

    padding-right:0;
}

.footer-design-ultra-minimal:not(.copyright-row) .footer-column + .footer-column{

    border-left:0;
}

.footer-design-ultra-minimal:not(.copyright-row) .logo-preview{

    margin-bottom:20px;

    font-size:23px;

    font-weight:700;

    letter-spacing:-.04em;
}

.footer-design-ultra-minimal:not(.copyright-row) .text-preview{

    max-width:420px;

    color:var(--footer-text,#9ca3af);

    font-size:11px;

    line-height:2;
}

.footer-design-ultra-minimal:not(.copyright-row) .footer-column-title{

    margin-bottom:17px;

    color:var(--footer-heading,#ffffff);

    font-size:9px;

    font-weight:700;

    letter-spacing:.20em;
}

.footer-design-ultra-minimal:not(.copyright-row) .menu-preview{

    gap:10px;
}

.footer-design-ultra-minimal:not(.copyright-row) .menu-preview a{

    color:var(--footer-text,#9ca3af);

    font-size:11px;
}

.footer-design-ultra-minimal:not(.copyright-row) .menu-preview a:hover{

    color:var(--primary-color) !important;

    transform:none;
}

.footer-design-ultra-minimal:not(.copyright-row) .social-preview{

    gap:6px;
}

.footer-design-ultra-minimal:not(.copyright-row) .social-preview a{

    width:30px;
    height:30px;

    flex-basis:30px;

    border:0;

    background:rgba(255,255,255,.06);

    border-radius:50%;
}

.footer-design-ultra-minimal:not(.copyright-row) .social-preview a:hover{

    background:var(--primary-color) !important;
}


/* =========================================================
10 — WIDE COMMERCE
========================================================= */

.footer-design-wide-commerce{

    background:var(--footer-bg,#000000) !important;
}

.footer-design-wide-commerce:not(.copyright-row){

    border-top:3px solid var(--primary-color);
}

.footer-design-wide-commerce:not(.copyright-row) .footer-columns{

    align-items:flex-start;
}

.footer-design-wide-commerce:not(.copyright-row) .footer-column{

    padding:0 23px;
}

.footer-design-wide-commerce:not(.copyright-row) .footer-column:first-child{

    padding-left:0;
}

.footer-design-wide-commerce:not(.copyright-row) .footer-column:last-child{

    padding-right:0;
}

.footer-design-wide-commerce:not(.copyright-row) .footer-column + .footer-column{

    border-left:1px solid rgba(255,255,255,.08);
}

.footer-design-wide-commerce:not(.copyright-row) .logo-preview{

    margin-bottom:17px;

    font-size:25px;

    font-weight:800;

    letter-spacing:-.05em;
}

.footer-design-wide-commerce:not(.copyright-row) .text-preview{

    max-width:320px;

    font-size:11px;

    line-height:1.85;
}

.footer-design-wide-commerce:not(.copyright-row) .footer-column-title{

    margin-bottom:18px;

    font-size:10px;

    letter-spacing:.12em;
}

.footer-design-wide-commerce:not(.copyright-row) .menu-preview{

    gap:9px;
}

.footer-design-wide-commerce:not(.copyright-row) .menu-preview a{

    font-size:11px;
}

.footer-design-wide-commerce:not(.copyright-row) .social-preview{

    margin-bottom:20px;
}

.footer-design-wide-commerce:not(.copyright-row) .social-preview a{

    width:31px;
    height:31px;

    flex-basis:31px;

    border-radius:7px;
}

.footer-design-wide-commerce:not(.copyright-row) .payment-preview{

    gap:5px;
}

.footer-design-wide-commerce:not(.copyright-row) .payment-preview span{

    min-height:24px;

    padding:0 7px;

    border-radius:5px;

    font-size:7px;
}


/* =========================================================
NEWSLETTER — THEME INTEGRATION
========================================================= */

.newsletter{

    width:100%;

    color:var(--footer-text,#9ca3af);

    background:var(--footer-bg,#000000) !important;

    border-bottom:1px solid rgba(255,255,255,.10);

    box-sizing:border-box;
}

.newsletter-inner{

    width:100%;

    max-width:var(--max-width);

    margin:0 auto;

    box-sizing:border-box;
}

.newsletter-title{

    color:var(--footer-heading,#ffffff);

    font-size:24px;

    font-weight:800;

    line-height:1.15;

    letter-spacing:-.035em;
}

.newsletter-copy{

    color:var(--footer-text,#9ca3af);

    font-size:11px;

    line-height:1.7;
}


/* =========================================================
NEWSLETTER FORM
========================================================= */

.newsletter-form{

    display:flex;

    align-items:stretch;

    gap:7px;
}

.newsletter-form input{

    min-width:0;

    width:100%;

    height:42px;

    padding:0 14px;

    border:1px solid rgba(255,255,255,.18);

    border-radius:var(--radius);

    outline:none;

    background:rgba(255,255,255,.08);

    color:var(--footer-heading,#ffffff);

    font-family:inherit;

    font-size:11px;

    transition:
        border-color var(--transition-fast),
        background var(--transition-fast),
        box-shadow var(--transition-fast);
}

.newsletter-form input::placeholder{

    color:rgba(255,255,255,.48);
}

.newsletter-form input:focus{

    border-color:var(--primary-color);

    background:rgba(255,255,255,.11);

    box-shadow:
        0 0 0 3px rgba(var(--primary-rgb),.16);
}


/* SUBSCRIBE BUTTON:
Primary -> Primary Hover
========================================================= */

.newsletter-form button{

    flex:0 0 auto;

    min-height:42px;

    padding:0 17px;

    border:1px solid var(--primary-color);

    border-radius:var(--radius);

    background:var(--primary-color) !important;

    color:var(--white) !important;

    font-family:inherit;

    font-size:10px;

    font-weight:800;

    cursor:pointer;

    transition:
        background var(--transition-fast),
        border-color var(--transition-fast),
        color var(--transition-fast),
        transform var(--transition-fast),
        box-shadow var(--transition-fast);
}

.newsletter-form button:hover{

    background:var(--primary-hover) !important;

    border-color:var(--primary-hover) !important;

    color:var(--white) !important;

    transform:translateY(-2px);

    box-shadow:var(--shadow-sm);
}


/* =========================================================
NEWSLETTER — SPLIT
========================================================= */

.newsletter-split{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:40px;

    padding:35px 0;
}

.newsletter-split .newsletter-copy-wrap{

    flex:1 1 auto;

    min-width:0;
}

.newsletter-split .newsletter-form{

    flex:0 0 min(420px,42%);
}


/* =========================================================
NEWSLETTER — CENTERED
========================================================= */

.newsletter-centered{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:18px;

    padding:44px 20px;

    text-align:center;
}

.newsletter-centered .newsletter-copy{

    max-width:580px;
}

.newsletter-centered .newsletter-form{

    width:min(520px,100%);
}


/* =========================================================
NEWSLETTER — MINIMAL
========================================================= */

.newsletter-minimal{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:35px;

    padding:27px 0;
}

.newsletter-minimal .newsletter-title{

    font-size:18px;
}

.newsletter-minimal .newsletter-form{

    flex:0 0 min(390px,42%);
}

.newsletter-minimal .newsletter-form input{

    height:38px;
}

.newsletter-minimal .newsletter-form button{

    min-height:38px;
}


/* =========================================================
NEWSLETTER — STACKED
========================================================= */

.newsletter-stacked{

    display:flex;

    flex-direction:column;

    align-items:flex-start;

    gap:18px;

    padding:40px 0;
}

.newsletter-stacked .newsletter-copy{

    max-width:600px;
}

.newsletter-stacked .newsletter-form{

    width:min(560px,100%);
}


/* =========================================================
NEWSLETTER — COMPACT
========================================================= */

.newsletter-compact{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:25px;

    padding:20px 0;
}

.newsletter-compact .newsletter-title{

    font-size:16px;
}

.newsletter-compact .newsletter-copy{

    font-size:10px;
}

.newsletter-compact .newsletter-form{

    flex:0 0 min(350px,40%);
}

.newsletter-compact .newsletter-form input{

    height:35px;
}

.newsletter-compact .newsletter-form button{

    min-height:35px;
}


/* =========================================================
BUTTON ELEMENT
========================================================= */

/*
This catches Builder CTA / Button elements
generated with inline-flex.
*/

.footer-row[class*="footer-design-"] .footer-column a[style*="inline-flex"]{

    transition:
        background var(--transition-fast),
        color var(--transition-fast),
        border-color var(--transition-fast),
        transform var(--transition-fast),
        box-shadow var(--transition-fast) !important;
}


/* CTA BUTTON DEFAULT */

.footer-row[class*="footer-design-"] .footer-column a[style*="inline-flex"]{

    background:var(--primary-color) !important;

    border-color:var(--primary-color) !important;

    color:var(--white) !important;
}


/* CTA BUTTON HOVER */

.footer-row[class*="footer-design-"] .footer-column a[style*="inline-flex"]:hover{

    background:var(--primary-hover) !important;

    border-color:var(--primary-hover) !important;

    color:var(--white) !important;

    transform:translateY(-2px);

    box-shadow:var(--shadow-sm);
}


/* =========================================================
LOGO IMAGE SAFETY
========================================================= */

.footer-row[class*="footer-design-"] img{

    max-width:100%;
}

.footer-row[class*="footer-design-"] .logo-image-preview{

    max-width:min(100%,260px);

    max-height:80px;

    object-fit:contain;

    object-position:left center;
}


/* =========================================================
LONG TEXT / URL SAFETY
========================================================= */

.footer-row[class*="footer-design-"] a,
.footer-row[class*="footer-design-"] span,
.footer-row[class*="footer-design-"] div{

    overflow-wrap:anywhere;
}

.footer-row[class*="footer-design-"] .footer-column{

    overflow:hidden;
}

/* =========================================================
   HSO FOOTER — DESKTOP COLUMN LAYOUT FIX
   IMPORTANT:
   - Desktop = horizontal columns
   - Column width remains controlled by JS
   - Mobile media query below can override this
   - Do NOT use !important on width
   ========================================================= */

.footer-row[class*="footer-design-"] .footer-columns{
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;
    align-items:stretch;
    width:100%;
    max-width:100%;
    box-sizing:border-box;
}

.footer-row[class*="footer-design-"] .footer-column{
    display:block !important;
    box-sizing:border-box;
    min-width:0;
    max-width:none;
}


/* =========================================================
   DESKTOP — COLUMN WIDTH FROM BUILDER / JS
   ========================================================= */

.footer-row[class*="footer-design-"] .footer-column[style*="width"]{
    flex-grow:0 !important;
    flex-shrink:0 !important;
}


/* =========================================================
   IMPORTANT — DO NOT ALLOW DESIGN-SPECIFIC CSS
   TO STACK COLUMNS ON DESKTOP
   ========================================================= */

@media (min-width:993px){

    .footer-row[class*="footer-design-"] .footer-columns{
        display:flex !important;
        flex-direction:row !important;
        flex-wrap:nowrap !important;
    }

    .footer-row[class*="footer-design-"] .footer-column{
        display:block !important;
    }

}
/* =========================================================
TABLET
========================================================= */

@media (max-width:992px){

    .footer-row[class*="footer-design-"] .footer-container{

        padding-left:28px !important;

        padding-right:28px !important;
    }

    .footer-design-luxury-grid:not(.copyright-row) .footer-column{

        padding:0 18px;
    }

    .footer-design-split-brand:not(.copyright-row) .footer-column{

        padding:0 17px;
    }

    .footer-design-editorial:not(.copyright-row) .footer-column{

        padding:0 17px;
    }

    .footer-design-compact-grid:not(.copyright-row) .footer-column{

        padding:0 14px;
    }

    .footer-design-statement:not(.copyright-row) .footer-column{

        padding:0 16px;
    }

    .footer-design-statement:not(.copyright-row) .footer-column:first-child .logo-preview{

        font-size:clamp(30px,5vw,52px);
    }

    .footer-design-magazine:not(.copyright-row) .footer-column{

        padding:0 17px;
    }

    .footer-design-floating-panels:not(.copyright-row) .footer-columns{

        gap:12px;
    }

    .footer-design-floating-panels:not(.copyright-row) .footer-column{

        padding:20px 17px;
    }

    .footer-design-ultra-minimal:not(.copyright-row) .footer-column{

        padding:0 17px;
    }

    .footer-design-wide-commerce:not(.copyright-row) .footer-column{

        padding:0 15px;
    }

    .newsletter-split,
    .newsletter-minimal,
    .newsletter-compact{

        gap:25px;
    }

    .newsletter-split .newsletter-form{

        flex-basis:45%;
    }

    .newsletter-minimal .newsletter-form{

        flex-basis:45%;
    }

    .newsletter-compact .newsletter-form{

        flex-basis:43%;
    }
}


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

@media (max-width:767px){

    .footer-row[class*="footer-design-"] .footer-container{

        padding-left:20px !important;

        padding-right:20px !important;
    }

    .footer-row[class*="footer-design-"]:not(.copyright-row) .footer-columns{

        display:flex !important;

        flex-direction:column !important;

        width:100% !important;

        gap:0 !important;
    }

    .footer-row[class*="footer-design-"]:not(.copyright-row) .footer-column{

        width:100% !important;

        max-width:100% !important;

        flex:0 0 100% !important;

        padding:25px 0 !important;

        border-left:0 !important;

        border-right:0 !important;
    }

    .footer-row[class*="footer-design-"]:not(.copyright-row) .footer-column:first-child{

        padding-top:0 !important;
    }

    .footer-row[class*="footer-design-"]:not(.copyright-row) .footer-column:last-child{

        padding-bottom:0 !important;
    }

    .footer-row[class*="footer-design-"]:not(.copyright-row) .footer-column + .footer-column{

        border-top:1px solid rgba(255,255,255,.09) !important;
    }


    /* COMMON MOBILE TYPOGRAPHY */

    .footer-row[class*="footer-design-"] .logo-preview{

        font-size:24px !important;
    }

    .footer-row[class*="footer-design-"] .text-preview{

        max-width:100% !important;

        font-size:11px;

        line-height:1.8;
    }

    .footer-row[class*="footer-design-"] .footer-column-title{

        margin-bottom:14px;
    }

    .footer-row[class*="footer-design-"] .menu-preview{

        gap:9px;
    }

    .footer-row[class*="footer-design-"] .menu-preview a{

        font-size:11px;
    }

    .footer-row[class*="footer-design-"] .social-preview{

        gap:7px;
    }


    /* LUXURY */

    .footer-design-luxury-grid:not(.copyright-row) .footer-column{

        text-align:left;
    }

    .footer-design-luxury-grid:not(.copyright-row) .footer-column + .footer-column{

        border-top:1px solid rgba(255,255,255,.10) !important;
    }

    .footer-design-luxury-grid:not(.copyright-row) .footer-column-title::after{

        width:20px;
    }


    /* SPLIT */

    .footer-design-split-brand:not(.copyright-row) .footer-column:first-child::after{

        display:none;
    }

    .footer-design-split-brand:not(.copyright-row) .footer-column:first-child{

        padding-bottom:28px !important;
    }


    /* CENTERED */

    .footer-design-centered:not(.copyright-row){

        text-align:center;
    }

    .footer-design-centered:not(.copyright-row) .footer-column{

        text-align:center;
    }

    .footer-design-centered:not(.copyright-row) .footer-column .logo-preview{

        justify-content:center;
    }

    .footer-design-centered:not(.copyright-row) .footer-column .text-preview{

        margin-left:auto;

        margin-right:auto;
    }

    .footer-design-centered:not(.copyright-row) .footer-column .social-preview{

        justify-content:center;
    }

    .footer-design-centered:not(.copyright-row) .menu-preview{

        align-items:center;
    }


    /* EDITORIAL */

    .footer-design-editorial:not(.copyright-row) .footer-column-title{

        border-bottom:0;

        padding-bottom:0;
    }

    .footer-design-editorial:not(.copyright-row) .logo-preview{

        font-size:30px !important;
    }


    /* COMPACT */

    .footer-design-compact-grid:not(.copyright-row) .footer-container{

        padding-top:40px !important;

        padding-bottom:40px !important;
    }

    .footer-design-compact-grid:not(.copyright-row) .footer-column{

        padding:18px 0 !important;
    }


    /* STATEMENT */

    .footer-design-statement:not(.copyright-row) .footer-column:first-child{

        text-align:left;
    }

    .footer-design-statement:not(.copyright-row) .footer-column:first-child .logo-preview{

        font-size:42px !important;
    }


    /* MAGAZINE */

    .footer-design-magazine:not(.copyright-row) .footer-column{

        padding:21px 0 !important;
    }

    .footer-design-magazine:not(.copyright-row) .footer-column:first-child{

        padding-top:0 !important;
    }


    /* FLOATING PANELS */

    .footer-design-floating-panels:not(.copyright-row) .footer-columns{

        gap:12px !important;
    }

    .footer-design-floating-panels:not(.copyright-row) .footer-column{

        padding:22px !important;

        border:1px solid rgba(255,255,255,.13) !important;

        border-radius:var(--radius-lg) !important;
    }

    .footer-design-floating-panels:not(.copyright-row) .footer-column + .footer-column{

        border-top:1px solid rgba(255,255,255,.13) !important;
    }


    /* ULTRA MINIMAL */

    .footer-design-ultra-minimal:not(.copyright-row) .footer-container{

        padding-top:52px !important;

        padding-bottom:52px !important;
    }

    .footer-design-ultra-minimal:not(.copyright-row) .footer-column{

        padding:22px 0 !important;
    }

    .footer-design-ultra-minimal:not(.copyright-row) .footer-column:first-child{

        padding-top:0 !important;
    }


    /* WIDE COMMERCE */

    .footer-design-wide-commerce:not(.copyright-row) .footer-column{

        padding:22px 0 !important;
    }


    /* COPYRIGHT */

    .footer-row[class*="footer-design-"].copyright-row .footer-container{

        padding-left:20px !important;

        padding-right:20px !important;
    }

    .footer-row[class*="footer-design-"].copyright-row .copyright-text{

        font-size:9px;

        line-height:1.7;
    }


    /* NEWSLETTER */

    .newsletter-inner{

        padding-left:20px !important;

        padding-right:20px !important;
    }

    .newsletter-split,
    .newsletter-centered,
    .newsletter-minimal,
    .newsletter-stacked,
    .newsletter-compact{

        display:flex;

        flex-direction:column;

        align-items:stretch;

        justify-content:flex-start;

        gap:17px;

        padding:30px 0;
    }

    .newsletter-centered{

        text-align:center;

        align-items:center;
    }

    .newsletter-centered .newsletter-copy{

        margin-left:auto;

        margin-right:auto;
    }

    .newsletter-split .newsletter-form,
    .newsletter-minimal .newsletter-form,
    .newsletter-compact .newsletter-form,
    .newsletter-stacked .newsletter-form,
    .newsletter-centered .newsletter-form{

        width:100%;

        flex:0 0 auto;
    }

    .newsletter-title{

        font-size:21px;
    }

    .newsletter-copy{

        font-size:10px;
    }

    .newsletter-form{

        width:100%;
    }

    .newsletter-form input{

        min-width:0;

        flex:1 1 auto;
    }

    .newsletter-form button{

        flex:0 0 auto;
    }
}


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

@media (max-width:480px){

    .footer-row[class*="footer-design-"] .footer-container{

        padding-left:16px !important;

        padding-right:16px !important;
    }

    .footer-row[class*="footer-design-"] .logo-preview{

        font-size:22px !important;
    }

    .footer-row[class*="footer-design-"] .logo-image-preview{

        max-height:60px;
    }

    .footer-row[class*="footer-design-"] .social-preview a{

        width:32px;

        height:32px;

        flex-basis:32px;
    }

    .footer-design-statement:not(.copyright-row) .footer-column:first-child .logo-preview{

        font-size:36px !important;
    }

    .footer-design-editorial:not(.copyright-row) .logo-preview{

        font-size:27px !important;
    }

    .newsletter-inner{

        padding-left:16px !important;

        padding-right:16px !important;
    }

    .newsletter-form{

        flex-direction:column;
    }

    .newsletter-form input{

        width:100%;

        flex:0 0 auto;

        height:42px;
    }

    .newsletter-form button{

        width:100%;

        min-height:42px;
    }

    .footer-row[class*="footer-design-"].copyright-row .copyright-text{

        font-size:8px;
    }
}


/* =========================================================
VERY SMALL MOBILE
========================================================= */

@media (max-width:360px){

    .footer-row[class*="footer-design-"] .footer-container{

        padding-left:13px !important;

        padding-right:13px !important;
    }

    .footer-row[class*="footer-design-"] .text-preview{

        font-size:10px;
    }

    .footer-row[class*="footer-design-"] .menu-preview a{

        font-size:10px;
    }

    .footer-design-statement:not(.copyright-row) .footer-column:first-child .logo-preview{

        font-size:31px !important;
    }

    .newsletter-title{

        font-size:19px;
    }
}


/* =========================================================
REDUCED MOTION
========================================================= */

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

    .footer-row[class*="footer-design-"],
    .footer-row[class*="footer-design-"] *,
    .newsletter,
    .newsletter *{

        scroll-behavior:auto !important;

        transition:none !important;

        animation:none !important;
    }
}


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

.footer-row[class*="footer-design-"] a:focus-visible,
.newsletter-form input:focus-visible,
.newsletter-form button:focus-visible{

    outline:2px solid var(--primary-color);

    outline-offset:3px;
}


/* =========================================================
PRINT
========================================================= */

@media print{

    .footer-row[class*="footer-design-"]{

        background:#fff !important;

        color:#000 !important;

        box-shadow:none !important;
    }

    .footer-row[class*="footer-design-"] .text-preview,
    .footer-row[class*="footer-design-"] .menu-preview a,
    .footer-row[class*="footer-design-"] .copyright-text{

        color:#000 !important;
    }

    .newsletter{

        display:none !important;
    }
}


/* =========================================================
FOOTER COLOR MODE SELECTOR
========================================================= */

.color-mode-option{

    appearance:none;

    border:1px solid var(--border,var(--border-color));

    background:#fff;

    color:var(--text-dark,#1b1b1b);

    min-height:42px;

    border-radius:8px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:7px;

    font-size:10px;

    font-weight:800;

    cursor:pointer;

    transition:
        background .2s ease,
        color .2s ease,
        border-color .2s ease,
        transform .2s ease;
}

.color-mode-option:hover{

    transform:translateY(-1px);
}

.color-mode-option.active{

    background:var(--primary-color);

    color:#fff;

    border-color:var(--primary-color);
}

.color-mode-option i{

    font-size:11px;
}


/* =========================================================
COLOR MODE VISUAL STATES
========================================================= */

body.footer-color-dark #themeColorField,
body.footer-color-dark #headingColorField{

    opacity:.55;
}

body.footer-color-color #headingColorField{

    opacity:1;
}


/* =========================================================
HEADING COLOR SELECT
========================================================= */

#headingColor{

    width:100%;
}


/* =========================================================
HSO FOOTER DYNAMIC COLOR SYSTEM

JS creates these variables dynamically on <html>.

They are NOT declared inside :root.

IMPORTANT:
The footer-local bridge below maps the dynamic
--footer-primary variables back to the existing
HSO variables:

--primary-color
--primary-hover
--primary-rgb

This means the complete existing footer CSS can continue
using var(--primary-color), var(--primary-hover), etc.

No global HSO theme is changed.
========================================================= */

/* =========================================================
HSO FOOTER — DYNAMIC PRIMARY COLOR BRIDGE
Footer aur Newsletter dono apna saved client primary color use karenge.
========================================================= */

.footer-row[class*="footer-design-"]{
    --primary-color:var(
        --footer-primary,
        var(--footer-theme)
    );

    --primary-hover:var(
        --footer-primary-hover,
        #17684c
    );

    --primary-rgb:var(
        --footer-primary-rgb,
        31,122,91
    );
}

.newsletter{
    --primary-color:var(
        --footer-primary,
        var(--footer-theme)
    );

    --primary-hover:var(
        --footer-primary-hover,
        #17684c
    );

    --primary-rgb:var(
        --footer-primary-rgb,
        31,122,91
    );
}


/* =========================================================
FINAL DYNAMIC BACKGROUND
========================================================= */

.footer-row[class*="footer-design-"]{

    background:var(--footer-bg,#000000) !important;

    color:var(--footer-text,#9ca3af) !important;
}


/* =========================================================
FINAL HEADING COLORS
========================================================= */

.footer-row[class*="footer-design-"] .footer-column-title{

    color:var(--footer-heading,#ffffff) !important;
}


/* =========================================================
FINAL LOGO COLORS
========================================================= */

.footer-row[class*="footer-design-"] .logo-preview{

    color:var(--footer-heading,#ffffff) !important;
}


/* Logo hover: Primary color */

.footer-row[class*="footer-design-"] .logo-preview:hover{

    color:var(--primary-color) !important;
}


/* =========================================================
FINAL NORMAL TEXT
========================================================= */

.footer-row[class*="footer-design-"] .text-preview{

    color:var(--footer-text,#9ca3af) !important;
}


/* =========================================================
FINAL MENU LINKS

Default: Footer text gray
Hover: Primary color
========================================================= */

.footer-row[class*="footer-design-"] .menu-preview a{

    color:var(--footer-text,#9ca3af) !important;
}

.footer-row[class*="footer-design-"] .menu-preview a:hover{

    color:var(--primary-color) !important;
}


/* =========================================================
FINAL SOCIAL

Default: Heading color
Hover: Primary background + white icon
========================================================= */

.footer-row[class*="footer-design-"] .social-preview a{

    color:var(--footer-heading,#ffffff) !important;
}

.footer-row[class*="footer-design-"] .social-preview a:hover{

    background:var(--primary-color) !important;

    color:var(--white) !important;

    border-color:var(--primary-color) !important;
}


/* =========================================================
FINAL PAYMENT
========================================================= */

.footer-row[class*="footer-design-"] .payment-preview{

    color:var(--footer-text,#9ca3af) !important;
}

.footer-row[class*="footer-design-"] .payment-preview span{

    color:var(--footer-text,#9ca3af) !important;
}

.footer-row[class*="footer-design-"] .payment-preview span:hover{

    background:var(--primary-color) !important;

    border-color:var(--primary-color) !important;

    color:var(--white) !important;
}


/* =========================================================
FINAL COPYRIGHT FULL WIDTH LIKE NEWSLETTER

TEXT PERFECTLY CENTERED

BACKGROUND ALWAYS BLACK
========================================================= */

.footer-row[class*="footer-design-"].copyright-row{

    width:100% !important;

    max-width:none !important;

    margin:0 !important;

    padding:0 !important;

    background:#000000 !important;

    background-color:#000000 !important;
}

.footer-row[class*="footer-design-"].copyright-row .footer-container{

    width:100% !important;

    max-width:none !important;

    margin:0 !important;

    padding:20px !important;

    box-sizing:border-box !important;

    background:#000000 !important;

    display:flex !important;

    align-items:center !important;

    justify-content:center !important;

    text-align:center !important;
}

.footer-row[class*="footer-design-"].copyright-row .copyright-text{

    width:100% !important;

    max-width:none !important;

    margin:0 !important;

    padding:0 !important;

    display:flex !important;

    align-items:center !important;

    justify-content:center !important;

    text-align:center !important;

    color:var(--footer-text,#9ca3af) !important;
}


/* =========================================================
NEWSLETTER FINAL DYNAMIC OVERRIDE

Background ALWAYS Black
========================================================= */

.newsletter{

    background:#000000 !important;

    color:var(--footer-text,#9ca3af) !important;
}

.newsletter .newsletter-title{

    color:var(--footer-heading,#ffffff) !important;
}

.newsletter .newsletter-copy{

    color:var(--footer-text,#9ca3af) !important;
}


/* =========================================================
NEWSLETTER INPUT
========================================================= */

.newsletter-form input{

    color:var(--footer-heading,#ffffff) !important;
}


/* =========================================================
NEWSLETTER SUBSCRIBE BUTTON
========================================================= */

.newsletter-form button{

    background:var(--primary-color) !important;

    border-color:var(--primary-color) !important;

    color:var(--white) !important;
}

.newsletter-form button:hover{

    background:var(--primary-hover) !important;

    border-color:var(--primary-hover) !important;

    color:var(--white) !important;
}


/* =========================================================
FINAL BUILDER CTA / BUTTON

DEFAULT: Primary
HOVER: Primary Hover
========================================================= */

.footer-row[class*="footer-design-"] .footer-column a[style*="inline-flex"]{

    background:var(--primary-color) !important;

    border-color:var(--primary-color) !important;

    color:var(--white) !important;
}

.footer-row[class*="footer-design-"] .footer-column a[style*="inline-flex"]:hover{

    background:var(--primary-hover) !important;

    border-color:var(--primary-hover) !important;

    color:var(--white) !important;

    transform:translateY(-2px);

    box-shadow:var(--shadow-sm);
}


/* =========================================================
FINAL INTERACTIVE TEXT HOVER

Covers footer links and text-based interactive elements
========================================================= */

.footer-row[class*="footer-design-"] a:not([style*="inline-flex"]){

    transition:
        color var(--transition-fast),
        background var(--transition-fast),
        border-color var(--transition-fast),
        transform var(--transition-fast);
}


/* =========================================================
FINAL PRIMARY HOVER FOR MENU / LINK ELEMENTS
========================================================= */

.footer-row[class*="footer-design-"] .menu-preview a:hover,
.footer-row[class*="footer-design-"] .menu-preview a:focus-visible{

    color:var(--primary-color) !important;
}


/* =========================================================
COLOR MODE — TEXT/LINK HOVER MUST BE WHITE
========================================================= */

body.footer-color-color
.footer-row[class*="footer-design-"]
.menu-preview a:hover,

body.footer-color-color
.footer-row[class*="footer-design-"]
.menu-preview a:focus-visible{

    color:var(--white) !important;
}

body.footer-color-color
.footer-row[class*="footer-design-"]
.social-preview a:hover,
body.footer-color-color
.footer-row[class*="footer-design-"]
.social-preview a:focus-visible{
    background:var(--white) !important;
    border-color:var(--white) !important;
    color:var(--primary-color) !important;
}

body.footer-color-color
.footer-row[class*="footer-design-"]
.social-preview a:hover i,
body.footer-color-color
.footer-row[class*="footer-design-"]
.social-preview a:focus-visible i{
    color:var(--primary-color) !important;
}


/* =========================================================
COLOR MODE — SOCIAL ICON HOVER

Background: White
Icon: Primary Color
========================================================= */

body.footer-color-color
.footer-row[class*="footer-design-"]
.social-preview a:hover,

body.footer-color-color
.footer-row[class*="footer-design-"]
.social-preview a:focus-visible{

    background:var(--white) !important;

    border-color:var(--white) !important;

    color:var(--primary-color) !important;
}


/* =========================================================
COLOR MODE + BLACK TEXT

When Footer Color Mode = Color and Text Color = Black,
ALL NORMAL FOOTER TEXT MUST BE BLACK
========================================================= */

body.footer-color-color
.footer-row[class*="footer-design-"]
.text-preview,

body.footer-color-color
.footer-row[class*="footer-design-"]
.menu-preview a,

body.footer-color-color
.footer-row[class*="footer-design-"]
.payment-preview,

body.footer-color-color
.footer-row[class*="footer-design-"]
.payment-preview span,


/* =========================================================
COLOR MODE + BLACK TEXT

When Footer Color Mode = Color and Text Color = Black,
ONLY MAIN FOOTER NORMAL TEXT MUST BE BLACK.

EXCLUDED:
- Newsletter text
- Copyright text

Both sections have ALWAYS BLACK background and therefore
keep their own readable gray text.
========================================================= */

body.footer-color-color
.footer-row[class*="footer-design-"]:not(.copyright-row)
.text-preview,

body.footer-color-color
.footer-row[class*="footer-design-"]:not(.copyright-row)
.menu-preview a,

body.footer-color-color
.footer-row[class*="footer-design-"]:not(.copyright-row)
.payment-preview,

body.footer-color-color
.footer-row[class*="footer-design-"]:not(.copyright-row)
.payment-preview span,

body.footer-color-color
.footer-row[class*="footer-design-"]:not(.copyright-row)
.footer-row-text,

body.footer-color-color
.footer-row[class*="footer-design-"]:not(.copyright-row)
.description-preview{

    color:var(--footer-text,#2b2b2b) !important;
}


/* =========================================================
NEWSLETTER

Background ALWAYS BLACK
Text ALWAYS GRAY
========================================================= */

.newsletter,
.newsletter .newsletter-copy{

    color:#9ca3af !important;
}


/* =========================================================
COPYRIGHT

Background ALWAYS BLACK
Text ALWAYS GRAY
========================================================= */

.footer-row[class*="footer-design-"].copyright-row
.copyright-text{

    color:#9ca3af !important;
}


body.footer-color-color
.footer-row[class*="footer-design-"]
.footer-row-text,

body.footer-color-color
.footer-row[class*="footer-design-"]
.description-preview{

    color:var(--footer-text,#2b2b2b) !important;
    
}

/* =========================================================
COLOR MODE — ALL TEXT HOVER MUST BE WHITE

When Footer Color Mode = Color:
- Menu link hover = White
- Text-based link hover = White
- Footer interactive text hover = White
- Primary color hover is NOT used for text in Color mode

Buttons / Social icons remain controlled by their own rules.
========================================================= */

body.footer-color-color
.footer-row[class*="footer-design-"]
a:not([style*="inline-flex"]):hover{

    color:#ffffff !important;
}


/* =========================================================
COLOR MODE — MENU TEXT HOVER
========================================================= */

body.footer-color-color
.footer-row[class*="footer-design-"]
.menu-preview a:hover,
body.footer-color-color
.footer-row[class*="footer-design-"]
.menu-preview a:focus-visible{

    color:#ffffff !important;
}


/* =========================================================
COLOR MODE — TEXT PREVIEW LINK HOVER
========================================================= */

body.footer-color-color
.footer-row[class*="footer-design-"]
.text-preview a:hover,
body.footer-color-color
.footer-row[class*="footer-design-"]
.text-preview a:focus-visible{

    color:#ffffff !important;
}


/* =========================================================
COLOR MODE — FOOTER ROW TEXT LINK HOVER
========================================================= */

body.footer-color-color
.footer-row[class*="footer-design-"]
.footer-row-text a:hover,
body.footer-color-color
.footer-row[class*="footer-design-"]
.footer-row-text a:focus-visible{

    color:#ffffff !important;
}


/* =========================================================
COLOR MODE — DESCRIPTION LINK HOVER
========================================================= */

body.footer-color-color
.footer-row[class*="footer-design-"]
.description-preview a:hover,
body.footer-color-color
.footer-row[class*="footer-design-"]
.description-preview a:focus-visible{

    color:#ffffff !important;
}


/* =========================================================
COLOR MODE — LOGO TEXT HOVER
========================================================= */

body.footer-color-color
.footer-row[class*="footer-design-"]
.logo-preview:hover{

    color:#ffffff !important;
}

/* =========================================================
   FOOTER — REMOVE HARD-CODED RIGHT-SIDE BACKGROUND SHADOW
   Theme background must remain clean.
   No black / white hardcoded outer shadow.
   ========================================================= */

.footer-row[class*="footer-design-"]{
    box-shadow:none !important;
}

/* Remove decorative right-bottom glow from Luxury Grid */
.footer-design-luxury-grid:not(.copyright-row)::before{
    background:
        radial-gradient(
            circle at 0 0,
            rgba(255,255,255,.10),
            transparent 32%
        ) !important;
}