/* ============================================================
   Brand font — ثمانية سانس (Thmanyah Sans)
   The name was already first in every font stack in this theme, but nothing ever
   LOADED it, so it silently fell through to whatever the dashboard font happened
   to be (or to Segoe UI / Arial). These rules load the real files, which
   live in public/fonts/ (the build copies them there from src/assets/fonts/).

   url() here is relative to the SERVED stylesheet (public/app.css), so
   "fonts/x.woff2" resolves to public/fonts/x.woff2.

   font-display: swap — Arabic text stays readable in the fallback while the file
   downloads instead of flashing invisible.
   A weight whose file is missing is skipped by the browser, which then synthesises
   it or falls back down the stack; nothing breaks while only some weights exist.
   ============================================================ */
@font-face {
  font-family: "thmanyah sans";
  src: url("fonts/thmanyahsans-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "thmanyah sans";
  src: url("fonts/thmanyahsans-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "thmanyah sans";
  src: url("fonts/thmanyahsans-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "thmanyah sans";
  src: url("fonts/thmanyahsans-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "thmanyah sans";
  src: url("fonts/thmanyahsans-Black.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --faal-white: #ffffff;
  --faal-cream: #fffcf4;
  --faal-bg: #f4ece3;
  --faal-green: #022f2c;
  --faal-green-800: #011a18;
  --faal-black: #011412;
  --faal-accent: #3ac26b;
  --faal-mint: #7de38b;
  --faal-yellow: #fee9b3;
  --faal-muted: #6a706c;
  --faal-line: #e5ded4;
  --faal-card: #fffefa;
  --faal-shadow: 0 22px 70px rgba(1, 20, 18, 0.08);
  --faal-radius-sm: 16px;
  --faal-radius: 24px;
  --faal-radius-lg: 32px;
  --faal-container: 1320px;
  --faal-section: clamp(72px, 8vw, 112px);
  --faal-font: "thmanyah sans", "IBM Plex Sans Arabic", "Tajawal", "Segoe UI", Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--faal-bg);
  color: var(--faal-green-800);
  font-family: var(--faal-font);
  line-height: 1.5;
  text-rendering: optimizeLegibility;
}

body.faal-theme {
  direction: rtl;
  background:
    linear-gradient(180deg, rgba(119, 246, 133, 0.85) 0, rgba(254, 222, 142, 0.6) 150px, rgba(244, 236, 227, 0) 740px) no-repeat top center / 100% 740px,
    var(--faal-bg);
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
}

/* The rule above quietly broke the `hidden` attribute on every image in the
   theme: `[hidden] { display: none }` lives in the BROWSER's stylesheet, and any
   author rule that sets display beats it, whatever the specificity. So an image
   with hidden set stayed on screen — the product video appeared under the photo
   instead of replacing it. Restating it here as an author rule fixes it for good;
   no !important needed, since [hidden] (0,1,0) already outranks img (0,0,1). */
[hidden] {
  display: none;
}

button,
input,
textarea {
  font: inherit;
}

.faal-container {
  width: min(var(--faal-container), calc(100% - 40px));
  margin-inline: auto;
}

.faal-page {
  overflow: hidden;
}

.faal-section {
  padding-block: var(--faal-section);
}

.faal-section-tight {
  padding-block: clamp(56px, 6vw, 88px);
}

.faal-section-title {
  max-width: 760px;
  margin: 0 auto clamp(32px, 5vw, 64px);
  text-align: center;
}

.faal-section-title h2,
.faal-section-title h1 {
  margin: 0;
  color: var(--faal-black);
  font-size: clamp(34px, 5vw, 52px);
  font-weight: 900;
  line-height: 1.2;
}

.faal-section-title p {
  margin: 16px 0 0;
  color: var(--faal-green-800);
  font-size: clamp(17px, 2vw, 22px);
}

.faal-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 28px;
  border: 1px solid var(--faal-green);
  border-radius: 999px;
  background: var(--faal-green);
  color: var(--faal-white);
  font-size: 16px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  transition: transform 180ms ease, background 180ms ease, color 180ms ease;
}

.faal-btn:hover {
  transform: translateY(-2px);
  background: var(--faal-black);
}

.faal-btn.is-light {
  background: var(--faal-white);
  color: var(--faal-green);
}

.faal-btn.is-compact {
  min-height: 36px;
  padding-inline: 18px;
  font-size: 13px;
}

.faal-btn--mint {
  background: var(--faal-mint);
  border-color: var(--faal-mint);
  color: var(--faal-green);
}

.faal-btn--mint:hover {
  background: var(--faal-accent);
  border-color: var(--faal-accent);
}

.faal-btn--outline {
  background: transparent;
  color: var(--faal-green);
  border-color: var(--faal-green);
}

.faal-btn--outline:hover {
  background: var(--faal-green);
  color: var(--faal-white);
  transform: translateY(-2px);
}

.faal-gradient-card {
  background: linear-gradient(180deg, var(--faal-accent) 0%, var(--faal-cream) 100%);
}

/* Main navigation (<custom-main-menu>, main-menu.js): the merchant's header
   menu fetched from salla.api.component.getMenus('header') and rendered as
   .faal-menu with our own markup — no Tailwind internals, no duplicates. */
.faal-menu,
.faal-submenu {
  list-style: none;
  margin: 0;
  padding: 0;
}

.faal-nav .faal-menu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 2.2vw, 40px);
}

.faal-menu-item > a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--faal-green);
  font-size: 16px;
  font-weight: 800;
  white-space: nowrap;
}

.faal-menu-item img {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  object-fit: cover;
}

/* Desktop dropdown for nested menu items. */
.faal-nav .faal-menu-item {
  position: relative;
}

.faal-nav .faal-submenu {
  position: absolute;
  top: 100%;
  inset-inline-start: 0;
  z-index: 40;
  min-width: 220px;
  padding: 12px 16px;
  display: grid;
  gap: 8px;
  border-radius: var(--faal-radius-sm);
  background: var(--faal-cream);
  box-shadow: 0 18px 44px rgba(1, 20, 18, 0.12);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 160ms ease, transform 160ms ease, visibility 160ms;
}

.faal-nav .faal-menu-item:hover > .faal-submenu,
.faal-nav .faal-menu-item:focus-within > .faal-submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.faal-nav .faal-submenu .faal-menu-item > a {
  font-size: 15px;
  font-weight: 700;
  white-space: normal;
}

.faal-menu-products {
  display: none; /* mega-menu products: enable per design when needed */
}

/* Skeleton shown while the menu is being fetched. */
.faal-menu-skel {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.2vw, 40px);
}

.faal-menu-skel span {
  height: 14px;
  border-radius: 999px;
  background: rgba(2, 47, 44, 0.1);
  animation: faal-skel-pulse 1.2s ease-in-out infinite;
}

@keyframes faal-skel-pulse {
  0%, 100% { opacity: 0.55; }
  50% { opacity: 1; }
}

/* Mobile drawer variant of the same menu. */
.faal-mobile-nav .faal-menu {
  display: grid;
  gap: 6px;
}

.faal-mobile-nav .faal-menu-item > a {
  padding: 10px 0;
  white-space: normal;
}

.faal-mobile-nav .faal-submenu {
  display: grid;
  gap: 4px;
  padding-inline-start: 18px;
}

.faal-mobile-nav .faal-menu-skel {
  padding-block: 10px;
}

/* Login modal.
   <salla-login-modal> renders <salla-modal class="s-login-modal"> wrapping a
   cross-origin <iframe> to accounts.salla.com. That iframe already draws the
   COMPLETE modal — dimmed backdrop, white card, close button, social buttons —
   and being cross-origin, nothing inside it can be styled from here.

   So this element must be a transparent full-viewport shell and nothing more.
   It previously had its own white card, padding, radius and backdrop shadow,
   which framed Salla's modal inside a second box (with a stray scrollbar, since
   the iframe is taller than the card). One frame, not two.

   State comes from the `visible` attribute, which salla-modal sets in open()
   and removes in close(). That is authoritative for every close path including
   the iframe's own ✕ — a class toggled by our JS could not see that click,
   because cross-origin iframes swallow their events. Scoped to .s-login-modal
   so other modals (search) are untouched. */
.s-login-modal:not([visible]) {
  display: none !important;
}

.s-login-modal[visible] {
  display: block !important;
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: hidden !important;
  z-index: 2147483000 !important;
}

/* Viewport units, NOT height: 100%. A percentage height only resolves against a
   parent with a DEFINITE height, and the iframe is not a child of this shell —
   Salla nests it under .s-modal-body, whose height is auto. So `height: 100%`
   collapsed to auto and the iframe fell back to the default height for a
   replaced element: exactly 150px. The login form is ~304px tall and the iframe
   carries scrolling="no", so everything below the email field — the submit
   button included — was simply cut off. `height="undefinedpx"`, the attribute
   Salla sets from the iframe's own height message, is equally unusable.
   dvh so the visible viewport (not the browser chrome) is what's filled. */
.s-login-modal[visible] iframe {
  display: block !important;
  width: 100% !important;
  height: 100vh !important;
  height: 100dvh !important;
  border: 0 !important;
}

/* Keep the page behind from scrolling while the modal is up. */
html.faal-login-open,
html.faal-login-open body {
  overflow: hidden !important;
}

/* Search modal.
   Unlike the login modal this one is SAME-ORIGIN: <salla-search> renders its
   input, the live result rows and the empty-state into the light DOM with
   s-search-* classes, so it is fully themeable from here. Salla's own component
   CSS still provides the layout/backdrop — these rules only carry the Faal
   surface (cream card, brand focus ring, rounded rows) over it. */
.s-search-modal .s-search-container {
  font-family: var(--faal-font);
}

.s-search-modal .s-search-input {
  border: 1px solid var(--faal-line);
  border-radius: var(--faal-radius-sm);
  background: var(--faal-cream);
  color: var(--faal-green-800);
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
}

.s-search-modal .s-search-input::placeholder {
  color: var(--faal-muted);
  font-weight: 600;
}

.s-search-modal .s-search-input:focus {
  outline: none;
  border-color: var(--faal-green);
  box-shadow: 0 0 0 3px rgba(58, 194, 107, 0.25);
}

.s-search-modal .s-search-icon {
  color: var(--faal-green);
}

/* Results dropdown: one card, rows separated by the brand hairline.
   `overflow: hidden auto` and not plain `hidden` — the shorthand would drop
   Salla's own `overflow-y: auto`, so a long result list could not scroll inside
   its own box and everything past max-height was simply unreachable. The x-axis
   stays hidden so the rounded corners still clip the rows. */
.s-search-modal .s-search-results {
  border-radius: var(--faal-radius-sm);
  background: var(--faal-card);
  box-shadow: var(--faal-shadow);
  overflow: hidden auto;
  overscroll-behavior: contain;
}

/* The results box is ALWAYS in the DOM (it wraps the no-results <p> too), so
   before a search runs it is an empty card that would still paint its
   background and shadow. Salla marks the two states it should be visible in on
   the container — s-search-container-open (has hits) and s-search-no-results —
   so hide it in every other state. */
.s-search-modal
  .s-search-container:not(.s-search-container-open):not(.s-search-no-results)
  .s-search-results {
  display: none;
}

.s-search-modal .s-search-product {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--faal-line);
  color: var(--faal-green-800);
  transition: background 0.2s ease;
}

.s-search-modal .s-search-product:last-child {
  border-bottom: 0;
}

.s-search-modal .s-search-product:hover {
  background: rgba(2, 47, 44, 0.05);
}

.s-search-modal .s-search-product-image {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  object-fit: cover;
}

.s-search-modal .s-search-product-title {
  font-size: 15px;
  font-weight: 800;
}

.s-search-modal .s-search-product-price {
  color: var(--faal-green);
  font-size: 14px;
  font-weight: 800;
}

.s-search-modal .s-search-product-regular-price {
  color: var(--faal-muted);
  font-weight: 600;
  text-decoration: line-through;
}

.s-search-modal .s-search-no-results-placeholder {
  padding: 16px;
  color: var(--faal-muted);
  font-weight: 700;
  text-align: center;
}

/* Search modal on phones.
   Salla positions .s-search-results as an ABSOLUTE dropdown, so it adds no
   height to the modal body. That is fine on a desktop viewport, but on a phone
   the on-screen keyboard cuts the visible area roughly in half, and the
   dropdown then hangs below it: the results exist, but only .s-modal-wrapper's
   scrollbar can reach them — which is exactly the "results don't show under the
   bar, you have to scroll" behaviour.

   Fix: on small screens put the list back in normal flow directly under the
   input and give it its own scroll area sized to the *visible* viewport (dvh
   excludes the browser chrome, and shrinks with the keyboard). The panel then
   always fits on screen and the list — not the page — is what scrolls. */
@media (max-width: 640px) {
  .s-search-modal .s-modal-wrapper {
    overflow: hidden;
  }

  .s-search-modal .s-modal-body {
    width: 100%;
    max-width: calc(100% - 24px);
    margin-top: 12px;
  }

  /* Salla caps the container at 14rem/24rem to fit its absolute dropdown; with
     the list in flow that cap would clip it instead. */
  .s-search-modal .s-search-container,
  .s-search-modal .s-search-container.s-search-container-open {
    max-height: none;
  }

  .s-search-modal .s-search-results {
    position: static;
    margin-top: 8px;
    max-height: calc(100vh - 160px);
    max-height: calc(100dvh - 160px);
  }

  /* The close button is centred on .s-modal-body. That body is only as tall as
     the input while the list is absolute, but now the list grows it — so pin
     the button to the input row instead of letting it drift down the list. */
  .s-search-modal .s-modal-close {
    top: 30px;
  }
}

/* Store notifications → brand toast (registered via salla.notify.setNotifier in
   app.js, replacing Salla's window.alert fallback). Top corner (RTL start = top
   right), auto-dismiss, pause on hover. */
.faal-toast-region {
  position: fixed;
  top: 16px;
  inset-inline-start: 16px;
  z-index: 2147483001;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(360px, calc(100vw - 32px));
  pointer-events: none;
}

.faal-toast {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  border-radius: 14px;
  border-inline-start: 4px solid var(--faal-accent);
  background: var(--faal-green);
  color: #fff;
  font-family: var(--faal-font);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  box-shadow: 0 18px 44px rgba(1, 20, 18, 0.3);
  opacity: 0;
  transform: translateY(-12px);
  transition: opacity 220ms ease, transform 220ms ease;
}

.faal-toast.is-in { opacity: 1; transform: translateY(0); }
.faal-toast.is-out { opacity: 0; transform: translateY(-12px); }

.faal-toast--error { background: #7c1d16; border-inline-start-color: #f2836f; }
.faal-toast--warning { background: #7a5510; border-inline-start-color: #f4c150; }

.faal-toast-msg { flex: 1 1 auto; min-width: 0; }

.faal-toast-close {
  flex: none;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.75;
}

.faal-toast-close:hover { opacity: 1; background: rgba(255, 255, 255, 0.14); }

.faal-header-shell {
  position: relative;
  z-index: 20;
  width: min(var(--faal-container), calc(100% - 40px));
  margin: 32px auto 0;
}

.faal-header-shell.is-sticky {
  position: sticky;
  top: 16px;
}

.faal-header {
  min-height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 14px 24px;
  border-radius: var(--faal-radius);
  background: var(--faal-cream);
  box-shadow: 0 8px 35px rgba(1, 20, 18, 0.06);
}

.faal-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--faal-green);
  font-size: 26px;
  font-weight: 900;
  line-height: 1;
}

.faal-brand-logo {
  width: auto;
  max-width: min(150px, 34vw);
  height: 42px;
  object-fit: contain;
}

.faal-brand-mark {
  width: 32px;
  height: 32px;
  border-radius: 10px 10px 4px 10px;
  background: var(--faal-green);
  position: relative;
}

.faal-brand-mark::after {
  content: "";
  position: absolute;
  inset: 9px 8px 8px 9px;
  border-radius: 4px 4px 2px 4px;
  background: var(--faal-cream);
}

.faal-nav {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.2vw, 40px);
  color: var(--faal-green);
  font-size: 16px;
  font-weight: 800;
  white-space: nowrap;
}

.faal-header-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  direction: ltr;
}

/* ---- Native Salla cart entry point (<salla-cart-summary>) ----
   Salla renders its content in the light DOM with s-cart-summary-* classes
   (same as theme-raed styles), so app.css can theme it directly. */
.faal-cart {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px;
  color: var(--faal-green);
  cursor: pointer;
  line-height: 0;
  transition: color 0.2s ease;
}

.faal-cart:hover {
  color: var(--faal-green-800);
}

/* The hydrated component wraps its content in <a class="s-cart-summary-wrapper">
   containing #s-cart-icon (our slotted bag) + the count + the price content. */
.faal-cart .s-cart-summary-wrapper {
  display: inline-flex;
  align-items: center;
  color: inherit;
}

.faal-cart #s-cart-icon {
  display: inline-flex;
}

.faal-cart .sicon-shopping-bag {
  font-size: 26px;
  line-height: 1;
}

/* Keep a clean icon-only button — hide the native total-price text (and its
   wrapper), leaving just the bag + count badge. */
.faal-cart .s-cart-summary-content {
  display: none;
}

/* Live item count: Salla renders + updates .s-cart-summary-count on every cart
   event. Brand-accent pill on the icon's top corner. */
.faal-cart .s-cart-summary-count {
  position: absolute;
  top: 2px;
  right: 2px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--faal-accent);
  color: var(--faal-green-800);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}

/* ---- Search trigger (opens <salla-search>) ----
   Matches .faal-cart's icon-button metrics so the two sit as a pair. */
.faal-search-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px;
  color: var(--faal-green);
  cursor: pointer;
  line-height: 0;
  transition: color 0.2s ease;
}

.faal-search-btn:hover {
  color: var(--faal-green-800);
}

.faal-search-btn .sicon-search {
  font-size: 24px;
  line-height: 1;
}

/* ---- Language picker (<select>) ----
   `appearance: none` drops the OS control so it can carry the header's type and
   colour; the chevron is a background image because a <select> cannot host a
   pseudo-element. The arrow sits at the inline end, which is the RIGHT here:
   .faal-header-actions forces direction: ltr on the row. The drawer copy is
   RTL and overrides the side below. */
.faal-language {
  appearance: none;
  -webkit-appearance: none;
  padding: 7px 26px 7px 10px;
  border: 1px solid transparent;
  border-radius: 999px;
  background-color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%23022f2c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 10px auto;
  color: var(--faal-green);
  font-family: inherit;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.4;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.faal-language:hover {
  background-color: rgba(2, 47, 44, 0.06);
}

.faal-language:focus-visible {
  outline: none;
  border-color: var(--faal-green);
}

/* The native dropdown list is drawn by the OS in the page's colours, so give the
   options an explicit light surface — on a dark system theme they would
   otherwise come out white-on-white. */
.faal-language option {
  background: var(--faal-white);
  color: var(--faal-green-800);
}

.faal-menu-toggle {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: var(--faal-green);
  color: var(--faal-white);
  cursor: pointer;
}

.faal-menu-toggle span,
.faal-menu-toggle span::before,
.faal-menu-toggle span::after {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  content: "";
}

.faal-menu-toggle span {
  position: relative;
}

.faal-menu-toggle span::before,
.faal-menu-toggle span::after {
  position: absolute;
  left: 0;
}

.faal-menu-toggle span::before {
  top: -6px;
}

.faal-menu-toggle span::after {
  top: 6px;
}

.faal-mobile-menu {
  display: none;
}

.faal-hero {
  margin-top: -108px;
  padding-top: 136px;
  padding-bottom: clamp(64px, 7vw, 96px);
  background: transparent;
}

.faal-hero--top {
  margin-top: calc(var(--faal-header-height, 108px) * -1);
  padding-top: calc(var(--faal-header-height, 108px) + 48px);
}

.faal-hero-copy {
  max-width: 820px;
  margin: clamp(70px, 8vw, 112px) auto 44px;
  text-align: center;
}

.faal-hero-copy h1 {
  margin: 0;
  color: var(--faal-black);
  font-size: clamp(44px, 7vw, 72px);
  font-weight: 900;
  line-height: 1.18;
}

.faal-hero-copy p {
  max-width: 720px;
  margin: 22px auto 28px;
  color: var(--faal-green-800);
  font-size: clamp(19px, 2.3vw, 26px);
  line-height: 1.5;
}

/* Hero buttons sit on one centred row and wrap on a narrow phone rather than
   squeezing. The secondary one is .faal-btn--outline, the theme's existing
   secondary treatment, so it reads as the quieter of the two. */
.faal-hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}

.faal-hero-art {
  width: min(1320px, 100%);
  margin-inline: auto;
}

.faal-hero-art img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 18px 45px rgba(1, 20, 18, 0.08));
}

.faal-hero--top .faal-hero-art img {
  object-fit: contain;
  object-position: center;
}

.faal-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  padding-block: clamp(56px, 8vw, 96px);
  /* Read the numbers left→right (90% | 7200+ | 2150+) as in Figma, not mirrored
     by the RTL page direction. Each stat's text stays centered. */
  direction: ltr;
}

.faal-stat {
  text-align: center;
}

.faal-dynamic-stats .faal-stat {
  min-height: 118px;
}

.faal-stat strong {
  display: block;
  color: var(--faal-black);
  direction: ltr;
  font-size: clamp(54px, 8vw, 112px);
  font-weight: 900;
  line-height: 1.05;
  unicode-bidi: isolate;
}

.faal-stat span {
  display: block;
  margin-top: 8px;
  color: var(--faal-green-800);
  font-size: clamp(15px, 2vw, 24px);
}

.faal-visual-section {
  padding-block: clamp(48px, 7vw, 92px);
}

.faal-youtube-section {
  padding: 64px 0;
}

.faal-youtube-embed {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  background: #111827;
  aspect-ratio: 16 / 9;
}

.faal-youtube-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.faal-value-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
}

.faal-value-media .faal-youtube-embed {
  border-radius: var(--faal-radius-sm);
}

.faal-value-card {
  padding: clamp(28px, 4vw, 48px);
  border-radius: var(--faal-radius);
  color: var(--faal-green-800);
}

.faal-value-card h2 {
  margin: 0 0 16px;
  color: var(--faal-black);
  font-size: clamp(28px, 3.4vw, 42px);
  font-weight: 900;
  line-height: 1.25;
}

.faal-value-card p {
  margin: 0;
  font-size: clamp(16px, 1.8vw, 20px);
  line-height: 1.6;
}

/* Value card: soft pastel tint (Figma), not the saturated green .faal-gradient-card base. */
.faal-value-card.faal-gradient-card {
  background:
    radial-gradient(circle at 12% 12%, rgba(255, 255, 255, 0.55), transparent 42%),
    linear-gradient(150deg, #fdfaf2 0%, #fdeab4 52%, #cdeec4 100%);
}

/* Video facade: Figma poster + green circular play button; iframe loads on click. */
.faal-video-facade {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: var(--faal-radius-sm);
  overflow: hidden;
  cursor: pointer;
  background: #0d1b1a;
  aspect-ratio: 16 / 9;
}

.faal-video-facade img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 300ms ease;
}

.faal-video-facade:hover img {
  transform: scale(1.03);
}

.faal-video-play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 76px;
  height: 76px;
  border-radius: 999px;
  background: var(--faal-green);
  box-shadow: 0 12px 34px rgba(1, 20, 18, 0.35);
}

.faal-video-play::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 12px 0 12px 20px;
  border-color: transparent transparent transparent #ffffff;
  transform: translateX(3px);
}

@media (max-width: 860px) {
  .faal-value-grid {
    grid-template-columns: 1fr;
  }
}

.faal-section-image {
  width: min(1320px, calc(100% - 40px));
  margin-inline: auto;
}

.faal-steps-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.78fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
}

.faal-steps-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 18px;
}

.faal-step-card {
  padding: 26px 30px;
  border: 1px solid rgba(2, 47, 44, 0.08);
  border-radius: var(--faal-radius);
  background: var(--faal-card);
  box-shadow: 0 12px 34px rgba(1, 20, 18, 0.05);
}

.faal-step-card h3 {
  margin: 0 0 8px;
  color: var(--faal-black);
  font-size: 22px;
  font-weight: 900;
}

.faal-step-card p {
  margin: 0;
  color: var(--faal-muted);
  font-size: 16px;
  line-height: 1.6;
}

.faal-steps-media {
  margin: 0;
  align-self: center;
  text-align: center;
}

.faal-steps-media img {
  width: 100%;
  max-width: 420px;
  height: auto;
  margin-inline: auto;
}

@media (max-width: 860px) {
  .faal-steps-grid {
    grid-template-columns: 1fr;
  }

  .faal-steps-media {
    order: -1;
  }

  .faal-steps-media img {
    max-width: 320px;
  }
}

.faal-guarantee-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
  padding: clamp(28px, 4vw, 56px);
  border-radius: var(--faal-radius-lg);
  text-align: right;
}

.faal-guarantee-card.faal-gradient-card {
  background:
    radial-gradient(circle at 88% 8%, rgba(255, 255, 255, 0.6), transparent 42%),
    linear-gradient(150deg, #fdfaf2 0%, #fdeab4 48%, #aee1a3 100%);
}

.faal-guarantee-copy {
  align-self: center;
}

/* Gold guarantee badge (Figma): sits above the "الضمان الذهبي" heading. Decorative. */
.faal-guarantee-badge {
  display: inline-grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin-bottom: 20px;
  border-radius: 999px;
  color: #7a5a12;
  background:
    radial-gradient(circle at 32% 28%, #fff6d8 0%, transparent 45%),
    linear-gradient(150deg, #f7d979 0%, #e6b53f 55%, #c8912a 100%);
  box-shadow: 0 12px 28px rgba(200, 145, 42, 0.35), inset 0 1px 2px rgba(255, 255, 255, 0.6);
}

.faal-guarantee-badge svg {
  width: 32px;
  height: 32px;
}

.faal-guarantee-card h2 {
  margin: 0 0 12px;
  color: var(--faal-black);
  font-size: clamp(30px, 4vw, 48px);
  font-weight: 900;
}

.faal-guarantee-sub {
  margin: 0 0 22px !important;
  color: var(--faal-black);
  font-size: clamp(18px, 2.2vw, 24px);
  font-weight: 900;
}

.faal-guarantee-card p {
  margin: 0;
  color: var(--faal-green-800);
  font-size: clamp(16px, 1.8vw, 20px);
  line-height: 1.7;
}

.faal-guarantee-media {
  margin: 0;
  border-radius: var(--faal-radius);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  box-shadow: 0 24px 60px rgba(1, 20, 18, 0.16);
}

.faal-guarantee-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

@media (max-width: 860px) {
  .faal-guarantee-card {
    grid-template-columns: 1fr;
  }

  .faal-guarantee-media {
    aspect-ratio: 16 / 10;
    order: -1;
  }
}

.faal-section-image img {
  width: 100%;
  height: auto;
  border-radius: var(--faal-radius-sm);
}

.faal-services {
  padding-block: var(--faal-section);
}

.faal-services-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.faal-section-action {
  margin-top: 32px;
  text-align: center;
}

/* Figma services: pricing packages (خدمات واتساب المؤسسي) */
.faal-package-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;
}

.faal-package-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 36px 32px;
  border: 1px solid rgba(2, 47, 44, 0.12);
  border-radius: var(--faal-radius);
  background: var(--faal-card);
  text-align: right;
}

/* The highlighted package wears a green→yellow gradient ring (Figma). It is drawn
   as a masked pseudo-element rather than a thicker border so the card keeps the
   exact same box as its neighbours — a wider border would shift its content by a
   pixel and break the row's baseline. */
.faal-package-card.is-featured {
  border-color: transparent;
  box-shadow: 0 22px 60px rgba(58, 194, 107, 0.18);
}

.faal-package-card.is-featured::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 2px;
  background: linear-gradient(200deg, var(--faal-yellow) 0%, var(--faal-mint) 45%, var(--faal-accent) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

/* Optional card image (external image from the theme editor, or the product's
   own store image). The box is reserved with aspect-ratio so a slow image can't
   shift the price/CTA below it. */
.faal-package-media {
  flex: 0 0 auto; /* the card is a flex column — keep aspect-ratio from being squashed */
  margin: 0 0 20px;
  border-radius: calc(var(--faal-radius) - 10px);
  overflow: hidden;
  background: rgba(2, 47, 44, 0.06);
  aspect-ratio: 16 / 10;
}

.faal-package-media a,
.faal-package-media img {
  display: block;
  width: 100%;
  height: 100%;
}

.faal-package-media img {
  object-fit: cover;
}

/* The card title doubles as the link to the product details page. */
.faal-package-name a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s ease;
}

.faal-package-name a:hover,
.faal-package-name a:focus-visible {
  color: var(--faal-accent);
  text-decoration: underline;
}

.faal-package-name {
  margin: 0 0 12px;
  color: var(--faal-black);
  font-size: 24px;
  font-weight: 900;
}

/* Title row — holds the package name and, when enabled, the price switch. */
.faal-package-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.faal-package-head .faal-package-name {
  margin-bottom: 0;
}

.faal-price-toggle {
  display: inline-flex;
  flex: 0 0 auto;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  background: rgba(2, 47, 44, 0.07);
}

.faal-price-toggle.is-loading {
  opacity: 0.55;
  pointer-events: none;
}

.faal-price-opt {
  padding: 6px 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--faal-muted);
  font: inherit;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.faal-price-opt.is-active {
  background: var(--faal-white);
  color: var(--faal-green-800);
  box-shadow: 0 2px 8px rgba(1, 20, 18, 0.1);
}

/* "تبدأ من" — the small label the merchant sets in the theme editor. Its own block
   above the price row, so the row keeps number + currency on one baseline. */
.faal-package-price-prefix {
  display: block;
  margin-bottom: 2px;
  color: var(--faal-muted);
  font-size: 14px;
  font-weight: 700;
}

.faal-package-price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 10px;
}

.faal-package-price b {
  font-size: 44px;
  font-weight: 900;
  color: var(--faal-black);
  line-height: 1;
}

/* salla.money() renders the riyal as an icon-font glyph; keep it a touch smaller
   than the digits so the number stays the headline, as in the design. */
.faal-package-price b i,
.faal-package-price b [class*="sicon-"] {
  font-size: 0.62em;
  font-style: normal;
}

.faal-package-price span,
.faal-package-currency {
  font-size: 16px;
  color: var(--faal-muted);
  font-weight: 800;
}

/* The one bold selling line under the price — the product's promotion title. */
.faal-package-highlight {
  margin: 0 0 4px;
  color: var(--faal-black);
  font-size: 18px;
  font-weight: 800;
}

.faal-package-note {
  margin: 0 0 20px;
  color: var(--faal-muted);
  font-size: 15px;
  line-height: 1.7;
}

.faal-package-features {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  display: grid;
  gap: 12px;
  flex: 1 1 auto;
}

.faal-package-features li {
  position: relative;
  padding-inline-start: 28px;
  color: var(--faal-green-800);
  font-size: 15px;
}

.faal-package-features li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 1px;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--faal-accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center / 12px no-repeat;
}

.faal-package-cta {
  width: 100%;
}

/* Figma services: gradient service cards (خدمات فال واتساب) */
.faal-service-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;
}

.faal-service-gcard {
  display: flex;
  flex-direction: column;
  padding: 32px;
  border-radius: var(--faal-radius);
  text-align: right;
}

.faal-service-gcard h3 {
  margin: 0 0 10px;
  color: var(--faal-black);
  font-size: 22px;
  font-weight: 900;
}

.faal-service-gprice {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 14px;
}

.faal-service-gprice b {
  font-size: 34px;
  font-weight: 900;
  color: var(--faal-black);
  line-height: 1;
}

.faal-service-gprice span {
  font-size: 15px;
  color: var(--faal-green-800);
  font-weight: 800;
}

/* Before-discount price beside a card price. product-card.js emits the <del> only
   when regular_price is genuinely higher than the price shown, so this never paints
   a fake strike-through. Mirrors .faal-product-price-was on the details page. */
.faal-package-was,
.faal-service-gwas {
  color: var(--faal-muted);
  font-size: 18px;
  font-weight: 700;
  text-decoration: line-through;
}

.faal-service-gcard p {
  margin: 0 0 22px;
  color: var(--faal-green-800);
  font-size: 15px;
  line-height: 1.6;
  flex: 1 1 auto;
}

.faal-service-gcta {
  align-self: flex-start;
}

/* When fed by real products, <salla-products-list> wraps the cards — make it
   (and any inner wrapper it renders) transparent to layout so our custom cards
   become direct grid/flex items. !important beats Salla's own component CSS. */
.faal-package-grid salla-products-list,
.faal-package-grid salla-products-list > div,
.faal-service-track salla-products-list,
.faal-service-track salla-products-list > div {
  display: contents !important;
}

.faal-package-grid faal-package-card {
  display: flex !important;
  flex-direction: column;
  height: 100%;
  min-height: 300px; /* reserve the card box while products fetch — no layout shift */
}

/* Salla's products-list adds an infinite-scroll / "load more" trigger that errors
   in this setup ("تعذر جلب المزيد"). Hide ONLY that trigger — never the wrapper
   that holds the cards (.s-products-list-wrapper), or the cards disappear. */
.faal-package-grid salla-products-list [class*="load-more"],
.faal-service-track salla-products-list [class*="load-more"],
.faal-package-grid salla-products-list [class*="loadmore"],
.faal-service-track salla-products-list [class*="loadmore"],
.faal-package-grid salla-products-list [class*="infinite"],
.faal-service-track salla-products-list [class*="infinite"],
.faal-package-grid salla-products-list salla-button,
.faal-service-track salla-products-list salla-button {
  display: none !important;
}

/* خدمات فال واتساب — horizontal slider (Figma) */
.faal-service-slider {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  gap: 12px;
  align-items: center;
}

.faal-service-track {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 4px;
  scrollbar-width: none;
  /* Center the cards when only one or two products come back (so a single card
     doesn't float against one edge), but fall back to start-aligned & scrollable
     when the list overflows. */
  justify-content: safe center;
}

.faal-service-track::-webkit-scrollbar {
  display: none;
}

.faal-service-track faal-service-card {
  flex: 0 0 clamp(260px, 30%, 340px);
  scroll-snap-align: start;
  display: flex !important;
  flex-direction: column;
  min-height: 300px; /* reserve height (tag selector — not the .faal-service-card class) */
}

@media (max-width: 640px) {
  .faal-service-slider {
    grid-template-columns: 40px minmax(0, 1fr) 40px;
    gap: 8px;
  }

  .faal-service-track faal-service-card {
    flex-basis: 80%;
  }
}

@media (max-width: 880px) {
  .faal-service-grid {
    grid-template-columns: 1fr;
  }

  /* The dynamic packages stay HORIZONTAL on mobile instead of stacking. Six
     full-height cards in a column is a very long scroll for a section the
     visitor is meant to compare across, so this reuses the .faal-service-track
     recipe: a snap-scrolling flex row with the scrollbar hidden. The cards are
     already direct children here — .faal-package-grid salla-products-list is
     display:contents above — so flex applies to them without another wrapper.
     4px of padding keeps the .is-featured gradient ring from being clipped by
     overflow-x, and `safe center` centres one or two cards without pinning a
     full row to the edge. */
  .faal-package-grid {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline-start: 4px;
    padding: 4px;
    scrollbar-width: none;
    justify-content: safe center;
  }

  .faal-package-grid::-webkit-scrollbar {
    display: none;
  }

  /* Both selectors on purpose: faal-package-card is the DYNAMIC custom element,
     .faal-package-card the hand-added <article>. The section renders them in one
     mixed row, so they must size identically. height:auto hands equal heights
     back to align-items:stretch (the 100% above was written for grid). */
  .faal-package-grid faal-package-card,
  .faal-package-grid .faal-package-card {
    flex: 0 0 min(82%, 320px);
    height: auto;
    scroll-snap-align: start;
  }
}

.faal-product-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.faal-service-card {
  min-height: 390px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 0 28px 28px;
  border: 1px solid rgba(2, 47, 44, 0.12);
  border-radius: var(--faal-radius-sm);
  background: var(--faal-card);
  box-shadow: 0 8px 20px rgba(1, 20, 18, 0.04);
  overflow: hidden;
}

.faal-product-grid .faal-service-card,
.faal-product-card {
  min-height: 360px;
  border-color: rgba(2, 47, 44, 0.14);
  background: linear-gradient(180deg, rgba(255, 254, 250, 0.96) 0%, rgba(255, 252, 244, 0.88) 100%);
  box-shadow: 0 18px 44px rgba(1, 20, 18, 0.08);
}

.faal-service-card.is-featured {
  border-color: var(--faal-accent);
  box-shadow: 0 0 0 3px rgba(58, 194, 107, 0.14), var(--faal-shadow);
}

.faal-product-grid .faal-service-card.is-featured,
.faal-product-card.is-featured {
  background: linear-gradient(180deg, rgba(255, 254, 250, 1) 0%, rgba(254, 233, 179, 0.28) 100%);
}

.faal-service-ribbon {
  margin: 0 -28px 24px;
  padding: 18px 28px;
  background: linear-gradient(180deg, #77f685 0%, var(--faal-yellow) 100%);
  color: var(--faal-green);
  font-size: 22px;
  font-weight: 900;
}

.faal-product-grid .faal-service-ribbon,
.faal-product-badge {
  margin: 0 -28px 24px;
  padding: 16px 28px;
  background: linear-gradient(180deg, rgba(119, 246, 133, 0.92) 0%, rgba(254, 233, 179, 0.95) 100%);
  color: var(--faal-green);
  font-size: 20px;
  font-weight: 900;
}

.faal-service-price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  color: var(--faal-black);
  text-align: center;
}

.faal-product-grid .faal-service-price,
.faal-product-price {
  color: var(--faal-green-800);
}

.faal-service-price b {
  font-size: 52px;
  font-weight: 900;
  line-height: 1;
}

.faal-service-price span {
  font-size: 18px;
  font-weight: 800;
}

.faal-service-card p {
  min-height: 54px;
  margin: 18px 0 22px;
  color: var(--faal-muted);
  text-align: center;
}

.faal-feature-list {
  display: grid;
  gap: 10px;
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
}

.faal-feature-list li {
  position: relative;
  padding-inline-start: 22px;
  color: var(--faal-green-800);
  font-size: 15px;
}

.faal-feature-list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0.62em;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--faal-green);
}

.faal-service-card .faal-btn {
  align-self: center;
  margin-top: auto;
}

.faal-salla-surface {
  padding: clamp(20px, 4vw, 40px);
  border: 1px solid rgba(2, 47, 44, 0.1);
  border-radius: var(--faal-radius);
  background: rgba(255, 254, 250, 0.72);
  box-shadow: 0 16px 48px rgba(1, 20, 18, 0.06);
  backdrop-filter: blur(12px);
}

/* ==========================================================================
   Cart page — themed item cards + native Twilight cart components
   (salla-quantity-input, salla-cart-coupons, salla-cart-summary-card). The
   native components inherit --color-primary (brand green) from master.twig.
   ========================================================================== */
.faal-cart-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
  gap: clamp(20px, 3vw, 36px);
  align-items: start;
}

.faal-cart-items {
  display: grid;
  gap: 16px;
}

.faal-cart-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 18px;
  align-items: start;
  padding: clamp(16px, 2.4vw, 22px);
  border: 1px solid var(--faal-line);
  border-radius: var(--faal-radius-sm);
  background: var(--faal-card);
}

.faal-cart-item-media {
  display: block;
  width: 96px;
  height: 84px;
  flex: none;
  border-radius: 12px;
  overflow: hidden;
  background: var(--faal-bg);
}

.faal-cart-item-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.faal-cart-item-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.faal-cart-item-name {
  color: var(--faal-green-800);
  font-size: clamp(15px, 1.9vw, 18px);
  font-weight: 800;
  line-height: 1.5;
}

.faal-cart-item-price {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--faal-green);
  font-weight: 800;
}

.faal-cart-item-price del {
  color: var(--faal-muted);
  font-weight: 600;
}

.faal-cart-item-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 4px;
}

/* Product options inside a cart line (reuses .faal-product-options) — tighter,
   narrower controls than the product page so they fit the item card. */
.faal-cart-options {
  display: block;
  margin: 2px 0 4px;
}
.faal-cart-options .s-product-options-option-container { margin-bottom: 10px; }
.faal-cart-options .s-product-options-option-container:last-child { margin-bottom: 0; }
.faal-cart-options .s-form-control { min-height: 40px; max-width: 320px; }

.faal-cart-item-remove {
  flex: none;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--faal-line);
  border-radius: 999px;
  background: transparent;
  color: var(--faal-muted);
  font-size: 18px;
  cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.faal-cart-item-remove:hover {
  color: #b42318;
  border-color: #f0c8c3;
  background: rgba(180, 35, 24, 0.06);
}

.faal-cart-aside {
  position: sticky;
  top: 96px;
  display: grid;
  gap: 16px;
}

/* salla-cart-summary-card ("ملخص الطلب") — Salla emits s-cart-summary-card-*
   classes in light DOM (confirmed from rendered store HTML). Theme it as a card
   matching .faal-product-purchase, with a brand-green checkout button. */
.faal-cart-summary .s-cart-summary-card {
  display: block;
  padding: clamp(20px, 2.6vw, 28px);
  border: 1px solid var(--faal-line);
  border-radius: var(--faal-radius);
  background: var(--faal-card);
  box-shadow: 0 12px 34px rgba(1, 20, 18, 0.05);
}

.faal-cart-summary .s-cart-summary-card-sheet-title {
  margin: 0 0 8px;
  color: var(--faal-green-800);
  font-family: inherit;
  font-size: 20px;
  font-weight: 900;
}

.faal-cart-summary .s-cart-summary-card-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  color: var(--faal-green-800);
  font-size: 15px;
  border-bottom: 1px dashed var(--faal-line);
}

.faal-cart-summary .s-cart-summary-card-line b { font-weight: 800; }

.faal-cart-summary .s-cart-summary-card-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--faal-line);
}

.faal-cart-summary .s-cart-summary-card-bar-label-text {
  color: var(--faal-green-800);
  font-weight: 900;
  font-size: 16px;
}

.faal-cart-summary .s-cart-summary-card-bar-count {
  margin-inline-start: 6px;
  color: var(--faal-muted);
  font-weight: 600;
  font-size: 13px;
}

.faal-cart-summary .s-cart-summary-card-bar-total {
  color: var(--faal-green);
  font-weight: 900;
  font-size: 22px;
  white-space: nowrap;
}

.faal-cart-summary .s-cart-summary-card-action {
  margin-top: 18px;
}

/* Checkout button ("اتمام الطلب"): salla-button → .s-button-element +
   .s-button-solid.s-button-primary. Brand-green pill (color from --color-primary,
   set authoritatively in master.twig), matching .faal-product-add. */
.faal-cart-summary .s-button-element,
.faal-cart-summary button.s-button-btn {
  min-height: 52px;
  border-radius: 999px;
  font-family: inherit;
  font-weight: 800;
  font-size: 16px;
  transition: background 180ms ease;
}
.faal-cart-summary .s-button-wide { width: 100%; }
.faal-cart-summary .s-button-solid.s-button-primary {
  background: var(--color-primary);
  color: var(--color-primary-reverse);
  border-color: var(--color-primary);
}
.faal-cart-summary .s-button-solid.s-button-primary:hover {
  background: var(--faal-black);
  border-color: var(--faal-black);
}

/* Empty state */
.faal-cart-empty {
  max-width: 520px;
  margin-inline: auto;
  display: grid;
  justify-items: center;
  gap: 16px;
  padding-block: clamp(40px, 6vw, 64px);
  text-align: center;
}

.faal-cart-empty i {
  font-size: 52px;
  color: var(--faal-accent);
}

.faal-cart-empty p {
  margin: 0;
  color: var(--faal-muted);
  font-size: 18px;
  font-weight: 700;
}

@media (max-width: 860px) {
  .faal-cart-grid {
    grid-template-columns: 1fr;
  }

  .faal-cart-aside {
    position: static;
  }
}

.faal-salla-products-list {
  display: block;
  min-height: 320px;
}

/* Salla renders the cards inside a single child, .s-products-list-wrapper (with
   an s-products-list-vertical-cards modifier that stacks them in one column).
   The salla-products-list host holds only that one wrapper, so gridding the host
   does nothing — the GRID must go on the wrapper for the cards to spread. */
.faal-salla-products-list .s-products-list-wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: clamp(16px, 2vw, 24px);
}

/* Salla's products-list runs a next-page probe for infinite scroll; in
   preview / maintenance that fetch can fail and flash "تعذر جلب المزيد 🐢" even
   though the list already resolved to the correct "no more products" state
   (s-infinite-scroll-last). Hide only that transient error text — not the
   wrapper (cards) or the loader. */
.faal-salla-products-list .s-infinite-scroll-error {
  display: none !important;
}

/* ── Products index: toolbar (mobile filter trigger + sort) ── */
.faal-product-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin: 0 0 24px;
}

.faal-filters-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid rgba(2, 47, 44, 0.16);
  border-radius: 999px;
  background: var(--faal-white);
  color: var(--faal-green);
  font-family: inherit;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}

.faal-sort {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-inline-start: auto;
}

.faal-sort label {
  font-size: 14px;
  font-weight: 700;
  color: var(--faal-green);
  white-space: nowrap;
}

.faal-sort-select {
  appearance: none;
  -webkit-appearance: none;
  min-height: 44px;
  border: 1px solid rgba(2, 47, 44, 0.16);
  border-radius: var(--faal-radius-sm);
  background-color: var(--faal-white);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23022f2c' stroke-width='2' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  color: var(--faal-green);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
[dir="ltr"] .faal-sort-select { padding: 0 40px 0 16px; background-position: right 14px center; }
[dir="rtl"] .faal-sort-select { padding: 0 16px 0 40px; background-position: left 14px center; }

/* ── Products index: layout (filters rail + list) ── */
.faal-product-index-layout {
  display: grid;
  grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 36px);
  align-items: start;
}

/* No filters → no rail: let the list take the full width so its card grid can
   show multiple columns instead of being boxed into the 280px filter column. */
.faal-product-index-layout.is-listonly {
  grid-template-columns: minmax(0, 1fr);
}

.faal-filters-drawer {
  position: sticky;
  top: 24px;
  align-self: start;
}
.faal-filters-drawer-head { display: none; }

/* Style the native <salla-filters> host with Faal tokens */
.faal-salla-filters {
  display: block;
  padding: clamp(16px, 2vw, 22px);
  border: 1px solid rgba(2, 47, 44, 0.1);
  border-radius: var(--faal-radius);
  background: rgba(255, 254, 250, 0.72);
  color: var(--faal-green-800);
}
.faal-salla-filters input[type="checkbox"],
.faal-salla-filters input[type="radio"] { accent-color: var(--faal-accent); }

.faal-filters-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1100;
  background: rgba(1, 20, 18, 0.45);
  backdrop-filter: blur(2px);
}
.faal-filters-backdrop[hidden] { display: none; }

@media (min-width: 1025px) {
  .faal-filters-trigger { display: none; }
}

@media (max-width: 1024px) {
  .faal-product-index-layout { grid-template-columns: minmax(0, 1fr); }

  .faal-filters-drawer {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1200;
    width: min(360px, 88vw);
    height: 100%;
    margin: 0;
    padding: 0;
    background: var(--faal-cream);
    box-shadow: 0 0 60px rgba(1, 20, 18, 0.25);
    transform: translateX(-100%);
    transition: transform 260ms ease;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  [dir="rtl"] .faal-filters-drawer { left: auto; right: 0; transform: translateX(100%); }
  body.faal-filters-opened .faal-filters-drawer { transform: translateX(0); }
  body.faal-filters-opened { overflow: hidden; }

  .faal-filters-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    padding: 18px 20px;
    border-bottom: 1px solid rgba(2, 47, 44, 0.1);
    background: var(--faal-cream);
    font-weight: 900;
    color: var(--faal-green);
  }
  .faal-filters-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 999px;
    background: rgba(2, 47, 44, 0.08);
    color: var(--faal-green);
    font-size: 18px;
    cursor: pointer;
  }
  .faal-salla-filters {
    border: none;
    border-radius: 0;
    background: transparent;
    padding: 16px 20px 40px;
  }
}

.faal-product-detail .faal-salla-surface {
  padding: clamp(20px, 4vw, 48px);
}

.faal-product-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
}

.faal-product-media {
  margin: 0;
}

.faal-product-info h2 {
  margin: 0 0 8px;
  color: var(--faal-black);
  font-size: clamp(26px, 3.4vw, 40px);
  font-weight: 900;
}

.faal-product-subtitle {
  margin: 0 0 16px;
  color: var(--faal-muted);
  font-size: 16px;
  line-height: 1.6;
}

.faal-product-rating {
  display: block;
  margin-bottom: 14px;
}

.faal-product-info { min-width: 0; }

.faal-product-price {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 2px;
}

.faal-product-price-label {
  font-size: 14px;
  font-weight: 800;
  color: var(--faal-muted);
}

.faal-product-price b {
  font-size: clamp(34px, 4vw, 44px);
  font-weight: 900;
  color: var(--faal-black);
  line-height: 1;
}

.faal-product-price-was {
  color: var(--faal-muted);
  font-size: 20px;
  font-weight: 700;
  text-decoration: line-through;
}

.faal-product-tax-note {
  margin: 0 0 22px;
  color: var(--faal-muted);
  font-size: 13px;
}

/* Description prose — restores lists/tables so spec pairs don't run together. */
.faal-product-desc {
  color: var(--faal-green-800);
  font-size: 17px;
  line-height: 1.8;
  /* Defensive: some catalog products store specs as one long unspaced string in the
     description (e.g. "المقاس36نصف محيط..."). Force it to wrap inside the column so it
     never overflows horizontally or forces a full-page scroll. */
  overflow-wrap: anywhere;
  word-break: break-word;
}
.faal-product-desc p { margin: 0 0 12px; }
.faal-product-desc ul,
.faal-product-desc ol { margin: 0 0 12px; padding-inline-start: 1.4em; list-style: revert; }
.faal-product-desc li { margin-block: 4px; }
.faal-product-desc a { color: var(--faal-accent); text-decoration: underline; }
.faal-product-desc img { border-radius: var(--faal-radius-sm); margin: 12px 0; }

.faal-product-desc table,
.faal-product-specs table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  margin: 4px 0 12px;
}
.faal-product-desc table td, .faal-product-desc table th,
.faal-product-specs table td, .faal-product-specs table th {
  padding: 10px 16px;
  border-bottom: 1px solid var(--faal-line);
  text-align: start;
  vertical-align: top;
}
.faal-product-desc table tr td:first-child,
.faal-product-specs table tr td:first-child {
  width: 42%;
  color: var(--faal-muted);
  font-weight: 700;
  background: var(--faal-cream);
}
.faal-product-desc dl,
.faal-product-specs dl { display: grid; grid-template-columns: max-content 1fr; margin: 0; }
.faal-product-desc dt,
.faal-product-specs dt {
  padding: 10px 16px; font-weight: 700; color: var(--faal-muted);
  background: var(--faal-cream); border-bottom: 1px solid var(--faal-line);
}
.faal-product-desc dd,
.faal-product-specs dd {
  margin: 0; padding: 10px 16px; color: var(--faal-green-800);
  border-bottom: 1px solid var(--faal-line);
}

/* Read-more clamp (JS toggles .faal-clamp off). */
.faal-product-desc.faal-clamp {
  max-height: 168px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 62%, transparent 100%);
}
.faal-readmore-btn {
  margin: 10px 0 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--faal-green);
  font-family: inherit;
  font-size: 15px;
  font-weight: 800;
  cursor: pointer;
}
.faal-product-desc:not(.faal-clamp) + .faal-readmore-btn { display: none; }

/* SKU */
.faal-product-sku {
  display: flex;
  gap: 8px;
  align-items: baseline;
  margin: 22px 0 0;
  font-size: 15px;
}
.faal-product-sku-label { color: var(--faal-muted); font-weight: 700; }
.faal-product-sku-value {
  color: var(--faal-green-800);
  font-weight: 800;
  direction: ltr;
  unicode-bidi: plaintext;
}

/* Specifications card (native <salla-metadata>) */
.faal-product-specs {
  margin: 22px 0 0;
  border: 1px solid var(--faal-line);
  border-radius: var(--faal-radius-sm);
  overflow: hidden;
  background: var(--faal-card);
}
.faal-product-specs-title {
  margin: 0;
  padding: 14px 18px;
  font-size: 16px;
  font-weight: 900;
  color: var(--faal-black);
  background: var(--faal-cream);
  border-bottom: 1px solid var(--faal-line);
}
.faal-product-specs salla-metadata { display: block; padding: 6px 2px; }

.faal-product-main-image {
  width: 100%;
  height: auto;
  border-radius: var(--faal-radius);
  object-fit: cover;
  background: var(--faal-cream);
}

.faal-product-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.faal-product-thumb {
  width: 72px;
  height: 72px;
  padding: 0;
  border: 1px solid rgba(2, 47, 44, 0.14);
  border-radius: 12px;
  overflow: hidden;
  background: var(--faal-cream);
  cursor: pointer;
  transition: border-color 160ms ease;
}
.faal-product-thumb.is-active { border-color: var(--faal-accent); }
.faal-product-thumb img { width: 100%; height: 100%; object-fit: cover; }

/* Product video: plays in the main image slot, so it inherits the gallery's
   size and rounding instead of opening a modal over the page. */
.faal-product-video-stage {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--faal-radius);
  overflow: hidden;
  background: var(--faal-green-800);
}

.faal-product-video-stage iframe,
.faal-product-video-stage video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* The video thumb is the product photo dimmed, with a play badge over it. */
.faal-product-thumb--video {
  position: relative;
}

.faal-product-thumb--video img {
  filter: brightness(0.72);
}

.faal-product-thumb-play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 26px;
  height: 26px;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
}

.faal-product-thumb-play::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  /* Triangle, nudged right of centre so it reads as centred inside the circle.
     Physical (not logical) — a play glyph points the same way in both directions. */
  transform: translate(-40%, -50%);
  border-style: solid;
  border-width: 5px 0 5px 8px;
  border-color: transparent transparent transparent var(--faal-green);
}

.faal-product-options { display: block; margin-bottom: 4px; }

/* ─────────────────────────────────────────────────────────────────────────
   Native Twilight web components — styled via the REAL light-DOM `s-*` classes
   these components render (verified from the live product page DOM), scoped
   under each `.faal-*` wrapper so other pages aren't affected. Never
   deep/shadow selectors. This hand-built theme has no Twilight Tailwind bundle,
   so these classes ship unstyled — we brand them; color/font come from the
   inherited tokens (--color-primary / --font-main) set in master.twig.
   ───────────────────────────────────────────────────────────────────────── */

/* salla-quantity-input → .s-quantity-input-container / -button / -increase-button /
   -decrease-button + numeric input. SAME styling shared by the product page
   (.faal-product-qty) and the cart page (.faal-cart-qty) so they're consistent. */
.faal-product-qty .s-quantity-input-container,
.faal-cart-qty .s-quantity-input-container {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  border: 1px solid var(--faal-line);
  border-radius: 999px;
  background: var(--faal-white);
  overflow: hidden;
}
.faal-product-qty .s-quantity-input-button,
.faal-product-qty .s-quantity-input-increase-button,
.faal-product-qty .s-quantity-input-decrease-button,
.faal-cart-qty .s-quantity-input-button,
.faal-cart-qty .s-quantity-input-increase-button,
.faal-cart-qty .s-quantity-input-decrease-button {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: var(--faal-green);
  font-family: inherit;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: background 160ms ease;
}
.faal-product-qty .s-quantity-input-button:hover,
.faal-product-qty .s-quantity-input-increase-button:hover,
.faal-product-qty .s-quantity-input-decrease-button:hover,
.faal-cart-qty .s-quantity-input-button:hover,
.faal-cart-qty .s-quantity-input-increase-button:hover,
.faal-cart-qty .s-quantity-input-decrease-button:hover { background: rgba(2, 47, 44, 0.08); }
.faal-product-qty input,
.faal-cart-qty input {
  width: 46px;
  height: 44px;
  border: 0;
  background: transparent;
  color: var(--faal-green-800);
  font-family: inherit;
  font-weight: 800;
  font-size: 16px;
  text-align: center;
  -moz-appearance: textfield;
}
.faal-product-qty input::-webkit-outer-spin-button,
.faal-product-qty input::-webkit-inner-spin-button,
.faal-cart-qty input::-webkit-outer-spin-button,
.faal-cart-qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* salla-product-options (.faal-product-options) → .s-product-options-option-container /
   -option-label (<b> + <small>) / -option-content / select.s-form-control */
.faal-product-options .s-product-options-option-container { margin-bottom: 16px; }
.faal-product-options .s-product-options-option-label {
  display: block;
  margin-bottom: 8px;
  color: var(--faal-black);
  font-family: inherit;
  font-size: 15px;
  font-weight: 800;
}
.faal-product-options .s-product-options-option-label b { font-weight: 800; }
.faal-product-options .s-product-options-option-label small { margin-inline-start: 6px; color: var(--faal-muted); font-weight: 600; }
/* .s-form-control is Salla's shared control class (select / text / textarea) — base first,
   then a select-only chevron on the correct RTL/LTR side. */
.faal-product-options .s-form-control {
  width: 100%;
  min-height: 48px;
  padding: 0 16px;
  border: 1px solid rgba(2, 47, 44, 0.16);
  border-radius: 14px;
  background-color: var(--faal-white);
  color: var(--faal-green-800);
  font-family: inherit;
  font-size: 15px;
}
.faal-product-options textarea.s-form-control { min-height: 110px; padding: 12px 16px; resize: vertical; line-height: 1.6; }
.faal-product-options select.s-form-control {
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23022f2c' stroke-width='2' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
}
[dir="rtl"] .faal-product-options select.s-form-control { padding: 0 16px 0 40px; background-position: left 14px center; }
[dir="ltr"] .faal-product-options select.s-form-control { padding: 0 40px 0 16px; background-position: right 14px center; }
.faal-product-options .s-form-control:focus {
  outline: none;
  border-color: var(--faal-accent);
  box-shadow: 0 0 0 3px rgba(58, 194, 107, 0.16);
}

/* salla-add-product-button (.faal-product-add) → renders <salla-button> as
   button.s-button-element.s-button-solid.s-button-wide.s-button-primary + .s-button-text.
   Color comes from --color-primary (FIX 1); we set shape/size to the Faal pill button. */
.faal-product-add .s-button-element,
.faal-product-add button.s-button-btn {
  min-height: 52px;
  border-radius: 999px;
  font-family: inherit;
  font-weight: 800;
  font-size: 16px;
  transition: background 180ms ease, transform 180ms ease;
}
.faal-product-add .s-button-wide { width: 100%; }
.faal-product-add .s-button-solid.s-button-primary {
  background: var(--color-primary);
  color: var(--color-primary-reverse);
  border-color: var(--color-primary);
}
.faal-product-add .s-button-solid.s-button-primary:hover { background: var(--faal-black); border-color: var(--faal-black); }

/* Purchase card (options + quantity + add-to-cart) */
.faal-product-purchase {
  margin: 26px 0 0;
  padding: clamp(18px, 2.5vw, 26px);
  border: 1px solid var(--faal-line);
  border-radius: var(--faal-radius);
  background: var(--faal-card);
  box-shadow: 0 12px 34px rgba(1, 20, 18, 0.05);
}

.faal-product-buy {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--faal-line);
}
.faal-product-buy-price { display: flex; align-items: baseline; gap: 8px; }
.faal-product-buy-price span { color: var(--faal-muted); font-weight: 700; font-size: 14px; }
.faal-product-buy-price b { color: var(--faal-black); font-weight: 900; font-size: 24px; }

.faal-product-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.faal-product-add { min-width: 200px; }

.faal-related-products .faal-section-title,
.faal-product-reviews {
  margin-top: 8px;
}

/* ============================================================
   Product reviews (<salla-comments>)
   Salla renders this component into the LIGHT DOM with .s-comments-* /
   .s-reviews-summary-* classes and ships its own component CSS, which is why the
   overrides below need !important. The comment list becomes a carousel — app.js
   wraps it and injects the shared arrows once Salla has rendered the items.
   ============================================================ */
.faal-product-reviews {
  max-width: 1100px;
  margin-inline: auto;
  padding-block: clamp(32px, 4vw, 56px);
}

.s-comments-title {
  position: relative;
  font-size: 1.6rem !important;
  font-weight: 800 !important;
  color: var(--faal-green) !important;
  text-align: center !important;
  margin-bottom: 22px !important;
}

.s-comments-title::after {
  content: "";
  display: block;
  width: 56px;
  height: 4px;
  margin: 10px auto 0;
  border-radius: 4px;
  background: linear-gradient(90deg, #00a896, var(--faal-green));
}

/* ---- Summary card: average, recommendation and per-star bars in one row ---- */
.s-reviews-summary-wrapper {
  margin-bottom: 24px !important;
  padding: 20px 18px !important;
  border: 1px solid rgba(2, 47, 44, 0.06) !important;
  border-radius: var(--faal-radius-sm) !important;
  background: var(--faal-white) !important;
  box-shadow: 0 10px 30px rgba(0, 47, 44, 0.07) !important;
}

.s-reviews-summary-header {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 18px !important;
}

.s-reviews-summary-overall-section {
  flex-shrink: 0 !important;
  min-width: 128px;
  text-align: center !important;
}

.s-reviews-summary-average {
  margin: 0 !important;
  font-size: 3rem !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  color: var(--faal-green) !important;
}

.s-rating-stars-wrapper {
  justify-content: center !important;
  margin: 6px 0 !important;
}

.s-rating-stars-btn-star svg {
  width: 22px !important;
  height: 22px !important;
  fill: #f59e0b !important;
}

.s-reviews-summary-count {
  margin-top: 3px !important;
  font-size: 0.86rem !important;
  color: var(--faal-muted) !important;
}

.s-reviews-summary-header-section {
  flex-shrink: 0 !important;
  padding: 12px 18px !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, #ecfdf5, #d1fae5) !important;
  text-align: center !important;
}

.s-reviews-summary-recommendation-percentage {
  margin: 0 !important;
  font-size: 1.6rem !important;
  font-weight: 800 !important;
  color: #065f46 !important;
}

.s-reviews-summary-header-section .s-reviews-summary-count {
  margin-top: 2px !important;
  font-size: 0.86rem !important;
  font-weight: 600 !important;
  color: #047857 !important;
}

.s-reviews-summary-rows {
  display: flex !important;
  flex: 1 !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin-top: 0 !important;
  min-width: 190px;
}

.s-reviews-summary-row {
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
}

.s-reviews-summary-row-rate {
  display: flex;
  align-items: center;
  gap: 3px;
  min-width: 36px;
  font-size: 0.92rem !important;
  font-weight: 700 !important;
  color: var(--faal-green) !important;
}

.s-reviews-summary-row-rate svg {
  width: 13px !important;
  height: 13px !important;
  fill: #f59e0b !important;
}

.s-progress-bar-wrapper {
  flex: 1;
  height: 8px !important;
  border-radius: 20px !important;
  background: #e5e7eb !important;
  overflow: hidden !important;
}

.s-progress-bar-progress {
  border-radius: 20px !important;
  background: linear-gradient(90deg, var(--faal-green), #00a896) !important;
}

.s-reviews-summary-percentage {
  min-width: 40px;
  text-align: left;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  color: var(--faal-muted) !important;
}

/* ---- Comments ---- */
.s-comments-header {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  margin: 20px 0 12px !important;
}

.s-comments-count-label {
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  color: var(--faal-green) !important;
}

/* app.js wraps the list in this shell and injects the two arrows as its first and
   last children — which is exactly a three-column grid. The arrows sit BESIDE the
   track, not over it: these cards are text, and an opaque button over a sentence
   is worse than the width it costs. (Reserving the space with padding on the
   scroller instead does not hold — an RTL scroll container starts scrolled past
   its start padding, so the first card ends up under the button anyway.) */
.faal-comments-carousel {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  gap: 10px;
  align-items: center;
}

.faal-comments-track {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 12px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory !important;
  /* Top/bottom: room for the cards' hover lift and shadow, which the scroll
     container clips. Inline: a gutter for the arrows, so a card is never parked
     under one — these cards are text, and an opaque button over a sentence is
     worse than the width it costs. */
  padding: 6px 2px 14px !important;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}

.faal-comments-track::-webkit-scrollbar {
  display: none;
}

.s-comments-item,
salla-comment-item.s-comments-item {
  display: block !important;
  flex-shrink: 0 !important;
  width: 280px !important;
  min-width: 280px !important;
  max-width: 280px !important;
  scroll-snap-align: start !important;
}

.s-comments-item-wrapper {
  height: 100%;
  padding: 16px !important;
  border: 1px solid rgba(2, 47, 44, 0.05) !important;
  border-radius: var(--faal-radius-sm) !important;
  background: var(--faal-white) !important;
  box-shadow: 0 6px 20px rgba(0, 47, 44, 0.07) !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}

.s-comments-item-wrapper:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(0, 47, 44, 0.12) !important;
}

.s-comments-item-user-info-name-with-margin {
  margin: 0 !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  color: var(--faal-black) !important;
}

.s-comments-item-has-order-check-text {
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  color: #10b981 !important;
}

.s-comments-item-has-order-check-icon svg {
  width: 13px !important;
  height: 13px !important;
  fill: #10b981 !important;
}

.s-comments-item-timestamp {
  margin-top: 2px !important;
  font-size: 0.78rem !important;
  color: #9ca3af !important;
}

.s-comments-item .s-rating-stars-btn-star svg {
  width: 16px !important;
  height: 16px !important;
}

.s-comments-item-content p {
  margin: 8px 0 10px !important;
  font-size: 0.98rem !important;
  font-weight: 500 !important;
  line-height: 1.6 !important;
  color: #1f2937 !important;
}

.s-comments-item-admin {
  margin-top: 10px !important;
}

.s-comments-item-admin-wrapper {
  padding: 12px !important;
  border-radius: 12px !important;
  border-inline-start: 4px solid #00a896 !important;
  background: linear-gradient(135deg, #f0fdfa, #ecfdf5) !important;
}

.s-comments-item-admin .s-comments-item-user-info-name-with-margin {
  font-size: 0.88rem !important;
  color: var(--faal-green) !important;
}

.s-comments-item-admin .s-comments-item-content p {
  margin: 4px 0 0 !important;
  font-size: 0.85rem !important;
  color: #374151 !important;
}

.s-comments-item-like-btn .s-button-element {
  padding: 4px 12px !important;
  border-radius: 50px !important;
  border-color: #00a896 !important;
  color: #00a896 !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  transition: all 0.25s ease !important;
}

.s-comments-item-like-btn .s-button-element:hover {
  background: #00a896 !important;
  color: var(--faal-white) !important;
}

.s-translate-all-wrap,
.s-translate-wrap {
  display: none !important;
}

/* Arrows sit over the ends of the list, pulled slightly outside it so they do not
   cover a card. Restate the centring on hover: the shared button lifts with a
   plain translateY, which would otherwise drop it. */
.faal-comments-carousel .faal-carousel-btn {
  background: var(--faal-white);
}

@media (max-width: 768px) {
  .s-reviews-summary-header {
    flex-wrap: nowrap !important;
    gap: 12px !important;
    overflow-x: auto !important;
    padding-bottom: 6px;
  }

  .s-reviews-summary-overall-section {
    min-width: 112px !important;
  }

  .s-reviews-summary-average {
    font-size: 2.5rem !important;
  }

  .s-reviews-summary-header-section {
    min-width: 104px;
    padding: 10px 14px !important;
  }

  .s-reviews-summary-recommendation-percentage {
    font-size: 1.4rem !important;
  }

  .s-reviews-summary-rows {
    min-width: 172px !important;
  }

  .s-comments-item,
  salla-comment-item.s-comments-item {
    width: 258px !important;
    min-width: 258px !important;
    max-width: 258px !important;
  }

  /* Narrower arrow columns on a phone — every pixel of card width counts. */
  .faal-comments-carousel {
    grid-template-columns: 34px minmax(0, 1fr) 34px;
    gap: 6px;
  }

  .faal-comments-carousel .faal-carousel-btn {
    width: 34px;
    height: 34px;
  }
}

@media (max-width: 480px) {
  .s-reviews-summary-average {
    font-size: 2.2rem !important;
  }

  .s-rating-stars-btn-star svg {
    width: 18px !important;
    height: 18px !important;
  }

  .s-comments-item,
  salla-comment-item.s-comments-item {
    width: 240px !important;
    min-width: 240px !important;
    max-width: 240px !important;
  }
}

/* Related products ("خدمات قد تهمّك") use the native <salla-products-slider> with Salla's
   DEFAULT card (custom-salla-product-card) — the theme-raed pattern (no product-card-component
   attribute). Salla renders the card in LIGHT DOM with .s-product-card-* classes; a hand-built
   theme has no Twilight Tailwind bundle to style them, so the card paints unstyled. Theme them
   below (globally — related slider, products-list, cross-sells all use the same card). */
.faal-related-products salla-products-slider {
  display: block;
}

/* ROOT-CAUSE FIX for the related slider layout: the native <salla-products-slider> renders
   slides as `.s-products-slider-card.swiper-slide`, but the twilight-components slide-sizing
   CSS isn't bundled in this hand-built theme, so the slides have NO width and fall back to the
   base Swiper rule `.swiper-slide { width: 100% }` → one oversized card per view. Give the
   slide a constrained, responsive width (Swiper runs slidesPerView:'auto', so slide width is
   CSS-driven). Scoped to this section so other sliders are untouched. */
.faal-related-products .s-products-slider-card {
  box-sizing: border-box;
  flex: 0 0 auto !important;      /* don't stretch to fill the row */
  width: clamp(210px, 22vw, 252px) !important;   /* ~4–5 cards per view on desktop */
  height: auto;
  padding-inline: 8px;           /* gap between cards, independent of Swiper spaceBetween */
}
.faal-related-products .s-product-card-entry { width: 100%; }   /* card fills its slide */

@media (max-width: 1024px) {
  .faal-related-products .s-products-slider-card { width: clamp(200px, 40vw, 240px) !important; } /* ~2–3 */
}
@media (max-width: 600px) {
  .faal-related-products .s-products-slider-card { width: 62vw !important; }   /* ~2 with a peek */
}

/* Related slider nav arrows — round Faal buttons; RTL keeps them on the correct sides
   (the slider container is dir="rtl", so Swiper flows first card → right, leftward). */
.faal-related-products .s-slider-nav-arrow,
.faal-related-products .s-slider-block__title-nav button,
.faal-related-products .swiper-button-prev,
.faal-related-products .swiper-button-next {
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(2, 47, 44, 0.14);
  border-radius: 999px;
  background: var(--faal-card);
  color: var(--faal-green);
  transition: background 180ms ease, color 180ms ease;
}
.faal-related-products .s-slider-nav-arrow:hover,
.faal-related-products .s-slider-block__title-nav button:hover,
.faal-related-products .swiper-button-prev:hover,
.faal-related-products .swiper-button-next:hover {
  background: var(--faal-green);
  color: var(--faal-white);
}

/* Related-slider CARD polish. Scoped selectors (higher specificity than Salla's runtime base
   card CSS, which was overriding the global .s-product-card-* rules and flattening the cards).
   Reuses the Faal card aesthetic used across the theme. */
.faal-related-products .s-product-card-entry {
  display: flex;
  flex-direction: column;
  height: 100%;                                  /* equal-height cards, no ragged bottoms */
  border: 1px solid rgba(2, 47, 44, 0.1);
  border-radius: var(--faal-radius-sm);
  background: var(--faal-card);
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(1, 20, 18, 0.05);
}

/* Image: the loaded product image must COVER the base placeholder glyph
   (.s-product-card-image::before content "\ec1f"). Give the container a fixed ratio, drop the
   placeholder to the back, and make the <img> fill + cover on top. */
.faal-related-products .s-product-card-image {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--faal-cream);
}
/* Salla injects a placeholder glyph on .s-product-card-image::before (sallaicons
   content "\ec1f"). z-index couldn't hide it — the ::before is STATIC, so z-index
   is inert and the glyph paints as a stray icon over the image. Real products
   always have an image, so remove the pseudo-element outright (global). */
.s-product-card-image::before { display: none !important; }
.faal-related-products .s-product-card-image img,
.faal-related-products .s-product-card-image-cover,
.faal-related-products .s-product-card-image-contain {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Content: fill remaining height with a title → price → button rhythm (Figma spacing).
   The body is deliberately NOT painted --faal-accent (#3ac26b) any more. That green
   was set here while every text color in the card was written for a LIGHT surface,
   so the whole block failed contrast at once: white title 2.4:1, muted subtitle
   1.6:1, and .s-product-card-sale-price (also --faal-accent) painted green on green
   — literally invisible. Staying transparent lets .s-product-card-entry's
   --faal-card show through, so "خدمات قد تهمك" matches the cards on every other page. */
.faal-related-products .s-product-card-content {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1 1 auto;
  padding: 16px;
  text-align: start;                             /* RTL → right-aligned */
  background-color: transparent;
}
.faal-related-products .s-product-card-content-title,
.faal-related-products .s-product-card-content-title a {
  color: var(--faal-black);
  font-family: inherit;
  font-weight: 800;
  font-size: 17px;                               /* was 32px — a page-heading size inside a card */
  line-height: 1.4;
}
.faal-related-products .s-product-card-content-subtitle { color: var(--faal-muted); font-size: 13px; }

/* Price: current prominent (green / accent for sale), old price muted + struck. */
.faal-related-products .s-product-card-price,
.faal-related-products .s-product-card-sale-price {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  color: var(--faal-green-800);
  font-weight: 900;
  font-size: 18px;
}
.faal-related-products .s-product-card-sale-price { color: var(--faal-accent); }
.faal-related-products .s-product-card-starting-price { color: var(--faal-muted); font-size: 13px; font-weight: 700; }
.faal-related-products .s-product-card-price del,
.faal-related-products .s-product-card-price s,
.faal-related-products .s-product-card-sale-price del,
.faal-related-products .s-product-card-sale-price s {
  color: var(--faal-muted);
  font-size: 14px;
  font-weight: 700;
  text-decoration: line-through;
}

/* Add-to-cart: brand-green pill (--color-primary), pushed to the card bottom for equal height. */
.faal-related-products .s-product-card-entry salla-add-product-button,
.faal-related-products .s-product-card-entry .s-button-element { margin-top: auto; }
.faal-related-products .s-product-card-entry .s-button-element {
  min-height: 44px;
  border-radius: 999px;
  font-family: inherit;
  font-weight: 800;
  font-size: 15px;
}
.faal-related-products .s-product-card-entry .s-button-solid.s-button-primary,
.faal-related-products .s-product-card-entry .s-button-primary {
  background: var(--color-primary);
  color: var(--color-primary-reverse);
  border-color: var(--color-primary);
}

/* Salla product card (custom-salla-product-card) — themed via documented .s-product-card-*
   classes (doc-422718). Global so cards never paint unstyled anywhere. Button + accents pull
   --color-primary (FIX 1). */
.s-product-card-entry {
  border: 1px solid rgba(2, 47, 44, 0.1);
  border-radius: var(--faal-radius-sm);
  background: var(--faal-card);
  overflow: hidden;
  box-shadow: 0 12px 30px rgba(1, 20, 18, 0.05);
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.s-product-card-entry:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 44px rgba(1, 20, 18, 0.1);
}
.s-product-card-image { position: relative; background: var(--faal-cream); } /* anchor for the wishlist button */
.s-product-card-content { padding: 16px; }
.s-product-card-content-title,
.s-product-card-content-title a {
  color: var(--faal-black);
  font-family: inherit;
  font-weight: 800;
  font-size: 16px;
  line-height: 1.4;
}
.s-product-card-content-subtitle { color: var(--faal-muted); font-size: 13px; }
.s-product-card-price { color: var(--faal-green-800); font-weight: 900; font-size: 18px; }
.s-product-card-sale-price { color: var(--faal-accent); font-weight: 900; }
.s-product-card-starting-price { color: var(--faal-muted); font-size: 13px; font-weight: 700; }
.s-product-card-rating { color: var(--faal-muted); }
.s-product-card-promotion-title {
  background: linear-gradient(180deg, rgba(119, 246, 133, 0.92) 0%, rgba(254, 233, 179, 0.95) 100%);
  color: var(--faal-green);
  font-weight: 900;
}
/* Wishlist heart: Salla renders it over the image but hides it until hover via
   `.animated`. Make it an always-visible white circular button in the image
   corner. The <salla-button> wrap is positioned; the inner <button> is the pill. */
.s-product-card-wishlist-btn.s-button-wrap {
  position: absolute;
  top: 10px;
  inset-inline-end: 10px;
  z-index: 3;
  width: auto;
  min-height: 0;
  opacity: 1 !important;
  transform: none !important;
}
.s-product-card-wishlist-btn.s-button-element {
  width: 38px;
  height: 38px;
  min-height: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 999px;
  background: var(--faal-white);
  color: var(--faal-green);
  box-shadow: 0 6px 16px rgba(1, 20, 18, 0.16);
  cursor: pointer;
  opacity: 1 !important;
  transition: background 160ms ease, color 160ms ease, transform 160ms ease;
}
.s-product-card-wishlist-btn.s-button-element:hover {
  background: var(--faal-green);
  color: var(--faal-white);
  transform: scale(1.06);
}
.s-product-card-wishlist-btn svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}
/* The card's add-to-cart (salla-add-product-button → .s-button-*) — pill + Faal green. */
.s-product-card-entry .s-button-element { border-radius: 999px; font-weight: 800; }
.s-product-card-entry .s-button-solid.s-button-primary {
  background: var(--color-primary);
  color: var(--color-primary-reverse);
  border-color: var(--color-primary);
}

@media (max-width: 860px) {
  .faal-product-detail-grid {
    grid-template-columns: 1fr;
  }
  .faal-product-media {
    order: -1; /* gallery on top on mobile */
  }
  .faal-product-add { flex: 1; }
}

.faal-category-services .faal-salla-products-list .s-products-list-wrapper {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

.faal-category-products {
  --salla-product-card-radius: 8px;
}

.faal-dynamic-features {
  background: rgba(255, 254, 250, 0.28);
}

.faal-why-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  /* Keep the Figma left→right card order (شروحات فيديو | تفعيل فوري | شركة
     سعودية); cards restore RTL internally for their Arabic text. */
  direction: ltr;
}

.faal-why-card {
  min-height: 255px;
  padding: 40px;
  border: 1px solid rgba(58, 194, 107, 0.42);
  border-radius: var(--faal-radius-sm);
  background: linear-gradient(180deg, rgba(255, 252, 244, 0.85) 55%, rgba(254, 233, 179, 0.4) 100%);
  direction: rtl;
  text-align: right;
}

.faal-feature-icon {
  width: 52px;
  height: 52px;
  object-fit: contain;
  margin-inline-end: auto;
  margin-bottom: 32px;
  padding: 10px;
  border-radius: 8px;
  background: rgba(58, 194, 107, 0.14);
}

.faal-icon-box {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  margin-inline-end: auto;
  margin-bottom: 32px;
  border-radius: 16px;
  background: rgba(58, 194, 107, 0.14);
  color: var(--faal-green);
  font-size: 26px;
  font-weight: 900;
}

.faal-icon-box svg {
  width: 28px;
  height: 28px;
}

.faal-why-card h3 {
  margin: 0 0 12px;
  color: var(--faal-black);
  font-size: 26px;
  font-weight: 900;
}

.faal-why-card p {
  margin: 0;
  color: var(--faal-muted);
  font-size: 17px;
}

.faal-testimonials {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 24px;
  align-items: stretch;
}

.faal-testimonial-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.faal-testimonial-card {
  min-height: 210px;
  padding: 32px;
  border-radius: 8px;
  background: var(--faal-card);
  box-shadow: 0 12px 35px rgba(1, 20, 18, 0.04);
}

.faal-testimonial-card h3 {
  margin: 0 0 14px;
  color: var(--faal-black);
  font-size: 24px;
  font-weight: 900;
}

.faal-testimonial-card p {
  margin: 0;
  color: var(--faal-muted);
}

.faal-testimonial-highlight {
  min-height: 444px;
  display: flex;
  align-items: end;
  padding: 34px;
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(1, 20, 18, 0) 35%, rgba(1, 20, 18, 0.62) 100%),
    linear-gradient(135deg, #d8f9dc, #fee9b3);
  color: var(--faal-white);
}

.faal-testimonial-highlight strong {
  display: block;
  font-size: 48px;
  line-height: 1.05;
}

.faal-impact-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: minmax(168px, 1fr);
  gap: 24px;
  align-items: stretch;
}

.faal-impact-media {
  grid-column: 1;
  grid-row: 1 / span 2;
  margin: 0;
  border-radius: var(--faal-radius);
  overflow: hidden;
  min-height: 100%;
  box-shadow: 0 22px 60px rgba(1, 20, 18, 0.14);
}

.faal-impact-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.faal-impact-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 28px 32px;
  border: 1px solid rgba(2, 47, 44, 0.1);
  border-radius: var(--faal-radius-sm);
  background: var(--faal-card);
}

.faal-impact-card h3 {
  margin: 0 0 10px;
  color: var(--faal-black);
  font-size: 22px;
  font-weight: 900;
}

.faal-impact-card p {
  margin: 0;
  color: var(--faal-muted);
  font-size: 16px;
  line-height: 1.6;
}

.faal-impact-highlight {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  padding: 32px;
  border-radius: var(--faal-radius-sm);
  text-align: center;
}

.faal-impact-highlight.faal-gradient-card {
  background:
    radial-gradient(circle at 50% 38%, rgba(125, 227, 139, 0.72), transparent 60%),
    linear-gradient(160deg, #fff7e6 0%, #fde7b8 100%);
}

.faal-impact-highlight strong {
  font-size: clamp(40px, 6vw, 60px);
  font-weight: 900;
  line-height: 1;
  color: var(--faal-green);
  direction: ltr;
}

.faal-impact-highlight span {
  font-size: 18px;
  font-weight: 900;
  color: var(--faal-green-800);
}

@media (max-width: 860px) {
  .faal-impact-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
  }

  .faal-impact-media {
    grid-column: auto;
    grid-row: auto;
    aspect-ratio: 16 / 10;
    order: -1;
  }
}

.faal-impact-section {
  background: rgba(254, 233, 179, 0.22);
}

.faal-impact-section .faal-testimonials {
  align-items: center;
}

.faal-impact-section .faal-testimonial-card {
  border: 1px solid rgba(2, 47, 44, 0.1);
}

.faal-impact-section .faal-testimonial-highlight {
  min-height: 100%;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 8px;
  text-align: center;
  background:
    linear-gradient(180deg, rgba(119, 246, 133, 0.62) 0%, rgba(254, 233, 179, 0.94) 100%),
    var(--faal-yellow);
  color: var(--faal-green);
}

.faal-impact-section .faal-testimonial-highlight span {
  color: var(--faal-green-800);
  font-size: 18px;
  font-weight: 900;
}

.faal-clients-carousel {
  background: rgba(255, 254, 250, 0.38);
}

/* One horizontally scrollable row (arrows come from the shared
   [data-faal-carousel] controller in app.js). */
.faal-clients-logos {
  display: flex;
  flex-wrap: nowrap;
  /* Centre the logos while they all fit, then fall back to start-aligned and
     scrollable once they overflow. Plain `center` clips the first logo against
     the start edge with no way to scroll back to it. */
  justify-content: safe center;
  gap: 20px;
  overflow-x: auto;
  overscroll-behavior-x: contain; /* no browser back-swipe while dragging */
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  /* Room for the cards' hover lift + shadow, which the scroll container clips. */
  padding: 6px 4px 12px;
  margin-inline: -4px;
}

.faal-clients-logos::-webkit-scrollbar {
  display: none;
}

.faal-clients-logos .faal-client-card {
  flex: 0 0 clamp(150px, 17vw, 220px);
  min-height: 140px;
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.faal-clients-logos .faal-client-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 42px rgba(1, 20, 18, 0.08);
}

@media (max-width: 640px) {
  .faal-clients-logos .faal-client-card {
    flex-basis: clamp(130px, 42vw, 170px);
  }

  .faal-carousel-shell {
    grid-template-columns: 40px minmax(0, 1fr) 40px;
    gap: 8px;
  }
}

.faal-carousel-shell {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  gap: 12px;
  align-items: center;
}

.faal-carousel-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(180px, 240px);
  gap: 16px;
  direction: ltr;
  overflow-x: auto;
  padding: 4px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.faal-carousel-track::-webkit-scrollbar {
  display: none;
}

.faal-client-card {
  min-height: 140px;
  display: grid;
  place-items: center;
  padding: 26px 24px;
  border: 1px solid rgba(2, 47, 44, 0.06);
  border-radius: 20px;
  background: var(--faal-white);
  color: var(--faal-green);
  direction: rtl;
  font-size: 18px;
  font-weight: 800;
  text-align: center;
  scroll-snap-align: start;
  box-shadow: 0 12px 30px rgba(1, 20, 18, 0.05);
}

.faal-client-card img {
  width: auto;
  max-height: 64px;
  object-fit: contain;
}

/* ---- Banner slider (home.banner-slider) ----
   One rectangular banner per slide at ~90% width, arrows overlaid (a banner this
   wide has no gutter to put them in). The gap equals the controller's own
   per-card step, so one arrow press lands exactly on the next slide. */
.faal-banner-section {
  padding-block: clamp(24px, 3vw, 44px);
}

.faal-banner-slider {
  position: relative;
  width: min(var(--faal-container), 90%);
  margin-inline: auto;
}

.faal-banner-track {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  border-radius: var(--faal-radius);
}

.faal-banner-track::-webkit-scrollbar {
  display: none;
}

.faal-banner-slide {
  position: relative;
  flex: 0 0 100%;
  scroll-snap-align: start;
  align-self: center; /* slides of unequal height stay centred instead of stretched */
  border-radius: var(--faal-radius);
  overflow: hidden;
}

.faal-banner-slide img {
  display: block;
  width: 100%;
  height: auto;
}

/* Covers the whole slide so the banner is clickable without wrapping <picture>. */
.faal-banner-link {
  position: absolute;
  inset: 0;
}

.faal-banner-slider .faal-carousel-btn {
  position: absolute;
  top: 50%;
  z-index: 2;
  transform: translateY(-50%);
  background: rgba(255, 254, 250, 0.92);
  box-shadow: 0 8px 24px rgba(1, 20, 18, 0.18);
}

/* The shared button lifts on hover with a plain translateY, which would drop the
   centring — restate both parts together. */
.faal-banner-slider .faal-carousel-btn:hover {
  transform: translateY(calc(-50% - 2px));
}

.faal-banner-slider [data-faal-carousel-prev] {
  inset-inline-start: 12px;
}

.faal-banner-slider [data-faal-carousel-next] {
  inset-inline-end: 12px;
}

@media (max-width: 640px) {
  .faal-banner-slider .faal-carousel-btn {
    width: 36px;
    height: 36px;
  }

  .faal-banner-slider [data-faal-carousel-prev] {
    inset-inline-start: 8px;
  }

  .faal-banner-slider [data-faal-carousel-next] {
    inset-inline-end: 8px;
  }
}

.faal-carousel-btn {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(2, 47, 44, 0.14);
  border-radius: 999px;
  background: var(--faal-card);
  color: var(--faal-green);
  cursor: pointer;
  transition: transform 180ms ease, background 180ms ease, color 180ms ease;
}

.faal-carousel-btn:hover {
  transform: translateY(-2px);
  background: var(--faal-green);
  color: var(--faal-white);
}

/* Chevron. The borders MUST be physical: with border-block-start/inline-start the
   corner itself moves in RTL, so the same rotation produced an up/down arrow
   instead of left/right. Physical borders keep the shape fixed and the rotation
   is what flips per direction — prev points back toward the start in both. */
.faal-carousel-btn::before {
  width: 10px;
  height: 10px;
  border-top: 2px solid currentColor;
  border-left: 2px solid currentColor;
  content: "";
  transform: rotate(-45deg); /* points left */
}

.faal-carousel-btn[data-faal-carousel-next]::before {
  transform: rotate(135deg); /* points right */
}

[dir="rtl"] .faal-carousel-btn::before {
  transform: rotate(135deg);
}

[dir="rtl"] .faal-carousel-btn[data-faal-carousel-next]::before {
  transform: rotate(-45deg);
}

.faal-cta {
  padding-block: clamp(68px, 8vw, 112px);
}

.faal-cta-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(260px, 0.9fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
  padding: clamp(36px, 5vw, 70px);
  border-radius: var(--faal-radius);
  background:
    radial-gradient(circle at 14% 18%, rgba(119, 246, 133, 0.78), transparent 28%),
    linear-gradient(135deg, #fff4ce 0%, #fee9b3 55%, #f6de9d 100%);
  overflow: hidden;
}

.faal-cta-copy h2 {
  margin: 0;
  color: var(--faal-black);
  font-size: clamp(34px, 5vw, 52px);
  font-weight: 900;
  line-height: 1.2;
}

.faal-cta-copy p {
  max-width: 560px;
  margin: 18px 0 28px;
  color: var(--faal-green-800);
  font-size: 20px;
}

.faal-cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.faal-cta-art {
  transform: scale(1.08);
  transform-origin: center;
}

.faal-footer {
  padding: clamp(72px, 7vw, 112px) 0 36px;
  background: var(--faal-bg);
}

.faal-footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 3fr);
  gap: 48px;
  padding-bottom: 56px;
  border-bottom: 1px solid rgba(2, 47, 44, 0.14);
}

/* Footer links: the merchant's footer menu via native <salla-menu source="footer">
   (exactly like theme-raed). Style whatever list it renders; hide a duplicated
   mobile copy ONLY when a desktop (.root-level) twin immediately follows it —
   fail-open, so single-copy menus are never hidden. */
.faal-footer-nav {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 48px;
}

/* Three columns once the optional "فال" column is configured (footer.twig adds
   .has-extra only when at least one valid link line survives parsing). Dropping
   back to two on narrow screens keeps each link on one line — three 1fr columns
   of Arabic link text wrap into unreadable stacks well before the footer grid
   itself collapses at 860px. */
.faal-footer-nav.has-extra {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 700px) {
  .faal-footer-nav.has-extra {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Salla's <salla-menu source="footer"> stamps Tailwind classes on each link
   ("!hidden lg:!block root-level lg:!inline-block" + a mobile twin). This theme
   has no Tailwind, so those utilities are inert and the links collapse together
   with no vertical rhythm. Force a block list and put the spacing + tap area on
   the anchors themselves, overriding any inline/utility display with !important. */
.faal-footer-menu {
  display: block;
}

.faal-footer-menu ul {
  display: flex !important;
  flex-direction: column;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.faal-footer-menu li {
  display: block !important; /* neutralise root-level's inline-block intent */
  width: 100%;
  margin: 0;
}

/* hide the mobile twin Salla emits before each desktop (root-level) item;
   fail-open so a single-copy menu is never hidden */
.faal-footer-menu li:not(.root-level):has(+ li.root-level) {
  display: none !important;
}

.faal-footer-menu a {
  display: block;
  padding: 8px 0; /* vertical rhythm + comfortable hit area */
  color: var(--faal-muted);
  font-size: 16px;
  line-height: 1.5;
  transition: color 0.2s ease;
}

.faal-footer-menu a:hover,
.faal-footer-menu a:focus-visible {
  color: var(--faal-green-800);
}

.faal-footer-menu .close-mobile-menu,
.faal-footer-menu .btn--close,
.faal-footer-menu .btn--close-sm {
  display: none !important;
}

/* Pre-hydration: reserve height so the footer column doesn't jump when links pop in. */
salla-menu.faal-footer-menu:not(.hydrated) {
  display: block;
  min-height: 132px;
}

@media (max-width: 860px) {
  .faal-footer-grid {
    grid-template-columns: 1fr;
  }
}

.faal-footer h2,
.faal-footer h3 {
  margin: 0 0 20px;
  color: var(--faal-black);
  font-size: 20px;
  font-weight: 900;
}

.faal-footer p,
.faal-footer a {
  color: var(--faal-muted);
  font-size: 16px;
}

.faal-footer-links {
  display: grid;
  gap: 12px;
}

.faal-footer-links a[phone-item] {
  direction: ltr;
  text-align: right;
}

.faal-social {
  display: flex;
  gap: 10px;
  margin-top: 22px;
}

.faal-social .faal-social-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(2, 47, 44, 0.14);
  border-radius: 999px;
  color: var(--faal-green);
  font-size: 0;
  transition: transform 180ms ease, background 180ms ease, color 180ms ease;
}

.faal-social .faal-social-icon::before {
  width: 17px;
  height: 17px;
  background: currentColor;
  content: "";
  -webkit-mask: var(--faal-social-mask) center / contain no-repeat;
  mask: var(--faal-social-mask) center / contain no-repeat;
}

.faal-social .faal-social-icon:hover {
  transform: translateY(-2px);
  background: var(--faal-green);
  color: var(--faal-white);
}

.faal-social-icon.is-x {
  --faal-social-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 24'%3E%3Cpath fill='black' d='M12.93 10.66 21.2 1h-1.96l-7.18 8.38L6.33 1H0l8.67 12.68L0 23h1.96l7.58-8.86L15.6 23H22L12.93 10.66Zm-2.68 3.13-.88-1.26L2.38 2.48h3.01l5.64 8.1.88 1.26 7.34 10.54h-3.01l-5.99-8.59Z'/%3E%3C/svg%3E");
}

.faal-social-icon.is-instagram {
  --faal-social-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Ccircle cx='17.5' cy='6.5' r='1.2' fill='black' stroke='none'/%3E%3C/svg%3E");
}

.faal-social-icon.is-whatsapp {
  --faal-social-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.2 19.8 5.5 16A8 8 0 1 1 8 18.4l-3.8 1.4Z'/%3E%3Cpath d='M9.3 8.8c.2-.5.5-.5.8-.5h.6c.2 0 .5.1.6.5l.5 1.2c.1.3.1.5-.1.7l-.4.5c.6 1.1 1.5 2 2.6 2.6l.5-.4c.2-.2.5-.2.7-.1l1.2.5c.4.1.5.4.5.7v.6c0 .3 0 .6-.5.8-.4.2-.8.3-1.4.3-2.9-.1-6.6-3.8-6.7-6.7 0-.6.1-1 .3-1.4Z'/%3E%3C/svg%3E");
}

.faal-social-icon.is-linkedin {
  --faal-social-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4.98 3.5C4.98 4.88 3.87 6 2.5 6S0 4.88 0 3.5 1.12 1 2.5 1 4.98 2.12 4.98 3.5zM.5 8h4v16h-4V8zm7 0h3.8v2.2h.05c.53-1 1.83-2.2 3.77-2.2 4.03 0 4.78 2.65 4.78 6.1V24h-4v-6.9c0-1.65-.03-3.77-2.3-3.77-2.3 0-2.65 1.8-2.65 3.65V24h-4V8z'/%3E%3C/svg%3E");
}

.faal-social-icon.is-facebook {
  --faal-social-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M24 12a12 12 0 1 0-13.875 11.85v-8.385H7.08V12h3.045V9.36c0-3.007 1.79-4.668 4.532-4.668 1.313 0 2.686.234 2.686.234v2.953H15.83c-1.49 0-1.955.925-1.955 1.874V12h3.328l-.532 3.465h-2.796v8.385A12 12 0 0 0 24 12z'/%3E%3C/svg%3E");
}

.faal-social-icon.is-youtube {
  --faal-social-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M23.5 6.2a3.02 3.02 0 0 0-2.12-2.14C19.5 3.55 12 3.55 12 3.55s-7.5 0-9.38.51A3.02 3.02 0 0 0 .5 6.2 31.5 31.5 0 0 0 0 12a31.5 31.5 0 0 0 .5 5.8 3.02 3.02 0 0 0 2.12 2.14c1.88.51 9.38.51 9.38.51s7.5 0 9.38-.51a3.02 3.02 0 0 0 2.12-2.14A31.5 31.5 0 0 0 24 12a31.5 31.5 0 0 0-.5-5.8zM9.6 15.6V8.4l6.2 3.6-6.2 3.6z'/%3E%3C/svg%3E");
}

.faal-footer-brand p {
  margin: 18px 0 0;
  max-width: 320px;
  line-height: 1.6;
}

.faal-footer-col h3 {
  font-size: 24px;
}

.faal-pay-row img {
  height: 28px;
  width: auto;
}

@supports not ((-webkit-mask-image: url("")) or (mask-image: url(""))) {
  .faal-social .faal-social-icon::before {
    width: auto;
    height: auto;
    background: transparent;
    content: attr(aria-label);
    -webkit-mask: none;
    mask: none;
    font-size: 11px;
    font-weight: 900;
    line-height: 1;
  }
}

/* Commercial register / freelance certificate (<salla-trust-badges>).
   The component ships its own base styles with its Stencil bundle; these only
   fit it to the footer's palette and type scale.

   :empty is what keeps the row from leaving a gap on a store that has neither
   number — the component's render() returns null there, so the host stays
   childless. It cannot fight this rule: the component's KSA visibility guard
   (which forces display/visibility/opacity back on through the whole ancestor
   chain) bails out early when there is no badge data. Whenever a number DOES
   exist the host has children, :empty stops matching, and the badge shows. */
.faal-trust-badges {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 28px;
}

.faal-trust-badges:empty {
  display: none;
}

.faal-trust-badges .s-trust-badges-image {
  width: 55px;
  height: 55px;
  object-fit: contain;
}

.faal-trust-badges .s-trust-badges-label {
  margin: 0 0 2px;
  color: var(--faal-muted);
  font-size: 13px;
}

.faal-trust-badges .s-trust-badges-number {
  color: var(--faal-black);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.faal-footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding-top: 28px;
  color: var(--faal-muted);
  font-size: 14px;
}

.faal-content-hero {
  padding: clamp(108px, 12vw, 180px) 0 56px;
  text-align: center;
}

.faal-content-hero h1 {
  margin: 0;
  color: var(--faal-black);
  font-size: clamp(38px, 6vw, 64px);
  font-weight: 900;
}

.faal-content-hero p {
  max-width: 760px;
  margin: 16px auto 0;
  color: var(--faal-green-800);
  font-size: 21px;
}

.faal-content-hero.is-right {
  text-align: start;
}

.faal-content-hero.is-right p {
  margin-inline: 0;
}

.faal-content-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr); /* left nav removed → single column */
  gap: 72px;
  align-items: start;
  padding-block: 80px;
  max-width: 920px; /* keep a readable measure, centered in the container */
  margin-inline: auto;
}

/* Merchant-written pages: the title sits close to the header and close to the
   content instead of floating in ~236px of empty gradient. The theme-authored
   pages keep the tall hero — there the whitespace separates two blocks of text. */
.faal-content-hero--tight {
  padding: clamp(40px, 4vw, 64px) 0 24px;
}

/* Informational pages whose body the MERCHANT writes in the Salla editor. The
   920px reading measure and the card around it are right for the theme-authored
   pages (terms, FAQ, tips) but wrong here: merchant content is usually a designed
   block — a banner, a full-width image, a coloured panel — and boxing it made the
   page look like a small card floating in an empty screen.
   min-height keeps a short page from leaving the footer half way up the viewport. */
.faal-container.faal-content-layout--full {
  /* Edge to edge. Selector is .faal-container.faal-content-layout--full, not the
     modifier alone: a later @media(max-width:640px) rule re-sets .faal-container
     to 100% - 24px at the SAME specificity, and would win on order below 640px —
     which is exactly where the page must not be boxed.
     The section also carries .faal-container, which caps every
     other section at 1320px — right for the theme layouts, but it left merchant
     content as a column floating on a wide screen. width+max-width together
     defeat that cap; padding-inline: 0 drops the container gutter with it. */
  width: 100%;
  max-width: none;
  padding-inline: 0;
  /* Fill the screen below the header, so a short page has no dead space under it. */
  min-height: calc(100vh - var(--faal-header-height, 108px));
  padding-block: 0;
}

.faal-container.faal-content-layout--full > .faal-article {
  padding: 0;
  border-radius: 0;
  background: transparent;
}

/* Media the merchant drops in should be free to span the full width. */
.faal-container.faal-content-layout--full .faal-article img,
.faal-container.faal-content-layout--full .faal-article video,
.faal-container.faal-content-layout--full .faal-article iframe {
  max-width: 100%;
  height: auto;
}

.faal-content-layout--about {
  padding-bottom: clamp(28px, 5vw, 56px);
}

.faal-content-layout--about + .faal-youtube-section {
  padding-top: 0;
}

.faal-important-layout {
  grid-template-columns: minmax(0, 1fr);
  max-width: 984px;
}

.faal-article {
  /* A grid item defaults to min-width:auto, so it refuses to shrink below the
     widest fixed-width thing inside it. Merchant content pasted from the page
     editor carries fixed pixel widths (the about page has a 1320px hero), which
     stretched this box to 1360px on a phone and pushed the whole page sideways.
     min-width:0 lets it shrink, and the content max-width:100% rules then work. */
  min-width: 0;
  border-radius: var(--faal-radius-sm);
  background: rgba(255, 252, 244, 0.64);
  padding: clamp(28px, 5vw, 64px);
}

.faal-important-main {
  background: transparent;
  padding: 0;
}

.faal-article h2,
.faal-article h3 {
  color: var(--faal-black);
  font-weight: 900;
}

.faal-article h2 {
  margin: 0 0 18px;
  font-size: 34px;
}

.faal-article h3 {
  margin: 38px 0 12px;
  font-size: 24px;
}

.faal-article p,
.faal-article li {
  color: var(--faal-green-800);
  font-size: 19px;
}

.faal-article p {
  margin: 0 0 18px;
}

.faal-article ul,
.faal-article ol {
  padding-inline-start: 24px;
}

.faal-sidebar {
  position: sticky;
  top: 120px;
  display: grid;
  gap: 12px;
  padding: 24px;
  border-radius: var(--faal-radius-sm);
  background: var(--faal-card);
  box-shadow: 0 10px 30px rgba(1, 20, 18, 0.04);
}

.faal-sidebar a {
  padding: 10px 0;
  color: var(--faal-muted);
  font-weight: 800;
}

.faal-sidebar a.is-active {
  color: var(--faal-green);
}

.faal-important-nav {
  background: transparent;
  box-shadow: none;
}

.faal-important-link {
  display: block;
  border-bottom: 1px solid rgba(2, 47, 44, 0.1);
}

.faal-important-section {
  display: grid;
  gap: 18px;
  padding-block: 0 54px;
}

.faal-important-section + .faal-important-section {
  padding-top: 10px;
}

.faal-term-index {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 56px;
}

.faal-term-index a {
  padding: 16px 18px;
  border: 1px solid rgba(2, 47, 44, 0.12);
  border-radius: 8px;
  background: var(--faal-card);
  color: var(--faal-green);
  font-weight: 900;
}

.faal-faq-list {
  display: grid;
  gap: 80px;
}

.faal-faq-group {
  display: grid;
  gap: 24px;
}

.faal-logo-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}

.faal-logo-card {
  min-height: 180px;
  display: grid;
  place-items: center;
  padding: 24px;
  border: 1px solid rgba(2, 47, 44, 0.1);
  border-radius: var(--faal-radius-sm);
  background: var(--faal-card);
  color: var(--faal-green);
  font-size: 20px;
  font-weight: 900;
  text-align: center;
}

.faal-clients-page {
  padding-bottom: clamp(48px, 7vw, 88px);
}

.faal-clients-hero {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(280px, 0.8fr);
  gap: clamp(28px, 6vw, 86px);
  align-items: center;
}

.faal-client-visual {
  max-height: 520px;
  margin: 0;
  overflow: hidden;
  border-radius: var(--faal-radius);
  box-shadow: var(--faal-shadow);
}

.faal-client-visual img {
  width: 100%;
  height: 100%;
  max-height: 520px;
  object-fit: cover;
  object-position: top center;
}

/* Clients logo wall — uniform white cards holding each 312×180 logo. Pure white
   bg so the logo's baked-in white blends seamlessly; contain keeps every logo
   proportional and centered. */
.faal-clients-grid .faal-logo-card {
  min-height: 0;
  aspect-ratio: 312 / 180;
  padding: clamp(10px, 1.4vw, 18px);
  background: var(--faal-white);
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.faal-clients-grid .faal-logo-card img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.faal-clients-grid .faal-logo-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 42px rgba(1, 20, 18, 0.08);
}

.faal-clients-cta {
  padding-top: 0;
}

.faal-blog-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.faal-dynamic-blog-preview {
  background: rgba(255, 254, 250, 0.24);
}

/* Blog section heads (title + inline category pills) */
.faal-blog-section-head { margin: 0 0 24px; }
.faal-blog-section-head h2 {
  margin: 0;
  color: var(--faal-black);
  font-size: clamp(26px, 3.4vw, 38px);
  font-weight: 900;
}
.faal-blog-section-head--filter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: clamp(32px, 5vw, 56px);
}

/* Category filter pills (Figma) — server categories[] via category.url + is_current */
.faal-blog-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.faal-blog-filters a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 18px;
  border: 1px solid rgba(2, 47, 44, 0.16);
  border-radius: 999px;
  background: var(--faal-white);
  color: var(--faal-green);
  font-size: 14px;
  font-weight: 800;
  transition: background 180ms ease, color 180ms ease;
}
.faal-blog-filters a:hover,
.faal-blog-filters a.is-active {
  background: var(--faal-green);
  color: var(--faal-white);
}

/* Featured "أحدث المقالات" row */
.faal-blog-featured {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.faal-blog-meta a { color: inherit; }
.faal-blog-meta i { margin-inline-end: 4px; }
.faal-blog-card h3 a { color: inherit; }
.faal-blog-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.faal-blog-empty { padding: 60px 20px; text-align: center; color: var(--faal-muted); }
.faal-blog-empty i { display: block; margin-bottom: 12px; font-size: 42px; }

.faal-blog-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.faal-blog-badge {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 30px;
  margin-bottom: 14px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(58, 194, 107, 0.14);
  color: var(--faal-green);
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
}

.faal-blog-meta .faal-blog-badge {
  margin-bottom: 0;
}

.faal-blog-card {
  border-radius: var(--faal-radius-sm);
  overflow: hidden;
  background: var(--faal-card);
  box-shadow: 0 12px 35px rgba(1, 20, 18, 0.05);
}

.faal-blog-card > img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: top center;
  background: var(--faal-cream);
}

.faal-blog-thumb {
  /* MUST be block: the card links the thumb as an <a> (inline by default), but
     aspect-ratio / min-height / overflow only apply to a block box. As an inline
     element the thumb collapsed and the card's overflow:hidden clipped the content
     (title + meta) to zero height — the title regression. */
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  min-height: 210px;
  background:
    radial-gradient(circle at 20% 20%, rgba(58, 194, 107, 0.75), transparent 28%),
    linear-gradient(135deg, #fff4ce, #f4ece3);
}

.faal-blog-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.faal-blog-card-content {
  padding: 22px;
}

.faal-blog-card h3 {
  margin: 0 0 12px;
  color: var(--faal-black);
  font-size: 22px;
  font-weight: 900;
}

.faal-blog-card p {
  margin: 0;
  color: var(--faal-muted);
}

.faal-article-hero {
  padding: clamp(108px, 12vw, 180px) 0 clamp(48px, 7vw, 86px);
  background:
    linear-gradient(180deg, rgba(119, 246, 133, 0.9) 0, rgba(254, 222, 142, 0.5) 42%, rgba(244, 236, 227, 0) 100%),
    var(--faal-bg);
}

.faal-article-hero .faal-container {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.72fr);
  gap: clamp(28px, 6vw, 76px);
  align-items: center;
}

.faal-article-hero h1 {
  margin: 0;
  color: var(--faal-black);
  font-size: clamp(38px, 6vw, 64px);
  font-weight: 900;
  line-height: 1.18;
}

.faal-article-hero p {
  max-width: 760px;
  margin: 16px 0 0;
  color: var(--faal-green-800);
  font-size: 21px;
}

.faal-article-hero img {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--faal-radius-sm);
  object-fit: cover;
  object-position: center;
  box-shadow: var(--faal-shadow);
}

.faal-article-share {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 24px;
}

.faal-article-share a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 18px;
  border: 1px solid rgba(2, 47, 44, 0.16);
  border-radius: 999px;
  background: var(--faal-card);
  color: var(--faal-green);
  font-size: 14px;
  font-weight: 900;
  transition: transform 180ms ease, background 180ms ease, color 180ms ease;
}

.faal-article-share a:hover {
  transform: translateY(-2px);
  background: var(--faal-green);
  color: var(--faal-white);
}

.faal-faq {
  display: grid;
  gap: 12px;
}

.faal-faq-item {
  border-radius: var(--faal-radius-sm);
  background: var(--faal-card);
  overflow: hidden;
}

.faal-faq-item button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 28px;
  border: 0;
  background: transparent;
  color: var(--faal-black);
  cursor: pointer;
  font-size: 20px;
  font-weight: 900;
  text-align: start;
}

.faal-faq-item button::after {
  content: "+";
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(58, 194, 107, 0.14);
  color: var(--faal-green);
}

.faal-faq-item[data-open="true"] button::after {
  content: "-";
}

.faal-faq-panel {
  display: none;
  padding: 0 28px 24px;
  color: var(--faal-muted);
  font-size: 18px;
}

.faal-faq-item[data-open="true"] .faal-faq-panel {
  display: block;
}

.faal-placeholder {
  padding: 64px;
  border-radius: var(--faal-radius-sm);
  background: var(--faal-card);
  text-align: center;
}

/* ── Contact page (تواصل معنا) — Figma frame 5 ── */
.faal-contact-hours {
  margin-top: 18px !important;
  color: var(--faal-green-800);
  font-weight: 900;
}

.faal-contact-cards-section {
  padding-top: 0;
}

.faal-contact-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.faal-contact-card {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "label icon"
    "value value";
  align-items: center;
  gap: 8px 12px;
  padding: 28px 30px;
  border: 1px solid rgba(2, 47, 44, 0.1);
  border-radius: var(--faal-radius);
  background: var(--faal-card);
  box-shadow: 0 12px 34px rgba(1, 20, 18, 0.05);
  text-align: start;
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.faal-contact-card .faal-contact-ico { grid-area: icon; }
.faal-contact-card .faal-contact-label { grid-area: label; }
.faal-contact-card .faal-contact-value { grid-area: value; }

.faal-contact-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 44px rgba(1, 20, 18, 0.1);
}

.faal-contact-ico {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 999px;
  background: rgba(58, 194, 107, 0.14);
  color: var(--faal-green);
}

.faal-contact-ico svg {
  width: 24px;
  height: 24px;
}

.faal-contact-label {
  color: var(--faal-black);
  font-size: 18px;
  font-weight: 900;
}

.faal-contact-value {
  color: var(--faal-muted);
  font-size: 16px;
  font-weight: 700;
  unicode-bidi: plaintext;
}

/* Contact form */
.faal-contact-form {
  max-width: 640px;
  margin-inline: auto;
  display: grid;
  gap: 22px;
}

.faal-field {
  display: grid;
  gap: 10px;
}

.faal-field label {
  color: var(--faal-black);
  font-size: 16px;
  font-weight: 900;
}

.faal-field input,
.faal-field textarea,
.faal-dial {
  width: 100%;
  min-height: 52px;
  padding: 14px 18px;
  border: 1px solid rgba(2, 47, 44, 0.16);
  border-radius: 14px;
  background: var(--faal-white);
  color: var(--faal-green-800);
  font-family: inherit;
  font-size: 16px;
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.faal-field textarea {
  min-height: 132px;
  resize: vertical;
  line-height: 1.6;
}

.faal-field input::placeholder,
.faal-field textarea::placeholder {
  color: rgba(106, 112, 108, 0.7);
}

.faal-field input:focus,
.faal-field textarea:focus,
.faal-dial:focus {
  outline: none;
  border-color: var(--faal-accent);
  box-shadow: 0 0 0 3px rgba(58, 194, 107, 0.16);
}

/* Phone row: country-code select + number. LTR so +966 sits left of the number (Figma). */
.faal-phone-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  direction: ltr;
}

.faal-dial {
  width: auto;
  min-width: 92px;
  padding-inline: 14px;
  font-weight: 800;
  cursor: pointer;
}

.faal-contact-submit {
  justify-self: start;
  min-width: 150px;
}

.faal-contact-form:invalid .faal-contact-submit {
  /* purely cosmetic hint; real validation is native `required` on submit */
  opacity: 1;
}

/* Complaints & suggestions */
.faal-complaints-body {
  max-width: 760px;
  margin-inline: auto;
  text-align: center;
  color: var(--faal-green-800);
}

.faal-complaints-lead {
  color: var(--faal-black);
  font-size: 20px;
  font-weight: 900;
}

.faal-complaints-body p {
  margin: 0 0 16px;
  font-size: 18px;
  line-height: 1.7;
}

.faal-complaints-notes {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.faal-complaints-notes li {
  position: relative;
  padding-inline-start: 18px;
  color: var(--faal-green-800);
  font-size: 17px;
  font-weight: 700;
}

.faal-complaints-notes li::before {
  content: "*";
  position: absolute;
  inset-inline-start: 0;
  color: var(--faal-accent);
  font-weight: 900;
}

@media (max-width: 860px) {
  .faal-contact-cards {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1180px) {
  .faal-nav {
    gap: 18px;
    font-size: 14px;
  }

  .faal-header {
    padding-inline: 18px;
  }
}

@media (max-width: 960px) {
  .faal-header-shell {
    width: min(100% - 24px, var(--faal-container));
    margin-top: 16px;
  }

  .faal-header {
    min-height: 66px;
  }

  .faal-nav,
  .faal-header-actions .faal-language,
  .faal-header-actions .faal-btn {
    display: none;
  }

  .faal-menu-toggle {
    display: inline-flex;
  }

  .faal-mobile-menu {
    width: min(100% - 24px, var(--faal-container));
    display: none;
    position: fixed;
    z-index: 30;
    inset-inline: 12px;
    top: 94px;
    padding: 18px;
    border-radius: var(--faal-radius);
    background: var(--faal-cream);
    box-shadow: var(--faal-shadow);
  }

  .faal-mobile-menu[data-open="true"] {
    display: grid;
    gap: 12px;
  }

  .faal-mobile-menu a {
    padding: 14px;
    border-radius: 14px;
    color: var(--faal-green);
    font-weight: 900;
  }

  /* Drawer copy of the language picker: full-width row matching the drawer's
     links. This one lives in the page's RTL flow (unlike the header row, which
     is forced to ltr), so the chevron moves to the other side. */
  .faal-mobile-menu .faal-language {
    width: 100%;
    padding: 14px;
    border-radius: 14px;
    border-color: var(--faal-line);
    background-color: var(--faal-white);
    background-position: right 14px center;
    font-weight: 900;
  }

  [dir="rtl"] .faal-mobile-menu .faal-language {
    background-position: left 14px center;
  }

  .faal-hero {
    margin-top: -82px;
    padding-top: 112px;
  }

  .faal-stats,
  .faal-services-grid,
  .faal-product-grid,
  .faal-why-grid,
  .faal-testimonials,
  .faal-clients-hero,
  .faal-article-hero .faal-container,
  .faal-content-layout,
  .faal-footer-grid,
  .faal-cta-panel {
    grid-template-columns: 1fr;
  }

  .faal-testimonial-grid,
  .faal-logo-grid,
  .faal-blog-featured,
  .faal-blog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .faal-sidebar {
    position: static;
    order: -1;
  }

  .faal-important-nav {
    order: -1;
  }
}

@media (max-width: 640px) {
  .faal-container,
  .faal-section-image {
    width: min(100% - 24px, var(--faal-container));
  }

  .faal-hero-copy {
    margin-top: 48px;
  }

  .faal-stats {
    gap: 22px;
  }

  .faal-article-share {
    justify-content: stretch;
  }

  .faal-article-share a {
    flex: 1 1 130px;
  }

  .faal-carousel-shell {
    grid-template-columns: 40px minmax(0, 1fr) 40px;
    gap: 8px;
  }

  .faal-carousel-track {
    grid-auto-columns: minmax(160px, 78%);
  }

  .faal-carousel-btn {
    width: 40px;
    height: 40px;
  }

  .faal-testimonial-grid,
  .faal-logo-grid,
  .faal-blog-featured,
  .faal-blog-grid {
    grid-template-columns: 1fr;
  }

  .faal-term-index {
    grid-template-columns: 1fr;
  }

  .faal-service-card,
  .faal-product-card,
  .faal-why-card,
  .faal-testimonial-card,
  .faal-article,
  .faal-placeholder {
    padding: 24px;
  }

  .faal-service-ribbon,
  .faal-product-badge {
    margin-inline: -24px;
    padding-inline: 24px;
  }

  .faal-product-grid .faal-service-ribbon {
    margin-inline: -24px;
    padding-inline: 24px;
  }

  .faal-footer-bottom {
    flex-direction: column;
  }
}


/* ==========================================================================
   GENERAL CONTENT PAGES (الصفحات التعريفية) — FAQ, Terms, Refund policy, Ban
   tips, Contact, About Faal.

   These pages are authored as plain HTML in src/views/pages/general/*.html and
   pasted into Salla's page editor, which has no Twig — so they cannot use the
   asset filter and ship no CSS of their own. Their styles must therefore live
   HERE, because app.css is the only stylesheet the theme loads on every page
   (including the CMS page template).

   Everything is scoped to .gp / .gp-about so it can never leak into the theme.
   Brand tokens come from the :root above — do NOT redeclare them.
   ========================================================================== */
/* Scope everything to .gp so these rules never leak into the theme. */
.gp,
.gp * {
  box-sizing: border-box;
}

.gp {
  margin: 0;
  color: var(--faal-green-800);
  font-family: var(--faal-font);
  line-height: 1.8;
  text-align: right;
  direction: rtl;
}

.gp a {
  color: inherit;
  text-decoration: none;
}

.gp-container {
  width: min(1180px, calc(100% - 40px));
  margin-inline: auto;
}

/* ---------- Hero ---------- */
.gp-hero {
  padding: clamp(72px, 10vw, 150px) 0 clamp(28px, 4vw, 56px);
  text-align: center;
}

.gp-hero h1 {
  margin: 0;
  color: var(--faal-black);
  font-size: clamp(38px, 6vw, 60px);
  font-weight: 900;
  line-height: 1.15;
}

.gp-hero-sub {
  margin: 18px 0 0;
  color: var(--faal-muted);
  font-size: clamp(16px, 2vw, 20px);
  font-weight: 700;
}

.gp-hero-date {
  margin: 16px 0 0;
  color: var(--faal-green-800);
  font-size: 15px;
  font-weight: 800;
}

/* ---------- Body wrapper ---------- */
.gp-body {
  padding-bottom: clamp(64px, 9vw, 120px);
}

/* ---------- Two-column: main content + sticky TOC sidebar ---------- */
.gp-layout {
  display: grid;
  grid-template-columns: minmax(200px, 260px) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
}

.gp-toc {
  position: sticky;
  top: 96px;
  align-self: start;
}

.gp-toc-title {
  margin: 0 0 12px;
  color: var(--faal-green);
  font-size: 15px;
  font-weight: 900;
}

.gp-toc ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.gp-toc a {
  display: block;
  padding: 9px 12px;
  border-radius: 10px;
  color: var(--faal-muted);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background 0.2s ease, color 0.2s ease;
}

.gp-toc a:hover {
  background: rgba(58, 194, 107, 0.1);
  color: var(--faal-green);
}

.gp-toc a.is-active {
  color: var(--faal-green);
  font-weight: 900;
}

/* ---------- Main content column ---------- */
.gp-main {
  min-width: 0;
}

/* single-column pages (tips / refund) keep a comfortable measure */
.gp-content {
  max-width: 780px;
  margin-inline: auto;
}

/* ---------- Article sections (green heading + body + points) ---------- */
.gp-article {
  padding-block: clamp(20px, 3vw, 34px);
}

.gp-article + .gp-article {
  border-top: 1px solid var(--faal-line);
}

.gp-article h2 {
  margin: 0 0 16px;
  color: var(--faal-green);
  font-size: clamp(20px, 2.6vw, 26px);
  font-weight: 900;
  line-height: 1.4;
}

.gp-article > p {
  margin: 0 0 14px;
  color: var(--faal-green-800);
  font-size: clamp(15px, 1.8vw, 17px);
}

.gp-article > p:last-child {
  margin-bottom: 0;
}

/* numbered / bulleted point lists */
.gp-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}

.gp-list li {
  color: var(--faal-green-800);
  font-size: clamp(15px, 1.8vw, 17px);
  line-height: 1.8;
}

.gp-list.is-bulleted li {
  position: relative;
  padding-inline-start: 22px;
}

.gp-list.is-bulleted li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0.72em;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--faal-accent);
}

.gp-note {
  margin: 6px 0 0;
  color: var(--faal-muted);
  font-size: 14px;
}

.gp-link {
  color: var(--faal-accent);
  font-weight: 700;
  word-break: break-all;
  direction: ltr;
  unicode-bidi: plaintext;
}

/* ---------- Highlight / link box (tips top link) ---------- */
.gp-linkbox {
  margin: 8px 0 12px;
}

.gp-linkbox h2 {
  margin: 0 0 10px;
  color: var(--faal-black);
  font-size: clamp(18px, 2.2vw, 22px);
  font-weight: 900;
  line-height: 1.5;
}

/* ---------- FAQ accordion (native <details>) ---------- */
.gp-faq-group {
  margin-bottom: clamp(28px, 4vw, 48px);
}

.gp-faq-group > h2 {
  margin: 0 0 20px;
  color: var(--faal-black);
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 900;
}

.gp-acc {
  margin-bottom: 12px;
  border: 1px solid var(--faal-line);
  border-radius: var(--faal-radius-sm);
  background: var(--faal-card);
  overflow: hidden;
}

.gp-acc > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  color: var(--faal-black);
  font-size: clamp(15px, 1.9vw, 18px);
  font-weight: 800;
  line-height: 1.5;
  cursor: pointer;
  list-style: none;
}

.gp-acc > summary::-webkit-details-marker {
  display: none;
}

/* +/- toggle */
.gp-acc > summary::after {
  content: "+";
  flex: none;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  color: var(--faal-green);
  font-size: 22px;
  font-weight: 400;
  line-height: 1;
}

.gp-acc[open] > summary::after {
  content: "\2212"; /* − */
}

.gp-acc-body {
  padding: 0 24px 22px;
  color: var(--faal-green-800);
  font-size: clamp(14px, 1.7vw, 16px);
  line-height: 1.9;
}

.gp-acc-body p {
  margin: 0 0 12px;
}

.gp-acc-body p:last-child {
  margin-bottom: 0;
}

.gp-acc-body ul {
  margin: 6px 0 12px;
  padding-inline-start: 20px;
}

.gp-acc-body li {
  margin-block: 6px;
}

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .gp-layout {
    grid-template-columns: 1fr;
  }

  /* On mobile the TOC becomes a horizontally-wrapping pill row above content. */
  .gp-toc {
    position: static;
    order: -1;
  }

  .gp-toc ul {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
  }

  .gp-toc a {
    border: 1px solid var(--faal-line);
    border-radius: 999px;
    white-space: normal;
  }
}

/* ==========================================================================
   Contact page (تواصل معنا) — contact cards + WhatsApp form + complaints.
   The form's "إرسال" opens WhatsApp (966533205322) in a new tab, prefilled with
   the fields — handled by the theme's app.js via data-faal-contact-form.
   ========================================================================== */

/* Right-aligned hero (Figma frame), vs the centered gp-hero used by text pages. */
.gp-hero--start {
  text-align: right;
  padding-bottom: clamp(20px, 3vw, 40px);
}
.gp-hero--start .gp-hero-sub,
.gp-hero--start .gp-hero-date {
  /* In RTL a max-width block is already start-aligned (right), so no auto margins needed. */
  max-width: 760px;
}

/* ---------- Contact channel cards ---------- */
.gp-contact-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-bottom: clamp(48px, 7vw, 88px);
}

.gp-contact-card {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "label icon"
    "value value";
  align-items: center;
  gap: 8px 12px;
  padding: 26px 28px;
  border: 1px solid rgba(2, 47, 44, 0.1);
  border-radius: var(--faal-radius);
  background: var(--faal-card);
  box-shadow: 0 12px 34px rgba(1, 20, 18, 0.05);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.gp-contact-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 44px rgba(1, 20, 18, 0.1);
}
.gp-contact-head { grid-area: label; display: inline-flex; align-items: center; gap: 12px; justify-content: space-between; }
.gp-contact-ico {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 999px;
  background: rgba(58, 194, 107, 0.14);
  color: var(--faal-green);
}
.gp-contact-ico svg { width: 24px; height: 24px; }
.gp-contact-label { color: var(--faal-black); font-size: 18px; font-weight: 900; }
.gp-contact-value {
  grid-area: value;
  color: var(--faal-muted);
  font-size: 16px;
  font-weight: 700;
  unicode-bidi: plaintext;
}

/* ---------- Direct-message form ---------- */
.gp-center-title {
  margin: 0 0 clamp(28px, 4vw, 44px);
  color: var(--faal-black);
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 900;
  text-align: center;
}
.gp-form-block { padding-block: clamp(24px, 4vw, 48px); }
.gp-form {
  max-width: 640px;
  margin-inline: auto;
  display: grid;
  gap: 22px;
}
.gp-field { display: grid; gap: 10px; }
.gp-field label { color: var(--faal-black); font-size: 16px; font-weight: 900; }
.gp-field input,
.gp-field textarea,
.gp-dial {
  width: 100%;
  min-height: 52px;
  padding: 14px 18px;
  border: 1px solid rgba(2, 47, 44, 0.16);
  border-radius: 14px;
  background: var(--faal-white);
  color: var(--faal-green-800);
  font-family: inherit;
  font-size: 16px;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}
.gp-field textarea { min-height: 132px; resize: vertical; line-height: 1.6; }
.gp-field input::placeholder,
.gp-field textarea::placeholder { color: rgba(106, 112, 108, 0.7); }
.gp-field input:focus,
.gp-field textarea:focus,
.gp-dial:focus {
  outline: none;
  border-color: var(--faal-accent);
  box-shadow: 0 0 0 3px rgba(58, 194, 107, 0.16);
}
/* Phone row: country code + number, LTR so +966 sits left of the number (Figma). */
.gp-phone-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; direction: ltr; }
.gp-dial { width: auto; min-width: 92px; padding-inline: 14px; font-weight: 800; cursor: pointer; }
.gp-btn {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  min-width: 150px;
  padding: 0 30px;
  border: 0;
  border-radius: 999px;
  background: var(--faal-green);
  color: var(--faal-white);
  font-family: inherit;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.18s ease, transform 0.18s ease;
}
.gp-btn:hover { background: var(--faal-black); transform: translateY(-2px); }

/* ---------- Complaints & suggestions ---------- */
.gp-complaints { text-align: center; }
.gp-complaints .gp-lead { color: var(--faal-black); font-size: 20px; font-weight: 900; margin: 0 0 16px; }
.gp-complaints p { color: var(--faal-green-800); font-size: clamp(15px, 1.8vw, 17px); margin: 0 0 14px; }
.gp-notes { max-width: 640px; margin-inline: auto; text-align: start; }

@media (max-width: 860px) {
  .gp-contact-cards { grid-template-columns: 1fr; }
}


/* ==========================================================================
   About Faal (عن فال) — page-specific styles, scoped to .gp-about so they can
   never leak into the theme (the old file used global *{} / body{} resets).
   Paste the page's inner <main class="gp gp-about"> … </main> into the Salla
   page editor; every general page shares this one stylesheet.
   ========================================================================== */

/* Scoped stand-in for the old global reset. */
.gp-about,
.gp-about * {
  box-sizing: border-box;
}

.gp-about {
  direction: rtl;
  background: #faf8f3; /* the hero gradient resolves to this */
  color: #011a18;
  font-family: var(--faal-font);
  overflow-x: hidden;
}

.gp-about h1,
.gp-about h2,
.gp-about h3,
.gp-about p {
  margin: 0;
  padding: 0;
}

/* Gradient stops are in px, not %: the hero is min-height:100vh, so percentage
   stops stretched the green down with the viewport — tall screens got a green half
   page. Fixed stops keep the green band the same height everywhere, matching the
   theme header gradient, and the last stop colour fills whatever height is left. */
.gp-about .hero {
    width:100%;
    min-height:100vh;
    padding:40px;

    background:linear-gradient(
        180deg,
        #77E685 0,
        #FEDE8E 220px,
        #FAF8F3 560px
    );
}

.gp-about .hero-content {
    width:1320px;
    max-width:100%;
    margin:auto;
    text-align:center;
}

.gp-about .hero-content h1 {
    font-size:72px;
    font-weight:900;
    line-height:1.2;
    margin-bottom:24px;
}

.gp-about .hero-content p {
    width:900px;
    max-width:100%;
    margin:0 auto 60px;
    font-size:26px;
    font-weight:500;
    line-height:1.5;
}

.gp-about .hero-video {
    width:950px;
    max-width:100%;
    margin:auto;
}

.gp-about .company-section {
    width:1320px;
    max-width:95%;
    margin:80px auto;

    display:flex;
    flex-direction:column;
    gap:10px;
}

.gp-about .company-title {
    font-size:40px;
    font-weight:900;
    line-height:1.2;
}

.gp-about .company-description {
    width:720px;
    max-width:100%;
    font-size:24px;
    line-height:1.5;
}

.gp-about .vision-section {
    width:1000px;
    max-width:95%;
    margin:100px auto;
}

.gp-about .top {
    display:flex;
    flex-direction:row;
    gap:20px;
    margin-bottom:20px;
}

.gp-about .vision-box {
    flex:2;
    padding:35px;

    background:linear-gradient(
        180deg,
        #8FE87D 0%,
        #F9D98B 70%,
        #FFFFFF 100%
    );

    border-radius:20px;
}

.gp-about .vision-box h2 {
    font-size:42px;
    font-weight:900;
    margin-bottom:20px;
}

.gp-about .vision-box p {
    font-size:22px;
    line-height:1.7;
}

.gp-about .image-box {
    flex:1;
}

.gp-about .image-box img {
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:20px;
    display:block;
}

.gp-about .bottom {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
}

.gp-about .card {
    background:#FBE5A9;
    border-radius:20px;
    padding:30px;
    text-align:center;
}

.gp-about .card h3 {
    font-size:38px;
    font-weight:900;
    margin-bottom:15px;
}

.gp-about .card p {
    font-size:22px;
    line-height:1.5;
}

.gp-about .values-section {
    width:1000px;
    max-width:95%;
    margin:100px auto;
}

.gp-about .values-title {
    text-align:center;
    font-size:42px;
    font-weight:900;
    margin-bottom:15px;
}

.gp-about .values-subtitle {
    width:600px;
    max-width:100%;
    margin:0 auto 40px;

    text-align:center;
    font-size:20px;
    line-height:1.5;
}

.gp-about .values-container {
    display:flex;
    flex-direction:row-reverse;
    gap:20px;
}

.gp-about .values-image {
    width:300px;
    flex-shrink:0;
}

.gp-about .values-image img {
    width:100%;
    height:380px;
    object-fit:cover;
    border-radius:20px;
    display:block;
}

.gp-about .values-grid {
    flex:1;
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:20px;
}

.gp-about .value-card {
    background:#FFFFFF;
    border:1px solid #EEEEEE;
    border-radius:20px;
    padding:28px;

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;

    box-shadow:0 4px 14px rgba(0,0,0,0.06);
}

.gp-about .value-card h3 {
    font-size:28px;
    font-weight:900;
    margin-bottom:12px;
}

.gp-about .value-card p {
    font-size:18px;
    line-height:1.7;
}

.gp-about .values-message-card {
    padding:0;
    overflow:hidden;
}

.gp-about .values-message-card img {
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.gp-about .features-section {
    width:1000px;
    max-width:90%;
    margin:70px auto 100px;
}

.gp-about .features-container {
    width:100%;
}

.gp-about .features-title {
    font-size:38px;
    font-weight:900;
    line-height:1.2;
    text-align:center;
    margin-bottom:14px;
}

.gp-about .features-subtitle {
    width:720px;
    max-width:100%;
    margin:0 auto 45px;

    font-size:18px;
    font-weight:500;
    line-height:1.6;
    text-align:center;
}

.gp-about .features-grid {
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:28px 55px;
}

.gp-about .feature-card {
    min-height:210px;
    padding:24px 18px;

    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    align-items:center;

    text-align:center;
}

.gp-about .feature-card img {
    width:70px;
    height:70px;
    object-fit:contain;
    display:block;
    margin-bottom:16px;
}

.gp-about .feature-card h3 {
    font-size:24px;
    font-weight:900;
    margin-bottom:10px;
}

.gp-about .feature-card p {
    max-width:260px;
    font-size:16px;
    line-height:1.7;
}

.gp-about .contact-section {
    padding:0 0 100px;
}

.gp-about .contact-banner {
    width:1320px;
    max-width:95%;
    min-height:420px;
    margin:auto;

    background:linear-gradient(
        90deg,
        #77E685 0%,
        #F2D18A 18%,
        #F3DAA5 100%
    );

    border-radius:32px;
    padding:55px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    gap:60px;
    overflow:hidden;
}

.gp-about .contact-content {
    width:42%;
}

.gp-about .contact-content h2 {
    font-size:52px;
    font-weight:900;
    line-height:1.2;
    margin-bottom:22px;
}

.gp-about .contact-content p {
    font-size:24px;
    line-height:1.7;
    margin-bottom:35px;
}

.gp-about .contact-buttons {
    display:flex;
    gap:16px;
}

.gp-about .contact-btn {
    height:52px;
    padding:0 28px;

    border-radius:999px;
    border:none;

    font-family:inherit;
    font-size:18px;
    font-weight:700;

    cursor:default;
}

.gp-about .contact-btn-dark {
    background:#011A18;
    color:#FFFFFF;
}

.gp-about .contact-btn-light {
    background:transparent;
    color:#011A18;
    border:2px solid #011A18;
}

.gp-about .contact-visual {
    width:58%;
    height:320px;
    position:relative;
    direction:ltr;
}

.gp-about .laptop-wrap {
    position:absolute;
    left:80px;
    bottom:0;
    width:470px;
}

.gp-about .laptop-frame {
    width:100%;
    display:block;
    position:relative;
    z-index:2;
}

.gp-about .dashboard-screen {
    position:absolute;
    left:12%;
    top:8%;
    width:76%;
    height:67%;
    object-fit:cover;
    border-radius:4px;
    z-index:1;
}

.gp-about .phone {
    position:absolute;
    left:0;
    bottom:-18px;
    width:165px;
    z-index:3;
}

@media (max-width:992px) {
  .gp-about .hero {
  
          padding:30px;

          background:linear-gradient(
              180deg,
              #77E685 0,
              #FEDE8E 170px,
              #FAF8F3 430px
          );
  }
  
  .gp-about .hero-content h1 {
  
          font-size:56px;
  }
  
  .gp-about .hero-content p {
  
          font-size:22px;
  }
  
  .gp-about .top {
  
          flex-direction:column;
  }
  
  .gp-about .image-box img {
  
          height:360px;
  }
  
  .gp-about .values-container {
  
          flex-direction:column;
  }
  
  .gp-about .values-image {
  
          width:100%;
  }
  
  .gp-about .values-image img {
  
          height:420px;
  }
  
  .gp-about .features-grid {
  
          grid-template-columns:repeat(2, 1fr);
  
          gap:24px;
  }
  
  .gp-about .contact-banner {
  
          flex-direction:column;
  
          text-align:center;
  }
  
  .gp-about .contact-content {
  
          width:100%;
  }
  
  .gp-about .contact-buttons {
  
          justify-content:center;
  }
  
  .gp-about .contact-visual {
  
          width:100%;
  
          max-width:620px;
  }
}

@media (max-width:768px) {
  .gp-about .hero {
  
          padding:20px;
  }
  
  .gp-about .hero-content h1 {
  
          font-size:40px;
  }
  
  .gp-about .hero-content p {
  
          font-size:18px;
  
          line-height:1.7;
  
          margin-bottom:35px;
  }
  
  .gp-about .hero-video {
  
          width:100%;
  }
  
  .gp-about .company-section,
  .gp-about .vision-section,
  .gp-about .values-section,
  .gp-about .features-section {
  
          width:90%;
  
          margin:60px auto;
  }
  
  .gp-about .company-title {
  
          font-size:30px;
  }
  
  .gp-about .company-description {
  
          font-size:18px;
  
          line-height:1.7;
  }
  
  .gp-about .vision-box {
  
          padding:25px;
  }
  
  .gp-about .vision-box h2 {
  
          font-size:32px;
  }
  
  .gp-about .vision-box p {
  
          font-size:18px;
  }
  
  .gp-about .image-box img {
  
          height:280px;
  }
  
  .gp-about .bottom {
  
          grid-template-columns:1fr;
  }
  
  .gp-about .card h3 {
  
          font-size:28px;
  }
  
  .gp-about .card p {
  
          font-size:18px;
  }
  
  .gp-about .values-title,
  .gp-about .features-title {
  
          font-size:32px;
  }
  
  .gp-about .values-subtitle,
  .gp-about .features-subtitle {
  
          width:100%;
  
          font-size:17px;
  }
  
  .gp-about .values-grid {
  
          grid-template-columns:1fr;
  }
  
  .gp-about .values-image img {
  
          height:auto;
  }
  
  .gp-about .features-grid {
  
          grid-template-columns:1fr;
  }
  
  .gp-about .feature-card {
  
          min-height:auto;
  
          padding:20px 10px;
  }
  
  .gp-about .contact-banner {
  
          padding:35px 20px;
  
          gap:25px;
  }
  
  .gp-about .contact-content h2 {
  
          font-size:34px;
  }
  
  .gp-about .contact-content p {
  
          font-size:18px;
  }
  
  .gp-about .contact-buttons {
  
          flex-direction:column;
  }
  
  .gp-about .contact-btn {
  
          width:100%;
  }
  
  .gp-about .contact-visual {
  
          height:240px;
  }
  
  .gp-about .laptop-wrap {
  
          width:330px;
  
          max-width:80%;
  
          left:50%;
  
          transform:translateX(-50%);
  }
  
  .gp-about .phone {
  
          width:110px;
  
          left:5px;
  }
}

@media (max-width:480px) {
  .gp-about .hero-content h1 {
  
          font-size:34px;
  }
  
  .gp-about .hero-content p {
  
          font-size:16px;
  }
  
  .gp-about .company-title,
  .gp-about .vision-box h2,
  .gp-about .values-title,
  .gp-about .features-title {
  
          font-size:28px;
  }
  
  .gp-about .contact-content h2 {
  
          font-size:28px;
  }
  
  .gp-about .contact-visual {
  
          height:210px;
  }
  
  .gp-about .laptop-wrap {
  
          width:280px;
  }
  
  .gp-about .phone {
  
          width:95px;
  }
}

/* ---------- Hero video (Cloudinary-hosted MP4) ----------
   The source is 720×1280 — exactly 9:16 PORTRAIT (verified from the file itself).
   The original 950×535 landscape frame cropped it to a thin middle band, so the
   frame matches the video's own ratio and is centred instead: no crop, no
   letterbox. Overrides the 950px .hero-video width above, so it must stay AFTER
   it (and after the 768px block, which sets .hero-video to width:100%). */
.gp-about .hero-video {
  width: min(360px, 100%);
  max-width: 100%;
  margin-inline: auto;
}

.gp-about .hero-video video {
  width: 100%;
  aspect-ratio: 9 / 16;
  height: auto;
  object-fit: cover;
  border-radius: 32px;
  display: block;
  background: var(--faal-green-800); /* fills the frame until the poster paints */
}

@media (max-width: 768px) {
  .gp-about .hero-video {
    width: min(320px, 88%);
  }

  .gp-about .hero-video video {
    border-radius: 24px;
  }
}

/* The contact CTAs are links now (they were inert <button>s with cursor:default),
   so make the pill centre its text and behave like a button. */
.gp-about .contact-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-decoration: none;
  transition: transform 0.18s ease, opacity 0.18s ease;
}

.gp-about .contact-btn:hover {
  transform: translateY(-2px);
  opacity: 0.92;
}

/* ==========================================================================
   Thank-you page — order confirmation built on Salla's `order` data and the
   native <salla-order-shipments> / <salla-next-order-coupon> components.
   ========================================================================== */

.faal-thanks {
  text-align: center;
}

.faal-thanks-badge {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin: 0 auto 18px;
  border-radius: 999px;
  background: var(--faal-mint);
  color: var(--faal-green-800);
}

.faal-thanks-badge svg {
  width: 30px;
  height: 30px;
}

.faal-thanks-ref {
  margin: 0 0 18px;
  color: var(--faal-muted);
  font-size: 16px;
}

.faal-thanks-copy {
  display: inline-block;
  margin-inline-start: 6px;
}

.faal-thanks-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

.faal-thanks-instructions,
.faal-thanks-message {
  margin: 22px auto 0;
  max-width: 640px;
  color: var(--faal-muted);
  font-size: 16px;
  line-height: 1.7;
}

.faal-thanks-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 24px;
}

.faal-thanks-block p {
  margin: 0 0 12px;
}

.faal-thanks-email {
  unicode-bidi: plaintext;
}

.faal-thanks-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.faal-thanks-form input {
  flex: 1 1 200px;
  min-width: 0;
  padding: 12px 16px;
  border: 1px solid var(--faal-line);
  border-radius: var(--faal-radius-sm);
  background: #fff;
  font-family: inherit;
  font-size: 15px;
}

.faal-thanks-support {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
}

.faal-thanks-support a {
  color: var(--faal-green-800);
  font-weight: 700;
  text-decoration: none;
}

.faal-thanks-support a:hover {
  text-decoration: underline;
}

.faal-order-shipments:not(:empty),
salla-next-order-coupon:not(:empty),
salla-order-branch:not(:empty) {
  display: block;
  margin-top: 24px;
}

@media (max-width: 720px) {
  .faal-thanks-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   Loyalty page — Salla `loyalty` data plus the native <salla-loyalty> widget.
   ========================================================================== */

.faal-loyalty-banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: clamp(24px, 4vw, 40px);
}

.faal-loyalty-banner-copy {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 16px;
}

.faal-loyalty-star {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 999px;
  background: var(--faal-yellow);
  color: #8a6a15;
}

.faal-loyalty-star svg {
  width: 26px;
  height: 26px;
}

.faal-loyalty-points {
  font-size: clamp(26px, 4vw, 38px);
  font-weight: 900;
  line-height: 1;
}

.faal-loyalty-title {
  margin-top: 40px;
}

.faal-loyalty-way {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.faal-loyalty-copy span {
  display: inline-block;
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}

.faal-loyalty-done {
  padding: 8px 18px;
  border-radius: 999px;
  background: var(--faal-mint);
  color: var(--faal-green-800);
  font-weight: 700;
  font-size: 15px;
}

.faal-loyalty-prizes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 18px;
}

.faal-loyalty-prize img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  border-radius: var(--faal-radius-sm);
  margin-bottom: 14px;
}

.faal-loyalty-prize a {
  color: inherit;
  text-decoration: none;
}

.faal-loyalty-cost {
  display: inline-block;
  margin-top: 12px;
  font-weight: 900;
  color: var(--faal-green-800);
}

.faal-loyalty-empty {
  text-align: center;
  color: var(--faal-muted);
}
/*salla style*/
/* Add custom CSS styles below */ 
/* Add custom CSS styles below */ 
/* صفحة المنتج: نقل كتل التقييمات لتكون فوق سلايدر المنتجات المشابهة */
/*
.faal-content-layout:not(.faal-important-layout) {
  width: 100%;
  max-width: none;
  padding-inline: 0;
  min-height: calc(100vh - 108px);
}

.faal-content-layout:not(.faal-important-layout) > .faal-article {
  padding: 0;
  border-radius: 0;
  background: transparent;
}

.faal-content-hero:not(.is-right) {
  padding: clamp(40px, 4vw, 64px) 0 24px;
}*/


body.faal-theme{
  background: linear-gradient(180deg, rgb(119 246 133) 0, rgb(254 222 142) 150px, rgba(244, 236, 227, 0) 740px) no-repeat top center / 100% 740px, var(--faal-bg)
}

/* الصفحات التعريفية بعرض الشاشة كاملًا */
.faal-container.faal-content-layout:not(.faal-important-layout) {
  width: 100%;
  max-width: none;
  padding-inline: 0;
  padding-block: 0;
  min-height: calc(100vh - 108px);
}
.faal-content-hero{
  display: none;
}
/* خلفية خاصة بالصفحات التعريفية فقط */
body:has(.faal-content-hero) {
  background: var(--faal-bg);
}
body:has(.gp-about) {
background: linear-gradient(180deg, rgb(119 246 133) 0, rgb(254 222 142) 150px, rgba(244, 236, 227, 0) 740px) no-repeat top center / 100% 740px, var(--faal-bg);
}
.gp-about .hero{
  background-color: transparent !important;
}
/* الإصلاح الجذري لانكسار الجوال — يشمل كل الصفحات */
.faal-content-layout > .faal-article {
  min-width: 0;
}

.faal-content-layout:not(.faal-important-layout) > .faal-article {
  padding: 0;
  border-radius: 0;
  background: transparent;
}

/* تقليل الفراغ العلوي */
.faal-content-hero:not(.is-right) {
  padding: clamp(40px, 4vw, 64px) 0 24px;
}
/* صفحة «عن فال»: نفس خلفية بقية الموقع */
.gp-about { background: var(--faal-bg); }

/* ينتهي التدرّج على اللون نفسه، فلا يظهر خط فاصل */
.gp-about .hero {
  background: linear-gradient(180deg, #77E685 0%, #FEDE8E 45%, var(--faal-bg) 100%);
}
/*blog*/
.faal-dynamic-blog-preview{
  background-color: var(--faal-bg);
}
.faal-blog-card{
  background-color: transparent;
  box-shadow: none;
}
.faal-blog-thumb img{
  border-radius: 20px;
}
.faal-blog-badge, .faal-blog-meta span{
  background: transparent !important;
      border: 2px solid;
}
.faal-blog-meta span:not(.faal-blog-badge), .faal-blog-meta a{
  border-radius: 999px;
  padding: 0 12px;
  border: 2px solid;
  display: inline-flex;
    align-items: center;
    width: fit-content;
    min-height: 30px;
    margin-bottom: 14px;
    padding: 0 12px;
    border-radius: 999px;
    color: var(--faal-green);
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
}
.faal-blog-card p{
  color: black;
  font-weight: 500;
}
.faal-blog-card-content h3{
  font-weight: 500;
  font-size: 16px;
}
/*why faal*/
.faal-why-card{
  background-color: transparent !important;
  border:2px solid transparent;border-radius:20px;
  direction:rtl;text-align:right;
  background:
    linear-gradient(180deg,#fffdf8 0%,#fffdf8 55%,rgba(254,233,179,.35) 100%) padding-box,
    linear-gradient(180deg,#3ac26b 0%,#7de38b 30%,#fee9b3 70%,rgba(254,233,179,0) 100%) border-box;
  box-shadow:none
}
.faal-feature-icon{
  background-color: transparent;
}
/* البطاقة شفافة بالكامل — لا خلفية ولا ظل */
.faal-why-grid .faal-why-card{
  position:relative;min-height:275px;padding:40px;
  background:transparent;border:0;border-radius:20px;box-shadow:none;
  direction:rtl;text-align:right
}

/* الإطار المتدرّج: أخضر أعلى ← ذهبي يتلاشى أسفل */
.faal-why-grid .faal-why-card::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:2px;pointer-events:none;
  background:linear-gradient(180deg,#3ac26b 0%,#7de38b 30%,#fee9b3 70%,rgba(254,233,179,0) 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude
}
.faal-dynamic-features{
      background-color: var(--faal-bg);
}



/*hero image*/
.faal-hero--top{
  padding-bottom: 0;
}
@media(min-width:500px){
  .faal-hero-art img{
    width: 80%;
    margin: auto;
  }
  
}

/*عملاؤنا الخلفية*/
.faal-section-tight.faal-clients-carousel{
  background-color: var(--faal-bg);
}
.faal-client-card{
  box-shadow: none !important;
}
/*التأثير*/
.faal-section-tight.faal-impact-section{
  background-color: var(--faal-bg);
}
.faal-impact-highlight.faal-gradient-card {
    background: radial-gradient(circle at 50% 38%, rgb(119 246 133), transparent 60%), linear-gradient(160deg, var(--faal-bg) 0%, rgb(254 222 142) 100%);
}

/*value color*/
.faal-value-card.faal-gradient-card {
    background: radial-gradient(circle at 12% 12%, rgba(255, 255, 255, 0.55), transparent 42%), linear-gradient(150deg, #fdfaf2 0%, #fdeab4 52%, rgb(119 246 131) 100%);
}
.faal-container.faal-value-grid{
  align-items: normal;
}
.faal-guarantee-card.faal-gradient-card {
    background: linear-gradient(180deg, var(--faal-bg) 0%, rgb(254 222 142) 78%, rgb(119 246 133) 100%);
}
/*خطوات*/
.faal-step-card{
  background-color: rgba(255, 255, 255, 1);
}
/* ===== بطاقات الباقات (المنتجات الديناميكية) — فال ===== */
.faal-package-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;align-items:stretch}
@media(max-width:1024px){.faal-package-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:680px){.faal-package-grid{grid-template-columns:1fr}}
.faal-package-cta{
  width: 40% !important;
  min-height: 40px !important;
}
.faal-package-grid {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;   /* كل سحبة تستقر على بطاقة */
  padding: 4px;                    /* حتى لا يُقصّ إطار البطاقة المميزة */
  scrollbar-width: none;           /* بلا شريط تمرير مرئي */
  justify-content: safe center;    /* بطاقة أو اثنتان تتوسطان */
}

.faal-package-grid faal-package-card,
.faal-package-grid .faal-package-card {
  flex: 0 0 min(82%, 320px);       /* إطلالة على البطاقة التالية */
  height: auto;
  scroll-snap-align: start;
}

/*خدمات سلة*/
.faal-service-gcard{
  background: linear-gradient(1.4deg,transparent 10%, rgba(255, 255, 255, 0) -7.35%, #FEDE8E 57.36%, #77F685 79.34%)!important;
}
.faal-btn.faal-service-gcta{
  background-color: transparent;
  color: var(--faal-green);
  border-width: 2px;
  padding: 0 20px;
  min-height: 40px;
}
.faal-btn.faal-service-gcta:hover{
   background-color: var(--faal-green);;
  color: white;
}






/* اجعل غلاف سلة شفافًا حتى تصبح البطاقات عناصر الشبكة مباشرة */
.faal-package-grid salla-products-list,
.faal-package-grid salla-products-list>div{display:contents!important}

/* البطاقة */
faal-package-card,.faal-package-card{
  position:relative;display:flex!important;flex-direction:column;height:100%;min-height:300px;
  padding:36px 32px;border:1px solid rgba(2,47,44,.10);border-radius:24px;
  background:#FFFFFF;text-align:right;box-shadow:0 18px 50px rgba(1,20,18,.05)
}
.faal-package-features li::before{
  background-color: black !important;
}
/* الباقة المميزة = البطاقة الوسطى، بإطار متدرّج أخضر/ذهبي بلا تغيير في المقاس */
.faal-package-grid faal-package-card:nth-of-type(2),
.faal-package-card.is-featured{border-color:transparent;box-shadow:0 22px 60px rgba(58,194,107,.18)}
.faal-package-grid faal-package-card:nth-of-type(2)::before,
.faal-package-card.is-featured::before{
  content:"";position:absolute;inset:-1px;border-radius:inherit;padding:2px;pointer-events:none;
  background:linear-gradient(200deg,#fee9b3 0%,#7de38b 45%,#3ac26b 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude
}

/* الاسم */
.faal-package-name{margin:0 0 12px;color:#011412;font-size:24px;font-weight:900}
.faal-package-name a{color:inherit;text-decoration:none;transition:color .2s}
.faal-package-name a:hover{color:#3ac26b;text-decoration:underline}

/* «تبدأ من» + السعر */
.faal-package-price-prefix{display:block;margin-bottom:2px;color:#6a706c;font-size:14px;font-weight:700}
.faal-package-price{display:flex;align-items:baseline;gap:6px;margin-bottom:10px}
.faal-package-price b{font-size:44px;font-weight:900;color:#011412;line-height:1}
.faal-package-price b i,.faal-package-price b [class*="sicon-"]{font-size:.62em;font-style:normal}
.faal-package-price>span{font-size:16px;color:#6a706c;font-weight:800}

/* السطر الغامق ثم الفقرة الرمادية */
.faal-package-highlight{margin:0 0 4px;color:#011412;font-size:18px;font-weight:800}
.faal-package-note{margin:0 0 20px;color:#6a706c;font-size:15px;line-height:1.7}

/* المميزات ✓ */
.faal-package-features{list-style:none;margin:0 0 28px;padding:0;display:grid;gap:12px;flex:1 1 auto}
.faal-package-features li{position:relative;padding-inline-start:28px;color:#011a18;font-size:15px}
.faal-package-features li::before{
  content:"";position:absolute;inset-inline-start:0;top:1px;width:18px;height:18px;border-radius:999px;
  background:#3ac26b url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center/12px no-repeat
}

/* الزر */
.faal-package-cta{width:100%;margin-top:auto}

/* مبدّل السعر (إن كان مفعّلًا) */
.faal-package-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.faal-package-head .faal-package-name{margin-bottom:0}
.faal-price-toggle{display:inline-flex;flex:0 0 auto;gap:4px;padding:4px;border-radius:999px;background:rgba(2,47,44,.07)}
.faal-price-toggle.is-loading{opacity:.55;pointer-events:none}
.faal-price-opt{padding:6px 14px;border:0;border-radius:999px;background:transparent;color:#6a706c;font:inherit;font-size:13px;font-weight:800;line-height:1;cursor:pointer}
.faal-price-opt.is-active{background:#fff;color:#011a18;box-shadow:0 2px 8px rgba(1,20,18,.1)}

/* ===== عن فال — التجاوب مع الجوال ===== */
.gp-about img,
.gp-about video { max-width: 100%; }
.gp-about .hero-video video { width: 100%; height: auto; }

@media (max-width: 992px) {
  .gp-about .hero,
  .gp-about .top,
  .gp-about .values-container,
  .gp-about .contact-banner { flex-direction: column !important; }

  .gp-about .hero-content,
  .gp-about .hero-video,
  .gp-about .vision-box,
  .gp-about .image-box,
  .gp-about .values-image,
  .gp-about .values-grid,
  .gp-about .contact-content,
  .gp-about .contact-visual {
    width: 100% !important;
    max-width: 100% !important;
    flex: none !important;
  }

  .gp-about .features-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .gp-about .values-image img { height: auto !important; }
}

@media (max-width: 768px) {
  .gp-about .bottom,
  .gp-about .values-grid,
  .gp-about .features-grid { grid-template-columns: 1fr !important; }

  .gp-about .hero { padding: 24px 16px !important; }

  .gp-about .company-section,
  .gp-about .vision-section,
  .gp-about .values-section,
  .gp-about .features-section,
  .gp-about .contact-section {
    width: 100% !important;
    max-width: 100% !important;
    margin: 40px auto !important;
    padding-inline: 16px !important;
  }

  .gp-about .hero-content h1 { font-size: 30px !important; }
  .gp-about .company-title,
  .gp-about .values-title,
  .gp-about .features-title,
  .gp-about .vision-box h2,
  .gp-about .contact-content h2 { font-size: 26px !important; }
  .gp-about .card h3 { font-size: 24px !important; }
  .gp-about .value-card h3,
  .gp-about .feature-card h3 { font-size: 20px !important; }
  .gp-about .hero-content p,
  .gp-about .company-description,
  .gp-about .vision-box p,
  .gp-about .card p,
  .gp-about .values-subtitle,
  .gp-about .features-subtitle,
  .gp-about .contact-content p { font-size: 16px !important; }

  .gp-about .vision-box,
  .gp-about .card,
  .gp-about .value-card,
  .gp-about .feature-card { padding: 20px !important; }

  .gp-about .contact-visual { display: flex !important; justify-content: center; align-items: flex-end; gap: 10px; }
  .gp-about .laptop-wrap { width: 72% !important; position: relative; }
  .gp-about .phone { position: static !important; width: 26% !important; }

  .gp-about .contact-buttons { flex-wrap: wrap; justify-content: center; }
  .gp-about .contact-btn { flex: 1 1 auto; min-width: 140px; text-align: center; }
}

@media (max-width: 480px) {
  .gp-about .hero-content h1 { font-size: 26px !important; }
  .gp-about .contact-btn { width: 100%; }
}
.gp-about .hero,.gp-about{
  background-color: transparent !important;
}
/*end of aabout*/

main.faal-page:has(> .faal-related-products) {
  display: flex;
  flex-direction: column;
}
/* عملاؤنا: صف أفقي واحد قابل للسحب بدل الشبكة متعددة الأسطر */
.faal-clients-carousel .faal-clients-logos {
  flex-wrap: nowrap;
  justify-content: safe center;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 6px 4px 12px;
  margin-inline: -4px;
}

.faal-clients-carousel .faal-clients-logos::-webkit-scrollbar { display: none; }

/* الجوال: زر القائمة بجانب الشعار على اليمين */
@media (max-width: 960px) {
  /* صفّ الأدوات يصبح "شفافًا" فتتحول أيقوناته إلى أبناء مباشرين للهيدر
     ويمكن عندها ترتيبها بحرية */
  .faal-header .faal-header-actions { display: contents; }
  .faal-header-shell .faal-header   { gap: 10px; }

  .faal-header .faal-brand       { order: 1; }  /* الشعار في أقصى اليمين */
  .faal-header .faal-menu-toggle { order: 2; }  /* زر القائمة بجانبه */
  .faal-header .faal-user-menu   { order: 3; }
  .faal-header .faal-cart        { order: 4; }
  .faal-header .faal-search-btn  { order: 5; }

  /* كل الفراغ يذهب بعد زر القائمة، فتُدفع السلة والبحث إلى الطرف الآخر */
  
  [dir="ltr"] .faal-header .faal-menu-toggle { margin-right: auto; }
}

/* البطل + تفاصيل المنتج يبقيان في البداية */
main.faal-page:has(> .faal-related-products) > * { order: 1; }

/* التقييمات ثانياً */
main.faal-page:has(> .faal-related-products) > .s-before-reviews,
main.faal-page:has(> .faal-related-products) > .faal-product-reviews { order: 2; }

/* المنتجات المشابهة أخيراً */
main.faal-page:has(> .faal-related-products) > .s-before-related,
main.faal-page:has(> .faal-related-products) > .faal-related-products,
main.faal-page:has(> .faal-related-products) > .s-after-related { order: 3; }
/* إعادة المودال إلى تنسيق سلة الأصلي بتحييد تدخّل الثيم */
/* إصلاح ألوان بطاقات "خدمات قد تهمك" في صفحة المنتج */
.faal-related-products .s-product-card-content {
  background-color: transparent !important;
}
.dots-container{
  border:none !important;
  background-color: transparent !important;
}
.faal-language{display: none}
.faal-related-products .s-product-card-content-title,
.faal-related-products .s-product-card-content-title a {
  color: #011412 !important;
  font-size: 17px !important;
}
.carousel-container{
  width: 90% !important;
  margin: auto !important;
}
.slide.active .slide-overlay{
  background: linear-gradient(to right, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.3) 100%);
  
}
salla-slider::part(slide-overlay) {
  background: linear-gradient(
    to right, 
    rgba(0, 0, 0, 0.3) 0%, 
    rgba(0, 0, 0, 0.1) 50%, 
    rgba(0, 0, 0, 0.3) 100%
  ) !important;
}
.s-block--bundle-hero-carousel{
  width: 90%;
  margin: auto;
}
.s-user-menu-trigger{
  background-color: transparent !important;
}
.faal-brand-logo{
  height: 32px !important;
  width: 77px !important;
}
.s-breadcrumb-arrow{
  display: block !important;
}
.faal-content-hero.is-right{
  padding: 50px 0 0 0 !important;
}
.s-products-slider-card .s-product-card-entry .s-product-card-content{
    max-height: 280px;

}
.s-product-card-starting-price p,h4{
  color: black !important;
}
.s-block--bundle-customers-also-bought{
  margin: auto;
  width: 90%
}
.faal-section.faal-product-reviews{
  padding: 0
}
.s-menu-footer-item{
  padding: 0 !important;
}
.faal-section.faal-related-products{
padding-bottom: 0px !important;
}
.faal-content-hero .faal-container p{
  display: none;
}
@media (300px <= width <= 500px) {
  /* التنسيقات الخاصة بالشاشات بين 320 و 500 بكسل */
 .faal-header-actions{
   gap: 2px !important;
   
 }
  .faal-stat{
        display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    
  }
  .faal-stats{
    padding: 0;
  }
  .faal-dynamic-stats{
grid-template-columns: repeat(3, 1fr);
}
.faal-stat strong{
font-size:30px !important;
}
}
/* المفتاح: transform يحبس خلفية سلة داخل صندوق الثيم */
html .s-login-modal,
html.faal-login-open .s-login-modal {
  transform: none !important;
  position: fixed !important;
  inset: 0 !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  width: auto !important;
  height: auto !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: hidden !important;
  z-index: 200 !important;
}
.s-login-modal-wrapper {
  background-color: #fee9b3 !important;
}
/* احترام حالة الإغلاق من سلة نفسها — وإلا بقيت خلفية رمادية فارغة بعد ✕ */
html.faal-login-open .s-login-modal.s-hidden,
html .s-login-modal.s-hidden {
  display: none !important;
}
.btn--primary{
  color: white !important;
  background-color: #022f2c !important;
}
.main-content.w-full{
  width: auto !important;
}
.faal-login-btn{
  color: white !important;
}
.container .flex.items-start{
  display: block !important;
}
.s-breadcrumb-primary-reverse li,.s-breadcrumb-arrow,.s-breadcrumb-primary-reverse li a{
  color: black !important;
}



/* ==========================================================================
   فال — تصحيحات CSS من لوحة سلة
   أ) مودال تسجيل الدخول    ب) أدوات Tailwind    ج) مكوّنات صفحات العميل
   د) نقاط التوقف
   ========================================================================== */


/* ==========================================================================
   أ) مودال تسجيل الدخول
   سلة تشحن مودالًا كامل التنسيق وتحقن CSS الخاص به تلقائيًا:
     .s-modal-container { position: fixed; inset: 0; z-index: 200 }
     .s-modal-overlay   { position: fixed; inset: 0; background: rgb(107 114 128 / .75) }
   والثيم يضع transform على العنصر المضيف، فيصبح هو مرجع التموضع لأبنائه
   ذوي position:fixed — وتنحبس خلفية سلة داخل صندوق 460px بدل تغطية الشاشة.
   الحل تحييد تدخّل الثيم، لا إضافة تنسيق جديد.
   =====


/* ==========================================================================
   ب) أدوات Tailwind المستخدمة في صفحات العميل
   الصفحات موروثة من قالب Twilight وتستخدم أصناف Tailwind التي لا يشحنها
   ثيم فال. كل ما يلي محصور داخل صفحات العميل فلا يمسّ بقية الموقع.
   ========================================================================== */
html .s-login-modal[visible] iframe {
  height: 100vh !important;
  height: 100dvh !important;
}
html.faal-login-open:not(:has(.s-login-modal[visible])),
html.faal-login-open:not(:has(.s-login-modal[visible])) body {
  overflow: visible !important;
}
.profile-header .relative,
.profile-header ~ .container .relative { position: relative; }

.profile-header .flex,
.profile-header ~ .container .flex { display: flex; }
.profile-header ~ .container .grid { display: grid; }
.profile-header ~ .container .block { display: block; }
.profile-header ~ .container .hidden { display: none; }

.profile-header .items-center,
.profile-header ~ .container .items-center { align-items: center; }
.profile-header ~ .container .items-start { align-items: flex-start; }
.profile-header .justify-between { justify-content: space-between; }
.profile-header ~ .container .justify-center { justify-content: center; }
.profile-header ~ .container .flex-col { flex-direction: column; }
.profile-header ~ .container .flex-1 { flex: 1 1 0%; }
.profile-header ~ .container .shrink-0 { flex-shrink: 0; }

.profile-header .h-full { height: 100%; }
.profile-header .w-full,
.profile-header ~ .container .w-full { width: 100%; }
.profile-header .self-start { align-self: flex-start; }
.profile-header ~ .container .m-auto { margin: auto; }
.profile-header ~ .container .h-20 { height: 5rem; }
.profile-header ~ .container .w-20 { width: 5rem; }
.profile-header ~ .container .max-w-3xl { max-width: 48rem; }

.profile-header ~ .container .rounded-md { border-radius: 0.375rem; }
.profile-header ~ .container .rounded-full { border-radius: 9999px; }
.profile-header ~ .container .bg-gray-100 { background-color: #f3f4f6; }

.profile-header ~ .container .text-center { text-align: center; }
.profile-header ~ .container .text-sm { font-size: 0.875rem; line-height: 1.25rem; }
.profile-header ~ .container .text-lg { font-size: 1.125rem; line-height: 1.75rem; }
.profile-header ~ .container .font-bold { font-weight: 700; }
.profile-header ~ .container .text-gray-700 { color: #374151; }

.profile-header ~ .container .mb-2 { margin-bottom: 0.5rem; }
.profile-header ~ .container .mt-6 { margin-top: 1.5rem; }
.profile-header ~ .container .mt-10 { margin-top: 2.5rem; }
.profile-header ~ .container .py-5,
.profile-header .py-5 { padding-block: 1.25rem; }
.profile-header ~ .container .gap-6 { gap: 1.5rem; }
.profile-header ~ .container .grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }


/* ==========================================================================
   ج) مكوّنات صفحات العميل
   بعد الأدوات عمدًا: عند تساوي الخصوصية تفوز القاعدة المتأخرة.
   ========================================================================== */

/* الهيدر الأخضر. الارتفاع على الشاشات الكبيرة في القسم (د) — لا بد أن يطابق
   سحب الشريط الجانبي \u200Elg:-mt-28\u200E (112px) وإلا خرج الشريط من الهيدر. */
.profile-header {
  position: relative;
  overflow: hidden;
  padding-block: 18px;
}


a[href="https://faal-wa.sa/ar/loyalty"],a[href="https://faal-wa.sa/ar/blog"]{
  display: none;
}
.profile-header .container,
.profile-header ~ .container {
  width: min(1320px, calc(100% - 40px));
  margin-inline: auto;
}

.profile-header ~ .container {
  padding-bottom: 60px;
}

.profile-header .breadcrumbs {
  width: 100%;
  padding-block: 1.25rem;
  align-self: flex-start;
}
.profile-header .breadcrumbs,
.profile-header .breadcrumbs a,
.profile-header .breadcrumbs span { color: #ffffff; }
.profile-header .breadcrumbs a:hover { opacity: 0.8; }

.profile-header ~ .container .sidebar {
  flex-shrink: 0;
  width: 100%;
  border-radius: 24px;
  padding: 18px;
}
.profile-header ~ .container .sidebar > * + * { margin-top: 1px; }

.profile-header ~ .container .main-content {
  flex: 1 1 0%;
  width: 100%;
  max-width: 48rem;
}

.profile-header ~ .container .avatar-wrap {
  width: 5rem;
  height: 5rem;
  margin: auto;
  overflow: hidden;
  border-radius: 9999px;
  background: #f3f4f6;
}
.profile-header ~ .container .avatar-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #6a706c;
  font-size: 11px;
  text-align: center;
}
.profile-header ~ .container .avatar-placeholder .text {
  display: block;
  padding-inline: 4px;
  line-height: 1.2;
}

/* الحالة الفارغة في صفحة الطلبات */
.profile-header ~ .container .no-content-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 60px 24px;
  text-align: center;
  border: 1px solid rgba(2, 47, 44, 0.1);
  border-radius: 24px;
  background: #fffefa;
  color: #6a706c;
}
.profile-header ~ .container .no-content-placeholder .icon {
  font-size: 46px;
  color: #022f2c;
  opacity: 0.5;
}

/* نموذج صفحة الإعدادات */
.form--user-profile .profile-field-item { min-width: 0; }
.form--user-profile label {
  display: block;
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: #374151;
}
.form--user-profile .form-input {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid #e5ded4;
  border-radius: 16px;
  background: #ffffff;
  font-family: inherit;
  font-size: 15px;
}
.form--user-profile .form-input:focus {
  outline: 2px solid rgba(2, 47, 44, 0.35);
  outline-offset: 1px;
}
.form--user-profile .profile-filepond-placholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 22px;
  text-align: center;
  border: 1px dashed #e5ded4;
  border-radius: 16px;
}
.form--user-profile .profile-filepond-placholder-icon { font-size: 28px; color: #022f2c; }
.form--user-profile .profile-filepond-placholder-text { font-size: 14px; color: #6a706c; }
.form--user-profile .filepond--label-action { text-decoration: underline; cursor: pointer; }


/* ==========================================================================
   د) نقاط التوقف — في النهاية لتفوز على القواعد الأساسية
   ========================================================================== */

@media (min-width: 640px) {
  .profile-header ~ .container .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .profile-header ~ .container .sm\:gap-8 { gap: 2rem; }
  [dir="rtl"] .profile-header ~ .container .sm\:rtl\:text-right { text-align: right; }
  [dir="ltr"] .profile-header ~ .container .sm\:ltr\:text-left { text-align: left; }
}

@media (min-width: 768px) {
  .profile-header ~ .container .md\:mb-9 { margin-bottom: 2.25rem; }
}

@media (min-width: 1024px) {
  /* 192px = قيمة رائد lg:h-48. الشريط يُسحب 112px لأعلى فيتداخل 80px. */
  .profile-header {
    height: 12rem;
    padding-block: 0;
  }

  .profile-header ~ .container.lg\:mb-24 { margin-bottom: 6rem; }
  .profile-header ~ .container .lg\:flex-row { flex-direction: row; }
  .profile-header ~ .container .lg\:block { display: block; }
  .profile-header ~ .container .lg\:sticky { position: sticky; top: 6rem; }
  .profile-header ~ .container .lg\:-mt-28 { margin-top: -7rem; }
  .profile-header ~ .container .lg\:bg-white { background-color: #ffffff; }
  .profile-header ~ .container .lg\:w-72 { width: 18rem; }
  .profile-header ~ .container .lg\:pt-8 { padding-top: 2rem; }
  .profile-header ~ .container .lg\:pb-11 { padding-bottom: 2.75rem; }
  .profile-header ~ .container .lg\:pt-10 { padding-top: 2.5rem; }
  .profile-header ~ .container .lg\:shadow-default { box-shadow: 0 16px 48px rgba(1, 20, 18, 0.08); }


  [dir="rtl"] .profile-header ~ .container .rtl\:lg\:ml-8 { margin-left: 2rem; }
  [dir="ltr"] .profile-header ~ .container .ltr\:lg\:mr-8 { margin-right: 2rem; }
}
[aria-label="Sidebar"] {
display:none;
}
  .profile-header{
    background-color: transparent !important;
    display: none;
  }



/* ==========================================================================
   هـ) صفحة تفاصيل الطلب — orders/single.twig
   ~170 صنف Tailwind إضافي. محصورة داخل صفحات العميل كسابقتها.
   ملاحظة: space-x مكتوبة بـ margin-inline-start فتضبط الاتجاهين تلقائيًا،
   ولذلك لا حاجة لتعريف rtl:space-x-reverse.
   ========================================================================== */

/* ---------- عرض ---------- */
.profile-header ~ .container .inline-block { display: inline-block; }
.profile-header ~ .container .inline-flex { display: inline-flex; }
.profile-header ~ .container .flow-root { display: flow-root; }
.profile-header ~ .container .flex-row { flex-direction: row; }
.profile-header ~ .container .flex-wrap { flex-wrap: wrap; }
.profile-header ~ .container .flex-none { flex: none; }
.profile-header ~ .container .items-baseline { align-items: baseline; }
.profile-header ~ .container .overflow-hidden { overflow: hidden; }
.profile-header ~ .container .table-fixed { table-layout: fixed; }
.profile-header ~ .container .min-w-full { min-width: 100%; }
.profile-header ~ .container .whitespace-nowrap { white-space: nowrap; }
.profile-header ~ .container .object-cover { object-fit: cover; }
.profile-header ~ .container .cursor-pointer { cursor: pointer; }
.profile-header ~ .container .underline { text-decoration: underline; }
.profile-header ~ .container .transition-colors { transition: color .18s ease, background-color .18s ease, border-color .18s ease; }

/* ---------- أبعاد ---------- */
.profile-header ~ .container .w-6 { width: 1.5rem; }
.profile-header ~ .container .w-7 { width: 1.75rem; }
.profile-header ~ .container .w-40 { width: 10rem; }
.profile-header ~ .container .h-6 { height: 1.5rem; }
.profile-header ~ .container .h-7 { height: 1.75rem; }
.profile-header ~ .container .max-w-16 { max-width: 4rem; }
.profile-header ~ .container .max-h-8 { max-height: 2rem; }

/* ---------- حشوات ---------- */
.profile-header ~ .container .p-3 { padding: .75rem; }
.profile-header ~ .container .p-4 { padding: 1rem; }
.profile-header ~ .container .p-5 { padding: 1.25rem; }
.profile-header ~ .container .px-2 { padding-inline: .5rem; }
.profile-header ~ .container .px-3 { padding-inline: .75rem; }
.profile-header ~ .container .px-4 { padding-inline: 1rem; }
.profile-header ~ .container .px-5 { padding-inline: 1.25rem; }
.profile-header ~ .container .py-1 { padding-block: .25rem; }
.profile-header ~ .container .py-1\.5 { padding-block: .375rem; }
.profile-header ~ .container .py-2 { padding-block: .5rem; }
.profile-header ~ .container .py-2\.5 { padding-block: .625rem; }
.profile-header ~ .container .py-3 { padding-block: .75rem; }
.profile-header ~ .container .py-3\.5 { padding-block: .875rem; }
.profile-header ~ .container .pt-4 { padding-top: 1rem; }
.profile-header ~ .container .pt-8 { padding-top: 2rem; }

/* ---------- هوامش ---------- */
.profile-header ~ .container .mb-1 { margin-bottom: .25rem; }
.profile-header ~ .container .mb-1\.5 { margin-bottom: .375rem; }
.profile-header ~ .container .mb-3\.5 { margin-bottom: .875rem; }
.profile-header ~ .container .mb-4 { margin-bottom: 1rem; }
.profile-header ~ .container .mb-5 { margin-bottom: 1.25rem; }
.profile-header ~ .container .mt-2 { margin-top: .5rem; }
.profile-header ~ .container .mt-3 { margin-top: .75rem; }
.profile-header ~ .container .mt-5 { margin-top: 1.25rem; }
.profile-header ~ .container .mx-2 { margin-inline: .5rem; }
.profile-header ~ .container .ml-4 { margin-left: 1rem; }
.profile-header ~ .container .rtl\:ml-1 { margin-inline-start: .25rem; }
.profile-header ~ .container .rtl\:ml-2 { margin-inline-start: .5rem; }
.profile-header ~ .container .ltr\:mr-1 { margin-inline-end: .25rem; }
.profile-header ~ .container .ltr\:mr-2 { margin-inline-end: .5rem; }
.profile-header ~ .container .last\:mb-0:last-child { margin-bottom: 0; }

/* ---------- فجوات وتباعد الأبناء ---------- */
.profile-header ~ .container .gap-1 { gap: .25rem; }
.profile-header ~ .container .gap-2 { gap: .5rem; }
.profile-header ~ .container .gap-3 { gap: .75rem; }
.profile-header ~ .container .space-x-1 > * + * { margin-inline-start: .25rem; }
.profile-header ~ .container .space-x-2 > * + * { margin-inline-start: .5rem; }
.profile-header ~ .container .space-x-2\.5 > * + * { margin-inline-start: .625rem; }
.profile-header ~ .container .space-x-5 > * + * { margin-inline-start: 1.25rem; }
.profile-header ~ .container .space-y-4 > * + * { margin-top: 1rem; }
.profile-header ~ .container .space-y-5 > * + * { margin-top: 1.25rem; }

/* ---------- نصوص ---------- */
.profile-header ~ .container .text-xs { font-size: .75rem; line-height: 1rem; }
.profile-header ~ .container .text-base { font-size: 1rem; line-height: 1.5rem; }
.profile-header ~ .container .text-xl { font-size: 1.25rem; line-height: 1.75rem; }
.profile-header ~ .container .leading-5 { line-height: 1.25rem; }
.profile-header ~ .container .leading-none { line-height: 1; }
.profile-header ~ .container .font-normal { font-weight: 400; }
.profile-header ~ .container .font-medium { font-weight: 500; }
.profile-header ~ .container .font-semibold { font-weight: 600; }
.profile-header ~ .container .text-start { text-align: start; }
.profile-header ~ .container .rtl\:text-left { text-align: left; }
.profile-header ~ .container .rtl\:text-start { text-align: start; }
.profile-header ~ .container .ltr\:text-right { text-align: right; }
.profile-header ~ .container .ltr\:text-end { text-align: end; }

/* ---------- ألوان ---------- */
.profile-header ~ .container .text-primary { color: #022f2c; }
.profile-header ~ .container .\!text-primary { color: #022f2c !important; }
.profile-header ~ .container .text-primary-reverse { color: #ffffff; }
.profile-header ~ .container .text-dark { color: #011a18; }
.profile-header ~ .container .text-gray-400 { color: #9ca3af; }
.profile-header ~ .container .text-gray-500 { color: #6b7280; }
.profile-header ~ .container .text-gray-600 { color: #4b5563; }
.profile-header ~ .container .text-red-500 { color: #ef4444; }
.profile-header ~ .container .text-blue-500 { color: #3b82f6; }
.profile-header ~ .container .bg-white { background-color: #ffffff; }
.profile-header ~ .container .bg-primary { background-color: #022f2c; }
.profile-header ~ .container .bg-blue-50 { background-color: #eff6ff; }
.profile-header ~ .container .hover\:opacity-80:hover { opacity: .8; }
.profile-header ~ .container .hover\:text-primary:hover { color: #022f2c; }

/* ---------- حدود ---------- */
.profile-header ~ .container .border { border: 1px solid #e5e7eb; }
.profile-header ~ .container .border-t { border-top: 1px solid #e5e7eb; }
.profile-header ~ .container .border-b { border-bottom: 1px solid #e5e7eb; }
.profile-header ~ .container .border-gray-100 { border-color: #f3f4f6; }
.profile-header ~ .container .border-gray-200 { border-color: #e5e7eb; }
.profile-header ~ .container .border-blue-200 { border-color: #bfdbfe; }
.profile-header ~ .container .border-primary { border-color: #022f2c; }
.profile-header ~ .container .last\:border-none:last-child { border: 0; }
.profile-header ~ .container .last\:border-b-0:last-child { border-bottom: 0; }
.profile-header ~ .container .divide-y > * + * { border-top: 1px solid #e5e7eb; }
.profile-header ~ .container .divide-border-color > * + * { border-color: #e5ded4; }

/* ---------- زوايا وظلال ---------- */
.profile-header ~ .container .rounded { border-radius: .25rem; }
.profile-header ~ .container .rounded-t-md { border-start-start-radius: .375rem; border-start-end-radius: .375rem; }
.profile-header ~ .container .first\:rounded-t-md:first-child { border-start-start-radius: .375rem; border-start-end-radius: .375rem; }
.profile-header ~ .container .last\:rounded-b-md:last-child { border-end-start-radius: .375rem; border-end-end-radius: .375rem; }
.profile-header ~ .container .btn--rounded-full { border-radius: 9999px; }
.profile-header ~ .container .shadow-md { box-shadow: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1); }

/* ---------- شبكة ---------- */
.profile-header ~ .container .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ==========================================================================
   مكوّنات هذه الصفحة
   ========================================================================== */

.profile-header ~ .container .center-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.profile-header ~ .container .v-align { vertical-align: middle; }
.profile-header ~ .container .sicon { font-family: sallaicons; }

/* أرقام ومعرّفات تُقرأ من اليسار داخل نص عربي */
.profile-header ~ .container .text-unicode {
  display: inline-block;
  direction: ltr;
  unicode-bidi: embed;
}

/* رأس التقييم */
.profile-header ~ .container .rating-header {
  position: relative;
  padding: 1.25rem;
  border-radius: .375rem;
  color: #ffffff;
  background: linear-gradient(135deg, #022f2c 0%, #0a4a44 100%);
}
.profile-header ~ .container .rating-actions {
  display: flex;
  align-items: center;
  gap: .5rem;
}

/* بطاقات الشحنات والمنتجات */
.profile-header ~ .container .shipping-orders {
  border: 1px solid rgba(2, 47, 44, .1);
  border-radius: 16px;
  background: #ffffff;
  overflow: hidden;
}
.profile-header ~ .container .order-item {
  border-bottom: 1px solid #f3f4f6;
}

/* التلميحات: المحتوى مخفي حتى التمرير/التركيز.
   بلا هذه القاعدة يظهر نص كل تلميح دائمًا داخل الصفحة — وهو أوضح
   عطل بصري في هذه الصفحة. */
.profile-header ~ .container .tooltip-toggle {
  position: relative;
}
.profile-header ~ .container .tooltip-content {
  position: absolute;
  bottom: calc(100% + 8px);
  inset-inline-start: 50%;
  transform: translateX(50%);
  z-index: 30;
  width: max-content;
  max-width: min(280px, 80vw);
  padding: 10px 14px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #ffffff;
  color: #6b7280;
  font-size: .8125rem;
  line-height: 1.5;
  text-align: start;
  opacity: 0;
  visibility: hidden;
  transition: opacity .15s ease;
}
[dir="ltr"] .profile-header ~ .container .tooltip-content { transform: translateX(-50%); }

.profile-header ~ .container .tooltip-toggle:hover > .tooltip-content,
.profile-header ~ .container .tooltip-toggle:focus-within > .tooltip-content {
  opacity: 1;
  visibility: visible;
}

.profile-header ~ .container .icon-trigger { display: inline-flex; align-items: center; }
.profile-header ~ .container .close-tooltip { position: absolute; top: 2px; inset-inline-end: 4px; }

/* ==========================================================================
   نقاط توقف هذه الصفحة
   ========================================================================== */

@media (max-width: 768px) {
  .profile-header ~ .container .single-order-header-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  /* التلميح قرب حافة الشاشة على الجوال */
  .profile-header ~ .container .mobile-shifted > .tooltip-content {
    inset-inline-start: auto;
    inset-inline-end: 0;
    transform: none;
  }
}

@media (min-width: 768px) {
  .profile-header ~ .container .md\:flex { display: flex; }
  .profile-header ~ .container .md\:table-row { display: table-row; }
  .profile-header ~ .container .md\:flex-row { flex-direction: row; }
  .profile-header ~ .container .md\:flex-no-wrap { flex-wrap: nowrap; }
  .profile-header ~ .container .md\:items-center { align-items: center; }
  .profile-header ~ .container .md\:w-auto { width: auto; }
  .profile-header ~ .container .md\:h-20 { height: 5rem; }
  .profile-header ~ .container .md\:px-5 { padding-inline: 1.25rem; }
  .profile-header ~ .container .md\:px-6 { padding-inline: 1.5rem; }
  .profile-header ~ .container .md\:py-0 { padding-block: 0; }
  .profile-header ~ .container .md\:py-4 { padding-block: 1rem; }
  .profile-header ~ .container .md\:mb-0 { margin-bottom: 0; }
  .profile-header ~ .container .md\:text-base { font-size: 1rem; line-height: 1.5rem; }
  .profile-header ~ .container .md\:space-y-0 > * + * { margin-top: 0; }
}

/* ========================================
   فال واتساب - تنسيق قسم التقييمات
   ======================================== */
/* ========================================
   فال واتساب - تنسيق قسم التقييمات (أفقي + كاروسيل)
   ======================================== */

.faal-product-reviews,
.s-comments-product {
  font-family: 'Tajawal', 'Segoe UI', Tahoma, sans-serif !important;
  max-width: 1100px;
  margin: 40px auto;
  padding: 0 16px;
}

/* عنوان القسم */
.s-comments-title {
  font-size: 1.75rem !important;
  font-weight: 800 !important;
  color: #002f2c !important;
  text-align: center !important;
  margin-bottom: 32px !important;
  position: relative;
}

.s-comments-title::after {
  content: '';
  display: block;
  width: 60px;
  height: 4px;
  background: linear-gradient(90deg, #00a896, #002f2c);
  margin: 12px auto 0;
  border-radius: 4px;
}

/* ===== بطاقة التقييم العام - عناصر جنب بعض ===== */
.s-reviews-summary-wrapper {
  background: #ffffff !important;
  border-radius: 20px !important;
  box-shadow: 0 12px 40px rgba(0, 47, 44, 0.08) !important;
  padding: 28px 24px !important;
  border: 1px solid rgba(0, 47, 44, 0.06) !important;
  margin-bottom: 36px !important;
}

.s-reviews-summary-header {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 24px !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.s-reviews-summary-overall-section {
  text-align: center !important;
  flex-shrink: 0 !important;
  min-width: 140px;
}

.s-reviews-summary-average {
  font-size: 3.6rem !important;
  font-weight: 800 !important;
  color: #002f2c !important;
  line-height: 1 !important;
  margin: 0 !important;
}

.s-rating-stars-wrapper {
  justify-content: center !important;
  margin: 8px 0 !important;
}

.s-rating-stars-btn-star svg {
  width: 24px !important;
  height: 24px !important;
  fill: #f59e0b !important;
}

.s-reviews-summary-count {
  color: #6b7280 !important;
  font-size: 0.9rem !important;
  margin-top: 4px !important;
}

/* نسبة التوصية */
.s-reviews-summary-header-section {
  text-align: center !important;
  background: linear-gradient(135deg, #ecfdf5, #d1fae5) !important;
  padding: 14px 22px !important;
  border-radius: 16px !important;
  flex-shrink: 0 !important;
}

.s-reviews-summary-recommendation-percentage {
  font-size: 1.8rem !important;
  font-weight: 800 !important;
  color: #065f46 !important;
  margin: 0 !important;
}

.s-reviews-summary-header-section .s-reviews-summary-count {
  color: #047857 !important;
  font-weight: 600 !important;
  margin-top: 2px !important;
  font-size: 0.9rem !important;
}

/* أشرطة التقييم */
.s-reviews-summary-rows {
  margin-top: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  flex: 1 !important;
  min-width: 200px;
}

.s-reviews-summary-row {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.s-reviews-summary-row-rate {
  min-width: 38px;
  font-weight: 700 !important;
  color: #002f2c !important;
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 0.95rem !important;
}

.s-reviews-summary-row-rate svg {
  width: 13px !important;
  height: 13px !important;
  fill: #f59e0b !important;
}

.s-progress-bar-wrapper {
  height: 9px !important;
  background: #e5e7eb !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  flex: 1;
}

.s-progress-bar-progress {
  background: linear-gradient(90deg, #002f2c, #00a896) !important;
  border-radius: 20px !important;
}

.s-reviews-summary-percentage {
  min-width: 42px;
  text-align: left;
  font-weight: 600 !important;
  color: #6b7280 !important;
  font-size: 0.85rem !important;
}

/* ===== قسم التعليقات ===== */
.s-comments-header {
  display: flex !important;
  justify-content: space-between;
  align-items: center;
  margin: 28px 0 18px !important;
}

.s-comments-count-label {
  font-size: 1.2rem !important;
  font-weight: 700 !important;
  color: #002f2c !important;
}

/* ===== الكاروسيل الأفقي - استهداف الأب المباشر للتعليقات ===== */
.s-comments-container > div:not(.s-comments-header):not(.s-translate-all-wrap) {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-snap-type: x mandatory !important;
  gap: 18px !important;
  padding: 8px 4px 20px !important;
  scrollbar-width: thin;
  scrollbar-color: #00a896 #e5e7eb;
  -webkit-overflow-scrolling: touch;
}

/* تنسيق شريط التمرير */
.s-comments-container > div:not(.s-comments-header):not(.s-translate-all-wrap)::-webkit-scrollbar {
  height: 6px;
}

.s-comments-container > div:not(.s-comments-header):not(.s-translate-all-wrap)::-webkit-scrollbar-track {
  background: #e5e7eb;
  border-radius: 10px;
}

.s-comments-container > div:not(.s-comments-header):not(.s-translate-all-wrap)::-webkit-scrollbar-thumb {
  background: #00a896;
  border-radius: 10px;
}

/* بطاقة التعليق */
.s-comments-item,
salla-comment-item.s-comments-item {
  min-width: 300px !important;
  max-width: 340px !important;
  width: 300px !important;
  scroll-snap-align: start !important;
  flex-shrink: 0 !important;
  display: block !important;
}

.s-comments-item-wrapper {
  background: #ffffff !important;
  border-radius: 18px !important;
  padding: 22px !important;
  box-shadow: 0 8px 28px rgba(0, 47, 44, 0.08) !important;
  border: 1px solid rgba(0, 47, 44, 0.05) !important;
  height: 100%;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.s-comments-item-wrapper:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 36px rgba(0, 47, 44, 0.13) !important;
}

/* معلومات المستخدم */
.s-comments-item-user-info-name-with-margin {
  font-size: 1rem !important;
  font-weight: 700 !important;
  color: #1a1a1a !important;
  margin: 0 !important;
}

.s-comments-item-has-order-check-text {
  color: #10b981 !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
}

.s-comments-item-has-order-check-icon svg {
  fill: #10b981 !important;
  width: 13px !important;
  height: 13px !important;
}

.s-comments-item-timestamp {
  font-size: 0.82rem !important;
  color: #9ca3af !important;
  margin-top: 3px !important;
}

/* النجوم داخل التعليق */
.s-comments-item .s-rating-stars-btn-star svg {
  width: 17px !important;
  height: 17px !important;
  fill: #f59e0b !important;
}

/* نص التعليق */
.s-comments-item-content p {
  font-size: 1.05rem !important;
  font-weight: 500 !important;
  color: #1f2937 !important;
  margin: 10px 0 14px !important;
  line-height: 1.65 !important;
}

/* رد الإدارة */
.s-comments-item-admin {
  margin-top: 14px !important;
}

.s-comments-item-admin-wrapper {
  background: linear-gradient(135deg, #f0fdfa, #ecfdf5) !important;
  border-radius: 14px !important;
  padding: 14px !important;
  border-right: 4px solid #00a896 !important;
}

.s-comments-item-admin .s-comments-item-user-info-name-with-margin {
  color: #002f2c !important;
  font-size: 0.9rem !important;
}

.s-comments-item-admin .s-comments-item-content p {
  font-size: 0.88rem !important;
  color: #374151 !important;
  margin: 5px 0 0 !important;
}

/* زر مفيد */
.s-comments-item-like-btn .s-button-element {
  border-color: #00a896 !important;
  color: #00a896 !important;
  border-radius: 50px !important;
  font-weight: 600 !important;
  padding: 5px 14px !important;
  transition: all 0.25s ease !important;
  font-size: 0.85rem !important;
}

.s-comments-item-like-btn .s-button-element:hover {
  background: #00a896 !important;
  color: white !important;
}

/* إخفاء أزرار الترجمة */
.s-translate-all-wrap,
.s-translate-wrap {
  display: none !important;
}

/* ===== الموبايل - يبقى أفقي ===== */
@media (max-width: 768px) {
  .s-reviews-summary-header {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 12px !important;
    overflow-x: auto !important;
    padding-bottom: 8px;
  }

  .s-reviews-summary-overall-section {
    min-width: 120px !important;
  }

  .s-reviews-summary-average {
    font-size: 2.8rem !important;
  }

  .s-reviews-summary-header-section {
    padding: 12px 16px !important;
    min-width: 110px;
  }

  .s-reviews-summary-recommendation-percentage {
    font-size: 1.5rem !important;
  }

  .s-reviews-summary-rows {
    min-width: 180px !important;
  }

  .s-comments-item,
  salla-comment-item.s-comments-item {
    min-width: 270px !important;
    max-width: 290px !important;
    width: 270px !important;
  }
}

@media (max-width: 480px) {
  .s-reviews-summary-average {
    font-size: 2.4rem !important;
  }

  .s-rating-stars-btn-star svg {
    width: 18px !important;
    height: 18px !important;
  }

  .s-comments-item,
  salla-comment-item.s-comments-item {
    min-width: 250px !important;
    width: 250px !important;
  }
}

/*تفاصيل المنتج*/
.faal-product-info{
order:2
}
/* ==== صفحة تفاصيل المنتج — صندوق الشراء على ثلاثة صفوف ==== */

/* الصندوق: عمود بدل الصف، وكل صف بعرض كامل */
.faal-product-buy {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 14px !important;
}

/* صف 1 — "الإجمالي" يميناً والقيمة يساراً */
.faal-product-buy .faal-product-buy-price {
  display: flex !important;
  align-items: baseline;
  justify-content: space-between !important;
  gap: 12px;
  width: 100%;
}

/* حاوية الكمية + الزر */
.faal-product-buy .faal-product-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  width: 100%;
}

/* صف 2 — كلمة "الكمية" يميناً (تُضاف من CSS لأنها غير موجودة في الـ HTML) */
.faal-product-buy .faal-product-actions:has(.faal-product-qty)::before {
  content: "الكمية";
  order: 1;
  color: var(--faal-muted, #6a706c);
  font-weight: 700;
  font-size: 14px;
  line-height: 1;
}

/* العدّاد يساراً */
.faal-product-buy .faal-product-actions .faal-product-qty {
  order: 2;
  margin-inline-start: auto !important;
}

/* صف 3 — "أضف إلى السلة" بعرض كامل */
.faal-product-buy .faal-product-actions .faal-product-add {
  order: 3;
  flex: 0 0 100% !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
}
.faal-product-buy .faal-product-add .s-button-element,
.faal-product-buy .faal-product-add button.s-button-btn,
.faal-product-buy .faal-product-add .s-button-wide {
  width: 100% !important;
}

.faal-product-detail-grid{
box-shadow: none;
    border: none;
    background: transparent;
}
.faal-product-purchase{
border: none;
    background: transparent;
    box-shadow: none;
}
.faal-product-buy{
border-radius: 10px;
    padding: 20px;
    background-color: white;
}
.faal-product-options{
border-radius:10px;
}
/**عملاؤنا*/
/* ===== قسم "من عملائنا" — صفّان متحرّكان في اتجاهين ===== */

.faal-clients-carousel {
  /* ▼▼ (١) عدد الشعارات ÷ 2 — عندك ١٤ شعاراً ← ٧ ▼▼ */
  --faal-n: 7;
  --faal-speed: 60s;              /* كلما زاد الرقم صارت الحركة أبطأ */
  --faal-gap: 18px;

  --faal-pitch: calc(100vw / (var(--faal-n) - 1.35));
  --faal-h: clamp(92px, 8.2vw, 160px);

  background: #f4ece3;
  padding-block: clamp(48px, 5vw, 80px);
  overflow: hidden;
}

/* العنوان والوصف */
.faal-clients-carousel .faal-section-title {
  margin-bottom: clamp(28px, 3.5vw, 48px);
}
.faal-clients-carousel .faal-section-title h2 {
  font-size: clamp(28px, 3.4vw, 44px);
  color: #011412;
}
.faal-clients-carousel .faal-section-title p {
  margin-top: 12px;
  font-size: clamp(15px, 1.4vw, 18px);
  color: #022f2c;
  opacity: .85;
}

/* إخفاء أسهم التنقّل — الحركة صارت تلقائية */
.faal-clients-carousel .faal-carousel-btn {
  display: none !important;
}

/* تمديد الشريط بعرض الشاشة كاملاً */
.faal-clients-carousel .faal-carousel-shell {
  display: block !important;
  width: 100vw;
  max-width: 100vw;
  margin-inline: calc(50% - 50vw);
}

/* مسار الشعارات */
.faal-clients-carousel .faal-clients-logos {
  display: block !important;
  position: relative;
  width: 100%;
  height: calc(var(--faal-h) * 2 + var(--faal-gap) * 2 + 24px);
  overflow: hidden;
  padding: 0;
  margin: 0;
}

/* البطاقة البيضاء — المسافة بين البطاقات إطار شفاف داخل العنصر نفسه،
   حتى تصبح مسافة التنقّل مضاعفاً دقيقاً من عرض العنصر */
.faal-clients-carousel .faal-clients-logos .faal-client-card {
  position: absolute;
  box-sizing: border-box;
  left: calc(var(--faal-pitch) * -1);
  width: var(--faal-pitch);
  height: calc(var(--faal-h) + var(--faal-gap));
  min-height: 0;
  margin: 0;
  border: calc(var(--faal-gap) / 2) solid transparent;
  border-radius: calc(18px + var(--faal-gap) / 2);
  background: #ffffff;
  background-clip: padding-box;
  box-shadow: none;
  padding: 16px 20px;
  display: grid;
  place-items: center;
  font-size: 16px;
  animation: faal-clients-marquee var(--faal-speed) linear infinite;
  animation-delay: calc(var(--faal-speed) / var(--faal-n) * var(--faal-i, 0) * -1);
  will-change: transform;
  backface-visibility: hidden;
}

/* منع تأثير المرور القديم من إعادة الرسم أثناء الحركة */
.faal-clients-carousel .faal-clients-logos .faal-client-card:hover {
  box-shadow: none;
}

.faal-clients-carousel .faal-clients-logos .faal-client-card img {
  width: auto;
  max-width: 100%;
  max-height: clamp(44px, 4.6vw, 70px);
  object-fit: contain;
}

/* ▼▼ (٢) هذه النسبة = --faal-n × ١٠٠٪ — غيّرها كلما غيّرت الرقم أعلاه ▼▼ */
@keyframes faal-clients-marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(700%, 0, 0); }
}

/* الصف العلوي: يتحرّك ناحية اليمين */
.faal-clients-carousel .faal-clients-logos .faal-client-card:nth-child(odd) {
  top: 12px;
}

/* الصف السفلي: يتحرّك ناحية اليسار */
.faal-clients-carousel .faal-clients-logos .faal-client-card:nth-child(even) {
  top: calc(12px + var(--faal-h) + var(--faal-gap));
  animation-direction: reverse;
}

/* إيقاف الحركة عند مرور المؤشّر */
/*.faal-clients-carousel .faal-clients-logos:hover .faal-client-card {
  animation-play-state: paused;
}*/

@media (prefers-reduced-motion: reduce) {
  .faal-clients-carousel .faal-clients-logos .faal-client-card {
    animation-play-state: paused;
  }
}

/* الجوال */
@media (max-width: 640px) {
  .faal-clients-carousel {
    --faal-gap: 12px;
    --faal-pitch: 46vw;
    --faal-h: 84px;
  }
  .faal-clients-carousel .faal-clients-logos .faal-client-card {
    border-radius: calc(14px + var(--faal-gap) / 2);
    padding: 12px 14px;
  }
}

/* الزر: أخضر مصمت */
.faal-clients-carousel .faal-section-action {
  margin-top: clamp(28px, 3vw, 44px);
}
.faal-clients-carousel .faal-btn--outline {
  min-height: 44px;
  padding-inline: 26px;
  font-size: 15px;
  background: #022f2c;
  border-color: #022f2c;
  color: #ffffff;
}
.faal-clients-carousel .faal-btn--outline:hover {
  background: #011412;
  border-color: #011412;
  color: #ffffff;
}

/* ترتيب كل شعار داخل صفّه (يدعم حتى 40 شعاراً) */
.faal-clients-logos .faal-client-card:nth-child(1){--faal-i:0}
.faal-clients-logos .faal-client-card:nth-child(2){--faal-i:0.5}
.faal-clients-logos .faal-client-card:nth-child(3){--faal-i:1}
.faal-clients-logos .faal-client-card:nth-child(4){--faal-i:1.5}
.faal-clients-logos .faal-client-card:nth-child(5){--faal-i:2}
.faal-clients-logos .faal-client-card:nth-child(6){--faal-i:2.5}
.faal-clients-logos .faal-client-card:nth-child(7){--faal-i:3}
.faal-clients-logos .faal-client-card:nth-child(8){--faal-i:3.5}
.faal-clients-logos .faal-client-card:nth-child(9){--faal-i:4}
.faal-clients-logos .faal-client-card:nth-child(10){--faal-i:4.5}
.faal-clients-logos .faal-client-card:nth-child(11){--faal-i:5}
.faal-clients-logos .faal-client-card:nth-child(12){--faal-i:5.5}
.faal-clients-logos .faal-client-card:nth-child(13){--faal-i:6}
.faal-clients-logos .faal-client-card:nth-child(14){--faal-i:6.5}
.faal-clients-logos .faal-client-card:nth-child(15){--faal-i:7}
.faal-clients-logos .faal-client-card:nth-child(16){--faal-i:7.5}
.faal-clients-logos .faal-client-card:nth-child(17){--faal-i:8}
.faal-clients-logos .faal-client-card:nth-child(18){--faal-i:8.5}
.faal-clients-logos .faal-client-card:nth-child(19){--faal-i:9}
.faal-clients-logos .faal-client-card:nth-child(20){--faal-i:9.5}
.faal-clients-logos .faal-client-card:nth-child(21){--faal-i:10}
.faal-clients-logos .faal-client-card:nth-child(22){--faal-i:10.5}
.faal-clients-logos .faal-client-card:nth-child(23){--faal-i:11}
.faal-clients-logos .faal-client-card:nth-child(24){--faal-i:11.5}
.faal-clients-logos .faal-client-card:nth-child(25){--faal-i:12}
.faal-clients-logos .faal-client-card:nth-child(26){--faal-i:12.5}
.faal-clients-logos .faal-client-card:nth-child(27){--faal-i:13}
.faal-clients-logos .faal-client-card:nth-child(28){--faal-i:13.5}
.faal-clients-logos .faal-client-card:nth-child(29){--faal-i:14}
.faal-clients-logos .faal-client-card:nth-child(30){--faal-i:14.5}
.faal-clients-logos .faal-client-card:nth-child(31){--faal-i:15}
.faal-clients-logos .faal-client-card:nth-child(32){--faal-i:15.5}
.faal-clients-logos .faal-client-card:nth-child(33){--faal-i:16}
.faal-clients-logos .faal-client-card:nth-child(34){--faal-i:16.5}
.faal-clients-logos .faal-client-card:nth-child(35){--faal-i:17}
.faal-clients-logos .faal-client-card:nth-child(36){--faal-i:17.5}
.faal-clients-logos .faal-client-card:nth-child(37){--faal-i:18}
.faal-clients-logos .faal-client-card:nth-child(38){--faal-i:18.5}
.faal-clients-logos .faal-client-card:nth-child(39){--faal-i:19}
.faal-clients-logos .faal-client-card:nth-child(40){--faal-i:19.5}

.faal-clients-carousel .faal-clients-logos .faal-client-card img { 
   max-height: clamp(60px, 4.6vw, 100px);
}
.faal-dynamic-features{
  padding: 20px 0;
}
/* ===== كرت المنتج بشكل "كارد خدمات فال" ===== */
/* لتطبيقه على قسم واحد فقط بدل كل المتجر، ضع مُعرّف القسم قبل كل سطر،
   مثال:  #services salla-product-card.s-product-card-entry { ... }        */

salla-product-card.s-product-card-entry {
  display: flex !important;
  flex-direction: column;
  height: 100%;
  min-height: 300px;
  padding: 32px !important;
  border: 0 !important;
  border-radius: 24px !important;
  background: linear-gradient(180deg, #3ac26b 0%, #fffcf4 100%) !important;
  box-shadow: none !important;
  text-align: start;
  overflow: hidden;
}

/* كرت الخدمات بلا صورة — احذف هذه القاعدة لإبقاء صورة المنتج */
salla-product-card .s-product-card-image {
  display: none !important;
}

salla-product-card .s-product-card-content {
  display: flex !important;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 0 !important;
  margin: 0 !important;
  gap: 0;
}

/* فكّ الغلاف الداخلي حتى تصبح إعادة الترتيب ممكنة */
salla-product-card .s-product-card-content-main {
  display: contents !important;
}

/* ١ — العنوان */
salla-product-card .s-product-card-content-title {
  order: 1;
  margin: 0 0 12px !important;
}
salla-product-card .s-product-card-content-title a {
  color: #011412 !important;
  font-size: 22px !important;
  font-weight: 900 !important;
  line-height: 1.35;
}

/* ٢ — "يبدأ من" + السعر */
salla-product-card .s-product-card-content-sub {
  order: 2;
  display: block !important;
  margin: 0 0 14px !important;
  padding: 0 !important;
  border: 0 !important;
}
salla-product-card .s-product-card-starting-price p {
  margin: 0 0 2px !important;
  color: #022f2c !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}
salla-product-card .s-product-card-content-sub h4 {
  margin: 0 !important;
  color: #011412 !important;
  font-size: 40px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}
salla-product-card .s-product-card-content-sub h4 i {
  font-size: .5em;
}

/* ٣ — الوصف */
salla-product-card .s-product-card-content-subtitle {
  order: 3;
  flex: 1 1 auto;
  margin: 0 0 22px !important;
  color: #022f2c !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
}

/* التقييم — احذف هذه القاعدة لو أردت إبقاءه */
salla-product-card .s-product-card-rating {
  display: none !important;
}

/* ٤ — الزر */
salla-product-card .s-product-card-content-footer {
  order: 4;
  margin: auto 0 0 !important;
  padding: 0 !important;
  border: 0 !important;
  text-align: start;
}
salla-product-card .s-product-card-content-footer salla-add-product-button,
salla-product-card .s-product-card-content-footer salla-button,
salla-product-card .s-product-card-content-footer > div {
  display: inline-block !important;
  width: auto !important;
}
salla-product-card .s-product-card-content-footer .s-button-element {
  width: auto !important;
  min-height: 44px !important;
  padding: 0 26px !important;
  border: 1px solid #022f2c !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: #022f2c !important;
  font-size: 15px !important;
  font-weight: 800 !important;
}
salla-product-card .s-product-card-content-footer .s-button-element:hover {
  background: #022f2c !important;
  color: #ffffff !important;
}
salla-product-card.s-product-card-entry{
    background: linear-gradient(1.4deg,transparent 10%, rgba(255, 255, 255, 0) -7.35%, #FEDE8E 57.36%, #77F685 79.34%)!important;

}
.s-slider-v-centered .s-slider-block__title-nav{
  width: 100%;
  left: 0;
}
.customers-also-bought__list .vertical-products .s-products-slider-slider{
  padding: 10px 60px;
}
.faal-product-detail{
  padding-bottom: 20px;
}
.faal-related-products{
  padding-top:30px ;
  padding-bottom: 30px
}
/* ===== صفحة تفاصيل المقال ===== */

/* الترويسة: بلا خلفية خضراء، وعمود واحد موسَّط */
.faal-article-hero {
  padding: clamp(100px, 11vw, 150px) 0 clamp(24px, 3vw, 40px) !important;
  background: transparent !important;
}

.faal-article-hero .faal-container {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 0;
  width: min(1020px, calc(100% - 40px)) !important;
  text-align: center;
}

/* فكّ الغلاف الداخلي حتى يمكن إعادة الترتيب: العنوان ← الشارة ← الملخّص */
.faal-article-hero .faal-container > div {
  display: contents !important;
}

.faal-article-hero h1 {
  order: 1;
  max-width: 900px;
  margin: 0 0 16px !important;
  font-size: clamp(26px, 3.4vw, 40px) !important;
  line-height: 1.35 !important;
}

.faal-article-hero .faal-blog-badge {
  order: 2;
  margin: 0 0 8px !important;
}

.faal-article-hero p {
  order: 3;
  max-width: 680px;
  margin: 8px 0 0 !important;
  font-size: 16px !important;
  line-height: 1.7 !important;
}

/* الصورة: بعرض العمود كامل، أسفل العنوان */
.faal-article-hero img {
  order: 4;
  width: 100%;
  margin-top: clamp(24px, 3vw, 40px);
  aspect-ratio: 3 / 2 !important;
  border-radius: 18px !important;
  box-shadow: none !important;
}

/* جسم المقال: بلا صندوق، وبعرض قراءة مريح */
.faal-section:has(> .faal-article) {
  padding-block: clamp(24px, 3vw, 44px) !important;
}

.faal-article {
  
  margin-inline: auto;
  padding: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
}

.faal-article h2 {
  margin: clamp(34px, 4vw, 52px) 0 14px !important;
  font-size: clamp(21px, 2.2vw, 26px) !important;
}

.faal-article h3 {
  margin: clamp(28px, 3vw, 38px) 0 10px !important;
  font-size: clamp(18px, 1.9vw, 21px) !important;
}

.faal-article p,
.faal-article li {
  font-size: 16px !important;
  line-height: 1.9 !important;
}

.faal-article p {
  margin: 0 0 16px !important;
}

/* صور داخل نصّ المقال */
.faal-article img {
  max-width: 100%;
  height: auto;
  border-radius: 14px;
}
body:has(.faal-article-hero) {
  background: var(--faal-bg);
}
.faal-article-share{
  display: none;
}
/* أزرار المشاركة */
.faal-article-share {
  max-width: 700px;
  margin-inline: auto;
}

@media (max-width: 640px) {
  .faal-article-hero {
    padding-top: clamp(80px, 22vw, 110px) !important;
  }
  .faal-article-hero img {
    aspect-ratio: 4 / 3 !important;
    border-radius: 14px !important;
  }
}
.gp-hero-sub{
  margin-top: 10px !important;
}
@media (max-width: 992px) {
  main.gp.gp-about .hero-video {
    width: min(360px, 100%) !important;
    max-width: 100% !important;
  }
}



@media (max-width: 768px) {
  main.gp.gp-about .hero-video { width: min(320px, 88%) !important; }

  main.gp.gp-about .contact-visual { height: auto !important; }

  main.gp.gp-about .laptop-wrap {
    position: static !important;
    left: auto !important;
    transform: none !important;
    width: 72% !important;
    max-width: none !important;
  }
}
/* ===== عرض حاوية عن فال حسب المقاس ===== */

/* اللابتوب والديسكتوب — عرض التصميم الأصلي 1320px */
main.gp.gp-about {
  width: min(1320px, 92%) !important;
  margin-inline: auto !important;
    max-width: 1100px !important;

}

/* التابلت */
@media (max-width: 1024px) {
  main.gp.gp-about {
    width: min(900px, 92%) !important;
    max-width: 850px !important;
  }
  
}

/* الجوال — 320px كما طلبت */
@media (max-width: 768px) {
  main.gp.gp-about {
    width: 320px !important;
    max-width: 100% !important;
  }
}
.faal-footer-bottom span {
  font-size: 0 !important;
}

.faal-footer-bottom span::before {
  content: "جميع الحقوق محفوظة © 2026 فال.";
  font-size: 14px;
}
.faal-footer-bottom{
  flex-direction: row-reverse;
}

@media (max-width: 960px) {
  /* 1) تفكيك حاوية الأدوات: أبناؤها يصيرون أبناءً مباشرين للهيدر */
  .faal-header .faal-header-actions {
    display: contents;
  }
.faal-footer-bottom{
  flex-direction:column;
}
  .faal-header {
    gap: 16px;
  }

  /* 2) الترتيب — في RTL الرقم الأصغر = الأقرب لليمين */
  .faal-header .faal-menu-toggle {
    order: 1;
  }

  .faal-header .faal-brand {
    order: 2;
    margin-inline-end: auto;   /* يدفع بقية الأيقونات لأقصى اليسار */
  }

  .faal-header .faal-user-menu  { order: 3; }
  .faal-header .faal-cart       { order: 4; }
  .faal-header .faal-search-btn { order: 5; }
}
.faal-salla-surface {
  box-shadow: none;
  background: transparent;
  border: none;
}
.faal-footer p, .faal-footer a ,
.faal-footer-menu a:hover, .faal-footer-menu a:focus-visible {
    font-weight: 500;
   color: black;
  
}
.faal-footer-bottom span::before {
color: black;
}
.faal-package-head{
  flex-direction: column-reverse;
}
/*carousel*/

/* ===== شريطا عملاء متعاكسان — CSS فقط ===== */

.faal-clients-carousel .faal-carousel-btn { display: none !important; }

.faal-clients-carousel .faal-clients-logos {
  --faal-drift: 220px;            /* مقدار الانزياح — اقرأ الملاحظة أدناه */

  display: grid !important;
  grid-auto-flow: column;
  grid-template-rows: repeat(2, auto);
  grid-auto-columns: clamp(150px, 17vw, 200px);
  gap: 20px;
  direction: ltr;

  overflow: hidden !important;     /* بدل auto: لا شريط تمرير ولا سحب */
  justify-content: start !important;
  scroll-snap-type: none !important;

  }

/* الصف الأول: العناصر الفردية. الثاني: الزوجية — بفضل تدفّق الأعمدة أعلاه. */
.faal-clients-carousel .faal-client-card {
  animation: faal-drift 26s ease-in-out infinite alternate;
  will-change: transform;
}

.faal-clients-carousel .faal-client-card:nth-child(even) {
  animation-direction: alternate-reverse;
}

.faal-clients-carousel .faal-clients-logos:hover .faal-client-card {
  animation-play-state: paused;
}

@keyframes faal-drift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(calc(var(--faal-drift) * -1), 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .faal-clients-carousel .faal-client-card { animation: none; }
}
.faal-footer{
  padding-top: 30px;
}
.faal-container.faal-section.faal-product-reviews{
  margin-bottom: 0;
  margin-top: 0;
}
.faal-package-card{
  box-shadow: none;
}
.faal-services.faal-packages{
  padding-bottom: 50px;
  padding-top: 50px;
}
.value-card.values-message-card img {
  height: 100% !important;
}
.faal-header{
  padding: 0 24px;
}
.s-block--bundle-similar-products{
  padding: 20px;
}
.faal-package-note{
  color: red !important;
}
.faal-banner-slide{
  max-height: 500px;
  min-height: 200px !important ;
}
.faal-banner-slide picture img{
    min-height: 200px !important ;
}