/* =============================================================
   Registration Household Forms — /register/couple/ + /register/crew/
   Phase 2b-2c of Household Signup build.
   Loaded AFTER register.css; adds section headings + privacy note.
   Uses design-system CSS variables throughout (ship rule 9a).
   ============================================================= */

/* Section heading inside a household form — pairs Primary / Partner / Additional Adults */
.register-section-heading {
    margin-bottom:      var(--space-4);
}

.register-section-heading h3 {
    font-size:          var(--font-size-base);
    font-weight:        var(--font-weight-bold);
    color:              var(--color-accent);
    margin:             0;
    padding:            0;
    line-height:        1.3;
}

/* Divider variant: adds a subtle top rule for the second and subsequent sections */
.register-section-heading--divider {
    padding-top:        var(--space-5);
    margin-top:         var(--space-5);
    border-top:         1px solid rgba(255,255,255,0.08);
}

/* Additional-adults counter (Crew form) */
.register-section-heading__counter {
    color:              var(--color-text-muted);
    font-size:          var(--font-size-xs);
    font-weight:        var(--font-weight-bold);
    letter-spacing:     1px;
    text-transform:     uppercase;
    float:              right;
}

/* Privacy note callout — green/success tint, different from input bg */
.register-privacy-note {
    background:         rgba(67,142,37,0.08);
    border-left:        3px solid var(--color-text-success);
    padding:            var(--space-3) var(--space-4);
    border-radius:      var(--radius-md);
    margin-bottom:      var(--space-4);
    font-size:          var(--font-size-sm);
    line-height:        1.55;
    color:              rgba(255,255,255,0.85);
}

.register-privacy-note strong {
    color:              var(--color-text-success);
    font-weight:        var(--font-weight-bold);
}

/* Info-tip callout — blue/navy tint (Crew form: "add more from dashboard") */
.register-info-tip {
    background:         rgba(26, 82, 112, 0.25);
    border-left:        3px solid var(--color-primary);
    padding:            var(--space-3) var(--space-4);
    border-radius:      var(--radius-md);
    font-size:          var(--font-size-sm);
    line-height:        1.55;
    color:              rgba(255,255,255,0.85);
    display:            flex;
    gap:                var(--space-3);
    align-items:        flex-start;
    margin-top:         var(--space-3);
    margin-bottom:      var(--space-4);
}

.register-info-tip__icon {
    font-size:          var(--font-size-base);
    flex-shrink:        0;
    line-height:        1.4;
}

/* Adult row (Crew form) — visual separation for Adult 2 / Adult 3 blocks */
.register-adult-row {
    background:         rgba(255,255,255,0.03);
    border:             1px solid rgba(255,255,255,0.08);
    border-radius:      var(--radius-md);
    padding:            var(--space-3) var(--space-4);
    margin-bottom:      var(--space-3);
}

.register-adult-row__label {
    font-size:          var(--font-size-xs);
    font-weight:        var(--font-weight-bold);
    color:              var(--color-text-muted);
    letter-spacing:     1px;
    text-transform:     uppercase;
    margin-bottom:      var(--space-2);
}

/* Small form-label hint (e.g. "(optional)") */
.form-label__hint {
    color:              var(--color-text-muted);
    font-size:          var(--font-size-xs);
    font-weight:        var(--font-weight-semibold);
    margin-left:        var(--space-1);
}

/* Smart username suggestion chips (couple + crew forms) */
.register-username-suggestions {
    display:            flex;
    flex-wrap:          wrap;
    gap:                var(--space-2);
    margin-top:         var(--space-3);
}

.register-username-suggestions__label {
    width:              100%;
    color:              var(--color-text-muted);
    font-size:          var(--font-size-xs);
    text-transform:     uppercase;
    letter-spacing:     1px;
    margin-bottom:      var(--space-1);
    font-weight:        var(--font-weight-semibold);
}

.register-username-chip {
    background:         rgba(232, 172, 37, 0.10);
    border:             1px solid rgba(232, 172, 37, 0.35);
    color:              var(--color-accent);
    padding:            4px 10px;
    border-radius:      20px;
    font-family:        "SF Mono", Monaco, Consolas, monospace;
    font-size:          var(--font-size-xs);
    font-weight:        var(--font-weight-semibold);
    cursor:             pointer;
    transition:         background 0.15s ease, border-color 0.15s ease;
}

.register-username-chip:hover,
.register-username-chip:focus-visible {
    background:         rgba(232, 172, 37, 0.20);
    border-color:       var(--color-accent);
    outline:            none;
}