/* ============ REGISTER WIZARD ============ */

.register-wizard {
    width: 100%;
}

/* --- Progress bar --- */
.wizard-progress {
    margin-bottom: 2rem;
}
.wizard-progress-bar {
    position: relative;
    height: 4px;
    background: #e9ecef;
    border-radius: 999px;
    overflow: hidden;
}
.wizard-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #ff5e62, #ff9966);
    transition: width .35s ease;
}
.wizard-progress-steps {
    display: flex;
    justify-content: space-between;
    margin-top: .75rem;
}
.wizard-step-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 1;
    opacity: .45;
    transition: opacity .25s ease;
}
.wizard-step-indicator.active,
.wizard-step-indicator.completed {
    opacity: 1;
}
.wizard-step-indicator .step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #e9ecef;
    color: #6c757d;
    font-weight: 600;
    font-size: .85rem;
    margin-bottom: .25rem;
    transition: all .25s ease;
}
.wizard-step-indicator.active .step-num,
.wizard-step-indicator.completed .step-num {
    background: linear-gradient(135deg, #ff5e62, #ff9966);
    color: #fff;
}
.wizard-step-indicator .step-label {
    font-size: .75rem;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: .03em;
}
.wizard-step-indicator.active .step-label {
    color: #212529;
    font-weight: 600;
}

/* --- Steps --- */
.wizard-step {
    display: none;
    animation: wizardFadeIn .25s ease;
}
.wizard-step.active {
    display: block;
}
@keyframes wizardFadeIn {
    from { opacity: 0; transform: translateX(8px); }
    to { opacity: 1; transform: translateX(0); }
}
.wizard-step-title {
    font-weight: 700;
    margin-bottom: .25rem;
}

/* --- Wizard actions --- */
.wizard-actions {
    margin-top: 1.5rem;
}

/* --- Role cards --- */
.role-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: .75rem;
    margin: 1rem 0;
}
@media (min-width: 576px) {
    .role-cards { grid-template-columns: repeat(3, 1fr); }
}
.role-card {
    cursor: pointer;
    border: 2px solid #e9ecef;
    border-radius: 12px;
    padding: 1.1rem .75rem;
    margin: 0;
    transition: all .2s ease;
    text-align: center;
    background: #fff;
}
.role-card:hover {
    border-color: #ff9966;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 94, 98, .12);
}
.role-card.selected {
    border-color: #ff5e62;
    background: linear-gradient(135deg, rgba(255, 94, 98, .06), rgba(255, 153, 102, .06));
    box-shadow: 0 4px 16px rgba(255, 94, 98, .15);
}
.role-card input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.role-card-icon {
    font-size: 1.75rem;
    margin-bottom: .5rem;
    color: #ff5e62;
}
.role-card h5 {
    margin: 0 0 .25rem;
    font-weight: 700;
    font-size: 1rem;
}
.role-card p {
    margin: 0;
    font-size: .8rem;
}

/* --- Plan cards --- */
.plan-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: .75rem;
    margin-top: 1rem;
}
@media (min-width: 576px) {
    .plan-cards { grid-template-columns: repeat(2, 1fr); }
}
.plan-card {
    cursor: pointer;
    position: relative;
    border: 2px solid #e9ecef;
    border-radius: 12px;
    padding: 1.25rem 1rem;
    margin: 0;
    transition: all .2s ease;
    background: #fff;
}
.plan-card:hover {
    border-color: #ff9966;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 94, 98, .12);
}
.plan-card.selected {
    border-color: #ff5e62;
    background: linear-gradient(135deg, rgba(255, 94, 98, .06), rgba(255, 153, 102, .06));
    box-shadow: 0 4px 16px rgba(255, 94, 98, .15);
}
.plan-card input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.plan-card-trial {
    border-color: #28a745;
    background: linear-gradient(135deg, rgba(40, 167, 69, .04), rgba(255, 255, 255, 1));
}
.plan-card-trial.selected {
    border-color: #28a745;
    background: linear-gradient(135deg, rgba(40, 167, 69, .1), rgba(255, 255, 255, 1));
    box-shadow: 0 4px 16px rgba(40, 167, 69, .2);
}
.plan-badge {
    position: absolute;
    top: -10px;
    right: 12px;
    background: linear-gradient(90deg, #28a745, #20c997);
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 999px;
    letter-spacing: .04em;
}
.plan-name {
    font-weight: 700;
    margin: 0 0 .5rem;
    font-size: 1.05rem;
}
.plan-price {
    display: flex;
    align-items: baseline;
    gap: .35rem;
    margin-bottom: .35rem;
}
.plan-price-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: #212529;
}
.plan-card-trial .plan-price-value {
    color: #28a745;
}
.plan-price-cycle {
    color: #6c757d;
    font-size: .85rem;
}
.plan-card.hidden-by-role {
    display: none !important;
}

.wizard-step-error {
    margin-top: .65rem;
    font-size: .85rem;
    font-weight: 600;
    color: #dc3545;
}

.plan-card.is-invalid,
.role-card.is-invalid {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, .15);
}

/* --- Plan summary on step 4 --- */
.plan-summary {
    background: #f8f9fa;
    border-radius: 8px;
    padding: .75rem 1rem;
    margin-top: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* --- Dark mode support --- */
body.dark-mode .role-card,
body.dark-mode .plan-card,
body.dark-mode .plan-summary {
    background: #2a2d35;
    border-color: #3a3d45;
    color: #e9ecef;
}
body.dark-mode .role-card:hover,
body.dark-mode .plan-card:hover {
    border-color: #ff9966;
}
body.dark-mode .wizard-progress-bar {
    background: #3a3d45;
}
body.dark-mode .wizard-step-indicator .step-num {
    background: #3a3d45;
    color: #adb5bd;
}
body.dark-mode .wizard-step-indicator.active .step-label {
    color: #f8f9fa;
}
body.dark-mode .plan-price-value {
    color: #f8f9fa;
}