/* ============================================================
   DonnieSMS OTP – assets/css/style.css
   Mysocial Design System: Orange + White | Clean | Glassy
   Font: Sora (display) + DM Sans (body)
   ============================================================ */

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

/* ── CSS Variables ── */
/*:root {*/
/*  --orange:        #FF6B00;*/
/*  --orange-dark:   #E05500;*/
/*  --orange-light:  #FF8C38;*/
/*  --orange-pale:   #FFF3E8;*/
/*  --black:         #0A0A0A;*/
/*  --dark:          #1A1A1A;*/
/*  --gray:          #6B7280;*/
/*  --gray-light:    #E5E7EB;*/
/*  --gray-pale:     #F9FAFB;*/
/*  --white:         #FFFFFF;*/
/*  --success:       #10B981;*/
/*  --danger:        #EF4444;*/
/*  --warning:       #F59E0B;*/
/*  --info:          #3B82F6;*/

  /* Glass */
/*  --glass-blur:    blur(16px);*/

/*  --radius:        12px;*/
/*  --radius-sm:     8px;*/
/*  --radius-lg:     16px;*/
/*  --radius-xl:     24px;*/
/*  --shadow:        0 1px 3px rgba(0,0,0,0.08), 0 4px 16px rgba(0,0,0,0.06);*/
/*  --shadow-lg:     0 8px 32px rgba(0,0,0,0.12);*/
/*  --shadow-orange: 0 4px 20px rgba(255,107,0,0.28);*/

/*  --font-display:  'Sora', sans-serif;*/
/*  --font-body:     'DM Sans', sans-serif;*/
/*  --nav-h:         60px;*/
/*  --bot-h:         64px;*/

/*  --anim-fast:     0.15s;*/
/*  --anim-normal:   0.25s;*/

  /* kept for compatibility with old classes */
/*  --primary:       #FF6B00;*/
/*  --primary-dark:  #E05500;*/
/*  --primary-light: #FFF3E8;*/
/*  --accent:        #FF8C38;*/
/*  --bg:            #F9FAFB;*/
/*  --bg2:           #FFFFFF;*/
/*  --bg3:           #F3F4F6;*/
/*  --text:          #1A1A1A;*/
/*  --text2:         #6B7280;*/
/*  --text3:         #9CA3AF;*/
/*  --border:        rgba(0,0,0,0.08);*/
/*  --card-bg:       rgba(255,255,255,0.92);*/
/*  --card-border:   rgba(0,0,0,0.07);*/
/*  --nav-bg:        rgba(255,255,255,0.88);*/
/*  --input-bg:      rgba(255,255,255,0.85);*/
/*  --input-border:  rgba(0,0,0,0.1);*/
/*}*/



:root {
  --orange:        #2563eb;
  --orange-dark:   #1d4ed8;
  --orange-light:  #60a5fa;
  --orange-pale:   #eff6ff;
  --black:         #0f172a;
  --dark:          #1e293b;
  --gray:          #64748b;
  --gray-light:    #e2e8f0;
  --gray-pale:     #f8fafc;
  --white:         #FFFFFF;
  --success:       #10B981;
  --danger:        #EF4444;
  --warning:       #F59E0B;
  --info:          #3B82F6;

  /* Glass */
  --glass-blur:    blur(16px);

  --radius:        12px;
  --radius-sm:     8px;
  --radius-lg:     16px;
  --radius-xl:     24px;
  --shadow:        0 1px 3px rgba(15,23,42,0.08), 0 4px 16px rgba(15,23,42,0.06);
  --shadow-lg:     0 8px 32px rgba(15,23,42,0.12);
  --shadow-orange: 0 4px 20px rgba(37,99,235,0.25);

  --font-display:  'Sora', sans-serif;
  --font-body:     'DM Sans', sans-serif;
  --nav-h:         60px;
  --bot-h:         64px;

  --anim-fast:     0.15s;
  --anim-normal:   0.25s;

  /* kept for compatibility with old classes */
  --primary:       #2563eb;
  --primary-dark:  #1d4ed8;
  --primary-light: #eff6ff;
  --accent:        #60a5fa;
  --bg:            #f8fafc;
  --bg2:           #FFFFFF;
  --bg3:           #e2e8f0;
  --text:          #0f172a;
  --text2:         #475569;
  --text3:         #94a3b8;
  --border:        rgba(37,99,235,0.08);
  --card-bg:       rgba(255,255,255,0.92);
  --card-border:   rgba(37,99,235,0.07);
  --nav-bg:        rgba(255,255,255,0.88);
  --input-bg:      rgba(255,255,255,0.85);
  --input-border:  rgba(37,99,235,0.1);
}




/* ── Reset ── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  font-family: var(--font-body);
  background: var(--gray-pale);
  color: var(--dark);
  font-size: 15px;
  line-height: 1.6;
  padding-bottom: var(--bot-h);
  min-height: 100vh;
}
a { color: var(--orange); text-decoration: none; transition: opacity var(--anim-fast); }
a:hover { opacity: .8; }
img { max-width: 100%; }
h1,h2,h3,h4,h5,h6 { font-family: var(--font-display); font-weight: 700; line-height: 1.25; }

/* ── Glass card ── */
.glass {
  background: rgba(255,255,255,0.92);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid rgba(255,255,255,0.6);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.card {
  background: rgba(255,255,255,0.92);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid rgba(255,255,255,0.6);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  overflow: hidden;
}

/* ── Top Nav ── */
.top-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 900;
  height: var(--nav-h);
  background: rgba(255,255,255,0.88);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255,255,255,0.5);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 16px;
  box-shadow: 0 2px 20px rgba(0,0,0,0.08);
}
.logo-wrap { display:flex; align-items:center; gap:8px; }
.logo-text { font-family: var(--font-display); font-size:20px; font-weight:800; color:var(--dark); }
.logo-text span { color: var(--orange); }
.site-logo { height:36px; width:auto; object-fit:contain; }
.nav-actions { display:flex; align-items:center; gap:8px; }

.notif-wrap { position:relative; }
.notif-btn {
  width:40px; height:40px; border-radius:50%;
  background: rgba(255,255,255,0.6);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(0,0,0,0.08);
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  color:var(--dark); font-size:18px; text-decoration:none;
  transition: all var(--anim-fast);
}
.notif-btn:hover { background:var(--orange-pale); color:var(--orange); transform:scale(1.05); }
.notif-badge {
  position:absolute; top:-3px; right:-3px;
  background:var(--orange); color:#fff;
  border-radius:50%; width:18px; height:18px;
  font-size:10px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}
.avatar-btn {
  width:36px; height:36px; border-radius:50%;
  background:linear-gradient(135deg,var(--orange),var(--orange-dark));
  color:#fff; font-weight:800; font-size:13px;
  display:flex; align-items:center; justify-content:center;
  text-decoration:none; font-family: var(--font-display);
}

/* ── Page wrapper ── */
.page-wrap {
  max-width: 640px; margin: 0 auto;
  padding: calc(var(--nav-h) + 12px) 0 20px;
}

/* ── Balance / Wallet card ── */
.balance-card {
  background: linear-gradient(135deg, var(--orange) 0%, var(--orange-dark) 100%);
  border-radius: var(--radius-xl); padding: 24px; color: #fff;
  margin: 0 16px 16px; position: relative; overflow: hidden;
  box-shadow: var(--shadow-orange);
}
.balance-card::before {
  content:''; position:absolute; right:-20px; top:-20px;
  width:100px; height:100px; border-radius:50%;
  background:rgba(255,255,255,0.1);
}
.balance-card::after {
  content:''; position:absolute; right:20px; bottom:-30px;
  width:80px; height:80px; border-radius:50%;
  background:rgba(255,255,255,0.07);
}
.bal-label { font-size:11px; opacity:.8; font-weight:700; text-transform:uppercase; letter-spacing:1px; margin-bottom:6px; }
.bal-amount { font-family: var(--font-display); font-size:2.2rem; font-weight:800; margin:6px 0; position:relative; z-index:1; }
.bal-va { margin-top:16px; padding-top:14px; border-top:1px solid rgba(255,255,255,.2); position:relative; z-index:1; }
.bal-va-num { font-size:18px; font-weight:800; letter-spacing:1px; }
.bal-va-sub { font-size:12px; opacity:.75; margin-top:2px; }

/* ── Quick actions ── */
.quick-grid {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:10px; margin:0 16px 16px;
}
.quick-btn {
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.6);
  border-radius: var(--radius-lg);
  padding:16px 8px; text-align:center;
  cursor:pointer; transition:all var(--anim-normal) cubic-bezier(0.34,1.56,0.64,1);
  display:flex; flex-direction:column; align-items:center; gap:7px;
  text-decoration:none; box-shadow:var(--shadow);
}
.quick-btn:hover {
  transform:translateY(-4px) scale(1.02);
  box-shadow:var(--shadow-lg);
}
.quick-btn .fi { font-size:22px; color:var(--orange); }
.quick-btn span { font-size:11px; font-weight:700; color:var(--dark); font-family:var(--font-display); }

/* ── Section ── */
.section { padding: 0 16px 20px; }
.sec-hdr { display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; padding-top:4px; }
.sec-hdr h3 { font-family:var(--font-display); font-size:17px; font-weight:800; color:var(--dark); }
.sec-hdr a { font-size:13px; font-weight:600; color:var(--orange); }
.section-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; padding-top:20px; }
.section-title { font-family:var(--font-display); font-weight:800; font-size:17px; color:var(--dark); }
.see-all { font-size:13px; font-weight:600; color:var(--orange); }

/* ── Stats grid ── */
.stats-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; padding:0 16px 16px; }
.stat-card {
  background: rgba(255,255,255,0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.6);
  border-radius: var(--radius-lg); padding:14px;
  box-shadow: var(--shadow); position:relative; overflow:hidden;
  text-align:center;
}
.stat-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,var(--orange),var(--orange-light));
}
.stat-label { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:var(--gray); margin-bottom:4px; }
.stat-value { font-family:var(--font-display); font-size:1.2rem; font-weight:800; color:var(--dark); }
.stat-value.success { color:var(--success); }
.stat-value.danger  { color:var(--danger); }
.stat-value.orange  { color:var(--orange); }

/* ── Service item (numbers list) ── */
.svc-item {
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.6);
  border-radius: var(--radius-lg);
  padding:14px 16px;
  display:flex; align-items:center; gap:12px;
  box-shadow:var(--shadow);
  transition:all var(--anim-normal) cubic-bezier(0.34,1.56,0.64,1);
  margin-bottom:8px;
}
.svc-item:hover { transform:translateY(-3px) scale(1.01); box-shadow:var(--shadow-lg); }
.svc-icon {
  width:42px; height:42px; border-radius:12px;
  background:var(--orange-pale);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.svc-icon .fi { font-size:20px; color:var(--orange); }
.svc-info { flex:1; min-width:0; }
.svc-name { font-family:var(--font-display); font-size:14px; font-weight:700; color:var(--dark); }
.svc-meta { font-size:11px; color:var(--gray); margin-top:2px; }
.svc-price { font-family:var(--font-display); font-size:14px; font-weight:800; color:var(--orange); margin-right:8px; }

/* ── List items ── */
.list-item {
  display:flex; align-items:center; gap:12px; padding:14px 16px;
  border-bottom:1px solid rgba(0,0,0,0.05);
  transition:background var(--anim-fast);
}
.list-item:hover { background:rgba(255,107,0,0.03); }
.list-item:last-child { border-bottom:none; }
.list-item-icon {
  width:40px; height:40px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  font-size:18px; flex-shrink:0;
}
.list-item-icon.orange  { background:rgba(255,107,0,0.12); color:var(--orange); }
.list-item-icon.success { background:rgba(16,185,129,0.12); color:var(--success); }
.list-item-icon.danger  { background:rgba(239,68,68,0.12);  color:var(--danger); }
.list-item-icon.info    { background:rgba(59,130,246,0.12);  color:var(--info); }
.list-item-body  { flex:1; min-width:0; }
.list-item-title { font-family:var(--font-display); font-weight:700; font-size:14px; margin-bottom:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.list-item-sub   { font-size:12px; color:var(--gray); }
.list-item-right { text-align:right; flex-shrink:0; }

/* ── Order item ── */
.order-item {
  background: rgba(255,255,255,0.9);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.6);
  border-radius: var(--radius-lg);
  padding:14px 16px; margin: 0 0 10px;
  box-shadow:var(--shadow);
}
.order-top { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:8px; }
.order-title { font-family:var(--font-display); font-size:14px; font-weight:700; color:var(--dark); }
.order-meta { font-size:12px; color:var(--gray); }
.order-amount { font-family:var(--font-display); font-size:14px; font-weight:800; color:var(--orange); }

/* ── Status pills / tags ── */
.pill, .tag {
  display:inline-flex; align-items:center; gap:4px;
  font-size:11px; padding:3px 10px; border-radius:20px; font-weight:700;
  text-transform:uppercase; letter-spacing:0.4px;
}
.pill-success, .tag-success { background:rgba(16,185,129,0.12);  color:#065F46; }
.pill-pending, .tag-pending  { background:rgba(245,158,11,0.12);  color:#92400E; }
.pill-danger,  .tag-danger   { background:rgba(239,68,68,0.12);   color:#991B1B; }
.pill-info,    .tag-info     { background:rgba(255,107,0,0.12);   color:var(--orange-dark); }
.pill-gray,    .tag-gray     { background:rgba(107,114,128,0.1);  color:var(--gray); }
.tag-orange                  { background:rgba(255,107,0,0.12);   color:var(--orange); }

/* ── OTP display box ── */
.otp-box {
  background: rgba(249,250,251,0.8);
  backdrop-filter: blur(8px);
  border-radius: var(--radius-lg); padding:20px; text-align:center; margin:14px 0;
  border-left:3px solid var(--orange);
}
.otp-number {
  background: rgba(26,26,26,0.9);
  backdrop-filter: blur(8px);
  color:var(--orange); font-family:'Courier New',monospace;
  font-size:1.4rem; font-weight:700; text-align:center;
  padding:16px; border-radius:var(--radius); letter-spacing:2px; margin:12px 0;
  border:1px solid rgba(255,107,0,0.2);
}
.otp-number-display { /* alias */ }
.otp-code {
  font-family: var(--font-display); font-size:2rem; font-weight:800;
  color:var(--orange); text-align:center; margin:8px 0;
}
.otp-timer { font-family:var(--font-display); font-size:1.8rem; font-weight:800; color:var(--orange); }

/* ── Bottom Navigation ── */
.bottom-nav {
  position:fixed; bottom:0; left:0; right:0; z-index:900;
  height:var(--bot-h);
  background:rgba(255,255,255,0.88);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-top:1px solid rgba(255,255,255,0.5);
  display:flex; align-items:stretch;
  box-shadow:0 -4px 24px rgba(0,0,0,0.08);
}
.bottom-nav a {
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:3px; color:var(--gray); font-size:9px; font-weight:700;
  text-transform:uppercase; letter-spacing:0.5px;
  text-decoration:none; transition:all var(--anim-fast); position:relative;
}
.bottom-nav a .fi { font-size:20px; transition:transform var(--anim-fast); }
.bottom-nav a.active, .bottom-nav a:hover { color:var(--orange); }
.bottom-nav a.active .fi { transform:translateY(-2px); }
.bottom-nav a.active::before {
  content:''; position:absolute; bottom:0; left:50%; transform:translateX(-50%);
  width:32px; height:3px; background:var(--orange);
  border-radius:3px 3px 0 0;
}
.notif-dot {
  position:absolute; top:6px; right:calc(50% - 14px);
  width:7px; height:7px; border-radius:50%;
  background:var(--danger); border:2px solid #fff;
}

/* ── FAB ── */
.fab {
  position:fixed; bottom:calc(var(--bot-h) + 14px); right:16px; z-index:800;
  width:50px; height:50px; border-radius:50%;
  background:linear-gradient(135deg,var(--orange),var(--orange-dark));
  color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:20px; text-decoration:none;
  box-shadow:var(--shadow-orange);
  transition:all var(--anim-fast); border:2px solid rgba(255,255,255,.2);
}
.fab:hover { transform:scale(1.1) translateY(-2px); color:#fff; }

/* ── Forms ── */
.form-group { margin-bottom:16px; }
.form-label {
  display:block; font-weight:600; font-size:12px; margin-bottom:6px;
  color:var(--dark); text-transform:uppercase; letter-spacing:0.6px;
}
.form-control {
  width:100%; padding:12px 16px;
  border:2px solid rgba(0,0,0,0.08);
  border-radius:var(--radius-sm); font-family:var(--font-body); font-size:15px;
  background:rgba(255,255,255,0.85);
  backdrop-filter:blur(8px);
  color:var(--dark); transition:border-color var(--anim-fast), box-shadow var(--anim-fast);
  outline:none;
}
.form-control:focus {
  border-color:var(--orange);
  box-shadow:0 0 0 3px rgba(255,107,0,0.12);
  background:rgba(255,255,255,0.95);
}
.form-control::placeholder { color:#B0B7C0; }
select.form-control { cursor:pointer; }
.input-wrap { position:relative; }
.input-wrap .form-control { padding-left:44px; }
.input-wrap .fi {
  position:absolute; left:14px; top:50%; transform:translateY(-50%);
  color:var(--gray); font-size:17px;
}

/* ── Buttons ── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 22px; border-radius:var(--radius);
  font-size:15px; font-weight:600; cursor:pointer;
  border:none; transition:all var(--anim-fast); font-family:var(--font-body);
  text-decoration:none; white-space:nowrap; position:relative; overflow:hidden;
}
.btn-primary { background:var(--orange); color:#fff; }
.btn-primary:hover { background:var(--orange-dark); color:#fff; transform:translateY(-2px); box-shadow:var(--shadow-orange); }
.btn-outline { background:transparent; color:var(--orange); border:2px solid var(--orange); }
.btn-outline:hover { background:var(--orange); color:#fff; transform:translateY(-1px); }
.btn-ghost {
  background:rgba(255,255,255,0.9); backdrop-filter:blur(8px);
  border:1px solid rgba(0,0,0,0.1); color:var(--dark);
}
.btn-ghost:hover { border-color:var(--orange); color:var(--orange); }
.btn-danger  { background:var(--danger);  color:#fff; }
.btn-success { background:var(--success); color:#fff; }
.btn-block  { width:100%; }
.btn-sm     { padding:8px 16px; font-size:13px; border-radius:var(--radius-sm); }
.btn-full   { width:100%; }
.btn:disabled { opacity:.55; cursor:not-allowed; transform:none !important; }

/* ── Alerts ── */
.alert {
  padding:12px 16px; border-radius:var(--radius-sm);
  font-size:14px; font-weight:500; margin-bottom:14px;
  display:flex; align-items:center; gap:10px;
  backdrop-filter:blur(8px); margin: 10px 16px 14px;
}
.alert-success { background:rgba(209,250,229,0.9); color:#065F46; border:1px solid rgba(16,185,129,0.2); }
.alert-danger  { background:rgba(254,226,226,0.9); color:#991B1B; border:1px solid rgba(239,68,68,0.2); }
.alert-warning { background:rgba(254,243,199,0.9); color:#92400E; border:1px solid rgba(245,158,11,0.2); }
.alert-info    { background:rgba(219,234,254,0.9); color:#1E40AF; border:1px solid rgba(59,130,246,0.2); }

/* ── Page Header strip ── */
.page-header {
  background:linear-gradient(135deg,var(--orange) 0%,var(--orange-dark) 100%);
  padding:28px 20px 24px; color:#fff;
  position:relative; overflow:hidden;
}
.page-header::before {
  content:''; position:absolute; right:-30px; top:-30px;
  width:120px; height:120px; border-radius:50%;
  background:rgba(255,255,255,0.08);
}
.page-header::after {
  content:''; position:absolute; right:30px; bottom:-40px;
  width:90px; height:90px; border-radius:50%;
  background:rgba(255,255,255,0.06);
}
.page-header h1 { font-size:1.5rem; margin-bottom:4px; position:relative; z-index:1; }
.page-header p  { opacity:.85; font-size:13px; position:relative; z-index:1; }

/* ── Modal (bottom sheet) ── */
.modal-overlay {
  position:fixed; inset:0; z-index:1000;
  background:rgba(0,0,0,0.6);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  display:flex; align-items:flex-end;
  opacity:0; pointer-events:none; transition:opacity var(--anim-normal);
}
.modal-overlay.open { opacity:1; pointer-events:all; }
.modal-sheet {
  background:rgba(255,255,255,0.95);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border-radius:var(--radius-xl) var(--radius-xl) 0 0;
  padding:20px 20px 36px;
  width:100%; max-width:640px; margin:0 auto;
  transform:translateY(100%);
  transition:transform 0.35s cubic-bezier(0.32,0.72,0,1);
  max-height:88vh; overflow-y:auto;
  border-top:1px solid rgba(255,255,255,0.5);
}
.modal-overlay.open .modal-sheet { transform:translateY(0); }
.modal-handle { width:40px; height:4px; background:rgba(0,0,0,0.12); border-radius:2px; margin:0 auto 20px; }
.modal-title { font-family:var(--font-display); font-size:18px; font-weight:800; margin-bottom:16px; color:var(--dark); }

/* ── Auth pages ── */
.auth-page {
  min-height:100vh; display:flex; flex-direction:column;
  background:#fff; padding-bottom:0;
}
.auth-header {
  background:var(--white); padding:48px 24px 36px;
  text-align:center; color:#000;
}
.auth-logo {
  font-family:var(--font-display); font-weight:800; font-size:2rem; margin-bottom:8px;
}
.auth-logo span { opacity:0.75; }
.logo-text-auth { font-family:var(--font-display); font-size:24px; font-weight:800; color:#fff; }
.auth-subtitle { opacity:.85; font-size:14px; }
.auth-body {
  flex:1; padding:28px 24px;
  max-width:440px; margin:0 auto; width:100%;
}
.auth-footer {
  text-align:center; margin-top:20px; font-size:14px; color:var(--gray);
}
.auth-footer a { color:var(--orange); font-weight:700; }
.auth-footer-links { text-align:center; margin-top:20px; font-size:14px; color:var(--gray); }
.auth-footer-links a { color:var(--orange); font-weight:700; }
/* keep old auth-card/auth-box selectors working */
.auth-card { width:100%; max-width:440px; }
.auth-box  { padding:0; }

/* ── Profile ── */
.profile-hdr {
  background:linear-gradient(135deg,var(--orange) 0%,var(--orange-dark) 100%);
  border-radius:var(--radius-xl); padding:24px; color:#fff;
  text-align:center; margin:0 16px 16px;
  box-shadow:var(--shadow-orange); position:relative; overflow:hidden;
}
.profile-hdr::before {
  content:''; position:absolute; right:-30px; top:-30px;
  width:120px; height:120px; border-radius:50%;
  background:rgba(255,255,255,0.07);
}
.profile-avatar {
  width:70px; height:70px; border-radius:50%;
  background:rgba(255,255,255,0.2);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-size:26px; font-weight:800;
  margin:0 auto 12px; border:2px solid rgba(255,255,255,.3);
}

/* ── Chat bubbles ── */
.chat-wrap { display:flex; flex-direction:column; gap:10px; padding:8px 0; }
.msg {
  max-width:80%; padding:11px 15px; border-radius:16px;
  font-size:14px; line-height:1.5;
}
.msg-user {
  background:linear-gradient(135deg,var(--orange),var(--orange-dark));
  color:#fff; align-self:flex-end; border-bottom-right-radius:4px;
}
.msg-admin {
  background:rgba(255,255,255,0.9); color:var(--dark);
  align-self:flex-start; box-shadow:var(--shadow);
  border:1px solid rgba(255,255,255,0.6); border-bottom-left-radius:4px;
}
.msg small { display:block; font-size:10px; opacity:.65; margin-top:4px; }

/* ── Ticket item ── */
.ticket-item {
  background:rgba(255,255,255,0.9);
  backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,0.6);
  border-radius:var(--radius-lg);
  padding:14px 16px; box-shadow:var(--shadow); margin-bottom:10px;
}

/* ── Settings list ── */
.settings-list .s-row {
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0; border-bottom:1px solid rgba(0,0,0,0.06);
  text-decoration:none; color:var(--dark);
}
.settings-list .s-row:last-child { border-bottom:none; }
.s-row .s-icon {
  width:36px; height:36px; border-radius:9px;
  background:var(--orange-pale);
  display:flex; align-items:center; justify-content:center;
  margin-right:12px; flex-shrink:0;
}
.s-icon .fi { color:var(--orange); font-size:16px; }
.s-row .s-label { font-size:14px; font-weight:600; flex:1; }
.s-row .s-right { color:var(--gray); font-size:13px; }

/* ── Tabs ── */
.tabs-wrap {
  display:flex; background:rgba(255,255,255,0.1);
  backdrop-filter:blur(8px);
  border-radius:var(--radius); padding:4px; margin-bottom:16px;
}
.tab-btn {
  flex:1; padding:8px; text-align:center;
  font-size:13px; font-weight:600; color:rgba(255,255,255,0.6);
  border-radius:var(--radius-sm); cursor:pointer; border:none;
  background:none; transition:all var(--anim-fast); font-family:var(--font-body);
}
.tab-btn.active { background:rgba(255,255,255,0.95); color:var(--orange); box-shadow:var(--shadow); }

/* ── Search bar ── */
.search-bar { position:relative; padding:12px 16px; }
.search-bar input {
  width:100%; padding:12px 16px 12px 44px; border-radius:var(--radius);
  border:2px solid rgba(255,255,255,0.2);
  font-size:15px; background:rgba(255,255,255,0.12);
  backdrop-filter:blur(8px); font-family:var(--font-body);
  outline:none; color:var(--dark); transition:all var(--anim-fast);
}
.search-bar input::placeholder { color:var(--gray); }
.search-bar input:focus { border-color:var(--orange); background:rgba(255,255,255,0.9); }
.search-bar i { position:absolute; left:30px; top:50%; transform:translateY(-50%); color:var(--gray); font-size:18px; }

/* ── Empty state ── */
.empty-state, .empty { text-align:center; padding:48px 20px; }
.empty-state i, .empty .fi { font-size:48px; color:var(--gray-light); margin-bottom:16px; display:block; opacity:.6; }
.empty-state h3 { font-size:18px; margin-bottom:8px; color:var(--dark); }
.empty-state p, .empty p { color:var(--gray); font-size:14px; margin-bottom:20px; }

/* ── Copy button ── */
.copy-btn {
  background:none; border:none; cursor:pointer;
  color:rgba(255,255,255,0.7); padding:0 4px;
  font-size:14px; transition:color .2s;
}
.copy-btn:hover { color:#fff; }

/* ── Popup ── */
.popup-overlay {
  position:fixed; inset:0;
  background:rgba(0,0,0,0.65); backdrop-filter:blur(6px);
  z-index:300; display:flex; align-items:center; justify-content:center; padding:20px;
}
.popup-box {
  background:rgba(255,255,255,0.96); backdrop-filter:blur(20px);
  border-radius:var(--radius-xl); padding:28px;
  max-width:340px; width:100%; text-align:center;
  animation:popIn 0.35s cubic-bezier(0.34,1.56,0.64,1);
  border:1px solid rgba(255,255,255,0.6);
}
@keyframes popIn { from { transform:scale(0.85); opacity:0; } to { transform:scale(1); opacity:1; } }

/* ── Animations ── */
@keyframes fadeIn  { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }
@keyframes slideUp { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }
@keyframes spin    { to   { transform:rotate(360deg); } }
@keyframes badgePop { from { transform:scale(0); } to { transform:scale(1); } }

.fade-in  { animation:fadeIn  0.3s ease forwards; }
.slide-up { animation:slideUp 0.35s ease forwards; }
.flash-msg { animation:fadeIn .3s ease; }

.anim-children > *                  { animation:slideUp 0.4s ease both; }
.anim-children > *:nth-child(1)     { animation-delay:0.05s; }
.anim-children > *:nth-child(2)     { animation-delay:0.10s; }
.anim-children > *:nth-child(3)     { animation-delay:0.15s; }
.anim-children > *:nth-child(4)     { animation-delay:0.20s; }
.anim-children > *:nth-child(5)     { animation-delay:0.25s; }
.anim-children > *:nth-child(6)     { animation-delay:0.30s; }

/* ── Spinner ── */
.spinner {
  width:20px; height:20px;
  border:2px solid rgba(255,255,255,0.3);
  border-top-color:#fff; border-radius:50%;
  animation:spin 0.7s linear infinite; display:inline-block;
}

/* ── Vendor badge ── */
.vendor-badge {
  display:inline-flex; align-items:center; gap:4px;
  background:linear-gradient(135deg,var(--orange),#FFB347);
  color:#fff; padding:3px 10px; border-radius:20px;
  font-size:11px; font-weight:700;
}

/* ── Admin layout ── */
.admin-body { background:#F9FAFB; color:var(--dark); min-height:100vh; }
.admin-wrap { display:flex; min-height:100vh; }
.admin-sidebar {
  width:240px;
  background:linear-gradient(180deg,#1A1A1A 0%,#2D1000 100%);
  position:fixed; top:0; left:0; bottom:0; z-index:200;
  overflow-y:auto; display:flex; flex-direction:column;
  border-right:1px solid rgba(255,107,0,0.15);
}
.admin-sidebar .logo-area {
  padding:20px; border-bottom:1px solid rgba(255,255,255,0.08);
  display:flex; align-items:center; gap:8px;
}
.admin-sidebar .logo-area .logo-text {
  font-family:var(--font-display); font-size:18px; font-weight:800; color:#FF6B00;
}
.admin-sidebar .logo-area .logo-text span { color:rgba(255,255,255,0.6); }
.admin-sidebar .logo-area .site-logo { height:32px; }
.admin-sidebar .nav-section {
  padding:14px 20px 6px;
  font-size:10px; font-weight:700;
  color:rgba(255,107,0,0.5);
  letter-spacing:1.5px; text-transform:uppercase;
}
.admin-sidebar a {
  display:flex; align-items:center; gap:10px;
  padding:11px 20px; color:rgba(255,255,255,0.5);
  font-size:13.5px; font-weight:500; text-decoration:none;
  transition:all var(--anim-fast); border-left:3px solid transparent;
}
.admin-sidebar a .fi { font-size:16px; width:18px; text-align:center; }
.admin-sidebar a:hover { background:rgba(255,107,0,0.12); color:rgba(255,255,255,0.85); }
.admin-sidebar a.active { background:rgba(255,107,0,0.18); color:#fff; border-left-color:var(--orange); }
.admin-sidebar .logout-link {
  margin-top:auto; border-top:1px solid rgba(255,255,255,0.08);
  color:rgba(255,255,255,0.35) !important;
}
.admin-content {
  margin-left:240px; flex:1; padding:24px;
  background:#F9FAFB; min-height:100vh;
}
.admin-topbar {
  background:#fff; border-radius:var(--radius-lg);
  padding:16px 20px; margin-bottom:20px;
  box-shadow:var(--shadow);
  display:flex; align-items:center; justify-content:space-between;
}
.admin-topbar h2 { font-family:var(--font-display); font-size:18px; font-weight:800; color:var(--dark); }
.admin-stat-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:20px; }
.admin-stat {
  background:#fff; border-radius:var(--radius-lg); padding:18px;
  box-shadow:var(--shadow); position:relative; overflow:hidden;
}
.admin-stat::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:linear-gradient(90deg,var(--orange),var(--orange-light));
}
.admin-stat .s-num { font-family:var(--font-display); font-size:22px; font-weight:800; color:var(--orange); }
.admin-stat .s-lbl { font-size:12px; color:var(--gray); font-weight:500; margin-top:2px; }
.admin-stat .s-ico {
  width:40px; height:40px; border-radius:10px;
  background:var(--orange-pale);
  display:flex; align-items:center; justify-content:center; margin-bottom:10px;
}
.admin-stat .s-ico .fi { color:var(--orange); font-size:18px; }
.table-wrap {
  background:#fff; border-radius:var(--radius-lg);
  box-shadow:var(--shadow); overflow-x:auto;
}
.admin-table { width:100%; border-collapse:collapse; }
.admin-table th {
  background:var(--orange-pale); padding:11px 14px;
  text-align:left; font-size:11.5px; font-weight:700;
  color:var(--orange-dark); border-bottom:1px solid rgba(255,107,0,0.1);
}
.admin-table td {
  padding:11px 14px; font-size:13.5px;
  border-bottom:1px solid rgba(0,0,0,0.05); color:var(--dark);
}
.admin-table tr:last-child td { border-bottom:none; }
.admin-table tr:hover td { background:rgba(255,107,0,0.03); }

/* Mobile admin */
.admin-mobile-bar {
  display:none;
  position:fixed; top:0; left:0; right:0; z-index:500;
  height:56px;
  background:linear-gradient(180deg,#1A1A1A 0%,#2D1000 100%);
  border-bottom:1px solid rgba(255,107,0,0.15);
  align-items:center; justify-content:space-between; padding:0 16px;
}
.admin-mobile-bar .mob-logo { font-family:var(--font-display); color:var(--orange); font-weight:800; font-size:16px; }
.admin-hamburger {
  width:38px; height:38px; border-radius:8px;
  background:rgba(255,107,0,0.2); border:none;
  display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:5px; cursor:pointer;
}
.admin-hamburger span {
  display:block; width:20px; height:2px;
  background:rgba(255,255,255,.8); border-radius:2px; transition:all .25s;
}
.admin-hamburger.open span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
.admin-hamburger.open span:nth-child(2) { opacity:0; }
.admin-hamburger.open span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }
.admin-drawer-overlay {
  display:none; position:fixed; inset:0; z-index:998;
  background:rgba(0,0,0,.5); backdrop-filter:blur(4px);
}
.admin-drawer-overlay.open { display:block; }

/* ── Color input ── */
input[type="color"] {
  width:40px; height:40px; border-radius:8px;
  border:2px solid rgba(0,0,0,0.1); padding:2px; cursor:pointer; background:transparent;
}

/* ── Utilities ── */
.container { max-width:640px; margin:0 auto; }
.d-flex { display:flex; }
.align-center { align-items:center; }
.justify-between { justify-content:space-between; }
.flex { display:flex; } .items-center { align-items:center; }
.gap-1 { gap:6px; } .gap-2 { gap:10px; } .gap-3 { gap:16px; }
.fw-700 { font-weight:700; } .fw-800 { font-weight:800; } .fw-bold { font-weight:700; }
.text-primary, .text-orange { color:var(--orange); }
.text-muted, .text-gray { color:var(--gray); }
.text-success { color:var(--success); }
.text-danger  { color:var(--danger); }
.text-white   { color:#fff; }
.text-sm      { font-size:13px; }
.text-xs      { font-size:11px; }
.text-center  { text-align:center; }
.mt-1 { margin-top:8px; } .mt-2 { margin-top:16px; } .mt-3 { margin-top:24px; }
.mb-1 { margin-bottom:8px; } .mb-2 { margin-bottom:16px; } .mb-3 { margin-bottom:24px; }
.p-20 { padding:20px; }
.divider { border:none; border-top:1px solid rgba(0,0,0,0.07); margin:14px 0; }
.w-100, .btn-block { width:100%; }
.hidden { display:none !important; }

/* ── Responsive ── */
@media(min-width:768px) {
  .bottom-nav, .fab { display:none; }
  body { padding-bottom:0; }
  .page-wrap { padding-top:calc(var(--nav-h) + 20px); }
  .stats-grid { grid-template-columns:repeat(3,1fr); }
  .balance-card, .profile-hdr { margin-left:0; margin-right:0; }
  .quick-grid { margin-left:0; margin-right:0; }
}
@media(max-width:900px) {
  .admin-mobile-bar   { display:flex; }
  .admin-content      { margin-left:0 !important; padding-top:72px !important; }
  .admin-sidebar {
    position:fixed !important; top:0 !important; left:-260px !important;
    bottom:0 !important; z-index:999 !important; width:240px !important;
    transition:left .28s cubic-bezier(.4,0,.2,1) !important; display:flex !important;
  }
  .admin-sidebar.open  { left:0 !important; }
  .admin-stat-grid     { grid-template-columns:repeat(2,1fr) !important; }
}
@media(min-width:901px) {
  .admin-hamburger, .admin-mobile-bar { display:none !important; }
}

/* ── Smooth transitions ── */
.page-wrap,nav,aside,.glass,.order-item,.svc-item,.ticket-item {
  transition:background .3s, border-color .3s, color .3s;
}

/* ── Tab fix for white-background pages ── */
.page-wrap .tabs-wrap {
  background: rgba(0,0,0,0.05);
}
.page-wrap .tabs-wrap .tab-btn {
  color: var(--gray);
}
.page-wrap .tabs-wrap .tab-btn.active {
  background: #fff;
  color: var(--orange);
  box-shadow: var(--shadow);
}