/* =============================================================
   Registration Tier Picker — /register/ (Phase 2a of Household Signup)
   Loads on top of register.css; only styles picker-unique elements.
   Uses design-system.css CSS variables throughout (ship rule 9a).
   ============================================================= */

/* Wrapper inside .register-panel--form (which is flex row).
   Acts as the single block-layout child so picker content stacks vertically. */
.tier-picker-content {
    width:              100%;
    max-width:          540px;
    display:            block;
}

/* Slash character in "How Do You RV / Work Camp?" and "Crew / Family" */
.tp-headline-slash,
.tp-card-slash {
    color:              var(--color-accent);
    font-weight:        var(--font-weight-extrabold);
    margin:             0 2px;
}

/* Three tier cards, stacked vertically */
.tier-cards {
    display:            grid;
    gap:                var(--space-3);
    margin-bottom:      var(--space-6);
}

.tier-card {
    display:            grid;
    grid-template-columns: 56px 1fr auto;
    gap:                var(--space-4);
    align-items:        center;
    padding:            var(--space-5);
    background:         var(--input-bg);
    border:             2px solid rgba(255,255,255,0.12);
    border-radius:      var(--radius-lg);
    text-decoration:    none;
    color:              inherit;
    transition:         border-color 0.2s ease,
                        background 0.2s ease,
                        transform 0.2s ease;
    position:           relative;
}

.tier-card:hover,
.tier-card:focus-visible {
    border-color:       rgba(232,172,37,0.5);
    background:         #112d47;
    transform:          translateY(-1px);
    outline:            none;
}

.tier-card:focus-visible {
    box-shadow:         0 0 0 3px rgba(232,172,37,0.3);
}

.tier-card__icon {
    width:              56px;
    height:             56px;
    background:         rgba(232,172,37,0.12);
    border:             1px solid rgba(232,172,37,0.3);
    border-radius:      var(--radius-lg);
    display:            flex;
    align-items:        center;
    justify-content:    center;
    font-size:          28px;
    flex-shrink:        0;
}

.tier-card__body {
    min-width:          0; /* allow flex child truncation */
}

.tier-card__name {
    font-size:          var(--font-size-lg);
    font-weight:        var(--font-weight-extrabold);
    color:              var(--color-text);
    margin-bottom:      2px;
}

.tier-card__tagline {
    color:              var(--color-accent);
    font-size:          var(--font-size-sm);
    font-weight:        var(--font-weight-semibold);
    margin-bottom:      6px;
}

.tier-card__best-for {
    color:              var(--color-text-muted);
    font-size:          var(--font-size-sm);
    line-height:        1.5;
}

.tier-card__arrow {
    color:              var(--color-accent);
    font-size:          22px;
    font-weight:        var(--font-weight-extrabold);
    flex-shrink:        0;
}

/* Trust strip below cards */
.tier-trust-strip {
    display:            grid;
    gap:                10px;
    padding:            var(--space-4) var(--space-5);
    background:         rgba(67,142,37,0.08);
    border:             1px solid rgba(67,142,37,0.3);
    border-radius:      var(--radius-md);
    margin-bottom:      var(--space-5);
}

.tier-trust-strip__item {
    display:            flex;
    gap:                10px;
    align-items:        flex-start;
    font-size:          var(--font-size-sm);
    color:              rgba(255,255,255,0.85);
    line-height:        1.5;
}

.tier-trust-strip__check {
    color:              var(--color-text-success);
    font-weight:        900;
    flex-shrink:        0;
}

/* Login link below trust strip */
.register-login-link {
    text-align:         center;
    color:              var(--color-text-muted);
    font-size:          var(--font-size-sm);
    margin-top:         var(--space-4);
}

.register-login-link a,
.register-login-link a:visited {
    color:              var(--color-accent);
    text-decoration:    none;
    font-weight:        var(--font-weight-semibold);
}

.register-login-link a:hover {
    text-decoration:    underline;
}

/* ── Mobile (≤ 480px) ─────────────────────────────────────── */
@media (max-width: 480px) {
    .tier-card {
        grid-template-columns: 46px 1fr 20px;
        gap:            var(--space-3);
        padding:        var(--space-4);
    }

    .tier-card__icon {
        width:          46px;
        height:         46px;
        font-size:      22px;
    }

    .tier-card__name {
        font-size:      var(--font-size-base);
    }

    .tier-card__tagline,
    .tier-card__best-for {
        font-size:      var(--font-size-xs);
    }

    .tier-trust-strip {
        padding:        var(--space-3) var(--space-4);
    }

    .tier-trust-strip__item {
        font-size:      var(--font-size-xs);
    }
}