/* public/css/depth.css - Shared drawer layout and 3D depth layer for customer, admin and public pages.
   Loaded after the page stylesheets so it can refine them without touching the base design system. */

:root {
  --elev-1: inset 0 1px 0 rgba(255,255,255,.05), 0 6px 16px -8px rgba(0,0,0,.55);
  --elev-2: inset 0 1px 0 rgba(255,255,255,.07), 0 16px 34px -14px rgba(0,0,0,.7), 0 4px 10px -4px rgba(0,0,0,.35);
  --elev-3: inset 0 1px 0 rgba(255,255,255,.1), 0 30px 60px -20px rgba(0,0,0,.8), 0 14px 34px -14px rgba(255,59,48,.35);
  --press-edge: #8f1a12;
  --ease-out: cubic-bezier(.16,1,.3,1);
}
[data-theme="light"] {
  --elev-1: inset 0 1px 0 rgba(255,255,255,.9), 0 4px 12px -6px rgba(15,23,42,.14);
  --elev-2: inset 0 1px 0 rgba(255,255,255,.9), 0 14px 30px -14px rgba(15,23,42,.2), 0 3px 8px -4px rgba(15,23,42,.08);
  --elev-3: inset 0 1px 0 rgba(255,255,255,1), 0 26px 50px -20px rgba(15,23,42,.28), 0 12px 30px -14px rgba(255,59,48,.25);
  --press-edge: #c2281d;
}

/* ---------- Icons ---------- */
.ico { width:18px; height:18px; flex-shrink:0; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.svg-sprite { position:absolute; width:0; height:0; overflow:hidden; }

/* ---------- Drawer (shared by customer + admin) ---------- */
.nav-drawer {
  transform: perspective(1200px) translateX(-100%) rotateY(14deg);
  transform-origin: left center;
  transition: transform .5s var(--ease-out), box-shadow .5s var(--ease-out);
  background: linear-gradient(180deg, var(--bg-secondary) 0%, var(--bg-primary) 100%);
}
.nav-drawer.open, .nav-drawer.menu-open {
  transform: perspective(1200px) translateX(0) rotateY(0);
  box-shadow: 30px 0 80px -20px rgba(0,0,0,.7), 1px 0 0 rgba(255,59,48,.18);
}
.drawer-header { padding:18px 20px; }
.drawer-header .brand-logo { text-decoration:none; }
.drawer-tag { margin-left:8px; font-size:.68rem; font-weight:700; letter-spacing:.04em; padding:3px 9px; border-radius:var(--radius-full); background:var(--accent-gradient); color:#fff; }

.drawer-user-card {
  margin:14px 16px 6px; padding:16px; gap:6px;
  background: linear-gradient(135deg, rgba(255,59,48,.16) 0%, rgba(255,94,58,.05) 45%, var(--bg-tertiary) 100%);
  border:1px solid var(--border-accent);
  box-shadow: var(--elev-1);
}
.drawer-eyebrow { font-size:.74rem; color:var(--text-muted); font-weight:600; }
.drawer-balance-row { display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
#drawer-balance-val { font-size:1.3rem; font-weight:800; font-family:var(--font-mono); color:var(--color-success); }
.drawer-user-sub { font-size:.8rem; color:var(--text-secondary); }

.drawer-nav-list { gap:2px; padding:8px 12px 12px; }
.drawer-section-label { font-size:.7rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--text-muted); padding:16px 14px 6px; }
.drawer-nav-item { position:relative; gap:12px; padding:10px 14px; font-size:.92rem; font-weight:600; border:1px solid transparent; background:transparent; width:100%; text-align:left; cursor:pointer; font-family:inherit; }
.drawer-nav-item .ico { width:19px; height:19px; opacity:.8; transition:transform .25s var(--ease-out), opacity .25s; }
.drawer-nav-item:hover .ico { transform:translateX(2px); opacity:1; }
.drawer-nav-item.active { background:linear-gradient(90deg, rgba(255,59,48,.16), rgba(255,59,48,.03)); border-color:rgba(255,59,48,.2); color:var(--text-primary); box-shadow:var(--elev-1); }
.drawer-nav-item.active::before { content:""; position:absolute; left:-12px; top:8px; bottom:8px; width:3px; border-radius:0 3px 3px 0; background:var(--accent-gradient); box-shadow:0 0 12px rgba(255,59,48,.6); }
.drawer-nav-item.active .ico { color:var(--accent-orange); opacity:1; }
.drawer-badge { margin-left:auto; min-width:22px; height:22px; padding:0 7px; border-radius:var(--radius-full); display:inline-flex; align-items:center; justify-content:center; font-size:.72rem; font-weight:800; font-family:var(--font-mono); background:var(--bg-tertiary); color:var(--text-secondary); border:1px solid var(--border-color); }
.drawer-badge.hot { background:var(--accent-gradient); color:#fff; border-color:transparent; box-shadow:0 0 12px rgba(255,59,48,.45); }
.drawer-badge[hidden] { display:none !important; }
.drawer-nav-item.drawer-admin { color:var(--accent-orange); }

.drawer-footer { gap:10px; padding:14px 16px; flex-wrap:wrap; }
.drawer-user-row { display:flex; align-items:center; gap:10px; flex:1; min-width:0; }
.drawer-avatar { width:34px; height:34px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-weight:800; color:#fff; background:var(--accent-gradient); box-shadow:var(--accent-glow); text-transform:uppercase; }
.drawer-user-name { font-size:.88rem; font-weight:700; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.drawer-user-name small { display:block; font-size:.72rem; font-weight:500; color:var(--text-muted); }
.drawer-icon-btn { width:36px; height:36px; flex-shrink:0; display:inline-flex; align-items:center; justify-content:center; border-radius:var(--radius-sm); border:1px solid var(--border-color); background:var(--bg-tertiary); color:var(--text-secondary); cursor:pointer; text-decoration:none; transition:var(--transition); }
.drawer-icon-btn:hover { color:var(--accent-orange); border-color:var(--border-accent); }
.drawer-signin { flex:1; font-weight:700; color:var(--accent-orange); text-decoration:none; font-size:.9rem; }
.drawer-signin[hidden], .drawer-user-row[hidden] { display:none !important; }

/* Admin drawer alert list */
.drawer-alerts { list-style:none; display:flex; flex-direction:column; gap:4px; margin-top:6px; }
.drawer-alerts a { display:flex; align-items:center; gap:8px; font-size:.8rem; color:var(--text-secondary); text-decoration:none; padding:3px 0; }
.drawer-alerts a:hover { color:var(--text-primary); }
.drawer-alerts .dot { width:7px; height:7px; border-radius:50%; background:var(--text-muted); flex-shrink:0; }
.drawer-alerts .dot.hot { background:var(--accent-red); box-shadow:0 0 8px rgba(255,59,48,.8); }
.drawer-alerts strong { color:var(--text-primary); font-family:var(--font-mono); }

/* Page depth while the drawer is open */
.app-wrapper { transition: transform .5s var(--ease-out), filter .5s var(--ease-out), border-radius .5s var(--ease-out); }
body.drawer-visible .app-wrapper {
  transform: perspective(1600px) translateX(28px) rotateY(-5deg) scale(.95);
  filter: brightness(.72) saturate(.9);
  border-radius: 20px;
  overflow: hidden;
  pointer-events: none;
}

/* ---------- Surfaces with depth ---------- */
.order-card, .active-numbers-card, .override-engine-card, .workspace-balance-panel, .workspace-intro,
.community-section, .admin-stat-card, .provider-admin-card {
  box-shadow: var(--elev-2);
}
.workspace-card { box-shadow: var(--elev-2); }
.main-header { box-shadow: 0 1px 0 rgba(255,255,255,.04), 0 10px 30px -18px rgba(0,0,0,.8); }

/* ---------- Tilt cards (driven by depth.js) ---------- */
html [data-tilt] {
  position: relative;
  transform: perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transform-style: preserve-3d;
  transition: transform .5s var(--ease-out), box-shadow .35s var(--ease-out), border-color .35s;
}
html [data-tilt]:hover { transform: perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-4px); box-shadow: var(--elev-3); border-color: var(--border-accent); }
html [data-tilt].is-tilting { transition: transform .1s linear, box-shadow .35s var(--ease-out), border-color .35s; }
[data-tilt] > .tilt-sheen {
  position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:0; transition:opacity .35s;
  background: radial-gradient(circle at var(--mx,50%) var(--my,0%), rgba(255,255,255,.14), transparent 55%);
}
[data-tilt].is-tilting > .tilt-sheen { opacity:1; }
.workspace-card .workspace-card-icon { display:inline-flex; width:46px; height:46px; align-items:center; justify-content:center; border-radius:14px; background:linear-gradient(135deg, rgba(255,59,48,.22), rgba(255,94,58,.06)); border:1px solid var(--border-accent); color:var(--accent-orange); transform:translateZ(30px); box-shadow:0 10px 20px -10px rgba(255,59,48,.6); }
.workspace-card .workspace-card-icon .ico { width:22px; height:22px; }
.workspace-card strong, .workspace-card b { transform:translateZ(18px); }

/* ---------- 3D wallet card ---------- */
.wallet-card-3d {
  --card-edge: rgba(255,94,58,.35);
  position:relative; overflow:hidden; isolation:isolate;
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(255,94,58,.38) 0%, transparent 45%),
    radial-gradient(90% 120% at 0% 100%, rgba(255,59,48,.22) 0%, transparent 50%),
    linear-gradient(135deg, #2b0c0b 0%, #160809 45%, #0b0b11 100%) !important;
  border:1px solid var(--card-edge) !important;
  color:#F8FAFC;
}
.wallet-card-3d::before { /* chip */
  content:""; position:absolute; top:24px; right:26px; width:46px; height:34px; border-radius:7px; z-index:-1;
  background: linear-gradient(135deg,#f7d58b 0%,#c9973f 45%,#f3cd7a 70%,#a87a2c 100%);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.25), 0 4px 10px rgba(0,0,0,.4);
  opacity:.9;
}
.wallet-card-3d::after { /* gloss sweep */
  content:""; position:absolute; inset:-40%; z-index:-1; pointer-events:none;
  background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.12) 50%, transparent 60%);
  transform: translateX(-60%); transition: transform 1.1s var(--ease-out);
}
.wallet-card-3d:hover::after { transform: translateX(60%); }
.wallet-card-3d h2 { color:#fff; letter-spacing:-.01em; }
.wallet-card-3d .balance-summary { background:rgba(255,255,255,.06) !important; border-color:rgba(255,255,255,.1) !important; backdrop-filter: blur(6px); transform: translateZ(24px); }
.wallet-card-3d .balance-summary span { color:rgba(248,250,252,.7) !important; }
.wallet-card-3d .balance-summary strong { color:#fff; font-family:var(--font-mono); }
.wallet-card-3d .balance-summary:first-child strong { color:#4ade80; text-shadow:0 0 18px rgba(74,222,128,.35); }
.wallet-card-3d .workspace-action { background:rgba(0,0,0,.35); color:#fff; border-color:rgba(255,255,255,.18); }
.wallet-card-3d .workspace-action:hover { border-color:var(--accent-orange); }

/* ---------- Pressable buttons ---------- */
.btn-buy-number, .btn-save-provider {
  box-shadow: 0 4px 0 var(--press-edge), 0 12px 26px -10px rgba(255,59,48,.6);
  transition: transform .15s var(--ease-out), box-shadow .15s var(--ease-out), opacity .2s;
}
.btn-buy-number:hover:not(:disabled), .btn-save-provider:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 5px 0 var(--press-edge), 0 16px 32px -10px rgba(255,59,48,.7); }
.btn-buy-number:active:not(:disabled), .btn-save-provider:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 var(--press-edge), 0 4px 10px -4px rgba(255,59,48,.5); }
.btn-buy-number:disabled, .btn-save-provider:disabled { box-shadow:none; }
.btn-topup { box-shadow: 0 3px 0 var(--press-edge); transition: transform .15s var(--ease-out), box-shadow .15s; }
.btn-topup:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--press-edge); }
.community-form button[type=submit] { box-shadow: 0 3px 0 #a3361f, 0 10px 20px -10px rgba(255,94,58,.6); transition: transform .15s var(--ease-out), box-shadow .15s; }
.community-form button[type=submit]:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 #a3361f; }
.provider-tab { transition: transform .2s var(--ease-out), box-shadow .2s, background .2s, border-color .2s; }
.provider-tab.active { box-shadow: 0 3px 0 var(--press-edge), 0 10px 22px -10px rgba(255,59,48,.55); transform: translateY(-2px); }
.provider-tab:active { transform: translateY(1px); }

/* ---------- Sentence-case labels ---------- */
.field-label { text-transform:none; letter-spacing:0; font-size:.8rem; font-weight:600; color:var(--text-secondary); }

/* ---------- OTP arrival ---------- */
.order-live-item.code-arrived { animation: otp-arrive .9s var(--ease-out) both; transform-origin: center top; }
.order-live-item.code-arrived .otp-code { display:inline-block; animation: otp-pop .8s .3s var(--ease-out) both; }
@keyframes otp-arrive {
  0% { transform: perspective(900px) rotateX(-70deg); opacity:.25; }
  60% { transform: perspective(900px) rotateX(8deg); opacity:1; }
  100% { transform: perspective(900px) rotateX(0); }
}
@keyframes otp-pop {
  0% { transform: scale(.55) translateZ(0); opacity:0; }
  60% { transform: scale(1.16); opacity:1; text-shadow:0 0 26px rgba(16,185,129,.85); }
  100% { transform: scale(1); }
}

/* ---------- Explore hero phone ---------- */
.hero-phone-3d { position:relative; z-index:2; width:220px; height:300px; flex-shrink:0; perspective:1000px; margin-right:12px; }
.hero-phone-3d .phone {
  position:absolute; inset:0; border-radius:34px; padding:14px;
  background: linear-gradient(160deg,#1d1f2b 0%,#0b0c12 100%);
  border:2px solid rgba(255,255,255,.18);
  box-shadow: inset 0 0 0 6px #050608, 0 40px 60px -20px rgba(0,0,0,.65), 0 0 0 1px rgba(0,0,0,.4);
  transform-style: preserve-3d;
  transform: rotateY(-22deg) rotateX(10deg);
  animation: phone-float 6s ease-in-out infinite;
}
.hero-phone-3d .phone::before { content:""; position:absolute; top:14px; left:50%; width:70px; height:18px; transform:translateX(-50%); border-radius:0 0 12px 12px; background:#050608; }
.hero-phone-3d .screen { position:absolute; inset:12px; border-radius:24px; overflow:hidden; background: radial-gradient(120% 80% at 50% 0%, rgba(255,59,48,.35), transparent 60%), #0f1220; padding:40px 12px 12px; display:flex; flex-direction:column; gap:10px; transform-style:preserve-3d; }
.hero-phone-3d .sms { font-size:.72rem; line-height:1.35; color:#e2e8f0; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.1); border-radius:14px 14px 14px 4px; padding:8px 10px; max-width:88%; box-shadow:0 10px 20px -10px rgba(0,0,0,.7); }
.hero-phone-3d .sms b { display:block; font-family:var(--font-mono); font-size:1.05rem; letter-spacing:.12em; color:#4ade80; margin-top:2px; }
.hero-phone-3d .sms.s1 { transform: translateZ(40px); animation: sms-in .8s .3s var(--ease-out) both; }
.hero-phone-3d .sms.s2 { transform: translateZ(60px); animation: sms-in .8s .9s var(--ease-out) both; }
.hero-phone-3d .sms.s3 { transform: translateZ(30px); animation: sms-in .8s 1.5s var(--ease-out) both; align-self:flex-end; border-radius:14px 14px 4px 14px; background:rgba(255,59,48,.25); border-color:rgba(255,94,58,.4); }
.hero-phone-3d .glow { position:absolute; left:10%; right:10%; bottom:-30px; height:30px; border-radius:50%; background:rgba(0,0,0,.45); filter:blur(14px); animation: shadow-float 6s ease-in-out infinite; }
@keyframes phone-float { 0%,100% { transform: rotateY(-22deg) rotateX(10deg) translateY(0); } 50% { transform: rotateY(-14deg) rotateX(6deg) translateY(-12px); } }
@keyframes shadow-float { 0%,100% { transform:scaleX(1); opacity:.6; } 50% { transform:scaleX(.85); opacity:.4; } }
@keyframes sms-in { from { opacity:0; transform: translateZ(0) translateY(14px) scale(.9); } }
@media (max-width:760px) { .hero-phone-3d { display:none; } }

/* ---------- Accessibility & touch ---------- */
@media (hover:none), (pointer:coarse) {
  html [data-tilt], html [data-tilt]:hover { transform:none; }
}
@media (prefers-reduced-motion:reduce) {
  html [data-tilt], html [data-tilt]:hover { transform:none !important; }
  body.drawer-visible .app-wrapper { transform:none; filter:brightness(.8); border-radius:0; }
  .nav-drawer { transform:translateX(-100%); }
  .nav-drawer.open, .nav-drawer.menu-open { transform:translateX(0); }
  .hero-phone-3d .phone, .hero-phone-3d .glow { animation:none; }
  .order-live-item.code-arrived, .order-live-item.code-arrived .otp-code { animation:none; }
}