/* ==========================================================================
   WADI MATROUH — COMPONENTS
   Header · nav · buttons · product card · PDP · cart · checkout · trust · footer
   ========================================================================== */

/* ==========================  BUTTONS  ========================== */
.wadi-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--wadi-sp-2);
  min-height: var(--wadi-tap-min);
  padding: var(--wadi-sp-3) var(--wadi-sp-5);
  font-family: var(--wadi-font-ar); font-size: var(--wadi-fs-base); font-weight: var(--wadi-fw-semi);
  line-height: 1; text-align: center; text-decoration: none;
  border: 1px solid transparent; border-radius: var(--wadi-r-pill);
  cursor: pointer; transition: background var(--wadi-dur) var(--wadi-ease), color var(--wadi-dur) var(--wadi-ease), border-color var(--wadi-dur) var(--wadi-ease);
}
.wadi-btn--primary { background: var(--wadi-olive); color: #fff; }
.wadi-btn--primary:hover { background: var(--wadi-olive-500); color: #fff; }
.wadi-btn--secondary { background: transparent; color: var(--wadi-olive); border-color: var(--wadi-olive); }
.wadi-btn--secondary:hover { background: var(--wadi-olive); color: #fff; }
.wadi-btn--ghost { background: transparent; color: var(--wadi-olive); padding-inline: var(--wadi-sp-2); }
.wadi-btn--block { width: 100%; }
.wadi-btn--lg { font-size: var(--wadi-fs-md); padding: var(--wadi-sp-4) var(--wadi-sp-6); }
.wadi-btn[disabled], .wadi-btn.is-disabled { opacity: .5; pointer-events: none; }

/* Gold is an accent, never a CTA — it fails contrast on cream and cheapens at scale */
.wadi-rule-gold { height: 2px; width: 56px; background: var(--wadi-gold); border: 0; margin: var(--wadi-sp-3) 0; }

/* ==========================  HEADER · NAV · DRAWER · MOBILE NAV  ==========================
   Moved to 06-header.css on 2026-09-21.

   These components were first sketched here during the design-system batch,
   before the header was built. The header build then redefined all 19
   selectors in 06-header.css, which loads later and therefore won. That left
   this block as dead code that still read like the source of truth — and one
   copy was actively wrong: the drawer used transform: translateX(-100%) for
   RTL, which 06 replaced with a logical --wadi-flip custom property.

   Single source of truth is now 06-header.css.
   ========================================================================== */


/* ==========================  PRODUCT CARD  ========================== */
.wadi-card {
  display: flex; flex-direction: column;
  background: var(--wadi-surface);
  border: 1px solid var(--wadi-line); border-radius: var(--wadi-r-lg);
  overflow: hidden; height: 100%;
  transition: border-color var(--wadi-dur) var(--wadi-ease), box-shadow var(--wadi-dur) var(--wadi-ease);
}
.wadi-card:hover { border-color: var(--wadi-olive); box-shadow: var(--wadi-shadow-md); }
.wadi-card__media { position: relative; }
.wadi-card__body { display: flex; flex-direction: column; gap: var(--wadi-sp-2); padding: var(--wadi-sp-4); flex: 1; }
.wadi-card__title {
  font-size: var(--wadi-fs-base); font-weight: var(--wadi-fw-semi); line-height: var(--wadi-lh-snug);
  color: var(--wadi-ink); margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* Size is a first-class field — size confusion is a COD refusal risk */
.wadi-card__size { font-size: var(--wadi-fs-sm); color: var(--wadi-ink-muted); }
.wadi-card__price { display: flex; align-items: baseline; gap: var(--wadi-sp-2); margin-top: auto; }
.wadi-card__price .amount { font-size: var(--wadi-fs-md); font-weight: var(--wadi-fw-bold); color: var(--wadi-olive); }
.wadi-card__price del .amount { font-size: var(--wadi-fs-sm); font-weight: var(--wadi-fw-regular); color: var(--wadi-ink-muted); }
.wadi-card__cta { margin-top: var(--wadi-sp-2); }

/* Sale badge — ONLY for genuine, time-boxed reductions.
   The old site put this on 12 of 14 products, which made it meaningless. */
.wadi-badge {
  position: absolute; inset-block-start: var(--wadi-sp-3); inset-inline-start: var(--wadi-sp-3);
  background: var(--wadi-sale); color: #fff;
  font-size: var(--wadi-fs-xs); font-weight: var(--wadi-fw-semi);
  padding: 4px 10px; border-radius: var(--wadi-r-pill);
}
.wadi-badge--oos { background: var(--wadi-ink-muted); }
.wadi-badge--new { background: var(--wadi-leaf); }

/* ==========================  CATEGORY CARD  ==========================
   Stretched-link pattern: the card is a <div>, the link is an absolutely
   positioned <a> inside it. Robust against wpautop and keeps the whole card
   clickable without nesting block content inside an anchor. */
.wadi-catcard { position: relative; display: block; border-radius: var(--wadi-r-lg); overflow: hidden; text-decoration: none; }
.wadi-catcard__link {
  position: absolute; inset: 0; z-index: 2;
  border-radius: inherit; text-indent: -9999px; overflow: hidden;
}
.wadi-catcard:hover .wadi-catcard__overlay { background: linear-gradient(to top, rgba(14,75,46,.90) 0%, rgba(14,75,46,.20) 60%, transparent 100%); }
.wadi-catcard__overlay {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end;
  padding: var(--wadi-sp-4);
  background: linear-gradient(to top, rgba(14,75,46,.82) 0%, rgba(14,75,46,.10) 55%, transparent 100%);
  color: #fff;
}
.wadi-catcard__title { color: #fff; font-size: var(--wadi-fs-lg); margin: 0 0 2px; }
.wadi-catcard__count { font-size: var(--wadi-fs-sm); opacity: .9; }

/* ==========================  PDP  ========================== */
.wadi-pdp { display: grid; gap: var(--wadi-sp-5); }
@media (min-width: 900px) { .wadi-pdp { grid-template-columns: 1.1fr 1fr; gap: var(--wadi-sp-7); align-items: start; } }

.wadi-pdp__gallery { display: grid; gap: var(--wadi-sp-3); }
.wadi-pdp__thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--wadi-sp-2); }
.wadi-pdp__thumb { border: 1px solid var(--wadi-line); border-radius: var(--wadi-r-md); overflow: hidden; cursor: pointer; }
.wadi-pdp__thumb[aria-selected="true"] { border-color: var(--wadi-olive); border-width: 2px; }

.wadi-pdp__title { font-size: var(--wadi-fs-2xl); margin-bottom: var(--wadi-sp-2); }
.wadi-pdp__price { font-size: var(--wadi-fs-xl); font-weight: var(--wadi-fw-bold); color: var(--wadi-olive); }

/* Variation swatches — price per size visible, per the PDP spec */
.wadi-variations { display: flex; flex-wrap: wrap; gap: var(--wadi-sp-2); }
.wadi-swatch {
  min-height: var(--wadi-tap-min); min-width: 72px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  padding: var(--wadi-sp-2) var(--wadi-sp-3);
  border: 1px solid var(--wadi-line); border-radius: var(--wadi-r-md);
  background: var(--wadi-surface); cursor: pointer; font-size: var(--wadi-fs-sm);
}
.wadi-swatch[aria-pressed="true"] { border-color: var(--wadi-olive); border-width: 2px; background: var(--wadi-olive-100); }
.wadi-swatch__price { font-size: var(--wadi-fs-xs); color: var(--wadi-ink-muted); }

/* Sticky add-to-cart on mobile */
.wadi-stickybuy {
  position: fixed; inset-inline: 0; bottom: 56px; z-index: calc(var(--wadi-z-header) - 1);
  display: flex; align-items: center; gap: var(--wadi-sp-3);
  padding: var(--wadi-sp-3) var(--wadi-gutter);
  background: var(--wadi-surface); border-top: 1px solid var(--wadi-line);
  box-shadow: 0 -4px 16px rgba(14,75,46,.08);
}
.wadi-stickybuy .wadi-btn { flex: 1; }
@media (min-width: 900px) { .wadi-stickybuy { display: none; } }

/* ==========================  TRUST  ========================== */
.wadi-trust { display: grid; gap: var(--wadi-sp-4); }
@media (min-width: 640px) { .wadi-trust { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1024px) { .wadi-trust { grid-template-columns: repeat(4,1fr); } }
.wadi-trust__item { display: flex; gap: var(--wadi-sp-3); align-items: flex-start; }
.wadi-trust__icon { flex: 0 0 auto; width: 28px; height: 28px; color: var(--wadi-leaf); }
.wadi-trust__title { font-size: var(--wadi-fs-base); font-weight: var(--wadi-fw-semi); margin: 0 0 2px; color: var(--wadi-ink); }
.wadi-trust__text { font-size: var(--wadi-fs-sm); color: var(--wadi-ink-soft); margin: 0; }

/* COD reassurance — the single most important trust element for this store */
.wadi-cod {
  display: flex; align-items: center; gap: var(--wadi-sp-3);
  padding: var(--wadi-sp-4); border-radius: var(--wadi-r-lg);
  background: var(--wadi-cream); color: var(--wadi-olive-900);
  font-size: var(--wadi-fs-sm); font-weight: var(--wadi-fw-medium);
}

/* ==========================  CART / CHECKOUT  ========================== */
.wadi-cartline { display: grid; grid-template-columns: 72px 1fr auto; gap: var(--wadi-sp-3); align-items: center; padding-block: var(--wadi-sp-4); border-bottom: 1px solid var(--wadi-line); }
.wadi-qty { display: inline-flex; align-items: center; border: 1px solid var(--wadi-line); border-radius: var(--wadi-r-pill); overflow: hidden; }
.wadi-qty button { width: var(--wadi-tap-min); height: var(--wadi-tap-min); border: 0; background: transparent; font-size: var(--wadi-fs-md); cursor: pointer; color: var(--wadi-olive); }
.wadi-qty input { width: 48px; height: var(--wadi-tap-min); border: 0; text-align: center; font-family: var(--wadi-font-latin); direction: ltr; }

.wadi-summary { background: var(--wadi-cream-50); border: 1px solid var(--wadi-line); border-radius: var(--wadi-r-lg); padding: var(--wadi-sp-5); }
.wadi-summary__row { display: flex; justify-content: space-between; gap: var(--wadi-sp-3); padding-block: var(--wadi-sp-2); }
.wadi-summary__row--total { border-top: 1px solid var(--wadi-line); margin-top: var(--wadi-sp-2); padding-top: var(--wadi-sp-3); font-weight: var(--wadi-fw-bold); font-size: var(--wadi-fs-md); }

/* Checkout — one field per row on mobile; phone is the primary field for COD */
.wadi-field { margin-bottom: var(--wadi-sp-4); }
.wadi-field label { display: block; font-size: var(--wadi-fs-sm); font-weight: var(--wadi-fw-medium); margin-bottom: var(--wadi-sp-2); }
.wadi-field input, .wadi-field select, .wadi-field textarea {
  width: 100%; min-height: var(--wadi-tap-min);
  padding: var(--wadi-sp-3); font-family: var(--wadi-font-ar); font-size: var(--wadi-fs-base);
  border: 1px solid var(--wadi-line); border-radius: var(--wadi-r-md); background: var(--wadi-surface);
}
.wadi-field input[type="tel"] { direction: ltr; text-align: right; font-family: var(--wadi-font-latin); }
.wadi-field__hint { font-size: var(--wadi-fs-xs); color: var(--wadi-ink-muted); margin-top: var(--wadi-sp-1); }

/* ==========================  FOOTER  ========================== */
.wadi-footer { background: var(--wadi-olive); color: var(--wadi-cream-50); padding-block: var(--wadi-sp-7) var(--wadi-sp-5); }
.wadi-footer a { color: var(--wadi-cream-50); opacity: .88; text-decoration: none; }
.wadi-footer a:hover { opacity: 1; text-decoration: underline; }
.wadi-footer__grid { display: grid; gap: var(--wadi-sp-6); }
@media (min-width: 768px) { .wadi-footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.wadi-footer__title { font-size: var(--wadi-fs-base); font-weight: var(--wadi-fw-semi); color: #fff; margin-bottom: var(--wadi-sp-3); }
.wadi-footer__list { list-style: none; margin: 0; padding: 0; }
.wadi-footer__list li { margin-bottom: var(--wadi-sp-2); font-size: var(--wadi-fs-sm); }
.wadi-footer__bottom { margin-top: var(--wadi-sp-6); padding-top: var(--wadi-sp-4); border-top: 1px solid rgba(255,255,255,.16); font-size: var(--wadi-fs-xs); opacity: .8; }

/* ==========================  WHATSAPP  ==========================
   Static link, not a chat widget — a chat plugin would cost more than the
   entire image budget. */
.wadi-whatsapp {
  position: fixed; inset-inline-end: var(--wadi-sp-4); bottom: calc(56px + var(--wadi-sp-4));
  z-index: var(--wadi-z-header);
  width: 52px; height: 52px; border-radius: var(--wadi-r-pill);
  display: grid; place-items: center;
  background: #25D366; color: #fff; box-shadow: var(--wadi-shadow-md);
}
@media (min-width: 1024px) { .wadi-whatsapp { bottom: var(--wadi-sp-5); } }

/* ==========================  COPY PLACEHOLDERS  ==========================
   Visible in staging, impossible to ship to production unnoticed. */
.wadi-copy-required {
  display: inline-block; padding: 2px 8px; border-radius: var(--wadi-r-sm);
  background: repeating-linear-gradient(45deg, #FFF3CD, #FFF3CD 8px, #FFE79A 8px, #FFE79A 16px);
  color: #7A5B00; font-size: var(--wadi-fs-sm); font-weight: var(--wadi-fw-semi);
}