/* ============================================================
   DATAZAD DIGITAL CARD PRO - Core Stylesheet
   Bootstrap 5 + custom theme
   ============================================================ */

:root {
  --dz-primary: #6366f1;
  --dz-primary-rgb: 99, 102, 241;
  --dz-dark: #0f172a;
  --dz-darker: #0b1120;
  --dz-sidebar-bg: #0f172a;
  --dz-body: #f1f5f9;
  --dz-gradient: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  --dz-radius: 14px;
}

html[data-bs-theme="light"] {
  --bs-body-bg: #f1f5f9;
}
html[data-bs-theme="dark"] {
  --bs-body-bg: #0b1120;
  --dz-body: #0b1120;
  --dz-sidebar-bg: #0f172a;
}

* { scrollbar-width: thin; scrollbar-color: #94a3b8 transparent; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--dz-body);
}

[dir="rtl"] body { font-family: 'Tajawal', 'Inter', sans-serif; }

/* ---------- Buttons ---------- */
.btn-gradient {
  background: var(--dz-gradient);
  color: #fff;
  border: none;
  font-weight: 600;
}
.btn-gradient:hover { opacity: .92; color:#fff; }
.btn-outline-brand {
  border: 1.5px solid var(--dz-primary);
  color: var(--dz-primary);
  font-weight: 600;
}
.btn-outline-brand:hover { background: var(--dz-primary); color: #fff; }

/* ---------- Cards ---------- */
.card {
  border: none;
  border-radius: var(--dz-radius);
  box-shadow: 0 1px 3px rgba(0,0,0,.07);
}
.card-hover { transition: transform .2s, box-shadow .2s; }
.card-hover:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(0,0,0,.12); }

/* ---------- Navbar ---------- */
.dz-navbar {
  background: rgba(15, 23, 42, .94);
  backdrop-filter: blur(8px);
  box-shadow: 0 1px 0 rgba(255,255,255,.06);
}
.dz-navbar .navbar-brand { font-weight: 800; letter-spacing: -.02em; }

/* ---------- Language popup ---------- */
#lang-popup {
  position: fixed; inset: 0; z-index: 2000;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, rgba(15,23,42,.97), rgba(30,27,75,.96));
  backdrop-filter: blur(10px);
}
#lang-popup .lang-option {
  cursor: pointer;
  transition: transform .18s, border-color .18s, box-shadow .18s;
  border: 2px solid transparent;
  border-radius: 18px;
  background: rgba(255,255,255,.04);
}
#lang-popup .lang-option:hover {
  transform: translateY(-6px);
  border-color: var(--dz-primary);
  box-shadow: 0 16px 30px rgba(0,0,0,.35);
}
#lang-popup .lang-option .flag { font-size: 2.6rem; }

/* ---------- Floating language switcher ---------- */
.lang-switch {
  position: fixed; bottom: 18px; z-index: 1500;
  border-radius: 50px; padding: 8px 14px;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15);
  color: #eee; font-weight: 600;
}
.lang-switch:hover { background: var(--dz-primary); color:#fff; }

/* ---------- Auth pages ---------- */
.auth-wrap {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 100%);
  padding: 20px;
}
.auth-card {
  background: #fff; border-radius: 22px; overflow: hidden;
  box-shadow: 0 25px 60px rgba(0,0,0,.35);
  max-width: 460px; width: 100%;
}
[data-bs-theme="dark"] .auth-card { background: #1e293b; }
.auth-side {
  background: var(--dz-gradient);
  color: #fff; padding: 40px;
}

/* ---------- Dashboard layout ---------- */
.dz-shell { display: flex; min-height: 100vh; }
.dz-sidebar {
  width: 260px; background: var(--dz-sidebar-bg);
  color: #cbd5e1; flex-shrink: 0;
  transition: margin-left .3s;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.dz-sidebar.collapsed { margin-left: -260px; }
.dz-sidebar .nav-link {
  color: #cbd5e1; border-radius: 10px; margin: 2px 12px; padding: 10px 14px;
  display: flex; align-items: center; gap: 12px; font-weight: 500;
}
.dz-sidebar .nav-link:hover { background: rgba(255,255,255,.06); color: #fff; }
.dz-sidebar .nav-link.active { background: var(--dz-gradient); color: #fff; }
.dz-main { flex: 1; min-width: 0; }
.dz-topbar {
  background: var(--dz-sidebar-bg);
  padding: 14px 24px; display: flex; align-items: center;
  justify-content: space-between; position: sticky; top: 0; z-index: 1000;
  box-shadow: 0 1px 0 rgba(255,255,255,.06);
}
.dz-content { padding: 26px; }

/* Right sidebar for builder nav */
.dz-aside-nav .nav-link {
  color:#334155; border-radius:10px; padding:9px 14px; font-weight:600;
  border-left: 3px solid transparent;
}
.dz-aside-nav .nav-link.active { color:var(--dz-primary); background:rgba(99,102,241,.08); border-left-color:var(--dz-primary); }

/* ---------- Stat cards ---------- */
.stat-card .stat-icon { width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:24px;color:#fff;}
.stat-card .stat-value { font-size:1.6rem; font-weight:800; }

/* ---------- Admin table ---------- */
.dz-table th { font-weight: 700; text-transform: uppercase; font-size: .72rem; letter-spacing: .04em; color:#64748b;}
.dz-table td { vertical-align: middle; }

/* ---------- Card editor ---------- */
.section-panel { border:1px solid rgba(100,116,139,.15); border-radius:14px; padding:18px; margin-bottom:16px; background:var(--bs-body-bg);}
.color-input { width:48px;height:38px;padding:2px;border:1px solid #ccc;border-radius:8px;background:#fff;cursor:pointer;}

/* ---------- Public card ---------- */
.dzc-app {
  font-family: 'Inter', system-ui, sans-serif;
  max-width: 430px; margin: 0 auto; min-height: 100dvh;
  position: relative; overflow-x: hidden;
}
.dzc-app[dir="rtl"] { font-family: 'Tajawal','Inter',sans-serif; }

.dzc-cover { width:100%; height:180px; object-fit:cover; display:block; }
.dzc-avatar {
  width: 108px; height:108px; object-fit:cover; border-radius:50%;
  border: 4px solid #fff; margin-top:-58px; box-shadow:0 8px 18px rgba(0,0,0,.18);
}
.dzc-name { font-weight:800; font-size:1.45rem; }
.dzc-prof { font-weight:600; opacity:.85; }
.dzc-company-badge { background: var(--dz-gradient); color:#fff; border-radius:50px; padding:4px 14px; font-size:.8rem; font-weight:600; display:inline-block; }

.dzc-action-row { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.dzc-action {
  display:flex; align-items:center; gap:10px; padding:13px 15px; border-radius:14px;
  background:#fff; border:1px solid rgba(0,0,0,.08); font-weight:600; cursor:pointer;
  transition: transform .15s, box-shadow .15s;
}
.dzc-action:hover { transform: translateY(-2px); box-shadow:0 8px 18px rgba(0,0,0,.1); }
.dzc-action .ai { width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:17px;flex-shrink:0;}

.dzc-socials { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
.dzc-social { width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:18px;text-decoration:none;transition:transform .15s;}
.dzc-social:hover { transform: scale(1.1); color:#fff; }

.dzc-section { padding:6px 16px; }
.dzc-section-title { font-weight:800; font-size:1.05rem; margin: 16px 0 10px; }

/* gallery/portfolio cards */
.dzc-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.dzc-media-card { border-radius:14px; overflow:hidden; background:#fff; border:1px solid rgba(0,0,0,.06); }
.dzc-media-card img { width:100%; height:120px; object-fit:cover; }

/* testimonials */
.dzc-testimonial { background:#fff; border:1px solid rgba(0,0,0,.06); border-radius:14px; padding:14px; }
.dzc-rating { color:#f59e0b; }

/* save-contact floating */
.dzc-save-bar { position: sticky; bottom: 14px; padding: 8px 16px; z-index: 20; }

/* Light/Dark theme cards */
.theme-dark { color:#f1f5f9; }
.theme-dark .dzc-action { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); color:#fff; }
.theme-dark .dzc-testimonial { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); color:#fff;}
.theme-dark .dzc-media-card { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12);}
.theme-dark .dzc-section-title { color:#fff;}
.theme-dark .dc-body-inner { color:#e2e8f0; }

/* ---------- Misc ---------- */
.avatar-sm { width:38px;height:38px;border-radius:50%;object-fit:cover;}
.avatar-md { width:56px;height:56px;border-radius:50%;object-fit:cover;}
.avatar-lg { width:120px;height:120px;border-radius:50%;object-fit:cover;}

.role-admin { color:#ef4444; font-weight:700; text-transform:uppercase; font-size:.7rem;}
.role-client { color:#10b981; font-weight:700; text-transform:uppercase; font-size:.7rem;}

footer.dz-footer { background:#0f172a; color:#94a3b8; }

/* Landing sections */
.landing-hero {
  background: radial-gradient(circle at 20% 20%, rgba(99,102,241,.35), transparent 40%),
              radial-gradient(circle at 80% 10%, rgba(139,92,246,.35), transparent 40%),
              linear-gradient(180deg, #0b1120, #0f172a);
  color:#fff; padding: 90px 0;
}
.section-title { font-weight:800; }


@media (max-width: 992px) {
  .dz-sidebar { position: fixed; z-index: 1500; box-shadow: 4px 0 30px rgba(0,0,0,.3); }
  .dz-sidebar { margin-left:-260px; }
  .dz-sidebar.show { margin-left: 0; }
  .dz-overlay { position: fixed; inset:0; background:rgba(0,0,0,.5); z-index:1400; display:none;}
  .dz-overlay.show { display:block;}
}