/* CU Catalyst 2026 - Registration wizard styles.
   Reuses the site's existing --cu-* variables and .section/.cu-btn classes
   from assets/css/style.css so this blends into the rest of the site. */

.wizard-steps {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin: 10px 0 40px;
    flex-wrap: wrap;
}
.wizard-steps .step { text-align: center; width: 110px; }
.wizard-steps .circle {
    width: 42px; height: 42px;
    border-radius: 50%;
    background: var(--cu-pale);
    color: var(--cu-blue-dark);
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 8px;
    font-weight: 700;
    border: 2px solid var(--cu-line);
}
.wizard-steps .step.active .circle { background: var(--cu-blue); color: #fff; border-color: var(--cu-blue); }
.wizard-steps .step.done .circle { background: var(--cu-orange); color: #fff; border-color: var(--cu-orange); }
.wizard-steps .label { font-size: 13px; color: #667; }
.wizard-steps .step.active .label { color: var(--cu-ink); font-weight: 700; }

.wizard-card {
    max-width: 640px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid var(--cu-line);
    border-radius: 14px;
    box-shadow: var(--cu-shadow);
    padding: 34px 32px;
}

.wizard-card .field { margin-bottom: 20px; }
.wizard-card label { display: block; font-weight: 600; margin-bottom: 8px; font-size: 14px; color: var(--cu-ink); }
.wizard-card .req { color: var(--cu-orange); }

.wizard-card input[type=text],
.wizard-card input[type=email],
.wizard-card select,
.wizard-card textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--cu-line);
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
}
.wizard-card input:focus, .wizard-card select:focus, .wizard-card textarea:focus {
    outline: none;
    border-color: var(--cu-blue);
    box-shadow: 0 0 0 3px var(--cu-pale);
}
.wizard-card input:disabled { background: #f4f4f4; color: #888; }

.field-err {
    color: #a31117;
    font-size: 12px;
    margin-top: 6px;
    min-height: 14px;
}
.wizard-card input.field-invalid {
    border-color: #a31117;
    box-shadow: 0 0 0 3px #fdecec;
}

.radio-group { display: flex; flex-direction: column; gap: 10px; }
.radio-option {
    display: flex; align-items: center; gap: 10px;
    border: 1px solid var(--cu-line);
    border-radius: 8px;
    padding: 12px 14px;
    font-size: 14px;
    cursor: pointer;
}
.radio-option:hover { border-color: var(--cu-blue); background: var(--cu-soft); }

.wizard-btn-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 28px;
    gap: 14px;
    flex-wrap: wrap;
}

.cu-btn.btn-block { display: block; width: 100%; text-align: center; border: none; cursor: pointer; box-shadow: 8px 0 0 #f3a688; }
.cu-btn:disabled { opacity: .6; cursor: default; }
.cu-btn-link { background: none; border: none; color: var(--cu-blue-dark); text-decoration: underline; cursor: pointer; font-size: 14px; padding: 0; }

.error-box {
    background: #fdecec;
    color: #a31117;
    border: 1px solid #f5c2c2;
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 18px;
    font-size: 14px;
}
.notice-box {
    background: var(--cu-soft);
    color: var(--cu-blue-dark);
    border: 1px solid var(--cu-line);
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 18px;
    font-size: 14px;
}
.muted { color: #667; }
.small { font-size: 13px; }

/* Payment page */
.gateway-card { max-width: 480px; margin: 0 auto; }
.badge-test {
    background: #fff3cd; color: #856404;
    padding: 4px 10px; border-radius: 6px; font-size: 12px; font-weight: 700;
    display: inline-block; margin-bottom: 10px;
}
.pay-summary { width: 100%; border-collapse: collapse; margin: 20px 0; }
.pay-summary td { padding: 8px 0; font-size: 14px; border-bottom: 1px solid var(--cu-pale); }
.pay-summary td:last-child { text-align: right; font-weight: 600; }
.pay-summary tr.total td { font-size: 18px; color: var(--cu-orange); }

/* Confirmation page */
.confirm-card { max-width: 480px; margin: 0 auto; text-align: center; animation: confirmCardIn .5s ease both; }
@keyframes confirmCardIn {
    from { opacity: 0; transform: translateY(18px) scale(.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
.checkmark { width: 90px; height: 90px; margin: 0 auto 20px; animation: checkmarkPop .4s ease .75s both; }
@keyframes checkmarkPop {
    0% { transform: scale(1); }
    50% { transform: scale(1.15); }
    100% { transform: scale(1); }
}
.checkmark-circle {
    stroke: var(--cu-blue); stroke-width: 2;
    stroke-dasharray: 166; stroke-dashoffset: 166;
    animation: circle-draw 0.6s ease forwards;
}
.checkmark-check {
    stroke: var(--cu-orange); stroke-width: 3;
    stroke-dasharray: 48; stroke-dashoffset: 48;
    animation: check-draw 0.4s 0.6s ease forwards;
}
@keyframes circle-draw { to { stroke-dashoffset: 0; } }
@keyframes check-draw { to { stroke-dashoffset: 0; } }
.confirm-card h2, .confirm-card p, .confirm-card table, .confirm-card a.cu-btn {
    opacity: 0;
    animation: confirmFadeUp .5s ease .9s forwards;
}
.confirm-card p { animation-delay: 1s; }
.confirm-card table { animation-delay: 1.1s; }
.confirm-card a.cu-btn { animation-delay: 1.2s; }
@keyframes confirmFadeUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}