/* ==========================================================================
   ALGOTEYA Traiteur — Main Theme (Global)
   File: assets/css/main.css
   Scope: Whole website (NOT order page components)
   ========================================================================== */

/* -----------------------------
   Root variables (Brand)
------------------------------ */
:root {
  /* Brand */
  --brand-navy: rgba(21, 27, 65, 0.986);
  --brand-navy-2: rgba(15, 21, 61, 0.986);
  --brand-gold: #C9A227;
  --brand-cream: #F7F4EE;
  --brand-charcoal: #111111;

  /* Template mapping */
  --background-color: var(--brand-navy);
  --surface-color: rgba(255, 255, 255, 0.06); /* بدل #1a1515 لأنه يخنق القراءة */
  --surface-color-2: rgba(255, 255, 255, 0.10);
  --border-color: rgba(255, 255, 255, 0.14);

  --heading-color: #ffffff;
  --default-color: rgba(255, 255, 255, 0.88);
  --muted-color: rgba(255, 255, 255, 0.68);

  --accent-color: var(--brand-gold);
  --contrast-color: #0c0909;

  /* Nav */
  --nav-color: #ffffff;
  --nav-hover-color: var(--brand-gold);
  --nav-mobile-background-color: rgba(10, 12, 22, 0.96);
  --nav-dropdown-background-color: rgba(10, 12, 22, 0.98);
  --nav-dropdown-color: #ffffff;
  --nav-dropdown-hover-color: var(--brand-gold);

  /* Fonts */
  --default-font: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --heading-font: "Playfair Display", serif;
  --nav-font: "Poppins", sans-serif;

  /* Effects */
  --shadow-soft: 0 10px 26px rgba(0,0,0,.18);
  --shadow: 0 16px 40px rgba(0,0,0,.28);

  scroll-behavior: smooth;
}

/* Arabic font auto */
html[lang="ar"] body { font-family: "Cairo", var(--default-font); }

/* -----------------------------
   General
------------------------------ */
body {
  color: var(--default-color);
  background-color: var(--background-color);
  font-family: var(--default-font);
}

a {
  color: var(--accent-color);
  text-decoration: none;
  transition: 0.2s ease;
}

a:hover {
  color: color-mix(in srgb, var(--accent-color), white 10%);
  text-decoration: none;
}

h1,h2,h3,h4,h5,h6 {
  color: var(--heading-color);
  font-family: var(--heading-font);
}

/* Muted helpers */
.text-muted { color: var(--muted-color) !important; }

/* -----------------------------
   Pulsating Play Button (Hero video)
------------------------------ */
.pulsating-play-btn{
  width:94px;height:94px;
  background: radial-gradient(var(--accent-color) 50%, color-mix(in srgb, var(--accent-color), transparent 75%) 52%);
  border-radius:50%;
  display:block;
  position:relative;
  overflow:hidden;
}
.pulsating-play-btn:before{
  content:"";
  position:absolute;
  width:120px;height:120px;
  animation:pulsate-play-btn 2s infinite;
  border-radius:50%;
  border:5px solid color-mix(in srgb, var(--accent-color), transparent 30%);
  top:-15%;left:-15%;
  background:transparent;
}
.pulsating-play-btn:after{
  content:"";
  position:absolute;
  left:50%;top:50%;
  transform:translate(-40%,-50%);
  width:0;height:0;
  border-top:10px solid transparent;
  border-bottom:10px solid transparent;
  border-left:15px solid #fff;
  z-index:100;
  transition:all .35s cubic-bezier(.55,.055,.675,.19);
}
.pulsating-play-btn:hover:before{ animation:none; }
.pulsating-play-btn:hover:after{
  border-left:15px solid var(--accent-color);
  transform:scale(20);
}
@keyframes pulsate-play-btn{
  0%{transform:scale(.6);opacity:1}
  100%{transform:scale(1);opacity:0}
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .pulsating-play-btn:before{animation:none}
  *{transition:none !important}
}

/* -----------------------------
   Header
------------------------------ */
.header{
  --background-color: var(--brand-navy-2);
  color: var(--default-color);
  transition: 0.35s ease;
  z-index: 997;
}

.header .topbar{
  height:40px;
  padding:0;
  font-size:14px;
  transition:0.35s ease;
  background: color-mix(in srgb, var(--brand-navy-2), black 10%);
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.header .topbar .contact-info i{
  font-style:normal;
  color: var(--accent-color);
 
}

.header .topbar .contact-info i a,
.header .topbar .contact-info i span{
  padding-left:5px;
  color: var(--default-color);
}

.header .topbar .contact-info i a{
  line-height:0;
  transition:0.2s ease;
}

.header .topbar .contact-info i a:hover{
  color: var(--accent-color);
  text-decoration: underline;
}

/* Languages */
.header .topbar .languages ul{
  display:flex;
  flex-wrap:wrap;
  list-style:none;
  padding:0;
  margin:0;
  gap:.5rem;
}
.header .topbar .languages ul a{ color: var(--default-color); }
.header .topbar .languages ul a:hover{ color: var(--accent-color); }
.header .topbar .languages ul li+li{ padding-left:0; }
.header .topbar .languages ul li+li::before{ content:none; }

/* Mobile topbar layout */
@media (max-width: 767.98px){
  .header .topbar .languages{ display:flex !important; }
  .header .topbar .container{
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  .header .topbar .contact-info{ width:100%; }
  .header .topbar .languages{
    width:100%;
    justify-content:flex-end;
    
  }
}

.header .branding{
  background-color: var(--background-color);
  min-height:60px;
  padding:10px 0;
  transition:0.25s ease;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.header .logo{ line-height:1; }
.header .logo img{ max-height:48px; margin-right:10px; }
.header .logo h1{
  font-size:30px;
  margin:0;
  font-weight:700;
  color: var(--heading-color);
  letter-spacing:.3px;
}

/* CTA button */
.header .btn-book-a-table,
.header .btn-book-a-table:focus{
  color: var(--default-color);
  border: 2px solid var(--accent-color);
  text-transform: uppercase;
  font-size:14px;
  padding:6px 24px;
  margin:0 5px 0 30px;
  border-radius:50px;
  transition:0.2s ease;
}
.header .btn-book-a-table:hover,
.header .btn-book-a-table:focus:hover{
  color: var(--contrast-color);
  background: var(--accent-color);
}

/* Scrolled state */
.scrolled .header .topbar{ height:0; visibility:hidden; overflow:hidden; }
.scrolled .header .branding{
  border-color: color-mix(in srgb, var(--accent-color), transparent 85%);
}

/* -----------------------------
   Navmenu
------------------------------ */
@media (min-width:1200px){
  .navmenu{ padding:0; }
  .navmenu ul{
    margin:0;
    padding:0;
    display:flex;
    list-style:none;
    align-items:center;
  }
  .navmenu li{ position:relative; }
  .navmenu a,.navmenu a:focus{
    color: var(--nav-color);
    padding:18px 15px;
    font-size:14px;
    font-family: var(--nav-font);
    font-weight:500;
    display:flex;
    align-items:center;
    white-space:nowrap;
    transition:0.2s ease;
  }
  .navmenu li:hover>a,
  .navmenu .active,
  .navmenu .active:focus{ color: var(--nav-hover-color); }

  .navmenu .dropdown ul{
    margin:0;
    padding:10px 0;
    background: var(--nav-dropdown-background-color);
    display:block;
    position:absolute;
    visibility:hidden;
    left:14px;
    top:130%;
    opacity:0;
    transition:0.2s ease;
    border-radius:10px;
    z-index:99;
    border:1px solid rgba(255,255,255,.10);
    box-shadow: var(--shadow-soft);
  }
  .navmenu .dropdown:hover>ul{ opacity:1; top:100%; visibility:visible; }
  .navmenu .dropdown ul a{
    padding:10px 20px;
    font-size:15px;
    color: var(--nav-dropdown-color);
  }
  .navmenu .dropdown ul a:hover{ color: var(--nav-dropdown-hover-color); }
}

@media (max-width:1199px){
  .mobile-nav-toggle{
    color: var(--nav-color);
    font-size:28px;
    line-height:0;
    margin-right:10px;
    cursor:pointer;
    transition:0.2s ease;
  }
  .navmenu{ padding:0; z-index:9997; }
  .navmenu ul{
    display:none;
    list-style:none;
    position:absolute;
    inset:60px 20px 20px 20px;
    padding:10px 0;
    margin:0;
    border-radius:14px;
    background: var(--nav-mobile-background-color);
    border:1px solid rgba(255,255,255,.12);
    overflow-y:auto;
    transition:0.2s ease;
    z-index:9998;
    box-shadow: var(--shadow);
  }
  .navmenu a,.navmenu a:focus{
    color: var(--nav-dropdown-color);
    padding:10px 20px;
    font-family: var(--nav-font);
    font-size:17px;
    font-weight:600;
    display:flex;
    align-items:center;
    justify-content:space-between;
  }
  .navmenu .dropdown ul{
    position:static;
    display:none;
    z-index:99;
    padding:10px 0;
    margin:10px 20px;
    background: var(--nav-dropdown-background-color);
    border:1px solid rgba(255,255,255,.12);
    box-shadow:none;
    transition:0.2s ease;
    border-radius:12px;
  }
  .navmenu .dropdown>.dropdown-active{ display:block; background-color: rgba(255,255,255,.04); }

  .mobile-nav-active{ overflow:hidden; }
  .mobile-nav-active .mobile-nav-toggle{
    color:#fff;
    position:absolute;
    font-size:32px;
    top:15px;
    right:15px;
    margin-right:0;
    z-index:9999;
  }
  .mobile-nav-active .navmenu{
    position:fixed;
    overflow:hidden;
    inset:0;
    background: rgba(0,0,0,.55);
    transition:0.2s ease;
  }
  .mobile-nav-active .navmenu>ul{ display:block; }
}

/* -----------------------------
   Sections (Global)
------------------------------ */
section,.section{
  color: var(--default-color);
  background-color: var(--background-color);
  padding:60px 0;
  scroll-margin-top:77px;
  overflow:clip;
}
@media (max-width:1199px){
  section,.section{ scroll-margin-top:60px; }
}

.section-title{
  padding-bottom:60px;
  position:relative;
}
.section-title h2{
  font-size:14px;
  font-weight:600;
  line-height:1px;
  margin:0;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
}
.section-title h2::after{
  content:"";
  width:120px;
  height:1px;
  display:inline-block;
  background: var(--accent-color);
  margin:4px 10px;
}
.section-title p{
  color: var(--accent-color);
  margin:0;
  font-size:36px;
  font-weight:700;
  font-family: var(--heading-font);
}

/* -----------------------------
   Hero
------------------------------ */
.hero{
  width:100%;
  min-height:80vh;
  position:relative;
  padding:80px 0;
  display:flex;
  align-items:center;
  justify-content:center;
  color: var(--default-color);
}
.hero img{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:1;
}
.hero:before{
  content:"";
  background: color-mix(in srgb, var(--background-color), transparent 50%);
  position:absolute;
  inset:0;
  z-index:2;
}
.hero .container{ position:relative; z-index:3; }
.hero h2{ margin:0; font-size:48px; font-weight:800; }
.hero h2 span{ color: var(--accent-color); }
.hero p{
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  margin:10px 0 0;
  font-size:24px;
}
.hero .cta-btn{
  color: var(--default-color);
  border:2px solid var(--accent-color);
  font-weight:600;
  font-size:14px;
  text-transform:uppercase;
  letter-spacing:1px;
  display:inline-block;
  padding:8px 30px;
  border-radius:50px;
  transition:0.2s ease;
  flex-shrink:0;
}
.hero .cta-btn:first-child{ margin-right:10px; }
.hero .cta-btn:hover{
  background: var(--accent-color);
  color: var(--contrast-color);
}
@media (max-width:768px){
  .hero h2{ font-size:32px; }
  .hero p{ font-size:18px; }
}
@media (max-width:480px){
  .hero .cta-btn{ font-size:12px; }
}

/* -----------------------------
   About
------------------------------ */
.about{
  background: url("../img/about-bg.jpg") center/100% auto no-repeat;
  position:relative;
  padding:80px 0;
}
.about:before{
  content:"";
  background: color-mix(in srgb, var(--background-color), transparent 12%);
  position:absolute;
  inset:0;
}
.about .container{ position:relative; }
.about .content h3{ font-size:1.75rem; font-weight:800; }
.about .content .fst-italic{
  color: color-mix(in srgb, var(--default-color), var(--contrast-color) 50%);
}
.about .content ul{ list-style:none; padding:0; }
.about .content ul li{ padding:10px 0 0; display:flex; }
.about .content ul i{
  color: var(--accent-color);
  margin-right:.5rem;
  line-height:1.2;
  font-size:1.25rem;
}
.about .content p:last-child{ margin-bottom:0; }

.about .about-img{
  width:100%;
  max-width:600px;
  height:350px;
  border: 6px solid color-mix(in srgb, var(--default-color), transparent 80%);
  border-radius: 12px;
  overflow:hidden;
  box-shadow: var(--shadow-soft);
}
.about .about-img img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
  transition: transform .25s ease;
}
.about .about-img:hover img{ transform: scale(1.05); }
@media (max-width:768px){
  .about .about-img{ height:220px; max-width:100%; }
}

/* -----------------------------
   Book A Table
------------------------------ */
.book-a-table .reservation-img{
  min-height:500px;
  background-size:cover;
  background-position:center;
}
.book-a-table .reservation-form-bg{
  background: color-mix(in srgb, #ffffff, transparent 92%);
}
.book-a-table .php-email{ padding:30px; }
@media (max-width:575px){ .book-a-table .php-email{ padding:20px; } }

.book-a-table .php-email input[type=text],
.book-a-table .php-email input[type=email],
.book-a-table .php-email input[type=number],
.book-a-table .php-email input[type=date],
.book-a-table .php-email input[type=time],
.book-a-table .php-email textarea{
  font-size:14px;
  padding:10px 15px;
  box-shadow:none;
  border-radius:10px;
  color: var(--default-color);
  background-color: rgba(0,0,0,.18);
  border:1px solid rgba(255,255,255,.16);
}
.book-a-table .php-email input:focus,
.book-a-table .php-email textarea:focus{
  border-color: var(--accent-color);
  outline: none;
}
.book-a-table .php-email ::placeholder{
  color: rgba(255,255,255,.55);
}
.book-a-table .php-email button[type=submit]{
  color: var(--default-color);
  border:2px solid var(--accent-color);
  background: transparent;
  padding:14px 60px;
  transition:0.2s ease;
  border-radius:50px;
  font-weight:800;
}
.book-a-table .php-email button[type=submit]:hover{
  background: var(--accent-color);
  color: var(--contrast-color);
}

/* -----------------------------
   Gallery
------------------------------ */
.gallery .gallery-item{
  overflow:hidden;
  border-right:3px solid var(--background-color);
  border-bottom:3px solid var(--background-color);
}
.gallery .gallery-item img{ transition: all .25s ease; }
.gallery .gallery-item:hover img{ transform: scale(1.08); }

/* -----------------------------
   Contact
------------------------------ */
.contact{
  background-color: color-mix(in srgb, var(--background-color) 90%, white 5%);
  border-bottom:1px solid color-mix(in srgb, var(--accent-color), transparent 90%);
}
.contact .info-item+.info-item{ margin-top:40px; }
.contact .info-item i{
  color: var(--contrast-color);
  background: var(--accent-color);
  font-size:20px;
  width:44px;height:44px;
  display:flex;
  justify-content:center;
  align-items:center;
  border-radius:10px;
  transition:0.2s ease;
  margin-right:15px;
}
.contact .info-item h3{ font-size:18px; font-weight:800; margin-bottom:5px; }
.contact .info-item p{ margin-bottom:0; font-size:14px; }

.contact .php-email input[type=text],
.contact .php-email input[type=email],
.contact .php-email textarea{
  font-size:14px;
  padding:10px 15px;
  box-shadow:none;
  border-radius:10px;
  color: var(--default-color);
  background-color: rgba(0,0,0,.18);
  border:1px solid rgba(255,255,255,.16);
}
.contact .php-email input:focus,
.contact .php-email textarea:focus{
  border-color: var(--accent-color);
  outline:none;
}
.contact .php-email ::placeholder{ color: rgba(255,255,255,.55); }
.contact .php-email button[type=submit]{
  color: var(--default-color);
  background:none;
  border:2px solid var(--accent-color);
  padding:10px 36px;
  transition:0.2s ease;
  border-radius:50px;
  font-weight:800;
}
.contact .php-email button[type=submit]:hover{
  background: var(--accent-color);
  color: var(--contrast-color);
}

/* -----------------------------
   Footer
------------------------------ */
.footer{
  color: var(--default-color);
  background-color: var(--brand-navy-2);
  font-size:14px;
  padding-bottom:50px;
  position:relative;
}
.footer .footer-top{
  padding-top:50px;
  border-top:1px solid rgba(255,255,255,.10);
}
.footer .social-links a{
  display:flex;
  align-items:center;
  justify-content:center;
  width:40px;height:40px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.18);
  font-size:16px;
  color: rgba(255,255,255,.75);
  margin-right:10px;
  transition:0.2s ease;
}
.footer .social-links a:hover{
  color: var(--accent-color);
  border-color: var(--accent-color);
}
.footer .footer-links ul{ list-style:none; padding:0; margin:0; }
.footer .footer-links ul li{ padding:10px 0; display:flex; align-items:center; }
.footer .footer-links ul a{
  color: rgba(255,255,255,.72);
  display:inline-block;
  line-height:1;
}
.footer .footer-links ul a:hover{ color: var(--accent-color); }

.footer .copyright{
  padding-top:25px;
  padding-bottom:25px;
  border-top:1px solid rgba(255,255,255,.10);
}
.footer .credits{ margin-top:6px; font-size:13px; color: rgba(255,255,255,.65); }

/* -----------------------------
   Preloader
------------------------------ */
#preloader{
  position:fixed;
  inset:0;
  z-index:999999;
  overflow:hidden;
  background: var(--background-color);
  transition: all .6s ease-out;
}
#preloader:before{
  content:"";
  position:fixed;
  top:calc(50% - 30px);
  left:calc(50% - 30px);
  border:6px solid #ffffff;
  border-color: var(--accent-color) transparent var(--accent-color) transparent;
  border-radius:50%;
  width:60px;height:60px;
  animation: animate-preloader 1.5s linear infinite;
}
@keyframes animate-preloader{
  0%{transform:rotate(0)}
  100%{transform:rotate(360deg)}
}

/* -----------------------------
   Scroll Top
------------------------------ */
.scroll-top{
  position:fixed;
  visibility:hidden;
  opacity:0;
  right:15px;
  bottom:15px;
  z-index:99999;
  background: var(--accent-color);
  width:40px;height:40px;
  border-radius:10px;
  transition: all .2s ease;
}
.scroll-top i{
  font-size:24px;
  color: var(--contrast-color);
  line-height:0;
}
.scroll-top:hover{
  background: color-mix(in srgb, var(--accent-color), white 10%);
  color: var(--contrast-color);
}
.scroll-top.active{ visibility:visible; opacity:1; }

/* -----------------------------
   RTL helpers (Global)
------------------------------ */
html[dir="rtl"] body { text-align:right; }
html[dir="rtl"] .text-start { text-align:right !important; }
html[dir="rtl"] .text-end { text-align:left !important; }
html[dir="rtl"] .navmenu a { justify-content:flex-start; }

html[dir="rtl"] .about .content ul i { margin-left:.5rem; margin-right:0; }
html[dir="rtl"] .contact .info-item i { margin-left:15px; margin-right:0; }
html[dir="rtl"] .hero .cta-btn:first-child { margin-left:10px; margin-right:0; }
/* =========================
   Global image safety (keep)
   ========================= */
img{
  max-width: 100%;
  height: auto;
  display: block;
}

/* =========================
   MENU cards images (keep)
   ========================= */
.food-img-wrap{
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 14px 14px 0 0;
}
.food-img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* =========================
   GALLERY images (adjust existing block)
   ========================= */
.gallery .gallery-item{
  overflow:hidden;
  border-right:3px solid var(--background-color);
  border-bottom:3px solid var(--background-color);
  border-radius:12px; /* إضافة مفيدة */
}

.gallery .gallery-item img{
  width: 100%;
  height: 260px;         /* توحيد ارتفاع صور الغاليري */
  object-fit: cover;
  object-position: center;
  transition: transform .25s ease; /* بدل all */
}

@media (max-width: 992px){
  .gallery .gallery-item img{ height: 220px; }
}

.gallery .gallery-item:hover img{
  transform: scale(1.08); /* خليها نفس ستايلك الأصلي */
}
/* =========================
   Food Section Typography Fix
   ========================= */

.food-section .food-name{
  color: #ffffff !important;
  font-weight: 700;
}

.food-section .food-price{
  color: var(--accent-color); /* خليه ذهبي ليظل متناسق */
}

.food-section .food-desc{
  color: var(--muted-color);
}
/* =========================
   Food filters (categories)
   ========================= */

.food-chip{
  color: #ffffff;              /* النص أبيض */
  border: 1px solid rgba(255,255,255,.4);
  background: transparent;
  font-weight: 500;
  padding: 6px 16px;
  border-radius: 30px;
}

.food-chip:hover{
  background: rgba(255,255,255,.08);
  color: #ffffff;
}

.food-chip.active{
  background: var(--accent-color);
  border-color: var(--accent-color);
  color: var(--contrast-color);
}
/* ===== Mobile form visibility fix (Reservation + Contact) ===== */

/* النص داخل الحقول */
.php-email-form input,
.php-email-form textarea,
.book-a-table .php-email input,
.book-a-table .php-email textarea,
.contact .php-email input,
.contact .php-email textarea{
  color: rgba(255,255,255,.92) !important;
  caret-color: rgba(255,255,255,.92);
}

/* Placeholder */
.php-email-form input::placeholder,
.php-email-form textarea::placeholder,
.book-a-table .php-email input::placeholder,
.book-a-table .php-email textarea::placeholder,
.contact .php-email input::placeholder,
.contact .php-email textarea::placeholder{
  color: rgba(255,255,255,.65) !important;
  opacity: 1; /* مهم للموبايل */
}

/* Placeholder للمتصفحات */
.php-email-form input::-webkit-input-placeholder,
.php-email-form textarea::-webkit-input-placeholder,
.book-a-table .php-email input::-webkit-input-placeholder,
.book-a-table .php-email textarea::-webkit-input-placeholder,
.contact .php-email input::-webkit-input-placeholder,
.contact .php-email textarea::-webkit-input-placeholder{
  color: rgba(255,255,255,.65) !important;
}

.php-email-form input:-ms-input-placeholder,
.php-email-form textarea:-ms-input-placeholder{
  color: rgba(255,255,255,.65) !important;
}

/* خلفية الحقل + حدود أوضح */
.book-a-table .php-email input,
.book-a-table .php-email textarea,
.contact .php-email input,
.contact .php-email textarea{
  background-color: rgba(0,0,0,.18) !important;
  border-color: rgba(255,255,255,.22) !important;
}

.book-a-table .php-email input:focus,
.book-a-table .php-email textarea:focus,
.contact .php-email input:focus,
.contact .php-email textarea:focus{
  border-color: var(--accent-color) !important;
  box-shadow: 0 0 0 .2rem rgba(201,162,39,.22) !important;
}

/* النص الصغير "Format FR..." واضح */
.book-a-table .form-text,
.book-a-table small.form-text,
.contact .form-text,
.contact small.form-text{
  color: rgba(255,255,255,.75) !important;
}
/* ===== Topbar mobile fix (phone cut) ===== */
.header .topbar{
  height: auto !important;         /* بدل 40px */
  min-height: 40px;
  padding: 6px 0 !important;
  overflow: visible !important;    /* منع القص */
}

.header .topbar .contact-info{
  display: flex;
  flex-wrap: wrap;                /* إذا ضاق السطر ينزل */
  gap: 10px;
  align-items: center;
  line-height: 1.2;
}

.header .topbar .contact-info i,
.header .topbar .contact-info i a,
.header .topbar .contact-info i span{
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* تصغير بسيط للموبايل حتى ما يختنق */
@media (max-width: 575.98px){
  .header .topbar{
    font-size: 13px;
  }
  .header .topbar .contact-info i{
    font-size: 13px;
  }
}