/* =========================================================
   Add.mh93.net — Premium UI (Cairo + Tajawal)
   Theme: Black + Teal (SaaS Look)
   Replace your style.css with this FULL file
========================================================= */

/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;400;600;700;800&family=Tajawal:wght@300;400;500;700;800&display=swap');

/* Root */
:root{
  --bg0:#03060a;
  --bg1:#070c12;
  --panel:rgba(255,255,255,.06);
  --panel2:rgba(255,255,255,.085);
  --stroke:rgba(255,255,255,.10);
  --stroke2:rgba(255,255,255,.14);

  --text:#eaf4ff;
  --muted:rgba(234,244,255,.72);
  --soft:rgba(234,244,255,.50);

  --teal:#14b8a6;
  --cyan:#06b6d4;
  --tealGlow:rgba(20,184,166,.25);
  --cyanGlow:rgba(6,182,212,.20);

  --danger:#ef4444;
  --warn:#f59e0b;
  --ok:#22c55e;

  --radius:18px;
  --radius2:22px;

  --shadow1: 0 18px 60px rgba(0,0,0,.55);
  --shadow2: 0 10px 30px rgba(0,0,0,.35);

  --container: 1120px;
}

/* Reset */
*{box-sizing:border-box;}
html,body{height:100%;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:"Cairo","Tajawal",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:
    radial-gradient(900px 420px at 15% 12%, rgba(20,184,166,.14), transparent 60%),
    radial-gradient(700px 360px at 85% 10%, rgba(6,182,212,.12), transparent 60%),
    linear-gradient(180deg, var(--bg0) 0%, var(--bg1) 55%, var(--bg0) 100%);
  color:var(--text);
  overflow-x:hidden;
}

a{color:inherit;text-decoration:none;}
img,svg{max-width:100%;height:auto;display:block;}
/* prevents giant icons */
svg{max-height:110px;}

/* Typography */
h1,h2,h3,h4{margin:0 0 10px 0; line-height:1.2;}
p{margin:0 0 10px 0;color:var(--muted);}

/* Container */
.container,.wrap,main,.page{
  width:min(var(--container), 92vw);
  margin-inline:auto;
}

/* Spacing */
section{padding:30px 0;}
hr{
  border:0;
  border-top:1px solid var(--stroke);
  margin:18px 0;
}

/* Topbar / Header */
header,.navbar,.topbar{
  width:min(var(--container), 92vw);
  margin:14px auto 0 auto;
  background:rgba(0,0,0,.35);
  border:1px solid var(--stroke);
  border-radius:var(--radius2);
  padding:12px 14px;
  box-shadow: var(--shadow2);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.navbar-inner,.topbar-inner,header .inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:160px;
}
.brand .logo{
  width:36px;height:36px;border-radius:14px;
  background: linear-gradient(135deg, var(--teal), var(--cyan));
  box-shadow: 0 0 0 4px rgba(20,184,166,.12);
}
.brand .title{
  font-weight:800;
  letter-spacing:.2px;
}
.brand .sub{
  font-size:12px;color:var(--soft);
  margin-top:-2px;
}

.nav-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

/* Buttons */
.btn,button,.button,a.button,input[type="submit"]{
  appearance:none;
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.06);
  color:var(--text);
  padding:12px 14px;
  border-radius:14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  cursor:pointer;
  box-shadow: 0 12px 30px rgba(0,0,0,.25);
  transition: transform .18s ease, filter .18s ease, border-color .18s ease, background .18s ease;
  font-family: inherit;
  font-weight:700;
  text-decoration:none;
  line-height:1;
  white-space:nowrap;
}

.btn:hover,button:hover,.button:hover,a.button:hover,input[type="submit"]:hover{
  transform: translateY(-1px);
  filter: brightness(1.07);
  border-color: var(--stroke2);
}
.btn:active,button:active,.button:active,a.button:active,input[type="submit"]:active{
  transform: translateY(0px);
  filter: brightness(.98);
}

.btn-primary,.primary{
  background: linear-gradient(135deg, var(--teal), var(--cyan));
  color:#001613;
  border-color: rgba(20,184,166,.45);
  box-shadow: 0 18px 45px rgba(20,184,166,.15);
}
.btn-primary:hover,.primary:hover{
  filter: brightness(1.05);
}

.btn-ghost{
  background: rgba(255,255,255,.04);
}

.btn-danger{
  background: rgba(239,68,68,.12);
  border-color: rgba(239,68,68,.30);
}
.btn-danger:hover{filter:brightness(1.06);}

.btn-sm{
  padding:10px 12px;
  border-radius:12px;
  font-size:13px;
}

/* Badges */
.badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.05);
  color: var(--muted);
  font-size:12px;
  font-weight:700;
}
.badge.teal{
  border-color: rgba(20,184,166,.35);
  background: rgba(20,184,166,.10);
  color: rgba(234,244,255,.88);
}

/* Cards / Panels */
.card,.panel,.box,.tile{
  background: linear-gradient(180deg, var(--panel2), var(--panel));
  border:1px solid var(--stroke);
  border-radius: var(--radius);
  box-shadow: var(--shadow1);
  padding:16px;
}

.card.soft{
  box-shadow: 0 18px 40px rgba(0,0,0,.30);
}

.card-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}
.card-title{
  font-weight:800;
  letter-spacing:.2px;
}
.card-desc{font-size:13px;color:var(--muted);}

/* HERO (Landing) */
.hero{
  margin-top:18px;
  border-radius: var(--radius2);
  background:
    radial-gradient(600px 260px at 25% 10%, rgba(20,184,166,.18), transparent 60%),
    radial-gradient(520px 240px at 85% 25%, rgba(6,182,212,.14), transparent 60%),
    linear-gradient(135deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: var(--shadow1);
  padding: 34px 18px;
}

.hero-grid{
  display:grid;
  grid-template-columns: 1.15fr .85fr;
  gap:16px;
  align-items:stretch;
}

@media (max-width: 900px){
  .hero-grid{grid-template-columns: 1fr; }
}

.hero h1{
  font-size: clamp(26px, 4.6vw, 46px);
  margin-bottom: 10px;
}
.hero .lead{
  font-size: 15px;
  color: var(--muted);
  max-width: 58ch;
}

.hero-actions{
  margin-top: 14px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.hero-side{
  height:100%;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.mock{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius: var(--radius);
  border: 1px solid var(--stroke);
  background: rgba(0,0,0,.25);
  box-shadow: 0 18px 60px rgba(0,0,0,.45);
  padding:12px;
  position:relative;
  overflow:hidden;
}

.mock::before{
  content:"";
  position:absolute;
  inset:-2px;
  background: radial-gradient(400px 180px at 50% 10%, rgba(20,184,166,.18), transparent 65%);
  pointer-events:none;
}

.mock-card{
  width: min(420px, 96%);
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  padding: 14px;
  text-align:center;
}

.mock-card .mini{
  display:flex;
  justify-content:center;
  gap:8px;
  margin-bottom:10px;
}
.mock-card .mini span{
  width:10px;height:10px;border-radius:999px;
  background: rgba(255,255,255,.25);
}
.mock-card .mini span:nth-child(1){background: rgba(239,68,68,.45);}
.mock-card .mini span:nth-child(2){background: rgba(245,158,11,.45);}
.mock-card .mini span:nth-child(3){background: rgba(34,197,94,.45);}

.mock-card .title{
  font-weight:800;
  margin-bottom:6px;
}
.mock-card .line{
  height:10px;
  background: rgba(255,255,255,.10);
  border-radius:999px;
  margin: 10px auto;
  width: 85%;
}
.mock-card .line.sm{width:65%;}

/* Layout grids (general) */
.grid{
  display:grid;
  gap:14px;
}

.grid-2{grid-template-columns: repeat(2, minmax(0,1fr));}
.grid-3{grid-template-columns: repeat(3, minmax(0,1fr));}
.grid-4{grid-template-columns: repeat(4, minmax(0,1fr));}

@media (max-width: 980px){
  .grid-4{grid-template-columns: repeat(2, minmax(0,1fr));}
}
@media (max-width: 900px){
  .grid-3{grid-template-columns: repeat(2, minmax(0,1fr));}
}
@media (max-width: 560px){
  .grid-2,.grid-3,.grid-4{grid-template-columns: 1fr;}
}

/* KPI Cards */
.kpi-grid,.stats{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 14px;
}
@media (max-width: 900px){
  .kpi-grid,.stats{grid-template-columns: repeat(2, minmax(0,1fr));}
}
@media (max-width: 560px){
  .kpi-grid,.stats{grid-template-columns: 1fr;}
}

.kpi{
  padding:16px;
  border-radius: var(--radius);
  border:1px solid var(--stroke);
  background: linear-gradient(180deg, rgba(255,255,255,.085), rgba(255,255,255,.05));
  box-shadow: 0 18px 55px rgba(0,0,0,.45);
  position:relative;
  overflow:hidden;
}
.kpi::after{
  content:"";
  position:absolute;
  width:220px;height:220px;
  right:-120px; top:-120px;
  background: radial-gradient(circle, rgba(20,184,166,.20), transparent 60%);
  pointer-events:none;
}
.kpi .label{
  color: var(--muted);
  font-size: 13px;
  font-weight:700;
}
.kpi .value{
  margin-top: 6px;
  font-size: 26px;
  font-weight: 900;
  letter-spacing:.2px;
}
.kpi .hint{
  margin-top: 6px;
  font-size: 12px;
  color: var(--soft);
}

/* Forms */
form{margin:0;}
.form-card{
  width: min(560px, 92vw);
  margin: 18px auto 0 auto;
}
.field{margin-bottom:12px;}
label{
  display:block;
  margin-bottom:6px;
  font-weight:700;
  color: rgba(234,244,255,.88);
  font-size: 13px;
}

input,select,textarea{
  width:100%;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid var(--stroke);
  background: rgba(0,0,0,.28);
  color: var(--text);
  outline:none;
  transition: box-shadow .18s ease, border-color .18s ease, filter .18s ease;
  font-family: inherit;
}

textarea{min-height:110px; resize:vertical;}

input:focus,select:focus,textarea:focus{
  border-color: rgba(20,184,166,.55);
  box-shadow: 0 0 0 4px rgba(20,184,166,.12);
  filter: brightness(1.03);
}

.help{
  font-size:12px;
  color: var(--soft);
  margin-top:6px;
}

/* Form rows */
.row,.actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}
.row > *{flex:1 1 auto;}
.row .grow{flex: 2 1 260px;}
.row .shrink{flex: 1 1 180px;}

/* Tables (Admin lists) */
table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  overflow:hidden;
  border-radius: 16px;
  border:1px solid var(--stroke);
  background: rgba(0,0,0,.18);
}
thead th{
  text-align:right;
  padding: 12px;
  font-size: 13px;
  color: rgba(234,244,255,.88);
  background: rgba(255,255,255,.06);
  border-bottom:1px solid var(--stroke);
}
tbody td{
  padding: 12px;
  border-bottom:1px solid rgba(255,255,255,.06);
  color: rgba(234,244,255,.90);
  vertical-align:middle;
  font-size: 13px;
}
tbody tr:hover td{
  background: rgba(255,255,255,.03);
}
tbody tr:last-child td{border-bottom:0;}

/* Pills / Status */
.pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.04);
  font-size:12px;
  font-weight:800;
  color: rgba(234,244,255,.85);
}
.pill.on{
  border-color: rgba(34,197,94,.28);
  background: rgba(34,197,94,.10);
}
.pill.off{
  border-color: rgba(239,68,68,.26);
  background: rgba(239,68,68,.10);
}

/* Alerts */
.alert{
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.05);
  border-radius: 16px;
  padding: 12px 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  color: rgba(234,244,255,.88);
}
.alert.success{
  border-color: rgba(34,197,94,.28);
  background: rgba(34,197,94,.08);
}
.alert.danger{
  border-color: rgba(239,68,68,.30);
  background: rgba(239,68,68,.08);
}
.alert.warn{
  border-color: rgba(245,158,11,.30);
  background: rgba(245,158,11,.08);
}

/* Contact Profile Page */
.profile{
  margin-top:18px;
}
.profile-grid{
  display:grid;
  grid-template-columns: .95fr 1.05fr;
  gap:14px;
}
@media (max-width: 980px){
  .profile-grid{grid-template-columns: 1fr;}
}

.avatar{
  width:84px;height:84px;
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(20,184,166,.35), rgba(6,182,212,.20));
  border:1px solid rgba(255,255,255,.12);
  box-shadow: 0 18px 45px rgba(0,0,0,.45);
}

.profile-header{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom: 8px;
}

.profile-name{
  font-weight:900;
  font-size: 20px;
}
.profile-title{
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}

.kv{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
}
@media (max-width: 560px){
  .kv{grid-template-columns: 1fr;}
}

.kv .item{
  padding:12px;
  border-radius: 16px;
  border:1px solid var(--stroke);
  background: rgba(0,0,0,.20);
}
.kv .item .k{
  font-size:12px;
  color: var(--soft);
  margin-bottom:4px;
  font-weight:700;
}
.kv .item .v{
  font-weight:800;
  color: rgba(234,244,255,.92);
  font-size: 13px;
  overflow-wrap:anywhere;
}

.links{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:10px;
}
.link-chip{
  padding:10px 12px;
  border-radius: 14px;
  border:1px solid var(--stroke);
  background: rgba(255,255,255,.04);
  display:inline-flex;
  gap:8px;
  align-items:center;
  font-weight:800;
  font-size:13px;
}
.link-chip:hover{
  border-color: rgba(20,184,166,.35);
  background: rgba(20,184,166,.08);
}

/* Footer */
footer{
  width:min(var(--container), 92vw);
  margin: 26px auto 18px auto;
  padding: 16px 0;
  color: var(--soft);
  font-size: 12px;
  text-align:center;
  border-top:1px solid rgba(255,255,255,.06);
}

/* Utilities */
.center{text-align:center;}
.right{text-align:right;}
.mt-0{margin-top:0 !important;}
.mt-1{margin-top:8px !important;}
.mt-2{margin-top:12px !important;}
.mt-3{margin-top:16px !important;}
.mt-4{margin-top:22px !important;}
.mb-0{margin-bottom:0 !important;}
.mb-1{margin-bottom:8px !important;}
.mb-2{margin-bottom:12px !important;}
.mb-3{margin-bottom:16px !important;}
.mb-4{margin-bottom:22px !important;}
.w-100{width:100% !important;}

.hidden{display:none !important;}

/* Mobile fine-tuning */
@media (max-width: 560px){
  header,.navbar,.topbar{padding:10px 12px;}
  .btn,button,.button,a.button,input[type="submit"]{width:100%;}
  .hero{padding: 26px 14px;}
}

/* Fix “cards overlap” if any page uses floats/old CSS */
.clearfix::after{content:"";display:block;clear:both;}


/* ✅ اجبار كروت الـ grid تتمدد وتاخد كامل العرض */
.grid{
  width: 100% !important;
}

.grid.grid-2{
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  justify-items: stretch !important;
  align-items: stretch !important;
}

.grid.grid-2 > *{
  width: 100% !important;
  max-width: none !important;
}
.grid.grid-2 > .card{
  height: 100% !important;
}
/* ===============================
   FIX: Two cards not full width
   (About/Privacy first two cards)
================================ */

/* خليه ياخد كامل عرض الصفحة */
.wrap{
  width: min(1120px, 92vw) !important;
}

/* إجبار grid-2 ياخد المساحة كلها */
.grid.grid-2{
  width: 100% !important;
  max-width: none !important;
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 16px !important;
  align-items: stretch !important;
  justify-items: stretch !important;
}

/* إجبار كل كرت يتمدد داخل العمود */
.grid.grid-2 > *{
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  justify-self: stretch !important;
}

/* موبايل */
@media (max-width: 900px){
  .grid.grid-2{
    grid-template-columns: 1fr !important;
  }
}

.full-bleed{
  width:100% !important;
  max-width:none !important;
}
.full-bleed{
  width: 100% !important;
  max-width: none !important;
}

.grid.grid-2{
  width:100% !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  justify-items: stretch !important;
  align-items: stretch !important;
}

.grid.grid-2 > .card{
  width:100% !important;
  max-width:none !important;
}