/* =========================================================
   CookieWall SaaS - Design System
   ========================================================= */
:root{
  --primary:#6366f1;
  --primary-dark:#4f46e5;
  --primary-light:#a5b4fc;
  --secondary:#8b5cf6;
  --success:#22c55e;
  --danger:#ef4444;
  --warning:#f59e0b;
  --dark:#111827;
  --gray-900:#111827;
  --gray-800:#1f2937;
  --gray-700:#374151;
  --gray-500:#6b7280;
  --gray-300:#d1d5db;
  --gray-200:#e5e7eb;
  --gray-100:#f3f4f6;
  --gray-50:#f9fafb;
  --white:#ffffff;
  --radius:12px;
  --radius-sm:8px;
  --shadow-sm:0 1px 3px rgba(0,0,0,.06);
  --shadow:0 4px 16px rgba(17,24,39,.08);
  --shadow-lg:0 12px 40px rgba(17,24,39,.14);
  --sidebar-w:260px;
  --font: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  font-family:var(--font);
  background:var(--gray-50);
  color:var(--gray-800);
  -webkit-font-smoothing:antialiased;
}
a{color:var(--primary); text-decoration:none;}
a:hover{color:var(--primary-dark);}
img{max-width:100%;}
h1,h2,h3,h4,h5{font-weight:700; color:var(--gray-900); margin:0 0 .5em;}
p{line-height:1.6;}
.container{max-width:1200px; margin:0 auto; padding:0 20px;}

/* -------------------- Buttons -------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:11px 22px; border-radius:var(--radius-sm); border:none; cursor:pointer;
  font-weight:600; font-size:14px; transition:.2s all; text-decoration:none;
}
.btn-primary{background:linear-gradient(135deg,var(--primary),var(--secondary)); color:#fff;}
.btn-primary:hover{filter:brightness(1.08); color:#fff; transform:translateY(-1px);}
.btn-outline{background:#fff; border:1.5px solid var(--gray-300); color:var(--gray-700);}
.btn-outline:hover{border-color:var(--primary); color:var(--primary);}
.btn-success{background:var(--success); color:#fff;}
.btn-danger{background:var(--danger); color:#fff;}
.btn-sm{padding:6px 14px; font-size:13px;}
.btn-block{width:100%;}
.btn:disabled{opacity:.6; cursor:not-allowed;}

/* -------------------- Forms -------------------- */
.form-group{margin-bottom:18px;}
label{display:block; font-weight:600; font-size:13px; color:var(--gray-700); margin-bottom:6px;}
.form-control{
  width:100%; padding:11px 14px; border:1.5px solid var(--gray-200); border-radius:var(--radius-sm);
  font-size:14px; font-family:var(--font); background:#fff; color:var(--gray-800); transition:.2s;
}
.form-control:focus{outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(99,102,241,.15);}
select.form-control{appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='%236b7280' d='M0 0l6 8 6-8z'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center;}
.form-hint{font-size:12px; color:var(--gray-500); margin-top:4px;}
textarea.form-control{resize:vertical; min-height:90px;}
.input-otp{display:flex; gap:10px; justify-content:center;}
.input-otp input{width:48px; height:56px; text-align:center; font-size:22px; font-weight:700;}

/* -------------------- Alerts -------------------- */
.alert{padding:13px 16px; border-radius:var(--radius-sm); margin-bottom:16px; font-size:14px; border:1px solid transparent;}
.alert-success{background:#ecfdf5; color:#065f46; border-color:#a7f3d0;}
.alert-danger{background:#fef2f2; color:#991b1b; border-color:#fecaca;}
.alert-warning{background:#fffbeb; color:#92400e; border-color:#fde68a;}
.alert-info{background:#eff6ff; color:#1e40af; border-color:#bfdbfe;}

/* -------------------- Cards -------------------- */
.card{background:#fff; border-radius:var(--radius); box-shadow:var(--shadow-sm); border:1px solid var(--gray-100);}
.card-body{padding:24px;}
.card-header{padding:18px 24px; border-bottom:1px solid var(--gray-100); font-weight:700; display:flex; align-items:center; justify-content:space-between;}

/* -------------------- Auth pages -------------------- */
.auth-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#eef2ff,#f5f3ff); padding:20px;}
.auth-card{width:100%; max-width:420px; background:#fff; border-radius:16px; box-shadow:var(--shadow-lg); padding:38px 34px;}
.auth-logo{text-align:center; margin-bottom:22px;}
.auth-logo span{font-size:26px; font-weight:800; background:linear-gradient(135deg,var(--primary),var(--secondary)); -webkit-background-clip:text; background-clip:text; color:transparent;}
.auth-card h2{text-align:center; font-size:20px;}
.auth-card p.sub{text-align:center; color:var(--gray-500); font-size:13.5px; margin-bottom:24px;}
.auth-foot{text-align:center; margin-top:18px; font-size:13.5px; color:var(--gray-500);}

/* -------------------- Landing / Public -------------------- */
.navbar{position:sticky; top:0; z-index:100; background:rgba(255,255,255,.85); backdrop-filter:blur(8px); border-bottom:1px solid var(--gray-100);}
.navbar .container{display:flex; align-items:center; justify-content:space-between; height:70px;}
.brand{font-size:22px; font-weight:800; background:linear-gradient(135deg,var(--primary),var(--secondary)); -webkit-background-clip:text; background-clip:text; color:transparent;}
.nav-links{display:flex; align-items:center; gap:28px;}
.nav-links a{color:var(--gray-700); font-weight:600; font-size:14.5px;}
.hero{padding:90px 0 70px; text-align:center; background:radial-gradient(ellipse at top, #eef2ff 0%, #f9fafb 60%);}
.hero h1{font-size:46px; max-width:820px; margin:0 auto 18px; line-height:1.2;}
.hero h1 .grad{background:linear-gradient(135deg,var(--primary),var(--secondary)); -webkit-background-clip:text; background-clip:text; color:transparent;}
.hero p{font-size:18px; color:var(--gray-500); max-width:640px; margin:0 auto 34px;}
.hero-actions{display:flex; gap:14px; justify-content:center;}
.features{padding:80px 0;}
.section-title{text-align:center; margin-bottom:50px;}
.section-title h2{font-size:32px;}
.section-title p{color:var(--gray-500); font-size:16px;}
.feature-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
.feature-card{background:#fff; padding:28px; border-radius:var(--radius); border:1px solid var(--gray-100); box-shadow:var(--shadow-sm); transition:.25s;}
.feature-card:hover{transform:translateY(-4px); box-shadow:var(--shadow);}
.feature-icon{width:48px; height:48px; border-radius:12px; background:linear-gradient(135deg,var(--primary),var(--secondary)); display:flex; align-items:center; justify-content:center; color:#fff; font-size:22px; margin-bottom:16px;}
.pricing-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; align-items:stretch;}
.price-card{background:#fff; border:1.5px solid var(--gray-200); border-radius:var(--radius); padding:32px; display:flex; flex-direction:column;}
.price-card.popular{border-color:var(--primary); box-shadow:var(--shadow-lg); transform:scale(1.03); position:relative;}
.price-card.popular::before{content:'Most Popular'; position:absolute; top:-13px; left:50%; transform:translateX(-50%); background:linear-gradient(135deg,var(--primary),var(--secondary)); color:#fff; font-size:12px; font-weight:700; padding:5px 14px; border-radius:20px;}
.price-card h3{font-size:20px;}
.price-amt{font-size:38px; font-weight:800; margin:14px 0;}
.price-amt span{font-size:15px; font-weight:500; color:var(--gray-500);}
.price-features{list-style:none; padding:0; margin:22px 0; flex:1;}
.price-features li{padding:8px 0; font-size:14px; color:var(--gray-700); display:flex; gap:10px; align-items:center;}
.price-features li::before{content:'✓'; color:var(--success); font-weight:800;}
footer.site-footer{background:var(--gray-900); color:var(--gray-300); padding:50px 0 24px; margin-top:60px;}
footer.site-footer a{color:var(--gray-300);}
footer.site-footer .container{display:flex; justify-content:space-between; flex-wrap:wrap; gap:30px;}
.foot-bottom{text-align:center; color:var(--gray-500); font-size:13px; margin-top:34px; border-top:1px solid #1f2937; padding-top:20px;}

/* -------------------- Dashboard Layout -------------------- */
.dash-wrap{display:flex; min-height:100vh;}
.sidebar{
  width:var(--sidebar-w); background:var(--gray-900); color:#e5e7eb; flex-shrink:0;
  position:fixed; top:0; left:0; bottom:0; overflow-y:auto; z-index:200; transition:.25s;
}
.sidebar .brand-box{padding:22px 24px; border-bottom:1px solid #1f2937;}
.sidebar .brand-box span{font-size:20px; font-weight:800; color:#fff;}
.sidebar .brand-box small{display:block; color:#9ca3af; font-size:11.5px; margin-top:2px; text-transform:uppercase; letter-spacing:.5px;}
.sidebar nav{padding:16px 12px;}
.sidebar nav a{
  display:flex; align-items:center; gap:12px; padding:11px 14px; border-radius:8px; color:#cbd5e1;
  font-size:14px; font-weight:500; margin-bottom:2px; transition:.15s;
}
.sidebar nav a:hover{background:#1f2937; color:#fff;}
.sidebar nav a.active{background:linear-gradient(135deg,var(--primary),var(--secondary)); color:#fff;}
.sidebar nav .nav-label{padding:16px 14px 6px; font-size:11px; text-transform:uppercase; letter-spacing:.6px; color:#6b7280; font-weight:700;}
.main-content{margin-left:var(--sidebar-w); flex:1; min-width:0;}
.topbar{
  height:66px; background:#fff; border-bottom:1px solid var(--gray-100); display:flex; align-items:center;
  justify-content:space-between; padding:0 28px; position:sticky; top:0; z-index:90;
}
.topbar .page-title{font-size:18px; font-weight:700;}
.topbar .user-chip{display:flex; align-items:center; gap:10px; cursor:pointer;}
.avatar-circle{width:36px; height:36px; border-radius:50%; background:linear-gradient(135deg,var(--primary),var(--secondary)); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px;}
.page-body{padding:28px;}
.menu-toggle{display:none; background:none; border:none; font-size:22px; cursor:pointer;}

/* Stat cards */
.stats-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-bottom:28px;}
.stat-card{background:#fff; border-radius:var(--radius); padding:22px; border:1px solid var(--gray-100); box-shadow:var(--shadow-sm);}
.stat-card .stat-top{display:flex; justify-content:space-between; align-items:flex-start;}
.stat-icon{width:42px; height:42px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:19px; color:#fff;}
.stat-card h3{font-size:26px; margin:14px 0 2px;}
.stat-card .stat-label{color:var(--gray-500); font-size:13px;}
.stat-card .stat-delta{font-size:12px; font-weight:700; margin-top:6px;}
.stat-delta.up{color:var(--success);}
.stat-delta.down{color:var(--danger);}

/* Table */
.table-wrap{overflow-x:auto;}
table.data-table{width:100%; border-collapse:collapse; font-size:14px;}
table.data-table th{text-align:left; padding:12px 16px; background:var(--gray-50); color:var(--gray-500); font-size:12px; text-transform:uppercase; letter-spacing:.4px; border-bottom:1px solid var(--gray-200);}
table.data-table td{padding:14px 16px; border-bottom:1px solid var(--gray-100); color:var(--gray-700);}
table.data-table tr:hover td{background:var(--gray-50);}
.badge{display:inline-block; padding:4px 11px; border-radius:20px; font-size:11.5px; font-weight:700; text-transform:capitalize;}
.badge-active,.badge-active_,.badge-paid,.badge-active_status{background:#ecfdf5; color:#065f46;}
.badge-active{background:#ecfdf5; color:#065f46;}
.badge-inactive,.badge-suspended,.badge-failed,.badge-expired,.badge-cancelled{background:#fef2f2; color:#991b1b;}
.badge-pending{background:#fffbeb; color:#92400e;}
.badge-super_admin{background:#eef2ff; color:#4338ca;}
.badge-reseller{background:#fdf4ff; color:#a21caf;}
.badge-user{background:#f0f9ff; color:#0369a1;}

/* Modal */
.modal-backdrop-c{position:fixed; inset:0; background:rgba(17,24,39,.55); z-index:1000; display:none; align-items:center; justify-content:center; padding:20px;}
.modal-backdrop-c.show{display:flex;}
.modal-box{background:#fff; border-radius:var(--radius); width:100%; max-width:520px; max-height:90vh; overflow-y:auto; box-shadow:var(--shadow-lg);}
.modal-box .modal-head{padding:18px 22px; border-bottom:1px solid var(--gray-100); display:flex; justify-content:space-between; align-items:center;}
.modal-box .modal-body-c{padding:22px;}
.modal-box .close-x{cursor:pointer; font-size:20px; color:var(--gray-500); background:none; border:none;}

/* Tabs */
.tabs{display:flex; gap:6px; border-bottom:1.5px solid var(--gray-200); margin-bottom:22px;}
.tabs a{padding:11px 18px; font-weight:600; font-size:14px; color:var(--gray-500); border-bottom:2px solid transparent; margin-bottom:-1.5px;}
.tabs a.active{color:var(--primary); border-color:var(--primary);}

/* Color swatch input */
.color-row{display:flex; align-items:center; gap:10px;}
.color-row input[type=color]{width:44px; height:38px; border:1px solid var(--gray-200); border-radius:8px; padding:2px; cursor:pointer;}

/* Embed code box */
.code-box{background:var(--gray-900); color:#a5f3fc; padding:16px 18px; border-radius:var(--radius-sm); font-family:'Courier New',monospace; font-size:13px; overflow-x:auto; position:relative;}
.code-box .copy-btn{position:absolute; top:10px; right:10px;}

/* Preview frame for cookie banner */
.preview-box{background:#e5e7eb; border-radius:var(--radius); min-height:320px; position:relative; overflow:hidden; background-image:radial-gradient(#cbd5e1 1px, transparent 1px); background-size:16px 16px;}

/* Toggle switch */
.switch{position:relative; display:inline-block; width:44px; height:24px;}
.switch input{opacity:0; width:0; height:0;}
.slider-tg{position:absolute; cursor:pointer; inset:0; background:var(--gray-300); border-radius:24px; transition:.2s;}
.slider-tg::before{content:''; position:absolute; height:18px; width:18px; left:3px; bottom:3px; background:#fff; border-radius:50%; transition:.2s;}
.switch input:checked + .slider-tg{background:var(--primary);}
.switch input:checked + .slider-tg::before{transform:translateX(20px);}

/* Responsive */
@media(max-width:992px){
  .sidebar{transform:translateX(-100%);}
  .sidebar.open{transform:translateX(0);}
  .main-content{margin-left:0;}
  .menu-toggle{display:block;}
  .stats-grid{grid-template-columns:repeat(2,1fr);}
  .feature-grid,.pricing-grid{grid-template-columns:1fr;}
  .hero h1{font-size:32px;}
  .price-card.popular{transform:none;}
}