/* ============================================================
   ORVO Setup — Owner Onboarding Stylesheet
   Theme: Dark, Outfit font, Teal accent (#188796)
   Mobile-first design
   ============================================================ */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

/* --- Accent & Selection --- */
:root { accent-color: #188796; }
::selection { background: #188796; color: #fff; }
::-moz-selection { background: #188796; color: #fff; }
select option:checked { background: #188796; color: #fff; }

html {
    background: #000000;
    scrollbar-gutter: stable;
    overflow-y: scroll;
    touch-action: pan-x pan-y;
    scrollbar-width: thin;
    scrollbar-color: #333333 transparent;
}

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #333333; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #555555; }

body {
    font-family: 'Outfit', system-ui, -apple-system, sans-serif;
    background: #000000;
    color: #FFFFFF;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    opacity: 0;
    animation: pageIn 0.15s ease-out forwards;
    overflow-x: hidden;
}

a { color: #188796; text-decoration: none; }
a:hover { color: #73D1DE; }

/* --- Layout --- */
.setup-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 16px 16px;
    max-width: 480px;
    margin: 0 auto;
    width: 100%;
}

/* --- Logo --- */
.setup-logo {
    text-align: center;
    margin: 8px 0 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.setup-logo-img {
    height: 28px;
    filter: brightness(0) invert(1);
}

.setup-logo small {
    font-size: 13px;
    color: #888888;
    letter-spacing: 0.05em;
    font-weight: 400;
}

/* --- Page Loading Bar --- */
.page-loader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 9999;
    pointer-events: none;
}

.page-loader-bar {
    height: 100%;
    background: #188796;
    box-shadow: 0 0 8px rgba(24, 135, 150, 0.6);
    border-radius: 0 2px 2px 0;
    width: 0;
    animation: pageLoad 1.8s ease-in-out infinite;
}

@keyframes pageLoad {
    0%   { width: 0; margin-left: 0; }
    50%  { width: 60%; margin-left: 20%; }
    100% { width: 0; margin-left: 100%; }
}

/* --- Progress Steps --- */
.progress-bar {
    display: flex;
    align-items: center;
    gap: 0;
    margin: 14px 0 18px;
    width: 100%;
    max-width: 280px;
}

.progress-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #333333;
    transition: background 0.3s, box-shadow 0.3s;
    flex-shrink: 0;
}

.progress-dot.active {
    background: #188796;
    box-shadow: 0 0 8px rgba(24, 135, 150, 0.5);
}

.progress-dot.done {
    background: #188796;
}

.progress-line {
    flex: 1;
    height: 2px;
    background: #333333;
    transition: background 0.3s;
}

.progress-line.done {
    background: #188796;
}

/* --- Card --- */
.card {
    background: #171717;
    border: 1px solid #333333;
    border-radius: 16px;
    padding: 22px 22px;
    width: 100%;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
}

.card-title {
    font-size: 20px;
    font-weight: 600;
    color: #FFFFFF;
    margin-bottom: 6px;
    text-align: center;
}

.card-subtitle {
    font-size: 14px;
    color: #888888;
    text-align: center;
    margin-bottom: 18px;
    line-height: 1.5;
}

/* --- Steps --- */
.step {
    display: none;
    width: 100%;
}

.step.active {
    display: block;
    animation: stepIn 0.35s ease-out;
}

.step.exiting {
    display: block;
    animation: stepOut 0.15s ease-in forwards;
    pointer-events: none;
}

/* --- PIN Input --- */
.pin-section {
    margin-bottom: 28px;
}

.pin-label {
    font-size: 14px;
    font-weight: 600;
    color: #AAAAAA;
    text-align: center;
    margin-bottom: 16px;
}

.pin-inputs {
    display: flex;
    justify-content: center;
    gap: 12px;
}

.pin-box {
    width: 60px;
    height: 60px;
    background: #222222;
    border: 2px solid #444444;
    border-radius: 10px;
    color: #FFFFFF;
    font-size: 28px;
    font-weight: 700;
    font-family: inherit;
    text-align: center;
    outline: none;
    transition: border-color 0.15s;
    -webkit-text-security: disc;
}

.pin-box:focus {
    border-color: #188796;
}

.pin-box.error {
    border-color: #B52B2B;
    animation: shake 0.3s;
}

.pin-box.success {
    border-color: #0CAB41;
}

.pin-match {
    text-align: center;
    font-size: 13px;
    margin-top: 12px;
    min-height: 20px;
}

.pin-match.error { color: #B52B2B; }
.pin-match.success { color: #0CAB41; }

.password-match {
    text-align: center;
    font-size: 13px;
    margin-top: -8px;
    min-height: 16px;
}

/* When the password-match strip is the last thing before the button,
   collapse the btn-group's normal 16px gap. The strip already provides
   enough breathing room, and stacking both leaves a 50px+ void on the
   password step (mostly from the strip's reserved height). */
.password-match + .btn-group { margin-top: 6px; }

.password-match.error { color: #B52B2B; }
.password-match.success { color: #0CAB41; }

/* --- Forms --- */
.field {
    margin-bottom: 14px;
}

.field label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #AAAAAA;
    margin-bottom: 6px;
}

.field input,
.field select {
    width: 100%;
    box-sizing: border-box;
    background: #1a1a1a;
    color: #FFFFFF;
    border: 1px solid #333333 !important;
    border-radius: 8px;
    padding: 14px 16px;
    font-size: 16px;
    line-height: 1.25;
    font-family: inherit;
    outline: none;
    box-shadow: none !important;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color 0.15s;
}

.field input::placeholder {
    color: #666666;
}

/* OrvoDatepicker swaps the upgraded input to .dp-input AND wraps it in a
   .dp-anchor span (inline-block by default). On the wizard chassis we
   want every input to read identically -- same height, same border, same
   corners, same line-box -- so we (a) flatten the anchor to display:block
   and (b) re-declare every visual rule the dp-input default sets, with
   the wizard's tall-touch-target tokens instead of the portal-compact
   ones. The !important on border-color is a sledgehammer, but the
   cascade was leaking a subtly different grey through on iOS Safari and
   the user reported the borders read as different shades; this guarantees
   both render with the exact same #333. Other surfaces (my.orvopos.com,
   staff portal pages) keep the compact defaults from orvo-datepicker.css. */
.field .dp-anchor {
    display: block;
    width: 100%;
}
.field input.dp-input {
    width: 100%;
    box-sizing: border-box;
    background: #1a1a1a;
    color: #FFFFFF;
    border: 1px solid #333333 !important;
    border-radius: 8px;
    padding: 14px 16px;
    font-size: 16px;
    line-height: 1.25;
    font-family: inherit;
    cursor: pointer;
    outline: none;
    box-shadow: none !important;
    /* OrvoDatepicker sets input.readOnly = true to block the iOS keyboard,
       which means any page-level `input[readonly]` rule that dims/disables
       the field (eg. opacity: 0.7) silently catches the datepicker too --
       and the DOB looked greyer than the surrounding inputs. Pin opacity
       to 1 so the dp-input renders identical to a regular .field input
       no matter what an individual page's stylesheet does. */
    opacity: 1 !important;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color 0.15s;
}
.field input.dp-input:focus,
.field input:focus,
.field select:focus {
    border-color: #188796 !important;
}
.field input.dp-input::placeholder {
    color: #666666;
    opacity: 1;
}

.field-hint {
    font-size: 12px;
    color: #666666;
    margin-top: 6px;
}

.field .hint {
    font-size: 12px;
    color: #666666;
    margin-top: 4px;
}

.field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.field-row-setup {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.field-row-setup .field {
    margin-bottom: 0;
}

@media (max-width: 400px) {
    .field-row-setup {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

.field select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 40px;
}

.field select option {
    background: #222222;
    color: #FFFFFF;
}

/* --- Toggle Switch --- */
.toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0;
    border-bottom: 1px solid #222222;
}

.toggle-label {
    font-size: 15px;
    color: #CCCCCC;
}

.toggle-sublabel {
    font-size: 12px;
    color: #666666;
    margin-top: 2px;
}

.toggle {
    position: relative;
    width: 48px;
    height: 28px;
    flex-shrink: 0;
}

.toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-track {
    position: absolute;
    inset: 0;
    background: #333333;
    border-radius: 14px;
    cursor: pointer;
    transition: background 0.2s;
}

.toggle-track::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 22px;
    height: 22px;
    background: #888888;
    border-radius: 50%;
    transition: transform 0.2s, background 0.2s;
}

.toggle input:checked + .toggle-track {
    background: #188796;
}

.toggle input:checked + .toggle-track::after {
    transform: translateX(20px);
    background: #FFFFFF;
}

/* --- Buttons --- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    background: #171717;
    color: #FFFFFF;
    border: 1px solid #444444;
    border-radius: 10px;
    padding: 16px 24px;
    font-size: 16px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, transform 0.1s;
    text-decoration: none;
}

.btn:hover {
    background: #2a2a2a;
    border-color: #666666;
    color: #FFFFFF;
}

.btn:active {
    transform: scale(0.98);
}

.btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
}

.btn-primary {
    background: #188796;
    border-color: #188796;
}

.btn-primary:hover {
    background: #1a9dae;
    border-color: #1a9dae;
}

.btn-apple {
    background: #000000;
    border-color: #555555;
}

.btn-apple:hover {
    background: #1a1a1a;
    border-color: #888888;
}

.btn-google {
    background: #FFFFFF;
    color: #333333;
    border-color: #CCCCCC;
}

.btn-google:hover {
    background: #F5F5F5;
    border-color: #AAAAAA;
    color: #333333;
}

.btn-skip {
    background: transparent;
    border-color: transparent;
    color: #666666;
    font-size: 14px;
    padding: 12px;
}

.btn-sm {
    width: auto;
    padding: 8px 14px;
    font-size: 13px;
    border-radius: 6px;
}

.btn-skip:hover {
    color: #888888;
    background: transparent;
    border-color: transparent;
}

.btn-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 16px;
}

/* --- Auth Preview --- */
.auth-preview {
    background: #111111;
    border: 1px solid #333333;
    border-radius: 12px;
    padding: 24px 20px;
    text-align: center;
    margin-bottom: 24px;
}

.auth-preview-icon {
    margin-bottom: 16px;
}

.auth-preview-code {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-bottom: 12px;
}

.auth-preview-code span {
    width: 36px;
    height: 44px;
    background: #222222;
    border: 1px solid #444444;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 700;
    color: #188796;
    font-variant-numeric: tabular-nums;
}

.auth-preview-label {
    font-size: 12px;
    color: #666666;
}

/* --- QR Code (ORVO Branded) --- */
.qr-container {
    background: #171717;
    border: 1px solid #333333;
    border-radius: 10px;
    padding: 24px;
    text-align: center;
    margin-bottom: 24px;
}

.qr-code {
    display: flex;
    justify-content: center;
    margin: 0 auto;
}

.qr-code canvas,
.qr-code svg {
    border-radius: 6px;
}

.qr-caption {
    font-size: 13px;
    color: #888888;
    margin-top: 12px;
}

/* --- Auth Store Buttons --- */
.auth-store-buttons {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 8px;
    position: relative;
}

.auth-store-disabled {
    opacity: 0.35;
    pointer-events: none;
}

.auth-coming-soon-label {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #171717;
    color: #888;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 14px;
    border-radius: 20px;
    border: 1px solid #444;
    letter-spacing: 0.05em;
    pointer-events: none;
    z-index: 1;
}

/* Per-button store state (iOS live, Android pending). Apple-standard
   black pill for the App Store button, dimmed Android with "coming soon". */
.auth-store-btn {
    display: flex !important;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 48px;
    text-decoration: none;
    font-weight: 600;
    border-radius: 10px;
}
a.auth-store-btn.btn-accent,
a.auth-store-btn.btn-primary,
.auth-store-btn.btn-accent {
    background: #000000 !important;
    border: 1px solid #555555 !important;  /* matches setup.css .btn-apple */
    color: #FFFFFF !important;
    letter-spacing: 0.01em;
}
a.auth-store-btn.btn-accent:hover,
a.auth-store-btn.btn-primary:hover,
.auth-store-btn.btn-accent:hover {
    background: #1a1a1a !important;
    border-color: #888888 !important;
    color: #FFFFFF !important;
}
.auth-store-btn--soon {
    opacity: 0.5;
    cursor: not-allowed;
    flex-direction: column;
    gap: 2px;
    min-height: 58px;
}
.auth-store-btn--soon .auth-store-btn-soon {
    font-size: 11px;
    font-weight: 500;
    color: #9aa3a5;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* --- Auth Credentials --- */
.auth-credentials {
    background: #111111;
    border: 1px solid #333333;
    border-radius: 10px;
    padding: 16px 20px;
    margin-bottom: 8px;
}

.auth-credential-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
}

.auth-credential-row + .auth-credential-row {
    border-top: 1px solid #2a2a2a;
}

.auth-credential-label {
    font-size: 13px;
    color: #888888;
    font-weight: 500;
}

.auth-credential-value {
    font-size: 15px;
    color: #188796;
    font-weight: 600;
    user-select: all;
    -webkit-user-select: all;
    cursor: pointer;
}

.auth-credential-value:active {
    opacity: 0.6;
}

@media (max-width: 600px) {
    .auth-credential-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }
    .auth-credential-token {
        font-size: 22px;
        white-space: nowrap;
        overflow: hidden;
        max-width: 100%;
    }
}

/* --- Wallet Section --- */
.wallet-preview {
    background: #111111;
    border: 1px solid #333333;
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    margin-bottom: 24px;
}

.wallet-preview-title {
    font-size: 12px;
    color: #888888;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 12px;
}

.wallet-preview-name {
    font-size: 18px;
    font-weight: 600;
    color: #FFFFFF;
    margin-bottom: 4px;
}

.wallet-preview-role {
    font-size: 14px;
    color: #188796;
    margin-bottom: 4px;
}

.wallet-preview-shop {
    font-size: 13px;
    color: #888888;
}

/* --- Success --- */
.success-icon {
    width: 64px;
    height: 64px;
    background: rgba(12, 171, 65, 0.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    font-size: 32px;
}

/* --- Error States --- */
.error-card {
    text-align: center;
}

.error-icon {
    width: 64px;
    height: 64px;
    background: rgba(181, 43, 43, 0.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    font-size: 32px;
}

.error-msg {
    font-size: 13px;
    color: #B52B2B;
    text-align: center;
    margin-top: 8px;
    min-height: 18px;
}

/* --- Footer --- */
.setup-footer {
    text-align: center;
    padding: 16px;
    font-size: 12px;
    color: #555555;
}

/* --- Toast Notifications --- */
.toast-container {
    position: fixed;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1001;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.toast {
    display: flex; align-items: center; gap: 12px;
    border: 1px solid rgba(255,255,255,0.08); border-left: 4px solid;
    border-radius: 10px; padding: 14px 20px;
    font-size: 14px; font-weight: 500; color: #fff;
    animation: toastIn 0.3s cubic-bezier(0.25,0.8,0.25,1);
    max-width: 420px; width: max-content;
    background: rgba(30,30,30,0.75);
    -webkit-backdrop-filter: blur(16px) saturate(1.2);
    backdrop-filter: blur(16px) saturate(1.2);
    box-shadow: 0 8px 32px rgba(0,0,0,0.4);
}
.toast-icon { flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.toast-icon svg { width: 20px; height: 20px; }
.toast-success { border-left-color: #0CAB41; }
.toast-success .toast-icon { color: #4ADE80; }
.toast-error { border-left-color: #B52B2B; }
.toast-error .toast-icon { color: #F87171; }
.toast-info { border-left-color: #188796; }
.toast-info .toast-icon { color: #73D1DE; }
.toast-warning { border-left-color: #B7481F; }
.toast-warning .toast-icon { color: #FB923C; }

/* --- Loading --- */
.loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px;
    color: #555555;
    font-size: 14px;
}

/* --- Animations --- */
@keyframes pageIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes stepIn {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes stepOut {
    from { opacity: 1; transform: translateY(0); }
    to   { opacity: 0; transform: translateY(-8px); }
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-6px); }
    75% { transform: translateX(6px); }
}

@keyframes toastIn {
    from { opacity: 0; transform: translateY(-12px) scale(0.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes toastOut {
    from { opacity: 1; transform: translateY(0) scale(1); }
    to { opacity: 0; transform: translateY(-12px) scale(0.96); }
}

/* --- Loading Dots Spinner --- */
.orvo-dots { display:inline-flex; align-items:center; gap:var(--dot-gap,5px); }
.orvo-dots .dot { width:var(--dot-size,7px); height:var(--dot-size,7px); border-radius:50%; background:currentColor; animation:orvoBounce 1s ease-in-out infinite; }
.orvo-dots .dot:nth-child(2) { animation-delay:0.15s; }
.orvo-dots .dot:nth-child(3) { animation-delay:0.3s; }
@keyframes orvoBounce { 0%,60%,100%{transform:translateY(0);opacity:0.3;} 30%{transform:translateY(calc(var(--dot-size,7px)*-1.5));opacity:1;} }
.orvo-dots--xs{--dot-size:3px;--dot-gap:3px;} .orvo-dots--sm{--dot-size:5px;--dot-gap:4px;} .orvo-dots--md{--dot-size:7px;--dot-gap:5px;}

/* --- Responsive --- */
@media (min-width: 600px) {
    .setup-container {
        padding: 28px 24px;
    }
    .card {
        padding: 28px 30px;
    }
}