/* ===========================================================================
   ARABIC TEXT — Sheikh Al Arab storefront (suchi theme)
   ---------------------------------------------------------------------------
   The GRID stays LTR on purpose: the image sits on the left and the text on
   the right, exactly how the theme was designed (and how the section order
   reads for the visitor). What was broken is the TEXT direction — inside an
   LTR paragraph a multi-line Arabic heading wraps at the wrong place and the
   last word breaks apart (the hero title rendered as "بن شيخ" / "العرب ب"),
   and a price like "25 ج.م" was read in the wrong order.

   So this file flips the reading direction of the TEXT blocks only.
   =========================================================================== */


/* ---------------------------------------------------------------------------
   1. Blocks the theme left-aligns -> RTL, and right-aligned to match.
   --------------------------------------------------------------------------- */
#hero-11 .hero-11-txt,
.section-title,
.about-3-txt,
.menu-3-title,
.menu-3-list,
.menu-6-group,
.menu-6-txt,
.banner-2-txt,
.banner-4-txt {
  direction: rtl;
  text-align: right;
}

/* The store group heading lives in a full-width flex cell. Without an
   explicit width it shrinks to the text and sticks to the left edge. */
.menu-6-group {
  width: 100%;
}


/* ---------------------------------------------------------------------------
   2. Blocks the theme centres -> keep them centred, flip only the reading
      direction so the words keep their order.
   --------------------------------------------------------------------------- */
.pbox-13-txt,
.pbox-1-txt,
.abox-4,
.blog-post-txt,
.cbox-3-txt,
#brands-1 .brand-logo,
#footer-3 .footer-links,
#footer-3 .footer-copyright {
  direction: rtl;
}


/* ---------------------------------------------------------------------------
   3. Hero title + eyebrow + subtitle — sized so each stays on ONE line.
      The theme ships them at 10.5rem / 5.5rem / 3.5rem, which is far too wide
      for the hero text column: the title broke after "بن شيخ", and the
      eyebrow and the subtitle both broke in half.
   --------------------------------------------------------------------------- */
#hero-11 .hero-11-txt h2 {
  font-size: 4.6rem;
  line-height: 1.4;
  white-space: nowrap;
  margin-bottom: 18px;
}

#hero-11 .hero-11-txt h3 {
  font-size: 2.4rem;
  line-height: 1.5;
  white-space: nowrap;
  margin-bottom: 6px;
}

#hero-11 .hero-11-txt h4 {
  font-size: 1.7rem;
  line-height: 1.5;
  white-space: nowrap;
  margin-bottom: 18px;
}

@media (max-width: 1199.98px) {
  #hero-11 .hero-11-txt h2 { font-size: 3.9rem; }
  #hero-11 .hero-11-txt h3 { font-size: 2rem; }
  #hero-11 .hero-11-txt h4 { font-size: 1.45rem; }
}

@media (max-width: 991.98px) {
  /* Stacked layout: the column is full width, so scale with the viewport. */
  #hero-11 .hero-11-txt h2 { font-size: clamp(2rem, 8vw, 3.6rem); }
  #hero-11 .hero-11-txt h3 { font-size: clamp(1.3rem, 5vw, 2rem); }
  #hero-11 .hero-11-txt h4 { font-size: clamp(1rem, 3.6vw, 1.45rem); }
}

@media (max-width: 575.98px) {
  /* Phone: the eyebrow and the subtitle may wrap, the title may not. */
  #hero-11 .hero-11-txt h3,
  #hero-11 .hero-11-txt h4 {
    white-space: normal;
  }
}


/* ---------------------------------------------------------------------------
   4. The theme offsets the hero text block to the LEFT — flip the offset.
      The offset only exists on the two-column layout: below 992px the theme
      drops it (responsive.css), so the flip must not re-add it there.
   --------------------------------------------------------------------------- */
@media (min-width: 992px) {
  .hero-11-txt {
    margin-left: 0;
    margin-right: -20px;
    padding-right: 0;
    padding-left: 20px;
  }

  .hero-11-txt p {
    padding-right: 0;
    padding-left: 5%;
  }
}


/* ---------------------------------------------------------------------------
   5. Menu row: item name on the right, dots in the middle, price on the left.
   --------------------------------------------------------------------------- */
.menu-3-list .menu-item-title {
  padding: 0 0 0 10px;
}

.menu-3-list .menu-item-price {
  padding: 0 10px 0 0;
}

#menu-3 .menu-item-desc p {
  padding-right: 0;
  padding-left: 15%;
}


/* ---------------------------------------------------------------------------
   6. Bullet list — the disc marker moves to the right.
   --------------------------------------------------------------------------- */
.txt-list {
  direction: rtl;
  text-align: right;
  margin-left: 0;
  margin-right: 15px;
  padding-left: 0;
  padding-right: 0;
}


/* The store badges are floated LEFT by the theme — a float does not follow
   the writing direction, so they have to be flipped by hand. */
.banner-3-txt .store {
  float: left;
  margin-right: 15px;
  margin-left: 0;
}


/* The badge that sits on the product photo — the theme pins it top-left. */
#menu-6 .item-code {
  direction: rtl;
  left: auto;
  right: 15px;
}


/* ---------------------------------------------------------------------------
   7. Header nav links — each link reads right-to-left inside the LTR row.
   --------------------------------------------------------------------------- */
.navik-menu .top-list > li > a {
  direction: rtl;
}


/* ---------------------------------------------------------------------------
   8. Banner 2 heading — it must stay on ONE line.
      The theme ships it at 6rem with 10% side padding, which is wider than
      the column, so "طعم ممتاز، جودة لا تُضاهى" broke in half. The column is
      now full width (col-md-12) and the padding is tighter, so the heading
      can stay big AND stay on one line.
   --------------------------------------------------------------------------- */
.banner-2-txt h2 {
  font-size: 5rem;
  line-height: 1.45;
  padding: 0 4%;
  white-space: nowrap;
}

/* The banner photo has a bright bokeh right behind the "100%" line, so the
   white text needs a soft shadow to stay readable. */
.banner-2-txt h2,
.banner-2-txt p {
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
}

@media (max-width: 1199.98px) {
  .banner-2-txt h2 { font-size: 4.4rem; }
}

@media (max-width: 991.98px) {
  .banner-2-txt h2 { font-size: clamp(1.5rem, 6.5vw, 3.4rem); }
}


/* ---------------------------------------------------------------------------
   8b. App banner (#banner-3) — the text column sits on the LEFT of the
       section and the phone mock-up on the right, exactly as the theme
       draws it. Aligning the text to the right pushed it straight against
       the mock-up and left a big empty orange gap on the far left, so the
       block is anchored to the LEFT again; only the reading direction stays
       RTL. The paragraph keeps the theme's 10% inset from the image.
   --------------------------------------------------------------------------- */
#banner-3 .banner-3-txt {
  direction: rtl;
  text-align: left;
}

/* The app banner heading — same rule, it must stay on ONE line too.
   The line-height is loosened on purpose: the theme's 1.3 is measured for
   Latin, and the Arabic fallback font is taller, so the descenders used to
   crash into the paragraph underneath. */
.banner-3-txt h2 {
  font-size: 3.5rem;
  line-height: 1.5;
  white-space: nowrap;
}

.banner-3-txt p {
  padding-right: 10%;
  padding-left: 0;
}

@media (max-width: 1199.98px) {
  .banner-3-txt h2 { font-size: 3rem; }
}

@media (max-width: 991.98px) {
  .banner-3-txt h2 { font-size: clamp(1.4rem, 5vw, 2.8rem); }
}


/* ---------------------------------------------------------------------------
   10. The menu page hero (#menu-page) — the theme's inner-page hero has no
       direction of its own, so the paragraph opened with a number ("55
       مشروبًا...") and the number jumped to the far end of the line, and the
       breadcrumb ran left-to-right. The block reads RTL like the rest of the
       storefront.
   --------------------------------------------------------------------------- */
#menu-page .hero-txt,
#menu-page .breadcrumb {
  direction: rtl;
}


/* ---------------------------------------------------------------------------
   11. The inner pages (about / contact) — same rule as the menu page hero:
       the breadcrumb and the intro run right-to-left, and the contact
       columns follow the Arabic reading order instead of the Latin one.
   --------------------------------------------------------------------------- */
#about-page .hero-txt,
#about-page .breadcrumb,
#contacts-page .hero-txt,
#contacts-page .breadcrumb {
  direction: rtl;
}

#contacts-5 .row {
  direction: rtl;
}

#contacts-5 .cbox-5 {
  direction: rtl;
}

/* The icon strip on the about page reads right-to-left, so the first item
   (قهوة سادة) sits on the right instead of the far left. */
#about-1 .abox-1-wrapper > .row {
  direction: rtl;
}

/* The inner-page heroes put a white title on top of a photo, and the bright
   parts of the picture swallow it. A soft scrim + a text shadow keep the
   title readable on every one of them. */
#about-page,
#contacts-page,
#menu-page {
  position: relative;
}

#about-page::before,
#contacts-page::before,
#menu-page::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.48) 0%, rgba(0, 0, 0, 0.3) 55%, rgba(0, 0, 0, 0.42) 100%);
  pointer-events: none;
}

#about-page > .container,
#contacts-page > .container,
#menu-page > .container {
  position: relative;
  z-index: 1;
}

#about-page .hero-txt h2,
#contacts-page .hero-txt h2,
#menu-page .hero-txt h2 {
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.55);
}

#about-page .hero-txt .breadcrumb,
#contacts-page .hero-txt .breadcrumb,
#menu-page .hero-txt .breadcrumb {
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.6);
}


/* ---------------------------------------------------------------------------
   9. The feature rail (#about-7) sits on a light, washed-out photo (bg-05),
      but the theme marks the boxes `white-color`, so the heading, the
      paragraph and the flaticon icons were pure white on a pale background —
      invisible. Force them black so they read correctly.
      The icon needs its own rule: `.white-color span` sets the colour
      directly on the glyph, so it would not inherit from the box.
   --------------------------------------------------------------------------- */
#about-7 .abox-4,
#about-7 .abox-4 h5,
#about-7 .abox-4 p,
#about-7 .abox-4 span {
  color: #000;
}

/* ---------------------------------------------------------------------------
   12. Header navigation - Arabic reading order.
       The nav list is a row of inline-block items, so the browser lays it out
       left-to-right and the FIRST item of the markup ended up on the far
       LEFT. `direction: rtl` on the list flips the ITEM ORDER only: the
       header block itself stays exactly where the theme put it (nav floated
       to the right of the page, logo on the left), but the row now reads
       right-to-left like the rest of the storefront.
       The two icon items (account / basket) are the last children of the
       same list, so they end up on the left of the links - the usual place
       for them in an Arabic shop header.
   --------------------------------------------------------------------------- */
#header-3 .navik-menu > ul.top-list {
  direction: rtl;
}

/* ---------------------------------------------------------------------------
   13. Home page header contrast.
       The theme paints the transparent header white (see
       `.header-transparent-on .navik-menu > ul > li > a` in menu.css). The
       inner pages use a DARK photo behind the header, so the white nav reads
       there. The home hero is a pale, almost white picture, which left the
       navigation white-on-white and invisible - so the home page carries a
       `t-p-home` body class and the nav is painted dark on it.
   --------------------------------------------------------------------------- */
body.t-p-home .header-transparent-on .navik-menu > ul > li > a {
  color: #212121;
}

body.t-p-home .header-transparent-on .navik-menu > ul > li:hover > a {
  color: #ce1212;
}

/* The account / basket glyphs take their colour from the nav link. */
body.t-p-home .header-transparent-on .flaticon-shopping-bag,
body.t-p-home .header-transparent-on .flaticon-user,
body.t-p-home .header-transparent-on .basket-ico .ico-holder,
body.t-p-home .header-transparent-on .uswe-ico .ico-holder {
  color: #212121;
}


/* ---------------------------------------------------------------------------
   14. The hero on a phone — the text was pushed past the right edge.
       The theme drops the hero offset below 992px (responsive.css) and
       centres the hero there, but the RTL flip above used to re-add the
       offset on EVERY width, so the Arabic headline and the "اطلب الآن"
       button were cut off by the screen edge. Below 992px there is no
       offset at all, and on a phone the hero reads centred.
   --------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  #hero-11 .hero-11-txt {
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
  }
}

@media (max-width: 767.98px) {
  #hero-11 .hero-11-txt {
    text-align: center;
  }

  /* The hero photo is a cut-out PNG: the theme pulls it off the left edge
     on a phone, which cuts the cup in half. On a small screen it is shown
     whole. */
  #hero-11 .hero-11-img {
    margin-left: 0;
  }
}


/* ---------------------------------------------------------------------------
   15. The category rail reads right-to-left.
       The grid of the theme stays LTR (see the note at the top of this
       file), but the rail carries Arabic labels and switches Arabic
       content, so the FIRST category has to sit on the right - that is
       where the eye starts in Arabic, and the rail scrolls from there.
   --------------------------------------------------------------------------- */
#menu-3 ul.tabs-1 {
  direction: rtl;
}


/* ---------------------------------------------------------------------------
   16. The banner headings on a phone.
       The theme's responsive.css is loaded after this file and wins on the
       headings (same specificity), so on a phone they stayed at 4rem / 3rem
       with `white-space: nowrap` — a 714px wide heading inside a 375px
       screen, cut off by the page. On a phone they scale with the screen
       and are allowed to wrap.
   --------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  #banner-2 .banner-2-txt h2 {
    font-size: clamp(1.5rem, 7vw, 2.4rem);
    line-height: 1.4;
    white-space: normal;
    padding: 0;
  }
  #banner-3 .banner-3-txt h2 {
    font-size: clamp(1.4rem, 6.5vw, 2.2rem);
    line-height: 1.5;
    white-space: normal;
  }
}