/*
  Theme v3 (2026)
  Premium Medical UI for Eyelid Surgery websites
  هدف التصميم: وضوح + ثقة + فخامة هادئة (بدون صعوبة قراءة).
*/

:root{
  /* Surfaces */
  --bg:#F6F8FB;
  --surface:#FFFFFF;
  --surface-2:#F0F4F8;
  --surface-3:#0A1324; /* footer / dark sections */

  /* Text */
  --text:#0B1220;
  --muted:#516176;
  --muted-2:#6B7C93;
  --on-dark:#EEF4FF;

  /* Brand */
  --primary:#0A2E4E;      /* deep navy */
  --primary-2:#0E3E64;
  --accent:#B8923B;       /* premium gold */
  --accent-2:#19AFA0;     /* calm teal */

  /* UI */
  --border:#DDE5EF;
  --shadow:0 10px 28px rgba(2, 6, 23, .08);
  --shadow-2:0 18px 55px rgba(2, 6, 23, .10);
  --radius:16px;
  --radius-lg:22px;
  --ring:0 0 0 4px rgba(25, 175, 160, .18);
}

*{box-sizing:border-box}
html,body{height:100%}

body{
  font-family:"Cairo",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--text);
  line-height:1.9;
  background:
    radial-gradient(900px 600px at 80% -10%, rgba(25,175,160,.10), transparent 55%),
    radial-gradient(900px 600px at 10% 0%, rgba(184,146,59,.10), transparent 58%),
    var(--bg);
}

img{max-width:100%;height:auto}

a{color:var(--primary);text-decoration-color:rgba(10,46,78,.28)}
a:hover{color:var(--primary-2);text-decoration-color:rgba(10,46,78,.45)}

/* Accessibility: Skip link (مخفي تماماً إلا عند التنقل بالكيبورد) */
.skip-link{
  position:fixed;
  top:12px;
  left:-9999px;
  z-index:10000;
  padding:10px 14px;
  border-radius:999px;
  background:var(--surface);
  border:1px solid var(--border);
  box-shadow:var(--shadow);
  opacity:0;
}
.skip-link:focus{
  left:12px;
  opacity:1;
}

:focus-visible{outline:none;box-shadow:var(--ring);border-radius:12px}

/* Layout */
.section{padding:76px 0}
.hero{padding:92px 0 40px;position:relative}
@media (max-width: 576px){
  .hero{padding:68px 0 26px}
  .section{padding:56px 0}
}

.container-narrow{max-width:920px}

.bg-darker{background:var(--surface-2)}
.bg-darkish{background:transparent}

.kicker{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  font-weight:800;
  color:rgba(184,146,59,.95);
}

.section-title{
  font-weight:900;
  letter-spacing:-.02em;
  line-height:1.3;
}
.muted{color:var(--muted)!important}

/* Navbar */
.site-navbar{
  background:rgba(255,255,255,.86) !important;
  backdrop-filter: blur(14px);
  border-bottom:1px solid rgba(2,6,23,.06);
  position:sticky;
  top:0;
  z-index:1030;
}
.site-navbar .navbar-brand{color:var(--text)!important}
.site-navbar .nav-link{color:rgba(11,18,32,.78)!important;font-weight:800}
.site-navbar .nav-link:hover{color:var(--primary)!important}
.site-navbar .nav-link.active{color:var(--primary)!important}

.logo-mark{
  width:34px;height:34px;
  border-radius:12px;
  display:inline-block;
  background:
    radial-gradient(18px 18px at 30% 30%, rgba(25,175,160,.45), transparent 60%),
    linear-gradient(135deg, rgba(184,146,59,.60), rgba(10,46,78,.22));
  border:1px solid rgba(2,6,23,.10);
  box-shadow:0 10px 24px rgba(2,6,23,.10);
}

/* Cards */
.card-lux{
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.94));
  border:1px solid rgba(221,229,239,.92);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-2);
}

.panel{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
}

.card-soft{
  background:rgba(255,255,255,.80);
  border:1px solid rgba(221,229,239,.80);
  border-radius:var(--radius);
}

.gold-line{height:1px;background:linear-gradient(90deg, transparent, rgba(184,146,59,.55), transparent)}

/* Stats / chips */
.chip{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(221,229,239,.95);
  background:rgba(255,255,255,.75);
  color:rgba(11,18,32,.86);
  font-weight:800;
  font-size:.92rem;
}

.badge-gold{
  background:rgba(184,146,59,.14);
  border:1px solid rgba(184,146,59,.24);
  color:#6B4F0E;
}

/* Backward compatibility (older templates) */
.bg-gold{
  background:rgba(184,146,59,.16) !important;
  border:1px solid rgba(184,146,59,.26) !important;
}

/* Buttons (Bootstrap override) */
.btn{border-radius:999px}

.btn-gold{
  color:#0A1324 !important;
  background:linear-gradient(180deg, #F2E2B4, var(--accent));
  border:0;
  font-weight:900;
  letter-spacing:-.01em;
  padding:12px 18px;
  box-shadow:0 16px 40px rgba(184,146,59,.22);
}
.btn-gold:hover{filter:brightness(1.03)}

.btn-outline-gold{
  background:rgba(255,255,255,.0);
  color:var(--primary) !important;
  border:1px solid rgba(10,46,78,.22) !important;
  font-weight:900;
  padding:12px 18px;
}
.btn-outline-gold:hover{
  background:rgba(25,175,160,.08);
  border-color:rgba(25,175,160,.35) !important;
}

/* Forms */
.form-control,.form-select{
  background:rgba(255,255,255,.96) !important;
  border:1px solid rgba(2,6,23,.14) !important;
  color:var(--text) !important;
  border-radius:14px;
  padding:.85rem .95rem;
}
.form-control::placeholder{color:rgba(81,97,118,.74)}
.form-control:focus,.form-select:focus{
  border-color:rgba(25,175,160,.55) !important;
  box-shadow:var(--ring) !important;
}

/* WhatsApp Floating CTA */
.whatsapp-float{
  position:fixed;
  z-index:9999;
  bottom:18px;
  left:18px;
  display:flex;
  gap:10px;
  align-items:center;
  padding:10px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.92);
  border:1px solid rgba(2,6,23,.10);
  box-shadow:var(--shadow-2);
  color:var(--text);
}
.whatsapp-float:hover{transform:translateY(-1px)}
.whatsapp-float .dot{
  width:10px;height:10px;border-radius:999px;background:#25D366;
  box-shadow:0 0 0 6px rgba(37,211,102,.14);
}

/* Footer */
.footer{
  padding:50px 0;
  margin-top:40px;
  background:
    radial-gradient(900px 500px at 70% 0%, rgba(184,146,59,.18), transparent 55%),
    radial-gradient(700px 500px at 15% 0%, rgba(25,175,160,.16), transparent 60%),
    var(--surface-3);
  border-top:1px solid rgba(238,244,255,.10);
}
.footer, .footer a{color:var(--on-dark)}
.footer .muted{color:rgba(238,244,255,.75) !important}
.footer a:hover{color:#FFFFFF}

/* Article content / Prose */
.content{color:var(--text)}
.content h2,.content h3,.content h4{color:var(--text);font-weight:900;margin-top:1.35rem}
.content p{margin-bottom:1rem}
.content ul,.content ol{padding-right:1.25rem}
.content li{margin:.35rem 0}
.content blockquote{
  background:rgba(25,175,160,.08);
  border-right:4px solid rgba(25,175,160,.45);
  padding:12px 14px;
  border-radius:14px;
}

.prose{max-width:72ch}
.prose p,.prose li{font-size:1.04rem}

/* Helpers */
.rounded-4{border-radius:calc(var(--radius) + 6px) !important}