/* =========================================================
   CrazyNuts Footer — Radiant (like header) + White text
   3 middle titles horizontally (Chocolates / Prepacked / More)
   ========================================================= */

:root {
    /* Footer title fonts */
    --cn-footer-title-font: "Playfair Display", serif;
    --cn-footer-brand-font: "Cinzel", "Playfair Display", serif;
    /* Core palette (match header vibe) */
    --cn-black: #070708;
    --cn-black-2: #0b0b0d;
    --cn-red-dark: #691D0E;
    --cn-red-deep: #3a0b07;
    /* Text */
    --cn-white: #ffffff;
    --cn-white-soft: rgba(255,255,255,0.80);
    /* Accents */
    --cn-border: rgba(255,255,255,0.14);
    --cn-border-2: rgba(255,255,255,0.10);
    --cn-glow: rgba(255, 80, 40, 0.35);
    /* Motion */
    --cn-motion: 14s;
    --cn-sheen: 6.5s;
    --cn-shadow: 0 14px 40px rgba(0,0,0,.25);
}

/* =========================================================
   Footer wrapper + radiant background
   ========================================================= */

.cn-footer {
    margin-top: 34px;
    position: relative;
    overflow: hidden;
    color: var(--cn-white);
    border-top: 1px solid rgba(255,255,255,0.10);
    /* MORE dark red on LEFT, black on RIGHT */
    background: radial-gradient(1050px 300px at 10% 0%, rgba(105,29,14,0.78), transparent 62%), radial-gradient(840px 340px at 28% 35%, rgba(58,11,7,0.60), transparent 68%), radial-gradient(720px 300px at 70% 25%, rgba(255,80,40,0.10), transparent 60%), linear-gradient(115deg, var(--cn-red-dark) 0%, var(--cn-red-deep) 42%, var(--cn-black-2) 78%, var(--cn-black) 100% );
    background-size: 170% 170%;
    animation: cnFooterDrift var(--cn-motion) ease-in-out infinite alternate;
}

    .cn-footer::before {
        content: "";
        position: absolute;
        inset: -2px;
        pointer-events: none;
        background: radial-gradient(900px 280px at 12% 10%, rgba(255,80,40,0.12), transparent 62%), radial-gradient(760px 260px at 90% 10%, rgba(0,0,0,0.22), transparent 60%);
        opacity: 1;
    }

    .cn-footer::after {
        content: "";
        position: absolute;
        inset: -45%;
        pointer-events: none;
        background: linear-gradient( 110deg, transparent 0%, rgba(255,255,255,0.09) 45%, rgba(255,255,255,0.02) 52%, transparent 62% );
        transform: translateX(-35%) rotate(6deg);
        animation: cnFooterSheen var(--cn-sheen) ease-in-out infinite;
        opacity: 0.65;
    }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .cn-footer {
        animation: none;
        background-size: cover;
    }

        .cn-footer::after {
            animation: none;
            opacity: 0.30;
        }
}

@keyframes cnFooterDrift {
    0% {
        background-position: 0% 30%;
    }

    50% {
        background-position: 45% 42%;
    }

    100% {
        background-position: 100% 28%;
    }
}

@keyframes cnFooterSheen {
    0% {
        transform: translateX(-45%) rotate(6deg);
        opacity: 0.0;
    }

    20% {
        opacity: 0.65;
    }

    50% {
        opacity: 0.20;
    }

    100% {
        transform: translateX(45%) rotate(6deg);
        opacity: 0.0;
    }
}

/* =========================================================
   Layout
   ========================================================= */

/* ✅ FULL WIDTH, LEFT-ALIGNED CONTENT WITH ONLY 5px LEFT PADDING */
.cn-footer__wrap {
    width: 100%;
    box-sizing: border-box;
    padding: 34px 22px 22px 5px;
    display: grid;
    grid-template-columns: 1.15fr 1.55fr 1fr; /* brand | mid | right */
    gap: 26px;
    align-items: start;
    position: relative;
    z-index: 1; /* above overlays */
}

/* Links default */
.cn-footer a {
    color: var(--cn-white);
    text-decoration: none;
}

/* =========================================================
   LEFT (Brand)
   ========================================================= */

.cn-footer__brand {
    text-align: left;
}

/* Main brand title (different font + designed look) */
.cn-footer__logoText {
    font-family: var(--cn-footer-brand-font);
    font-weight: 900;
    font-size: 26px;
    letter-spacing: .8px;
    margin-bottom: 12px;
    line-height: 1;
    /* Designed look */
    background: linear-gradient(90deg, rgba(255,255,255,0.95), rgba(255,190,170,0.85), rgba(255,255,255,0.90));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 0 18px rgba(255,80,40,0.18);
}

.cn-footer__brandBox {
    position: relative;
    border: 1px solid var(--cn-border);
    background: rgba(255,255,255,0.06);
    backdrop-filter: blur(10px);
    border-radius: 18px;
    padding: 16px 16px 18px;
    overflow: hidden;
}

.cn-footer__brandDesc {
    margin: 0;
    font-weight: 700;
    opacity: .92;
    line-height: 1.55;
    max-width: 56ch;
    color: var(--cn-white-soft);
}

/* Decorative nuts (now “glass” style) */
.cn-footer__nuts {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .75;
}

.cn-footer__nut {
    position: absolute;
    width: 70px;
    height: 70px;
    border-radius: 22px;
    border: 1px solid rgba(255,255,255,0.12);
    background: radial-gradient(circle at 30% 30%, rgba(255,120,90,.22), rgba(255,255,255,.04));
    transform: rotate(14deg);
}

.cn-footer__nut--1 {
    right: -16px;
    top: -18px;
}

.cn-footer__nut--2 {
    right: 18px;
    bottom: -22px;
    width: 78px;
    height: 78px;
    border-radius: 26px;
    transform: rotate(-8deg);
}

.cn-footer__nut--3 {
    left: -22px;
    bottom: 12px;
    width: 54px;
    height: 54px;
    border-radius: 18px;
    transform: rotate(20deg);
    opacity: .7;
}

/* =========================================================
   MIDDLE (3 columns: Chocolates / Prepacked / More)
   ========================================================= */

.cn-footer__mid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr; /* ✅ 3 titles horizontally */
    gap: 22px;
    align-items: start;
}

.cn-footer__group {
    margin-bottom: 0;
}

.cn-footer__groupTitle {
    font-family: var(--cn-footer-title-font);
    font-weight: 800;
    letter-spacing: .35px;
    margin-bottom: 10px;
    color: var(--cn-white);
}

.cn-footer__links {
    display: grid;
    gap: 9px;
}

.cn-footer__link {
    font-weight: 750;
    opacity: .88;
    width: fit-content;
    color: var(--cn-white-soft);
    transition: opacity .16s ease, text-shadow .16s ease;
}

    .cn-footer__link:hover {
        opacity: 1;
        text-shadow: 0 0 18px var(--cn-glow);
    }

/* =========================================================
   RIGHT (Account + Social)
   ========================================================= */

.cn-footer__right {
    text-align: left;
}

.cn-footer__title,
.cn-footer__socialTitle {
    font-family: var(--cn-footer-title-font);
    font-weight: 800;
    letter-spacing: .35px;
    margin-bottom: 12px;
    color: var(--cn-white);
}

.cn-footer__accountBox {
    border: 1px solid var(--cn-border);
    background: rgba(255,255,255,0.06);
    backdrop-filter: blur(10px);
    border-radius: 18px;
    padding: 14px;
    overflow: hidden;
}

.cn-footer__accountActions {
    display: grid;
    gap: 10px;
}

.cn-footer__cta {
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-decoration: none;
    color: var(--cn-white);
    font-weight: 800;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.14);
    background: rgba(0,0,0,0.18);
    transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
}

    .cn-footer__cta:hover {
        background: rgba(255,255,255,0.08);
        box-shadow: 0 0 18px rgba(255,80,40,0.16);
        transform: translateY(-1px);
    }

.cn-footer__sep {
    height: 1px;
    background: rgba(255,255,255,0.10);
    margin: 14px 0;
}

.cn-footer__social {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.cn-footer__iconBtn {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255,255,255,0.14);
    background: rgba(0,0,0,0.20);
    color: var(--cn-white);
    text-decoration: none;
    transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
}

    .cn-footer__iconBtn svg {
        width: 22px;
        height: 22px;
    }

    .cn-footer__iconBtn:hover {
        background: rgba(255,255,255,0.08);
        box-shadow: 0 0 18px rgba(255,80,40,0.16);
        transform: translateY(-1px);
    }

/* =========================================================
   Bottom
   ========================================================= */

.cn-footer__bottom {
    border-top: 1px solid rgba(255,255,255,0.10);
    padding: 14px 18px;
    position: relative;
    z-index: 1;
}

.cn-footer__bottomInner {
    width: 100%;
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    font-weight: 700;
    opacity: .92;
    color: var(--cn-white-soft);
}

.cn-footer__dot {
    opacity: .45;
}

.cn-footer__bottomLink {
    text-decoration: none;
    color: var(--cn-white);
    font-weight: 800;
    opacity: .92;
}

    .cn-footer__bottomLink:hover {
        opacity: 1;
        text-shadow: 0 0 18px var(--cn-glow);
    }

/* =========================
   Responsive
   ========================= */

/* Tablet: stack brand full width, keep mid 3 cols */
@media (max-width: 980px) {
    .cn-footer__wrap {
        grid-template-columns: 1fr;
        padding: 26px 14px 16px 5px;
        gap: 18px;
    }

    .cn-footer__mid {
        grid-template-columns: 1fr 1fr 1fr; /* keep 3 if space allows */
    }
}

/* Mobile: make middle single column */
@media (max-width: 640px) {
    .cn-footer__mid {
        grid-template-columns: 1fr;
    }

    .cn-footer__logoText {
        font-size: 22px;
    }

    .cn-footer__brandBox,
    .cn-footer__accountBox {
        border-radius: 16px;
    }

    .cn-footer__iconBtn {
        width: 44px;
        height: 44px;
        border-radius: 13px;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .cn-footer__iconBtn,
    .cn-footer__cta {
        transition: none !important;
    }

        .cn-footer__iconBtn:hover,
        .cn-footer__cta:hover {
            transform: none;
        }
}