/* =============================================================================
   Partner publieke pagina's (landing, aanmelden, login, wachtwoord, voorwaarden)
   Prefix: pp- (partner public). Geladen via index.php met filemtime cache-busting.
   Designtokens: var(--purple) #cdcbff, var(--darkpurple) #5753c0, var(--dark2),
   beige #F8F4F0. Diepte via font-weight, spacing en achtergrondkleur, geen shadows.
   ============================================================================= */

/* ── Basis ─────────────────────────────────────────────────────────────────── */

.pp-eyebrow {
    color: var(--purple);
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 1.6rem;
}

.pp-section-head {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 4rem;
}

.pp-section-head h2 {
    font-weight: 700;
    color: #03011f;
}

.pp-section-head p {
    color: #5d5766;
    font-size: 1.5rem;
    line-height: 1.7;
    margin-top: 1.4rem;
}

.pp-section-head.pp-on-dark h2 { color: #fff; }
.pp-section-head.pp-on-dark p  { color: rgba(255, 255, 255, 0.78); }

/* ── Knoppen (formulieren en ghost-variant op donker) ──────────────────────── */

.pp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.8rem;
    min-height: 5rem;
    padding: 0 3.4rem;
    border: 0;
    border-radius: 10rem;
    background: var(--purple);
    color: #03011f;
    font-family: inherit;
    font-size: 1.4rem;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}

.pp-btn:hover {
    background: #00034e;
    color: #fff;
}

.pp-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.pp-btn--block { width: 100%; }

.pp-btn--ghost {
    background: transparent;
    border: 0.15rem solid rgba(255, 255, 255, 0.45);
    color: #fff;
}

.pp-btn--ghost:hover {
    background: #fff;
    border-color: #fff;
    color: #03011f;
}

.pp-btn--outline {
    background: #fff;
    border: 0.1rem solid #c0c9d5;
    color: #03011f;
}

.pp-btn--outline:hover {
    background: #fff;
    border-color: #03011f;
    color: #03011f;
}

/* Zichtbare focus (WCAG 2.4.7) */
.pp-btn:focus-visible,
.pp-social-add:focus-visible,
.pp-social-remove:focus-visible,
.pp-pw-toggle:focus-visible {
    outline: 2px solid var(--darkpurple);
    outline-offset: 2px;
}

.pp-btn--ghost:focus-visible {
    outline-color: #fff;
}

/* ── Landing: hero ─────────────────────────────────────────────────────────── */

.pp-hero {
    background: var(--dark2);
}

.pp-hero-inner {
    padding: 13rem 0 6rem;
}

.pp-hero h1 {
    font-size: clamp(3rem, 5vw, 4.4rem);
    line-height: 1.12;
    color: #fff;
    font-weight: 700;
}

.pp-hero-sub {
    color: rgba(255, 255, 255, 0.8);
    max-width: 560px;
    font-size: 1.6rem;
    line-height: 1.8;
    margin-top: 2rem;
}

.pp-hero-cta {
    display: flex;
    gap: 1.2rem;
    flex-wrap: wrap;
    margin-top: 3.2rem;
}

.pp-hero-media img {
    width: 100%;
    max-height: 46rem;
    object-fit: cover;
    border-radius: 2rem;
    filter: none;
    display: block;
}

.pp-hero-note {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-top: 2rem;
    color: rgba(255, 255, 255, 0.65);
    font-size: 1.3rem;
    font-weight: 500;
}

.pp-hero-note .material-symbols-outlined {
    font-size: 1.8rem;
    color: var(--purple);
}

/* ── Landing: trust-indicatoren ────────────────────────────────────────────── */

.pp-trust {
    background: #fff;
    border-bottom: 0.1rem solid #ece9f6;
}

.pp-trust-inner {
    list-style: none;
    margin: 0;
    padding-left: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 1.6rem 4rem;
    padding: 2rem 0;
}

.pp-trust-item {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    font-size: 1.35rem;
    font-weight: 600;
    color: #03011f;
}

.pp-trust-item .material-symbols-outlined {
    color: var(--darkpurple);
    font-size: 2rem;
}

/* ── Landing: twee samenwerkingsvormen ─────────────────────────────────────── */

.pp-deal-bg {
    background: #F8F4F0;
}

.pp-deal-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    align-items: stretch;
}

.pp-deal-card {
    background: #fff;
    border: 0.1rem solid #e6e4f2;
    border-radius: 2rem;
    padding: 3.2rem 3rem;
    display: flex;
    flex-direction: column;
}

.pp-deal-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    align-self: flex-start;
    background: #f2f1ff;
    color: #01034f;
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.5rem 1.4rem;
    border-radius: 10rem;
    margin-bottom: 1.8rem;
}

.pp-deal-tag .material-symbols-outlined { font-size: 1.7rem; }

.pp-deal-card h3 {
    font-size: 2.2rem;
    font-weight: 700;
    color: #03011f;
    margin-bottom: 1rem;
}

.pp-deal-card > p {
    color: #4b4657;
    font-size: 1.45rem;
    line-height: 1.75;
    margin-bottom: 2rem;
}

.pp-deal-list {
    list-style: none;
    margin: 0 0 2.4rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.pp-deal-list li {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    font-size: 1.4rem;
    line-height: 1.6;
    color: #141013;
    font-weight: 500;
}

.pp-deal-list .material-symbols-outlined {
    font-size: 1.9rem;
    color: var(--darkpurple);
    flex-shrink: 0;
    margin-top: 0.1rem;
}

.pp-deal-foot {
    margin-top: auto;
    padding-top: 1.6rem;
    border-top: 0.1rem solid #f0eef8;
    font-size: 1.3rem;
    font-weight: 600;
    color: #5d5766;
}

/* ── Landing: wat krijg je ─────────────────────────────────────────────────── */

.pp-usp-bg { background: #fff; }

.pp-usp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.6rem;
}

.pp-usp-card {
    background: #f8f7ff;
    border: 0.1rem solid #e6e4f2;
    border-radius: 1.6rem;
    padding: 2.4rem 2.2rem;
}

.pp-usp-icon {
    width: 4.6rem;
    height: 4.6rem;
    border-radius: 1.2rem;
    background: #fff;
    border: 0.1rem solid #e0dfff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.4rem;
}

.pp-usp-icon .material-symbols-outlined {
    color: var(--darkpurple);
    font-size: 2.4rem;
}

.pp-usp-card h3 {
    font-size: 1.6rem;
    font-weight: 700;
    color: #03011f;
    margin-bottom: 0.6rem;
}

.pp-usp-card p {
    color: #5d5766;
    font-size: 1.35rem;
    line-height: 1.7;
    margin: 0;
}

/* ── Landing: stappen ──────────────────────────────────────────────────────── */

.pp-steps-bg { background: #F8F4F0; }

.pp-steps-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.6rem;
}

.pp-step-card {
    background: #fff;
    border: 0.1rem solid #e6e4f2;
    border-radius: 1.6rem;
    padding: 2.4rem 2.2rem;
}

.pp-step-nr {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.8rem;
    height: 3.8rem;
    border-radius: 50%;
    background: var(--purple);
    color: #03011f;
    font-weight: 700;
    font-size: 1.6rem;
    margin-bottom: 1.4rem;
}

.pp-step-card h3 {
    font-size: 1.6rem;
    font-weight: 700;
    color: #03011f;
    margin-bottom: 0.6rem;
}

.pp-step-card p {
    color: #5d5766;
    font-size: 1.35rem;
    line-height: 1.7;
    margin: 0;
}

/* ── Landing: doelgroepen ──────────────────────────────────────────────────── */

.pp-types-bg { background: #fff; }

.pp-types-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.6rem;
}

.pp-type-card {
    background: #f8f7ff;
    border: 0.1rem solid #e6e4f2;
    border-radius: 1.6rem;
    padding: 2.4rem 1.8rem;
    text-align: center;
}

.pp-type-card .material-symbols-outlined {
    font-size: 3rem;
    color: var(--darkpurple);
    display: block;
    margin: 0 auto 1rem;
}

.pp-type-card h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #03011f;
    margin-bottom: 0.4rem;
}

.pp-type-card p {
    font-size: 1.3rem;
    color: #5d5766;
    line-height: 1.6;
    margin: 0;
}

/* ── Landing: compliance-noot ──────────────────────────────────────────────── */

.pp-compliance {
    display: flex;
    align-items: flex-start;
    gap: 1.4rem;
    max-width: 760px;
    margin: 4rem auto 0;
    background: #f2f1ff;
    border: 0.1rem solid #dcd9f5;
    border-radius: 1.6rem;
    padding: 1.8rem 2rem;
    font-size: 1.35rem;
    line-height: 1.7;
    color: #141013;
}

.pp-compliance .material-symbols-outlined {
    color: var(--darkpurple);
    font-size: 2.2rem;
    flex-shrink: 0;
    margin-top: 0.1rem;
}

/* ── Landing: afsluitende CTA ──────────────────────────────────────────────── */

.pp-cta-bg { background: var(--dark2); }

.pp-cta-inner {
    max-width: 680px;
    margin: 0 auto;
    text-align: center;
}

.pp-cta-inner h2 {
    color: #fff;
    font-weight: 700;
}

.pp-cta-inner p {
    color: rgba(255, 255, 255, 0.78);
    font-size: 1.5rem;
    line-height: 1.8;
    margin: 1.6rem 0 3.2rem;
}

.pp-cta-btns {
    display: flex;
    gap: 1.2rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* ── Formulier-pagina's: kaart en velden ───────────────────────────────────── */

/* main heeft globaal al padding-top 11rem voor de vaste header; hier alleen de
   eigen sectie-ruimte, anders staat de titel onnodig ver naar beneden geduwd. */
.pp-form-section {
    background: #F8F4F0;
    min-height: 100vh;
    min-height: 100dvh;
    padding: 5rem 0 6rem;
}

.pp-card {
    background: #fff;
    border: 0.1rem solid #e6e4f2;
    border-radius: 2rem;
    padding: 4rem 3.6rem;
    max-width: 760px;
    margin: 0 auto;
}

.pp-form-head {
    text-align: center;
    margin-bottom: 3.2rem;
}

.pp-form-head h1 {
    font-size: 2.8rem;
    font-weight: 700;
    color: #03011f;
    margin-bottom: 0.8rem;
}

.pp-form-head p {
    color: #5d5766;
    font-size: 1.4rem;
    line-height: 1.7;
}

.pp-fieldset {
    border: 0;
    padding: 0;
    margin: 0 0 3rem;
    min-width: 0;
}

.pp-legend {
    display: block;
    width: 100%;
    font-size: 1.3rem;
    font-weight: 700;
    color: #5d5766;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding-bottom: 0.8rem;
    margin-bottom: 1.6rem;
    border-bottom: 0.1rem solid #f0eef8;
}

.pp-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.6rem;
    margin-bottom: 1.6rem;
}

.pp-field {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1.6rem;
}

.pp-grid-2 .pp-field { margin-bottom: 0; }

.pp-label {
    font-size: 1.3rem;
    font-weight: 600;
    color: #141013;
}

.pp-label.required::after {
    content: " *";
    color: #b02420;
}

.pp-input,
.pp-select,
.pp-textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 1.1rem 1.4rem;
    border: 0.1rem solid #c0c9d5;
    border-radius: 1.1rem;
    font-size: 1.4rem;
    color: #141013;
    font-family: inherit;
    background: #fff;
    transition: border-color 0.15s;
}

.pp-input:hover,
.pp-select:hover,
.pp-textarea:hover {
    border-color: #9ca3af;
}

.pp-input:focus,
.pp-select:focus,
.pp-textarea:focus {
    outline: none;
    border-color: var(--darkpurple);
    box-shadow: 0 0 0 0.3rem rgba(87, 83, 192, 0.25);
}

.pp-input[aria-invalid="true"],
.pp-input.error,
.pp-textarea.error {
    border-color: #b02420;
}

.pp-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%235d5766' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1.2rem center;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    padding-right: 3.6rem;
}

.pp-textarea {
    resize: vertical;
    min-height: 11rem;
}

.pp-hint {
    font-size: 1.2rem;
    color: #5d5766;
    line-height: 1.5;
}

/* Doorzoekbare behandeling-keuze (categorieen als koppen, waarde in hidden input) */
.pp-combo {
    position: relative;
}

.pp-combo__wrap {
    position: relative;
}

.pp-combo__input {
    padding-right: 3.6rem;
    cursor: text;
}

.pp-combo__chev {
    position: absolute;
    right: 1.2rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 2rem;
    color: #5d5766;
    pointer-events: none;
    transition: transform 0.15s;
}

.pp-combo.open .pp-combo__chev {
    transform: translateY(-50%) rotate(180deg);
}

.pp-combo__list {
    position: absolute;
    /* boven de vaste mobiele CTA-balk (z-index 99), anders zijn de onderste
       opties niet aanklikbaar op telefoon */
    z-index: 120;
    left: 0;
    right: 0;
    top: calc(100% + 0.4rem);
    max-height: 28rem;
    overflow-y: auto;
    margin: 0;
    padding: 0.5rem;
    list-style: none;
    background: #fff;
    border: 0.1rem solid #c0c9d5;
    border-radius: 1.1rem;
}

.pp-combo__groep {
    padding: 0.9rem 1.1rem 0.4rem;
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05rem;
    color: #5d5766;
}

.pp-combo__opt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem 1.1rem;
    border-radius: 0.8rem;
    font-size: 1.4rem;
    color: #141013;
    cursor: pointer;
}

.pp-combo__opt:hover,
.pp-combo__opt.is-hl {
    background: #f2f1ff;
}

.pp-combo__opt[aria-selected="true"] {
    background: #f2f1ff;
    font-weight: 700;
}

.pp-combo__opt--geen {
    color: #5d5766;
}

.pp-combo__prijs {
    font-weight: 700;
    color: var(--darkpurple);
    white-space: nowrap;
}

.pp-combo__leeg {
    padding: 1.1rem;
    font-size: 1.3rem;
    color: #5d5766;
}

.pp-field-error {
    font-size: 1.2rem;
    font-weight: 600;
    color: #b02420;
    display: none;
}

.pp-field-error.is-visible { display: block; }

/* ── Radio-kaarten (dealvorm), boekingsform-patroon ────────────────────────── */

.pp-choice-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.2rem;
    margin-bottom: 1.6rem;
}

.pp-choice {
    position: relative;
    display: block;
    margin: 0;
    border: 0.1rem solid #c0c9d5;
    border-radius: 1.4rem;
    padding: 2rem 4.6rem 1.8rem 1.8rem;
    background: #fff;
    cursor: pointer;
    text-align: left;
    transition: border-color 0.15s, background 0.15s;
}

.pp-choice:hover { border-color: #9ca3af; }

.pp-choice.active {
    border-color: #01034f;
    background: #f2f1ff;
}

.pp-choice:focus-within {
    outline: none;
    box-shadow: 0 0 0 0.3rem rgba(87, 83, 192, 0.35);
}

.pp-choice input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

/* Radio-indicator rechtsboven, identiek aan boekingsform */
.pp-choice::after {
    content: '';
    position: absolute;
    right: 1.6rem;
    top: 2rem;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    border: 0.2rem solid #c9c9d6;
    background: #fff;
    box-sizing: border-box;
    transition: border-color 0.15s, border-width 0.15s;
}

.pp-choice.active::after {
    border-color: #01034f;
    border-width: 0.6rem;
}

.pp-choice-icon {
    width: 4.2rem;
    height: 4.2rem;
    border-radius: 1.1rem;
    background: #f4f3fa;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.1rem;
    transition: background 0.15s;
}

.pp-choice.active .pp-choice-icon { background: #01034f; }

.pp-choice-icon .material-symbols-outlined {
    font-size: 2.2rem;
    color: var(--darkpurple);
    transition: color 0.15s;
}

.pp-choice.active .pp-choice-icon .material-symbols-outlined { color: #fff; }

.pp-choice-title {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: #03011f;
    margin-bottom: 0.4rem;
    line-height: 1.25;
}

.pp-choice-desc {
    display: block;
    font-size: 1.25rem;
    color: #5d5766;
    line-height: 1.5;
}

/* ── Social-kanalen builder ────────────────────────────────────────────────── */

.pp-social-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.8rem;
}

.pp-social-add {
    background: #f2f1ff;
    color: #01034f;
    border: 0.1rem solid #cdcbff;
    border-radius: 0.9rem;
    padding: 0.6rem 1.2rem;
    font-size: 1.25rem;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s;
}

.pp-social-add:hover { background: #e4e2ff; }

.pp-social-row {
    display: grid;
    grid-template-columns: 1fr 1.3fr 0.8fr auto;
    gap: 0.8rem;
    margin-bottom: 0.8rem;
    align-items: center;
}

.pp-social-row select,
.pp-social-row input {
    box-sizing: border-box;
    width: 100%;
    padding: 0.9rem 1.2rem;
    border: 0.1rem solid #c0c9d5;
    border-radius: 1rem;
    font-size: 1.35rem;
    color: #141013;
    font-family: inherit;
    background: #fff;
}

.pp-social-row select {
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='%235d5766' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    padding-right: 3rem;
    cursor: pointer;
}

.pp-social-row select:focus,
.pp-social-row input:focus {
    outline: none;
    border-color: var(--darkpurple);
    box-shadow: 0 0 0 0.3rem rgba(87, 83, 192, 0.25);
}

.pp-social-remove {
    width: 3.6rem;
    height: 3.6rem;
    background: #fff1f0;
    color: #b02420;
    border: 0.1rem solid #ffd1cf;
    border-radius: 0.9rem;
    font-size: 1.5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.15s;
}

.pp-social-remove:hover { background: #ffe1df; }

/* ── Akkoord-checkbox ──────────────────────────────────────────────────────── */

.pp-consent {
    margin-bottom: 2rem;
    display: flex;
    align-items: flex-start;
    gap: 1.2rem;
    background: #f8f7ff;
    border: 0.1rem solid #e6e4f2;
    border-radius: 1.2rem;
    padding: 1.6rem 1.8rem;
}

.pp-consent input[type="checkbox"] {
    width: 1.8rem;
    height: 1.8rem;
    flex-shrink: 0;
    margin-top: 0.2rem;
    accent-color: var(--darkpurple);
    cursor: pointer;
}

.pp-consent input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--darkpurple);
    outline-offset: 2px;
}

.pp-consent label {
    font-size: 1.3rem;
    color: #141013;
    line-height: 1.65;
    cursor: pointer;
}

.pp-consent label a {
    color: var(--darkpurple);
    font-weight: 600;
    text-decoration: underline;
}

/* ── Meldingen (bk-alert patroon) ──────────────────────────────────────────── */

.pp-alert {
    display: none;
    align-items: flex-start;
    gap: 0.9rem;
    margin: 0 0 1.6rem;
    padding: 1.3rem 1.5rem;
    border-radius: 1.2rem;
    font-size: 1.35rem;
    font-weight: 600;
    line-height: 1.5;
}

.pp-alert.is-visible { display: flex; }

.pp-alert--error {
    background: #fff1f0;
    border: 0.1rem solid #ffd1cf;
    color: #b02420;
}

.pp-alert--success {
    background: #e8f8ee;
    border: 0.1rem solid #b7e8c8;
    color: #0f5b2a;
}

.pp-alert .material-symbols-outlined {
    font-size: 1.9rem;
    flex-shrink: 0;
    margin-top: 0.05rem;
}

/* ── Succes-staat na aanmelden ─────────────────────────────────────────────── */

.pp-success {
    display: none;
    text-align: center;
    padding: 3rem 1rem;
}

.pp-success .material-symbols-outlined {
    font-size: 5.6rem;
    color: #0f5b2a;
    display: block;
    margin: 0 auto 1.6rem;
}

.pp-success h2 {
    font-size: 2.4rem;
    font-weight: 700;
    color: #03011f;
    margin-bottom: 1.2rem;
}

.pp-success p {
    font-size: 1.4rem;
    color: #4b4657;
    line-height: 1.8;
    max-width: 460px;
    margin: 0 auto;
}

.pp-success-btns {
    display: flex;
    justify-content: center;
    gap: 1.2rem;
    flex-wrap: wrap;
    margin-top: 2.8rem;
}

/* ── Auth-pagina's (login, wachtwoord vergeten/resetten) ───────────────────── */

.pp-auth-wrap {
    background: #F8F4F0;
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5rem 1.6rem 6rem;
}

.pp-auth-card {
    background: #fff;
    border: 0.1rem solid #e6e4f2;
    border-radius: 2rem;
    width: 100%;
    max-width: 460px;
    padding: 4rem 3.6rem;
    box-sizing: border-box;
}

.pp-auth-logo {
    text-align: center;
    margin-bottom: 2.4rem;
}

.pp-auth-logo img {
    height: 3rem;
    width: auto;
    filter: none;
}

.pp-auth-card h1 {
    font-size: 2.4rem;
    font-weight: 700;
    color: #03011f;
    text-align: center;
    margin-bottom: 0.8rem;
}

.pp-auth-sub {
    font-size: 1.35rem;
    color: #5d5766;
    text-align: center;
    line-height: 1.7;
    margin-bottom: 3rem;
}

.pp-auth-links {
    text-align: center;
    margin-top: 2.4rem;
    font-size: 1.3rem;
}

.pp-auth-links a {
    color: var(--darkpurple);
    font-weight: 600;
    text-decoration: none;
}

.pp-auth-links a:hover { text-decoration: underline; }

.pp-auth-links a:focus-visible {
    outline: 2px solid var(--darkpurple);
    outline-offset: 2px;
    border-radius: 3px;
}

.pp-auth-divider {
    color: #9ca3af;
    margin: 0 0.8rem;
}

/* Wachtwoord tonen/verbergen */
.pp-pw-wrap { position: relative; }

.pp-pw-wrap .pp-input { padding-right: 4.6rem; }

.pp-pw-toggle {
    position: absolute;
    right: 0.6rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: #5d5766;
    padding: 0.6rem;
    display: flex;
    align-items: center;
    border-radius: 0.8rem;
}

.pp-pw-toggle:hover { color: #03011f; }

/* Wachtwoord-sterkte indicator */
.pp-pw-strength {
    height: 0.4rem;
    border-radius: 0.2rem;
    background: #e5e7eb;
    margin-top: 0.6rem;
    overflow: hidden;
}

.pp-pw-strength-bar {
    height: 100%;
    border-radius: 0.2rem;
    transition: width 0.2s, background 0.2s;
    width: 0;
}

/* ── Voorwaarden ───────────────────────────────────────────────────────────── */

.pp-legal-hero {
    background: var(--dark2);
    padding: 5rem 0 5rem;
}

.pp-legal-hero h1 {
    color: #fff;
    font-size: clamp(2.4rem, 4vw, 3.4rem);
    font-weight: 700;
}

.pp-legal-hero p {
    color: rgba(255, 255, 255, 0.75);
    font-size: 1.5rem;
    margin-top: 1rem;
}

.pp-legal-body {
    background: #fff;
    padding: 6rem 0;
}

.pp-legal-inner {
    max-width: 780px;
    margin: 0 auto;
}

.pp-legal-update {
    font-size: 1.3rem;
    color: #5d5766;
    margin-bottom: 4rem;
}

.pp-legal-section { margin-bottom: 4rem; }

.pp-legal-section h2 {
    font-size: 2rem;
    font-weight: 700;
    color: #03011f;
    margin-bottom: 1.6rem;
    padding-bottom: 0.8rem;
    border-bottom: 0.2rem solid var(--purple);
}

.pp-legal-section h3 {
    font-size: 1.6rem;
    font-weight: 700;
    color: #03011f;
    margin: 2rem 0 0.8rem;
}

.pp-legal-section p {
    font-size: 1.4rem;
    color: #141013;
    line-height: 1.8;
    margin-bottom: 1.2rem;
}

.pp-legal-section ul {
    margin: 0 0 1.2rem 1.8rem;
    padding: 0;
}

.pp-legal-section li {
    font-size: 1.4rem;
    color: #141013;
    line-height: 1.8;
    margin-bottom: 0.5rem;
}

.pp-legal-section a {
    color: var(--darkpurple);
    font-weight: 600;
}

/* ── Responsive ────────────────────────────────────────────────────────────── */

@media (max-width: 991px) {
    .pp-hero-inner { padding: 12rem 0 5rem; }
    .pp-steps-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
    .pp-deal-grid { grid-template-columns: 1fr; }
    .pp-choice-grid { grid-template-columns: 1fr; }
    .pp-trust-inner { gap: 1.2rem 2.4rem; }
}

@media (max-width: 576px) {
    .pp-steps-grid { grid-template-columns: 1fr; }
    .pp-grid-2 { grid-template-columns: 1fr; }
    .pp-card { padding: 2.6rem 2rem; }
    .pp-auth-card { padding: 3rem 2rem; }
    .pp-form-section { padding: 3rem 0 4rem; }
    .pp-auth-wrap { padding: 3rem 1.6rem 4rem; }
    .pp-social-row { grid-template-columns: 1fr auto; }
    .pp-social-row select { grid-column: 1 / 3; }
    .pp-social-row input[type="number"] { grid-column: 1 / 2; }
}

/* Functionele animaties respecteren reduced motion (WCAG / Gloow-beleid) */
@media (prefers-reduced-motion: reduce) {
    .pp-btn,
    .pp-choice,
    .pp-input,
    .pp-select,
    .pp-textarea,
    .pp-pw-strength-bar {
        transition-duration: 0.01ms !important;
    }
}