/* Offers landing page: additions on top of landing.css (the original static
   page's stylesheet, kept as-is) for the dynamic page — icons, language and
   cart links, linked slides and right-to-left. */

/* header: language switch + cart */
.lang-switch { display: flex; gap: 4px; }
.lang-switch a {
  height: 42px; padding: 0 10px;
  display: flex; align-items: center;
  border-radius: 7px; font-size: 12px; font-weight: 700; color: var(--navy);
}
.lang-switch a.active { background: var(--paper); color: var(--orange); }
.cart-link {
  position: relative;
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 7px;
  color: var(--navy); font-size: 16px;
}
.cart-count {
  position: absolute; top: -7px; inset-inline-end: -7px;
  min-width: 18px; height: 18px; padding: 0 4px;
  border-radius: 9px; background: var(--orange); color: #fff;
  font-size: 10px; font-weight: 800; line-height: 18px; text-align: center;
}

/* slides that are links */
a.hero-slide { display: block; }
a.hero-slide img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); display: block; }
.hero-slide:not(.active) { pointer-events: none; }

/* font awesome icons in place of the original inline svgs / characters */
.component-icon > span[class*="fa-"] {
  display: block !important;
  font-size: 26px; color: var(--orange);
  position: relative; z-index: 2;
}
.trust-icon > span[class*="fa-"] { font-size: 18px; }

/* product links */
a.product-visual { display: block; }
.product-name a { color: inherit; }
.product-name a:hover { color: var(--orange); }
.product-card[hidden] { display: none; }
.details-button { display: grid; place-items: center; }
.empty-state[hidden] { display: none; }

/* arabic */
html[lang="ar"] body,
html[dir="rtl"] body,
html[dir="rtl"] button,
html[dir="rtl"] input { font-family: Cairo, Inter, Arial, sans-serif; }

@media (max-width: 700px) {
  .lang-switch a { padding: 0 6px; }
}

/* arrows point the reading direction */
html[dir="rtl"] .text-link span,
html[dir="rtl"] .primary-button span,
html[dir="rtl"] .details-button { display: inline-block; transform: scaleX(-1); }