/* ============================================================
   Kalyvo — New Theme (Teal / Cream)
   Paste this entire file into: Admin → Settings → Custom CSS
   ============================================================ */

:root {
    /* These map directly onto the theme's hsl(var(--x)) usage
       throughout the framework — component-triples, not hex, on
       purpose. Computed precisely from your palette, not eyeballed. */
    --base: 176 97% 26%;          /* Primary Teal   #02847C */
    --primary: 221 44% 7%;        /* Dark Text      #0A0F1A */
    --secondary: 173 30% 65%;     /* Logo Teal      #8CC1BB */
    --success: 176 97% 26%;
    --white: 0 0% 100%;

    /* Direct hex handles for places that need a literal value rather
       than an hsl() triple (gradients, box-shadows, etc). */
    --klv-teal: #02847C;
    --klv-teal-soft: #8CC1BB;
    --klv-dark: #0A0F1A;
    --klv-cream: #FFF7F2;
    --klv-mint: #E0F0ED;
    --klv-gray-bg: #F8FAF9;
    --klv-gray-text: #6B7280;
}

/* ---------- Buttons ---------- */
.btn--base,
.btn.btn--base {
    background-color: var(--klv-teal) !important;
    border-color: var(--klv-teal) !important;
    color: #fff !important;
}
.btn--base:hover,
.btn.btn--base:hover {
    background-color: #026b64 !important; /* ~10% darker teal on hover */
    border-color: #026b64 !important;
}
.btn--outline--base,
.btn.edit__btn {
    background-color: transparent !important;
    border: 1.5px solid var(--klv-teal) !important;
    color: var(--klv-teal) !important;
}
.btn--outline--base:hover,
.btn.edit__btn:hover {
    background-color: var(--klv-teal) !important;
    color: #fff !important;
}

/* ---------- Text & headings ---------- */
body {
    color: var(--klv-dark);
}
h1, h2, h3, h4, h5, h6,
.section__title,
.dh__title h5 {
    color: var(--klv-dark);
}
.text--secondary,
.text-muted {
    color: var(--klv-gray-text) !important;
}
a {
    color: var(--klv-teal);
}
a:hover {
    color: #026b64;
}

/* ---------- Backgrounds ---------- */
body,
.bg--white {
    background-color: #fff;
}
.bg--section,
.section--bg {
    background-color: var(--klv-gray-bg);
}

/* ---------- Icons & accents ---------- */
.text--base,
.icon--base i,
.category__icon i {
    color: var(--klv-teal) !important;
}
.badge--base,
.badge.badge--base {
    background-color: var(--klv-teal) !important;
    color: #fff !important;
}

/* ---------- Hero section (homepage) ---------- */
.hero__section,
.hero {
    background: linear-gradient(120deg, var(--klv-cream) 0%, var(--klv-mint) 100%);
}
.hero h1,
.hero__content h1 {
    color: var(--klv-dark);
}
.hero h1 span,
.hero__content h1 span.text--base {
    color: var(--klv-teal);
}

/* ---------- Category cards ---------- */
.category__card,
.category__item {
    background-color: #fff;
    border: 1px solid var(--klv-gray-bg);
}
.category__card:hover,
.category__item:hover {
    border-color: var(--klv-teal);
}
.category__card .icon,
.category__item__icon {
    color: var(--klv-teal);
}

/* ---------- Trust badges / stats row ---------- */
.stat__icon,
.hero__stat i {
    background-color: var(--klv-teal);
    color: #fff;
}

/* ---------- Footer ---------- */
.footer,
footer {
    background-color: var(--klv-gray-bg);
    color: var(--klv-dark);
}
.footer a,
footer a {
    color: var(--klv-gray-text);
}
.footer a:hover,
footer a:hover {
    color: var(--klv-teal);
}

/* ---------- Secure-payment badge ---------- */
.secure__badge {
    background-color: var(--klv-mint);
    color: var(--klv-teal);
    border: 1px solid var(--klv-teal);
}