/* =========================================================
   ColorCompass Kleuranalyse
   Kleuren: #BC1B5D (primair) · #F9D7E5 (lichtroze) · Inter
   ========================================================= */

:root {
    --cc-rose:       #F9D7E5;
    --cc-rose-light: #fce8ef;
    --cc-rose-deep:  #BC1B5D;
    --cc-purple-mid: #9a1550;
    --cc-lilac:      #f0b8ce;
    --cc-lilac-pale: #fdf0f5;
    --cc-white:      #ffffff;
    --cc-text:       #1a1a1a;
    --cc-text-soft:  #555555;
    --cc-radius:     20px;
    --cc-radius-sm:  10px;
    --cc-shadow:     0 8px 40px rgba(188,27,93,.10);
}

/* ── Bescherm [hidden] tegen thema-overschrijvingen ───── */
/* Sommige thema's (bijv. Elementor) overschrijven de     */
/* browser-standaard [hidden]{display:none}. Dit voorkomt */
/* dat verborgen schermen zichtbaar worden.               */
#cc-kleuranalyse [hidden] {
    display: none !important;
}

/* ── Reduced-motion: pauzeer alle decoratieve animaties ── */
@media (prefers-reduced-motion: reduce) {
    #cc-kleuranalyse *,
    #cc-kleuranalyse *::before,
    #cc-kleuranalyse *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ── Vorige/Volgende-knoppen in wizard ─────────────────── */
.cc-wizard-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}
.cc-wizard-actions .cc-btn-primary {
    flex: 1 1 auto;
}
.cc-wizard-actions .cc-btn-ghost {
    flex: 0 0 auto;
}

/* ── Wrapper ──────────────────────────────────────────── */
.cc-wrap {
    font-family: 'Inter', sans-serif;
    max-width: 640px;
    margin: 0 auto;
    color: var(--cc-text);
}

/* ═══════════════════════════════════════════════════════
   WIZARD
   ═══════════════════════════════════════════════════════ */

/* ── Intro (stap 0) ───────────────────────────────────── */
.cc-intro-visual {
    background: var(--cc-rose);
    border-radius: var(--cc-radius) var(--cc-radius) 0 0;
    padding: 52px 20px 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 260px;
    position: relative;
    overflow: hidden;
}

.cc-intro-illustration {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.cc-intro-person {
    font-size: 6rem;
    line-height: 1;
}

.cc-intro-phone {
    font-size: 3rem;
    position: absolute;
    right: -24px;
    bottom: -8px;
    transform: rotate(15deg);
}

.cc-intro-spark {
    position: absolute;
    color: var(--cc-rose-deep);
    font-size: 1.2rem;
    animation: cc-twinkle 2s ease-in-out infinite;
}

.cc-spark-1 { top: -10px; right: -40px; animation-delay: 0s; }
.cc-spark-2 { top:  20px; right: -60px; animation-delay: .5s; font-size: .8rem; }
.cc-spark-3 { top: -20px; right: -20px; animation-delay: 1s; font-size: .6rem; }

@keyframes cc-twinkle {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: .4; transform: scale(.7); }
}

/* ── Tip stappen (1-5) ────────────────────────────────── */
.cc-tip-visual {
    border-radius: var(--cc-radius) var(--cc-radius) 0 0;
    min-height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
    position: relative;
    overflow: hidden;
}

.cc-tip-visual--dark .cc-tip-icon { color: #fff; }

.cc-tip-icon {
    font-size: 7rem;
    line-height: 1;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,.12));
    animation: cc-bob 3s ease-in-out infinite;
}

.cc-tip-icon-sub {
    font-size: 2.5rem;
    position: absolute;
    bottom: 24px;
    right: 32px;
    animation: cc-bob 3s ease-in-out infinite .8s;
}

@keyframes cc-bob {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-8px); }
}

/* Face ring (stap 5) */
.cc-face-ring {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    border: 4px dashed rgba(249,215,229,.5);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: cc-spin-slow 8s linear infinite;
    position: relative;
}

.cc-face-ring::before {
    content: '';
    position: absolute;
    inset: 10px;
    border-radius: 50%;
    border: 2px solid rgba(249,215,229,.25);
}

.cc-tip-icon--light {
    font-size: 5rem;
    animation: none;
}

@keyframes cc-spin-slow {
    to { transform: rotate(360deg); }
}

/* ── Gedeelde wizard card ─────────────────────────────── */
.cc-wizard-card {
    background: var(--cc-white);
    border-radius: 0 0 var(--cc-radius) var(--cc-radius);
    padding: 28px 32px 36px;
    box-shadow: var(--cc-shadow);
}

.cc-tip-card {
    border-top: none;
}

/* ── Progress dots ────────────────────────────────────── */
.cc-wizard-progress {
    display: flex;
    gap: 6px;
    justify-content: center;
    margin-bottom: 18px;
}

.cc-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #e8c4d2;
    transition: background .3s, transform .3s;
}

.cc-dot-active {
    background: var(--cc-rose-deep);
    transform: scale(1.25);
}

.cc-dot-done {
    background: var(--cc-rose-deep);
    opacity: .4;
}

/* ── Wizard tekst ─────────────────────────────────────── */
.cc-wizard-title {
    font-size: 1.6rem;
    font-weight: 700;
    text-align: center;
    color: var(--cc-rose-deep);
    margin: 0 0 10px;
    line-height: 1.3;
}

.cc-wizard-sub {
    text-align: center;
    color: var(--cc-text-soft);
    font-size: .95rem;
    line-height: 1.65;
    margin: 0 0 28px;
}

.cc-tip-label {
    font-size: .78rem;
    font-weight: 700;
    color: var(--cc-rose-deep);
    text-align: center;
    margin: 0 0 6px;
}

.cc-tip-title {
    font-size: 1.25rem;
    font-weight: 700;
    text-align: center;
    color: var(--cc-text);
    margin: 0 0 8px;
    line-height: 1.35;
}

.cc-tip-sub {
    font-size: .875rem;
    color: var(--cc-text-soft);
    text-align: center;
    line-height: 1.6;
    margin: 0 0 24px;
}

/* ═══════════════════════════════════════════════════════
   UPLOAD SCHERM
   ═══════════════════════════════════════════════════════ */

.cc-card {
    background: var(--cc-white);
    border-radius: var(--cc-radius);
    box-shadow: var(--cc-shadow);
    border: 1px solid #f5dde7;
    padding: 36px 32px 40px;
    position: relative;
    overflow: hidden;
}

.cc-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #fdf0f5 0%, #fff5f8 100%);
    opacity: .22;
    pointer-events: none;
}

.cc-card > * { position: relative; }

.cc-back-btn {
    background: none;
    border: none;
    color: var(--cc-rose-deep);
    font-family: inherit;
    font-size: .85rem;
    cursor: pointer;
    padding: 0;
    margin-bottom: 20px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 600;
}

.cc-logo {
    font-size: 2.5rem;
    text-align: center;
    margin-bottom: 8px;
    display: block;
    animation: cc-bob 3s ease-in-out infinite;
}

.cc-title {
    font-size: 1.6rem;
    font-weight: 700;
    text-align: center;
    margin: 0 0 8px;
    color: var(--cc-rose-deep);
}

.cc-subtitle {
    text-align: center;
    color: var(--cc-text-soft);
    font-size: .9rem;
    line-height: 1.6;
    margin: 0 0 24px;
}

/* ── Upload tips checklist ───────────────────────────── */
.cc-upload-tips {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 20px;
}

.cc-upload-tip {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: var(--cc-lilac-pale);
    border: 1px solid var(--cc-lilac);
    border-radius: var(--cc-radius-sm);
    padding: 12px 14px;
}

.cc-upload-tip-icon {
    font-size: 1.4rem;
    line-height: 1;
    flex-shrink: 0;
    margin-top: 1px;
}

.cc-upload-tip-title {
    font-size: .8rem;
    font-weight: 700;
    color: var(--cc-text);
    margin: 0 0 2px;
}

.cc-upload-tip-sub {
    font-size: .72rem;
    color: var(--cc-text-soft);
    margin: 0;
    line-height: 1.4;
}

@media (max-width: 420px) {
    .cc-upload-tips { grid-template-columns: 1fr; }
}

/* ── Dropzone met ovaal frame ─────────────────────────── */
.cc-dropzone {
    border: 2.5px dashed var(--cc-lilac);
    border-radius: var(--cc-radius);
    background: var(--cc-lilac-pale);
    cursor: pointer;
    transition: border-color .25s, background .25s;
    min-height: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-bottom: 16px;
    outline: none;
}

.cc-dropzone:hover,
.cc-dropzone:focus,
.cc-dropzone.cc-drag-over {
    border-color: var(--cc-rose-deep);
    background: #fce8ef;
}

.cc-face-oval-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 24px;
}

/* Decoratief ovaal gezichtsframe */
.cc-face-oval {
    position: absolute;
    width: 160px;
    height: 200px;
    border-radius: 50%;
    border: 2.5px dashed rgba(188,27,93,.2);
    pointer-events: none;
}

.cc-dropzone-inner {
    text-align: center;
    padding: 24px 20px;
    position: relative;
    z-index: 1;
}

.cc-dropzone-icon { font-size: 2.5rem; margin-bottom: 10px; }

.cc-dropzone-text {
    font-size: .95rem;
    color: var(--cc-text-soft);
    margin: 0 0 6px;
    line-height: 1.5;
}

.cc-dropzone-sub { font-style: italic; color: var(--cc-rose-deep); }
.cc-dropzone-hint { font-size: .78rem; color: #bbb; margin: 0; }

.cc-file-input {
    position: absolute;
    inset: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    /* z-index: 2 → boven cc-dropzone-inner (z-index: 1) zodat iOS
       de file input zelf ontvangt. iOS Safari blokkeert programmatisch
       .click() op file inputs, de input moet de tap direct ontvangen. */
    z-index: 2;
}

/* Preview */
.cc-preview-wrap {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: 16px;
    /* z-index: 3 → boven cc-file-input (z-index: 2) zodat de
       preview-afbeelding en ✕-knop bereikbaar blijven. */
    z-index: 3;
}

.cc-preview-img {
    max-height: 240px;
    max-width: 100%;
    border-radius: 14px;
    box-shadow: 0 2px 12px rgba(0,0,0,.12);
    object-fit: cover;
}

.cc-remove-btn {
    position: absolute;
    top: 8px;
    right: 16px;
    background: var(--cc-rose-deep);
    color: #fff;
    border: none;
    border-radius: 50%;
    width: 44px;
    height: 44px;
    font-size: 1rem;
    cursor: pointer;
    line-height: 44px;
    text-align: center;
    transition: background .2s;
}

.cc-remove-btn:hover { background: var(--cc-purple-mid); }

.cc-privacy {
    text-align: center;
    font-size: .78rem;
    color: var(--cc-text-soft);
    margin: 0 0 20px;
    font-style: italic;
}

/* ── Knoppen ──────────────────────────────────────────── */
.cc-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 14px 28px;
    border: none;
    border-radius: 30px;
    font-size: 1rem;
    font-family: inherit;
    font-weight: 700;
    cursor: pointer;
    transition: all .2s;
    letter-spacing: .3px;
}

.cc-btn-primary {
    background: var(--cc-rose-deep);
    color: #fff;
    box-shadow: 0 4px 20px rgba(188,27,93,.25);
}

.cc-btn-primary:hover:not(:disabled) {
    background: var(--cc-purple-mid);
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(188,27,93,.35);
}

.cc-btn-primary:disabled {
    opacity: .4;
    cursor: not-allowed;
}

.cc-btn-cta {
    background: linear-gradient(135deg, var(--cc-rose-deep) 0%, var(--cc-purple-mid) 100%);
    color: #fff;
    box-shadow: 0 6px 24px rgba(188,27,93,.30);
    font-size: 1.05rem;
    letter-spacing: .4px;
    text-decoration: none;
    margin-top: 32px;
    margin-bottom: 10px;
}
.cc-btn-cta:hover {
    opacity: .92;
    box-shadow: 0 8px 28px rgba(188,27,93,.40);
}

.cc-btn-secondary {
    background: transparent;
    color: var(--cc-rose-deep);
    border: 1.5px solid var(--cc-rose-deep);
    margin-top: 24px;
}

.cc-btn-secondary:hover {
    background: var(--cc-lilac-pale);
}

/* Ghost-knop: subtiele tweede CTA (bijv. "upload" op intro) */
.cc-btn-ghost {
    background: transparent;
    color: var(--cc-text-soft);
    border: 1.5px solid #ddd;
}

.cc-btn-ghost:hover {
    border-color: var(--cc-rose-deep);
    color: var(--cc-rose-deep);
    background: var(--cc-lilac-pale);
}

/* ── Error ────────────────────────────────────────────── */
.cc-error {
    background: #fff0f3;
    border: 1.5px solid #f8bbd0;
    border-radius: var(--cc-radius-sm);
    padding: 12px 16px;
    margin-top: 16px;
    color: #c62828;
    text-align: center;
    font-size: .88rem;
}

.cc-error p { margin: 0; }

/* ═══════════════════════════════════════════════════════
   CAMERA SCHERM
   ═══════════════════════════════════════════════════════ */

.cc-camera-card {
    border-radius: var(--cc-radius);
    overflow: hidden;
    background: #111;
    box-shadow: var(--cc-shadow);
    position: relative;
}

.cc-camera-back-btn {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 10;
    background: rgba(0,0,0,.45);
    border: none;
    color: #fff;
    font-family: inherit;
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
    padding: 6px 14px;
    border-radius: 20px;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.cc-camera-view {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    background: #222;
}

/* Video + captured canvas share same space */
.cc-camera-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Spiegel alleen bij frontcamera — via JS-klasse toggled */
.cc-camera-video.cc-mirror {
    transform: scaleX(-1);
}

/* Face oval overlay */
.cc-camera-oval {
    position: absolute;
    inset: 0;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cc-camera-oval::after {
    content: '';
    width: 58%;
    aspect-ratio: 3 / 4;
    border: 2.5px solid rgba(255,255,255,.75);
    border-radius: 50%;
    box-shadow: 0 0 0 9999px rgba(0,0,0,.20);
}

.cc-camera-hint {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0,0,0,.6));
    color: #fff;
    text-align: center;
    font-size: .8rem;
    font-weight: 600;
    padding: 36px 16px 10px;
    margin: 0;
    pointer-events: none;
}

/* Bottom bar */
.cc-camera-bottom {
    background: #1a1a1a;
    padding: 22px 24px 28px;
}

.cc-camera-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

/* Shutter button */
.cc-shutter-btn {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: #fff;
    border: 4px solid rgba(255,255,255,.35);
    outline: 3px solid rgba(255,255,255,.7);
    outline-offset: 3px;
    cursor: pointer;
    padding: 0;
    transition: transform .15s, background .15s;
    flex-shrink: 0;
}

.cc-shutter-btn:active {
    transform: scale(.88);
    background: #e8e8e8;
}

.cc-btn-link {
    background: none;
    border: none;
    color: rgba(255,255,255,.55);
    font-family: inherit;
    font-size: 1rem;
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
    text-underline-offset: 2px;
    letter-spacing: .2px;
}

.cc-btn-link:hover { color: rgba(255,255,255,.9); }

/* Post-capture actions */
.cc-capture-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cc-btn-retake {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px 28px;
    border-radius: 30px;
    font-size: .95rem;
    font-family: inherit;
    font-weight: 700;
    cursor: pointer;
    transition: all .2s;
    background: transparent;
    color: rgba(255,255,255,.8);
    border: 1.5px solid rgba(255,255,255,.3);
}

.cc-btn-retake:hover {
    border-color: rgba(255,255,255,.7);
    color: #fff;
}

/* ═══════════════════════════════════════════════════════
   ANALYSEREN SCHERM (FACE SCAN)
   ═══════════════════════════════════════════════════════ */

.cc-scan-wrap {
    position: relative;
    border-radius: var(--cc-radius);
    overflow: hidden;
    box-shadow: var(--cc-shadow);
    background: #111;
    aspect-ratio: 3 / 4;
    max-height: 76vh;
}

.cc-scan-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cc-scan-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.cc-scan-label-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0,.58);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 13px 20px 15px;
}

.cc-scan-label {
    color: #fff;
    text-align: center;
    font-size: .95rem;
    font-weight: 600;
    margin: 0;
    letter-spacing: .3px;
}

/* ── Scan foutmelding overlay ─────────────────────────── */
.cc-scan-error-overlay {
    /* Fixed zodat de overlay altijd volledig in beeld is,
       ook als de foto hoger is dan de viewport. */
    position: fixed;
    inset: 0;
    z-index: 400;
    background: rgba(0,0,0,.72);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.cc-scan-error-box {
    background: #fff;
    border-radius: var(--cc-radius);
    padding: 28px 24px 24px;
    text-align: center;
    max-width: 320px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
}

.cc-btn-proceed {
    margin-top: 10px;
    font-size: .82rem;
    opacity: .8;
}

/* Disclaimer banner op het resultaatscherm bij lage fotokwaliteit */
.cc-quality-warning {
    background: #fff8e1;
    border: 1px solid #f59e0b;
    border-radius: var(--cc-radius-sm);
    padding: 12px 16px;
    font-size: .82rem;
    color: #92400e;
    line-height: 1.5;
    margin-bottom: 20px;
    text-align: left;
}

.cc-scan-error-icon {
    font-size: 2.5rem;
    margin: 0 0 12px;
    line-height: 1;
}

.cc-scan-error-msg {
    font-size: .9rem;
    color: var(--cc-text);
    line-height: 1.6;
    margin: 0 0 20px;
}

/* ═══════════════════════════════════════════════════════
   RESULTAAT SCHERM
   ═══════════════════════════════════════════════════════ */

.cc-result-hero {
    text-align: center;
    padding-bottom: 24px;
    border-bottom: 1.5px solid var(--cc-lilac);
    margin-bottom: 28px;
}

.cc-season-badge {
    display: inline-block;
    background: var(--cc-rose-deep);
    color: #fff;
    border-radius: 50px;
    padding: 6px 20px;
    font-size: .75rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 14px;
    font-weight: 700;
}

.cc-season-title {
    font-size: 2rem;
    margin: 0 0 6px;
    color: var(--cc-rose-deep);
    font-weight: 700;
}

.cc-season-tone {
    color: var(--cc-text-soft);
    margin: 0 0 12px;
    font-style: italic;
}

.cc-kenmerken-badges {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 4px;
}

.cc-kenmerk-badge {
    display: inline-block;
    background: var(--cc-lilac-pale);
    border: 1.5px solid var(--cc-lilac);
    color: var(--cc-purple-mid);
    border-radius: 50px;
    padding: 4px 14px;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .5px;
}

.cc-result-body {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.cc-beschrijving {
    line-height: 1.75;
    color: var(--cc-text);
    font-size: 1rem;
    margin: 0;
    background: var(--cc-rose-light);
    border-radius: var(--cc-radius-sm);
    padding: 16px 20px;
}

.cc-section-title {
    font-size: .82rem;
    font-weight: 700;
    color: var(--cc-purple-mid);
    margin: 0 0 12px;
}

.cc-kenmerken {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cc-kenmerken li {
    background: var(--cc-lilac-pale);
    border: 1px solid var(--cc-lilac);
    padding: 8px 14px;
    border-radius: var(--cc-radius-sm);
    font-size: .9rem;
}

.cc-kenmerken li::before { content: '✦ '; color: var(--cc-rose-deep); }

.cc-paletten-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.cc-palet-label {
    font-size: .72rem;
    font-weight: 700;
    color: var(--cc-text-soft);
    margin: 0 0 10px;
}

.cc-palet-label--avoid { color: #c0392b; }

.cc-palet {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.cc-kleur-swatch {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.cc-kleur-circle {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2.5px solid rgba(255,255,255,.8);
    box-shadow: 0 2px 8px rgba(0,0,0,.12);
    transition: transform .2s;
}

.cc-kleur-circle:hover { transform: scale(1.15); }

.cc-kleur-naam {
    font-size: .62rem;
    color: var(--cc-text-soft);
    text-align: center;
    max-width: 50px;
    line-height: 1.2;
}

.cc-makeup {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.cc-makeup-item {
    background: var(--cc-rose-light);
    border-radius: var(--cc-radius-sm);
    padding: 12px 14px;
}

.cc-makeup-label {
    font-size: .68rem;
    font-weight: 700;
    color: var(--cc-purple-mid);
    margin: 0 0 4px;
}

.cc-makeup-value {
    font-size: .85rem;
    color: var(--cc-text);
    margin: 0;
    line-height: 1.4;
}

#cc-beroemde {
    background: var(--cc-lilac-pale);
    border-radius: var(--cc-radius-sm);
    padding: 12px 16px;
    font-size: .9rem;
    margin: 0;
}

/* ── Camera: sluiter-rij met flip-knop ───────────────── */
.cc-shutter-row {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: 0;
}

.cc-shutter-side {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cc-flip-btn {
    background: rgba(255,255,255,.15);
    border: none;
    border-radius: 50%;
    width: 46px;
    height: 46px;
    font-size: 1.2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s, transform .35s;
    flex-shrink: 0;
}

.cc-flip-btn:hover  { background: rgba(255,255,255,.25); }
.cc-flip-btn:active { transform: rotate(180deg); background: rgba(255,255,255,.3); }

/* ── Toestemmingsvinkje ───────────────────────────────── */
.cc-consent-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    background: var(--cc-lilac-pale);
    border: 1px solid var(--cc-lilac);
    border-radius: var(--cc-radius-sm);
    cursor: pointer;
    margin-bottom: 16px;
    font-size: .82rem;
    color: var(--cc-text-soft);
    line-height: 1.5;
    transition: border-color .2s;
}

.cc-consent-label:hover {
    border-color: var(--cc-rose-deep);
}

.cc-consent-input {
    width: 16px;
    height: 16px;
    accent-color: var(--cc-rose-deep);
    flex-shrink: 0;
    margin-top: 2px;
    cursor: pointer;
}

.cc-consent-text { flex: 1; }

/* ── Responsive ───────────────────────────────────────── */
@media (max-width: 480px) {
    .cc-wizard-card,
    .cc-card { padding: 24px 18px 32px; }
    .cc-tip-visual { min-height: 220px; }
    .cc-tip-icon { font-size: 5rem; }
    .cc-paletten-wrap,
    .cc-makeup { grid-template-columns: 1fr; }
    .cc-season-title { font-size: 1.6rem; }
}

/* ═══════════════════════════════════════════════════════
   TYPESET PASS — 2026-06-14
   Uniforme typeschaal, Poppins voor koppen, leesbaarheids-
   vloer op 14px. Cascade-override: regels hieronder winnen.
   ═══════════════════════════════════════════════════════ */

:root {
    --cc-font-heading: 'Poppins', sans-serif;
    --cc-font-body:    'Inter', sans-serif;

    /* Schaaltreden  (major third · ×1.25) */
    --cc-fs-xs:   0.75rem;    /* 12px — badge pill label         */
    --cc-fs-sm:   0.875rem;   /* 14px — captions, hints, meta    */
    --cc-fs-base: 1rem;       /* 16px — bodytekst, knoppen       */
    --cc-fs-md:   1.125rem;   /* 18px — kleine koppen, tip-titel */
    --cc-fs-lg:   1.5rem;     /* 24px — wizard-/kaart-kop        */
    --cc-fs-xl:   2rem;       /* 32px — seizoen-resultaat kop    */
}

/* ── Optische rendering ──────────────────────────────── */
.cc-wrap {
    font-optical-sizing: auto;
}

/* ── Poppins voor alle koppen ────────────────────────── */
.cc-wizard-title,
.cc-title,
.cc-tip-title,
.cc-season-title {
    font-family: var(--cc-font-heading);
    text-wrap: balance;
}

/* ── Kopgroottes (via schaaltoken) ──────────────────── */
.cc-wizard-title { font-size: var(--cc-fs-lg); }   /* 24px was 25.6px */
.cc-title        { font-size: var(--cc-fs-lg); }   /* 24px was 25.6px */
.cc-tip-title    { font-size: var(--cc-fs-md); }   /* 18px was 20px   */
.cc-season-title { font-size: var(--cc-fs-xl); }   /* 32px (ongewijzigd) */

/* ── Bodytekst: alles naar 16px ─────────────────────── */
.cc-wizard-sub,
.cc-subtitle,
.cc-dropzone-text,
.cc-scan-label,
.cc-scan-error-msg,
.cc-btn-retake {
    font-size: var(--cc-fs-base);
}

/* ── Secundaire labels: vloer naar 14px ─────────────── */
/* (was .72rem – .85rem, allemaal onder de a11y-drempel) */
.cc-tip-label,
.cc-upload-tip-title,
.cc-upload-tip-sub,
.cc-dropzone-hint,
.cc-back-btn,
.cc-camera-back-btn,
.cc-btn-proceed,
.cc-quality-warning,
.cc-error {
    font-size: var(--cc-fs-sm);
}

/* Regelafstand voor kleine bodytekst in tips-grid */
.cc-upload-tip-sub { line-height: 1.55; }

/* ── Knoppen: uniform 16px ───────────────────────────── */
.cc-btn-cta { font-size: var(--cc-fs-base); }

/* ── Specificiteitsfix: isoleer koppen van Elementor globale h1 ──
   Elementor zet site-breed h1 op 45px/700/cursief/zwart.
   Via #cc-kleuranalyse scope winnen widget-stijlen de cascade. */
#cc-kleuranalyse .cc-wizard-title,
#cc-kleuranalyse .cc-title {
    font-size: var(--cc-fs-lg);
    font-style: normal;
    color: var(--cc-rose-deep);
    line-height: 1.3;
}

/* ── Volledige Elementor-h1 reset voor widget koppen ────
   .elementor-kit-10 h1 stelt 10 properties in via vars.
   Elke property die hieronder niet staat valt terug naar
   Elementor. Specificity: ID(1)+class(1) > kit-class(1)+h1(1). */
#cc-kleuranalyse .cc-wizard-title,
#cc-kleuranalyse .cc-title {
    font-family:    var(--cc-font-heading);
    font-size:      var(--cc-fs-lg);
    font-weight:    700;
    font-style:     normal;
    color:          var(--cc-rose-deep);
    line-height:    1.3;
    letter-spacing: -0.02em;
    text-transform: none;
    text-decoration: none;
    word-spacing:   normal;
    text-wrap:      balance;
}


/* ═══════════════════════════════════════════════════════
   DELIGHT PASS — 2026-06-14
   Kleurpalet-rondjes in intro, confetti burst bij resultaat
   ═══════════════════════════════════════════════════════ */

/* ── Intro: kleurpalet-rondjes (vervangt emoji persoon+telefoon) ─── */
.cc-palette-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    position: relative;
    z-index: 1;
}

.cc-palette-circle {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    box-shadow: 0 6px 20px rgba(0,0,0,.12);
}

/* Vier kleurseizoen-tonen */
.cc-season-lente  { background: #E8A87C; }
.cc-season-zomer  { background: #BC1B5D; }
.cc-season-herfst { background: #C9804A; }
.cc-season-winter { background: #7B3B6A; }

/* Subtiele inlog-animatie: stagger per seizoen */
@keyframes cc-circle-in {
    from { transform: scale(0.6); opacity: 0; }
    to   { transform: scale(1);   opacity: 1; }
}
.cc-palette-circle {
    animation: cc-circle-in 0.5s cubic-bezier(0.2, 0.9, 0.4, 1) both;
}
.cc-season-lente  { animation-delay:   0ms; }
.cc-season-zomer  { animation-delay:  80ms; }
.cc-season-herfst { animation-delay: 160ms; }
.cc-season-winter { animation-delay: 240ms; }

@media (prefers-reduced-motion: reduce) {
    .cc-palette-circle { animation: none; }
}

/* Spark-posities iets aanpassen voor bredere grid */
.cc-spark-1 { top: -14px; right: -36px; }
.cc-spark-2 { top:  24px; right: -56px; font-size: .85rem; }
.cc-spark-3 { top: -24px; right: -18px; font-size: .65rem; }

/* ── Resultaat: confetti burst ───────────────────────────────────── */
.cc-result-hero {
    position: relative;
    overflow: visible;
}

.cc-confetti {
    position: absolute;
    top: 32px;
    left: 0;
    right: 0;
    height: 0;
    pointer-events: none;
    overflow: visible;
    z-index: 2;
}

.cc-confetti span {
    position: absolute;
    left: 50%;
    top: 0;
    border-radius: 50%;
    opacity: 0;
    will-change: transform, opacity;
}

/* 12 deeltjes — kleur, grootte en richting */
.cc-confetti span:nth-child(1)  { width:7px; height:7px; background:#BC1B5D; --dx:-80px; --dy:-75px; }
.cc-confetti span:nth-child(2)  { width:5px; height:5px; background:#f0b8ce; --dx: -5px; --dy:-95px; }
.cc-confetti span:nth-child(3)  { width:6px; height:6px; background:#9a1550; --dx: 80px; --dy:-75px; }
.cc-confetti span:nth-child(4)  { width:4px; height:4px; background:#BC1B5D; --dx: 92px; --dy: -8px; }
.cc-confetti span:nth-child(5)  { width:6px; height:6px; background:#f0b8ce; --dx: 78px; --dy: 55px; }
.cc-confetti span:nth-child(6)  { width:5px; height:5px; background:#9a1550; --dx:  0px; --dy: 80px; }
.cc-confetti span:nth-child(7)  { width:7px; height:7px; background:#BC1B5D; --dx:-78px; --dy: 55px; }
.cc-confetti span:nth-child(8)  { width:8px; height:8px; background:#F9D7E5; --dx:-92px; --dy: -8px; }
.cc-confetti span:nth-child(9)  { width:4px; height:4px; background:#BC1B5D; --dx:-52px; --dy:-86px; }
.cc-confetti span:nth-child(10) { width:5px; height:5px; background:#f0b8ce; --dx: 52px; --dy:-86px; }
.cc-confetti span:nth-child(11) { width:4px; height:4px; background:#9a1550; --dx: 62px; --dy: 44px; }
.cc-confetti span:nth-child(12) { width:6px; height:6px; background:#F9D7E5; --dx:-62px; --dy: 44px; }

@keyframes cc-burst {
    0%   { transform: translate(-50%, 0) scale(0); opacity: 1; }
    100% { transform: translate(calc(-50% + var(--dx)), var(--dy)) scale(1); opacity: 0; }
}

.cc-confetti--active span {
    animation: cc-burst 0.65s cubic-bezier(0.15, 0.9, 0.35, 1) both;
}

.cc-confetti--active span:nth-child(1)  { animation-delay:  0ms; }
.cc-confetti--active span:nth-child(2)  { animation-delay: 25ms; }
.cc-confetti--active span:nth-child(3)  { animation-delay: 10ms; }
.cc-confetti--active span:nth-child(4)  { animation-delay: 40ms; }
.cc-confetti--active span:nth-child(5)  { animation-delay: 20ms; }
.cc-confetti--active span:nth-child(6)  { animation-delay: 50ms; }
.cc-confetti--active span:nth-child(7)  { animation-delay: 15ms; }
.cc-confetti--active span:nth-child(8)  { animation-delay: 35ms; }
.cc-confetti--active span:nth-child(9)  { animation-delay: 45ms; }
.cc-confetti--active span:nth-child(10) { animation-delay: 30ms; }
.cc-confetti--active span:nth-child(11) { animation-delay: 55ms; }
.cc-confetti--active span:nth-child(12) { animation-delay: 60ms; }

@media (prefers-reduced-motion: reduce) {
    .cc-confetti--active span { animation: none; }
}

/* ═══════════════════════════════════════════════════════
   NAVIGATIE-OMKERING (aug 2026)
   Volgende bovenaan, Terug onderaan — in elke stap.
   ═══════════════════════════════════════════════════════ */

/* Wizard: knoppen onder elkaar, primaire actie eerst.
   De DOM-volgorde is al omgedraaid in upload-form.php, dus
   toetsenbord- en schermlezervolgorde lopen gelijk met beeld. */
#cc-kleuranalyse .cc-wizard-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
}
#cc-kleuranalyse .cc-wizard-actions .cc-btn-primary,
#cc-kleuranalyse .cc-wizard-actions .cc-btn-ghost {
    flex: 0 0 auto;
    width: 100%;
}

/* Uploadscherm: terugknop staat nu onder de analyseknop */
#cc-kleuranalyse .cc-back-btn {
    margin-top: 18px;
    margin-bottom: 0;
    justify-content: center;
    width: 100%;
    min-height: 44px;
}

/* Camerascherm: terugknop uit de overlay, onderaan de kaart */
#cc-kleuranalyse .cc-camera-back-btn {
    position: static;
    display: block;
    width: 100%;
    margin-top: 14px;
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    color: rgba(255,255,255,.85);
    min-height: 44px;
    border-radius: var(--cc-radius-sm);
}
#cc-kleuranalyse .cc-camera-back-btn:hover {
    color: #fff;
    background: rgba(255,255,255,.12);
}


/* === cc-restyle-2026-08: rustiger, minder roze, zwarte koppen === */
#cc-kleuranalyse .cc-title,
#cc-kleuranalyse .cc-wizard-title,
#cc-kleuranalyse .cc-season-title { color: #111 !important; }
#cc-kleuranalyse .cc-section-title { color: #111; letter-spacing: -0.01em; }

/* getekende iconen in plaats van emoji */
#cc-kleuranalyse .cc-upload-tip-icon svg,
#cc-kleuranalyse .cc-dropzone-icon svg { display: block; }
#cc-kleuranalyse .cc-upload-tip-icon {
    width: 34px; height: 34px; flex: 0 0 34px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%; background: #FFF3F7; color: #BC1B5D;
}
#cc-kleuranalyse .cc-upload-tip-icon svg { width: 19px; height: 19px; }
#cc-kleuranalyse .cc-dropzone-icon { color: #BC1B5D; margin-bottom: 6px; }
#cc-kleuranalyse .cc-dropzone-icon svg { width: 30px; height: 30px; margin: 0 auto; }

/* minder roze vlakken, meer rust */
#cc-kleuranalyse .cc-upload-tip {
    background: #fff; border: 1px solid #F0E2E9;
}
#cc-kleuranalyse .cc-dropzone-sub { font-style: normal; color: #6b6b6b; }
#cc-kleuranalyse .cc-privacy { color: #6b6b6b; font-style: normal; }

/* === cc-beelden-2026-08-15: echte foto's in de wizard-vlakken ======
   Beeldverhouding 5:4, zoals aangeleverd. De vlakken hadden een vaste
   min-height; die vervangen we door aspect-ratio zodat het beeld op elk
   schermformaat dezelfde uitsnede houdt en er geen sprong ontstaat
   tijdens het laden. De achtergrondkleur blijft eronder staan als
   opvulling zolang de foto nog niet binnen is. */
#cc-kleuranalyse .cc-intro-visual,
#cc-kleuranalyse .cc-tip-visual {
    aspect-ratio: 5 / 4;
    min-height: 0;
    padding: 0;
    display: block;
    overflow: hidden;
    border-radius: var(--cc-radius) var(--cc-radius) 0 0;
}
#cc-kleuranalyse .cc-visual-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* gezichten zitten in de bovenhelft; bij bijsnijden blijft het hoofd heel */
    object-position: center 32%;
    border-radius: inherit;
}

/* === cc-wizard-desktop-2026-08-15: twee kolommen op desktop ========
   Op mobiel klopt de 5:4-verhouding precies: beeld, kop en knoppen
   passen samen boven de vouw. Op desktop niet: daar is de kaart 640
   breed, dus wordt het beeld 512 hoog en vielen de knoppen eraf.
   Het beeld smaller snijden zou de 5:4 weggooien, dus zetten we de
   wizard op desktop naast elkaar: foto links, tekst rechts. De kaart
   wordt daarmee 940 breed en maar 376 hoog, en de verhouding blijft
   ongemoeid. Onder 900px verandert er niets. De breedte klemt mee met het
   venster, dus ook in een smal bureaubladvenster past hij. */
@media (min-width: 900px) {

    /* breekt uit de 640px van .cc-wrap, gecentreerd ongeacht de
       breedte van de Elementor-container eromheen */
    /* De kaart is naast elkaar maar 376 hoog, dus er mag wat meer lucht
       boven. De sectiepadding eromheen is 79px; hier komt 32 bij. */
    #cc-kleuranalyse { margin-top: 32px; }

    #cc-wizard {
        width: min(940px, calc(100vw - 48px));
        position: relative;
        left: 50%;
        transform: translateX(-50%);
    }

    #cc-kleuranalyse .cc-wizard-step {
        display: grid;
        /* minmax(0,...) zodat lange inhoud een kolom niet breder duwt */
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-items: stretch;
        border-radius: var(--cc-radius);
        overflow: hidden;
        box-shadow: var(--cc-shadow);
        background: var(--cc-white);
    }

    /* display:grid hierboven wint van [hidden], dus expliciet terugzetten */
    #cc-kleuranalyse .cc-wizard-step[hidden] { display: none; }

    #cc-kleuranalyse .cc-intro-visual,
    #cc-kleuranalyse .cc-tip-visual {
        aspect-ratio: auto;          /* de rijhoogte bepaalt het nu */
        min-height: 376px;           /* 5:4 op een halve kaart van 470 */
        border-radius: 0;
        position: relative;
    }

    #cc-kleuranalyse .cc-visual-img {
        position: absolute;
        inset: 0;
        border-radius: 0;
    }

    #cc-kleuranalyse .cc-wizard-card {
        border-radius: 0;
        box-shadow: none;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 34px 38px;
    }
}

/* === cc-scanfoto-2026-08-15: scanfoto vult zijn vak =================
   `.cc-scan-photo` (0,1,0) verloor van een themaregel `.elementor img`
   (0,1,1) die `height: auto` zet. Gevolg: een liggende foto werd in het
   staande 3:4-vak geletterboxt en liep de gezichtsscan over zwarte
   balken in plaats van over het gezicht. Twee klassen zijn genoeg om
   te winnen. Geldt ook voor liggende foto's die iemand zelf uploadt. */
.cc-scan-wrap img.cc-scan-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* === cc-assen-2026-08-15: de drie assen in de uitslag ===============
   Vervangt het kleurenpalet en de make-uptips. Een bolletje op een
   kale lijn is lastig te lezen, dus staat het woord er los naast en
   krijgt de balk een verloop dat de as zelf uitbeeldt. */
#cc-kleuranalyse .cc-section-sub {
    margin: -4px 0 18px;
    color: #6b6b6b;
    font-size: .95rem;
    line-height: 1.5;
}

#cc-kleuranalyse .cc-assen {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

#cc-kleuranalyse .cc-as-kop {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

#cc-kleuranalyse .cc-as-naam {
    font-family: var(--cc-font-heading);
    font-weight: 700;
    font-size: 1rem;
    color: #111;
}

#cc-kleuranalyse .cc-as-woord {
    font-size: .9rem;
    color: #BC1B5D;
    font-weight: 600;
    text-align: right;
}

#cc-kleuranalyse .cc-as-balk {
    position: relative;
    height: 10px;
    border-radius: 99px;
}

/* De verlopen beelden de as uit, niet de huisstijl. */
#cc-kleuranalyse .cc-as--hue    .cc-as-balk { background: linear-gradient(90deg, #E08A4F, #D9CFC6 46%, #C9D2DD 54%, #5B8FC7); }
#cc-kleuranalyse .cc-as--value  .cc-as-balk { background: linear-gradient(90deg, #F6EFE7, #C9BFB4, #8C837A, #2A2622); }
#cc-kleuranalyse .cc-as--chroma .cc-as-balk { background: linear-gradient(90deg, #C3B7B3, #C98FA6 55%, #BC1B5D); }

#cc-kleuranalyse .cc-as-punt {
    position: absolute;
    top: 50%;
    width: 20px;
    height: 20px;
    margin-left: -10px;      /* zelf centreren, translateX zou de left-% verrekenen */
    transform: translateY(-50%);
    border-radius: 50%;
    background: #fff;
    border: 3px solid #111;
    box-shadow: 0 2px 6px rgba(0,0,0,.18);
}

#cc-kleuranalyse .cc-as-uiteinden {
    display: flex;
    justify-content: space-between;
    margin-top: 7px;
    font-size: .78rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #8a8a8a;
}

/* ── Zelfde kleurseizoen als ─────────────────────────────────────── */
#cc-kleuranalyse .cc-beroemde {
    list-style: none;
    margin: 0;
    padding: 0;
    background: none;   /* een oudere lijstregel zette hier een roze vlak */
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

#cc-kleuranalyse .cc-beroemde li {
    background: #FFF3F7;
    border: 1px solid #F0E2E9;
    border-radius: 99px;
    padding: 8px 16px;
    font-size: .95rem;
    color: #111;
}

/* === cc-camerakaart-2026-08-16: camera en scan even groot ==========
   Het camerabeeld had geen maximumhoogte: 640 breed maal 3:4 werd 853
   hoog, plus 232 voor de onderbalk, en dan moest je op desktop scrollen
   om de sluiter te zien. De breedte wordt nu afgeleid van de beschikbare
   hoogte, zodat de hele kaart past. Het scanvak krijgt dezelfde breedte,
   zodat het beeld voor en na het maken van de foto even groot is. */
@media (min-width: 900px) {
    #cc-camera-screen .cc-camera-card,
    #cc-kleuranalyse .cc-scan-wrap {
        /* 232px is de onderbalk met sluiter en knoppen */
        width: min(100%, max(240px, calc((68vh - 232px) * 3 / 4)));
        margin-left: auto;
        margin-right: auto;
    }

    /* stond op 76vh; de breedte begrenst nu, dus 3:4 mag weer leidend zijn */
    #cc-kleuranalyse .cc-scan-wrap { max-height: none; }
}

/* Woord naast de balk staat niet meer in beeld (de balk spreekt voor zich);
   de regel blijft staan voor het geval hij terugkomt. */
#cc-kleuranalyse .cc-as-woord { display: none; }

/* Minder lucht tussen "Ontdek jouw kleurenpalet" en "Opnieuw analyseren".
   Stond op 24px doordat de bovenmarge van de tweede knop won. */
#cc-kleuranalyse .cc-btn-cta + .cc-btn-secondary { margin-top: 10px; }

/* Zichtbaar label bij testmodus. Alleen jij ziet dit, want het hangt aan
   de cookie cc_test. Zonder label vergeet je dat hij aanstaat. */
#cc-testlabel {
    position: fixed;
    left: 12px;
    bottom: 12px;
    z-index: 99999;
    background: #111;
    color: #fff;
    font: 600 12px/1.3 'Inter', sans-serif;
    padding: 8px 12px;
    border-radius: 8px;
    box-shadow: 0 4px 14px rgba(0,0,0,.25);
    pointer-events: none;
}

/* === cc-uitslag-restyle-2026-08-16 =================================
   De uitslag was één stapel roze doosjes: beschrijving in een vlak,
   elk kenmerk in een vlak, en de seizoensnaam, het belangrijkste van
   de hele pagina, was het kleinst. Nu andersom: de naam draagt, de rest
   is rustige tekst met haarlijnen ertussen. Eén accentkleur, spaarzaam. */

/* ── Hero ─────────────────────────────────────────────────────────── */
#cc-kleuranalyse .cc-result-hero {
    border-bottom: 1px solid #EFE6EA;
    padding-bottom: 30px;
    margin-bottom: 34px;
}

/* Was een gevulde knopvormige pil. Het is een categorielabel, geen knop. */
#cc-kleuranalyse .cc-season-badge {
    background: none;
    color: #9A8F94;
    padding: 0;
    font-size: .72rem;
    letter-spacing: .16em;
    margin-bottom: 12px;
}

#cc-kleuranalyse .cc-season-title {
    font-size: 2.75rem;
    line-height: 1.05;
    letter-spacing: -.02em;
    text-transform: none;
    margin: 0 0 12px;
}

#cc-kleuranalyse .cc-season-tone {
    font-style: normal;
    font-size: 1.05rem;
    color: #6B6B6B;
    margin: 0;
}

/* Stond er drie keer: als ondertoon, als badges en nu ook in de balkjes. */
#cc-kleuranalyse .cc-kenmerken-badges { display: none; }

/* ── Beschrijving: gewoon tekst ───────────────────────────────────── */
#cc-kleuranalyse .cc-beschrijving {
    background: none;
    padding: 0;
    font-size: 1.05rem;
    line-height: 1.75;
    color: #333;
    max-width: 46ch;
    margin: 0 auto;
}

/* ── Sectielabels ─────────────────────────────────────────────────── */
#cc-kleuranalyse .cc-section-title {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #9A8F94;
    margin: 0 0 14px;
}

#cc-kleuranalyse .cc-result-body .cc-section { margin-top: 38px; }

/* ── Kenmerken: haarlijnen in plaats van vlakken ──────────────────── */
#cc-kleuranalyse .cc-kenmerken { gap: 0; text-align: left; }

#cc-kleuranalyse .cc-kenmerken li {
    background: none;
    border: 0;
    border-top: 1px solid #EFE6EA;
    border-radius: 0;
    padding: 13px 2px;
    font-size: .98rem;
    line-height: 1.5;
}

#cc-kleuranalyse .cc-kenmerken li:last-child {
    border-bottom: 1px solid #EFE6EA;
}

/* Het sterretje las als versiering, niet als inhoud. */
#cc-kleuranalyse .cc-kenmerken li::before { content: none; }

/* ── Namen ────────────────────────────────────────────────────────── */
#cc-kleuranalyse .cc-beroemde li {
    background: #fff;
    border: 1px solid #EFE6EA;
    color: #333;
}

@media (min-width: 900px) {
    #cc-kleuranalyse .cc-result-card { padding: 40px 44px 44px; }
}

@media (max-width: 600px) {
    #cc-kleuranalyse .cc-season-title { font-size: 2rem; }
    #cc-kleuranalyse .cc-beschrijving { font-size: 1rem; }
}

/* === cc-uitslag-aansluiting-2026-08-16 =============================
   De uitslag zag er anders uit dan de rest van de site. De kaarten op
   de homepage zijn wit, radius 16, met een neutrale zachte schaduw en
   zonder rand; de uitslagkaart had radius 20, een roze randje van 1px
   en een roze schaduw. Nu gelijkgetrokken. */
#cc-kleuranalyse .cc-result-card {
    border: 0;
    border-radius: 16px;
    box-shadow: 0 6px 26px rgba(0, 0, 0, .07);
}

/* Sectiekoppen in de huisstijl: Poppins vet, net als de kaartkoppen op
   de homepage. De kleine grijze hoofdletters waren een eigen taaltje. */
#cc-kleuranalyse .cc-section-title {
    font-family: var(--cc-font-heading);
    font-size: 1.18rem;
    font-weight: 700;
    letter-spacing: -.01em;
    text-transform: none;
    color: #111;
    margin: 0 0 14px;
}

/* Op desktop mag de uitslag breder dan de 640 van de tool. Zelfde
   uitbreektruc als bij de wizard, want .cc-wrap zit vast op 640. */
@media (min-width: 900px) {
    #cc-result-screen {
        width: min(800px, calc(100vw - 48px));
        position: relative;
        left: 50%;
        transform: translateX(-50%);
    }
}

/* Kwaliteitswaarschuwing stond op standaard oranje (#F59E0B) en viel
   uit de toon. Nu een streep in de accentkleur op een lichte roze
   ondergrond: leest als "let op" zonder alarm te slaan. */
#cc-kleuranalyse .cc-quality-warning {
    background: #FFF6F9;
    border: 0;
    border-left: 3px solid #BC1B5D;
    border-radius: 0 10px 10px 0;
    color: #5A4A50;
    text-align: left;
    padding: 14px 18px;
    font-size: .95rem;
    line-height: 1.55;
}

/* === cc-typografie-2026-08-16 ======================================
   De seizoensnaam rendeerde in Inter 600 in plaats van Poppins 700:
   een Elementor-kitregel voor h2 (0,1,1) won van `.cc-season-title`
   (0,1,0). Alles hieronder staat daarom onder `#cc-kleuranalyse`
   (1,1,0), zodat de kit er niet meer tussen komt.

   Het systeem van de site, gemeten op de homepage:
     H1 hero  Poppins 700 cursief 45px zwart   (alleen de hero)
     H2       Poppins 700 34px zwart
     H3       Poppins 700 20px zwart
     body     Inter 400 16px zwart
     knop     Inter 600 16px                                      */

#cc-kleuranalyse .cc-season-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-style: normal;          /* cursief blijft voorbehouden aan de hero */
    font-size: 44px;
    color: #000;
}

#cc-kleuranalyse .cc-section-title {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 20px;             /* gelijk aan H3 */
    color: #000;
}

#cc-kleuranalyse .cc-as-naam {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 16px;
    color: #000;
}

#cc-kleuranalyse .cc-beschrijving,
#cc-kleuranalyse .cc-kenmerken li,
#cc-kleuranalyse .cc-beroemde li,
#cc-kleuranalyse .cc-section-sub {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 16px;
}

#cc-kleuranalyse .cc-beschrijving,
#cc-kleuranalyse .cc-kenmerken li,
#cc-kleuranalyse .cc-beroemde li { color: #000; }

/* Iets ruimer dan de 1.5 van de site: dit is een lopende alinea van
   drie zinnen, geen losse regel in een kaartje. */
#cc-kleuranalyse .cc-beschrijving { line-height: 1.6; }

#cc-kleuranalyse .cc-season-tone,
#cc-kleuranalyse .cc-season-badge,
#cc-kleuranalyse .cc-as-uiteinden {
    font-family: 'Inter', sans-serif;
}

#cc-kleuranalyse .cc-btn-cta,
#cc-kleuranalyse .cc-btn-secondary {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 16px;
}

@media (max-width: 600px) {
    #cc-kleuranalyse .cc-season-title { font-size: 32px; }
    #cc-kleuranalyse .cc-section-title { font-size: 18px; }
}

/* === cc-beroemde-foto-2026-08-16 ===================================
   Eén portret per seizoen, met de naam eronder zodat duidelijk is wie
   je ziet. De andere twee namen blijven tekst. Zonder foto-URL wordt
   het hele blokje overgeslagen, dus het kan gaandeweg gevuld worden. */
#cc-kleuranalyse .cc-beroemde-figuur {
    margin: 0 0 16px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

#cc-kleuranalyse .cc-beroemde-foto {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    object-fit: cover;
    object-position: center 25%;
    display: block;
}

#cc-kleuranalyse .cc-beroemde-figuur figcaption {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    color: #6B6B6B;
}

/* Titelkleur naar zwart, gelijk aan de koppen op de rest van de site.
   Een oudere regel zet #111 met !important, vandaar hier ook. */
#cc-kleuranalyse .cc-season-title { color: #000 !important; }