/* =============================================================
   Sidebar accent for the "Live preview" link — a subtle glowing
   dot so users notice the new section without hard-coding a color
   that would break in one of the themes.
   ============================================================= */
.docs-side-link-hot {
    font-weight: 600 !important;
    position: relative;
}
.docs-side-link-hot::before {
    content: '';
    position: absolute;
    left: 20px; top: 50%;
    width: 6px; height: 6px; border-radius: 50%;
    background: #fff;
    transform: translateY(-50%);
    box-shadow: 0 0 10px rgba(255,255,255,.8);
    animation: tpidPreviewPulse 2s ease-in-out infinite;
}
body.light .docs-side-link-hot::before,
.light-html .docs-side-link-hot::before {
    background: #111;
    box-shadow: 0 0 10px rgba(0,0,0,.35);
}
@keyframes tpidPreviewPulse {
    0%, 100% { opacity: .9; transform: translateY(-50%) scale(1); }
    50%      { opacity: .5; transform: translateY(-50%) scale(1.25); }
}

/* =============================================================
   TOKEN PAY ID — Native widget live preview styles.
   The widget itself reuses the REAL .auth-card / .auth-step /
   .auth-field / .auth-btn classes that drive auth.tokenpay.space,
   so the preview is byte-for-byte identical to production.

   This stylesheet only adds:
     1. The buttons showcase (.tpid-buttons-*)
     2. The control toolbar (.tpid-demo-*)
     3. A stage frame (.tpid-widget-stage) with two backdrops
     4. Scoped local-theme overrides on #tpidDemoStage[data-theme="..."]
        so the demo's theme switcher works independently of body.light.
   ============================================================= */

.tpid-preview-intro {
    color: var(--text-dim, rgba(255,255,255,.55));
    font-size: .9rem; line-height: 1.6; margin: 8px 0 18px;
}
.tpid-preview-tag {
    display: inline-block; padding: 3px 10px; border-radius: 999px;
    background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
    font-family: 'JetBrains Mono', monospace; font-size: .68rem;
    font-weight: 600; letter-spacing: .5px; vertical-align: middle;
    margin-right: 6px;
}
body.light .tpid-preview-tag { background: rgba(0,0,0,.05); border-color: rgba(0,0,0,.12); }

/* ----- Buttons showcase (3 cells) ----- */
.tpid-buttons-stage {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
    margin: 18px 0 8px;
}
.tpid-buttons-cell {
    border-radius: 18px;
    padding: 30px 18px 24px;
    display: flex; flex-direction: column; align-items: center; gap: 16px;
    border: 1px solid rgba(255,255,255,.06);
    position: relative;
    min-height: 180px; justify-content: center;
}
.tpid-stage-dark  { background: linear-gradient(180deg,#0c0c11,#000); }
.tpid-stage-light { background: linear-gradient(180deg,#f5f6f9,#e7eaf1); border-color: rgba(0,0,0,.06); }
.tpid-cell-label {
    position: absolute; top: 12px; left: 14px;
    font-size: .62rem; letter-spacing: 1.4px; font-weight: 700;
    text-transform: uppercase; opacity: .55;
    font-family: 'JetBrains Mono', monospace;
}
.tpid-stage-dark .tpid-cell-label  { color: rgba(255,255,255,.55); }
.tpid-stage-light .tpid-cell-label { color: rgba(0,0,0,.5); }
.tpid-cell-hint {
    font-size: .72rem; line-height: 1.4; text-align: center;
    max-width: 200px;
}
.tpid-stage-dark .tpid-cell-hint  { color: rgba(255,255,255,.4); }
.tpid-stage-light .tpid-cell-hint { color: rgba(0,0,0,.45); }

.tpid-demo-btn {
    border: none; cursor: pointer; padding: 0;
    font-family: 'Comfortaa', 'Inter', system-ui, sans-serif;
    display: inline-flex; align-items: center; justify-content: center;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
    position: relative; overflow: hidden;
}
.tpid-demo-btn:hover  { transform: translateY(-1px); box-shadow: 0 10px 28px rgba(0,0,0,.22); }
.tpid-demo-btn:active { transform: translateY(0); }

.tpid-demo-btn--dark {
    background: #000; color: #fff; border-radius: 999px;
    height: 48px; padding: 0 28px; min-width: 220px;
}
.tpid-demo-btn--dark img {
    height: 18px; width: auto; display: block;
    user-select: none; pointer-events: none;
}
/* High-specificity override: global body.light img[src*="tokenpay-id"]
   forces filter:brightness(0)!important on all TokenPay ID logos.
   Our preview needs to keep the WHITE logo on the dark pill regardless
   of the surrounding page's light/dark state. Selector specificity
   (0,4,2) beats the global (0,2,1). */
.tpid-buttons-stage .tpid-demo-btn.tpid-demo-btn--dark img[src*="tokenpay-id"],
body.light .tpid-buttons-stage .tpid-demo-btn.tpid-demo-btn--dark img[src*="tokenpay-id"],
.light-html .tpid-buttons-stage .tpid-demo-btn.tpid-demo-btn--dark img[src*="tokenpay-id"] {
    filter: none !important;
}
.tpid-demo-btn--light {
    background: #fff; color: #000; border-radius: 999px;
    height: 48px; padding: 0 28px; min-width: 220px;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
}
.tpid-demo-btn--light img {
    height: 18px; width: auto; display: block;
    user-select: none; pointer-events: none;
}
.tpid-demo-btn--icon {
    width: 48px; height: 48px; border-radius: 50%;
    background: #000; color: #fff;
    box-shadow: 0 6px 18px rgba(0,0,0,.25);
    padding: 0;
    overflow: hidden;
}
.tpid-demo-btn--icon .tpid-demo-icon-img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    user-select: none; pointer-events: none;
    border-radius: 50%;
}
/* Legacy T-mark fallback, kept for any cached markup. */
.tpid-demo-btn--icon .tpid-demo-icon-mark {
    font-family: 'Comfortaa', sans-serif; font-weight: 700; font-size: 1.25rem;
    display: block; line-height: 1;
}
/* High-specificity override to beat the global
   body.light img[src*="tokenpay"]|[src*="icon"] { filter: brightness(0) !important }
   rules that turn icon images pure black in light mode. */
.tpid-buttons-stage .tpid-demo-btn.tpid-demo-btn--icon img,
body.light .tpid-buttons-stage .tpid-demo-btn.tpid-demo-btn--icon img,
.light-html .tpid-buttons-stage .tpid-demo-btn.tpid-demo-btn--icon img {
    filter: none !important;
}

/* ----- Live widget control toolbar ----- */
.tpid-demo-controls {
    display: flex; flex-wrap: wrap; gap: 18px 24px; align-items: center;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 14px;
    padding: 12px 16px;
    margin: 22px 0 16px;
}
body.light .tpid-demo-controls {
    background: rgba(0,0,0,.03);
    border-color: rgba(0,0,0,.08);
}
.tpid-demo-ctl-group { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tpid-demo-ctl-label {
    font-size: .68rem; letter-spacing: 1.2px; font-weight: 700;
    text-transform: uppercase; opacity: .5; margin-right: 4px;
}
.tpid-demo-pill {
    padding: 6px 12px; border-radius: 999px;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.1);
    color: rgba(255,255,255,.75);
    font-family: inherit; font-size: .78rem; font-weight: 600;
    cursor: pointer; transition: all .18s ease;
    line-height: 1; letter-spacing: .3px;
}
body.light .tpid-demo-pill {
    background: rgba(0,0,0,.04);
    border-color: rgba(0,0,0,.1);
    color: rgba(0,0,0,.75);
}
.tpid-demo-pill:hover { background: rgba(255,255,255,.1); color: #fff; }
body.light .tpid-demo-pill:hover { background: rgba(0,0,0,.08); color: #000; }
.tpid-demo-pill.is-active {
    background: var(--text, #fff); color: var(--bg, #000); border-color: var(--text, #fff);
}
body.light .tpid-demo-pill.is-active { background: #000; color: #fff; border-color: #000; }

/* ----- Stage frame that wraps the auth widget ----- */
.tpid-widget-stage {
    position: relative;
    border-radius: 24px;
    padding: 50px 24px;
    display: flex; align-items: center; justify-content: center;
    min-height: 620px;
    overflow: hidden;
    margin-bottom: 32px;
    isolation: isolate;
    transition: background .3s ease;
}
.tpid-widget-stage[data-theme="dark"] {
    background:
      radial-gradient(circle at 28% 18%, rgba(255,255,255,.04) 0%, transparent 45%),
      radial-gradient(circle at 78% 82%, rgba(255,255,255,.025) 0%, transparent 50%),
      linear-gradient(180deg,#0a0a10 0%, #050507 100%);
}
.tpid-widget-stage[data-theme="light"] {
    background:
      radial-gradient(circle at 28% 18%, rgba(255,255,255,.65) 0%, transparent 50%),
      radial-gradient(circle at 78% 82%, rgba(0,0,0,.04) 0%, transparent 50%),
      linear-gradient(180deg,#eef0f5 0%, #e4e7ef 40%, #dde1ec 100%);
}

/* The .auth-* widget is rendered inside .tpid-widget-stage and wrapped
   in .tpid-widget-frame so we can constrain its width. The .auth-card
   itself is styled by the global styles.css — pixel-identical to /login. */
.tpid-widget-frame {
    width: 100%;
    max-width: 420px;
    position: relative; z-index: 1;
}

/* Render only the active step (matches existing .auth-step behaviour) */
#tpidDemoStage .auth-step { display: none; }
#tpidDemoStage .auth-step.active {
    display: block;
    animation: stepIn .35s cubic-bezier(.4,0,.2,1) both;
}

/* Steps animation already defined globally; redeclare in case. */
@keyframes stepIn {
    from { opacity: 0; transform: translateX(20px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* ===========================================================
   LOCAL THEME OVERRIDES
   The auth widget normally listens to body.light to switch
   theme. Here we want the demo's own data-theme switch to
   control it independently of the surrounding page.
   The selectors below have higher specificity (id + attr)
   than body.light .auth-* so they always win.
   =========================================================== */

/* IMPORTANT: production styles.css uses `body.light .auth-* { … !important }`
   on lines 837–848. To make our scoped data-theme switch beat those rules
   regardless of the surrounding docs page's body.light state, we must also
   use !important here. Without it the page's auto-detected light mode wins
   over our local data-theme="dark" widget. */

/* --- LIGHT theme inside the demo, regardless of page theme --- */
#tpidDemoStage[data-theme="light"] .auth-card {
    background: rgba(255,255,255,.95) !important;
    border-color: rgba(0,0,0,.08) !important;
    box-shadow: 0 20px 60px rgba(0,0,0,.08), 0 0 0 1px rgba(0,0,0,.04) !important;
}
#tpidDemoStage[data-theme="light"] .auth-card::before {
    background: linear-gradient(90deg,transparent,rgba(0,0,0,.06),transparent) !important;
}
/* Logo inside widget must follow the scoped data-theme. When data-theme="light"
   the widget should show the DARK (black) logo; when data-theme="dark" it
   should show the LIGHT (white) logo. We swap with `content: url(…)` so the
   same <img src="tokenpay-id-light.png"> markup works in both themes. */
#tpidDemoStage[data-theme="light"] .auth-card-logo img {
    content: url('tokenpay-id-dark.png') !important;
    filter: drop-shadow(0 0 30px rgba(0,0,0,.06)) !important;
}
#tpidDemoStage[data-theme="light"] .auth-card label,
#tpidDemoStage[data-theme="light"] .auth-field label {
    color: rgba(0,0,0,.4) !important;
}
#tpidDemoStage[data-theme="light"] .auth-field input {
    background: rgba(0,0,0,.03) !important;
    border-color: rgba(0,0,0,.08) !important;
    color: #111 !important;
}
#tpidDemoStage[data-theme="light"] .auth-field input::placeholder { color: rgba(0,0,0,.25) !important; }
#tpidDemoStage[data-theme="light"] .auth-field input:focus {
    border-color: rgba(0,0,0,.2) !important;
    box-shadow: 0 0 0 3px rgba(0,0,0,.03) !important;
}
#tpidDemoStage[data-theme="light"] .auth-btn {
    background: #111 !important; color: #fff !important;
}
#tpidDemoStage[data-theme="light"] .auth-btn:hover {
    background: #222 !important; box-shadow: 0 6px 24px rgba(0,0,0,.12) !important;
}
#tpidDemoStage[data-theme="light"] .auth-btn-secondary {
    background: transparent !important; color: #111 !important; border-color: rgba(0,0,0,.15) !important;
}
#tpidDemoStage[data-theme="light"] .auth-step-back { color: rgba(0,0,0,.4) !important; }
#tpidDemoStage[data-theme="light"] .auth-step-back:hover { color: #000 !important; }
#tpidDemoStage[data-theme="light"] .auth-step-email {
    background: rgba(0,0,0,.03) !important;
    border-color: rgba(0,0,0,.06) !important;
    color: rgba(0,0,0,.5) !important;
}
#tpidDemoStage[data-theme="light"] .auth-footer { color: rgba(0,0,0,.35) !important; }
#tpidDemoStage[data-theme="light"] .auth-footer a { color: #111 !important; border-color: rgba(0,0,0,.15) !important; }
#tpidDemoStage[data-theme="light"] .auth-alt-divider-line { background: rgba(0,0,0,.08) !important; }
#tpidDemoStage[data-theme="light"] .auth-alt-divider-text { color: rgba(0,0,0,.35) !important; }
#tpidDemoStage[data-theme="light"] .auth-alt-btn-block {
    background: rgba(0,0,0,.03) !important;
    border-color: rgba(0,0,0,.1) !important;
    color: rgba(0,0,0,.55) !important;
}
#tpidDemoStage[data-theme="light"] .auth-alt-btn-block:hover {
    background: rgba(0,0,0,.06) !important; color: rgba(0,0,0,.75) !important;
}
#tpidDemoStage[data-theme="light"] .auth-alt-btn-sm,
#tpidDemoStage[data-theme="light"] .auth-alt-btn-xs,
#tpidDemoStage[data-theme="light"] .auth-alt-btn-muted { color: rgba(0,0,0,.45) !important; }

/* --- DARK theme inside the demo, regardless of page theme ---
   Reset whatever body.light may have applied so the dark widget
   stays dark even when the docs page itself is in light mode.   */
#tpidDemoStage[data-theme="dark"] .auth-card {
    background: rgba(7,7,9,.92) !important;
    border-color: rgba(255,255,255,.1) !important;
    box-shadow:
      0 0 100px rgba(255,255,255,.015),
      0 40px 100px rgba(0,0,0,.65),
      inset 0 1px 0 rgba(255,255,255,.12),
      inset -1px 0 0 rgba(255,255,255,.04) !important;
}
#tpidDemoStage[data-theme="dark"] .auth-card::before {
    background: linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent) !important;
}
#tpidDemoStage[data-theme="dark"] .auth-card-logo img {
    content: url('tokenpay-id-light.png') !important;
    filter: drop-shadow(0 0 40px rgba(255,255,255,.15)) !important;
}
#tpidDemoStage[data-theme="dark"] .auth-card label,
#tpidDemoStage[data-theme="dark"] .auth-field label {
    color: rgba(255,255,255,.35) !important;
}
#tpidDemoStage[data-theme="dark"] .auth-field input {
    background: rgba(255,255,255,.03) !important;
    border-color: rgba(255,255,255,.08) !important;
    color: #fff !important;
}
#tpidDemoStage[data-theme="dark"] .auth-field input::placeholder { color: rgba(255,255,255,.2) !important; }
#tpidDemoStage[data-theme="dark"] .auth-field input:focus {
    border-color: rgba(255,255,255,.25) !important;
    box-shadow: 0 0 0 3px rgba(255,255,255,.03) !important;
}
#tpidDemoStage[data-theme="dark"] .auth-btn {
    background: #fff !important; color: #000 !important;
}
#tpidDemoStage[data-theme="dark"] .auth-btn:hover {
    background: #e8e8e8 !important; box-shadow: 0 8px 32px rgba(255,255,255,.12) !important;
}
#tpidDemoStage[data-theme="dark"] .auth-btn-secondary {
    background: transparent !important; color: #fff !important; border-color: rgba(255,255,255,.12) !important;
}
#tpidDemoStage[data-theme="dark"] .auth-step-back { color: rgba(255,255,255,.4) !important; }
#tpidDemoStage[data-theme="dark"] .auth-step-back:hover { color: #fff !important; }
#tpidDemoStage[data-theme="dark"] .auth-step-email {
    background: rgba(255,255,255,.04) !important;
    border-color: rgba(255,255,255,.06) !important;
    color: rgba(255,255,255,.6) !important;
}
#tpidDemoStage[data-theme="dark"] .auth-footer { color: rgba(255,255,255,.35) !important; }
#tpidDemoStage[data-theme="dark"] .auth-footer a { color: #fff !important; border-color: rgba(255,255,255,.15) !important; }
#tpidDemoStage[data-theme="dark"] .auth-alt-divider-line { background: rgba(255,255,255,.08) !important; }
#tpidDemoStage[data-theme="dark"] .auth-alt-divider-text { color: rgba(255,255,255,.25) !important; }
#tpidDemoStage[data-theme="dark"] .auth-alt-btn-block {
    background: rgba(255,255,255,.04) !important;
    border-color: rgba(255,255,255,.1) !important;
    color: rgba(255,255,255,.6) !important;
}
#tpidDemoStage[data-theme="dark"] .auth-alt-btn-block:hover {
    background: rgba(255,255,255,.08) !important; color: rgba(255,255,255,.8) !important;
}
#tpidDemoStage[data-theme="dark"] .auth-alt-btn-sm,
#tpidDemoStage[data-theme="dark"] .auth-alt-btn-xs,
#tpidDemoStage[data-theme="dark"] .auth-alt-btn-muted { color: rgba(255,255,255,.4) !important; }

/* Disable focus animations on read-only demo inputs to keep the
   widget visually stable when users interact. */
#tpidDemoStage .auth-field input { transition: border-color .2s, background .2s, box-shadow .2s; }
#tpidDemoStage .auth-field input:focus { transform: none; }

/* The production .auth-field / .auth-card-logo / .auth-btn animations
   use `backwards` fill mode and per-child delays — they look great on
   the real /login page where they fire ONCE on first load, but in our
   demo we switch steps live and the delayed animations would briefly
   hide elements every time. Disable them here so the widget renders
   instantly and stays fully visible. */
#tpidDemoStage .auth-card-logo,
#tpidDemoStage .auth-card-logo img,
#tpidDemoStage .auth-field,
#tpidDemoStage .auth-field:nth-child(1),
#tpidDemoStage .auth-field:nth-child(2),
#tpidDemoStage .auth-field:nth-child(3),
#tpidDemoStage .auth-btn,
#tpidDemoStage .auth-check,
#tpidDemoStage .auth-step.active {
    animation: none !important;
}
#tpidDemoStage .auth-card-logo img { filter: none; }
#tpidDemoStage[data-theme="dark"] .auth-card-logo img {
    filter: drop-shadow(0 0 40px rgba(255,255,255,.15));
}
#tpidDemoStage[data-theme="light"] .auth-card-logo img {
    filter: drop-shadow(0 0 30px rgba(0,0,0,.06));
}

/* Success step (not in production login.html — preview only) */
.tpid-success {
    text-align: center;
    padding: 12px 0 4px;
    animation: stepIn .35s cubic-bezier(.4,0,.2,1) both;
}
.tpid-success-mark {
    width: 64px; height: 64px;
    margin: 0 auto 16px;
    border-radius: 50%;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.18);
    display: flex; align-items: center; justify-content: center;
    color: #fff;
}
.tpid-success-mark svg { width: 28px; height: 28px; }
.tpid-success-title {
    font-size: 1.15rem; font-weight: 700;
    margin: 0 0 6px; color: #fff;
}
.tpid-success-sub {
    font-size: .85rem; color: rgba(255,255,255,.55);
    margin: 0; line-height: 1.5;
}
#tpidDemoStage[data-theme="light"] .tpid-success-mark {
    background: rgba(0,0,0,.05);
    border-color: rgba(0,0,0,.12); color: #000;
}
#tpidDemoStage[data-theme="light"] .tpid-success-title { color: #111; }
#tpidDemoStage[data-theme="light"] .tpid-success-sub { color: rgba(0,0,0,.5); }

@media (max-width: 720px) {
    .tpid-widget-stage { padding: 32px 12px; min-height: 600px; }
    .tpid-buttons-cell { padding: 26px 14px 20px; min-height: 160px; }
    .tpid-demo-btn--dark, .tpid-demo-btn--light { min-width: 180px; height: 44px; padding: 0 22px; }
    .tpid-demo-btn--dark img, .tpid-demo-btn--light img { height: 16px; }
    .tpid-demo-controls { gap: 12px 16px; padding: 12px; }
}