/* ===================================================
   MOBILE ALIGNMENT OVERHAUL
   Comprehensive fixes for phone & tablet layout
=================================================== */

/* ===== SECTION SUBTITLE TAG (About Us) ===== */
.section-subtitle-tag {
  font-size: 0.78rem;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
  margin-top: 0.35rem;
  margin-bottom: 0.5rem;
  opacity: 0.8;
}

/* ===================================================
   GLOBAL MOBILE BASE
=================================================== */
@media (max-width: 768px) {

  /* ---- Body / Page ---- */
  body { overflow-x: hidden; }

  .section { padding: 3.5rem 0; }
  .container { padding: 0 1.2rem; }

  /* ---- Section Headers ---- */
  .section-header { margin-bottom: 2.5rem; }
  .section-title  { font-size: clamp(1.75rem, 6.5vw, 2.4rem); line-height: 1.25; }
  .section-label  { font-size: 0.7rem; letter-spacing: 3px; }

  /* ---- Promo Ticker + Navbar Stack Fix ---- */
  .promo-ticker { height: 28px; }
  body          { padding-top: 28px; }
  .navbar       { top: 28px; }
  .loader       { top: 28px; }

  /* ---- Navbar ---- */
  .nav-container { padding: 0 1.2rem; }
  .logo-main     { font-size: 0.92rem; }
  .logo-arabic   { font-size: 1.4rem; }
  .nav-live-badge { display: none; } /* hide on small – saves space */

  /* ---- HERO ---- */
  .hero { min-height: 100svh; }
  .hero-content { padding: 0 1.2rem; max-width: 100%; }

  .hero-badge {
    font-size: 0.65rem;
    letter-spacing: 1px;
    padding: 0.4rem 1rem;
    text-align: center;
  }

  .hero-arabic { font-size: 1.4rem; margin-bottom: 0.25rem; }

  .hero-title {
    font-size: clamp(2rem, 9vw, 3.2rem);
    letter-spacing: 1px;
    word-break: break-word;
  }

  .hero-subtitle { font-size: 0.95rem; letter-spacing: 1px; }

  .hero-tags {
    gap: 0.5rem;
    justify-content: center;
    margin-bottom: 1.75rem;
  }
  .hero-tags span { font-size: 0.72rem; padding: 0.3rem 0.75rem; }

  /* Hero buttons — 2 on top row, call full-width below */
  .hero-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
  }
  .hero-buttons .btn { padding: 0.75rem 0.5rem; font-size: 0.78rem; justify-content: center; }
  .btn-call-hero   { grid-column: 1 / -1; }   /* Call Now spans full width */

  .hero-scroll-indicator { display: none; }

  /* ---- ABOUT ---- */
  .about-grid { grid-template-columns: 1fr; gap: 2rem; }
  .about-image-wrap { max-width: 100%; }
  .about-img-frame  { aspect-ratio: 16/9; }
  .about-img-badge  { width: 65px; height: 65px; font-size: 0.65rem; }
  .about-stats      { grid-template-columns: repeat(3, 1fr); gap: 0.6rem; }
  .stat-card        { padding: 0.9rem 0.4rem; }
  .stat-card h3     { font-size: 0.85rem; }
  .about-heading    { font-size: 1.4rem; }
  .about-hours      { font-size: 0.78rem; flex-wrap: wrap; text-align: center; justify-content: center; }

  /* ---- MENU ---- */
  .menu-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    padding-bottom: 0.5rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 0.5rem;
    padding: 0 1.2rem 0.5rem;
    margin-left: -1.2rem;
    margin-right: -1.2rem;
  }
  .menu-tabs::-webkit-scrollbar { display: none; }
  .menu-tab { flex-shrink: 0; font-size: 0.78rem; padding: 0.5rem 1rem; }

  .menu-grid { grid-template-columns: 1fr; gap: 1rem; }
  .menu-card-img { height: 160px; }

  /* ---- SPECIALS / FLIP CARDS ---- */
  .specials-grid { grid-template-columns: 1fr; max-width: 400px; margin: 0 auto; gap: 1.25rem; }
  .flip-card { height: 300px; }
  .flip-front-title { font-size: 1.15rem; }
  .flip-back { padding: 1.5rem 1.25rem; }
  .flip-back h3 { font-size: 1.1rem; }
  .flip-back p  { font-size: 0.82rem; margin-bottom: 1rem; }
  .flip-back-arabic { font-size: 2rem; }
  .flip-back-spices { font-size: 0.68rem; bottom: 0.75rem; }

  /* ---- GALLERY ---- */
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 150px;
    gap: 0.5rem;
  }
  .gallery-item.tall { grid-row: span 1; }
  .gallery-item.wide { grid-column: span 1; }

  /* ---- REVIEWS ---- */
  .rating-hero {
    flex-direction: column;
    padding: 1.5rem 1.25rem;
    gap: 1rem;
    text-align: center;
  }
  .rating-number { font-size: 3.5rem; }
  .reviews-grid  { grid-template-columns: 1fr; }
  .review-card   { padding: 1.25rem; }
  .review-text   { font-size: 0.85rem; }

  /* ---- CTA ---- */
  .cta-content h2 { font-size: 1.8rem; }
  .cta-content p  { font-size: 0.92rem; }
  .cta-services   { gap: 1.25rem; }
  .cta-service i  { font-size: 1.5rem; }
  .cta-service span { font-size: 0.72rem; letter-spacing: 1px; }
  .cta-buttons    { gap: 0.75rem; flex-direction: column; align-items: center; }
  .cta-buttons .btn-lg { width: 100%; max-width: 320px; justify-content: center; }
  .cta-3d-orb     { opacity: 0.06; width: 200px; height: 200px; }

  /* ---- CONTACT ---- */
  .contact-grid   { grid-template-columns: 1fr; gap: 2rem; }
  .contact-card   { padding: 1rem 1.1rem; }
  .contact-map    { min-height: 280px; }
  .map-frame      { min-height: 280px; }
  .contact-actions { flex-direction: column; gap: 0.6rem; }
  .contact-actions .btn { width: 100%; justify-content: center; }

  /* ---- FOOTER ---- */
  .footer { padding: 3rem 0 0; }
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
    text-align: center;
  }
  .footer-social { justify-content: center; }
  .footer-links li { margin-bottom: 0.4rem; }
  .footer-contact-item { justify-content: center; text-align: left; }
  .footer-bottom { flex-direction: column; text-align: center; gap: 0.5rem; }
  .footer-bottom p { font-size: 0.72rem; }

  /* ---- BACK TO TOP ---- */
  .back-to-top { right: 1rem; bottom: 5.5rem; width: 40px; height: 40px; font-size: 0.85rem; }

  /* ---- FAB GROUP ---- */
  .fab-group { left: 1rem; bottom: 1rem; gap: 0.5rem; }
  .fab       { width: 46px; height: 46px; font-size: 1.05rem; }
  .fab-label { display: none; } /* always icon-only on mobile */
  .fab:hover { border-radius: 50%; width: 46px; padding: 0; }

  /* ---- TOAST ---- */
  .toast-container { right: 0.75rem; left: 0.75rem; top: 70px; }
  .toast { min-width: unset; width: 100%; font-size: 0.82rem; }

  /* ---- THREE.JS Canvas ---- */
  .three-canvas { opacity: 0.35; }
}

/* ===================================================
   SMALL PHONES (max 480px)
=================================================== */
@media (max-width: 480px) {
  .container     { padding: 0 1rem; }
  .section       { padding: 3rem 0; }
  .section-title { font-size: clamp(1.55rem, 7vw, 2rem); }

  /* Hero */
  .hero-title    { font-size: clamp(1.9rem, 9.5vw, 2.5rem); }
  .hero-buttons  { max-width: 100%; }
  .hero-tags     { gap: 0.4rem; }
  .hero-tags span { font-size: 0.68rem; }

  /* About stats — 1 col on very small */
  .about-stats   { grid-template-columns: 1fr 1fr; }
  .about-img-frame { aspect-ratio: 4/3; }

  /* Menu tabs scrollable */
  .menu-tab      { font-size: 0.74rem; padding: 0.4rem 0.85rem; }

  /* Flip cards */
  .flip-card     { height: 270px; }

  /* Gallery — single col */
  .gallery-grid  { grid-template-columns: 1fr; grid-auto-rows: 190px; gap: 0.4rem; }
  .gallery-item.wide { grid-column: span 1; }

  /* Reviews */
  .rating-number { font-size: 3rem; }

  /* CTA */
  .cta-arabic    { font-size: 1.4rem; }
  .cta-content h2 { font-size: 1.55rem; }

  /* Footer */
  .footer-grid   { gap: 1.5rem; }
  .footer-contact-item { justify-content: flex-start; }

  /* Side nav dots — hide completely */
  .side-nav { display: none; }

  /* Promo ticker text smaller */
  .ticker-track span { font-size: 0.6rem; padding: 0 1.2rem; letter-spacing: 1px; }
}

/* ===================================================
   LARGE TABLETS (768px – 1024px)
=================================================== */
@media (min-width: 769px) and (max-width: 1024px) {
  .hero-buttons { flex-wrap: wrap; justify-content: center; gap: 0.75rem; }
  .hero-title   { font-size: clamp(2.8rem, 6vw, 4.5rem); }

  .about-grid   { grid-template-columns: 1fr; max-width: 700px; margin: 0 auto; }
  .about-stats  { grid-template-columns: repeat(3, 1fr); }

  .menu-grid    { grid-template-columns: repeat(2, 1fr); }
  .specials-grid{ grid-template-columns: repeat(2, 1fr); max-width: 100%; }
  .flip-card    { height: 340px; }

  .gallery-grid { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 190px; }

  .reviews-grid { grid-template-columns: repeat(2, 1fr); }

  .contact-grid { grid-template-columns: 1fr; }
  .contact-map  { min-height: 350px; }

  .footer-grid  { grid-template-columns: 1fr 1fr; gap: 2rem; }

  .nav-live-badge { font-size: 0.58rem; }
}