:root {
  --bg: #f5f8fc;
  --surface: rgba(255,255,255,.92);
  --surface-solid: #ffffff;
  --surface-alt: #eff4fb;
  --border: #d9e3f0;
  --text: #163047;
  --muted: #5d7288;
  --primary: #1f6fb2;
  --primary-dark: #145483;
  --secondary: #eff6ff;
  --success: #dff6e5;
  --error: #fde7e7;
  --shadow: 0 18px 50px rgba(18, 53, 87, 0.08);
  --radius: 22px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: 'Tajawal', sans-serif;
  background: linear-gradient(180deg, #fbfcff 0%, var(--bg) 100%);
  color: var(--text);
  line-height: 1.8;
}
body.theme-dark {
  --bg: #0f1724;
  --surface: rgba(18, 27, 40, .92);
  --surface-solid: #162131;
  --surface-alt: #1d2b41;
  --border: #26384f;
  --text: #ecf3fb;
  --muted: #a6b7ca;
  --secondary: rgba(72, 125, 189, .14);
  --shadow: 0 18px 45px rgba(0, 0, 0, .35);
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; }
.container { width: min(1160px, calc(100% - 32px)); margin: 0 auto; }
.site-wrapper { min-height: 100vh; display: flex; flex-direction: column; }

.top-strip {
  background: linear-gradient(90deg, rgba(31,111,178,.08), rgba(31,111,178,.02));
  border-bottom: 1px solid rgba(217,227,240,.65);
}
.top-strip-inner {
  min-height: 42px; display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.top-strip-meta { display:flex; flex-wrap:wrap; align-items:center; gap:14px; color:var(--muted); font-size:.95rem; }
.top-strip-meta a { color: var(--primary); font-weight: 700; }

.topbar {
  position: sticky; top: 0; z-index: 40;
  backdrop-filter: blur(16px);
  background: color-mix(in srgb, var(--surface-solid) 86%, transparent);
  border-bottom: 1px solid rgba(217,227,240,.75);
}
.topbar-inner { display:flex; align-items:center; justify-content:space-between; min-height:84px; gap:18px; }
.brand, .admin-brand { display:flex; align-items:center; gap:14px; color:var(--text); }
.brand img, .admin-brand img, .footer-logo {
  width:58px; height:58px; object-fit:contain; border-radius:16px; background:#fff; padding:8px; box-shadow: var(--shadow);
}
.brand strong, .admin-brand strong { display:block; font-size:1.08rem; }
.brand small, .admin-brand small { color:var(--muted); display:block; margin-top:4px; }
.brand-mark {
  width:58px; height:58px; border-radius:16px; display:grid; place-items:center;
  background: linear-gradient(135deg, var(--primary) 0%, #7bb6ef 100%); color:#fff; font-weight:800; font-size:1.35rem;
  box-shadow: var(--shadow);
}
.main-nav { display:flex; align-items:center; gap:18px; }
.main-nav > a, .nav-dropdown > button {
  color:var(--muted); border:none; background:none; cursor:pointer; padding:10px 0; font-weight:700; position:relative;
}
.main-nav > a.is-active, .main-nav > a:hover, .nav-dropdown > button:hover { color: var(--primary); }
.main-nav > a.is-active::after {
  content:''; position:absolute; bottom:-16px; right:0; left:0; height:3px; border-radius:999px; background: linear-gradient(90deg, var(--primary), #7bb6ef);
}
.nav-cta, .btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border-radius: 999px; padding: 13px 24px; font-weight:800; transition: .2s ease;
}
.nav-cta, .btn-primary { background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color:#fff; box-shadow: 0 12px 30px rgba(31,111,178,.22); }
.nav-cta:hover, .btn-primary:hover { transform: translateY(-1px); }
.btn-outline { border:1px solid var(--border); background:var(--surface-solid); color:var(--text); }
.btn-secondary { background:var(--secondary); color:var(--primary); }
.nav-dropdown { position:relative; }
.nav-dropdown-menu {
  position:absolute; top:calc(100% + 14px); right:0; background:var(--surface-solid); border:1px solid var(--border); border-radius:20px;
  box-shadow: var(--shadow); min-width:280px; padding:12px; display:none;
}
.nav-dropdown:hover .nav-dropdown-menu { display:block; }
.nav-dropdown-menu a { display:block; padding:12px 14px; border-radius:14px; color:var(--text); }
.nav-dropdown-menu a:hover { background:var(--secondary); color:var(--primary); }

.topbar-actions { display:flex; align-items:center; gap:10px; }
.theme-toggle, .menu-toggle {
  border:none; background:var(--secondary); color:var(--primary); border-radius:999px; padding:11px 16px; font-weight:800; cursor:pointer;
}
.theme-toggle { display:inline-flex; align-items:center; gap:8px; }
.menu-toggle { display:none; }

.hero-section { padding: 56px 0 24px; }
.hero-grid { display:grid; grid-template-columns: 1.05fr .95fr; gap:32px; align-items:center; }
.hero-copy h1, .page-hero h1 { font-size: clamp(2rem, 4vw, 3.6rem); line-height:1.2; margin:16px 0; }
.hero-copy p, .page-hero p, .lead { color:var(--muted); font-size:1.08rem; }
.eyebrow {
  display:inline-block; background:var(--secondary); color:var(--primary); padding:8px 16px; border-radius:999px; font-weight:800;
}
.hero-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:24px; }

.hero-video-card, .card, .work-card, .article-card, .form-card, .info-card, .admin-panel, .metric-card, .shortcut-card, .about-media-card {
  background: var(--surface); border:1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow);
  backdrop-filter: blur(6px);
}
.hero-video-card { padding:16px; }
.video-wrap { position:relative; aspect-ratio:16/9; border-radius: calc(var(--radius) - 6px); overflow:hidden; background:#000; }
.video-wrap iframe { width:100%; height:100%; border:none; }
.small-map { aspect-ratio: 16/8; background:#fff; }
.video-placeholder { text-align:center; color:var(--muted); }
.video-placeholder img { border-radius:18px; }
.section { padding: 74px 0; }
.section-soft, .page-hero { background: linear-gradient(180deg, rgba(239,246,255,.75) 0%, rgba(255,255,255,.85) 100%); }
body.theme-dark .section-soft,
body.theme-dark .page-hero { background: linear-gradient(180deg, rgba(14,25,39,.92) 0%, rgba(18,27,40,.96) 100%); }
.page-hero { padding: 62px 0 32px; border-bottom:1px solid rgba(220,229,242,.7); }
.page-hero-light { background: linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(241,245,251,.9) 100%); }
body.theme-dark .page-hero-light { background: linear-gradient(180deg, rgba(18,27,40,.96) 0%, rgba(20,32,47,.94) 100%); }
.section-head { display:flex; flex-direction:column; gap:10px; margin-bottom:28px; }
.section-head h2, .admin-panel h2 { margin:0; font-size:2rem; }
.section-head p { margin:0; color:var(--muted); }
.inline-head { margin-bottom: 16px; }

.cards-grid { display:grid; gap:22px; }
.cards-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.service-card, .work-card, .article-card, .shortcut-card { overflow:hidden; }
.service-card, .card, .shortcut-card { padding:22px; }
.service-card h3, .work-body h3, .article-body h3, .shortcut-card strong { margin: 0 0 10px; font-size:1.28rem; }
.service-card p, .work-body p, .article-body p, .shortcut-card p, .bullet-card p { margin:0; color:var(--muted); }
.service-card a, .article-body a { color:var(--primary); font-weight:800; display:inline-block; margin-top:14px; }
.work-media, .article-media { position:relative; aspect-ratio: 16/11; overflow:hidden; background:var(--surface-alt); }
.work-media img, .article-media img, .about-media-card img, .article-cover img { width:100%; height:100%; object-fit:cover; }
.media-open {
  position:absolute; inset:auto 18px 18px auto; border:none; border-radius:999px; background:rgba(255,255,255,.92); color:#123; padding:10px 16px; font-weight:800; cursor:pointer;
}
.work-body, .article-body { padding:22px; }
.badge {
  display:inline-block; padding:6px 12px; border-radius:999px; background:var(--secondary); color:var(--primary); font-size:.92rem; font-weight:800; margin-bottom:10px;
}

.about-split { display:grid; grid-template-columns: 1fr 1fr; gap:24px; align-items:center; }
.stats-grid { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:18px; }
.stat-box {
  background: linear-gradient(180deg, var(--surface-solid), color-mix(in srgb, var(--surface-alt) 70%, var(--surface-solid))); border:1px solid var(--border);
  border-radius:20px; padding:24px; text-align:center; box-shadow: var(--shadow);
}
.stat-box strong { font-size:2rem; color:var(--primary); display:block; }
.stat-box span { color:var(--muted); }
.bullet-card { display:flex; align-items:flex-start; gap:12px; }
.bullet-card span { flex:0 0 auto; color:var(--primary); font-weight:900; }

.cta-box {
  display:flex; align-items:center; justify-content:space-between; gap:24px; padding:28px;
  background:linear-gradient(135deg, rgba(31,111,178,.08), rgba(123,182,239,.12)); border-radius:28px; border:1px solid var(--border);
}
body.theme-dark .cta-box { background:linear-gradient(135deg, rgba(31,111,178,.16), rgba(33,54,84,.5)); }

.site-footer { margin-top:auto; padding-top:22px; background:var(--surface-solid); border-top:1px solid var(--border); }
.footer-grid { display:grid; grid-template-columns: 1.2fr 1fr 1fr 1.2fr; gap:24px; padding: 32px 0; }
.footer-brand-line { display:flex; align-items:center; gap:14px; margin-bottom:12px; }
.footer-brand-block p, .site-footer h3, .site-footer h4 { margin-top:0; }
.site-footer p, .site-footer li, .site-footer a { color:var(--muted); }
.site-footer ul { list-style:none; padding:0; margin:0; display:grid; gap:10px; }
.footer-bottom { border-top:1px solid var(--border); padding:18px 0 28px; text-align:center; color:var(--muted); }
.social-links { display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }
.social-links a {
  background:var(--secondary); color:var(--primary); padding:10px 14px; border-radius:999px; font-weight:700;
}
.social-links-wide a { background:var(--surface-solid); border:1px solid var(--border); }
.contact-list { list-style:none; padding:0; margin:0; display:grid; gap:10px; color:var(--muted); }
.contact-list.large li { padding:12px 14px; background:var(--surface-alt); border-radius:14px; }
.contact-grid { display:grid; grid-template-columns: 1.1fr .9fr; gap:24px; align-items:start; }
.contact-info-stack { display:grid; gap:22px; }

.form-card, .info-card { padding:24px; }
.site-form { display:grid; gap:18px; }
.site-form label { display:grid; gap:8px; font-weight:700; color:var(--text); }
.site-form input, .site-form select, .site-form textarea {
  width:100%; border:1px solid var(--border); background:var(--surface-solid); border-radius:16px; padding:14px 16px; color:var(--text); outline:none;
}
.site-form textarea { resize:vertical; min-height: 120px; }
.site-form input:focus, .site-form select:focus, .site-form textarea:focus { border-color: rgba(31,111,178,.6); box-shadow: 0 0 0 4px rgba(31,111,178,.08); }
.form-grid { display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:18px; }
.form-grid.four { grid-template-columns: repeat(4, minmax(0,1fr)); }
.checkbox-label { display:flex !important; align-items:center; gap:10px; font-weight:700; }
.checkbox-label input { width:auto; }
.checkbox-group { display:grid; gap:10px; }
.alert { border-radius:16px; padding:14px 18px; font-weight:700; }
.alert.success { background: var(--success); color:#25603a; }
.alert.error { background: var(--error); color:#8b2d2d; }

.breadcrumbs { color:var(--muted); margin-bottom:10px; }
.breadcrumbs a { color:var(--primary); }
.empty-box { text-align:center; padding:40px 24px; background:var(--surface-solid); border:1px dashed var(--border); border-radius:24px; }

.rich-content {
  background:var(--surface-solid); padding:28px; border-radius:24px; border:1px solid var(--border); box-shadow: var(--shadow);
}
.rich-content > :first-child { margin-top: 0; }
.rich-content img { max-width:100%; border-radius:18px; margin: 16px auto; }
.rich-content iframe { width:100%; min-height:420px; border:none; border-radius:20px; background:#000; }
.rich-content a { color:var(--primary); text-decoration: underline; }
.narrow { width:min(840px, calc(100% - 32px)); margin:0 auto; }
.article-cover { margin-top:20px; border-radius:24px; overflow:hidden; aspect-ratio:16/9; box-shadow: var(--shadow); }

.lightbox[hidden] { display:none; }
.lightbox { position:fixed; inset:0; z-index:90; }
.lightbox-backdrop { position:absolute; inset:0; background:rgba(13,27,42,.72); }
.lightbox-dialog {
  position:relative; z-index:1; width:min(1000px, calc(100% - 30px)); margin:48px auto; background:var(--surface-solid); border-radius:28px; padding:18px; box-shadow: var(--shadow);
}
.lightbox-close { border:none; background:var(--secondary); color:var(--primary); padding:10px 14px; border-radius:999px; cursor:pointer; margin-bottom:16px; }
.lightbox-content img, .lightbox-content iframe { width:100%; border:none; min-height: 70vh; border-radius:18px; object-fit:contain; background:#000; }

.editor-block { display:grid; gap:12px; }
.editor-head { display:flex; justify-content:space-between; gap:16px; align-items:center; flex-wrap:wrap; }
.editor-head small { color: var(--muted); }
.editor-toolbar { display:flex; flex-wrap:wrap; gap:10px; }
.editor-toolbar button {
  border:none; background:var(--secondary); color:var(--primary); border-radius:999px; padding:9px 14px; font-weight:800; cursor:pointer;
}
.rich-editor-source { min-height: 280px !important; direction: rtl; }
.editor-preview { padding:18px; }
.editor-preview strong { display:block; margin-bottom:12px; }
.editor-preview-body { min-height: 120px; color: var(--text); }
.editor-preview-body img { max-width:100%; border-radius:14px; }
.editor-preview-body iframe { width:100%; min-height:320px; border:none; border-radius:16px; }

.admin-body { background: #f3f7fc; }
body.theme-dark.admin-body { background: #101927; }
.admin-shell { display:grid; grid-template-columns: 280px 1fr; min-height:100vh; }
.admin-sidebar {
  background:var(--surface-solid); border-left:1px solid var(--border); padding:26px 18px; position:sticky; top:0; height:100vh;
}
.admin-sidebar nav { display:grid; gap:8px; margin-top:26px; }
.admin-sidebar nav a { padding:12px 16px; border-radius:16px; color:var(--muted); font-weight:700; }
.admin-sidebar nav a:hover { background:var(--secondary); color:var(--primary); }
.admin-main { padding:26px; }
.admin-topbar { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; margin-bottom:24px; }
.admin-topbar h1 { margin:0 0 6px; }
.admin-topbar p { margin:0; color:var(--muted); }
.admin-grid.two { display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:18px; margin-bottom:24px; }
.metric-card { padding:22px; }
.metric-card strong { font-size:2rem; color:var(--primary); display:block; }
.metric-card span { color:var(--muted); }
.admin-panel { padding:24px; margin-bottom:24px; }
.panel-head { display:flex; align-items:center; gap:16px; margin-bottom:16px; }
.panel-head.between { justify-content:space-between; flex-wrap:wrap; }
.panel-actions-inline { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.inline-filter select { min-width:220px; }
.table-wrap { overflow:auto; }
.admin-table { width:100%; border-collapse: collapse; }
.admin-table th, .admin-table td { padding:14px 12px; border-bottom:1px solid var(--border); text-align:right; vertical-align:top; }
.admin-table th { background:var(--surface-alt); position:sticky; top:0; }
.actions-cell { display:flex; gap:12px; white-space:nowrap; }
.actions-cell a, .danger-link { color:var(--primary); font-weight:800; }
.danger-link { color:#b42318; }
.admin-form { max-width: 980px; }
.admin-shortcuts a { min-height: 160px; }
.message-cell { min-width: 260px; }

.admin-login-body { min-height:100vh; display:grid; place-items:center; padding:18px; background: linear-gradient(180deg, #f9fbff 0%, #edf3fb 100%); }
.admin-login-box { width:min(480px, 100%); background:var(--surface-solid); border:1px solid var(--border); border-radius:28px; padding:30px; box-shadow: var(--shadow); }
.admin-login-brand { text-align:center; margin-bottom:18px; }
.admin-login-brand img { width:84px; height:84px; object-fit:contain; margin:0 auto 12px; background:#fff; border-radius:18px; padding:10px; box-shadow: var(--shadow); }
.login-note { margin-top:18px; padding:14px; border-radius:16px; background:#f8fbff; color:var(--muted); }

.compact { gap:14px; }

@media (max-width: 1024px) {
  .hero-grid, .about-split, .contact-grid, .footer-grid, .admin-shell { grid-template-columns:1fr; }
  .cards-3, .admin-grid.two { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .admin-sidebar { position:relative; height:auto; border-left:none; border-bottom:1px solid var(--border); }
}
@media (max-width: 760px) {
  .menu-toggle { display:inline-flex; }
  .theme-toggle-text { display:none; }
  .main-nav {
    position:absolute; top:84px; right:16px; left:16px; background:var(--surface-solid); border:1px solid var(--border); border-radius:24px;
    box-shadow: var(--shadow); padding:16px; display:none; flex-direction:column; align-items:stretch;
  }
  .main-nav.open { display:flex; }
  .main-nav > a.is-active::after { display:none; }
  .nav-dropdown { width:100%; }
  .nav-dropdown > button { width:100%; text-align:right; }
  .nav-dropdown-menu { position:static; display:block; min-width:auto; box-shadow:none; border:none; padding:0; background:transparent; }
  .hero-section { padding-top: 26px; }
  .cards-3, .form-grid, .form-grid.four, .stats-grid, .admin-grid.two { grid-template-columns:1fr; }
  .cta-box, .admin-topbar, .topbar-inner, .top-strip-inner { flex-direction:column; align-items:stretch; }
  .topbar-inner { padding: 14px 0; }
  .lightbox-dialog { margin:18px auto; }
  .lightbox-content img, .lightbox-content iframe { min-height: 45vh; }
}


/* ===== UI refresh: homepage, loader, header/footer, mobile ===== */
:root {
  --radius: 12px;
  --radius-lg: 18px;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 92px;
}

body {
  font-size: 15px;
  background: linear-gradient(180deg, #f8fbff 0%, #f1f6fb 100%);
}

body.theme-dark {
  background: linear-gradient(180deg, #09111b 0%, #0d1723 100%);
}

body.nav-open {
  overflow: hidden;
}

.top-strip {
  display: none !important;
}

.topbar {
  background: rgba(255,255,255,.92);
  border-bottom: 1px solid rgba(214,225,236,.95);
  box-shadow: 0 10px 28px rgba(16, 42, 67, 0.06);
}

body.theme-dark .topbar {
  background: rgba(10, 17, 27, .9);
  border-bottom-color: rgba(44, 61, 82, .9);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .28);
}

.topbar-inner {
  min-height: 78px;
  gap: 20px;
}

.brand img,
.admin-brand img,
.footer-logo {
  width: 50px;
  height: 50px;
  border-radius: 10px;
  padding: 5px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(30, 73, 110, .10);
}

.brand strong {
  font-size: 1rem;
}

.brand small {
  font-size: .79rem;
  max-width: 310px;
}

.main-nav {
  gap: 16px;
}

.main-nav > a,
.nav-dropdown > button {
  padding: 8px 0;
  font-size: .95rem;
}

.main-nav > a.is-active::after {
  bottom: -14px;
  height: 2px;
}

.nav-caret {
  font-size: .8rem;
  transition: transform .2s ease;
}

.nav-dropdown.is-open .nav-caret,
.nav-dropdown:hover .nav-caret {
  transform: rotate(180deg);
}

.nav-cta,
.btn {
  min-height: 44px;
  padding: 10px 18px;
  border-radius: 10px;
  font-size: .95rem;
}

.btn {
  box-shadow: none;
}

.btn-primary {
  box-shadow: 0 12px 26px rgba(31,111,178,.18);
}

.btn-outline {
  border: 1px solid var(--border);
  background: var(--surface-solid);
  color: var(--text);
  backdrop-filter: none;
}

.btn-ghost-light {
  border: 1px solid rgba(255,255,255,.26);
  background: rgba(255,255,255,.14);
  color: #fff;
  backdrop-filter: blur(8px);
}

.hero-section .btn-outline,
.hero-section .btn-ghost-light {
  border: 1px solid rgba(255,255,255,.26);
  background: rgba(255,255,255,.14);
  color: #fff;
  backdrop-filter: blur(8px);
}

.hero-section .btn-outline:hover,
.hero-section .btn-ghost-light:hover {
  background: rgba(255,255,255,.22);
}

.theme-toggle,
.menu-toggle {
  min-height: 42px;
  border-radius: 10px;
  padding: 9px 12px;
}

.hero-home {
  position: relative;
  overflow: hidden;
  padding: 26px 0 40px;
  background: linear-gradient(135deg, rgba(43,88,131,1) 0%, rgba(86,118,130,1) 48%, rgba(123,149,133,1) 100%);
}

.hero-home::before,
.hero-home::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  pointer-events: none;
}

.hero-home::before {
  width: 82vw;
  height: 82vw;
  max-width: 980px;
  max-height: 980px;
  left: -18vw;
  bottom: -44vw;
  background: radial-gradient(circle at center, rgba(255,255,255,.22) 0%, rgba(255,255,255,.08) 42%, rgba(255,255,255,0) 68%);
}

.hero-home::after {
  width: 66vw;
  height: 66vw;
  max-width: 820px;
  max-height: 820px;
  right: -10vw;
  top: -24vw;
  background: radial-gradient(circle at center, rgba(255,255,255,.16) 0%, rgba(255,255,255,.06) 45%, rgba(255,255,255,0) 72%);
}

.hero-wave,
.hero-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero-wave-a {
  background:
    radial-gradient(circle at 18% 58%, rgba(255,255,255,.18) 0 2px, transparent 3px),
    radial-gradient(circle at 72% 22%, rgba(255,255,255,.16) 0 2px, transparent 3px),
    radial-gradient(circle at 84% 62%, rgba(255,255,255,.18) 0 2px, transparent 3px);
  opacity: .65;
}

.hero-wave-b::before,
.hero-wave-b::after {
  content: "";
  position: absolute;
  width: 120%;
  height: 320px;
  right: -10%;
  border-radius: 50%;
  transform: rotate(-8deg);
  border: 1px solid rgba(255,255,255,.16);
  filter: blur(.2px);
}

.hero-wave-b::before {
  bottom: 20%;
  background: linear-gradient(90deg, rgba(255,255,255,.02), rgba(255,255,255,.15), rgba(255,255,255,.02));
  opacity: .32;
}

.hero-wave-b::after {
  bottom: 6%;
  background: linear-gradient(90deg, rgba(255,255,255,.02), rgba(255,255,255,.12), rgba(255,255,255,.02));
  opacity: .22;
}

.hero-particles {
  background-image:
    radial-gradient(circle at 12% 22%, rgba(255,255,255,.26) 0 2px, transparent 3px),
    radial-gradient(circle at 24% 72%, rgba(255,255,255,.2) 0 2px, transparent 3px),
    radial-gradient(circle at 58% 32%, rgba(255,255,255,.18) 0 2px, transparent 3px),
    radial-gradient(circle at 74% 48%, rgba(255,255,255,.22) 0 2px, transparent 3px),
    radial-gradient(circle at 90% 18%, rgba(255,255,255,.18) 0 2px, transparent 3px);
  opacity: .45;
}

.hero-shell {
  position: relative;
  z-index: 1;
  min-height: 78vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 24px;
  padding: 56px 0 18px;
}

.hero-copy-centered {
  max-width: 840px;
  margin: 0 auto;
  text-align: center;
  color: #fff;
}

.hero-logo {
  width: 92px;
  height: 92px;
  object-fit: contain;
  margin: 0 auto 18px;
  border-radius: 18px;
  background: rgba(255,255,255,.92);
  padding: 8px;
  box-shadow: 0 18px 40px rgba(10, 24, 39, .18);
}

.hero-copy-centered .eyebrow {
  background: rgba(255,255,255,.12);
  color: #fff;
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(8px);
}

.hero-copy-centered h1 {
  margin: 16px 0 12px;
  font-size: clamp(2.1rem, 5vw, 4rem);
  line-height: 1.16;
  color: #fff;
}

.hero-copy-centered p {
  max-width: 760px;
  margin: 0 auto;
  font-size: 1.05rem;
  line-height: 1.95;
  color: rgba(255,255,255,.9);
}

.hero-actions-center {
  justify-content: center;
  margin-top: 22px;
}

.hero-video-featured {
  width: min(980px, 100%);
  margin: 0 auto;
  padding: 14px;
  border-radius: 18px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 26px 60px rgba(9, 22, 36, .22);
  backdrop-filter: blur(12px);
}

.hero-video-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  color: #fff;
}

.hero-video-head strong {
  display: block;
  font-size: 1rem;
}

.hero-video-head span {
  display: block;
  margin-top: 4px;
  color: rgba(255,255,255,.74);
  font-size: .92rem;
}

.video-wrap-hero {
  aspect-ratio: 16 / 8.5;
  border-radius: 14px;
}

.video-wrap-glow {
  box-shadow: 0 14px 36px rgba(0,0,0,.18);
}

.video-placeholder-hero {
  padding: 18px;
  color: rgba(255,255,255,.88);
}

.video-placeholder-hero img {
  border-radius: 14px;
  margin-bottom: 12px;
}

.section-head-center {
  text-align: center;
}

.section-head-center p {
  max-width: 720px;
  margin-inline: auto;
}

.services-showcase {
  align-items: stretch;
}

.service-card-interactive {
  position: relative;
  min-height: 238px;
  padding: 22px;
  border-radius: 16px;
  overflow: hidden;
  background: radial-gradient(circle at top left, rgba(31,111,178,.12), transparent 38%), linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(247,250,255,.98) 100%);
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}

body.theme-dark .service-card-interactive {
  background: radial-gradient(circle at top left, rgba(86,147,214,.18), transparent 42%), linear-gradient(180deg, rgba(19,30,45,.96) 0%, rgba(14,24,37,.96) 100%);
}

.service-card-interactive:hover {
  transform: translateY(-7px);
  box-shadow: 0 22px 44px rgba(18, 53, 87, 0.12);
  border-color: rgba(31,111,178,.2);
}

.service-card-index {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 48px;
  height: 32px;
  padding: 0 10px;
  border-radius: 999px;
  background: rgba(31,111,178,.1);
  color: var(--primary);
  font-weight: 800;
  font-size: .84rem;
  margin-bottom: 18px;
}

.service-card-body h3 {
  font-size: 1.16rem;
  margin-bottom: 10px;
}

.service-card-body p {
  font-size: .94rem;
  line-height: 1.9;
  max-width: 95%;
}

.service-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 18px;
  color: var(--primary);
  font-weight: 800;
}

.service-card-arrow {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(31,111,178,.08);
  font-size: 1rem;
  transition: transform .24s ease;
}

.service-card-interactive:hover .service-card-arrow {
  transform: translateX(-4px);
}

.service-card-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.works-grid-refined .work-card {
  border-radius: 16px;
}

.work-card-refined .work-media img {
  transition: transform .35s ease;
}

.work-card-refined:hover .work-media img {
  transform: scale(1.03);
}

.about-split-home {
  align-items: start;
}

.stats-grid-home .stat-box {
  border-radius: 16px;
}

.cta-box-home {
  border-radius: 18px;
}

.site-footer {
  margin-top: auto;
  background: linear-gradient(180deg, #0d1f31 0%, #0a1724 100%);
}

body.theme-dark .site-footer {
  background: linear-gradient(180deg, #070f19 0%, #08111b 100%);
}

.footer-grid {
  align-items: start;
}

.social-icons-only {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.social-icons-only a {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  transition: transform .22s ease, background .22s ease, border-color .22s ease;
}

.social-icons-only a:hover {
  transform: translateY(-2px);
  background: rgba(255,255,255,.16);
  border-color: rgba(255,255,255,.2);
}

.social-icons-only svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.08);
}

.site-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: 24px;
  background: radial-gradient(circle at top, rgba(79,132,182,.16), transparent 40%), linear-gradient(180deg, #f6fbff 0%, #edf4fb 100%);
  transition: opacity .55s ease, visibility .55s ease;
}

body.theme-dark .site-loader {
  background: radial-gradient(circle at top, rgba(79,132,182,.12), transparent 40%), linear-gradient(180deg, #09111b 0%, #0e1824 100%);
}

.site-loader.is-hidden {
  opacity: 0;
  visibility: hidden;
}

.site-loader-card {
  width: min(380px, 100%);
  padding: 28px 24px;
  border-radius: 20px;
  text-align: center;
  background: rgba(255,255,255,.84);
  border: 1px solid rgba(210,223,236,.9);
  box-shadow: 0 22px 55px rgba(18, 53, 87, .12);
  backdrop-filter: blur(10px);
}

body.theme-dark .site-loader-card {
  background: rgba(12, 21, 33, .86);
  border-color: rgba(37, 55, 74, .9);
}

.site-loader-logo,
.site-loader-fallback {
  width: 92px;
  height: 92px;
  margin: 0 auto 16px;
  border-radius: 18px;
  object-fit: contain;
  background: #fff;
  padding: 10px;
  box-shadow: 0 14px 34px rgba(16, 42, 67, .12);
}

.site-loader-fallback {
  display: grid;
  place-items: center;
  font-weight: 800;
  color: var(--primary);
}

.site-loader-card strong {
  display: block;
  font-size: 1.08rem;
  margin-bottom: 8px;
}

.site-loader-text {
  display: block;
  color: var(--muted);
  font-size: .94rem;
  margin-bottom: 14px;
}

.site-loader-bar {
  position: relative;
  width: 100%;
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(31,111,178,.1);
}

.site-loader-bar span {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #2f84d3 0%, #4ca7ef 45%, #77d0f1 100%);
  transition: width .22s ease;
}

body:not(.site-ready) .site-wrapper {
  opacity: 0;
}

body.site-ready .site-wrapper {
  opacity: 1;
  transition: opacity .35s ease;
}

.rich-content,
.rich-content p,
.rich-content li,
.rich-content blockquote {
  font-size: .97rem;
}

.rich-content h2 {
  font-size: 1.4rem;
}

.rich-content h3 {
  font-size: 1.18rem;
}

body.theme-dark .hero-home {
  background: linear-gradient(135deg, #10304d 0%, #132b40 46%, #24443f 100%);
}

body.theme-dark .hero-video-featured {
  background: rgba(9,17,27,.28);
  border-color: rgba(255,255,255,.1);
}

@media (max-width: 1024px) {
  .hero-shell {
    min-height: auto;
    padding: 42px 0 12px;
  }

  .hero-copy-centered h1 {
    font-size: clamp(1.95rem, 4.2vw, 3.1rem);
  }

  .video-wrap-hero {
    aspect-ratio: 16 / 9;
  }
}

@media (max-width: 860px) {
  .topbar-inner {
    min-height: 72px;
    flex-wrap: wrap;
  }

  .brand {
    flex: 1 1 auto;
    min-width: 0;
  }

  .brand div {
    min-width: 0;
  }

  .brand strong,
  .brand small {
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .brand small {
    display: none;
  }

  .topbar-actions {
    margin-inline-start: auto;
  }

  .menu-toggle {
    display: inline-flex;
  }

  .theme-toggle-text {
    display: none;
  }

  .main-nav {
    position: fixed;
    top: 82px;
    right: 14px;
    left: 14px;
    z-index: 60;
    display: none;
    flex-direction: column;
    gap: 4px;
    padding: 14px;
    border-radius: 16px;
    background: rgba(255,255,255,.98);
    border: 1px solid rgba(215,224,234,.96);
    box-shadow: 0 22px 48px rgba(16, 42, 67, .12);
    max-height: calc(100vh - 100px);
    overflow: auto;
  }

  body.theme-dark .main-nav {
    background: rgba(10,17,27,.98);
    border-color: rgba(39,55,74,.96);
  }

  .main-nav.open {
    display: flex;
  }

  .main-nav > a,
  .nav-dropdown > button,
  .main-nav .nav-cta {
    width: 100%;
    justify-content: space-between;
    padding: 12px 12px;
    border-radius: 10px;
    background: transparent;
  }

  .main-nav > a:hover,
  .main-nav > a.is-active,
  .nav-dropdown > button:hover,
  .nav-dropdown.is-open > button,
  .main-nav .nav-cta {
    background: var(--secondary);
  }

  .main-nav .nav-cta {
    margin-top: 4px;
  }

  .nav-dropdown {
    width: 100%;
  }

  .nav-dropdown-menu {
    position: static;
    display: none;
    min-width: auto;
    padding: 8px;
    margin-top: 6px;
    border-radius: 12px;
    box-shadow: none;
    border: 1px solid var(--border);
    background: var(--surface-alt);
  }

  .nav-dropdown:hover .nav-dropdown-menu {
    display: none;
  }

  .nav-dropdown.is-open .nav-dropdown-menu {
    display: block;
  }

  .nav-dropdown-menu a {
    padding: 10px 10px;
    border-radius: 10px;
  }

  .hero-home {
    padding: 10px 0 26px;
  }

  .hero-shell {
    gap: 18px;
    padding-top: 32px;
  }

  .hero-logo {
    width: 78px;
    height: 78px;
    border-radius: 16px;
  }

  .hero-copy-centered h1 {
    font-size: 1.95rem;
    line-height: 1.28;
  }

  .hero-copy-centered p {
    font-size: .96rem;
    line-height: 1.9;
    max-width: 100%;
  }

  .hero-actions-center {
    flex-direction: column;
    align-items: stretch;
  }

  .hero-actions-center .btn {
    width: 100%;
  }

  .hero-video-featured {
    width: 100%;
    padding: 10px;
    border-radius: 16px;
  }

  .hero-video-head {
    margin-bottom: 10px;
  }

  .hero-video-head strong {
    font-size: .94rem;
  }

  .hero-video-head span {
    font-size: .82rem;
  }

  .video-wrap-hero {
    aspect-ratio: 16 / 10;
    border-radius: 12px;
  }

  .cards-3,
  .stats-grid,
  .form-grid,
  .form-grid.four,
  .footer-grid {
    grid-template-columns: 1fr;
  }

  .section {
    padding: 44px 0;
  }

  .section-head h2,
  .admin-panel h2 {
    font-size: 1.45rem;
  }

  .service-card-interactive {
    min-height: 0;
    padding: 18px;
  }

  .site-footer {
    margin-top: 0;
  }
}


/* === Fix footer contrast === */
.site-footer,
.site-footer p,
.site-footer li,
.site-footer span,
.site-footer small,
.site-footer strong,
.site-footer a,
.site-footer h3,
.site-footer h4,
.site-footer .footer-bottom,
.site-footer .footer-brand-block p {
  color: #ffffff !important;
  opacity: 1 !important;
}
.site-footer a:hover {
  color: #dff3ff !important;
}

/* === Stable desktop dropdown for services === */
@media (min-width: 861px) {
  .nav-dropdown {
    position: relative;
    padding-bottom: 18px;
    margin-bottom: -18px;
  }

  .nav-dropdown::after {
    content: "";
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 280px;
    height: 20px;
  }

  .nav-dropdown-menu {
    display: block;
    top: calc(100% + 6px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(8px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
  }

  .nav-dropdown:hover .nav-dropdown-menu,
  .nav-dropdown:focus-within .nav-dropdown-menu,
  .nav-dropdown.is-open .nav-dropdown-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
  }
}


/* Empty states - clean illustrated placeholders */
.empty-box-illustrated {
  text-align: center;
  padding: 32px 20px;
}
.empty-box-illustrated .empty-illus {
  width: min(220px, 100%);
  margin: 0 auto 14px;
}
.empty-box-illustrated .empty-illus svg {
  width: 100%;
  height: auto;
  display: block;
}
.empty-box-illustrated h3 {
  margin: 0 0 8px;
  font-size: 1.15rem;
  color: var(--text-strong, #16324a);
}
.empty-box-illustrated p {
  margin: 0;
  color: var(--text-muted, #607389);
}
body.dark-mode .empty-box-illustrated h3,
html.dark-mode .empty-box-illustrated h3 {
  color: #f4f8fb;
}
body.dark-mode .empty-box-illustrated p,
html.dark-mode .empty-box-illustrated p {
  color: #b8c5d0;
}


.article-card-service .article-body a {
  display:inline-flex;
  align-items:center;
  gap:8px;
}

.media-open-link {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
}

.work-title-link {
  color: inherit;
  text-decoration: none;
}
.work-title-link:hover {
  color: var(--primary);
}

.portfolio-embed-card {
  margin-bottom: 24px;
}

.article-cover-inline {
  margin-bottom: 24px;
}


/* ===== Social icons in contact page ===== */
.contact-socials,
.social-links,
.contact-page .social-links,
.contact-page .contact-socials {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.contact-socials a,
.social-links a,
.contact-page .social-links a,
.contact-page .contact-socials a {
  position: relative;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #f3f7fb;
  border: 1px solid #dbe7f3;
  text-decoration: none;
  color: transparent !important;
  font-size: 0 !important;
  overflow: hidden;
  transition: .25s ease;
}

.contact-socials a:hover,
.social-links a:hover,
.contact-page .social-links a:hover,
.contact-page .contact-socials a:hover {
  transform: translateY(-2px);
  background: #e9f4ff;
  border-color: #bcd7f1;
  box-shadow: 0 10px 24px rgba(20, 55, 90, 0.10);
}

/* base icon */
.contact-socials a::before,
.social-links a::before,
.contact-page .social-links a::before,
.contact-page .contact-socials a::before {
  content: "";
  width: 22px;
  height: 22px;
  display: block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* WhatsApp */
a[href*="wa.me"]::before,
a[href*="whatsapp.com"]::before {
  background-image: url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2325D366'>\
  <path d='M20.52 3.48A11.83 11.83 0 0 0 12.06 0C5.53 0 .23 5.3.23 11.83c0 2.08.54 4.12 1.57 5.92L0 24l6.43-1.69a11.77 11.77 0 0 0 5.63 1.43h.01c6.53 0 11.83-5.3 11.83-11.83 0-3.16-1.23-6.13-3.48-8.43zM12.07 21.7h-.01a9.84 9.84 0 0 1-5.02-1.38l-.36-.22-3.82 1 1.02-3.72-.24-.38a9.83 9.83 0 0 1-1.51-5.18c0-5.44 4.43-9.87 9.88-9.87 2.64 0 5.12 1.03 6.98 2.89a9.8 9.8 0 0 1 2.89 6.98c0 5.45-4.43 9.88-9.87 9.88zm5.42-7.4c-.3-.15-1.77-.87-2.05-.97-.27-.1-.47-.15-.67.15-.2.3-.77.97-.95 1.17-.17.2-.35.23-.65.08-.3-.15-1.25-.46-2.38-1.47-.88-.79-1.48-1.77-1.65-2.07-.17-.3-.02-.46.13-.61.14-.14.3-.35.45-.52.15-.17.2-.3.3-.5.1-.2.05-.38-.02-.53-.08-.15-.67-1.62-.92-2.22-.24-.58-.48-.5-.67-.51h-.57c-.2 0-.52.08-.8.38-.27.3-1.04 1.01-1.04 2.46 0 1.45 1.06 2.85 1.2 3.05.15.2 2.08 3.18 5.05 4.46.71.31 1.27.49 1.7.62.71.23 1.36.2 1.87.12.57-.08 1.77-.72 2.02-1.42.25-.7.25-1.29.17-1.42-.07-.13-.27-.2-.57-.35z'/>\
  </svg>");
}

/* Facebook */
a[href*="facebook.com"]::before {
  background-image: url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231877F2'>\
  <path d='M24 12.07C24 5.4 18.63 0 12 0S0 5.4 0 12.07C0 18.09 4.39 23.08 10.13 24v-8.43H7.08v-3.5h3.05V9.41c0-3.03 1.79-4.7 4.53-4.7 1.31 0 2.68.24 2.68.24v2.97h-1.51c-1.49 0-1.95.93-1.95 1.88v2.26h3.32l-.53 3.5h-2.79V24C19.61 23.08 24 18.09 24 12.07z'/>\
  </svg>");
}

/* Instagram */
a[href*="instagram.com"]::before {
  background-image: url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
  <defs><linearGradient id='g' x1='0' y1='1' x2='1' y2='0'>\
  <stop offset='0%' stop-color='%23f58529'/><stop offset='35%' stop-color='%23dd2a7b'/>\
  <stop offset='70%' stop-color='%238133d1'/><stop offset='100%' stop-color='%235153ca'/>\
  </linearGradient></defs>\
  <path fill='url(%23g)' d='M7 2h10a5 5 0 0 1 5 5v10a5 5 0 0 1-5 5H7a5 5 0 0 1-5-5V7a5 5 0 0 1 5-5zm0 2.2A2.8 2.8 0 0 0 4.2 7v10A2.8 2.8 0 0 0 7 19.8h10a2.8 2.8 0 0 0 2.8-2.8V7A2.8 2.8 0 0 0 17 4.2H7zm10.25 1.65a1.1 1.1 0 1 1 0 2.2 1.1 1.1 0 0 1 0-2.2zM12 7a5 5 0 1 1 0 10 5 5 0 0 1 0-10zm0 2.2a2.8 2.8 0 1 0 0 5.6 2.8 2.8 0 0 0 0-5.6z'/>\
  </svg>");
}

/* YouTube */
a[href*="youtube.com"]::before,
a[href*="youtu.be"]::before {
  background-image: url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23FF0000'>\
  <path d='M23.5 6.2a3 3 0 0 0-2.1-2.12C19.5 3.5 12 3.5 12 3.5s-7.5 0-9.4.58A3 3 0 0 0 .5 6.2 31.4 31.4 0 0 0 0 12a31.4 31.4 0 0 0 .5 5.8 3 3 0 0 0 2.1 2.12c1.9.58 9.4.58 9.4.58s7.5 0 9.4-.58a3 3 0 0 0 2.1-2.12A31.4 31.4 0 0 0 24 12a31.4 31.4 0 0 0-.5-5.8zM9.6 15.6V8.4l6.2 3.6-6.2 3.6z'/>\
  </svg>");
}

/* TikTok */
a[href*="tiktok.com"]::before {
  background-image: url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000000'>\
  <path d='M19.59 6.69a4.83 4.83 0 0 1-3.77-4.11V2h-3.12v12.4a2.67 2.67 0 1 1-2.67-2.67c.24 0 .47.03.69.09V8.65a5.8 5.8 0 1 0 5.1 5.75V8.27a7.9 7.9 0 0 0 4.77 1.6V6.69z'/>\
  </svg>");
}

/* X / Twitter */
a[href*='twitter.com']::before,
a[href*='x.com']::before {
  background-image: url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000000'>\
  <path d='M18.9 2H22l-6.77 7.74L23.2 22h-6.26l-4.9-6.4L6.44 22H3.33l7.24-8.28L1 2h6.42l4.43 5.85L18.9 2zm-1.1 18h1.73L6.48 3.9H4.62L17.8 20z'/>\
  </svg>");
}

/* Telegram */
a[href*="t.me"]::before,
a[href*="telegram.me"]::before {
  background-image: url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2329A9EA'>\
  <path d='M9.04 15.47 8.66 20.8c.55 0 .79-.24 1.08-.52l2.6-2.48 5.4 3.95c.99.55 1.69.26 1.96-.91L23.3 3.9c.4-1.58-.57-2.2-1.52-1.85L1.7 9.83C.17 10.43.19 11.28 1.44 11.67l5.14 1.6L18.5 5.74c.56-.34 1.08-.15.66.19'/>\
  </svg>");
}


/* تحسين الهيدر على الهاتف: تصغيره وتوسيط الشعار واسم الشركة */
@media (max-width: 768px) {
  .site-header,
  .main-header,
  header {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
  }

  .site-header .container,
  .main-header .container,
  header .container,
  .navbar,
  .nav-inner {
    min-height: 62px !important;
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    align-items: center !important;
  }

  /* تصغير الشعار */
  .site-logo img,
  .logo img,
  .brand-logo img,
  header .logo img {
    max-height: 44px !important;
    width: auto !important;
    display: block;
    margin: 0 auto !important;
  }

  /* توسيط منطقة الهوية */
  .site-brand,
  .brand-box,
  .logo-wrap,
  .header-brand {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    gap: 4px !important;
    margin: 0 auto !important;
  }

  /* اسم الشركة تحت الشعار بشكل أخف */
  .site-title,
  .brand-title,
  .company-name,
  .logo-text strong,
  .header-brand h1,
  .header-brand h2 {
    font-size: 14px !important;
    line-height: 1.25 !important;
    margin: 0 !important;
    font-weight: 700 !important;
  }

  /* السطر الوصفي تحت الاسم */
  .site-tagline,
  .brand-subtitle,
  .company-tagline,
  .logo-text small,
  .header-brand p,
  .header-brand span {
    font-size: 11px !important;
    line-height: 1.35 !important;
    margin: 0 !important;
    opacity: .78 !important;
    max-width: 220px !important;
    white-space: normal !important;
  }

  /* منع تضخم أزرار الهيدر على الهاتف */
  .site-header .btn,
  .main-header .btn,
  header .btn,
  .header-actions .btn {
    padding: 8px 12px !important;
    font-size: 13px !important;
    border-radius: 10px !important;
  }

  /* تقليل المسافات العامة */
  .site-header .nav-menu,
  .main-header .nav-menu,
  header nav ul {
    gap: 8px !important;
  }
}

/* ===== Social icons: center + zoom inside current boxes ===== */
.contact-socials,
.social-links,
.contact-page .social-links,
.contact-page .contact-socials {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center !important;
  align-items: center !important;
  gap: 18px !important;
}

.contact-socials a,
.social-links a,
.contact-page .social-links a,
.contact-page .contact-socials a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}

/* تكبير الأيقونة داخل نفس الصندوق بدون تكبير الصندوق نفسه */
.contact-socials a::before,
.social-links a::before,
.contact-page .social-links a::before,
.contact-page .contact-socials a::before {
  width: 30px !important;
  height: 30px !important;
  background-size: 30px 30px !important;
  margin: 0 auto !important;
}

/* على الهاتف يكبر قليلًا أكثر ليبدو أوضح */
@media (max-width: 768px) {
  .contact-socials a::before,
  .social-links a::before,
  .contact-page .social-links a::before,
  .contact-page .contact-socials a::before {
    width: 32px !important;
    height: 32px !important;
    background-size: 32px 32px !important;
  }
}

/* ===== Mobile header: one clean row ===== */
@media (max-width: 768px) {
  .topbar,
  .site-header,
  #site-header {
    padding: 8px 0 !important;
  }

  .topbar-inner,
  .site-header .container,
  #site-header .container {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    min-height: 64px !important;
  }

  /* العلامة التجارية في صف واحد */
  .brand {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
    text-align: right !important;
  }

  .brand img {
    width: 42px !important;
    height: 42px !important;
    max-width: 42px !important;
    min-width: 42px !important;
    object-fit: contain !important;
    flex: 0 0 42px !important;
  }

  .brand > div {
    min-width: 0 !important;
    overflow: hidden !important;
  }

  .brand strong {
    display: block !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .brand small {
    display: block !important;
    font-size: 10px !important;
    line-height: 1.25 !important;
    margin-top: 2px !important;
    opacity: .75 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* الأزرار يمين أو يسار بحسب RTL بدون تضخم */
  .topbar-actions {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex: 0 0 auto !important;
  }

  .theme-toggle,
  .menu-toggle {
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 10px !important;
    border-radius: 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .theme-toggle-text {
    display: none !important;
  }

  .theme-toggle-icon {
    font-size: 16px !important;
    line-height: 1 !important;
  }

  .menu-toggle {
    font-size: 18px !important;
    line-height: 1 !important;
  }
}

/* ===== Extra small screens ===== */
@media (max-width: 420px) {
  .brand strong,
  .brand small {
    display: none !important;
  }

  .brand {
    gap: 0 !important;
  }

  .brand img {
    margin-inline-start: 0 !important;
    margin-inline-end: 0 !important;
  }
}

/* ===== إصلاح نهائي لأيقونات السوشيال ===== */
.contact-socials,
.social-links,
.contact-page .social-links,
.contact-page .contact-socials {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(108px, 108px)) !important;
  justify-content: center !important;
  gap: 22px !important;
  width: 100% !important;
}

.contact-socials a,
.social-links a,
.contact-page .social-links a,
.contact-page .contact-socials a {
  width: 108px !important;
  height: 108px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  overflow: hidden !important;
  border-radius: 26px !important;
  box-sizing: border-box !important;
}

/* كسر تأثير التكبير السابق الذي سبب القص */
.contact-socials a::before,
.social-links a::before,
.contact-page .social-links a::before,
.contact-page .contact-socials a::before {
  content: "" !important;
  display: block !important;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  margin: 0 auto !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  transform: none !important;
}

/* شاشة متوسطة */
@media (max-width: 768px) {
  .contact-socials,
  .social-links,
  .contact-page .social-links,
  .contact-page .contact-socials {
    grid-template-columns: repeat(3, 96px) !important;
    gap: 16px !important;
  }

  .contact-socials a,
  .social-links a,
  .contact-page .social-links a,
  .contact-page .contact-socials a {
    width: 96px !important;
    height: 96px !important;
    border-radius: 22px !important;
  }

  .contact-socials a::before,
  .social-links a::before,
  .contact-page .social-links a::before,
  .contact-page .contact-socials a::before {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    min-height: 34px !important;
  }
}

/* شاشة صغيرة جدًا */
@media (max-width: 480px) {
  .contact-socials,
  .social-links,
  .contact-page .social-links,
  .contact-page .contact-socials {
    grid-template-columns: repeat(2, 92px) !important;
    gap: 14px !important;
  }

  .contact-socials a,
  .social-links a,
  .contact-page .social-links a,
  .contact-page .contact-socials a {
    width: 92px !important;
    height: 92px !important;
    border-radius: 20px !important;
  }

  .contact-socials a::before,
  .social-links a::before,
  .contact-page .social-links a::before,
  .contact-page .contact-socials a::before {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
  }
}
/* =========================
   Footer social icons fix
   ========================= */

/* إلغاء أي تنسيقات عامة قديمة سببت التشوه */
.site-footer .social-links,
.site-footer .contact-socials {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-start !important;
  align-items: center !important;
  gap: 18px !important;
  width: auto !important;
}

.site-footer .social-links a,
.site-footer .contact-socials a {
  width: 110px !important;
  height: 110px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  border-radius: 24px !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  flex: 0 0 110px !important;
}

/* حجم الأيقونة داخل المربع */
.site-footer .social-links a::before,
.site-footer .contact-socials a::before {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  background-size: contain !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  transform: none !important;
  margin: 0 auto !important;
}

/* محاذاة قسم السوشيال داخل عمود الفوتر */
.site-footer .footer-social,
.site-footer .footer-socials {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 18px !important;
}

/* سطح المكتب */
@media (min-width: 992px) {
  .site-footer .social-links,
  .site-footer .contact-socials {
    justify-content: flex-start !important;
  }
}

/* التابلت */
@media (max-width: 991px) {
  .site-footer .social-links,
  .site-footer .contact-socials {
    justify-content: center !important;
    gap: 14px !important;
  }

  .site-footer .social-links a,
  .site-footer .contact-socials a {
    width: 92px !important;
    height: 92px !important;
    flex: 0 0 92px !important;
    border-radius: 20px !important;
  }

  .site-footer .social-links a::before,
  .site-footer .contact-socials a::before {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
  }
}

/* الهاتف */
@media (max-width: 575px) {
  .site-footer .footer-social,
  .site-footer .footer-socials {
    align-items: center !important;
  }

  .site-footer .social-links,
  .site-footer .contact-socials {
    justify-content: center !important;
    gap: 12px !important;
  }

  .site-footer .social-links a,
  .site-footer .contact-socials a {
    width: 78px !important;
    height: 78px !important;
    flex: 0 0 78px !important;
    border-radius: 18px !important;
  }

  .site-footer .social-links a::before,
  .site-footer .contact-socials a::before {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
  }
}

/* =========================
   Social icons - clean compact style
   ========================= */

/* الحاوية */
.site-footer .social-links,
.site-footer .contact-socials,
.contact-page .social-links,
.contact-page .contact-socials {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* الرابط نفسه */
.site-footer .social-links a,
.site-footer .contact-socials a,
.contact-page .social-links a,
.contact-page .contact-socials a {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  border-radius: 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-decoration: none !important;
  color: transparent !important;
  font-size: 0 !important;
  overflow: hidden !important;
  background: rgba(255,255,255,0.08) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  box-shadow: none !important;
  transition: transform .2s ease, background .2s ease, border-color .2s ease !important;
}

/* hover */
.site-footer .social-links a:hover,
.site-footer .contact-socials a:hover,
.contact-page .social-links a:hover,
.contact-page .contact-socials a:hover {
  transform: translateY(-2px) !important;
  background: rgba(255,255,255,0.14) !important;
  border-color: rgba(255,255,255,0.18) !important;
}

/* الأيقونة */
.site-footer .social-links a::before,
.site-footer .contact-socials a::before,
.contact-page .social-links a::before,
.contact-page .contact-socials a::before {
  content: "" !important;
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  min-height: 20px !important;
  display: block !important;
  margin: 0 auto !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  transform: none !important;
}

/* تابلت */
@media (max-width: 768px) {
  .site-footer .social-links a,
  .site-footer .contact-socials a,
  .contact-page .social-links a,
  .contact-page .contact-socials a {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
    min-height: 42px !important;
    border-radius: 11px !important;
  }

  .site-footer .social-links a::before,
  .site-footer .contact-socials a::before,
  .contact-page .social-links a::before,
  .contact-page .contact-socials a::before {
    width: 19px !important;
    height: 19px !important;
  }
}

/* هاتف */
@media (max-width: 480px) {
  .site-footer .social-links,
  .site-footer .contact-socials,
  .contact-page .social-links,
  .contact-page .contact-socials {
    gap: 8px !important;
  }

  .site-footer .social-links a,
  .site-footer .contact-socials a,
  .contact-page .social-links a,
  .contact-page .contact-socials a {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    border-radius: 10px !important;
  }

  .site-footer .social-links a::before,
  .site-footer .contact-socials a::before,
  .contact-page .social-links a::before,
  .contact-page .contact-socials a::before {
    width: 18px !important;
    height: 18px !important;
  }
}

/* =========================
   SVG icons by platform
   ========================= */

/* WhatsApp */
a[href*="wa.me"]::before,
a[href*="whatsapp.com"]::before {
  background-image: url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2325D366'>\
  <path d='M20.52 3.48A11.83 11.83 0 0 0 12.06 0C5.53 0 .23 5.3.23 11.83c0 2.08.54 4.12 1.57 5.92L0 24l6.43-1.69a11.77 11.77 0 0 0 5.63 1.43h.01c6.53 0 11.83-5.3 11.83-11.83 0-3.16-1.23-6.13-3.48-8.43zM12.07 21.7h-.01a9.84 9.84 0 0 1-5.02-1.38l-.36-.22-3.82 1 1.02-3.72-.24-.38a9.83 9.83 0 0 1-1.51-5.18c0-5.44 4.43-9.87 9.88-9.87 2.64 0 5.12 1.03 6.98 2.89a9.8 9.8 0 0 1 2.89 6.98c0 5.45-4.43 9.88-9.87 9.88zm5.42-7.4c-.3-.15-1.77-.87-2.05-.97-.27-.1-.47-.15-.67.15-.2.3-.77.97-.95 1.17-.17.2-.35.23-.65.08-.3-.15-1.25-.46-2.38-1.47-.88-.79-1.48-1.77-1.65-2.07-.17-.3-.02-.46.13-.61.14-.14.3-.35.45-.52.15-.17.2-.3.3-.5.1-.2.05-.38-.02-.53-.08-.15-.67-1.62-.92-2.22-.24-.58-.48-.5-.67-.51h-.57c-.2 0-.52.08-.8.38-.27.3-1.04 1.01-1.04 2.46 0 1.45 1.06 2.85 1.2 3.05.15.2 2.08 3.18 5.05 4.46.71.31 1.27.49 1.7.62.71.23 1.36.2 1.87.12.57-.08 1.77-.72 2.02-1.42.25-.7.25-1.29.17-1.42-.07-.13-.27-.2-.57-.35z'/>\
  </svg>");
}

/* Facebook */
a[href*="facebook.com"]::before {
  background-image: url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231877F2'>\
  <path d='M24 12.07C24 5.4 18.63 0 12 0S0 5.4 0 12.07C0 18.09 4.39 23.08 10.13 24v-8.43H7.08v-3.5h3.05V9.41c0-3.03 1.79-4.7 4.53-4.7 1.31 0 2.68.24 2.68.24v2.97h-1.51c-1.49 0-1.95.93-1.95 1.88v2.26h3.32l-.53 3.5h-2.79V24C19.61 23.08 24 18.09 24 12.07z'/>\
  </svg>");
}

/* Instagram */
a[href*="instagram.com"]::before {
  background-image: url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
  <defs><linearGradient id='g' x1='0' y1='1' x2='1' y2='0'>\
  <stop offset='0%' stop-color='%23f58529'/><stop offset='35%' stop-color='%23dd2a7b'/>\
  <stop offset='70%' stop-color='%238133d1'/><stop offset='100%' stop-color='%235153ca'/>\
  </linearGradient></defs>\
  <path fill='url(%23g)' d='M7 2h10a5 5 0 0 1 5 5v10a5 5 0 0 1-5 5H7a5 5 0 0 1-5-5V7a5 5 0 0 1 5-5zm0 2.2A2.8 2.8 0 0 0 4.2 7v10A2.8 2.8 0 0 0 7 19.8h10a2.8 2.8 0 0 0 2.8-2.8V7A2.8 2.8 0 0 0 17 4.2H7zm10.25 1.65a1.1 1.1 0 1 1 0 2.2 1.1 1.1 0 0 1 0-2.2zM12 7a5 5 0 1 1 0 10 5 5 0 0 1 0-10zm0 2.2a2.8 2.8 0 1 0 0 5.6 2.8 2.8 0 0 0 0-5.6z'/>\
  </svg>");
}

/* YouTube */
a[href*="youtube.com"]::before,
a[href*="youtu.be"]::before {
  background-image: url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23FF0000'>\
  <path d='M23.5 6.2a3 3 0 0 0-2.1-2.12C19.5 3.5 12 3.5 12 3.5s-7.5 0-9.4.58A3 3 0 0 0 .5 6.2 31.4 31.4 0 0 0 0 12a31.4 31.4 0 0 0 .5 5.8 3 3 0 0 0 2.1 2.12c1.9.58 9.4.58 9.4.58s7.5 0 9.4-.58a3 3 0 0 0 2.1-2.12A31.4 31.4 0 0 0 24 12a31.4 31.4 0 0 0-.5-5.8zM9.6 15.6V8.4l6.2 3.6-6.2 3.6z'/>\
  </svg>");
}

/* TikTok */
a[href*="tiktok.com"]::before {
  background-image: url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'>\
  <path d='M19.59 6.69a4.83 4.83 0 0 1-3.77-4.11V2h-3.12v12.4a2.67 2.67 0 1 1-2.67-2.67c.24 0 .47.03.69.09V8.65a5.8 5.8 0 1 0 5.1 5.75V8.27a7.9 7.9 0 0 0 4.77 1.6V6.69z'/>\
  </svg>");
  filter: brightness(0) !important;
}

/* X / Twitter */
a[href*='twitter.com']::before,
a[href*='x.com']::before {
  background-image: url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'>\
  <path d='M18.9 2H22l-6.77 7.74L23.2 22h-6.26l-4.9-6.4L6.44 22H3.33l7.24-8.28L1 2h6.42l4.43 5.85L18.9 2zm-1.1 18h1.73L6.48 3.9H4.62L17.8 20z'/>\
  </svg>");
  filter: brightness(0) !important;
}


/* Social icons - safe responsive version */
.site-footer .social-links,
.site-footer .contact-socials,
.contact-page .social-links,
.contact-page .contact-socials {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
}

.site-footer .social-links a,
.site-footer .contact-socials a,
.contact-page .social-links a,
.contact-page .contact-socials a {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  min-height: 42px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 12px !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: rgba(255,255,255,0.08) !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  box-sizing: border-box !important;
}

.site-footer .social-links a::before,
.site-footer .contact-socials a::before,
.contact-page .social-links a::before,
.contact-page .contact-socials a::before {
  content: "" !important;
  width: 18px !important;
  height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  display: block !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  margin: 0 auto !important;
}

@media (max-width: 768px) {
  .site-footer .social-links,
  .site-footer .contact-socials,
  .contact-page .social-links,
  .contact-page .contact-socials {
    gap: 8px !important;
  }

  .site-footer .social-links a,
  .site-footer .contact-socials a,
  .contact-page .social-links a,
  .contact-page .contact-socials a {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    border-radius: 10px !important;
  }

  .site-footer .social-links a::before,
  .site-footer .contact-socials a::before,
  .contact-page .social-links a::before,
  .contact-page .contact-socials a::before {
    width: 17px !important;
    height: 17px !important;
    min-width: 17px !important;
    min-height: 17px !important;
  }
}

@media (max-width: 480px) {
  .site-footer .social-links a,
  .site-footer .contact-socials a,
  .contact-page .social-links a,
  .contact-page .contact-socials a {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    border-radius: 10px !important;
  }

  .site-footer .social-links a::before,
  .site-footer .contact-socials a::before,
  .contact-page .social-links a::before,
  .contact-page .contact-socials a::before {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    min-height: 16px !important;
  }
}

/* ضبط أيقونات السوشيال داخل أزرار بيضاء بنفس الحجم الحالي */
.site-footer .social-links,
.site-footer .contact-socials,
.contact-page .social-links,
.contact-page .contact-socials {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 10px !important;
}

.site-footer .social-links a,
.site-footer .contact-socials a,
.contact-page .social-links a,
.contact-page .contact-socials a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  background: #ffffff !important;
  border: 1px solid #d9e2ec !important;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08) !important;
  color: transparent !important;
  font-size: 0 !important;
  overflow: hidden !important;
  position: relative !important;
}

/* توسيط الأيقونة داخل نفس الزر الحالي */
.site-footer .social-links a::before,
.site-footer .contact-socials a::before,
.contact-page .social-links a::before,
.contact-page .contact-socials a::before {
  content: "" !important;
  display: block !important;
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  min-height: 22px !important;
  margin: 0 auto !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  transform: none !important;
}

/* تحسين بسيط عند المرور */
.site-footer .social-links a:hover,
.site-footer .contact-socials a:hover,
.contact-page .social-links a:hover,
.contact-page .contact-socials a:hover {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  transform: translateY(-1px) !important;
}

/* تحسين هيدر الهاتف: تكبير الشعار ورفع أزرار النمط والقائمة في نفس الصف */
@media (max-width: 768px) {
  .topbar,
  .site-header,
  #site-header {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
  }

  .topbar-inner,
  .site-header .container,
  #site-header .container {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    min-height: 68px !important;
  }

  /* الشعار والهوية */
  .brand {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  .brand img,
  .site-logo img,
  .logo img {
    width: 55px !important;
    height: 55px !important;
    max-width: 55px !important;
    min-width: 55px !important;
    object-fit: contain !important;
    flex: 0 0 48px !important;
  }

  .brand > div {
    min-width: 0 !important;
    overflow: hidden !important;
  }

  .brand strong {
    font-size: 13px !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .brand small {
    font-size: 10px !important;
    line-height: 1.2 !important;
    margin-top: 2px !important;
    opacity: .8 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* الأزرار في نفس الصف */
  .topbar-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    flex: 0 0 auto !important;
  }

  .theme-toggle,
  .menu-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 40px !important;
    min-height: 40px !important;
    width: 40px !important;
    min-width: 40px !important;
    padding: 0 !important;
    border-radius: 10px !important;
  }

  .theme-toggle-text {
    display: none !important;
  }

  .theme-toggle-icon,
  .menu-toggle {
    font-size: 17px !important;
    line-height: 1 !important;
  }
}

/* عند ضيق العرض جدًا نخفي النص ونبقي الشعار والأزرار */
@media (max-width: 430px) {
  .brand strong,
  .brand small {
    display: none !important;
  }

  .brand img,
  .site-logo img,
  .logo img {
    width: 50px !important;
    height: 50px !important;
    max-width: 50px !important;
    min-width: 50px !important;
  }

  .topbar-inner,
  .site-header .container,
  #site-header .container {
    min-height: 64px !important;
  }
}