/*
Theme Name: Sanaad Media
Theme URI: https://sanadmedia.store
Description: قالب احترافي لوكالة سند ميديا للدعاية والإعلان - وكالة دعاية وإعلان متخصصة في تصميم الهويات البصرية وإدارة السوشيال ميديا
Version: 1.0.0
Author: Sanaad Media
Author URI: https://sanadmedia.store
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sanaad-media
Domain Path: /languages
Requires at least: 5.0
Requires PHP: 7.4
*/

/* ========================================
   سند ميديا - نظام التصميم
   ======================================== */

:root {
  --primary: #C40000;
  --primary-light: #C40000;
  --primary-dark: #8F0000;
  --accent: #C40000;
  --background: #ffffff;
  --foreground: #1F1F1F;
  --border: #e5e5e5;
  --gray-50: #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;
  --success: #10b981;
  --warning: #f59e0b;
  --danger: #ef4444;
  --radius: 0.75rem;
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

/* ========================================
   إعادة تعيين وأساسيات
   ======================================== */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  direction: rtl;
}

body {
  font-family: 'Cairo', 'Tajawal', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background-color: var(--background);
  color: var(--foreground);
  line-height: 1.6;
  font-size: 16px;
}

/* ========================================
   الخطوط والنصوص
   ======================================== */

h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 1rem;
}

h1 {
  font-size: 3rem;
}

h2 {
  font-size: 2.25rem;
}

h3 {
  font-size: 1.875rem;
}

h4 {
  font-size: 1.5rem;
}

h5 {
  font-size: 1.25rem;
}

h6 {
  font-size: 1rem;
}

p {
  margin-bottom: 1rem;
}

a {
  color: var(--primary-light);
  text-decoration: none;
  transition: color 0.3s ease;
}

a:hover {
  color: var(--primary);
}

/* ========================================
   الحاوية والتخطيط
   ======================================== */

.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1rem;
}

.container-fluid {
  max-width: 100%;
  margin: 0 auto;
  padding: 0 1rem;
}

/* ========================================
   الشريط العلوي (Header)
   ======================================== */

.site-header {
  background-color: var(--background);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: var(--shadow-sm);
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 0;
}

.site-logo {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.site-logo img {
  height: 40px;
  width: auto;
  object-fit: contain;
}

.site-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--primary);
}

.site-description {
  font-size: 0.875rem;
  color: var(--gray-500);
}

/* ========================================
   القائمة الرئيسية
   ======================================== */

.main-navigation {
  display: flex;
  gap: 2rem;
  align-items: center;
}

.main-navigation a {
  color: var(--foreground);
  font-weight: 500;
  transition: color 0.3s ease;
  position: relative;
}

.main-navigation a:hover,
.main-navigation a.active {
  color: var(--primary-light);
}

.main-navigation a::after {
  content: '';
  position: absolute;
  bottom: -5px;
  right: 0;
  width: 0;
  height: 2px;
  background-color: var(--primary-light);
  transition: width 0.3s ease;
}

.main-navigation a:hover::after,
.main-navigation a.active::after {
  width: 100%;
}

.cta-button {
  background-color: var(--primary-light);
  color: white;
  padding: 0.75rem 1.5rem;
  border-radius: var(--radius);
  font-weight: 600;
  transition: all 0.3s ease;
  border: none;
  cursor: pointer;
  display: inline-block;
}

.cta-button:hover {
  background-color: var(--primary);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

/* ========================================
   قسم البطل (Hero)
   ======================================== */

.hero-section {
  background: linear-gradient(135deg, #f5f5f5 0%, #ffffff 100%);
  padding: 6rem 0;
  position: relative;
  overflow: hidden;
}

.hero-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}

.hero-text h1 {
  color: var(--primary);
  margin-bottom: 1.5rem;
  font-size: 3.5rem;
}

.hero-text p {
  font-size: 1.125rem;
  color: var(--gray-600);
  margin-bottom: 2rem;
}

.hero-image {
  position: relative;
}

.hero-image img {
  width: 100%;
  height: auto;
  border-radius: calc(var(--radius) * 2);
  box-shadow: var(--shadow-lg);
}

/* ========================================
   الأقسام العامة
   ======================================== */

section {
  padding: 5rem 0;
}

section.alt {
  background-color: var(--gray-50);
}

.section-header {
  text-align: center;
  margin-bottom: 3rem;
}

.section-header h2 {
  color: var(--primary);
  margin-bottom: 1rem;
}

.section-header p {
  font-size: 1.125rem;
  color: var(--gray-600);
  max-width: 600px;
  margin: 0 auto;
}

/* ========================================
   الخدمات
   ======================================== */

.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}

.service-card {
  background-color: white;
  padding: 2rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  transition: all 0.3s ease;
  text-align: center;
}

.service-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg);
  border-color: var(--primary-light);
}

.service-icon {
  width: 60px;
  height: 60px;
  background-color: var(--gray-100);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
  font-size: 2rem;
  color: var(--primary-light);
  transition: all 0.3s ease;
}

.service-card:hover .service-icon {
  background-color: var(--primary-light);
  color: white;
  transform: scale(1.1);
}

.service-card h3 {
  color: var(--primary);
  margin-bottom: 1rem;
}

.service-card p {
  color: var(--gray-600);
  font-size: 0.95rem;
}

/* ========================================
   المحفظة
   ======================================== */

.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
}

.portfolio-item {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  transition: all 0.3s ease;
}

.portfolio-item img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.portfolio-item:hover img {
  transform: scale(1.1);
}

.portfolio-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(106, 4, 15, 0.9);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.portfolio-item:hover .portfolio-overlay {
  opacity: 1;
}

.portfolio-overlay h3 {
  color: white;
  margin-bottom: 0.5rem;
}

.portfolio-overlay p {
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.9rem;
}

/* ========================================
   نموذج الاتصال
   ======================================== */

.contact-section {
  background: linear-gradient(135deg, #f5f5f5 0%, #ffffff 100%);
}

.contact-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
}

.contact-info {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.contact-item {
  display: flex;
  gap: 1.5rem;
}

.contact-icon {
  width: 50px;
  height: 50px;
  background-color: var(--primary-light);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.5rem;
  flex-shrink: 0;
}

.contact-text h3 {
  color: var(--primary);
  margin-bottom: 0.25rem;
  font-size: 1.125rem;
}

.contact-text p {
  color: var(--gray-600);
  margin: 0;
}

/* ========================================
   النموذج
   ======================================== */

.contact-form {
  background-color: white;
  padding: 2.5rem;
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 600;
  color: var(--foreground);
}

.form-group label .required {
  color: var(--danger);
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 0.75rem;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 1rem;
  transition: all 0.3s ease;
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--primary-light);
  box-shadow: 0 0 0 3px rgba(188, 52, 38, 0.1);
}

.form-group textarea {
  resize: vertical;
  min-height: 150px;
}

.form-submit {
  background-color: var(--primary-light);
  color: white;
  padding: 1rem 2rem;
  border: none;
  border-radius: var(--radius);
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  width: 100%;
}

.form-submit:hover {
  background-color: var(--primary);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.form-privacy {
  font-size: 0.85rem;
  color: var(--gray-500);
  margin-top: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.form-privacy i {
  color: var(--success);
}

/* ========================================
   قسم لماذا تختار سند ميديا
   ======================================== */

.why-us-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
}

.why-us-card {
  background-color: white;
  padding: 2rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  transition: all 0.3s ease;
  text-align: center;
}

.why-us-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg);
  border-color: var(--primary-light);
}

.why-us-icon {
  width: 70px;
  height: 70px;
  background: linear-gradient(135deg, var(--primary-light), var(--primary));
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
  font-size: 2.5rem;
  color: white;
  transition: all 0.3s ease;
}

.why-us-card:hover .why-us-icon {
  transform: scale(1.15) rotate(5deg);
}

.why-us-card h3 {
  color: var(--primary);
  margin-bottom: 1rem;
}

.why-us-card p {
  color: var(--gray-600);
  font-size: 0.95rem;
}

/* ========================================
   التذييل (Footer)
   ======================================== */

.site-footer {
  background-color: var(--gray-900);
  color: var(--gray-300);
  padding: 3rem 0 1rem;
  margin-top: 5rem;
}

.footer-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  margin-bottom: 2rem;
}

.footer-column h3 {
  color: white;
  margin-bottom: 1.5rem;
  font-size: 1.125rem;
}

.footer-column ul {
  list-style: none;
}

.footer-column ul li {
  margin-bottom: 0.75rem;
}

.footer-column a {
  color: var(--gray-300);
  transition: color 0.3s ease;
}

.footer-column a:hover {
  color: var(--primary-light);
}

.social-links {
  display: flex;
  gap: 1rem;
  margin-top: 1rem;
}

.social-links a {
  width: 40px;
  height: 40px;
  background-color: var(--gray-800);
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.social-links a:hover {
  background-color: var(--primary-light);
  color: white;
  transform: translateY(-2px);
}

.footer-bottom {
  border-top: 1px solid var(--gray-800);
  padding-top: 2rem;
  text-align: center;
  color: var(--gray-500);
}

/* ========================================
   الاستجابة
   ======================================== */

@media (max-width: 768px) {
  h1 {
    font-size: 2rem;
  }

  h2 {
    font-size: 1.5rem;
  }

  h3 {
    font-size: 1.25rem;
  }

  .hero-content {
    grid-template-columns: 1fr;
  }

  .hero-text h1 {
    font-size: 2.25rem;
  }

  .main-navigation {
    gap: 1rem;
    font-size: 0.9rem;
  }

  .contact-content {
    grid-template-columns: 1fr;
  }

  .services-grid,
  .portfolio-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  body {
    font-size: 14px;
  }

  h1 {
    font-size: 1.5rem;
  }

  h2 {
    font-size: 1.25rem;
  }

  section {
    padding: 3rem 0;
  }

  .hero-text h1 {
    font-size: 1.75rem;
  }

  .main-navigation {
    gap: 0.5rem;
    font-size: 0.8rem;
  }

  .cta-button {
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
  }
}

/* ========================================
   Sanad Media V2 refinements + mobile fixes
   ======================================== */
:root {
  --sanad-red: #D70000;
  --sanad-black: #1F1F1F;
  --sanad-gray: #555555;
  --sanad-light: #F2F2F2;
  --container-pad: clamp(1rem, 3vw, 2rem);
}

html, body { overflow-x: hidden; }
body { background: #fff; color: var(--sanad-black); }
img { max-width: 100%; height: auto; }
.container { width: min(1280px, calc(100% - 2rem)); padding-left: 0; padding-right: 0; }

.site-header {
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(31,31,31,.08);
}
.header-content { min-height: 76px; gap: 1rem; }
.site-logo { color: var(--sanad-black); min-width: 0; }
.site-logo:hover { color: var(--sanad-black); }
.site-logo img, .custom-logo-link img { height: 52px; max-width: 190px; object-fit: contain; }
.brand-copy { display: flex; flex-direction: column; line-height: 1.1; }
.site-title-text { font-size: 1.15rem; color: var(--sanad-black); }
.brand-copy small { color: #555; font-weight: 700; font-size: .82rem; }
.fallback-logo-mark { width: 46px; height: 46px; border-radius: 14px; background: var(--sanad-red); color:#fff; display:grid; place-items:center; font-weight:900; font-size:1.6rem; }

.nav-menu { display:flex; align-items:center; gap: 1.4rem; list-style:none; margin:0; padding:0; }
.nav-menu a { color: var(--sanad-black); font-weight: 800; font-size: .96rem; }
.header-cta { white-space: nowrap; padding: .72rem 1.15rem; border-radius: 999px; }
.menu-toggle { display:none; width: 44px; height:44px; border:0; border-radius: 14px; background:#fff; box-shadow: var(--shadow-sm); align-items:center; justify-content:center; flex-direction:column; gap:5px; cursor:pointer; }
.menu-toggle span { width:22px; height:2px; border-radius: 9px; background: var(--sanad-black); transition: .25s ease; }
.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity:0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

section { padding: clamp(3.25rem, 7vw, 6rem) 0; }
.section-with-shapes::before, .section-with-shapes::after { content:""; position:absolute; border-radius: 999px; pointer-events:none; }
.section-with-shapes::before { width: 520px; height: 520px; border: 34px solid rgba(215,0,0,.08); left: -160px; top: -180px; }
.section-with-shapes::after { width: 360px; height: 360px; background: radial-gradient(circle, rgba(215,0,0,.09), transparent 70%); right: -120px; bottom: -130px; }
.hero-section { padding: clamp(3.5rem, 8vw, 7rem) 0; background: linear-gradient(135deg,#fff 0%,#fafafa 100%); }
.hero-content { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 4rem); }
.eyebrow { display:inline-flex; align-items:center; gap:.55rem; color:var(--sanad-red); font-weight:900; margin-bottom:.85rem; }
.eyebrow::before { content:""; width:34px; height:3px; border-radius:9px; background:var(--sanad-red); }
.hero-text h1 { color: var(--sanad-black); font-size: clamp(2.1rem, 5vw, 4.7rem); letter-spacing: -.04em; margin-bottom:1rem; }
.hero-text h1 span, .section-header h2 span { color: var(--sanad-red); }
.hero-text p { color: var(--sanad-gray); font-size: clamp(1rem, 2vw, 1.25rem); max-width: 620px; }
.hero-actions { display:flex; align-items:center; gap:1rem; flex-wrap: wrap; margin: 2rem 0; }
.cta-button, .form-submit { background: linear-gradient(135deg, #E10000, #B90000); color:#fff !important; border-radius: 999px; border:0; box-shadow: 0 14px 30px rgba(215,0,0,.22); }
.secondary-button { display:inline-flex; align-items:center; justify-content:center; padding:.85rem 1.35rem; border-radius:999px; border:1px solid rgba(31,31,31,.14); color:var(--sanad-black); font-weight:800; background:#fff; }
.hero-mini-cards { display:flex; gap:.75rem; flex-wrap:wrap; }
.hero-mini-cards span { display:inline-flex; align-items:center; gap:.45rem; background:#fff; color:#333; border:1px solid rgba(31,31,31,.08); border-radius:999px; padding:.65rem .9rem; box-shadow: var(--shadow-sm); font-weight:800; }
.hero-mini-cards i { color: var(--sanad-red); }
.hero-image img, .section-visual img { border-radius: 28px; box-shadow: 0 20px 55px rgba(31,31,31,.12); object-fit: cover; }

.stats-strip { padding: 0 0 3rem; margin-top: -1.5rem; }
.stats-grid { display:grid; grid-template-columns: repeat(4, 1fr); gap:1rem; }
.stats-grid div { background:#fff; border:1px solid rgba(31,31,31,.08); border-radius: 22px; padding:1.2rem; text-align:center; box-shadow: var(--shadow-md); }
.stats-grid strong { display:block; font-size: clamp(1.4rem, 4vw, 2.4rem); color:var(--sanad-red); line-height:1; }
.stats-grid span { color:#555; font-weight:800; }

.split-section { display:grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items:center; }
.section-copy h2, .section-header h2 { color: var(--sanad-black); font-size: clamp(1.8rem, 4vw, 3rem); letter-spacing: -.025em; }
.section-copy p, .section-header p { color:#555; font-size: 1.08rem; }
.feature-list { display:grid; gap:.75rem; margin-top:1.4rem; }
.feature-list span { display:flex; gap:.7rem; align-items:center; font-weight:800; color:#333; }
.feature-list i { color:var(--sanad-red); }

.services-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.1rem; }
.service-card { border-radius: 24px; padding: 1.45rem; box-shadow: 0 8px 24px rgba(31,31,31,.06); border-color: rgba(31,31,31,.07); }
.service-icon { width: 86px; height: 86px; background: #fff5f5; border-radius: 22px; }
.service-icon img { width: 78px; height: 78px; object-fit: contain; display:block; }
.service-card:hover .service-icon { background:#fff0f0; color: var(--sanad-red); transform: translateY(-4px) scale(1.03); }
.service-card h3 { color: var(--sanad-black); font-size: 1.2rem; }
.text-link { display:inline-flex; margin-top:.55rem; color:var(--sanad-red); font-weight:900; }

.process-grid { display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap:1rem; counter-reset: step; }
.process-card { background:#fff; border:1px solid rgba(31,31,31,.08); border-radius: 24px; padding:1.5rem; box-shadow: var(--shadow-sm); position:relative; overflow:hidden; }
.process-card::after { content:""; position:absolute; inset:auto auto -40px -40px; width:110px; height:110px; border-radius:50%; background:rgba(215,0,0,.07); }
.process-number { display:grid; place-items:center; width:44px; height:44px; border-radius: 14px; background:var(--sanad-red); color:#fff; font-weight:900; margin-bottom:1rem; }
.process-card h3 { color:var(--sanad-black); font-size:1.2rem; }
.process-card p { color:#555; margin:0; }

.portfolio-filters { display:flex; flex-wrap:wrap; gap:.7rem; justify-content:center; margin-bottom:2rem; }
.filter-button { border:1px solid rgba(31,31,31,.1); background:#fff; color:#333; padding:.72rem 1rem; border-radius:999px; cursor:pointer; font-family:inherit; font-weight:900; }
.filter-button.active, .filter-button:hover { background:var(--sanad-red); color:#fff; border-color:var(--sanad-red); }
.enhanced-portfolio-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.portfolio-card { background:#fff; position:relative; box-shadow: var(--shadow-md); border:1px solid rgba(31,31,31,.08); }
.portfolio-card img { height: 260px; object-fit: cover; transform:none !important; }
.portfolio-card-body { padding:1.2rem; }
.portfolio-badge { display:inline-flex; background:#fff0f0; color:var(--sanad-red); font-weight:900; padding:.35rem .7rem; border-radius:999px; margin-bottom:.75rem; font-size:.82rem; }
.portfolio-card-body h3 { font-size:1.2rem; color:var(--sanad-black); margin-bottom:.5rem; }
.portfolio-card-body p { color:#555; margin:0; font-size:.95rem; }
.portfolio-overlay { display:none; }
.portfolio-card.is-hidden { display:none; }

.apps-cards { display:grid; gap:1rem; }
.app-mini-card { display:grid; grid-template-columns: 150px 1fr; align-items:center; gap:1rem; background:#fff; border-radius:22px; border:1px solid rgba(31,31,31,.08); padding:.75rem; box-shadow: var(--shadow-sm); }
.app-mini-card img { width:150px; height:95px; object-fit:cover; border-radius:16px; }
.app-mini-card strong { color:var(--sanad-black); font-size:1.15rem; }

.faq-list { max-width: 850px; margin:0 auto; display:grid; gap:.8rem; }
.faq-item { background:#fff; border:1px solid rgba(31,31,31,.08); border-radius:18px; padding:1.1rem 1.25rem; box-shadow: var(--shadow-sm); }
.faq-item summary { cursor:pointer; font-weight:900; color:var(--sanad-black); }
.faq-item p { margin:.8rem 0 0; color:#555; }

.contact-content { grid-template-columns: .9fr 1.1fr; }
.contact-item { align-items:center; background:#fff; border:1px solid rgba(31,31,31,.08); border-radius:20px; padding:1rem; box-shadow: var(--shadow-sm); }
.contact-icon { background: var(--sanad-red); border-radius:16px; }
.contact-text h3 { color:var(--sanad-black); }
.contact-form { border:1px solid rgba(31,31,31,.08); border-radius: 24px; box-shadow: 0 18px 45px rgba(31,31,31,.08); }
.form-group input, .form-group textarea { border:1px solid rgba(31,31,31,.12); background:#fbfbfb; }
.whatsapp-inline { display:flex; align-items:center; justify-content:center; gap:.5rem; margin-top:1rem; padding:.9rem; border-radius:999px; color:#128c7e; background:#f2fffb; font-weight:900; }

.site-footer { margin-top:0; background:#111; border-top:4px solid var(--sanad-red); }
.footer-brand p { color:#cfcfcf; }
.footer-contact-list i { color:var(--sanad-red); margin-left:.5rem; }
.floating-whatsapp { position:fixed; left:18px; bottom:18px; z-index:999; width:58px; height:58px; border-radius:50%; display:grid; place-items:center; background:#25D366; color:#fff !important; font-size:2rem; box-shadow:0 14px 35px rgba(0,0,0,.24); }

@media (max-width: 1080px) {
  .services-grid, .process-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .enhanced-portfolio-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .main-navigation { gap: .75rem; }
  .nav-menu { gap: .85rem; }
}

@media (max-width: 820px) {
  .container { width: min(100% - 1.25rem, 1280px); }
  .header-content { min-height: 68px; }
  .site-logo img, .custom-logo-link img { height: 44px; max-width: 150px; }
  .brand-copy { display:none; }
  .menu-toggle { display:flex; }
  .main-navigation {
    position: fixed;
    top: 68px;
    right: .75rem;
    left: .75rem;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: .7rem;
    padding: 1rem;
    border-radius: 22px;
    background:#fff;
    box-shadow: 0 18px 50px rgba(31,31,31,.18);
    border:1px solid rgba(31,31,31,.08);
  }
  .main-navigation.active { display:flex; }
  .nav-menu { flex-direction: column; align-items: stretch; gap:0; }
  .nav-menu li { border-bottom:1px solid rgba(31,31,31,.06); }
  .nav-menu a { display:block; padding:.85rem .5rem; }
  .header-cta { text-align:center; width:100%; }

  .hero-content, .split-section, .contact-content { grid-template-columns: 1fr; }
  .reverse-on-mobile .section-copy { order: 1; }
  .reverse-on-mobile .apps-cards { order: 2; }
  .hero-section { padding-top: 2.5rem; }
  .hero-text { text-align:center; }
  .eyebrow { justify-content:center; }
  .hero-actions, .hero-mini-cards { justify-content:center; }
  .hero-image img { border-radius: 22px; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .services-grid, .process-grid, .enhanced-portfolio-grid { grid-template-columns: 1fr; }
  .service-card { padding: 1.1rem; }
  .portfolio-card img { height: 220px; }
  .app-mini-card { grid-template-columns: 118px 1fr; }
  .app-mini-card img { width:118px; height:76px; }
  .contact-item { gap:.85rem; }
  .contact-form { padding:1.25rem; }
}

@media (max-width: 520px) {
  body { font-size: 15px; }
  section { padding: 2.75rem 0; }
  .hero-text h1 { font-size: clamp(2rem, 12vw, 2.7rem); }
  .section-copy h2, .section-header h2 { font-size: clamp(1.55rem, 9vw, 2.2rem); }
  .hero-actions { flex-direction: column; }
  .hero-actions a { width:100%; }
  .hero-mini-cards { display:grid; grid-template-columns: 1fr; }
  .stats-grid { gap:.7rem; }
  .stats-grid div { padding: .95rem .5rem; border-radius: 16px; }
  .services-grid { gap:.8rem; }
  .service-card { display:grid; grid-template-columns: 72px 1fr; text-align:right; gap: .7rem 1rem; align-items:center; }
  .service-card .service-icon { grid-row: span 3; width:64px; height:64px; margin:0; }
  .service-icon img { width:58px; height:58px; }
  .service-card h3 { margin:0; font-size:1.05rem; }
  .service-card p { margin:0; font-size:.9rem; }
  .text-link { margin-top:.15rem; }
  .portfolio-card img { height: 205px; }
  .footer-content { grid-template-columns: 1fr; }
  .floating-whatsapp { width:52px; height:52px; font-size:1.75rem; left:14px; bottom:14px; }
}

/* ========================================
   SEO pages + indexing-friendly templates
   ======================================== */
.page-main .page-hero,
.page-hero {
  background: linear-gradient(135deg, #fff 0%, #fafafa 100%);
  position: relative;
  overflow: hidden;
  padding: clamp(3.5rem, 8vw, 6.5rem) 0 clamp(2.75rem, 6vw, 5rem);
}
.page-hero h1 {
  font-size: clamp(2rem, 5vw, 4rem);
  line-height: 1.15;
  letter-spacing: -.03em;
  margin: .5rem 0 .85rem;
  color: var(--sanad-black);
}
.page-hero p {
  color: var(--sanad-gray);
  max-width: 760px;
  font-size: clamp(1rem, 1.7vw, 1.18rem);
  font-weight: 600;
}
.narrow-container { max-width: 940px; }
.page-content-section { background: #fff; }
.page-entry-card {
  background: #fff;
  border: 1px solid rgba(31,31,31,.08);
  border-radius: 28px;
  padding: clamp(1.25rem, 4vw, 2.5rem);
  box-shadow: var(--shadow-md);
}
.page-featured-image { margin: 0 0 1.5rem; }
.page-featured-image img { width: 100%; border-radius: 22px; box-shadow: var(--shadow-sm); }
.rich-content { color: var(--sanad-black); font-size: 1.05rem; line-height: 1.9; }
.rich-content h2, .rich-content h3 { color: var(--sanad-black); margin: 1.6rem 0 .75rem; }
.rich-content p { color: #444; margin-bottom: 1rem; }
.rich-content a { color: var(--sanad-red); font-weight: 800; }
.single-cta { margin-top: 2rem; display: flex; justify-content: flex-start; }
.portfolio-image-link { display:block; overflow:hidden; border-radius: 22px 22px 0 0; }
.portfolio-card h2 { font-size: 1.15rem; margin: .65rem 0 .5rem; }
.portfolio-card h2 a, .service-card h2 a { color: var(--sanad-black); }
.portfolio-card h2 a:hover, .service-card h2 a:hover { color: var(--sanad-red); }
.pagination, .nav-links { display:flex; justify-content:center; gap:.65rem; flex-wrap:wrap; margin-top:2rem; }
.page-numbers { display:inline-flex; min-width:42px; min-height:42px; align-items:center; justify-content:center; border-radius:999px; border:1px solid rgba(31,31,31,.12); color:var(--sanad-black); font-weight:800; background:#fff; }
.page-numbers.current, .page-numbers:hover { background:var(--sanad-red); color:#fff; border-color:var(--sanad-red); }

@media (max-width: 820px) {
  .page-hero { text-align: center; padding-top: 2.5rem; }
  .page-hero p { margin-left: auto; margin-right: auto; }
  .single-cta { justify-content: center; }
  .page-entry-card { border-radius: 22px; }
}

@media (max-width: 520px) {
  .page-hero h1 { font-size: clamp(1.8rem, 10vw, 2.5rem); }
  .page-entry-card { padding: 1.1rem; }
  .rich-content { font-size: .98rem; line-height: 1.8; }
  .single-cta .cta-button { width: 100%; text-align:center; }
}


/* ========================================
   ترقية استراتيجية سند ميديا V2
   ======================================== */
:root{
  --luxury-black:#222222;
  --soft-text:#555555;
  --white:#FFFFFF;
  --surface:#F2F2F2;
  --transition-smooth:cubic-bezier(.22,1,.36,1);
  --shadow-premium:0 22px 70px rgba(34,34,34,.10);
}

html{scroll-padding-top:92px}
body{overflow-x:hidden;text-rendering:optimizeLegibility}
img{max-width:100%;height:auto}
section{position:relative}
.section-with-shapes:before,
.section-with-shapes:after{
  content:"";position:absolute;pointer-events:none;z-index:0;border-radius:999px;
  background:radial-gradient(circle, rgba(196,0,0,.11), rgba(196,0,0,0) 68%);
}
.section-with-shapes:before{width:420px;height:420px;top:-180px;left:-120px}
.section-with-shapes:after{width:260px;height:260px;bottom:-120px;right:-80px}

.site-header{
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(160%) blur(14px);
  -webkit-backdrop-filter:saturate(160%) blur(14px);
}
.site-logo img,.custom-logo{max-height:54px;width:auto}
.brand-copy strong{font-weight:900}
.brand-copy small{color:#555;font-weight:600}
.nav-menu a{position:relative;font-weight:800}
.nav-menu a:after{
  content:"";position:absolute;right:0;bottom:-7px;width:0;height:2px;background:var(--primary);
  transition:width .28s var(--transition-smooth);border-radius:8px;
}
.nav-menu a:hover:after,.nav-menu a.active:after{width:100%}

.hero-section{overflow:hidden;background:
  linear-gradient(135deg,#fff 0%,#fff 45%,#f9f9f9 100%);
}
.hero-section .container,.hero-content{position:relative;z-index:1}
.hero-text h1{letter-spacing:-1.5px;font-weight:900}
.hero-slogan{
  display:inline-flex;align-items:center;gap:.55rem;margin:0 0 1rem;padding:.65rem 1rem;
  border:1px solid rgba(196,0,0,.14);background:rgba(196,0,0,.06);color:var(--primary);
  border-radius:999px;font-weight:900;box-shadow:0 10px 30px rgba(196,0,0,.08);
}
.hero-slogan:before{content:"";width:9px;height:9px;background:var(--primary);border-radius:50%;box-shadow:0 0 0 8px rgba(196,0,0,.10)}
.hero-image img,.section-visual img{
  border-radius:34px;box-shadow:var(--shadow-premium);
  transform:perspective(1200px) rotateY(-3deg);
  transition:transform .5s var(--transition-smooth), box-shadow .5s var(--transition-smooth);
}
.hero-image img:hover,.section-visual img:hover{transform:perspective(1200px) rotateY(0deg) translateY(-5px);box-shadow:0 28px 90px rgba(34,34,34,.16)}

.cta-button,.secondary-button,.form-submit{
  position:relative;overflow:hidden;border-radius:999px;transition:transform .28s var(--transition-smooth),box-shadow .28s var(--transition-smooth),background .28s var(--transition-smooth);
}
.cta-button:before,.form-submit:before{
  content:"";position:absolute;inset:0;transform:translateX(110%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);
  transition:transform .6s var(--transition-smooth);
}
.cta-button:hover:before,.form-submit:hover:before{transform:translateX(-110%)}
.cta-button:hover,.secondary-button:hover,.form-submit:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(196,0,0,.18)}

.service-card,.portfolio-card,.process-card,.contact-item,.page-entry-card,.faq-item{
  transition:transform .32s var(--transition-smooth), box-shadow .32s var(--transition-smooth), border-color .32s var(--transition-smooth);
}
.service-card:hover,.portfolio-card:hover,.process-card:hover,.contact-item:hover,.faq-item:hover{
  transform:translateY(-8px);box-shadow:var(--shadow-premium);border-color:rgba(196,0,0,.15);
}
.service-icon img{filter:drop-shadow(0 15px 24px rgba(34,34,34,.12));transition:transform .35s var(--transition-smooth)}
.service-card:hover .service-icon img{transform:scale(1.08) rotate(-3deg)}

.portfolio-image-wrap{position:relative;overflow:hidden;border-radius:24px 24px 0 0;background:#f2f2f2}
.portfolio-image-wrap:after{
  content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(34,34,34,.45));
  opacity:0;transition:opacity .35s var(--transition-smooth);
}
.portfolio-card:hover .portfolio-image-wrap:after{opacity:1}
.portfolio-card img{transition:transform .55s var(--transition-smooth)}
.portfolio-card:hover img{transform:scale(1.055)}
.portfolio-open{border:0;background:transparent;cursor:pointer;font-family:inherit;font-weight:900;color:var(--primary);padding:0}

.packages-section{padding:90px 0;background:linear-gradient(180deg,#fff,#fafafa)}
.packages-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem}
.package-card{
  background:#fff;border:1px solid rgba(34,34,34,.08);border-radius:30px;padding:2rem;box-shadow:0 14px 40px rgba(34,34,34,.07);
  position:relative;overflow:hidden;transition:.32s var(--transition-smooth);
}
.package-card:before{content:"";position:absolute;top:0;right:0;left:0;height:5px;background:var(--primary);opacity:.2}
.package-card.featured{background:#222;color:#fff;transform:translateY(-10px)}
.package-card.featured p,.package-card.featured li,.package-card.featured .package-price{color:#fff}
.package-card:hover{transform:translateY(-10px);box-shadow:0 28px 80px rgba(34,34,34,.14)}
.package-tag{display:inline-flex;padding:.45rem .8rem;border-radius:999px;background:rgba(196,0,0,.08);color:var(--primary);font-weight:900;margin-bottom:1rem}
.package-card.featured .package-tag{background:rgba(255,255,255,.12);color:#fff}
.package-price{display:block;font-size:1.4rem;color:#222;margin:0 0 1.25rem;font-weight:900}
.package-card ul{list-style:none;padding:0;margin:0 0 1.5rem}
.package-card li{display:flex;gap:.7rem;align-items:flex-start;margin:.75rem 0;color:#555;font-weight:700}
.package-card li i{color:var(--primary);margin-top:.25rem}
.package-card.featured li i{color:#fff}
.package-button{width:100%;justify-content:center;text-align:center}

.motion-showcase-section{padding:85px 0}
.motion-preview-card{
  min-height:360px;border-radius:36px;background:
  radial-gradient(circle at 22% 20%,rgba(196,0,0,.3),transparent 34%),
  linear-gradient(135deg,#222,#0f0f0f);
  color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 30px 90px rgba(34,34,34,.24);
  position:relative;overflow:hidden;
}
.play-pulse{width:88px;height:88px;border-radius:50%;background:#C40000;display:grid;place-items:center;font-size:2rem;box-shadow:0 0 0 0 rgba(196,0,0,.45);animation:pulseRing 1.8s infinite}
.motion-preview-card strong{font-size:2rem;margin-top:1.5rem;font-family:'Poppins','Cairo',sans-serif}
.motion-preview-card small{opacity:.75;letter-spacing:1px}
.motion-lines span{position:absolute;height:2px;background:rgba(255,255,255,.12);width:55%;right:12%;animation:floatLine 6s infinite linear}
.motion-lines span:nth-child(1){top:20%}.motion-lines span:nth-child(2){top:50%;animation-delay:1s}.motion-lines span:nth-child(3){top:78%;animation-delay:2s}
@keyframes pulseRing{70%{box-shadow:0 0 0 28px rgba(196,0,0,0)}100%{box-shadow:0 0 0 0 rgba(196,0,0,0)}}
@keyframes floatLine{0%{transform:translateX(25%);opacity:.08}50%{opacity:.25}100%{transform:translateX(-45%);opacity:.08}}

.trust-section{padding:90px 0;background:#fff}
.testimonials-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem;margin-bottom:2.5rem}
.testimonial-card{background:#fff;border:1px solid rgba(34,34,34,.08);border-radius:28px;padding:1.6rem;box-shadow:0 14px 38px rgba(34,34,34,.06)}
.testimonial-card i{color:var(--primary);font-size:1.8rem;margin-bottom:1rem}
.testimonial-card p{color:#555;font-weight:700}.testimonial-card strong{color:#222;font-weight:900}
.partners-marquee{overflow:hidden;border-radius:24px;border:1px solid rgba(34,34,34,.08);background:#f9f9f9;padding:1rem}
.marquee-track{display:flex;gap:1rem;width:max-content;animation:marqueeRtl 24s linear infinite}
.marquee-track span{white-space:nowrap;background:#fff;border-radius:999px;padding:.75rem 1.25rem;color:#222;font-weight:900;box-shadow:0 8px 25px rgba(34,34,34,.06)}
@keyframes marqueeRtl{from{transform:translateX(0)}to{transform:translateX(50%)}}

.form-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.contact-form select,.contact-form input,.contact-form textarea{
  width:100%;border:1px solid rgba(34,34,34,.12);border-radius:16px;padding:.95rem 1rem;background:#fff;font-family:inherit;
}
.contact-form select:focus,.contact-form input:focus,.contact-form textarea:focus{
  outline:none;border-color:var(--primary);box-shadow:0 0 0 4px rgba(196,0,0,.08)
}

.portfolio-modal{position:fixed;inset:0;z-index:10000;display:none;align-items:center;justify-content:center;padding:1rem}
.portfolio-modal.is-open{display:flex}
.portfolio-modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.68);backdrop-filter:blur(8px)}
.portfolio-modal-content{
  position:relative;z-index:1;width:min(980px,100%);max-height:92vh;overflow:auto;background:#fff;border-radius:32px;box-shadow:0 30px 100px rgba(0,0,0,.35);
  display:grid;grid-template-columns:1.05fr .95fr;direction:rtl;
}
.portfolio-modal-image{width:100%;height:100%;min-height:420px;object-fit:cover;background:#f2f2f2}
.portfolio-modal-body{padding:2rem}
.portfolio-modal-body h3{font-size:2rem;font-weight:900}
.portfolio-modal-close{position:absolute;top:1rem;left:1rem;z-index:2;width:42px;height:42px;border:0;border-radius:50%;background:#fff;color:#222;font-size:2rem;line-height:1;cursor:pointer;box-shadow:0 10px 25px rgba(0,0,0,.18)}
.case-story{display:grid;gap:.8rem;margin:1.4rem 0}
.case-story div{background:#f7f7f7;border-radius:18px;padding:1rem;border-right:3px solid var(--primary)}
.case-story strong{display:block;color:#222;margin-bottom:.25rem}.case-story span{color:#555;font-weight:700}

@media (prefers-reduced-motion: reduce){
  *,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

@media(max-width:1024px){
  .packages-grid,.testimonials-grid{grid-template-columns:1fr}
  .package-card.featured{transform:none}
  .portfolio-modal-content{grid-template-columns:1fr}
  .portfolio-modal-image{height:360px;min-height:0}
}

@media(max-width:768px){
  html{scroll-padding-top:78px}
  .container{padding-inline:1rem}
  .site-header{position:sticky}
  .header-content{padding:.75rem 0}
  .site-logo img,.custom-logo{max-height:42px}
  .brand-copy small{display:none}
  .main-navigation.active{
    top:72px;max-height:calc(100dvh - 72px);overflow:auto;
    border-radius:0 0 26px 26px;box-shadow:0 22px 50px rgba(34,34,34,.14)
  }
  .hero-section{padding:54px 0 36px}
  .hero-content,.split-section{grid-template-columns:1fr!important;gap:1.5rem;text-align:right}
  .hero-text h1{font-size:clamp(2.1rem,10vw,3.3rem);line-height:1.08}
  .hero-text p{font-size:1rem}
  .hero-actions{display:grid;grid-template-columns:1fr;gap:.75rem}
  .hero-mini-cards{grid-template-columns:1fr;gap:.5rem}
  .hero-image img,.section-visual img{border-radius:24px;transform:none}
  .stats-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}
  .section-header h2,.section-copy h2{font-size:clamp(1.8rem,7vw,2.45rem)}
  .services-grid,.portfolio-grid,.process-grid,.apps-cards{grid-template-columns:1fr!important}
  .portfolio-filters{display:flex;overflow:auto;gap:.5rem;padding-bottom:.5rem;scroll-snap-type:x mandatory}
  .filter-button{white-space:nowrap;scroll-snap-align:start}
  .portfolio-card img{height:auto;aspect-ratio:4/3;object-fit:cover}
  .packages-section,.trust-section,.motion-showcase-section{padding:56px 0}
  .form-row{grid-template-columns:1fr}
  .contact-content{grid-template-columns:1fr!important}
  .portfolio-modal{padding:.75rem;align-items:flex-end}
  .portfolio-modal-content{border-radius:26px 26px 0 0;max-height:90dvh}
  .portfolio-modal-image{height:260px}
  .portfolio-modal-body{padding:1.25rem}
  .floating-whatsapp{bottom:18px;left:18px;width:56px;height:56px}
}

@media(max-width:420px){
  .stats-grid{grid-template-columns:1fr}
  .hero-slogan{font-size:.9rem}
  .portfolio-modal-image{height:220px}
}



/* ========================================
   تعدد اللغات / LTR + Currency + Chatbot
   ======================================== */
html[dir="ltr"], body.ltr-layout{direction:ltr;text-align:left}
body.ltr-layout{font-family:'Poppins','Inter','Cairo',sans-serif}
body.ltr-layout .site-logo,
body.ltr-layout .header-content,
body.ltr-layout .hero-actions,
body.ltr-layout .feature-list span,
body.ltr-layout .contact-item,
body.ltr-layout .package-card li{direction:ltr}
body.ltr-layout .nav-menu a:after{right:auto;left:0}
body.ltr-layout .section-with-shapes:before{left:auto;right:-120px}
body.ltr-layout .section-with-shapes:after{right:auto;left:-80px}
body.ltr-layout .case-story div{border-right:0;border-left:3px solid var(--primary)}
body.ltr-layout .notification{right:auto;left:20px;border-right:0;border-left:4px solid var(--primary)}
body.ltr-layout .floating-whatsapp{right:28px;left:auto}
body.ltr-layout .portfolio-modal-content{direction:ltr}
body.ltr-layout .portfolio-modal-close{left:auto;right:1rem}
body.ltr-layout .menu-toggle{margin-left:auto;margin-right:0}

.header-actions{display:flex;align-items:center;gap:.75rem}
.language-switcher,.currency-switcher{
  display:inline-flex;align-items:center;gap:.4rem;background:#f5f5f5;border:1px solid rgba(34,34,34,.08);
  padding:.35rem;border-radius:999px;box-shadow:0 8px 20px rgba(34,34,34,.04)
}
.language-switcher a,.currency-button{
  min-width:42px;height:34px;display:grid;place-items:center;border-radius:999px;border:0;background:transparent;
  color:#555;font-weight:900;font-family:inherit;cursor:pointer;transition:.25s ease
}
.language-switcher a.active,.language-switcher a:hover,.currency-button.active,.currency-button:hover{
  background:#C40000;color:#fff;box-shadow:0 10px 20px rgba(196,0,0,.18)
}
.currency-switcher{margin:0 auto 1.5rem;widh:max-content;display:flex;justify-content:center}
.currency-switcher span{font-weight:900;color:#222;margin-inline:.35rem}
.currency-note{display:block;color:#777;font-weight:700;margin-top:-.75rem;margin-bottom:1rem}

.sanad-chatbot{position:fixed;bottom:96px;left:24px;z-index:9998}
body.ltr-layout .sanad-chatbot{left:auto;right:24px}
.chatbot-toggle{
  border:0;border-radius:999px;background:#222;color:#fff;padding:.85rem 1rem;display:flex;align-items:center;gap:.5rem;
  font-family:inherit;font-weight:900;box-shadow:0 18px 45px rgba(34,34,34,.22);cursor:pointer
}
.chatbot-toggle i{color:#fff}
.chatbot-panel{
  display:none;position:absolute;bottom:58px;left:0;width:min(360px,calc(100vw - 32px));background:#fff;border-radius:26px;
  box-shadow:0 26px 80px rgba(0,0,0,.22);overflow:hidden;border:1px solid rgba(34,34,34,.08)
}
body.ltr-layout .chatbot-panel{left:auto;right:0}
.chatbot-panel.is-open{display:block}
.chatbot-header{background:#222;color:#fff;padding:1rem;display:flex;align-items:center;justify-content:space-between}
.chatbot-close{border:0;background:transparent;color:#fff;font-size:1.6rem;cursor:pointer}
.chatbot-messages{padding:1rem;display:grid;gap:.65rem}
.chatbot-messages p{margin:0;color:#555;font-weight:700}
.chatbot-messages button{
  border:1px solid rgba(196,0,0,.12);background:rgba(196,0,0,.04);border-radius:16px;padding:.8rem;text-align:start;
  font-family:inherit;font-weight:800;color:#222;cursor:pointer
}
.chatbot-messages .bot-answer{background:#f7f7f7;border-radius:16px;padding:.85rem;color:#333;border-inline-start:3px solid #C40000}
.chatbot-whatsapp{margin:0 1rem 1rem;display:flex!important;justify-content:center}

@media(max-width:880px){
  .header-actions{width:100%;justify-content:space-between;gap:.5rem}
  .main-navigation.active .header-actions{margin-top:1rem}
  .language-switcher a{min-width:40px}
}
@media(max-width:768px){
  .sanad-chatbot{bottom:86px;left:16px}
  body.ltr-layout .sanad-chatbot{right:16px}
  .chatbot-toggle span{display:none}
  .chatbot-panel{width:calc(100vw - 28px)}
  .language-switcher{padding:.25rem}
}