/**
 * Join Page — Three-Step Registration + Checkout Funnel
 * File: /wp-content/themes/wrestlerfinder/assets/css/join.css
 *
 * Design tokens only — no hardcoded values.
 * Dark mode default. Mobile first (390px).
 * Single column, centered, max-width 480px.
 *
 * @package WrestlerFinder
 */

/* =============================================================================
   Page shell
============================================================================= */

.wf-join-body {
    background: var(--color-bg);
    color:       var(--color-text);
    font-family: var(--font-body);
    min-height:  100vh;
    margin:      0;
}

/* =============================================================================
   Header
============================================================================= */

.wf-join-header {
    border-bottom: 1px solid var(--color-border-subtle);
    background:    var(--color-surface);
    padding:       var(--space-4) var(--space-6);
}

.wf-join-header__inner {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    max-width:       480px;
    margin-inline:   auto;
}

.wf-join-header__logo img {
    display: block;
}

.wf-join-header__logo-text {
    font-family:    var(--font-heading);
    font-size:      var(--text-xl);
    font-weight:    700;
    color:          var(--color-teal);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.wf-join-header__secure {
    display:     flex;
    align-items: center;
    gap:         var(--space-2);
    font-size:   var(--text-sm);
    color:       var(--color-text-muted);
}

/* =============================================================================
   Progress bar
============================================================================= */

.wf-join-progress {
    padding:       var(--space-6) var(--space-6) 0;
}

.wf-join-progress__inner {
    display:         flex;
    align-items:     center;
    justify-content: center;
    max-width:       480px;
    margin-inline:   auto;
    gap:             0;
}

.wf-join-progress__step {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            var(--space-1);
    flex-shrink:    0;
}

.wf-join-progress__num {
    width:           32px;
    height:          32px;
    border-radius:   var(--radius-full);
    background:      var(--color-surface-2);
    border:          2px solid var(--color-border);
    color:           var(--color-text-muted);
    font-size:       var(--text-sm);
    font-weight:     600;
    display:         flex;
    align-items:     center;
    justify-content: center;
    transition:      background var(--transition-base), border-color var(--transition-base), color var(--transition-base);
}

.wf-join-progress__label {
    font-size:   var(--text-xs);
    color:       var(--color-text-muted);
    font-weight: 500;
    transition:  color var(--transition-base);
}

.wf-join-progress__line {
    flex:             1;
    height:           2px;
    background:       var(--color-border);
    margin-bottom:    calc(var(--space-1) + var(--text-xs) + var(--space-1));
    margin-inline:    var(--space-2);
    transition:       background var(--transition-base);
    min-width:        var(--space-8);
}

/* Active step */
.wf-join-progress__step--active .wf-join-progress__num {
    background:   var(--color-teal);
    border-color: var(--color-teal);
    color:        var(--color-bg);
}

.wf-join-progress__step--active .wf-join-progress__label {
    color: var(--color-teal);
}

/* Completed step */
.wf-join-progress__step--done .wf-join-progress__num {
    background:   var(--color-teal-dim);
    border-color: var(--color-teal);
    color:        var(--color-teal);
}

.wf-join-progress__step--done .wf-join-progress__label {
    color: var(--color-text-muted);
}

.wf-join-progress__line--done {
    background: var(--color-teal);
}

/* =============================================================================
   Main layout
============================================================================= */

.wf-join-main {
    padding: var(--space-8) var(--space-6) var(--space-16);
}

.wf-join-wrap {
    max-width:     480px;
    margin-inline: auto;
}

/* =============================================================================
   Step containers — fade transition
============================================================================= */

.wf-join-step {
    opacity:    0;
    transition: opacity var(--transition-slow);
}

.wf-join-step--active {
    opacity: 1;
}

/* Steps that are hidden via JS have display:none via hidden attr — no transition needed */
.wf-join-step[hidden] {
    display: none;
}

/* =============================================================================
   Step headings
============================================================================= */

.wf-join-step__heading {
    font-family:    var(--font-heading);
    font-size:      var(--text-3xl);
    font-weight:    700;
    line-height:    1.1;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color:          var(--color-text);
    margin:         0 0 var(--space-2);
}

.wf-join-step__sub {
    font-size:   var(--text-base);
    color:       var(--color-text-muted);
    margin:      0 0 var(--space-8);
    line-height: 1.5;
}

/* =============================================================================
   Form layout
============================================================================= */

.wf-join-row {
    display:   flex;
    flex-direction: column;
    gap:       var(--space-4);
}

@media (min-width: 480px) {
    .wf-join-row--2col {
        flex-direction: row;
    }

    .wf-join-row--2col .wf-join-field {
        flex: 1;
    }
}

.wf-join-field {
    display:        flex;
    flex-direction: column;
    gap:            var(--space-2);
    margin-bottom:  var(--space-5);
}

.wf-join-label {
    font-size:   var(--text-sm);
    font-weight: 500;
    color:       var(--color-text-muted);
    display:     flex;
    align-items: baseline;
    gap:         var(--space-2);
}

.wf-join-label-hint {
    font-size:   var(--text-xs);
    font-weight: 400;
    color:       var(--color-text-subtle);
}

.wf-join-input,
.wf-join-select {
    width:            100%;
    padding:          var(--space-3) var(--space-4);
    background:       var(--color-surface-2);
    border:           1px solid var(--color-border);
    border-radius:    var(--radius-md);
    color:            var(--color-text);
    font-family:      var(--font-body);
    font-size:        var(--text-base);
    line-height:      1.5;
    box-sizing:       border-box;
    transition:       border-color var(--transition-fast), box-shadow var(--transition-fast);
    -webkit-appearance: none;
    appearance:       none;
}

.wf-join-input:focus,
.wf-join-select:focus {
    outline:     none;
    border-color: var(--color-teal);
    box-shadow:   0 0 0 3px var(--color-teal-dim);
}

.wf-join-input.wf-input--error,
.wf-join-select.wf-input--error {
    border-color: var(--color-error);
}

/* Custom select arrow */
.wf-join-select {
    background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238892A4' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat:   no-repeat;
    background-position: right var(--space-4) center;
    padding-right:       var(--space-10);
    cursor:              pointer;
}

.wf-join-select option {
    background: var(--color-surface-2);
    color:      var(--color-text);
}

/* Field-level inline error */
.wf-join-field-error {
    font-size:  var(--text-xs);
    color:      var(--color-error);
    min-height: var(--text-xs);
    line-height: 1.4;
}

/* Form-level error banner */
.wf-join-error {
    background:    rgba(255, 77, 106, 0.08);
    border:        1px solid rgba(255, 77, 106, 0.3);
    border-radius: var(--radius-md);
    color:         var(--color-error);
    font-size:     var(--text-sm);
    padding:       var(--space-3) var(--space-4);
    margin-bottom: var(--space-5);
    line-height:   1.5;
}

/* =============================================================================
   Fieldset (gender)
============================================================================= */

.wf-join-fieldset {
    border:     0;
    padding:    0;
    margin:     0 0 var(--space-5);
}

.wf-join-fieldset legend {
    font-size:     var(--text-sm);
    font-weight:   500;
    color:         var(--color-text-muted);
    margin-bottom: var(--space-3);
    float:         left;
    width:         100%;
}

/* =============================================================================
   Gender cards — large tap targets, teal border on selected
============================================================================= */

.wf-gender-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap:     var(--space-3);
    clear:   both;
}

.wf-gender-card {
    cursor:   pointer;
    position: relative;
}

.wf-gender-card input[type="radio"] {
    position: absolute;
    opacity:  0;
    width:    0;
    height:   0;
}

.wf-gender-card__inner {
    display:         flex;
    align-items:     center;
    justify-content: center;
    padding:         var(--space-5) var(--space-4);
    background:      var(--color-surface-2);
    border:          2px solid var(--color-border);
    border-radius:   var(--radius-lg);
    transition:      border-color var(--transition-fast), background var(--transition-fast), box-shadow var(--transition-fast);
    min-height:      72px;
}

.wf-gender-card__label {
    font-size:      var(--text-lg);
    font-weight:    600;
    color:          var(--color-text-muted);
    transition:     color var(--transition-fast);
    user-select:    none;
}

/* Hover */
.wf-gender-card:hover .wf-gender-card__inner {
    border-color: var(--color-teal-border);
    background:   var(--color-surface-3);
}

/* Selected */
.wf-gender-card input[type="radio"]:checked + .wf-gender-card__inner {
    border-color: var(--color-teal);
    background:   var(--color-teal-dim);
    box-shadow:   0 0 0 1px var(--color-teal);
}

.wf-gender-card input[type="radio"]:checked + .wf-gender-card__inner .wf-gender-card__label {
    color: var(--color-teal);
}

/* Focus-visible ring */
.wf-gender-card input[type="radio"]:focus-visible + .wf-gender-card__inner {
    outline:        2px solid var(--color-teal);
    outline-offset: 2px;
}

/* =============================================================================
   Submit button
============================================================================= */

.wf-join-btn {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             var(--space-2);
    width:           100%;
    padding:         var(--space-4) var(--space-6);
    background:      var(--color-teal);
    color:           var(--color-bg);
    border:          none;
    border-radius:   var(--radius-md);
    font-family:     var(--font-body);
    font-size:       var(--text-base);
    font-weight:     600;
    cursor:          pointer;
    transition:      background var(--transition-fast), opacity var(--transition-fast);
    margin-top:      var(--space-2);
}

.wf-join-btn:hover:not(:disabled) {
    background: var(--color-teal-hover);
}

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

.wf-spinner-icon {
    width:              18px;
    height:             18px;
    animation:          wf-spin 0.8s linear infinite;
    flex-shrink:        0;
}

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

/* =============================================================================
   Sign-in link
============================================================================= */

.wf-join-signin {
    text-align:  center;
    font-size:   var(--text-sm);
    color:       var(--color-text-muted);
    margin-top:  var(--space-6);
}

.wf-join-signin a {
    color:           var(--color-teal);
    text-decoration: none;
    font-weight:     500;
}

.wf-join-signin a:hover {
    text-decoration: underline;
}

/* =============================================================================
   Step 3 — Plan switcher + payment form
   (reuses .wf-plan-btn, .wf-checkout-form-card, etc. from checkout.css)
   These selectors add join-specific overrides only.
============================================================================= */

.wf-join-step--checkout .wf-plan-switcher {
    display:        flex;
    flex-wrap:      wrap;
    gap:            var(--space-3);
    margin-bottom:  var(--space-6);
}

.wf-join-step--checkout .wf-plan-btn {
    flex:           1;
    min-width:      120px;
    display:        flex;
    flex-direction: column;
    align-items:    flex-start;
    gap:            var(--space-1);
    padding:        var(--space-4);
    background:     var(--color-surface-2);
    border:         2px solid var(--color-border);
    border-radius:  var(--radius-md);
    cursor:         pointer;
    transition:     border-color var(--transition-fast), background var(--transition-fast);
    text-align:     left;
}

.wf-join-step--checkout .wf-plan-btn:hover {
    border-color: var(--color-teal-border);
}

.wf-join-step--checkout .wf-plan-btn--active {
    border-color: var(--color-teal);
    background:   var(--color-teal-dim);
}

.wf-join-step--checkout .wf-plan-btn__label {
    font-size:   var(--text-sm);
    font-weight: 600;
    color:       var(--color-text-muted);
}

.wf-join-step--checkout .wf-plan-btn--active .wf-plan-btn__label {
    color: var(--color-text);
}

.wf-join-step--checkout .wf-plan-btn__price {
    font-size:   var(--text-xl);
    font-weight: 700;
    color:       var(--color-text);
}

.wf-join-step--checkout .wf-plan-btn__interval {
    font-size:   var(--text-sm);
    font-weight: 400;
    color:       var(--color-text-muted);
}

.wf-join-step--checkout .wf-plan-btn__badge {
    font-size:     var(--text-xs);
    font-weight:   600;
    color:         var(--color-teal);
    background:    var(--color-teal-dim);
    border-radius: var(--radius-sm);
    padding:       2px var(--space-2);
    margin-top:    var(--space-1);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Founding Member card — gold border + gold badge, invite-only path.
   Hidden by default so there's no flash of gold content on first paint
   before initPlanSwitcher() runs. JS flips this to `display: flex` inline
   when foundingEligible === true. The rule must stay scoped to
   `.wf-join-step--checkout` so it matches the two-class specificity of
   `.wf-join-step--checkout .wf-plan-btn { display: flex }` above it —
   a bare `.wf-plan-btn--founding { display: none }` would be overridden. */
.wf-join-step--checkout .wf-plan-btn--founding {
    display:      none;
    border-color: var(--color-gold);
}

.wf-join-step--checkout .wf-plan-btn--founding:hover {
    border-color: var(--color-gold);
    filter: brightness(1.08);
}

.wf-join-step--checkout .wf-plan-btn--founding.wf-plan-btn--active {
    border-color: var(--color-gold);
    background:   rgba(227, 179, 65, 0.10);
}

.wf-join-step--checkout .wf-plan-btn__badge--gold {
    color:      var(--color-gold);
    background: rgba(227, 179, 65, 0.14);
}

/* Free card — muted, dashed, limitation list instead of features */
.wf-join-step--checkout .wf-plan-btn--free {
    opacity:      0.55;
    border-style: dashed;
    border-color: var(--color-border);
    background:   transparent;
}

.wf-join-step--checkout .wf-plan-btn--free:hover {
    opacity:      0.85;
    border-color: var(--color-text-muted);
    border-style: dashed;
}

.wf-join-step--checkout .wf-plan-btn--free.wf-plan-btn--active {
    opacity:      1;
    border-style: solid;
    border-color: var(--color-text-muted);
    background:   var(--color-surface-2);
}

.wf-join-step--checkout .wf-plan-btn--free .wf-plan-btn__label,
.wf-join-step--checkout .wf-plan-btn--free .wf-plan-btn__price,
.wf-join-step--checkout .wf-plan-btn--free .wf-plan-btn__interval {
    color: var(--color-text-muted);
}

.wf-join-step--checkout .wf-plan-btn__features {
    list-style: none;
    padding:    0;
    margin:     var(--space-2) 0 0;
    display:    flex;
    flex-direction: column;
    gap:        var(--space-1);
    font-size:  var(--text-xs);
    color:      var(--color-text-muted);
    line-height: 1.4;
}

.wf-join-step--checkout .wf-plan-btn__features li {
    position:     relative;
    padding-left: var(--space-4);
}

.wf-join-step--checkout .wf-plan-btn__features li::before {
    content:  '\2014'; /* em-dash */
    position: absolute;
    left:     0;
    top:      0;
    color:    var(--color-text-subtle);
}

/* Payment card */
.wf-join-step--checkout .wf-checkout-form-card {
    background:    var(--color-surface);
    border:        1px solid var(--color-border);
    border-radius: var(--radius-xl);
    padding:       var(--space-6);
}

/* Free plan mode — hide the Stripe-specific UI on the payment card.
   Keeps the submit button visible so the user can click "Start Free" and
   be redirected straight to the profile editor. See selectPlan() in join.js. */
.wf-join-step--checkout .wf-checkout-form-card--free #wf-join-express-section,
.wf-join-step--checkout .wf-checkout-form-card--free #wf-join-payment-element,
.wf-join-step--checkout .wf-checkout-form-card--free .wf-checkout-fine-print {
    display: none;
}

/* Loading skeleton */
.wf-payment-element-mount {
    min-height: 200px;
}

.wf-payment-skeleton {
    display:        flex;
    flex-direction: column;
    gap:            var(--space-3);
    padding:        var(--space-4) 0;
}

.wf-skeleton-row {
    height:        14px;
    background:    var(--color-surface-2);
    border-radius: var(--radius-sm);
    animation:     wf-pulse 1.5s ease-in-out infinite;
}

.wf-skeleton-row--short { width: 60%; }
.wf-skeleton-row--half  { width: 40%; }

@keyframes wf-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.45; }
}

/* Error */
.wf-join-step--checkout .wf-checkout-error {
    background:    rgba(255, 77, 106, 0.08);
    border:        1px solid rgba(255, 77, 106, 0.3);
    border-radius: var(--radius-md);
    color:         var(--color-error);
    font-size:     var(--text-sm);
    padding:       var(--space-3) var(--space-4);
    margin-top:    var(--space-4);
    line-height:   1.5;
}

/* Submit button inherits .wf-join-btn style via .wf-checkout-submit */
.wf-join-step--checkout .wf-checkout-submit {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             var(--space-2);
    width:           100%;
    padding:         var(--space-4) var(--space-6);
    background:      var(--color-teal);
    color:           var(--color-bg);
    border:          none;
    border-radius:   var(--radius-md);
    font-family:     var(--font-body);
    font-size:       var(--text-base);
    font-weight:     600;
    cursor:          pointer;
    margin-top:      var(--space-5);
    transition:      background var(--transition-fast), opacity var(--transition-fast);
}

.wf-join-step--checkout .wf-checkout-submit:hover:not(:disabled) {
    background: var(--color-teal-hover);
}

.wf-join-step--checkout .wf-checkout-submit:disabled {
    opacity: 0.55;
    cursor:  not-allowed;
}

/* Fine print */
.wf-checkout-fine-print {
    display:     flex;
    align-items: center;
    gap:         var(--space-2);
    font-size:   var(--text-xs);
    color:       var(--color-text-subtle);
    margin-top:  var(--space-4);
    line-height: 1.5;
}

/* Express checkout divider */
.wf-express-divider {
    display:     flex;
    align-items: center;
    gap:         var(--space-3);
    color:       var(--color-text-subtle);
    font-size:   var(--text-xs);
    margin:      var(--space-4) 0;
}

.wf-express-divider::before,
.wf-express-divider::after {
    content:    '';
    flex:       1;
    height:     1px;
    background: var(--color-border);
}

/* =============================================================================
   Light mode overrides
============================================================================= */

[data-theme="light"] .wf-join-input,
[data-theme="light"] .wf-join-select {
    background: var(--color-surface);
    border-color: var(--color-border);
    color:        var(--color-text);
}

[data-theme="light"] .wf-gender-card__inner {
    background:   var(--color-surface);
    border-color: var(--color-border);
}

[data-theme="light"] .wf-gender-card:hover .wf-gender-card__inner {
    background: var(--color-surface-2);
}

[data-theme="light"] .wf-join-step--checkout .wf-checkout-form-card {
    background:   var(--color-surface);
    border-color: var(--color-border);
}

[data-theme="light"] .wf-join-step--checkout .wf-plan-btn {
    background:   var(--color-surface);
    border-color: var(--color-border);
}

[data-theme="light"] .wf-skeleton-row {
    background: var(--color-surface-2);
}