/* ============================================================
   wizard.css — Onboarding Wizard Styles
   ============================================================ */

/* ═══════════════════════════════════════════════════════════
   SHELL — hide portal chrome during wizard
   ═══════════════════════════════════════════════════════════ */
body.wz-shell .modern-header {
    display: none !important;
}

body.wz-shell .modern-footer {
    display: none !important;
}

body.wz-shell {
    background: #f4f6fb;
}

/* ═══════════════════════════════════════════════════════════
   TOPBAR — sticky logo + step rail + counter
   ═══════════════════════════════════════════════════════════ */
.wz-topbar {
    position: sticky;
    top: 0;
    z-index: 100;
    background: #fff;
    border-bottom: 1px solid #e5e7eb;
    box-shadow: 0 1px 8px rgba(0,0,0,.06);
    padding: 0.75rem 0;
}

.wz-topbar-inner {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.wz-topbar-logo {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
}

    .wz-topbar-logo img {
        height: 32px;
    }

    .wz-topbar-logo .brand-text {
        font-weight: 700;
        font-size: 1rem;
        color: #1c2728;
    }

.wz-topbar-counter {
    flex-shrink: 0;
    font-size: 0.75rem;
    font-weight: 700;
    color: #6c757d;
    white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════
   PHASE / STEP RAIL
   ═══════════════════════════════════════════════════════════ */
.wz-phase-bar {
    flex: 1 1 0;
    display: flex;
    align-items: flex-start;
    gap: 0;
    overflow-x: auto;
    scrollbar-width: none;
}

    .wz-phase-bar::-webkit-scrollbar {
        display: none;
    }

.wz-phase-group {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.wz-phase-label {
    font-size: 0.585rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 5px;
    white-space: nowrap;
    color: #adb5bd;
    transition: color 0.3s ease;
}

    .wz-phase-label.wz-phase--active {
        color: #667eea;
    }

    .wz-phase-label.wz-phase--done {
        color: #10b981;
    }

.wz-phase-steps {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: center;
}

.wz-connector {
    flex: 1 1 0;
    height: 2px;
    background: #e5e7eb;
    min-width: 8px;
    transition: background 0.5s ease;
}

    .wz-connector.wz-connector--done {
        background: #10b981;
    }

.wz-step-circle {
    width: 30px;
    height: 30px;
    min-width: 30px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 700;
    border: 2px solid #e5e7eb;
    background: #fff;
    color: #adb5bd;
    transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
    cursor: default;
    position: relative;
    z-index: 1;
}

    .wz-step-circle.wz-step--active {
        background: linear-gradient(135deg, #667eea, #764ba2);
        border-color: transparent;
        color: #fff;
        box-shadow: 0 0 0 4px rgba(102,126,234,.22), 0 3px 10px rgba(102,126,234,.35);
    }

    .wz-step-circle.wz-step--done {
        background: #10b981;
        border-color: #10b981;
        color: #fff;
    }

        .wz-step-circle.wz-step--done:is(button) {
            cursor: pointer;
        }

            .wz-step-circle.wz-step--done:is(button):hover {
                background: #059669;
                border-color: #059669;
                transform: scale(1.1);
            }

    .wz-step-circle i {
        font-size: 0.75rem;
    }

.wz-step-label {
    font-size: 0.58rem;
    line-height: 1.3;
    text-align: center;
    word-break: break-word;
    hyphens: auto;
    color: #6c757d;
    margin-top: 4px;
    max-width: 52px;
}

    .wz-step-label.wz-label--active {
        color: #667eea;
        font-weight: 700;
    }

    .wz-step-label.wz-label--done {
        color: #10b981;
    }

.wz-scanning-badge {
    display: none;
    position: absolute;
    top: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.55rem;
    color: #f59e0b;
    white-space: nowrap;
    animation: wz-pulse-text 1.4s ease-in-out infinite;
}

    .wz-scanning-badge.visible {
        display: block;
    }

@keyframes wz-pulse-text {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.4;
    }
}

/* ═══════════════════════════════════════════════════════════
   PAGE BODY
   ═══════════════════════════════════════════════════════════ */
.wz-body {
    padding: 2rem 0 4rem;
    min-height: calc(100vh - 57px);
}

/* ═══════════════════════════════════════════════════════════
   STEP BANNER — colorful illustration strip at top of content
   ═══════════════════════════════════════════════════════════ */
.wz-step-banner {
    border-radius: 1.25rem 1.25rem 0 0;
    padding: 2rem 2rem 1.75rem;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: #fff;
}

    .wz-step-banner::before {
        content: '';
        position: absolute;
        inset: 0;
        background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") repeat;
        pointer-events: none;
    }

.wz-step-banner-illust {
    position: absolute;
    right: 1.5rem;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0.18;
    font-size: 6rem;
    line-height: 1;
    pointer-events: none;
    user-select: none;
}

.wz-step-banner-icon {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    background: rgba(255,255,255,.18);
    border-radius: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    backdrop-filter: blur(4px);
    position: relative;
    z-index: 1;
}

.wz-step-banner-text {
    position: relative;
    z-index: 1;
}

    .wz-step-banner-text h3 {
        font-size: 1.2rem;
        font-weight: 800;
        margin: 0 0 0.2rem;
        letter-spacing: -0.02em;
    }

    .wz-step-banner-text p {
        margin: 0;
        font-size: 0.875rem;
        opacity: 0.82;
        line-height: 1.5;
    }

/* Per-step banner accent colours */
.wz-banner--plan {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.wz-banner--register {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.wz-banner--website {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.wz-banner--indexing {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.wz-banner--sources {
    background: linear-gradient(135deg, #8b5cf6 0%, #6d28d9 100%);
}

.wz-banner--widget {
    background: linear-gradient(135deg, #06b6d4 0%, #0284c7 100%);
}

.wz-banner--branding {
    background: linear-gradient(135deg, #ec4899 0%, #be185d 100%);
}

.wz-banner--complete {
    background: linear-gradient(135deg, #10b981 0%, #059669 60%, #047857 100%);
}

/* ═══════════════════════════════════════════════════════════
   MAIN CONTENT CARD
   ═══════════════════════════════════════════════════════════ */
.wz-card {
    background: #fff;
    border-radius: 0 0 1.25rem 1.25rem;
    border: 1px solid #e5e7eb;
    border-top: none;
    box-shadow: 0 4px 24px rgba(0,0,0,.06);
}

.wz-card-body {
    padding: 2rem;
}

/* ═══════════════════════════════════════════════════════════
   SLIDE ANIMATIONS
   ═══════════════════════════════════════════════════════════ */
.wz-step-panel {
    animation: wz-slide-in 0.38s cubic-bezier(.22,.68,0,1.2) forwards;
}

    .wz-step-panel.wz-slide-back {
        animation: wz-slide-in-left 0.38s cubic-bezier(.22,.68,0,1.2) forwards;
    }

@keyframes wz-slide-in {
    from {
        opacity: 0;
        transform: translateX(36px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes wz-slide-in-left {
    from {
        opacity: 0;
        transform: translateX(-36px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ═══════════════════════════════════════════════════════════
   NAVIGATION FOOTER
   ═══════════════════════════════════════════════════════════ */
.wz-nav-footer {
    padding: 1.125rem 2rem;
    background: #f8f9fb;
    border-top: 1px solid #e5e7eb;
    border-radius: 0 0 1.25rem 1.25rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.wz-nav-hint {
    font-size: 0.75rem;
    color: #9ca3af;
    text-align: center;
}

/* Back button */
.wz-btn-back {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.6rem 1.25rem;
    border: 2px solid #e5e7eb;
    background: #fff;
    color: #6c757d;
    border-radius: 0.625rem;
    font-weight: 600;
    font-size: 0.875rem;
    text-decoration: none;
    transition: border-color 0.2s, color 0.2s, background 0.2s;
}

    .wz-btn-back:hover {
        border-color: #adb5bd;
        color: #374151;
        background: #f9fafb;
    }

/* Next / CTA button */
#next-step-btn, .wz-btn-next {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.7rem 1.75rem;
    background: linear-gradient(135deg, #667eea, #764ba2);
    border: none;
    color: #fff;
    border-radius: 0.625rem;
    font-weight: 700;
    font-size: 0.9375rem;
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.2s ease;
    white-space: nowrap;
}

    #next-step-btn:hover:not(:disabled),
    .wz-btn-next:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 24px rgba(102,126,234,.45);
        color: #fff;
    }

    #next-step-btn:disabled {
        opacity: 0.45;
        pointer-events: none;
    }
    /* Animated arrow pulse on Next */
    #next-step-btn .bi-arrow-right,
    .wz-btn-next .bi-arrow-right {
        transition: transform 0.2s ease;
    }

    #next-step-btn:hover:not(:disabled) .bi-arrow-right,
    .wz-btn-next:hover .bi-arrow-right {
        transform: translateX(3px);
    }

/* ═══════════════════════════════════════════════════════════
   PLAN PICKER CARDS (Step 1)
   ═══════════════════════════════════════════════════════════ */
.wz-plan-card {
    border: 2px solid #e5e7eb;
    border-radius: 1.125rem;
    padding: 1.5rem 1.25rem;
    cursor: pointer;
    transition: border-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease;
    position: relative;
    opacity: 0;
    transform: translateY(22px);
    background: #fff;
}

    .wz-plan-card.wz-plan-card--visible {
        animation: wz-card-rise 0.45s cubic-bezier(.22,.68,0,1.2) forwards;
    }

    .wz-plan-card:nth-child(2).wz-plan-card--visible {
        animation-delay: 0.1s;
    }

    .wz-plan-card:nth-child(3).wz-plan-card--visible {
        animation-delay: 0.2s;
    }

@keyframes wz-card-rise {
    from {
        opacity: 0;
        transform: translateY(22px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.wz-plan-card:hover {
    border-color: #c4b5fd;
    box-shadow: 0 6px 20px rgba(102,126,234,.12);
    transform: translateY(-3px);
}

.wz-plan-card.selected {
    border-color: #667eea;
    box-shadow: 0 0 0 4px rgba(102,126,234,.15), 0 6px 20px rgba(102,126,234,.12);
    transform: translateY(-3px);
}

.wz-plan-card .wz-plan-check {
    display: none;
    position: absolute;
    top: 12px;
    right: 12px;
    width: 22px;
    height: 22px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    border-radius: 50%;
    color: #fff;
    font-size: 0.7rem;
    align-items: center;
    justify-content: center;
}

.wz-plan-card.selected .wz-plan-check {
    display: flex;
}

.wz-plan-card .wz-plan-recommended {
    position: absolute;
    top: -11px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.65rem;
    padding: 3px 12px;
    border-radius: 20px;
    background: linear-gradient(135deg, #667eea, #764ba2);
    white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════
   GLOBE SCANNER ANIMATION (Step 3)
   ═══════════════════════════════════════════════════════════ */
.wz-globe-wrap {
    position: relative;
    width: 80px;
    height: 80px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.wz-globe-icon {
    font-size: 2.5rem;
    color: #fff;
    animation: wz-globe-spin 8s linear infinite;
}

@keyframes wz-globe-spin {
    from {
        transform: rotateY(0deg);
    }

    to {
        transform: rotateY(360deg);
    }
}

.wz-orbit-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1.5px dashed rgba(255,255,255,.35);
    animation: wz-ring-rotate 4s linear infinite;
}

@keyframes wz-ring-rotate {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

.wz-orbit-dot {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,.9);
    top: -4px;
    left: calc(50% - 4px);
    box-shadow: 0 0 6px rgba(255,255,255,.8);
}

/* ═══════════════════════════════════════════════════════════
   NEURAL / AI SCAN ANIMATION (Step 4 – Indexing)
   ═══════════════════════════════════════════════════════════ */
.wz-neural-wrap {
    position: relative;
    width: 80px;
    height: 80px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.wz-neural-ring {
    position: absolute;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,.35);
}

.wz-neural-ring-1 {
    width: 80px;
    height: 80px;
    animation: wz-ring-pulse 1.8s ease-in-out infinite;
}

.wz-neural-ring-2 {
    width: 56px;
    height: 56px;
    animation: wz-ring-pulse 1.8s ease-in-out infinite 0.3s;
}

.wz-neural-ring-3 {
    width: 32px;
    height: 32px;
    animation: wz-ring-pulse 1.8s ease-in-out infinite 0.6s;
}

@keyframes wz-ring-pulse {
    0%, 100% {
        opacity: 0.3;
        transform: scale(1);
    }

    50% {
        opacity: 0.8;
        transform: scale(1.04);
    }
}

.wz-neural-core {
    font-size: 1.5rem;
    color: #fff;
    animation: wz-core-glow 2s ease-in-out infinite;
    position: relative;
    z-index: 1;
}

@keyframes wz-core-glow {
    0%, 100% {
        filter: drop-shadow(0 0 4px rgba(255,255,255,.4));
    }

    50% {
        filter: drop-shadow(0 0 12px rgba(255,255,255,.9));
    }
}
/* Scan line sweep */
.wz-scan-line {
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.6) 50%, transparent 100%);
    animation: wz-scan-sweep 2s linear infinite;
}

@keyframes wz-scan-sweep {
    from {
        top: 0;
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

    to {
        top: 100%;
        opacity: 0;
    }
}

/* ═══════════════════════════════════════════════════════════
   SOURCE TILE CARDS (Step 5)
   ═══════════════════════════════════════════════════════════ */
.source-card {
    border: 2px solid #e5e7eb;
    border-radius: 1rem;
    transition: border-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
    background: #fff;
    animation: wz-card-rise 0.4s ease-out forwards;
}

    .source-card:nth-child(2) {
        animation-delay: 0.08s;
    }

    .source-card:nth-child(3) {
        animation-delay: 0.16s;
    }

    .source-card:nth-child(4) {
        animation-delay: 0.24s;
    }

    .source-card:hover {
        border-color: #8b5cf6;
        transform: translateY(-4px);
        box-shadow: 0 8px 20px rgba(139,92,246,.15);
    }

/* ═══════════════════════════════════════════════════════════
   WIDGET PREVIEW (Step 6)
   ═══════════════════════════════════════════════════════════ */
.wz-preview-panel {
    transform: translateX(60px);
    opacity: 0;
    transition: transform 0.4s cubic-bezier(.22,.68,0,1.2), opacity 0.4s ease;
}

    .wz-preview-panel.wz-preview--visible {
        transform: translateX(0);
        opacity: 1;
    }

#wz-preview-header,
#wz-preview-user-bubble,
#wz-preview-send-btn,
#wz-preview-submit-btn,
#wz-preview-btn {
    transition: all 0.25s ease;
}

.wz-typing-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #adb5bd;
    animation: typingAnimation 1.4s infinite;
}

    .wz-typing-dot:nth-child(2) {
        animation-delay: 0.2s;
    }

    .wz-typing-dot:nth-child(3) {
        animation-delay: 0.4s;
    }

@keyframes typingAnimation {
    0%, 60%, 100% {
        opacity: 0.3;
    }

    30% {
        opacity: 1;
    }
}

#wz-preview-mic-btn.recording {
    color: #dc3545 !important;
    animation: pulse 1s infinite;
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.wz-preview-tabs .nav-link {
    font-size: 0.8rem;
    padding: 0.3rem 0.75rem;
}

/* ═══════════════════════════════════════════════════════════
   COLOUR DETECTION ANIMATION (Step 7 – Branding)
   ═══════════════════════════════════════════════════════════ */
.wz-palette-dot {
    display: inline-block;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,.5);
    animation: wz-dot-pop 0.5s cubic-bezier(.22,.68,0,1.2) both;
}

    .wz-palette-dot:nth-child(2) {
        animation-delay: 0.1s;
    }

    .wz-palette-dot:nth-child(3) {
        animation-delay: 0.2s;
    }

    .wz-palette-dot:nth-child(4) {
        animation-delay: 0.3s;
    }

@keyframes wz-dot-pop {
    from {
        opacity: 0;
        transform: scale(0);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ═══════════════════════════════════════════════════════════
   COMPLETION CELEBRATION (Step 8)
   ═══════════════════════════════════════════════════════════ */
.wz-confetti-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
}

.wz-complete-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 96px;
    height: 96px;
    background: linear-gradient(135deg, #10b981, #059669);
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(16,185,129,.5);
    animation: wz-check-pop 0.6s cubic-bezier(.22,.68,0,1.4) both, wz-check-ripple 2s ease-out 0.6s forwards;
    font-size: 2.75rem;
    color: #fff;
}

@keyframes wz-check-pop {
    from {
        opacity: 0;
        transform: scale(0.4) rotate(-20deg);
    }

    to {
        opacity: 1;
        transform: scale(1) rotate(0deg);
    }
}

@keyframes wz-check-ripple {
    0% {
        box-shadow: 0 0 0 0 rgba(16,185,129,.5);
    }

    70% {
        box-shadow: 0 0 0 24px rgba(16,185,129,0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(16,185,129,0);
    }
}

.wz-complete-headline {
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    background: linear-gradient(135deg, #10b981, #059669);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: wz-fade-up 0.5s ease-out 0.3s both;
}

.wz-complete-lead {
    animation: wz-fade-up 0.5s ease-out 0.45s both;
}

@keyframes wz-fade-up {
    from {
        opacity: 0;
        transform: translateY(16px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Summary tiles on completion */
.wz-summary-tile {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 1rem;
    padding: 1.25rem 1rem;
    text-align: center;
    opacity: 0;
    animation: wz-fade-up 0.45s ease-out both;
}

    .wz-summary-tile:nth-child(1) {
        animation-delay: 0.6s;
    }

    .wz-summary-tile:nth-child(2) {
        animation-delay: 0.72s;
    }

    .wz-summary-tile:nth-child(3) {
        animation-delay: 0.84s;
    }

.wz-summary-tile-icon {
    font-size: 1.75rem;
    margin-bottom: 0.4rem;
    display: block;
}

.wz-summary-tile-label {
    font-size: 0.75rem;
    color: #6c757d;
}

.wz-summary-tile-value {
    font-size: 0.9rem;
    font-weight: 700;
    color: #1c2728;
    margin-top: 0.15rem;
}

/* ═══════════════════════════════════════════════════════════
   READINESS SCORE GAUGE
   ═══════════════════════════════════════════════════════════ */
.wz-gauge-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 1rem 0;
}

.wz-gauge {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: conic-gradient(#667eea var(--score-angle, 0deg), #e5e7eb var(--score-angle, 0deg));
}

.wz-gauge-inner {
    width: 120px;
    height: 120px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
}

.wz-gauge-score {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
    color: #667eea;
}

.wz-gauge-label {
    font-size: 0.65rem;
    color: #6c757d;
    margin-top: 2px;
}

.wz-stat-counter {
    font-size: 1.5rem;
    font-weight: 800;
    color: #667eea;
}

/* ═══════════════════════════════════════════════════════════
   MISC UTILITIES
   ═══════════════════════════════════════════════════════════ */
/* Subtle entrance for form rows */
.wz-form-row {
    animation: wz-fade-up 0.35s ease-out both;
}

    .wz-form-row:nth-child(2) {
        animation-delay: 0.06s;
    }

    .wz-form-row:nth-child(3) {
        animation-delay: 0.12s;
    }

    .wz-form-row:nth-child(4) {
        animation-delay: 0.18s;
    }

    .wz-form-row:nth-child(5) {
        animation-delay: 0.24s;
    }

/* Help footer */
.wz-help-footer {
    text-align: center;
    padding: 1.25rem 0;
    font-size: 0.8125rem;
    color: #9ca3af;
}

    .wz-help-footer a {
        color: #667eea;
        text-decoration: none;
    }

        .wz-help-footer a:hover {
            text-decoration: underline;
        }

/* ═══════════════════════════════════════════════════════════
   STEP 1 — PLAN: floating subscription cards
   ═══════════════════════════════════════════════════════════ */
.wz-plan-float-wrap {
    position: relative;
    width: 80px;
    height: 80px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.wz-plan-float-card {
    background: rgba(255,255,255,.9);
    border-radius: 8px;
    padding: 5px 9px;
    font-size: 0.6rem;
    font-weight: 800;
    color: #667eea;
    box-shadow: 0 4px 12px rgba(0,0,0,.14);
    position: absolute;
    white-space: nowrap;
}

    .wz-plan-float-card:nth-child(1) {
        top: 6px;
        left: 0;
        animation: wz-float-card-a 3s ease-in-out infinite;
    }

    .wz-plan-float-card:nth-child(2) {
        bottom: 6px;
        right: 0;
        animation: wz-float-card-b 3s ease-in-out infinite 0.8s;
        transform: rotate(-5deg);
    }

    .wz-plan-float-card:nth-child(3) {
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        font-size: 1.4rem;
        padding: 0;
        background: transparent;
        box-shadow: none;
        color: #fff;
        animation: wz-core-glow 2s ease-in-out infinite;
    }

@keyframes wz-float-card-a {
    0%, 100% {
        transform: translateY(0) rotate(3deg);
    }

    50% {
        transform: translateY(-6px) rotate(3deg);
    }
}

@keyframes wz-float-card-b {
    0%, 100% {
        transform: translateY(0) rotate(-5deg);
    }

    50% {
        transform: translateY(-6px) rotate(-5deg);
    }
}

/* ═══════════════════════════════════════════════════════════
   STEP 2 — REGISTER: animated city skyline
   ═══════════════════════════════════════════════════════════ */
.wz-building-wrap {
    position: relative;
    width: 80px;
    height: 80px;
    display: inline-flex;
    align-items: flex-end;
    justify-content: center;
    gap: 3px;
    padding-bottom: 4px;
}

.wz-building-bar {
    width: 13px;
    border-radius: 3px 3px 0 0;
    background: rgba(255,255,255,.82);
    animation: wz-bar-rise 0.65s cubic-bezier(.22,.68,0,1.3) both;
    transform-origin: bottom center;
}

    .wz-building-bar:nth-child(1) {
        height: 30px;
        animation-delay: 0s;
    }

    .wz-building-bar:nth-child(2) {
        height: 52px;
        animation-delay: 0.12s;
        background: rgba(255,255,255,.95);
    }

    .wz-building-bar:nth-child(3) {
        height: 42px;
        animation-delay: 0.24s;
    }

    .wz-building-bar:nth-child(4) {
        height: 62px;
        animation-delay: 0.36s;
        background: rgba(255,255,255,.95);
    }

    .wz-building-bar:nth-child(5) {
        height: 34px;
        animation-delay: 0.48s;
    }

@keyframes wz-bar-rise {
    from {
        transform: scaleY(0);
        opacity: 0;
    }

    to {
        transform: scaleY(1);
        opacity: 1;
    }
}

.wz-building-blink {
    position: absolute;
    top: 4px;
    right: 10px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #fbbf24;
    animation: wz-blink 1.4s ease-in-out infinite 0.9s;
}

@keyframes wz-blink {
    0%, 100% {
        opacity: 1;
    }

    50% {
        opacity: 0.1;
    }
}

/* ═══════════════════════════════════════════════════════════
   STEP 5 — SOURCES: floating data particles
   ═══════════════════════════════════════════════════════════ */
.wz-data-stream-wrap {
    position: relative;
    width: 80px;
    height: 80px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.wz-data-particle {
    position: absolute;
    border-radius: 50%;
    background: rgba(255,255,255,.75);
    animation: wz-particle-float 2.4s ease-in-out infinite;
}

    .wz-data-particle:nth-child(1) {
        width: 7px;
        height: 7px;
        top: 8px;
        left: 12px;
        animation-delay: 0s;
        animation-duration: 2.1s;
    }

    .wz-data-particle:nth-child(2) {
        width: 5px;
        height: 5px;
        top: 20px;
        right: 8px;
        animation-delay: 0.4s;
        animation-duration: 2.5s;
    }

    .wz-data-particle:nth-child(3) {
        width: 6px;
        height: 6px;
        bottom: 12px;
        left: 8px;
        animation-delay: 0.8s;
        animation-duration: 2.0s;
    }

    .wz-data-particle:nth-child(4) {
        width: 4px;
        height: 4px;
        bottom: 8px;
        right: 14px;
        animation-delay: 1.2s;
        animation-duration: 2.7s;
    }

.wz-data-stream-core {
    font-size: 1.6rem;
    color: #fff;
    position: relative;
    z-index: 1;
    animation: wz-core-glow 2s ease-in-out infinite;
}

@keyframes wz-particle-float {
    0%, 100% {
        transform: translateY(0);
        opacity: 0.55;
    }

    50% {
        transform: translateY(-9px);
        opacity: 1;
    }
}

/* ═══════════════════════════════════════════════════════════
   STEP 6 — WIDGET: chat bubbles pop
   ═══════════════════════════════════════════════════════════ */
.wz-chat-pop-wrap {
    position: relative;
    width: 80px;
    height: 80px;
    display: inline-flex;
    align-items: flex-end;
    justify-content: flex-start;
    padding: 0 6px 8px;
}

.wz-chat-bubble-l {
    width: 44px;
    height: 24px;
    background: rgba(255,255,255,.88);
    border-radius: 12px 12px 12px 2px;
    position: absolute;
    bottom: 12px;
    left: 6px;
    animation: wz-bubble-pop 2.2s ease-in-out infinite;
}

.wz-chat-bubble-r {
    width: 32px;
    height: 18px;
    background: rgba(255,255,255,.55);
    border-radius: 12px 12px 2px 12px;
    position: absolute;
    top: 14px;
    right: 4px;
    animation: wz-bubble-pop 2.2s ease-in-out infinite 0.6s;
}

.wz-chat-dots-row {
    position: absolute;
    bottom: 16px;
    left: 14px;
    display: flex;
    gap: 3px;
}

.wz-chat-mini-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(102,126,234,.7);
    animation: typingAnimation 1.4s infinite;
}

    .wz-chat-mini-dot:nth-child(2) {
        animation-delay: 0.2s;
    }

    .wz-chat-mini-dot:nth-child(3) {
        animation-delay: 0.4s;
    }

@keyframes wz-bubble-pop {
    0% {
        transform: scale(0.94);
        opacity: 0.7;
    }

    40% {
        transform: scale(1.06);
        opacity: 1;
    }

    70%, 100% {
        transform: scale(1);
        opacity: 0.85;
    }
}

/* ═══════════════════════════════════════════════════════════
   STEP 7 — BRANDING: spinning colour rings
   ═══════════════════════════════════════════════════════════ */
.wz-palette-spin-wrap {
    position: relative;
    width: 80px;
    height: 80px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.wz-palette-spin-ring {
    position: absolute;
    border-radius: 50%;
    border: 3px solid transparent;
}

.wz-palette-spin-ring-1 {
    width: 74px;
    height: 74px;
    border-color: rgba(255,255,255,.5) transparent rgba(255,255,255,.25) transparent;
    animation: wz-ring-rotate 5s linear infinite;
}

.wz-palette-spin-ring-2 {
    width: 54px;
    height: 54px;
    border-color: transparent rgba(255,255,255,.45) transparent rgba(255,255,255,.2);
    animation: wz-ring-rotate 3.5s linear infinite reverse;
}

.wz-palette-spin-center {
    font-size: 1.55rem;
    color: #fff;
    position: relative;
    z-index: 1;
    animation: wz-core-glow 2.5s ease-in-out infinite;
}

/* ═══════════════════════════════════════════════════════════
   STEP 8 — COMPLETE: orbiting stars
   ═══════════════════════════════════════════════════════════ */
.wz-stars-wrap {
    position: relative;
    width: 80px;
    height: 80px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.wz-star-orbit {
    position: absolute;
    font-size: 0.85rem;
    animation: wz-star-spin 4s linear infinite;
    top: 50%;
    left: 50%;
    margin-top: -10px;
    margin-left: -8px;
    transform-origin: 8px calc(36px);
}

    .wz-star-orbit:nth-child(2) {
        animation-delay: -1.33s;
    }

    .wz-star-orbit:nth-child(3) {
        animation-delay: -2.66s;
    }

@keyframes wz-star-spin {
    from {
        transform: rotate(0deg) translateY(-32px) rotate(0deg);
    }

    to {
        transform: rotate(360deg) translateY(-32px) rotate(-360deg);
    }
}

.wz-stars-core {
    font-size: 1.8rem;
    color: #fff;
    position: relative;
    z-index: 1;
    animation: wz-core-glow 2s ease-in-out infinite;
}

/* ═══════════════════════════════════════════════════════════
   HELP GUIDE — numbered "what to do here" panel
   ═══════════════════════════════════════════════════════════ */
.wz-help-guide {
    background: linear-gradient(135deg, #f0f4ff 0%, #faf5ff 100%);
    border: 1px solid #e0e7ff;
    border-radius: 1rem;
    padding: 1.125rem 1.375rem;
    margin-bottom: 1.5rem;
}

.wz-help-guide-title {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #667eea;
    margin-bottom: 0.875rem;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.wz-help-step {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 0.625rem;
    animation: wz-fade-up 0.38s ease-out both;
}

    .wz-help-step:nth-child(2) {
        animation-delay: 0.07s;
    }

    .wz-help-step:nth-child(3) {
        animation-delay: 0.14s;
    }

    .wz-help-step:nth-child(4) {
        animation-delay: 0.21s;
    }

    .wz-help-step:last-child {
        margin-bottom: 0;
    }

.wz-help-step-num {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
}

.wz-help-step-body {
    font-size: 0.8125rem;
    line-height: 1.55;
    color: #4b5563;
}

    .wz-help-step-body strong {
        color: #1c2728;
    }

.wz-time-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: rgba(102,126,234,.1);
    color: #667eea;
    border-radius: 2rem;
    padding: 0.2rem 0.7rem;
    font-size: 0.72rem;
    font-weight: 600;
    margin-bottom: 0.875rem;
}

.wz-trust-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.875rem;
    padding-top: 0.875rem;
    border-top: 1px solid #e0e7ff;
}

.wz-trust-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    background: #f0fdf4;
    color: #059669;
    border: 1px solid #bbf7d0;
    border-radius: 2rem;
    padding: 0.2rem 0.65rem;
    font-size: 0.7rem;
    font-weight: 600;
}

/* Source card how-it-works steps */
.wz-how-step {
    display: flex;
    align-items: flex-start;
    gap: 0.9rem;
    padding: 0.875rem 1rem;
    border-radius: 0.75rem;
    transition: background 0.2s ease;
    animation: wz-fade-up 0.4s ease-out both;
}

    .wz-how-step:nth-child(2) {
        animation-delay: 0.08s;
    }

    .wz-how-step:nth-child(3) {
        animation-delay: 0.16s;
    }

    .wz-how-step:nth-child(4) {
        animation-delay: 0.24s;
    }

    .wz-how-step:hover {
        background: #f8f9fb;
    }

.wz-how-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

.wz-how-body {
    flex: 1;
}

    .wz-how-body h6 {
        font-size: 0.875rem;
        font-weight: 700;
        margin: 0 0 0.2rem;
        color: #1c2728;
    }

    .wz-how-body p {
        font-size: 0.78rem;
        color: #6c757d;
        margin: 0;
        line-height: 1.5;
    }

/* Indexing timeline */
.wz-timeline {
    position: relative;
    padding-left: 2rem;
}

    .wz-timeline::before {
        content: '';
        position: absolute;
        left: 0.6rem;
        top: 0;
        bottom: 0;
        width: 2px;
        background: #e5e7eb;
    }

.wz-timeline-item {
    position: relative;
    margin-bottom: 1.125rem;
    animation: wz-fade-up 0.38s ease-out both;
}

    .wz-timeline-item:last-child {
        margin-bottom: 0;
    }

    .wz-timeline-item:nth-child(2) {
        animation-delay: 0.08s;
    }

    .wz-timeline-item:nth-child(3) {
        animation-delay: 0.16s;
    }

    .wz-timeline-item:nth-child(4) {
        animation-delay: 0.24s;
    }

.wz-timeline-dot {
    position: absolute;
    left: -1.69rem;
    top: 4px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #e5e7eb;
    border: 2px solid #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.4s ease, box-shadow 0.4s ease;
}

    .wz-timeline-dot.active {
        background: linear-gradient(135deg, #667eea, #764ba2);
        box-shadow: 0 0 0 3px rgba(102,126,234,.25);
        animation: wz-ring-pulse 1.6s ease-in-out infinite;
    }

    .wz-timeline-dot.done {
        background: #10b981;
        box-shadow: none;
        animation: none;
    }

    .wz-timeline-dot i {
        font-size: 0.52rem;
        color: #fff;
    }

.wz-timeline-label {
    font-size: 0.8125rem;
    font-weight: 600;
    color: #374151;
}

.wz-timeline-sublabel {
    font-size: 0.74rem;
    color: #9ca3af;
    margin-top: 0.1rem;
}

/* ═══════════════════════════════════════════════════════════
   REGISTER STEP — login-page-style two-column split (Step 2)
   Form on the LEFT (white), value panel on the RIGHT (dark)
   Mirrors the register-form-col / register-value-col pattern
   from Login.cshtml for consistent site-wide design.
   ═══════════════════════════════════════════════════════════ */
.wz-card-body:has(.wz-reg-split) {
    padding: 0;
    overflow: hidden;
}

.wz-reg-split {
    display: flex;
    align-items: stretch;
}
/* ── Left: form column (white) ── */
.wz-reg-form-col {
    flex: 0 0 47%;
    max-width: 47%;
    background: #fff;
    padding: 2rem;
    overflow-y: auto;
    max-height: 72vh;
}
/* ── Right: dark value column (mirrors register-value-col from login) ── */
.wz-reg-value-col {
    flex: 1;
    background: linear-gradient(140deg, #0d1b35 0%, #1a1040 55%, #0b2343 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 2rem;
    position: relative;
    overflow: hidden;
}

    .wz-reg-value-col::before {
        content: '';
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at 25% 40%, rgba(37,140,251,.12) 0%, transparent 55%), radial-gradient(circle at 75% 70%, rgba(124,58,237,.10) 0%, transparent 55%);
        pointer-events: none;
    }

.wz-reg-value-inner {
    position: relative;
    z-index: 1;
    max-width: 360px;
    width: 100%;
    animation: wz-fade-up 0.4s ease-out both;
}

.wz-reg-value-illust {
    margin-bottom: 1.75rem;
}

.wz-reg-value-title {
    font-size: 1.625rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.15;
    color: #fff;
    margin-bottom: 0.5rem;
}

.wz-reg-value-sub {
    font-size: 0.875rem;
    color: rgba(255,255,255,.52);
    margin-bottom: 2rem;
    line-height: 1.6;
}

.wz-reg-value-items {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.wz-reg-value-item {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    animation: wz-fade-up 0.42s ease-out both;
}

    .wz-reg-value-item:nth-child(1) {
        animation-delay: 0.12s;
    }

    .wz-reg-value-item:nth-child(2) {
        animation-delay: 0.22s;
    }

    .wz-reg-value-item:nth-child(3) {
        animation-delay: 0.32s;
    }

.wz-reg-value-icon {
    width: 40px;
    height: 40px;
    border-radius: 0.625rem;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #258cfb;
    font-size: 1.125rem;
    flex-shrink: 0;
}

.wz-reg-value-item-title {
    font-weight: 700;
    font-size: 0.9375rem;
    color: #fff;
}

.wz-reg-value-item-desc {
    font-size: 0.8125rem;
    color: rgba(255,255,255,.5);
    margin-top: 0.125rem;
    line-height: 1.5;
}

@media (max-width: 767px) {
    .wz-reg-split {
        flex-direction: column;
    }

    .wz-reg-form-col {
        max-width: 100%;
        max-height: none;
    }

    .wz-reg-value-col {
        padding: 1.5rem;
    }
}


content: '';
position: absolute;
inset: 0;
background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E") repeat;
pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════
   FULL-SCREEN SPLIT PAGE — mirrors Login.cshtml structure
   Left col-lg-5 white form | Right col-lg-7 dark value panel
   ═══════════════════════════════════════════════════════════ */
.wz-page {
    min-height: 100vh;
    background: #f4f6fb;
    display: flex;
    flex-direction: column;
}

.wz-full-row {
    flex: 1 1 0;
    align-items: stretch;
}

/* ── Full-width top bar ── */
.wz-topbar-full {
    flex-shrink: 0;
    width: 100%;
    background: #fff;
    border-bottom: 1px solid #e5e7eb;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
    display: flex;
    flex-direction: column;
    /* position: sticky; */
    top: 0;
    z-index: 20;
}
/* Row 1 — centred logo + brand name */
.wz-topbar-brand-row {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.6rem 1.5rem;
    border-bottom: 1px solid #f0f2f5;
}
/* Row 2 — phase rail + step counter */
.wz-topbar-nav-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.5rem 1.5rem;
}

.wz-topbar-full .wz-phase-bar {
    flex: 1;
    min-width: 0;
}

.wz-topbar-full .wz-topbar-logo {
    flex-shrink: 0;
}

.wz-topbar-full .wz-topbar-counter {
    flex-shrink: 0;
}

/* ── Left: form column ── */
.wz-form-col {
    background: #fff;
    display: flex;
    flex-direction: column;
    border-right: 1px solid #e5e7eb;
}

.wz-form-content {
    flex: 1;
    overflow-y: auto;
    padding: 1.75rem 2rem;
}
/* nav footer inside form col loses the card border-radius */
.wz-form-col .wz-nav-footer {
    border-radius: 0;
    flex-shrink: 0;
}

.wz-form-help {
    flex-shrink: 0;
    text-align: center;
    padding: 0.55rem 1.5rem;
    border-top: 1px solid #f0f2f5;
    background: #f8f9fb;
    font-size: 0.79rem;
    color: #9ca3af;
}

    .wz-form-help a {
        color: #667eea;
        text-decoration: none;
    }

        .wz-form-help a:hover {
            text-decoration: underline;
        }

/* ── Right: dark value column (same gradient as register-value-col in Login.cshtml) ── */
.wz-value-col {
    background: linear-gradient(140deg, #0d1b35 0%, #1a1040 55%, #0b2343 100%);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 6rem 2.5rem 0;
    position: relative;
    overflow: hidden;
    position: sticky;
    top: 0px;
    right: 0;
    height: 100vh;
}

    .wz-value-col::before {
        content: '';
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at 25% 40%, rgba(37,140,251,.12) 0%, transparent 55%), radial-gradient(circle at 75% 70%, rgba(124,58,237,.10) 0%, transparent 55%);
        pointer-events: none;
    }

.wz-value-inner {
    position: relative;
    z-index: 1;
    max-width: 400px;
    width: 100%;
    animation: wz-fade-up 0.4s ease-out both;
}

.wz-rp-illust {
    margin-bottom: 2rem;
}

.wz-rp-title {
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.15;
    color: #fff;
    margin-bottom: 0.625rem;
}

.wz-rp-sub {
    font-size: 0.9375rem;
    color: rgba(255,255,255,.52);
    margin-bottom: 2.25rem;
    line-height: 1.6;
}

.wz-rp-items {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.wz-rp-item {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    animation: wz-fade-up 0.42s ease-out both;
}

    .wz-rp-item:nth-child(1) {
        animation-delay: 0.12s;
    }

    .wz-rp-item:nth-child(2) {
        animation-delay: 0.22s;
    }

    .wz-rp-item:nth-child(3) {
        animation-delay: 0.32s;
    }

.wz-rp-icon {
    width: 40px;
    height: 40px;
    border-radius: 0.625rem;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #258cfb;
    font-size: 1.125rem;
    flex-shrink: 0;
}

.wz-rp-item-title {
    font-weight: 700;
    font-size: 0.9375rem;
    color: #fff;
}

.wz-rp-item-desc {
    font-size: 0.8125rem;
    color: rgba(255,255,255,.5);
    margin-top: 0.125rem;
    line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 991px) {
    .wz-form-col {
        border-right: none;
    }

    .wz-form-content {
        padding: 1.25rem;
    }
}

@media (max-width: 767px) {
    .wz-step-banner {
        padding: 1.25rem 1.25rem 1rem;
    }

    .wz-step-banner-illust {
        display: none;
    }

    .wz-card-body {
        padding: 1.25rem;
    }

    .wz-nav-footer {
        padding: 1rem 1.25rem;
    }

    .wz-topbar-counter {
        display: none;
    }

    .wz-phase-label {
        font-size: 0.5rem;
    }

    .wz-step-label {
        font-size: 0.5rem;
        max-width: 40px;
    }

    .wz-step-circle {
        width: 26px;
        height: 26px;
        min-width: 26px;
        font-size: 0.62rem;
    }

    #next-step-btn, .wz-btn-next {
        padding: 0.6rem 1.25rem;
        font-size: 0.875rem;
    }

    .wz-complete-headline {
        font-size: 1.5rem;
    }
}

/* ═══════════════════════════════════════════════════════════
   SOCIAL LOGIN BUTTONS — Step 2 popup OAuth
   ═══════════════════════════════════════════════════════════ */
.wz-social-btn:disabled {
    opacity: 0.65;
    cursor: not-allowed;
    pointer-events: none;
}

.wz-social-btn-spinner {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
}