/* ============================================================
   MIXBOX HARMONY — stratul FINAL: spatiere egala + fonturi mari
   peste tot (mobil + desktop) + footer consistent.
   Selectorii au specificitate ridicata (html body + lanturi complete)
   ca sa castige in fata regulilor per-sectiune din landing-redesign.css.
   ============================================================ */

:root {
    /* ritmul unic de spatiere */
    --mx-sec: clamp(64px, 9vw, 112px);
    --mx-head-gap: clamp(28px, 5vw, 52px);

    /* scara tipografica - px, independenta de root font-size */
    --mx-h1: clamp(34px, 7vw, 62px);
    --mx-h2: clamp(34px, 5.5vw, 56px);
    --mx-h3: clamp(22px, 4.2vw, 28px);
    --mx-lead: clamp(19px, 4.4vw, 25px);
    --mx-body: clamp(18px, 3.9vw, 21px);
    --mx-small: clamp(16px, 3.5vw, 19px);
}

/* ==================== 1. SPATIERE EGALA ==================== */

html body .earn-money-section,
html body .main-category,
html body .learn-feature-section,
html body .delivery-area-section,
html body .refer-section,
html body .testimonial-section,
html body .about-section {
    padding-block: var(--mx-sec) !important;
}

html body .pt-80 { padding-top: var(--mx-sec) !important; }
html body .pb-80 { padding-bottom: var(--mx-sec) !important; }

html body .v2 .v2-section { padding-block: var(--mx-sec); }
html body .v2 .v2-section-head { margin-bottom: var(--mx-head-gap); }

html body .section-header,
html body .earn-money-section .section-header,
html body .learn-feature-section .section-header,
html body .delivery-area-section .section-header,
html body .refer-section .section-header {
    margin-bottom: var(--mx-head-gap) !important;
}
html body .section-header.mb-0 { margin-bottom: 0 !important; }
html body .learn-feature-content .section-header.mb-0 { margin-bottom: clamp(16px, 3vw, 28px) !important; }

html body .banner-section { padding-block: clamp(36px, 6vw, 80px) 0; }
html body .banner-section .banner-content {
    padding-block-start: clamp(24px, 4.5vw, 56px) !important;
    padding-block-end: clamp(20px, 4vw, 40px) !important;
}
html body .mx-stats-section { padding-block: clamp(28px, 5vw, 56px) var(--mx-sec) !important; }

/* ==================== 2. TIPOGRAFIE MARE ==================== */

/* --- HERO --- */
html body .banner-section .banner-content .title {
    font-size: var(--mx-h1) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.02em !important;
    font-weight: 900 !important;
}
html body .banner-section .banner-content .text {
    font-size: var(--mx-lead) !important;
    line-height: 1.5 !important;
    max-width: 40ch !important;
    color: #37473f !important;
    font-weight: 500 !important;
}

/* --- titluri de sectiune (toate variantele per-sectiune) --- */
html body .section-header .title,
html body .earn-money-section .section-header .title,
html body .learn-feature-section .section-header .title,
html body .delivery-area-section .section-header .title,
html body .refer-section .section-header .title,
html body .main-category .section-header .title,
html body .testimonial-section .section-header .title,
html body .learn-feature-content .section-header .title {
    font-size: var(--mx-h2) !important;
    line-height: 1.12 !important;
    letter-spacing: -0.015em !important;
    font-weight: 900 !important;
}
html body .section-header .text,
html body .earn-money-section .section-header .text,
html body .learn-feature-section .section-header .text,
html body .learn-feature-content .section-header .text,
html body .delivery-area-section .section-header .text,
html body .refer-section .section-header .text {
    font-size: var(--mx-body) !important;
    line-height: 1.62 !important;
}

/* v2 pe aceeasi scara */
html body .v2 .v2-display { font-size: var(--mx-h1); }
html body .v2 h2 { font-size: var(--mx-h2); }
html body .v2 h3 { font-size: var(--mx-h3); }
html body .v2 p { font-size: var(--mx-body); }
html body .v2 .v2-lead { font-size: var(--mx-lead); }

/* --- earn money --- */
html body .earn-money-section .earn-item-cont .subtitle { font-size: var(--mx-small) !important; letter-spacing: 0.08em !important; }
html body .earn-money-section .earn-item-cont .title { font-size: clamp(26px, 5vw, 38px) !important; line-height: 1.15 !important; }
html body .earn-money-section .earn-item-cont .desc { font-size: var(--mx-body) !important; line-height: 1.65 !important; }

/* --- avantaje (learn feature) --- */
html body .learn-feature-section .learn-feature-item-content .subttle,
html body .learn-feature-section .learn-feature-item-content .subtitle {
    font-size: var(--mx-h3) !important;
    line-height: 1.25 !important;
}
html body .learn-feature-section .learn-feature-item-content .text {
    font-size: var(--mx-small) !important;
    line-height: 1.55 !important;
}

/* --- zona de livrare --- */
html body .delivery-area-section .text { font-size: var(--mx-body) !important; line-height: 1.62 !important; }
html body .delivery-area-section .zone-list .item { font-size: var(--mx-small) !important; padding: 12px 26px !important; }

/* --- referral --- */
html body .refer-section .text { font-size: var(--mx-body) !important; line-height: 1.62 !important; }
html body .refer-section .dropdown-item { font-size: var(--mx-small) !important; }

/* --- butoane --- */
html body .cmn--btn { font-size: clamp(16px, 3.6vw, 18px) !important; }
html body .earn-cta { font-size: clamp(16px, 3.7vw, 18px) !important; }
html body .v2 .v2-btn { font-size: clamp(17px, 3.8vw, 18px); padding: 18px 32px; }

/* --- testimoniale + whygrid + stats --- */
html body .v2 .v2-quote p { font-size: clamp(18px, 3.9vw, 20px); line-height: 1.6; }
html body .v2 .v2-quote .who b { font-size: 17px; }
html body .v2 .v2-quote .who span { font-size: 15px; }
html body .v2 .v2-whycard b { font-size: clamp(17px, 3.8vw, 20px); }
html body .mx-stat-value { font-size: clamp(34px, 7.5vw, 52px) !important; }
html body .mx-stat-label { font-size: clamp(13px, 2.8vw, 15px) !important; }
html body .v2 .v2-stat .num { font-size: clamp(34px, 7.5vw, 52px); }
html body .v2 .v2-stat .lbl { font-size: clamp(13px, 2.8vw, 15px); }

/* ==================== 3. FOOTER (doar text + spatii) ==================== */

html body footer .newsletter-content .title {
    font-size: clamp(27px, 5.5vw, 40px) !important;
    font-weight: 900 !important;
    line-height: 1.15 !important;
}
html body footer .newsletter-content .text { font-size: var(--mx-small) !important; }
html body footer .newsletter-content .input--grp input.form-control {
    height: 60px !important;
    font-size: 17px !important;
}

html body footer .footer-widget .txt {
    font-size: var(--mx-small) !important;
    line-height: 1.7 !important;
}
html body footer .footer-widget .subtitle {
    font-size: 18px !important;
    font-weight: 900 !important;
    letter-spacing: 0.04em !important;
    margin-bottom: 14px !important;
}
html body footer .footer-widget.widget-links a,
html body footer .footer-widget .link-list a {
    font-size: var(--mx-small) !important;
    padding-block: 5px !important;
    display: inline-block !important;
    line-height: 1.5 !important;
}
html body footer .footer-hover-btn { font-size: 16px !important; font-weight: 700 !important; padding: 10px 18px !important; }
html body footer .social-icon li a img { width: 22px; height: 22px; }
html body footer .copyright { font-size: 16px !important; }

html body footer .footer-bottom { padding-block: clamp(44px, 7vw, 76px) clamp(20px, 4vw, 32px) !important; }
html body footer .footer-widget { margin-bottom: clamp(20px, 4vw, 32px); }

/* ==================== 4. FINETE ==================== */

html body .earn-money-section p,
html body .refer-section p,
html body .delivery-area-section p,
html body .learn-feature-section p,
html body .testimonial-section p {
    font-size: var(--mx-body);
    line-height: 1.65;
}

html body .banner-content .v2-hero-ctas { margin-bottom: clamp(18px, 3.5vw, 28px); }


/* fix: valorile-text din stats (ex. Oradea) sa incapa mereu in celula */
html body .mx-stats-band .mx-stat { min-width: 0; }
html body .mx-stat-value--text { font-size: clamp(24px, 3.6vw, 40px) !important; white-space: nowrap; }
html body .mx-stat-value--text .mx-stat-pin { width: 0.55em; }


/* ==================== REFERRAL: share centrat si orizontal ==================== */
@media (max-width: 991.98px) {
    html body .refer-section .btn-grp {
        display: flex; flex-direction: column; align-items: center;
    }
    html body .refer-section .btn-grp .position-relative { width: 100%; display: flex; flex-direction: column; align-items: center; }
    html body .refer-section .btn-grp .cmn--btn { width: min(320px, 86%) !important; }
}
/* lista de retele: rand orizontal centrat, carduri egale */
html body .refer-section .dropdown-menu.show {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    width: 100% !important;
    max-width: 560px;
    margin-inline: auto;
}
html body .refer-section .dropdown-menu.show .dropdown-item {
    display: inline-flex !important;
    align-items: center;
    width: auto !important;
    background: #fff !important;
    border: 1.5px solid #e3efe8 !important;
    border-radius: 999px !important;
    padding: 10px 20px !important;
    box-shadow: 0 4px 18px rgba(12, 31, 21, 0.06);
    font-weight: 700;
}
html body .refer-section .dropdown-menu.show .dropdown-item:hover { background: #f4faf6 !important; }
html body .refer-section .dropdown-menu.show .dropdown-item span { width: 26px !important; margin-right: 8px !important; }
html body .refer-section .dropdown-menu.show .dropdown-item svg { width: 22px; height: 22px; }


/* ==================== FLOW PILLS (CAUTI->GASESTI->REZOLVI) MOBIL ==================== */
/* pe ecrane inguste: un singur rand compact care incape mereu */
@media (max-width: 576px) {
    html body .v2-hero-flow {
        flex-wrap: nowrap !important;
        gap: 5px !important;
        width: 100%;
        justify-content: center;
    }
    html body .v2-hero-flow .f-step {
        padding: 8px 12px !important;
        font-size: 12.5px !important;
        letter-spacing: 0.05em !important;
        white-space: nowrap;
        flex: none;
    }
    html body .v2-hero-flow .f-arrow { font-size: 13px !important; flex: none; }
}
@media (max-width: 360px) {
    html body .v2-hero-flow .f-step { padding: 7px 9px !important; font-size: 11.5px !important; }
}


/* ==================== EARN CTA ALIGN — butoane identice ==================== */
/* Toate cele 3 butoane (magazin / livrator / prestator): aceeasi latime,
   aceeasi inaltime, acelasi text pe UN rand, perfect centrate in poza. */
html body .earn-money-section .earn-item-img {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 16px !important;
}
html body .earn-money-section .earn-item-img > .position-relative {
    width: 100%;
    display: flex;
    justify-content: center;
}
html body .earn-money-section .earn-item-img .cmn--btn {
    width: min(330px, 90%) !important;
    min-height: 58px !important;
    padding: 0 22px !important;
    white-space: nowrap !important;
    letter-spacing: 0.06em !important;
    font-size: 15px !important;
}
@media (min-width: 768px) {
    html body .earn-money-section .earn-item-img .cmn--btn {
        width: 340px !important;
        min-height: 62px !important;
        font-size: 16px !important;
    }
}
@media (max-width: 420px) {
    html body .earn-money-section .earn-item-img .cmn--btn {
        width: min(300px, 94%) !important;
        font-size: 13.5px !important;
        letter-spacing: 0.04em !important;
        min-height: 54px !important;
    }
}


/* ==================== EARN IMG HEIGHT — zone de imagine identice ==================== */
/* toate cele 3 carduri au exact aceeasi inaltime a zonei cu poza,
   deci butoanele stau la aceeasi pozitie in fiecare card */
html body .earn-money-section .earn-item-img {
    min-height: 210px !important;
    height: 210px !important;
    background-size: cover !important;
    background-position: center !important;
    border-radius: 14px;
}
@media (min-width: 768px) {
    html body .earn-money-section .earn-item-img { min-height: 280px !important; height: 280px !important; }
}
@media (max-width: 420px) {
    html body .earn-money-section .earn-item-img { min-height: 190px !important; height: 190px !important; }
}


/* ==================== HERO WORDS — fiecare cuvant, alta nuanta ==================== */
html body .banner-section .banner-content .title .mx-hw {
    display: inline-block;
    line-height: 1.06;
}
/* paleta ANALOG CALD: 3 culori vecine pe roata cromatica, trec una in alta */
html body .banner-section .banner-content .title .mx-hw-1 { color: #0a6e4a !important; }  /* Produsul     - verde adanc */
html body .banner-section .banner-content .title .mx-hw-2 { color: #039d55 !important; }  /* Specialistul - verde brand */
html body .banner-section .banner-content .title .mx-hw-3 { color: #c98a05 !important; }  /* Livrarea     - auriu */

/* ==================== HERO: ritm unic de spatiere ====================
   Scara de 3 trepte, clar diferentiate, in loc de 14/18/26/14/22 aleator:
     tight (12px)  = in interiorul unui grup   -> intre cele 2 butoane
     step  (~16px) = intre titlu si subtitlu   -> sunt un singur bloc de text
     block (~30px) = intre grupuri             -> text | butoane | pastile   */

:root {
    --mx-hero-tight: 12px;
    --mx-hero-step:  clamp(16px, 3.4vw, 22px);
    --mx-hero-block: clamp(30px, 6vw, 44px);
    --mx-hero-gap:   var(--mx-hero-step);   /* alias pentru regulile de mai jos */
}

html body .banner-section .banner-content { text-align: center; }

/* titlu -> subtitlu : acelasi bloc de text, pas mic */
html body .banner-section .banner-content .title {
    margin-block: 0 var(--mx-hero-step) !important;
}
html body .banner-section .banner-content .text {
    margin-block: 0 !important;
    margin-inline: auto !important;
}
/* text -> butoane : pas de bloc */
html body .banner-content .v2 {
    margin-block-start: var(--mx-hero-block) !important;
}

/* logo-ul din hero: pe mobil e o repetare a celui din navbar (60px mai sus),
   asa ca il ascundem si lasam titlul sa respire; pe desktop ramane, centrat */
html body .banner-section .banner-content > img.w-100 {
    width: auto !important;
    max-width: 260px !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto var(--mx-hero-gap) !important;
}
@media (max-width: 767.98px) {
    html body .banner-section .banner-content > img.w-100 { display: none !important; }
}

/* butoanele hero: aceeasi latime si aceeasi inaltime, mereu */
html body .banner-content .v2-hero-ctas {
    display: grid !important;
    grid-template-columns: min(320px, 100%);
    justify-content: center !important;
    gap: var(--mx-hero-tight) !important;
    margin-block: 0 var(--mx-hero-block) !important;
}
html body .banner-content .v2-hero-ctas .v2-btn {
    width: 100% !important;
    min-height: 58px !important;
    padding: 0 24px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    margin: 0 !important;
}
@media (min-width: 768px) {
    html body .banner-content .v2-hero-ctas {
        grid-template-columns: repeat(2, 300px);
        gap: 16px !important;
    }
    html body .banner-content .v2-hero-ctas .v2-btn { min-height: 62px !important; }
}

html body .banner-content .v2-hero-flow { margin-block: 0 !important; }

/* ==================== PRIMUL ECRAN PE MOBIL ====================
   De la titlu pana la banda de statistici, inclusiv, totul incape
   intr-un singur ecran, fara scroll.

   Cheia: spatiile si marimile de font se leaga de INALTIMEA ecranului
   (unitatea svh = inaltimea vizibila cu bara de adresa afisata, adica
   exact ce vede omul la incarcare), nu de latime. Pe telefoane inalte
   totul respira; pe telefoane scunde se comprima singur, proportional.
   Spatiul ramas e impartit egal sus/jos de justify-content: center.   */

@media (max-width: 767.98px) {

    html body .mx-firstscreen {
        min-height: calc(100vh - 60px);          /* fallback browsere vechi */
        min-height: calc(100svh - 60px);
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    html body .mx-firstscreen > section { flex: 0 0 auto; }

    /* Scara de spatiere/tipografie, acum in functie de inaltimea ecranului.
       Declarata pe .mx-firstscreen, NU pe :root — asa se aplica doar in
       primul ecran; restul paginii isi pastreaza fonturile mari.        */
    html body .mx-firstscreen {
        --mx-hero-tight: clamp(8px,  1.3vh,  12px);
        --mx-hero-step:  clamp(9px,  1.9vh,  16px);
        --mx-hero-block: clamp(14px, 3.3vh,  30px);
        --mx-h1:         clamp(25px, 4.3vh,  34px);
        --mx-lead:       clamp(14px, 2.2vh,  19px);
    }
    @supports (height: 1svh) {
        html body .mx-firstscreen {
            --mx-hero-tight: clamp(8px,  1.3svh, 12px);
            --mx-hero-step:  clamp(9px,  1.9svh, 16px);
            --mx-hero-block: clamp(14px, 3.3svh, 30px);
            --mx-h1:         clamp(25px, 4.3svh, 34px);
            --mx-lead:       clamp(14px, 2.2svh, 19px);
        }
    }

    /* hero */
    html body .mx-firstscreen .banner-section { padding-block: 0 !important; }
    html body .mx-firstscreen .banner-section .banner-content {
        padding-block: clamp(6px, 1.6vh, 20px) !important;
        padding-block: clamp(6px, 1.6svh, 20px) !important;
    }
    html body .mx-firstscreen .v2-hero-ctas .v2-btn {
        min-height: clamp(46px, 6.6vh, 58px) !important;
        min-height: clamp(46px, 6.6svh, 58px) !important;
    }
    html body .mx-firstscreen .v2-hero-flow .f-step {
        padding-block: clamp(5px, 0.9vh, 8px) !important;
        padding-block: clamp(5px, 0.9svh, 8px) !important;
    }

    /* banda de statistici */
    html body .mx-firstscreen .mx-stats-section {
        padding-block: clamp(8px, 1.8vh, 28px) clamp(10px, 2vh, 40px) !important;
        padding-block: clamp(8px, 1.8svh, 28px) clamp(10px, 2svh, 40px) !important;
    }
    html body .mx-firstscreen .mx-stats-band {
        padding-block: clamp(4px, 0.8vh, 10px) !important;
        padding-block: clamp(4px, 0.8svh, 10px) !important;
    }
    html body .mx-firstscreen .mx-stats-band .mx-stat {
        padding-block: clamp(8px, 1.9vh, 20px) !important;
        padding-block: clamp(8px, 1.9svh, 20px) !important;
    }
    html body .mx-firstscreen .mx-stat-value {
        font-size: clamp(24px, 4vh, 34px) !important;
        font-size: clamp(24px, 4svh, 34px) !important;
    }
    html body .mx-firstscreen .mx-stat-value--text {
        font-size: clamp(18px, 2.9vh, 24px) !important;
        font-size: clamp(18px, 2.9svh, 24px) !important;
    }
    html body .mx-firstscreen .mx-stat-label {
        font-size: clamp(11.5px, 1.7vh, 13px) !important;
        font-size: clamp(11.5px, 1.7svh, 13px) !important;
    }
}

/* ==================== DISTRIBUIRE (sectiunea de recomandari) ==================== */

html body .refer-section .btn-grp button.cmn--btn {
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    font: inherit;
}
html body .refer-section .dropdown-menu.show .dropdown-item { cursor: pointer; }

/* mesajul de confirmare dupa copierea linkului */
.mx-share-toast {
    position: fixed;
    left: 50%;
    bottom: 26px;
    transform: translate(-50%, 20px);
    background: #0f2118;
    color: #fff;
    padding: 13px 22px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.35;
    text-align: center;
    max-width: min(92vw, 460px);
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.28);
    z-index: 99999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease, transform 0.22s ease;
}
.mx-share-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
/* eticheta nu trebuie sa mosteneasca .text-capitalize de la Bootstrap */
html body .refer-section .dropdown-menu.show .mx-copy-label { text-transform: none !important; }

/* pastila de copiere: tinta usor diferita, ca randul ei propriu sa para intentionat */
html body .refer-section .dropdown-menu.show [data-mx-share="copy"] {
    background: #f2faf5 !important;
    border-color: #cfe9da !important;
    padding-inline: 24px !important;
}