/*
 * FelixChess — Multistep Subscription Component
 * BEM prefix : fc-ms__
 * Tokens     : --color-green, --color-gray-10…95, --radius-pill, --radius-card,
 *              --transition-time, --font-family-default
 *
 * IMPORTANT: [hidden] companions are declared wherever display:flex/grid is used
 * so the browser's native hidden attribute is never overridden.
 */

/* ═══════════════════════════════════════════════════════════════
   HIDDEN GUARD — must come first
   ═══════════════════════════════════════════════════════════════ */
.fc-ms__step[hidden],
.fc-ms__btn-spinner[hidden],
.fc-ms__field-error[hidden],
.fc-ms__server-error[hidden],
.fc-ms__success-content[hidden],
.fc-ms__password-strength[hidden] {
    display: none !important;
}

/* ═══════════════════════════════════════════════════════════════
   ROOT
   ═══════════════════════════════════════════════════════════════ */
.fc-ms {
    --ms-green:          var(--color-green, #a3e635);
    --ms-green-dim:      rgba(163, 230, 53, 0.12);
    --ms-green-mid:      rgba(163, 230, 53, 0.25);
    --ms-bg:             #202020;
    --ms-surface:        var(--color-gray-15, #1a1a1a);
    --ms-surface-raised: var(--color-gray-20, #222222);
    --ms-border:         var(--color-gray-25, #2e2e2e);
    --ms-text:           var(--color-gray-95, #f2f2f2);
    --ms-text-muted:     var(--color-gray-60, #999999);
    --ms-text-faint:     var(--color-gray-40, #666666);
    --ms-error:          #f87171;
    --ms-error-bg:       rgba(248, 113, 113, 0.08);
    --ms-radius-card:    var(--radius-card, 16px);
    --ms-radius-pill:    var(--radius-pill, 999px);
    --ms-radius-input:   10px;
    --ms-transition:     var(--transition-time, 200ms);
    --ms-font:           var(--font-family-default, 'Inter', sans-serif);

    font-family:     var(--ms-font);
    background:      #202020;
    color:           var(--ms-text);
    border-top:      1px solid rgba(255, 255, 255, 0.12);
    border-bottom:   1px solid rgba(255, 255, 255, 0.12);
    min-height:      100vh;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    padding:         40px 16px 80px;
    box-sizing:      border-box;
}

/* ═══════════════════════════════════════════════════════════════
   PROGRESS BAR
   ═══════════════════════════════════════════════════════════════ */
.fc-ms__progress {
    width:         100%;
    max-width:     560px;
    margin-bottom: 48px;
}

.fc-ms__progress-track {
    height:        3px;
    background:    var(--ms-border);
    border-radius: var(--ms-radius-pill);
    overflow:      hidden;
    margin-bottom: 16px;
}

.fc-ms__progress-fill {
    height:           100%;
    width:            20%; /* updated by JS: step/5 * 100% */
    background:       var(--ms-green);
    border-radius:    var(--ms-radius-pill);
    transition:       width 400ms cubic-bezier(0.4, 0, 0.2, 1);
}

.fc-ms__progress-steps {
    display:         flex;
    justify-content: space-between;
    list-style:      none;
    margin:          0;
    padding:         0;
}

.fc-ms__progress-step {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            6px;
    flex:           1;
}

.fc-ms__progress-dot {
    width:         10px;
    height:        10px;
    border-radius: 50%;
    background:    var(--ms-border);
    border:        2px solid var(--ms-border);
    transition:    background var(--ms-transition), border-color var(--ms-transition);
    display:       block;
}

.fc-ms__progress-label {
    font-size:      11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color:          var(--ms-text-faint);
    transition:     color var(--ms-transition);
}

/* active step */
.fc-ms__progress-step.is-active .fc-ms__progress-dot {
    background:   var(--ms-green);
    border-color: var(--ms-green);
    box-shadow:   0 0 0 3px var(--ms-green-dim);
}
.fc-ms__progress-step.is-active .fc-ms__progress-label {
    color: var(--ms-green);
}

/* completed step */
.fc-ms__progress-step.is-complete .fc-ms__progress-dot {
    background:   var(--ms-green);
    border-color: var(--ms-green);
}
.fc-ms__progress-step.is-complete .fc-ms__progress-label {
    color: var(--ms-text-muted);
}

/* ═══════════════════════════════════════════════════════════════
   STEPS CONTAINER & STEP
   ═══════════════════════════════════════════════════════════════ */
.fc-ms__steps {
    width:     100%;
    max-width: 560px;
}

.fc-ms__step {
    animation: fc-ms-fadein 260ms ease both;
}

@keyframes fc-ms-fadein {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ═══════════════════════════════════════════════════════════════
   STEP HEADER
   ═══════════════════════════════════════════════════════════════ */
.fc-ms__step-header {
    margin-bottom: 32px;
}

.fc-ms__step-eyebrow {
    font-size:      11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color:          var(--ms-green);
    margin:         0 0 8px;
    font-weight:    600;
}

.fc-ms__step-title {
    font-size:   28px;
    font-weight: 700;
    line-height: 1.2;
    margin:      0 0 8px;
    color:       var(--ms-text);
}

.fc-ms__step-subtitle {
    font-size:   15px;
    color:       var(--ms-text-muted);
    margin:      0;
    line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════════════
   PLAN CARDS (Step 1)
   ═══════════════════════════════════════════════════════════════ */
.fc-ms__plan-cards {
    display: flex;
    gap:     16px;
    margin-bottom: 32px;
}

/* hidden guard for flex container */
.fc-ms__plan-cards[hidden] { display: none !important; }

.fc-ms__plan-card {
    position:      relative;
    flex:          1;
    display:       flex;
    flex-direction:column;
    background:    var(--ms-surface);
    border:        1.5px solid var(--ms-border);
    border-radius: var(--ms-radius-card);
    padding:       24px;
    cursor:        pointer;
    transition:    border-color var(--ms-transition), box-shadow var(--ms-transition),
    background var(--ms-transition);
    user-select:   none;
}

.fc-ms__plan-card:hover {
    border-color: var(--ms-text-faint);
}

.fc-ms__plan-radio {
    position: absolute;
    opacity:  0;
    width:    0;
    height:   0;
}

/* selected state — JS adds .is-selected to the label */
.fc-ms__plan-card.is-selected {
    border-color: var(--ms-green);
    background:   var(--ms-green-dim);
    box-shadow:   0 0 0 1px var(--ms-green);
}

.fc-ms__plan-card--featured {
    border-color: var(--ms-green);
}

.fc-ms__plan-popular-badge {
    position:       absolute;
    top:            -13px;
    right:          16px;
    background:     var(--ms-green);
    color:          #0a0a0a;
    font-size:      10px;
    font-weight:    700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding:        3px 10px;
    border-radius:  var(--ms-radius-pill);
}

.fc-ms__plan-badge {
    display:        inline-flex;
    align-items:    center;
    font-size:      10px;
    font-weight:    700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding:        3px 10px;
    border-radius:  var(--ms-radius-pill);
    margin-bottom:  12px;
}

.fc-ms__plan-badge--free {
    background: var(--ms-border);
    color:      var(--ms-text-muted);
}

.fc-ms__plan-badge--pro {
    background: var(--ms-green-dim);
    color:      var(--ms-green);
    border:     1px solid var(--ms-green-mid);
}

.fc-ms__plan-name {
    font-size:     18px;
    font-weight:   700;
    margin:        0 0 4px;
    color:         var(--ms-text);
}

.fc-ms__plan-tagline {
    font-size:     13px;
    color:         var(--ms-text-muted);
    margin:        0 0 16px;
}

.fc-ms__plan-price {
    margin:      0 0 20px;
    line-height: 1;
}

.fc-ms__plan-price-amount {
    font-size:   32px;
    font-weight: 800;
    color:       var(--ms-text);
}

.fc-ms__plan-price-period {
    font-size:  14px;
    color:      var(--ms-text-muted);
    margin-left:4px;
}

.fc-ms__plan-features {
    list-style: none;
    margin:     0;
    padding:    0;
    display:    flex;
    flex-direction: column;
    gap:        8px;
}

.fc-ms__plan-feature {
    font-size:   13px;
    color:       var(--ms-text-muted);
    padding-left:18px;
    position:    relative;
    line-height: 1.4;
}

.fc-ms__plan-feature::before {
    content:    '●';
    position:   absolute;
    left:       0;
    color:      var(--ms-green);
    font-size:  8px;
    top:        3px;
}

.fc-ms__plan-check {
    display:      block;
    width:        20px;
    height:       20px;
    border-radius:50%;
    border:       2px solid var(--ms-border);
    position:     absolute;
    top:          20px;
    right:        20px;
    transition:   border-color var(--ms-transition), background var(--ms-transition);
    flex-shrink:  0;
}

.fc-ms__plan-card.is-selected .fc-ms__plan-check {
    border-color: var(--ms-green);
    background:   var(--ms-green);
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2 6l3 3 5-5' stroke='%230a0a0a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 12px;
}

/* ═══════════════════════════════════════════════════════════════
   FORM & FIELDS
   ═══════════════════════════════════════════════════════════════ */
.fc-ms__form {
    display:        flex;
    flex-direction: column;
    gap:            20px;
    margin-bottom:  28px;
}

.fc-ms__form[hidden] { display: none !important; }

.fc-ms__form-row--half {
    display: flex;
    gap:     16px;
}

.fc-ms__form-row--half[hidden] { display: none !important; }

.fc-ms__form-row--half .fc-ms__field {
    flex: 1;
}

.fc-ms__field {
    display:        flex;
    flex-direction: column;
    gap:            6px;
}

.fc-ms__field[hidden] { display: none !important; }

.fc-ms__label {
    font-size:   13px;
    font-weight: 600;
    color:       var(--ms-text-muted);
    letter-spacing: 0.02em;
}

.fc-ms__input-wrap {
    position: relative;
    display:  flex;
    align-items: center;
}

.fc-ms__input-wrap[hidden] { display: none !important; }

.fc-ms__input {
    width:            100%;
    background:       var(--ms-surface);
    border:           1.5px solid var(--ms-border);
    border-radius:    var(--ms-radius-input);
    color:            var(--ms-text);
    font-family:      var(--ms-font);
    font-size:        15px;
    padding:          11px 14px;
    outline:          none;
    box-sizing:       border-box;
    transition:       border-color var(--ms-transition), box-shadow var(--ms-transition);
    -webkit-appearance: none;
    appearance:       none;
}

/* input inside wrap gets padding-right for the toggle button */
.fc-ms__input-wrap .fc-ms__input {
    padding-right: 44px;
}

.fc-ms__input::placeholder {
    color: var(--ms-text-faint);
}

.fc-ms__input:focus {
    border-color: var(--ms-green);
    box-shadow:   0 0 0 3px var(--ms-green-dim);
}

.fc-ms__input.is-error {
    border-color: var(--ms-error);
    box-shadow:   0 0 0 3px rgba(248, 113, 113, 0.1);
}

.fc-ms__input.is-valid {
    border-color: var(--ms-green);
}

/* username availability states */
.fc-ms__input.is-checking {
    border-color: var(--ms-text-faint);
}

.fc-ms__input-toggle {
    position:   absolute;
    right:      12px;
    background: none;
    border:     none;
    padding:    4px;
    cursor:     pointer;
    color:      var(--ms-text-faint);
    line-height:1;
    transition: color var(--ms-transition);
}

.fc-ms__input-toggle:hover {
    color: var(--ms-text-muted);
}

.fc-ms__eye-icon {
    font-size: 16px;
}

.fc-ms__field-hint {
    font-size:   12px;
    color:       var(--ms-text-faint);
    line-height: 1.4;
}

.fc-ms__field-error {
    font-size:   12px;
    color:       var(--ms-error);
    font-weight: 500;
    line-height: 1.4;
}

/* username availability inline feedback */
.fc-ms__username-status {
    display:     flex;
    align-items: center;
    gap:         6px;
    font-size:   12px;
    font-weight: 500;
    margin-top:  2px;
}

.fc-ms__username-status[hidden] { display: none !important; }

.fc-ms__username-status--checking { color: var(--ms-text-faint); }
.fc-ms__username-status--available { color: var(--ms-green); }
.fc-ms__username-status--taken { color: var(--ms-error); }

/* ═══════════════════════════════════════════════════════════════
   PASSWORD STRENGTH METER
   ═══════════════════════════════════════════════════════════════ */
.fc-ms__password-strength {
    display:     flex;
    align-items: center;
    gap:         10px;
    margin-top:  2px;
}

.fc-ms__strength-bar {
    display: flex;
    gap:     4px;
    flex:    1;
}

.fc-ms__strength-segment {
    flex:          1;
    height:        3px;
    border-radius: var(--ms-radius-pill);
    background:    var(--ms-border);
    transition:    background var(--ms-transition);
    display:       block;
}

.fc-ms__strength-segment.is-filled-1 { background: #f87171; } /* weak */
.fc-ms__strength-segment.is-filled-2 { background: #fb923c; } /* fair */
.fc-ms__strength-segment.is-filled-3 { background: #facc15; } /* good */
.fc-ms__strength-segment.is-filled-4 { background: var(--ms-green); } /* strong */

.fc-ms__strength-label {
    font-size:  11px;
    font-weight:600;
    width:      44px;
    text-align: right;
    flex-shrink:0;
}

/* ═══════════════════════════════════════════════════════════════
   CHECKBOX
   ═══════════════════════════════════════════════════════════════ */
.fc-ms__field--checkbox {
    gap: 4px;
}

.fc-ms__checkbox-label {
    display:     flex;
    align-items: flex-start;
    gap:         12px;
    cursor:      pointer;
    line-height: 1.5;
}

.fc-ms__checkbox-label[hidden] { display: none !important; }

.fc-ms__checkbox {
    position: absolute;
    opacity:  0;
    width:    0;
    height:   0;
}

.fc-ms__checkbox-custom {
    width:        23px;
    height:       23px;
    border:       2px solid #8a8a8a;
    border-radius:6px;
    background:   #111711;
    flex-shrink:  0;
    margin-top:   1px;
    transition:   border-color var(--ms-transition), background var(--ms-transition),
                  box-shadow var(--ms-transition), opacity var(--ms-transition);
    position:     relative;
}

.fc-ms__checkbox:checked + .fc-ms__checkbox-custom {
    background:   var(--ms-green);
    border-color: var(--ms-green);
    box-shadow:   0 0 0 1px rgba(209, 255, 80, 0.2);
}

.fc-ms__checkbox:checked + .fc-ms__checkbox-custom::after {
    content:    '';
    position:   absolute;
    left:       7px;
    top:        3px;
    width:      6px;
    height:     12px;
    border:     3px solid #0a0a0a;
    border-top: none;
    border-left:none;
    transform:  rotate(40deg);
}

.fc-ms__checkbox:focus-visible + .fc-ms__checkbox-custom {
    box-shadow: 0 0 0 3px rgba(209, 255, 80, 0.28),
                0 0 0 5px rgba(10, 10, 10, 0.9);
}

.fc-ms__checkbox:disabled + .fc-ms__checkbox-custom {
    border-color: rgba(138, 138, 138, 0.55);
    background:   rgba(17, 23, 17, 0.65);
    opacity:      0.7;
}

.fc-ms__checkbox:disabled ~ .fc-ms__checkbox-text {
    opacity: 0.65;
}

.fc-ms__checkbox-text {
    font-size:   14px;
    color:       var(--ms-text-muted);
}

.fc-ms__link {
    color:           var(--ms-green);
    text-decoration: none;
    font-weight:     500;
}

.fc-ms__link:hover {
    text-decoration: underline;
}

/* ═══════════════════════════════════════════════════════════════
   SERVER ERROR BANNER
   ═══════════════════════════════════════════════════════════════ */
.fc-ms__server-error {
    display:       flex;
    align-items:   flex-start;
    gap:           10px;
    padding:       12px 14px;
    background:    var(--ms-error-bg);
    border:        1px solid rgba(248, 113, 113, 0.25);
    border-radius: var(--ms-radius-input);
    font-size:     14px;
    color:         var(--ms-error);
    line-height:   1.4;
}

.fc-ms__server-error-icon {
    flex-shrink: 0;
    font-size:   16px;
    margin-top:  1px;
}

/* ═══════════════════════════════════════════════════════════════
   OTP — EMAIL VERIFICATION (Step 3)
   ═══════════════════════════════════════════════════════════════ */
.fc-ms__form--otp {
    align-items: center;
}

.fc-ms__otp-group {
    display:     flex;
    align-items: center;
    gap:         8px;
    margin-bottom: 8px;
}

.fc-ms__otp-group[hidden] { display: none !important; }

.fc-ms__otp-digit {
    width:         48px;
    height:        60px;
    background:    var(--ms-surface);
    border:        1.5px solid var(--ms-border);
    border-radius: var(--ms-radius-input);
    color:         var(--ms-text);
    font-family:   var(--ms-font);
    font-size:     26px;
    font-weight:   700;
    text-align:    center;
    outline:       none;
    -webkit-appearance: none;
    appearance:    none;
    transition:    border-color var(--ms-transition), box-shadow var(--ms-transition);
    caret-color:   transparent;
}

.fc-ms__otp-digit:focus {
    border-color: var(--ms-green);
    box-shadow:   0 0 0 3px var(--ms-green-dim);
}

.fc-ms__otp-digit.is-filled {
    border-color: var(--ms-green);
    color:        var(--ms-green);
}

.fc-ms__otp-digit.is-error {
    border-color: var(--ms-error);
    box-shadow:   0 0 0 3px rgba(248, 113, 113, 0.1);
    animation:    fc-ms-shake 300ms ease;
}

.fc-ms__otp-sep {
    color:       var(--ms-text-faint);
    font-size:   20px;
    font-weight: 300;
    flex-shrink: 0;
}

@keyframes fc-ms-shake {
    0%, 100% { transform: translateX(0); }
    20%      { transform: translateX(-4px); }
    40%      { transform: translateX(4px); }
    60%      { transform: translateX(-3px); }
    80%      { transform: translateX(3px); }
}

.fc-ms__email-display {
    color:       var(--ms-green);
    font-weight: 600;
    font-style:  normal;
}

.fc-ms__otp-resend {
    display:     flex;
    align-items: center;
    gap:         6px;
    font-size:   13px;
    color:       var(--ms-text-faint);
    margin-bottom: 28px;
}

.fc-ms__otp-resend[hidden] { display: none !important; }

.fc-ms__btn-link {
    background:      none;
    border:          none;
    padding:         0;
    color:           var(--ms-green);
    font-size:       13px;
    font-family:     var(--ms-font);
    font-weight:     600;
    cursor:          pointer;
    text-decoration: underline;
    transition:      opacity var(--ms-transition);
}

.fc-ms__btn-link:disabled {
    color:           var(--ms-text-faint);
    text-decoration: none;
    cursor:          not-allowed;
    opacity:         0.6;
}

.fc-ms__otp-countdown {
    font-weight: 400;
    font-size:   12px;
}

/* ═══════════════════════════════════════════════════════════════
   ORDER SUMMARY (Step 4)
   ═══════════════════════════════════════════════════════════════ */
.fc-ms__order-summary {
    background:    var(--ms-surface);
    border:        1px solid var(--ms-border);
    border-radius: var(--ms-radius-card);
    padding:       16px 20px;
    margin-bottom: 24px;
    display:       flex;
    flex-direction:column;
    gap:           10px;
}

.fc-ms__order-summary[hidden] { display: none !important; }

.fc-ms__order-row {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    font-size:       14px;
    color:           var(--ms-text-muted);
}

.fc-ms__order-row[hidden] { display: none !important; }

.fc-ms__order-row--total {
    border-top:  1px solid var(--ms-border);
    padding-top: 10px;
    font-weight: 700;
    color:       var(--ms-text);
    font-size:   15px;
}

.fc-ms__order-value--total {
    color: var(--ms-green);
}

/* ═══════════════════════════════════════════════════════════════
   STRIPE MOUNT (Step 4)
   ═══════════════════════════════════════════════════════════════ */
.fc-ms__stripe-mount {
    background:    var(--ms-surface);
    border:        1.5px solid var(--ms-border);
    border-radius: var(--ms-radius-input);
    padding:       12px 14px;
    min-height:    44px;
    transition:    border-color var(--ms-transition), box-shadow var(--ms-transition);
}

.fc-ms__stripe-mount.is-focus {
    border-color: var(--ms-green);
    box-shadow:   0 0 0 3px var(--ms-green-dim);
}

.fc-ms__stripe-mount.is-error {
    border-color: var(--ms-error);
    box-shadow:   0 0 0 3px rgba(248, 113, 113, 0.1);
}

.fc-ms__stripe-trust {
    display:     flex;
    align-items: center;
    gap:         6px;
    font-size:   12px;
    color:       var(--ms-text-faint);
    margin-top:  10px;
}

.fc-ms__stripe-trust[hidden] { display: none !important; }

.fc-ms__payment-legal {
    font-size:   11px;
    color:       var(--ms-text-faint);
    text-align:  center;
    margin:      12px 0 0;
    line-height: 1.5;
}

.fc-ms__step-actions--payment {
    align-items: center;
}

.fc-ms__step-actions--payment .fc-ms__btn--full {
    flex: 1 1 260px;
    width: auto;
}

.fc-ms__payment-authorization {
    align-items: center;
    flex: 1 1 300px;
    max-width: 420px;
}

.fc-ms__payment-authorization .fc-ms__checkbox-text {
    color: var(--ms-text-muted);
    font-size: 13px;
    line-height: 1.45;
}

/* ═══════════════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════════════ */
.fc-ms__step-actions {
    display:         flex;
    align-items:     center;
    justify-content: flex-end;
    gap:             12px;
    padding-top:     4px;
}

.fc-ms__step-actions[hidden] { display: none !important; }

.fc-ms__step-actions--centered {
    justify-content: center;
}

.fc-ms__btn {
    display:         inline-flex;
    align-items:     center;
    gap:             8px;
    font-family:     var(--ms-font);
    font-size:       15px;
    font-weight:     600;
    padding:         12px 24px;
    border-radius:   var(--ms-radius-pill);
    border:          none;
    cursor:          pointer;
    text-decoration: none;
    white-space:     nowrap;
    transition:      background var(--ms-transition), color var(--ms-transition),
    opacity var(--ms-transition), box-shadow var(--ms-transition);
    -webkit-font-smoothing: antialiased;
    position:        relative;
    overflow:        hidden;
}

.fc-ms__btn[hidden] { display: none !important; }

.fc-ms__btn:disabled {
    opacity: 0.5;
    cursor:  not-allowed;
}

/* primary — lime green */
.fc-ms__btn--primary {
    background: var(--ms-green);
    color:      #0a0a0a;
}

.fc-ms__btn--primary:hover:not(:disabled) {
    background: #bef264;
    box-shadow: 0 4px 20px rgba(163, 230, 53, 0.25);
}

.fc-ms__btn--primary:active:not(:disabled) {
    background: #84cc16;
}

/* ghost — transparent outline */
.fc-ms__btn--ghost {
    background:   transparent;
    color:        var(--ms-text-muted);
    border:       1.5px solid var(--ms-border);
    padding:      11px 20px;
}

.fc-ms__btn--ghost:hover:not(:disabled) {
    border-color: var(--ms-text-faint);
    color:        var(--ms-text);
}

/* full width variant */
.fc-ms__btn--full {
    width:           100%;
    justify-content: center;
}

.fc-ms__btn-arrow {
    font-size:  16px;
    line-height:1;
}

/* spinner inside button */
.fc-ms__btn-spinner {
    width:        16px;
    height:       16px;
    border:       2px solid rgba(10, 10, 10, 0.25);
    border-top:   2px solid #0a0a0a;
    border-radius:50%;
    animation:    fc-ms-spin 600ms linear infinite;
    flex-shrink:  0;
    display:      block;
}

/* spinner inside ghost button */
.fc-ms__btn--ghost .fc-ms__btn-spinner {
    border-color:     rgba(255,255,255, 0.2);
    border-top-color: var(--ms-text-muted);
}

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

/* loading state — JS toggles .is-loading on the button */
.fc-ms__btn.is-loading .fc-ms__btn-label { opacity: 0; }
.fc-ms__btn.is-loading .fc-ms__btn-spinner { display: block; }

/* ═══════════════════════════════════════════════════════════════
   SUCCESS (Step 5)
   ═══════════════════════════════════════════════════════════════ */
.fc-ms__success {
    display:        flex;
    flex-direction: column;
    align-items:    center;
    text-align:     center;
    padding:        16px 0 8px;
    gap:            24px;
}

.fc-ms__success[hidden] { display: none !important; }

.fc-ms__success-icon {
    width:  80px;
    height: 80px;
    color:  var(--ms-green);
}

.fc-ms__success-svg {
    width:    100%;
    height:   100%;
    overflow: visible;
}

.fc-ms__success-circle {
    stroke-dasharray:   188.5;
    stroke-dashoffset:  188.5;
    animation:          fc-ms-draw-circle 600ms cubic-bezier(0.4, 0, 0.2, 1) 100ms forwards;
}

.fc-ms__success-tick {
    stroke-dasharray:   30;
    stroke-dashoffset:  30;
    animation:          fc-ms-draw-tick 400ms cubic-bezier(0.4, 0, 0.2, 1) 600ms forwards;
}

@keyframes fc-ms-draw-circle {
    to { stroke-dashoffset: 0; }
}

@keyframes fc-ms-draw-tick {
    to { stroke-dashoffset: 0; }
}

.fc-ms__success-title {
    font-size:   26px;
    font-weight: 800;
    margin:      0 0 8px;
    color:       var(--ms-text);
}

.fc-ms__success-body {
    font-size:   15px;
    color:       var(--ms-text-muted);
    margin:      0;
    line-height: 1.6;
    max-width:   380px;
}

.fc-ms__confirmation-card {
    width:         min(100%, 560px);
    margin:        20px auto 0;
    padding:       18px 20px;
    background:    var(--ms-surface);
    border:        1px solid var(--ms-border);
    border-radius: var(--ms-radius-card);
    text-align:    left;
}

.fc-ms__confirmation-list {
    display:        flex;
    flex-direction: column;
    gap:            0;
    margin:         0;
}

.fc-ms__confirmation-row {
    display:               grid;
    grid-template-columns: minmax(130px, 0.8fr) minmax(0, 1.2fr);
    gap:                   16px;
    padding:               10px 0;
    border-bottom:         1px solid var(--ms-border);
}

.fc-ms__confirmation-row[hidden] {
    display: none !important;
}

.fc-ms__confirmation-row:last-child {
    border-bottom: 0;
}

.fc-ms__confirmation-row dt {
    color:       var(--ms-text-faint);
    font-size:   12px;
    font-weight: 700;
    margin:      0;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.fc-ms__confirmation-row dd {
    color:       var(--ms-text);
    font-size:   14px;
    font-weight: 600;
    margin:      0;
    min-width:   0;
    overflow-wrap: anywhere;
}

.fc-ms__confirmation-id {
    color:       var(--ms-text-muted);
    font-family: var(--font-monospace, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace);
    font-size:   12px;
    font-weight: 500;
}

.fc-ms__confirmation-note {
    margin:      14px 0 0;
    color:       var(--ms-text-muted);
    font-size:   13px;
    line-height: 1.5;
}

.fc-ms__confirmation-note[hidden] {
    display: none !important;
}

.fc-ms__step-actions--col {
    flex-direction: column;
    align-items:    center;
}

.fc-ms__guest-link {
    font-size:       13px;
    color:           var(--ms-text-faint);
    text-decoration: none;
    font-family:     var(--ms-font);
    transition:      color var(--ms-transition);
    padding:         4px 0;
}

.fc-ms__guest-link:hover {
    color: var(--ms-text-muted);
}

.fc-ms__guest-link[hidden] { display: none !important; }

/* ═══════════════════════════════════════════════════════════════
   BILLING TOGGLE (Step 1)
   ═══════════════════════════════════════════════════════════════ */
.fc-ms__billing-toggle {
    display:          inline-flex;
    align-items:      center;
    background:       var(--ms-surface);
    border:           1.5px solid var(--ms-border);
    border-radius:    var(--ms-radius-pill);
    padding:          4px;
    margin-bottom:    28px;
    gap:              2px;
}

.fc-ms__billing-toggle[hidden] { display: none !important; }

.fc-ms__billing-btn {
    display:        inline-flex;
    align-items:    center;
    gap:            7px;
    font-family:    var(--ms-font);
    font-size:      14px;
    font-weight:    600;
    padding:        8px 18px;
    border-radius:  var(--ms-radius-pill);
    border:         none;
    cursor:         pointer;
    background:     transparent;
    color:          var(--ms-text-faint);
    transition:     background var(--ms-transition), color var(--ms-transition);
    white-space:    nowrap;
}

.fc-ms__billing-btn.is-active {
    background: var(--ms-green);
    color:      #0a0a0a;
}

.fc-ms__billing-btn:not(.is-active):hover {
    color: var(--ms-text-muted);
}

.fc-ms__billing-save-badge {
    font-size:      10px;
    font-weight:    700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background:     var(--ms-green-dim);
    color:          var(--ms-green);
    border:         1px solid var(--ms-green-mid);
    padding:        2px 7px;
    border-radius:  var(--ms-radius-pill);
    transition:     background var(--ms-transition), color var(--ms-transition);
}

/* When the yearly button is active the badge inverts */
.fc-ms__billing-btn.is-active .fc-ms__billing-save-badge {
    background: rgba(10, 10, 10, 0.2);
    color:      #0a0a0a;
    border-color: rgba(10, 10, 10, 0.15);
}

.fc-ms__plan-saving {
    font-size:   12px;
    color:       var(--ms-green);
    font-weight: 600;
    margin:      -12px 0 16px;
}

.fc-ms__plan-saving[hidden] { display: none !important; }

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 600px) {
    .fc-ms {
        padding: 24px 16px 60px;
    }

    .fc-ms__plan-cards {
        flex-direction: column;
    }

    .fc-ms__form-row--half {
        flex-direction: column;
        gap:            20px;
    }

    .fc-ms__step-title {
        font-size: 22px;
    }

    .fc-ms__otp-digit {
        width:    40px;
        height:   52px;
        font-size:22px;
    }

    .fc-ms__step-actions {
        flex-direction: column-reverse;
        align-items:    stretch;
    }

    .fc-ms__payment-authorization {
        max-width: none;
    }

    .fc-ms__confirmation-row {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .fc-ms__btn--ghost {
        text-align: center;
        justify-content: center;
    }
}

@media (max-width: 380px) {
    .fc-ms__otp-digit {
        width:    34px;
        height:   46px;
        font-size:20px;
    }

    .fc-ms__otp-sep {
        display: none;
    }
}