/* ============================================================
   RentalSMM Modern Theme — shared across user & admin panels
   ============================================================ */

:root{
  --brand-1:#4f46e5;   /* indigo */
  --brand-2:#7c3aed;   /* violet */
  --brand-3:#06b6d4;   /* cyan */
  --brand-success:#10b981;
  --brand-warning:#f59e0b;
  --brand-danger:#ef4444;
  --brand-info:#0ea5e9;
  --bg-soft:#f5f6fb;
  --text-dark:#1e2432;
  --radius:14px;
}

html{ overflow-x:hidden; }
body{
  background:var(--bg-soft);
  font-family:'Inter','Segoe UI',system-ui,-apple-system,sans-serif;
  color:var(--text-dark);
  overflow-x:hidden; /* defensive: no single stray element can force the whole
                         page (and therefore the mobile browser's zoom level)
                         wider than the viewport — long values still scroll
                         locally inside .table-responsive instead. */
  max-width:100vw;
}
img{ max-width:100%; height:auto; }

h1,h2,h3,h4,h5,h6{ font-weight:700; letter-spacing:-.01em; }

/* ---------- Top navbar ---------- */
.rsmm-navbar{
  background:linear-gradient(100deg, var(--brand-1), var(--brand-2) 60%, var(--brand-3));
  box-shadow:0 2px 14px rgba(79,70,229,.22);
  padding-top:.7rem;
  padding-bottom:.7rem;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.rsmm-navbar .navbar-brand{
  font-weight:800;
  letter-spacing:-.02em;
  display:flex; align-items:center; gap:.55rem;
  font-size:1.15rem;
}
.rsmm-navbar .nav-link, .rsmm-navbar .navbar-text{ color:rgba(255,255,255,.92)!important; }
.rsmm-navbar .nav-link:hover{ color:#fff!important; }
.rsmm-navbar .nav-item > .nav-link{
  border-radius:10px;
  transition:background .15s ease;
}
.rsmm-navbar .nav-item > .nav-link:hover{ background:rgba(255,255,255,.12); }
.rsmm-navbar .dropdown-menu{ border:none; border-radius:14px; box-shadow:0 12px 32px rgba(0,0,0,.16); padding:.5rem; margin-top:.6rem!important; }
.rsmm-navbar .dropdown-item{ border-radius:8px; padding:.5rem .7rem; font-size:.88rem; }
.rsmm-navbar .dropdown-item:active{ background:var(--brand-1); }
.wallet-pill{
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.22);
  border-radius:999px;
  padding:.4rem 1rem;
  font-weight:700;
  color:#fff!important;
  font-size:.88rem;
}
.header-avatar{
  width:32px;height:32px;
  border-radius:9px;
  background:rgba(255,255,255,.22);
  border:1px solid rgba(255,255,255,.3);
  display:flex;align-items:center;justify-content:center;
  font-weight:800;
  font-size:.8rem;
  color:#fff;
}

/* ---------- Sidebar ---------- */
.rsmm-sidebar{
  background:#ffffff;
  border-right:1px solid #eef0f6;
  min-height:calc(100vh - 62px);
  display:flex;
  flex-direction:column;
}
.sidebar-profile{
  display:flex;
  align-items:center;
  gap:.7rem;
  padding:.9rem .9rem 1.1rem;
  margin-bottom:.5rem;
  border-bottom:1px solid #f0f1f6;
}
.sidebar-profile-avatar{
  width:42px;height:42px;
  border-radius:12px;
  background:linear-gradient(135deg, var(--brand-1), var(--brand-2));
  color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-weight:800;
  font-size:1rem;
  flex-shrink:0;
  box-shadow:0 4px 10px rgba(79,70,229,.25);
}
.sidebar-profile-name{ font-weight:700; font-size:.9rem; color:#1e2432; line-height:1.2; }
.sidebar-profile-sub{ font-size:.74rem; color:#9aa0b4; line-height:1.3; }
.rsmm-sidebar .nav-link{
  color:#4b5468;
  border-radius:10px;
  padding:.55rem .8rem;
  font-weight:500;
  font-size:.88rem;
  display:flex; align-items:center; gap:.65rem;
  transition:all .15s ease;
  position:relative;
}
.rsmm-sidebar .nav-link .nav-icon{
  width:28px;height:28px;
  border-radius:8px;
  background:#f4f5fa;
  color:#7c839a;
  display:flex;align-items:center;justify-content:center;
  font-size:.92rem;
  flex-shrink:0;
  transition:all .15s ease;
}
.rsmm-sidebar .nav-link:hover{ background:#f4f5fb; color:var(--brand-1); }
.rsmm-sidebar .nav-link:hover .nav-icon{ background:#fff; color:var(--brand-1); }
.rsmm-sidebar .nav-link.active{
  background:linear-gradient(100deg, var(--brand-1), var(--brand-2));
  color:#fff;
  box-shadow:0 4px 10px rgba(79,70,229,.28);
}
.rsmm-sidebar .nav-link.active .nav-icon{ background:rgba(255,255,255,.22); color:#fff; }
.rsmm-sidebar .nav-link.active::before{
  content:"";
  position:absolute; left:-.9rem; top:50%; transform:translateY(-50%);
  width:3px; height:60%;
  background:var(--brand-3);
  border-radius:0 3px 3px 0;
}
.sidebar-group-label{
  font-size:.66rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.07em;
  color:#b1b6c8;
  padding:1.1rem .9rem .4rem;
  margin-top:.2rem;
  border-top:1px solid #f4f5f9;
}
.rsmm-sidebar .nav-item:first-child .sidebar-group-label{
  margin-top:0; padding-top:.25rem; border-top:none;
}
.sidebar-footer-brand{
  margin-top:auto;
  padding:1rem .9rem;
  font-size:.7rem;
  color:#c3c7d6;
  text-align:center;
  border-top:1px solid #f4f5f9;
}

/* offcanvas sidebar on mobile */
.offcanvas .rsmm-sidebar{ min-height:100%; border-right:none; }

/* ---------- Cards ---------- */
.card{
  border:none;
  border-radius:var(--radius);
  box-shadow:0 2px 12px rgba(30,36,50,.06);
}
.card-header{ background:#fff; border-bottom:1px solid #f0f1f6; font-weight:700; border-radius:var(--radius) var(--radius) 0 0!important; }

.stat-card{
  border-radius:var(--radius);
  color:#fff;
  padding:1.1rem 1.25rem;
  position:relative;
  overflow:hidden;
  box-shadow:0 8px 20px rgba(0,0,0,.08);
  height:100%;
  min-height:112px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.stat-card i.bg-icon{
  position:absolute; right:-10px; bottom:-10px; font-size:4.5rem; opacity:.18;
}
.stat-card small{ opacity:.9; font-weight:600; text-transform:uppercase; letter-spacing:.04em; font-size:.72rem; }
.stat-card h4{ margin:.25rem 0 0; font-weight:800; word-break:break-word; }
.stat-card h4.stat-card-amount{ font-size:1.35rem; }

.grad-indigo{ background:linear-gradient(135deg,#4f46e5,#7c3aed); }
.grad-green{ background:linear-gradient(135deg,#10b981,#059669); }
.grad-orange{ background:linear-gradient(135deg,#f59e0b,#ea580c); }
.grad-red{ background:linear-gradient(135deg,#ef4444,#dc2626); }
.grad-cyan{ background:linear-gradient(135deg,#06b6d4,#0891b2); }
.grad-purple{ background:linear-gradient(135deg,#8b5cf6,#6d28d9); }

/* ---------- Buttons ---------- */
.btn-primary{
  background:linear-gradient(100deg, var(--brand-1), var(--brand-2));
  border:none;
  font-weight:600;
}
.btn-primary:hover, .btn-primary:focus{ background:linear-gradient(100deg,#4338ca,#6d28d9); }
.btn-primary:disabled{ background:#c7c9d9; opacity:1; }
.btn{ border-radius:10px; }

/* ---------- Plan cards ---------- */
.plan-card{ border-radius:var(--radius); transition:transform .15s ease, box-shadow .15s ease; }
.plan-card:hover{ transform:translateY(-4px); box-shadow:0 14px 30px rgba(79,70,229,.15); }
.plan-price{ font-weight:800; background:linear-gradient(100deg,var(--brand-1),var(--brand-2)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.plan-badge{ background:linear-gradient(100deg,var(--brand-1),var(--brand-3)); color:#fff; border-radius:999px; padding:.25rem .75rem; font-size:.72rem; font-weight:700; letter-spacing:.03em; }

/* ---------- Tables ---------- */
.table thead th{ text-transform:uppercase; font-size:.72rem; letter-spacing:.04em; color:#8b91a7; border-bottom-width:1px; }
.table td, .table th{ vertical-align:middle; }

/* ---------- Badges ---------- */
.badge{ font-weight:600; padding:.4em .7em; border-radius:8px; }

/* ---------- Auth pages ---------- */
.auth-wrapper{
  min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, var(--brand-1), var(--brand-2) 55%, var(--brand-3));
  padding:1.5rem;
}
.auth-card{ border-radius:20px; overflow:hidden; box-shadow:0 25px 60px rgba(0,0,0,.25); }
.auth-brand{ color:#fff; text-align:center; margin-bottom:1.25rem; }
.auth-brand .logo-circle{
  width:56px;height:56px;border-radius:16px;background:rgba(255,255,255,.18);
  display:flex;align-items:center;justify-content:center;margin:0 auto .6rem;font-size:1.6rem;
}

/* ---------- Checkout / stepper form ---------- */
.checkout-summary{ border-radius:var(--radius); background:linear-gradient(135deg,var(--brand-1),var(--brand-2)); color:#fff; }

/* ---------- Dashboard welcome hero ---------- */
.dashboard-hero{
  border-radius:var(--radius);
  background:linear-gradient(120deg, var(--brand-1), var(--brand-2) 55%, var(--brand-3));
  color:#fff;
  position:relative;
  overflow:hidden;
  box-shadow:0 10px 30px rgba(79,70,229,.22);
}
.dashboard-hero::after{
  content:"";
  position:absolute; right:-40px; top:-40px;
  width:180px;height:180px;border-radius:50%;
  background:rgba(255,255,255,.08);
}
.dashboard-hero-eyebrow{
  font-size:.75rem; font-weight:700; text-transform:uppercase; letter-spacing:.08em; opacity:.85;
}
.dashboard-hero h2{ font-weight:800; }
.dashboard-hero-balance{
  display:inline-block;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.2);
  border-radius:12px;
  padding:.6rem 1.1rem;
}
.wave{ display:inline-block; animation:wave-anim 2.2s ease-in-out infinite; transform-origin:70% 70%; }
@keyframes wave-anim{
  0%,60%,100%{ transform:rotate(0deg); }
  10%{ transform:rotate(14deg); }
  20%{ transform:rotate(-8deg); }
  30%{ transform:rotate(14deg); }
  40%{ transform:rotate(-4deg); }
}
.ns-box{
  background:#f0f1fb; border:1px dashed #c7c9e8; border-radius:10px; padding:.75rem 1rem; font-family:monospace; font-size:.9rem;
}
.field-hint{ font-size:.78rem; color:#8b91a7; }

/* ---------- Misc ---------- */
.text-muted-soft{ color:#8b91a7; }
.section-title{ font-weight:800; margin-bottom:1rem; }
.empty-state{ text-align:center; padding:3rem 1rem; color:#8b91a7; }
.empty-state i{ font-size:2.5rem; opacity:.4; margin-bottom:.75rem; display:block; }

.notification-banner{
  background:linear-gradient(100deg, var(--brand-1), var(--brand-2));
  color:#fff;
  border:none;
  border-radius:var(--radius);
}
.notification-banner .btn-close{ filter:invert(1) grayscale(100%) brightness(200%); }

/* ---------- WhatsApp floating chat button ---------- */
.whatsapp-float{
  position:fixed;
  right:20px;
  bottom:20px;
  width:58px;height:58px;
  background:#25D366;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:#fff;
  font-size:1.7rem;
  box-shadow:0 6px 18px rgba(37,211,102,.45);
  z-index:1050;
  transition:transform .15s ease;
  text-decoration:none;
}
.whatsapp-float.whatsapp-left{ right:auto; left:20px; }
.whatsapp-float:hover{ transform:scale(1.08); color:#fff; }
@media (max-width: 575.98px){
  .whatsapp-float{ right:14px; bottom:14px; width:52px; height:52px; font-size:1.5rem; }
  .whatsapp-float.whatsapp-left{ right:auto; left:14px; }
}

/* ---------- Back to top floating button ---------- */
.back-to-top{
  position:fixed;
  right:20px;
  bottom:90px;
  width:46px;height:46px;
  border-radius:50%;
  background:#fff;
  color:var(--brand-1);
  border:1px solid #e5e7eb;
  box-shadow:0 4px 14px rgba(0,0,0,.12);
  display:flex;align-items:center;justify-content:center;
  font-size:1.2rem;
  z-index:1049;
  opacity:0;
  visibility:hidden;
  transform:translateY(10px);
  transition:all .2s ease;
}
.back-to-top.back-to-top-left{ right:auto; left:20px; }
.back-to-top.show{ opacity:1; visibility:visible; transform:translateY(0); }
.back-to-top:hover{ background:var(--brand-1); color:#fff; }
@media (max-width: 575.98px){
  .back-to-top{ right:14px; bottom:78px; width:42px; height:42px; }
  .back-to-top.back-to-top-left{ right:auto; left:14px; }
}

/* ---------- Low balance / maintenance banners ---------- */
.low-balance-banner{ background:#fff7ed; border:1px solid #fed7aa; color:#9a3412; border-radius:var(--radius); }

/* Low balance toast — floats, auto-hides, doesn't push page content around */
.low-balance-toast-wrap{
  position:fixed;
  top:80px;
  right:20px;
  z-index:1080;
  max-width:340px;
}
.low-balance-toast{
  background:linear-gradient(100deg, #f59e0b, #ea580c);
  color:#fff;
  border:none;
  border-radius:var(--radius);
  box-shadow:0 10px 28px rgba(234,88,12,.3);
}
.low-balance-toast .toast-body a{ color:#fff; text-decoration:underline; }
@media (max-width: 575.98px){
  .low-balance-toast-wrap{ top:auto; bottom:90px; right:12px; left:12px; max-width:none; }
}

/* ---------- Public page footer (index.php, pricing.php, legal.php) ---------- */
.lp-footer{ padding:2rem 1.5rem; text-align:center; color:#8b91a7; font-size:.9rem; }
.lp-footer a{ text-decoration:none; }
.lp-footer a:hover{ text-decoration:underline; }
@media (max-width: 991.98px){
  main{ padding:1rem!important; }
  .stat-card h4{ font-size:1.15rem; }
}

/* ============================================================
   Per-theme layout variations — changing the theme in Admin →
   Themes doesn't just recolor things, it shifts the overall feel
   (corner sharpness, shadow weight, spacing) so each preset reads
   as a genuinely different layout, not just a palette swap.
   ============================================================ */

/* Emerald Panel: sharper corners, flatter shadows, boxier icon badges —
   closer to a classic hosting/panel-store look. */
body[data-theme="emerald_panel"]{ --radius:10px; }
body[data-theme="emerald_panel"] .card{ box-shadow:0 1px 4px rgba(16,24,20,.07); }
body[data-theme="emerald_panel"] .stat-card{ border-radius:12px; box-shadow:0 4px 10px rgba(0,0,0,.10); }
body[data-theme="emerald_panel"] .lp-feature-icon,
body[data-theme="emerald_panel"] .auth-brand .logo-circle{ border-radius:10px; }
body[data-theme="emerald_panel"] .rsmm-sidebar .nav-link.active{ border-radius:8px; box-shadow:none; }
body[data-theme="emerald_panel"] .btn{ border-radius:8px; }
body[data-theme="emerald_panel"] .plan-badge{ border-radius:6px; }
body[data-theme="emerald_panel"] .rsmm-navbar{ box-shadow:0 1px 6px rgba(5,150,105,.20); }

/* Sunset Ember: rounder corners, bolder/warmer shadows, slightly heavier headings. */
body[data-theme="sunset_ember"]{ --radius:20px; }
body[data-theme="sunset_ember"] .card{ box-shadow:0 6px 20px rgba(194,65,12,.08); }
body[data-theme="sunset_ember"] .stat-card{ border-radius:20px; box-shadow:0 10px 24px rgba(194,65,12,.18); }
body[data-theme="sunset_ember"] h1, body[data-theme="sunset_ember"] h2,
body[data-theme="sunset_ember"] h3, body[data-theme="sunset_ember"] .section-title{ font-weight:800; }
body[data-theme="sunset_ember"] .btn{ border-radius:14px; }
body[data-theme="sunset_ember"] .plan-badge{ border-radius:999px; }
body[data-theme="sunset_ember"] .rsmm-sidebar .nav-link.active{ box-shadow:0 6px 14px rgba(220,38,38,.28); }
body[data-theme="sunset_ember"] .rsmm-navbar{ box-shadow:0 2px 14px rgba(220,38,38,.25); }
body[data-theme="sunset_ember"] .auth-card{ border-radius:26px; }