/* =========================================
   Royal Marriage – Liefdestalen Test styles
   Plaats in: liefdestalen-test/style.css
========================================= */

/* Basispagina (haakt in op algemene RM-stijl) */
body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background-color: #f7f3ec;
    color: #4a3624;
}

/* =========================================
   HERO – in lijn met Redemptive Gifts Test
========================================= */

.ll-hero {
    background: linear-gradient(135deg, #1a2340, #4d3b73);
    color: #f8f0de;
    padding: 40px 20px 36px;
    text-align: center;
}

.ll-hero-inner {
    max-width: 900px;
    margin: 0 auto;
}

.ll-hero-crown {
    font-size: 2.2rem;
    margin-bottom: 10px;
}

.ll-hero-title {
    margin: 0;
    font-size: 2.4rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.ll-hero-subtitle {
    margin-top: 10px;
    font-size: 1rem;
    opacity: 0.95;
}

.ll-hero-tags {
    margin-top: 18px;
    display: inline-flex;
    flex-wrap: wrap;
    gap: 8px;
}

.ll-hero-tags span {
    font-size: 0.8rem;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid rgba(248, 240, 222, 0.45);
    background: rgba(0, 0, 0, 0.1);
}

/* =========================================
   WRAPPER / KAART
========================================= */

.rm-ll-wrapper {
    max-width: 900px;
    margin: 28px auto 40px;
    padding: 32px 22px 30px;
    background-color: #ffffff;
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
}

/* Badge bovenaan ("Liefdestalen Test") */
.rm-ll-badge {
    display: inline-block;
    padding: 10px 22px;
    border-radius: 999px;
    background: linear-gradient(135deg, #f7efe0, #e8d8b9);
    color: #5a3b1a;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    margin-bottom: 14px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* Titel en intro */
.rm-ll-title {
    margin: 0 0 8px;
    font-size: 1.8rem;
    color: #5a3b1a;
}

.rm-ll-intro {
    margin: 0 0 18px;
    color: #634531;
    max-width: 680px;
}

/* =========================================
   META-GEGEVENS FORMULIER
========================================= */

.rm-ll-form-meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 22px;
    margin-bottom: 18px;
}

.rm-ll-form-meta > div {
    display: flex;
    flex-direction: column;
}

.rm-ll-form-meta label {
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 4px;
    color: #5a3b1a;
}

.rm-ll-form-meta input,
.rm-ll-form-meta select {
    padding: 9px 10px;
    border-radius: 6px;
    border: 1px solid #d7c5a5;
    font-size: 0.95rem;
    color: #4a3624;
    background-color: #fff;
}

/* ONE COLUMN ON MOBILE */
@media (max-width: 768px) {
    .rm-ll-form-meta {
        grid-template-columns: 1fr;
    }
}

/* Privacyblok */
.rm-ll-privacy {
    margin: 12px 0 18px;
    padding: 10px 12px;
    border-radius: 10px;
    background: #f7efe0;
    border: 1px solid #e2d1ad;
}

/* =========================================
   VRAGEN & SCHAAL
========================================= */

.rm-ll-questions {
    margin-top: 8px;
}

.rm-ll-question {
    padding: 14px 10px 16px;
    border-bottom: 1px solid #f0e4d2;
}

.rm-ll-q-text {
    margin: 0 0 8px;
    font-weight: 500;
    color: #4a3624;
}

/* schaal – zowel single als couple */
.rm-ll-scale {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
    font-size: 0.9rem;
    margin-bottom: 4px;
}

.rm-ll-scale-label {
    font-weight: 600;
    color: #5a3b1a;
    margin-right: 4px;
}

.rm-ll-scale label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 7px;
    border-radius: 999px;
    background: #f8f2e5;
    cursor: pointer;
    font-size: 0.85rem;
}

.rm-ll-scale input[type="radio"] {
    accent-color: #c9a24b;
}

/* Op mobiel minder 'druk' */
@media (max-width: 600px) {
    .rm-ll-scale {
        flex-direction: column;
        align-items: flex-start;
    }

    .rm-ll-scale-label {
        margin-bottom: 4px;
    }
}

/* =========================================
   SUBMIT BUTTON
========================================= */

.rm-ll-submit {
    margin-top: 18px;
    text-align: center;
}

.rm-ll-btn {
    display: inline-block;
    padding: 11px 28px;
    border-radius: 999px;
    border: none;
    cursor: pointer;
    background: linear-gradient(135deg, #8b6c3a, #c9a24b);
    color: #ffffff;
    font-weight: 600;
    font-size: 0.98rem;
    text-decoration: none;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
}

.rm-ll-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.16);
}

/* =========================================
   RESULTATEN – BALKEN
========================================= */

.rm-ll-results-intro {
    margin-top: 4px;
    margin-bottom: 18px;
    color: #634531;
    max-width: 640px;
}

.rm-ll-bars {
    margin-top: 6px;
}

.rm-ll-bar-row {
    display: grid;
    grid-template-columns: 1.3fr 3fr auto;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.rm-ll-bar-label {
    font-size: 0.95rem;
    font-weight: 600;
    color: #5a3b1a;
}

.rm-ll-bar-track {
    position: relative;
    height: 14px;
    border-radius: 999px;
    background: #f0e4d2;
    overflow: hidden;
}

.rm-ll-bar-fill {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, #c9a24b, #8b6c3a);
}

.rm-ll-bar-percent {
    font-size: 0.9rem;
    font-weight: 600;
}

/* Couple-versie: twee kleuren in dezelfde track */
.rm-ll-bars-couple .rm-ll-bar-row {
    grid-template-columns: 1.4fr 3fr 2fr;
}

.rm-ll-bar-track-couple {
    position: relative;
}

.rm-ll-bar-fill-a {
    background: linear-gradient(90deg, #c9a24b, #8b6c3a);
    opacity: 0.9;
}

.rm-ll-bar-fill-b {
    background: linear-gradient(90deg, #7f6ce0, #b19cf5);
    opacity: 0.9;
}

/* Mobiel: stapel de kolommen */
@media (max-width: 700px) {
    .rm-ll-bar-row {
        grid-template-columns: 1fr;
        align-items: flex-start;
    }

    .rm-ll-bar-percent {
        text-align: left;
    }
}

/* =========================================
   OVERIGE KLEINE AANPASSINGEN
========================================= */

a {
    color: #c9a24b;
}

a:hover {
    color: #8b6c3a;
}