/* ─────────────────────────────────────────────────────────────────────────
   Registration Wizard — pure CSS, no MudBlazor.
   Every class is prefixed `wiz-` so it can't collide with MudBlazor or
   the rest of the app. Loaded only on /register but harmless elsewhere.
   ───────────────────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;600;700;800&family=DM+Sans:wght@400;500;600&display=swap');

:root {
    --wiz-primary: #0F6FFF;
    --wiz-primary-hover: #0A5BD9;
    --wiz-primary-tint: #E8F0FF;
    --wiz-success: #00C853;
    --wiz-error: #E53935;
    --wiz-text: #0F1729;
    --wiz-text-muted: #6B7280;
    --wiz-text-light: #9CA3AF;
    --wiz-border: #E5E7EB;
    --wiz-border-strong: #CBD5E1;
    --wiz-card-bg: #FFFFFF;
    --wiz-radius: 16px;
    --wiz-radius-sm: 10px;
}

/* ── Page shell ────────────────────────────────────────────────────────── */
/* Two-layer animated background reused by both /register (.wiz-page) and
   /login (.wiz-auth-bg):
     1. Continuously-shifting brand-tinted gradient (slow, ~24s loop)
     2. Tiled SVG of POS / commerce icons drifting diagonally (slower, ~80s)
   Both are pure CSS — no JS, no rAF. Honors prefers-reduced-motion by
   freezing both animations. */
.wiz-page,
.wiz-auth-bg {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
    color: var(--wiz-text);
    line-height: 1.5;
    background: linear-gradient(
        135deg,
        #E5EFFF 0%,
        #D4E4FF 20%,
        #ECE2FF 40%,
        #D6EDFF 60%,
        #E1EFFF 80%,
        #E5EFFF 100%
    );
    background-size: 400% 400%;
    animation: wiz-bg-shift 24s ease-in-out infinite;
    overflow: hidden;
}

/* Floating-icons layer — repeats the wizard-pattern.svg tile and slowly
   drifts it diagonally so the background tells the POS / ERP story
   without distracting from the form. */
.wiz-page::before,
.wiz-auth-bg::before {
    content: '';
    position: absolute;
    inset: -100px;  /* over-extend so edges of drifting tile never reveal a seam */
    background-image: url('/img/wizard-pattern.svg');
    background-repeat: repeat;
    background-size: 280px 280px;
    opacity: 0.10;
    animation: wiz-drift 80s linear infinite;
    pointer-events: none;
    z-index: 0;
}

/* Lift everything inside above the icon layer. The wizard's card and
   the login's MudContainer are both direct children of the bg wrapper. */
.wiz-page > *,
.wiz-auth-bg > * {
    position: relative;
    z-index: 1;
}

@keyframes wiz-bg-shift {
    0%   { background-position: 0%   50%; }
    25%  { background-position: 50%  100%; }
    50%  { background-position: 100% 50%; }
    75%  { background-position: 50%  0%; }
    100% { background-position: 0%   50%; }
}

@keyframes wiz-drift {
    /* Diagonal drift over one tile period so the loop is seamless. */
    from { background-position: 0px 0px; }
    to   { background-position: -280px 280px; }
}

@media (prefers-reduced-motion: reduce) {
    .wiz-page,
    .wiz-auth-bg,
    .wiz-page::before,
    .wiz-auth-bg::before {
        animation: none;
    }
}

.wiz-card {
    width: 100%;
    max-width: 640px;
    background: var(--wiz-card-bg);
    border-radius: var(--wiz-radius);
    box-shadow: 0 10px 40px rgba(15, 23, 41, 0.08), 0 2px 6px rgba(15, 23, 41, 0.04);
    padding: 36px 40px 32px;
    overflow: hidden;
    position: relative;
}

@media (max-width: 600px) {
    .wiz-card {
        padding: 24px 20px;
        border-radius: 12px;
        box-shadow: none;
    }
    .wiz-page { padding: 0; }
}

/* ── Progress indicator ────────────────────────────────────────────────── */
.wiz-progress {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin-bottom: 24px;
}

.wiz-progress-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #FFFFFF;
    border: 2px solid var(--wiz-border-strong);
    flex-shrink: 0;
    transition: all 0.25s ease;
    cursor: default;
}

.wiz-progress-dot.is-clickable { cursor: pointer; }
.wiz-progress-dot.is-clickable:hover { transform: scale(1.2); }

.wiz-progress-dot.is-done {
    background: var(--wiz-primary);
    border-color: var(--wiz-primary);
}

.wiz-progress-dot.is-current {
    background: var(--wiz-primary);
    border-color: var(--wiz-primary);
    width: 14px;
    height: 14px;
    box-shadow: 0 0 0 4px rgba(15, 111, 255, 0.18);
}

.wiz-progress-bar {
    flex: 0 0 24px;
    height: 2px;
    background: var(--wiz-border);
    margin: 0 4px;
}
.wiz-progress-bar.is-done { background: var(--wiz-primary); }

.wiz-progress-label {
    text-align: center;
    font-size: 12px;
    color: var(--wiz-text-light);
    margin-top: 8px;
    margin-bottom: 24px;
}

/* ── Step body ─────────────────────────────────────────────────────────── */
.wiz-step {
    animation-duration: 280ms;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
    animation-fill-mode: both;
}

.wiz-step.slide-in-right { animation-name: wiz-slide-in-right; }
.wiz-step.slide-in-left  { animation-name: wiz-slide-in-left; }

@keyframes wiz-slide-in-right {
    from { opacity: 0; transform: translateX(40px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes wiz-slide-in-left {
    from { opacity: 0; transform: translateX(-40px); }
    to   { opacity: 1; transform: translateX(0); }
}

.wiz-heading {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 700;
    font-size: 26px;
    margin: 0 0 6px;
    color: var(--wiz-text);
    letter-spacing: -0.02em;
}
.wiz-subheading {
    font-size: 15px;
    color: var(--wiz-text-muted);
    margin: 0 0 24px;
}

/* ── Fields ────────────────────────────────────────────────────────────── */
.wiz-field { margin-bottom: 16px; }

.wiz-label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--wiz-text);
    margin-bottom: 6px;
}
.wiz-label .req { color: var(--wiz-error); margin-left: 2px; }

.wiz-input,
.wiz-select,
.wiz-textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1.5px solid var(--wiz-border);
    border-radius: var(--wiz-radius-sm);
    font-size: 15px;
    font-family: inherit;
    color: var(--wiz-text);
    background: #FFFFFF;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    box-sizing: border-box;
}

.wiz-input:focus,
.wiz-select:focus,
.wiz-textarea:focus {
    outline: none;
    border-color: var(--wiz-primary);
    box-shadow: 0 0 0 3px rgba(15, 111, 255, 0.15);
}

.wiz-input.is-invalid,
.wiz-select.is-invalid {
    border-color: var(--wiz-error);
}

.wiz-input.is-valid {
    border-color: var(--wiz-success);
}

.wiz-helper {
    font-size: 12px;
    color: var(--wiz-text-light);
    margin-top: 6px;
    line-height: 1.4;
}
.wiz-helper.is-error { color: var(--wiz-error); }
.wiz-helper.is-success { color: var(--wiz-success); }

.wiz-info {
    background: var(--wiz-primary-tint);
    border-radius: var(--wiz-radius-sm);
    padding: 12px 14px;
    font-size: 13px;
    color: #0A4FB3;
    margin-top: 8px;
}
.wiz-info::before { content: '💡 '; margin-right: 4px; }

/* ── Phone composite ──────────────────────────────────────────────────── */
.wiz-phone-row { display: flex; gap: 8px; }
.wiz-phone-cc {
    flex: 0 0 96px;
    padding: 12px 10px;
    border: 1.5px solid var(--wiz-border);
    border-radius: var(--wiz-radius-sm);
    font-size: 15px;
    font-family: inherit;
    background: #FFFFFF;
}
.wiz-phone-num { flex: 1; }

/* ── Password meter ────────────────────────────────────────────────────── */
.wiz-pw-row { position: relative; }
.wiz-pw-toggle {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: 0;
    cursor: pointer;
    padding: 6px;
    color: var(--wiz-text-muted);
    font-size: 18px;
    line-height: 1;
}
.wiz-pw-toggle:hover { color: var(--wiz-text); }

.wiz-pw-meter {
    display: flex;
    gap: 4px;
    margin-top: 8px;
    height: 4px;
}
.wiz-pw-meter-bar {
    flex: 1;
    background: var(--wiz-border);
    border-radius: 2px;
    transition: background 0.2s ease;
}
.wiz-pw-meter-bar.is-filled-1 { background: #E53935; }
.wiz-pw-meter-bar.is-filled-2 { background: #FB8C00; }
.wiz-pw-meter-bar.is-filled-3 { background: #FFB300; }
.wiz-pw-meter-bar.is-filled-4 { background: var(--wiz-success); }

.wiz-pw-strength-label {
    font-size: 12px;
    color: var(--wiz-text-muted);
    margin-top: 6px;
}

.wiz-checks { margin-top: 8px; }
.wiz-check {
    font-size: 12px;
    color: var(--wiz-text-light);
    margin-bottom: 3px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.wiz-check.is-met { color: var(--wiz-success); }
.wiz-check::before {
    content: '○';
    font-weight: bold;
    width: 14px;
    text-align: center;
}
.wiz-check.is-met::before { content: '✓'; }

/* ── Buttons ───────────────────────────────────────────────────────────── */
.wiz-actions {
    display: flex;
    gap: 12px;
    margin-top: 24px;
}

.wiz-btn {
    border: 0;
    border-radius: var(--wiz-radius-sm);
    padding: 13px 20px;
    font-size: 15px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.1s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.wiz-btn:disabled { cursor: not-allowed; opacity: 0.5; }
.wiz-btn:not(:disabled):active { transform: translateY(1px); }

.wiz-btn-primary {
    background: var(--wiz-primary);
    color: #FFFFFF;
    flex: 1;
}
.wiz-btn-primary:not(:disabled):hover { background: var(--wiz-primary-hover); }

.wiz-btn-secondary {
    background: #F3F4F6;
    color: var(--wiz-text);
    flex: 0 0 auto;
}
.wiz-btn-secondary:hover { background: var(--wiz-border); }

.wiz-btn-block { width: 100%; }
.wiz-btn-large { padding: 15px 24px; font-size: 16px; }

.wiz-btn-spinner {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #FFFFFF;
    border-radius: 50%;
    animation: wiz-spin 0.7s linear infinite;
}
@keyframes wiz-spin { to { transform: rotate(360deg); } }

.wiz-link {
    color: var(--wiz-primary);
    text-decoration: none;
    font-weight: 500;
    cursor: pointer;
    background: none;
    border: 0;
    font-family: inherit;
    font-size: inherit;
    padding: 0;
}
.wiz-link:hover { text-decoration: underline; }

/* ── Welcome step ──────────────────────────────────────────────────────── */
.wiz-welcome { text-align: center; padding: 12px 0; }
.wiz-welcome-logo {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 800;
    font-size: 32px;
    color: var(--wiz-primary);
    letter-spacing: -0.03em;
    margin-bottom: 8px;
}
.wiz-welcome h1 {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 30px;
    margin: 16px 0 8px;
    letter-spacing: -0.02em;
}
.wiz-welcome p { color: var(--wiz-text-muted); font-size: 16px; margin: 0 0 24px; }

.wiz-benefits {
    text-align: left;
    background: #F8FAFC;
    border-radius: var(--wiz-radius-sm);
    padding: 16px 18px;
    margin: 0 auto 24px;
    max-width: 360px;
}
.wiz-benefits li {
    list-style: none;
    padding: 6px 0 6px 28px;
    position: relative;
    font-size: 14px;
}
.wiz-benefits li::before {
    content: '✓';
    color: var(--wiz-success);
    font-weight: bold;
    position: absolute;
    left: 0;
}

.wiz-bottom-link { text-align: center; margin-top: 16px; font-size: 14px; color: var(--wiz-text-muted); }

/* ── Business type cards (step 2) ──────────────────────────────────────── */
/* 4-column layout only kicks in once each cell can comfortably fit the
   longest label (Electronics, Restaurant) plus its 2-line description.
   Below the breakpoint we stay 2-column for readability on tablets. */
.wiz-card-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}
@media (min-width: 640px) {
    .wiz-card-grid { grid-template-columns: repeat(4, 1fr); gap: 10px; }
}

.wiz-type-card {
    border: 1.5px solid var(--wiz-border);
    border-radius: var(--wiz-radius-sm);
    padding: 16px 8px;
    text-align: center;
    cursor: pointer;
    transition: all 0.15s ease;
    background: #FFFFFF;
    /* Reset native button styling so flex layout inside is predictable. */
    font-family: inherit;
    color: inherit;
    line-height: 1.3;
    min-height: 110px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.wiz-type-card:hover {
    border-color: var(--wiz-primary);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(15, 111, 255, 0.12);
}
.wiz-type-card.is-selected {
    border-color: var(--wiz-primary);
    background: var(--wiz-primary-tint);
}
.wiz-type-emoji { font-size: 28px; line-height: 1; margin-bottom: 8px; }
.wiz-type-title {
    font-weight: 600;
    font-size: 13px;
    color: var(--wiz-text);
    margin-bottom: 3px;
    white-space: nowrap;
}
.wiz-type-desc {
    font-size: 11px;
    color: var(--wiz-text-muted);
    /* Tight cells need width-aware ellipsis when the description is long
       (e.g. "Medicines, healthcare"). Two lines max keeps the row heights
       even across cards. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.3;
}

/* ── Plan cards (step 7) ───────────────────────────────────────────────── */
.wiz-plan-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}
@media (min-width: 600px) {
    .wiz-plan-grid { grid-template-columns: repeat(3, 1fr); align-items: stretch; }
}

.wiz-plan {
    border: 1.5px solid var(--wiz-border);
    border-radius: var(--wiz-radius-sm);
    padding: 18px 16px;
    cursor: pointer;
    transition: all 0.15s ease;
    background: #FFFFFF;
    position: relative;
    display: flex;
    flex-direction: column;
}
.wiz-plan:hover { border-color: var(--wiz-primary); transform: translateY(-2px); }
.wiz-plan.is-selected {
    border-color: var(--wiz-primary);
    background: var(--wiz-primary-tint);
    box-shadow: 0 8px 24px rgba(15, 111, 255, 0.15);
}
.wiz-plan.is-popular {
    border-color: var(--wiz-primary);
}

.wiz-plan-popular-badge {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--wiz-primary);
    color: #FFFFFF;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 10px;
    letter-spacing: 0.02em;
}

.wiz-plan-name {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 700;
    font-size: 17px;
    margin-bottom: 4px;
}
.wiz-plan-price { font-size: 24px; font-weight: 700; margin-bottom: 2px; }
.wiz-plan-price-period { font-size: 13px; color: var(--wiz-text-muted); margin-bottom: 14px; }

.wiz-plan-features {
    list-style: none;
    padding: 0;
    margin: 0 0 14px;
    font-size: 13px;
    flex: 1;
}
.wiz-plan-features li {
    padding: 4px 0 4px 22px;
    position: relative;
    color: var(--wiz-text);
}
.wiz-plan-features li::before {
    content: '✓';
    color: var(--wiz-success);
    font-weight: bold;
    position: absolute;
    left: 0;
}

/* ── Confirm step (step 8) ─────────────────────────────────────────────── */
.wiz-summary { margin-bottom: 12px; }
.wiz-summary-block {
    border-bottom: 1px solid var(--wiz-border);
    padding: 14px 0;
}
.wiz-summary-block:last-of-type { border-bottom: 0; }
.wiz-summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}
.wiz-summary-row h3 {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--wiz-text-muted);
    margin: 0;
}
.wiz-summary-line { font-size: 14px; color: var(--wiz-text); margin: 2px 0; }
.wiz-summary-line.is-strong { font-weight: 600; font-size: 15px; }

.wiz-checkbox-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 16px 0;
    font-size: 14px;
    cursor: pointer;
}
.wiz-checkbox-row input[type="checkbox"] {
    width: 18px; height: 18px; margin: 1px 0 0;
    accent-color: var(--wiz-primary);
    flex-shrink: 0;
    cursor: pointer;
}

/* ── Success step (step 9) ─────────────────────────────────────────────── */
.wiz-success-emoji {
    font-size: 56px;
    text-align: center;
    margin-bottom: 8px;
    animation: wiz-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes wiz-pop {
    0%   { transform: scale(0); }
    70%  { transform: scale(1.2); }
    100% { transform: scale(1); }
}

.wiz-cta-card {
    border: 1px solid var(--wiz-border);
    border-radius: var(--wiz-radius-sm);
    padding: 14px 16px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 14px;
    transition: all 0.15s ease;
}
.wiz-cta-card:hover {
    border-color: var(--wiz-primary);
    background: var(--wiz-primary-tint);
}
.wiz-cta-num {
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--wiz-primary);
    color: #FFFFFF;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.wiz-cta-body { flex: 1; }
.wiz-cta-title { font-weight: 600; font-size: 14px; }
.wiz-cta-desc { font-size: 12px; color: var(--wiz-text-muted); }
.wiz-cta-arrow { color: var(--wiz-primary); font-weight: 700; }

/* Top-level error banner shown when submit fails. */
.wiz-error-banner {
    background: #FEF2F2;
    color: #991B1B;
    border: 1px solid #FECACA;
    padding: 10px 14px;
    border-radius: var(--wiz-radius-sm);
    font-size: 13px;
    margin-bottom: 14px;
}

/* Inline check spinner for live validation. */
.wiz-mini-spinner {
    display: inline-block;
    width: 12px; height: 12px;
    border: 2px solid var(--wiz-border);
    border-top-color: var(--wiz-primary);
    border-radius: 50%;
    animation: wiz-spin 0.7s linear infinite;
    margin-right: 6px;
    vertical-align: -2px;
}