/* ============================================================
   NABDINA BRAND PALETTE — matched to the logo
   Logo heart: violet  →  pulse line: light blue
   Load AFTER site.css in _Layout:
   <link rel="stylesheet" href="~/css/brand.css" asp-append-version="true" />
   ============================================================ */
:root {
    /* Core brand colors sampled from the logo */
    --violet: #7C52F4; /* logo heart violet */
    --violet-dark: #6B41E8;
    --violet-soft: #F1EBFF;
    --blue: #4D8DF8; /* logo pulse blue */
    --blue-dark: #3A6EDC;
    --blue-soft: #EDF3FE;
    /* Brand gradient (violet → blue), same direction as the logo stroke */
    --grad: linear-gradient(120deg,#7C52F4 0%,#4D8DF8 100%);
    --grad-hover: linear-gradient(120deg,#6B41E8 0%,#3A7BEB 100%);
}

/* ---- Primary actions use the brand gradient ---- */
.btn-primary {
    background: var(--grad);
    box-shadow: 0 10px 24px -12px rgba(124,82,244,.85);
}

    .btn-primary:hover {
        background: var(--grad-hover)
    }

.btn-outline {
    color: var(--violet);
    border-color: var(--violet)
}

    .btn-outline:hover {
        background: var(--violet-soft)
    }

/* ---- Accents ---- */
.hero h1 .accent {
    background: var(--grad);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.hero {
    background: radial-gradient(900px 460px at 85% 0,rgba(124,82,244,.10),transparent 60%),linear-gradient(180deg,#F5F3FE,#fff)
}

.menu > ul > li > a:hover, .menu > ul > li > button:hover {
    color: var(--violet);
    background: var(--violet-soft)
}

.menu > ul > li.active > a {
    color: var(--violet)
}

    .menu > ul > li.active > a::after {
        background: var(--grad)
    }

.dd a:hover {
    background: var(--violet-soft);
    color: var(--violet)
}

.icon-btn:hover {
    color: var(--violet)
}

.cart-badge {
    background: var(--grad)
}

.tb-right a:hover {
    color: #C9B8FF
}

.sec-tag {
    background: var(--violet-soft);
    color: var(--violet)
}

.cat-ic svg {
    color: var(--violet)
}

.view-all, .learn, .hero-card a, .lang-switch-m {
    color: var(--violet)
}

.add-cart {
    background: var(--grad)
}

    .add-cart:hover {
        background: var(--grad-hover)
    }

.why-ic {
    background: var(--violet-soft);
    color: var(--violet)
}

.why-num {
    color: #EFE9FE
}

.sol-pills a:hover {
    border-color: var(--violet);
    color: var(--violet)
}

.sol-pills svg {
    color: var(--violet)
}

.foot-col h4::after {
    background: var(--grad)
}

.social a:hover {
    background: var(--violet)
}

/* ---- Gradient bands ---- */
.trust-bar, .stats-band {
    background: var(--grad)
}

.sol-media {
    background: var(--grad)
}

/* ---- Focus ring in brand color ---- */
:focus-visible {
    outline-color: var(--violet)
}

/* ---------- Sticky top bar + header (desktop) ---------- */
@media(min-width:1025px) {
    .topbar {
        position: sticky;
        top: 0;
        z-index: 70
    }

    .header {
        top: 44px
    }
}

/* ---------- Footer: 4 equal columns ---------- */
.foot-grid-4 {
    grid-template-columns: repeat(4,1fr)
}

@media(max-width:1024px) {
    .foot-grid-4 {
        grid-template-columns: 1fr 1fr
    }
}

@media(max-width:560px) {
    .foot-grid-4 {
        grid-template-columns: 1fr
    }
}

/* Social column icons */
.foot-social-col .social {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap
}

/* ---------- Cookie consent bar ---------- */
.cookie-bar {
    position: fixed;
    bottom: 0;
    inset-inline: 0;
    z-index: 120;
    background: var(--navy);
    color: #C7D0E4;
    box-shadow: 0 -8px 30px rgba(14,27,58,.25)
}

.cookie-bar-in {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding-block: 14px
}

.cookie-bar p {
    margin: 0;
    font-size: .88rem;
    line-height: 1.6;
    max-width: 60ch
}

.cookie-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap
}

.ck-btn {
    font-weight: 600;
    font-size: .85rem;
    padding: .6rem 1.1rem;
    border-radius: 9px;
    transition: .15s
}

.ck-accept {
    background: var(--grad);
    color: #fff
}

    .ck-accept:hover {
        filter: brightness(1.08)
    }

.ck-essential {
    background: rgba(255,255,255,.12);
    color: #fff
}

    .ck-essential:hover {
        background: rgba(255,255,255,.2)
    }

.ck-reject {
    background: transparent;
    color: #8894AC;
    border: 1px solid rgba(255,255,255,.2)
}

    .ck-reject:hover {
        color: #fff;
        border-color: #fff
    }

@media(max-width:640px) {
    .cookie-bar-in {
        flex-direction: column;
        align-items: stretch;
        text-align: center
    }

    .cookie-actions {
        justify-content: center
    }
}