:root {
  --black: #000;
  --white: #fff;
  --red: #e8192c;
  --orange: #f47b20;
  --yellow: #f5c518;
  --dim: rgba(255, 255, 255, 0.55);
  --nav-h: 72px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --btn-radius: 999px;
}
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  scroll-behavior: smooth;
}
body {
  background: var(--black);
  /* Ambient depth — very subtle corner glows so background never looks flat */
  background-image: radial-gradient(
      ellipse 70% 50% at -5% -5%,
      rgba(232, 25, 44, 0.045) 0%,
      transparent 60%
    ),
    radial-gradient(
      ellipse 60% 45% at 105% 105%,
      rgba(244, 123, 32, 0.04) 0%,
      transparent 55%
    );
  color: var(--white);
  font-family: "Barlow", sans-serif;
  font-weight: 300;
  overflow-x: hidden;
}
a {
  color: inherit;
  text-decoration: none;
}
img {
  display: block;
  width: 100%;
}
ul {
  list-style: none;
}
button {
  cursor: pointer;
  border: none;
  background: none;
  font: inherit;
  color: inherit;
}
a[data-action] {
  cursor: pointer;
}
button:focus-visible,
a[role="button"]:focus-visible,
[data-action]:focus-visible {
  outline: 2px solid rgba(245, 197, 24, 0.8);
  outline-offset: 3px;
}
::-webkit-scrollbar {
  width: 4px;
}
::-webkit-scrollbar-track {
  background: var(--black);
}
::-webkit-scrollbar-thumb {
  background: var(--red);
  border-radius: 2px;
}

/* Bilingual display utilities */
[data-lang="en"] .ar-only {
  display: none !important;
}
[data-lang="ar"] .en-only {
  display: none !important;
}
[data-lang="ar"] .main-nav {
  direction: ltr;
  flex-direction: row-reverse;
}
[data-lang="ar"] {
  font-size: 102%;
} /* Arabic text reads slightly larger */
[data-lang="ar"] body,
[data-lang="ar"] button,
[data-lang="ar"] input,
[data-lang="ar"] textarea,
[data-lang="ar"] select {
  font-family: "Playpen Sans Arabic", "Cairo", "Barlow", sans-serif;
}
[data-lang="ar"] h1,
[data-lang="ar"] h2,
[data-lang="ar"] h3,
[data-lang="ar"] h4,
[data-lang="ar"] h5,
[data-lang="ar"] h6,
[data-lang="ar"] .main-nav > li > a,
[data-lang="ar"] .main-nav > li > button,
[data-lang="ar"] .drawer-nav a,
[data-lang="ar"] .drawer-nav button,
[data-lang="ar"] .section-label,
[data-lang="ar"] .ticker-item,
[data-lang="ar"] .footer-col-title,
[data-lang="ar"] .form-label,
[data-lang="ar"] .pd-tag,
[data-lang="ar"] .pd-name,
[data-lang="ar"] .pd-price,
[data-lang="ar"] .pd-size-label,
[data-lang="ar"] .pd-trust-item,
[data-lang="ar"] .pd-delivery-note,
[data-lang="ar"] .btn-primary,
[data-lang="ar"] .btn-secondary,
[data-lang="ar"] .add-to-cart,
[data-lang="ar"] .shop-filter,
[data-lang="ar"] .cst-lbl,
[data-lang="ar"] .csp-title {
  font-family: "Playpen Sans Arabic", "Cairo", "Barlow", sans-serif !important;
  letter-spacing: 0;
}
[data-lang="ar"] .hero-copy,
[data-lang="ar"] .promo-content,
[data-lang="ar"] .newsletter-content,
[data-lang="ar"] .page-banner,
[data-lang="ar"] .contact-info-side,
[data-lang="ar"] .contact-form-side,
[data-lang="ar"] .policy-wrap,
[data-lang="ar"] .pd-info,
[data-lang="ar"] .shop-head {
  text-align: right;
}
[data-lang="ar"] .hero-copy {
  left: auto;
  right: clamp(20px, 5vw, 80px);
}
[data-lang="ar"] .hero-btns,
[data-lang="ar"] .newsletter-form {
  justify-content: flex-end;
}
[data-lang="ar"] .hero-copy h1,
[data-lang="ar"] .section-title,
[data-lang="ar"] .promo-content h2,
[data-lang="ar"] .newsletter-content h2,
[data-lang="ar"] .newsletter-content h3,
[data-lang="ar"] .page-banner h1,
[data-lang="ar"] .policy-wrap h2,
[data-lang="ar"] .contact-info-side h2,
[data-lang="ar"] .contact-form-side h2,
[data-lang="ar"] .why-card h3,
[data-lang="ar"] .dash-title,
[data-lang="ar"] .dash-section-title,
[data-lang="ar"] .ds-step-heading h2,
[data-lang="ar"] .confirm-title,
[data-lang="ar"] .pd-name,
[data-lang="ar"] .pd-delivery-note {
  font-family: "Playpen Sans Arabic", "Cairo", "Barlow", sans-serif !important;
  letter-spacing: 0;
  line-height: 1.12;
}

/* RTL layout adjustments */
[dir="rtl"] .nav-links {
  flex-direction: row-reverse;
}
[dir="rtl"] .main-nav {
  flex-direction: row-reverse;
}
[dir="rtl"] .product-card-info {
  text-align: right;
}
[dir="rtl"] .cart-item {
  flex-direction: row-reverse;
}

/* Language toggle button */
.lang-toggle {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: inherit;
  padding: 4px 12px;
  border-radius: 20px;
  cursor: pointer;
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  transition:
    border-color 0.2s,
    background 0.2s;
}
.lang-toggle:hover {
  border-color: rgba(255, 255, 255, 0.5);
  background: rgba(255, 255, 255, 0.05);
}