/*
 * Hair Company Professional - Hero
 *
 * De hero bestaat uit gewone Elementor-widgets (label, titel, checklist,
 * knoppen, cijfers) plus een module voor het beeldblok. Layout, breedte,
 * padding, kleuren, lettergroottes en het achtergrondverloop staan in
 * Elementor en horen daar thuis - de klant past ze daar aan.
 *
 * Dit bestand doet alleen wat Elementor-widgets zelf niet kunnen:
 *   - de pill-vorm om het label
 *   - het ronde vlak achter de vinkjes
 *   - de tweede knop die als tekstlink moet ogen
 *   - de scheidingsstreepjes tussen de cijfers
 *   - de zwevende badge en prijskaart op de foto
 *   - de sticky CTA-balk op mobiel
 *   - de mobiele volgorde (foto tussen titel en checklist)
 *
 * Elementor-element-id's van de hero: hcphrow (rij), hcphcopy (tekst),
 * hcphintro, hcphbody, hcphcta, hcphvis (beeld).
 */

.hcp-hero {
    --hcp-purple: #513582;
    --hcp-purple-dark: #3f295f;
    --hcp-pink: #CA718D;
    --hcp-blue: #4E649A;
    --hcp-blue-dark: #3f527e;
    --hcp-ink: #28203a;
    --hcp-ink-soft: #3a2f4d;
    --hcp-border: #eee3ee;
    --hcp-soft: #f2e9f5;
}

/* ---- Label boven de titel: pill-vorm ---- */
.hcp-hero-eyebrow .elementor-heading-title {
    display: inline-block;
    padding: 7px 14px;
    background: var(--hcp-soft);
    border-radius: 100px;
}

/* ---- Titel: het gekleurde deel ---- */
.hcp-hero-title .hcp-hero-accent {
    color: var(--hcp-pink);
}

/* ---- Checklist: rond vlak achter het vinkje ---- */
.hcp-hero-checklist .elementor-icon-list-icon {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--hcp-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.hcp-hero-checklist .elementor-icon-list-item {
    align-items: center;
}

/* ---- Knoppen ---- */
.hcp-hero-cta .hcp-hero-btn-wrap .elementor-button {
    border-radius: 8px;
    box-shadow: 0 12px 28px -10px rgba(81, 53, 130, 0.35);
}

.hcp-hero-cta .hcp-hero-btn-wrap .elementor-button:hover {
    background-color: var(--hcp-blue-dark);
}

/* De tweede knop moet als tekstlink ogen. */
.hcp-hero-cta .hcp-hero-link-wrap .elementor-button {
    background: none;
    border-radius: 0;
    border-bottom: 1px solid #cfc6da;
    box-shadow: none;
}

.hcp-hero-cta .hcp-hero-link-wrap .elementor-button:hover {
    background: none;
    color: var(--hcp-purple);
    border-bottom-color: var(--hcp-purple);
}

/* ---- Cijfers onderaan ---- */
.hcp-hero-trust .elementor-widget-container > p {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px;
    margin: 0;
    padding-top: 18px;
    border-top: 1px solid var(--hcp-border);
}

.hcp-hero-stat {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
}

.hcp-hero-num {
    font-size: 19px;
    font-weight: 800;
    color: var(--hcp-ink);
}

.hcp-hero-cap {
    font-size: 12px;
    font-weight: 600;
    color: #8a8194;
}

.hcp-hero-trust-divider {
    width: 1px;
    height: 26px;
    background: var(--hcp-border);
}

/* ================================================================
   Beeldblok: foto met zwevende badge en prijskaart
   Dit deel komt uit de module (shortcode [awcf_hcp_hero]).
   ================================================================ */
.hcp-hero-image {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 8px;
}

.hcp-hero-image img {
    display: block;
    width: 100%;
    max-width: 440px;
    border-radius: 12px;
    box-shadow: 0 20px 40px -16px rgba(40, 32, 58, 0.25);
}

.hcp-hero-image svg,
.hcp-hero-sticky-cta svg {
    flex-shrink: 0;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.hcp-hero-badge {
    position: absolute;
    top: 0;
    right: 14px;
    background: var(--hcp-ink, #28203a);
    color: #fff;
    border-radius: 100px;
    padding: 9px 16px;
    font-family: 'Poppins', system-ui, sans-serif;
    font-size: 12.5px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 7px;
    box-shadow: 0 10px 20px -8px rgba(0, 0, 0, 0.35);
    white-space: nowrap;
}

/* kses staat stroke-width niet toe als attribuut */
.hcp-hero-badge svg {
    stroke-width: 2.2;
}

.hcp-hero-badge-short {
    display: none;
}

.hcp-hero-price-card {
    position: absolute;
    left: -24px;
    bottom: -22px;
    width: 250px;
    background: #fff;
    border-radius: 14px;
    padding: 18px 18px 16px;
    box-shadow: 0 24px 48px -14px rgba(40, 32, 58, 0.35);
    border: 1px solid #f0ebf2;
    font-family: 'Poppins', system-ui, sans-serif;
}

.hcp-hero-pc-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.hcp-hero-pc-label {
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #8a8194;
}

.hcp-hero-pc-discount {
    font-size: 11px;
    font-weight: 800;
    color: #fff;
    background: var(--hcp-pink, #CA718D);
    padding: 3px 8px;
    border-radius: 100px;
}

.hcp-hero-pc-product {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--hcp-ink, #28203a);
    margin-bottom: 10px;
}

.hcp-hero-pc-old {
    font-size: 11px;
    color: #a89cb0;
    text-decoration: line-through;
}

.hcp-hero-pc-new {
    font-size: 19px;
    font-weight: 800;
    color: var(--hcp-purple, #513582);
}

.hcp-hero-pc-cap {
    font-size: 11px;
    font-weight: 600;
    color: #8a8194;
}

.hcp-hero-pc-note {
    font-size: 10px;
    color: #c2b9c9;
    margin-top: 8px;
}

/* ---- Sticky CTA-balk: alleen onder 1024px ---- */
.hcp-hero-sticky-cta {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    background: #fff;
    border-top: 1px solid #eee3ee;
    box-shadow: 0 -8px 20px -12px rgba(40, 32, 58, 0.25);
    font-family: 'Poppins', system-ui, sans-serif;
}

.hcp-hero-sticky-call {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #faf5fb;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e4dbe8;
}

.hcp-hero-sticky-call svg {
    stroke-width: 1.9;
}

.hcp-hero-sticky-register {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14.5px;
    font-weight: 700;
    padding: 14px 10px;
    border-radius: 8px;
    background: #4E649A;
    color: #fff;
    text-decoration: none;
    white-space: nowrap;
}

.hcp-hero-sticky-register:hover {
    background: #3f527e;
    color: #fff;
}

.hcp-hero-sticky-cta .hcp-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ================================================================
   MOBIEL / TABLET
   De foto hoort tussen de titel en de checklist te staan. Elementor
   stapelt de kolommen wel, maar kan de foto niet tussen twee widgets
   uit de andere kolom schuiven; vandaar display:contents + order.
   ================================================================ */
@media (max-width: 1024px) {
    .hcp-hero-copy {
        display: contents;
    }

    .hcp-hero-intro {
        order: 1;
    }

    .hcp-hero-visual {
        order: 2;
        margin-bottom: 20px;
    }

    .hcp-hero-body {
        order: 3;
    }

    .hcp-hero-image {
        display: block;
        padding-top: 0;
    }

    .hcp-hero-image img {
        max-width: none;
        box-shadow: 0 16px 32px -14px rgba(40, 32, 58, 0.25);
    }

    .hcp-hero-badge {
        top: 10px;
        right: 10px;
        padding: 7px 12px;
        font-size: 11px;
        gap: 6px;
        box-shadow: 0 8px 16px -6px rgba(0, 0, 0, 0.35);
    }

    .hcp-hero-badge svg {
        width: 12px;
        height: 12px;
        stroke-width: 2.4;
    }

    .hcp-hero-badge-long {
        display: none;
    }

    .hcp-hero-badge-short {
        display: inline;
    }

    /* De kaart valt onder de foto en overlapt hem net, zoals in de mockup. */
    .hcp-hero-price-card {
        position: relative;
        left: auto;
        bottom: auto;
        width: auto;
        margin: -26px 12px 0;
        padding: 16px 16px 14px;
        box-shadow: 0 20px 40px -16px rgba(40, 32, 58, 0.3);
    }

    .hcp-hero-checklist .elementor-icon-list-icon {
        width: 20px;
        height: 20px;
    }

    /* Knoppen onder elkaar en over de volle breedte. */
    .hcp-hero-cta .elementor-widget-button,
    .hcp-hero-cta .elementor-button {
        width: 100%;
    }

    .hcp-hero-cta .hcp-hero-link-wrap .elementor-button {
        width: auto;
        margin: 0 auto;
    }

    .hcp-hero-fine-print {
        text-align: center;
    }

    /* Cijfers gelijk verdeeld over de breedte. */
    .hcp-hero-trust .elementor-widget-container > p {
        justify-content: space-between;
        flex-wrap: nowrap;
        gap: 0;
    }

    .hcp-hero-stat {
        flex-direction: column;
        align-items: center;
        gap: 2px;
        flex: 1;
    }

    .hcp-hero-num {
        font-size: 16px;
    }

    .hcp-hero-cap {
        font-size: 10.5px;
        text-align: center;
    }

    .hcp-hero-trust-divider {
        height: auto;
        margin: 0 6px;
    }

    .hcp-hero-sticky-cta {
        display: flex;
    }

    /* Ruimte onderaan de pagina zodat de balk niets afdekt. */
    body:has(.hcp-hero-sticky-cta) {
        padding-bottom: 76px;
    }
}