*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:Tahoma,Arial,sans-serif;background:#fff;color:#222;direction:rtl}

/* Header */
.header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 16px 8px;position:relative}
.logo{max-height:70px;width:auto;flex-shrink:0}
.titles{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1}
.title{margin:0;font-size:26px;font-weight:800;line-height:1.2;text-align:center}
.slogan{margin:0;color:#555;font-size:14px;text-align:center}
.lang-toggle{display:flex;gap:6px}
.lang-toggle button{border:1px solid #ddd;background:#f8f8f8;padding:6px 10px;border-radius:10px;cursor:pointer;font-weight:700}
.lang-toggle button.active{background:#111;color:#fff;border-color:#111}

/* Mobile compact lang toggle */
@media (max-width:560px){
  .title{font-size:22px}
  .slogan{font-size:13px}
  .logo{max-height:58px}
  .lang-toggle{position:absolute;top:8px;left:10px;gap:4px}
  .lang-toggle button{padding:3px 8px;font-size:12px;border-radius:8px;box-shadow:0 2px 6px rgba(0,0,0,.08)}
}

/* TOC chips */
.toc{display:flex;gap:8px;padding:10px 16px;border-top:1px solid #eee;border-bottom:1px solid #eee;background:#fafafa;
     overflow-x:auto;white-space:nowrap;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.toc-link{display:inline-block;padding:8px 12px;border:1px solid #e5e5e5;border-radius:999px;text-decoration:none;color:#333;
          font-weight:700;font-size:13px;background:#fff;scroll-snap-align:start}
.toc::-webkit-scrollbar{height:6px}
.toc::-webkit-scrollbar-thumb{background:#ddd;border-radius:999px}

/* Main */
.content{padding:16px}
.section{margin:18px 0 26px;scroll-margin-top:90px}
.cards-container{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:14px}

/* Frame + badge */
.frame{position:relative;padding:14px;border-radius:18px;background:linear-gradient(180deg,#ffffff 65%, #fafafa 100%);
       box-shadow:0 4px 18px rgba(0,0,0,.05);border:1px solid #eee}
.section-header{display:flex;align-items:center;justify-content:flex-start;margin-bottom:12px}
.section-badge{display:inline-block;margin:0;
  background:linear-gradient(135deg,var(--frame-color), #111);
  color:#fff;padding:10px 16px;border-radius:999px;
  font-size:16px;font-weight:900;letter-spacing:.2px;
  box-shadow:0 8px 20px rgba(0,0,0,.12);position:relative}
.section-badge::after{content:"";position:absolute;inset:-3px;z-index:-1;border-radius:999px;
  background:linear-gradient(135deg,var(--frame-color),transparent);filter:blur(8px);opacity:.35}

/* Cards */
.card{border:1px solid #eee;border-radius:14px;background:#fff;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,.05);display:flex;flex-direction:column}
.card-image{width:100%;aspect-ratio:4/3;background:#fff;display:flex;align-items:center;justify-content:center}
.card-image img{width:100%;height:100%;object-fit:contain;image-rendering:auto}
.card-image .no-image{font-size:13px;color:#888;border:1px dashed #ddd;border-radius:10px;padding:6px 10px}
.card-details{padding:10px}
.card-title{margin:0 0 6px;font-size:15px;font-weight:800;text-align:center}
.meta-row{display:flex;align-items:center;justify-content:space-between;font-size:13px;color:#444}
.card-price{font-weight:800}

/* Footer */
.footer{padding:14px 16px;border-top:1px solid #eee;color:#555;font-size:13px;margin-top:8px}


/* خلفية بلون تركوازي */
body {
  background-color: #e6f4f1; /* تركوازي فاتح */
}

/* زر الرجوع لأعلى */
#backToTop {
  display: none;
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 99;
  border: none;
  outline: none;
  background-color: #0ea5e9;
  color: white;
  cursor: pointer;
  padding: 12px 16px;
  border-radius: 50%;
  font-size: 20px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
  transition: background-color 0.3s ease, transform 0.2s ease;
}
#backToTop:hover {
  background-color: #0284c7;
  transform: translateY(-3px);
}

/* فوتر */
.footer-inner {
  padding: 1.5rem;
  text-align: center;
}
.footer-social a {
  margin: 0 8px;
  text-decoration: none;
  color: #0f172a;
  font-weight: 700;
}
.footer-copy {
  margin-top: 0.8rem;
  color: #475569;
  font-size: 0.95rem;
}
.footer-copy .by a {
  color: #0ea5e9;
  text-decoration: none;
  font-weight: 700;
}


/* خلفية كريمية ناعمة */
body{ background-color:#fdf8f3 !important; }

/* إخفاء صورة البطاقة عندما لا تتوفر */
.card.no-image .card-image,
.card .card-image .no-image:empty { display:none; }
.card .card-image .no-image{ font-size:13px;color:#888;border:1px dashed #ddd;border-radius:10px;padding:6px 10px; }

/* تحسين فوتر وروابط SVG */
.footer-inner{ text-align:center; }
.footer-social a{ display:inline-flex; align-items:center; gap:.4rem; padding:.4rem .6rem; border-radius:999px; text-decoration:none; color:#0f172a; font-weight:700; }
.footer-social a svg{ width:22px; height:22px; }
.footer-copy .by{ margin-right:.4rem; }
.agent-avatar{ display:inline-flex; width:22px; height:22px; vertical-align:middle; margin:0 .25rem; }
.agent-avatar svg{ width:22px; height:22px; display:block; border-radius:50%; }
.footer-copy .by a{ color:#0ea5e9; font-weight:800; text-decoration:none; }


.support-avatar{
  display:inline-block;
  width:26px;
  height:26px;
  border-radius:50%;
  vertical-align:middle;
  margin:0 4px;
}


.footer-copy .by{
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.footer-copy .by img.support-avatar{
  width:28px;
  height:28px;
  border-radius:50%;
  object-fit:cover;
  display:inline-block;
}
.footer-copy .by a{
  color:#0ea5e9;
  font-weight:800;
  text-decoration:none;
  font-size:0.95rem;
}


.footer-copy .by a:hover{
  color:#0284c7;
  transform:scale(1.05);
}
.footer-copy .by{
  transition:all .2s ease;
}


/* Tiny language chips A/E */
.lang-chips{ display:flex; gap:6px; margin-inline-start:auto; }
.lang-chip{ width:26px; height:26px; border-radius:999px; border:1px solid #e2e8f0; background:#fff; font-weight:800; font-size:.85rem; line-height:1; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; }
.lang-chip.active{ box-shadow:0 0 0 3px rgba(14,165,233,.18); border-color:#0ea5e9; }

/* Smaller minimalist footer icons */
.footer-social .ico{ width:34px; height:34px; display:inline-flex; align-items:center; justify-content:center; border:1px solid #e2e8f0; border-radius:999px; margin:0 4px; transition:transform .2s ease, box-shadow .2s ease, opacity .2s ease; color:#0f172a; }
.footer-social .ico svg{ width:18px; height:18px; display:block; }
.footer-social .ico:hover{ transform:translateY(-2px); box-shadow:0 6px 18px rgba(0,0,0,.08); opacity:.9; }
.footer-social .i-wa{ color:#16a34a; border-color:#d1fae5; background:#f0fdf4; }
.footer-social .i-sn{ color:#f59e0b; border-color:#ffedd5; background:#fff7ed; }
.footer-social .i-tt{ color:#ef4444; border-color:#ffe4e6; background:#fff1f2; }

/* Small Saudi National Day 95 badge (glowing) */
.national95-badge{
  position:fixed; top:8px; left:8px; z-index:60;
  width:34px; height:34px; border-radius:8px;
  background:#064e3b; color:#fff; font-weight:900;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 0 2px rgba(255,255,255,.8), 0 0 18px rgba(6,78,59,.45);
  opacity:.95;
  font-size:14px;
}
@media (max-width:480px){
  .national95-badge{ width:30px; height:30px; font-size:13px; }
}


/* Header adjustments with Vision 2030 */
header{
  position:sticky; top:0; z-index:100;
  background:#fff; border-bottom:1px solid #eee;
}
.header-extra{
  margin-inline-start:auto;
  display:flex; align-items:center; gap:10px;
}
.lang-chip{
  width:32px; height:26px;
  border-radius:6px;
  border:1px solid #e2e8f0;
  background:#fff;
  font-weight:700; font-size:.8rem;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
}
.lang-chip.active{ background:#0ea5e9; color:#fff; border-color:#0ea5e9; }
.vision-logo{
  height:38px; width:auto;
}
@media(max-width:600px){
  .vision-logo{ height:28px; }
  .lang-chip{ width:28px; height:24px; font-size:.7rem; }
}


/* Sticky header so both logos appear together */
header{ position: sticky; top: 0; z-index: 50; backdrop-filter: saturate(130%) blur(6px); background: rgba(255,255,255,0.7); box-shadow: 0 8px 20px rgba(0,0,0,.06); }

/* Lang chips AR/EN */
.lang-chips{ display:flex; gap:6px; margin-inline-start:auto; }
.lang-chip{ width:26px; height:26px; border-radius:999px; border:1px solid #e2e8f0; background:#fff; font-weight:800; font-size:.8rem; line-height:1; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; }
.lang-chip.active{ box-shadow:0 0 0 3px rgba(14,165,233,.18); border-color:#0ea5e9; }

/* Vision 2030 logo (inside header, left) */
.vision2030-wrap{ margin-inline-start:.6rem; display:flex; align-items:center; }
.vision2030-logo{ width:64px; height:auto; object-fit:contain; filter: drop-shadow(0 2px 6px rgba(0,0,0,.08)); }
@media (max-width:480px){ .vision2030-logo{ width:54px; } }

/* Make sure previous 95 badge is hidden if any leftover */
.national95-badge{ display:none !important; }


/* enlarge Vision 2030 logo slightly */
.vision2030-logo{ width:66px; }
@media (max-width:480px){ .vision2030-logo{ width:56px; } }


/* Enlarge Vision 2030 logo slightly */
.vision2030-logo{ width:72px !important; }
@media (max-width:480px){ .vision2030-logo{ width:60px !important; } }


/* Slightly larger Vision 2030 logo */
.vision2030-logo.larger-vision2030{ width:72px; }
@media (max-width:480px){ .vision2030-logo.larger-vision2030{ width:60px; } }


/* Vision 2030 at far-left (header is RTL; last child sits left) */
.vision2030-wrap{ display:flex; align-items:center; margin-inline-start:.6rem; }
.vision2030-logo{ width:64px; height:auto; object-fit:contain; filter: drop-shadow(0 2px 6px rgba(0,0,0,.08)); }
@media (max-width:480px){ .vision2030-logo{ width:54px; } }

/* Allergen Marquee */
.allergen-marquee {
  width: 100%;
  background: linear-gradient(135deg, #fef3c7 0%, #fef08a 100%);
  border-top: 2px solid #f59e0b;
  border-bottom: 2px solid #f59e0b;
  padding: 8px 0;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,.08);
}

.marquee-content {
  display: flex;
  animation: scroll-left 20s linear infinite;
  white-space: nowrap;
  padding: 0 20px;
}

.allergen-image {
  height: 60px;
  width: auto;
  object-fit: contain;
  display: block;
}

@keyframes scroll-left {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}

@media (max-width:480px) {
  .allergen-marquee {
    padding: 6px 0;
  }
  .allergen-image {
    height: 50px;
  }
}

/* Allergy Banner Styles */
.allergy-banner {
  width: 100%;
  background: linear-gradient(135deg, #fff5e6 0%, #ffe8cc 100%);
  border-top: 3px solid #ff9800;
  border-bottom: 3px solid #ff9800;
  padding: 12px 0;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(255, 152, 0, 0.15);
}

.allergy-label {
  text-align: center;
  font-weight: 900;
  color: #d84315;
  font-size: 14px;
  margin-bottom: 8px;
  letter-spacing: 0.5px;
}

.allergy-scroll-wrapper {
  overflow: hidden;
  width: 100%;
}

.allergy-scroll-container {
  display: flex;
  gap: 20px;
  animation: scroll-allergy 30s linear infinite;
  padding: 0 20px;
  white-space: nowrap;
}

.allergy-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  min-width: fit-content;
}

.allergy-circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border: 2px solid #ff9800;
}

.allergy-icon {
  font-size: 28px;
  display: block;
}

.allergy-name {
  font-size: 12px;
  font-weight: 700;
  color: #333;
  text-align: center;
  max-width: 60px;
}

@keyframes scroll-allergy {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}

@media (max-width: 768px) {
  .allergy-banner {
    padding: 10px 0;
  }
  
  .allergy-label {
    font-size: 12px;
    margin-bottom: 6px;
  }
  
  .allergy-circle {
    width: 45px;
    height: 45px;
  }
  
  .allergy-icon {
    font-size: 24px;
  }
  
  .allergy-name {
    font-size: 11px;
  }
  
  .allergy-scroll-container {
    gap: 15px;
  }
}

@media (max-width: 480px) {
  .allergy-banner {
    padding: 8px 0;
  }
  
  .allergy-label {
    font-size: 11px;
    margin-bottom: 4px;
  }
  
  .allergy-circle {
    width: 40px;
    height: 40px;
  }
  
  .allergy-icon {
    font-size: 20px;
  }
  
  .allergy-name {
    font-size: 10px;
  }
  
  .allergy-scroll-container {
    gap: 12px;
    padding: 0 10px;
  }
}