/* ============================================================
   Ninja Quick Buy — dressed for Sadan.

   The plugin is self-contained and generic: it hardcodes
   `direction: rtl`, a gold accent, and Font Awesome glyphs that
   this site does not load (they render as empty 18px gutters).
   Overriding from the theme rather than forking keeps the plugin
   updatable from GitHub.

   Structure it uses, so the overrides land in the right place:
     .ninja-qb-field   → the bordered wrapper (flex: <i> + control)
     .ninja-qb-field > input/select/textarea → borderless, flex:1
     .ninja-qb-field--select::after → FA chevron
   ============================================================ */

.ninja-qb-overlay {
  --g:  #141110;          /* accent → ink */
  --g7: #141110;
  --ink: #141110;
  --ink2: #4A423F;
  --line: #DCD1CE;
  --cream: #F6F1EF;
  --surface: #FDFBFA;

  background: rgba(20, 17, 16, .42);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-family: "Jost", "Helvetica Neue", Arial, sans-serif;
}

/* ---------- direction: the plugin is authored RTL-first ----------
   It sets both `direction: rtl` on the overlay and `text-align: right`
   on the modal, so both have to be answered. */
html:not([dir="rtl"]) .ninja-qb-overlay { direction: ltr; }
html:not([dir="rtl"]) .ninja-qb-modal,
html:not([dir="rtl"]) .ninja-qb-overlay [class^="ninja-qb"],
html:not([dir="rtl"]) .ninja-qb-overlay input,
html:not([dir="rtl"]) .ninja-qb-overlay select,
html:not([dir="rtl"]) .ninja-qb-overlay textarea,
html:not([dir="rtl"]) .ninja-qb-city-wrap input,
html:not([dir="rtl"]) .ninja-qb-city-wrap select { text-align: left; }
/* totals rows are flex space-between — keep their right-hand value right */
html:not([dir="rtl"]) .ninja-qb-row > :last-child { text-align: right; }

html[dir="rtl"] .ninja-qb-overlay { font-family: "Tajawal", sans-serif; }

/* ---------- panel ---------- */
.ninja-qb-modal {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: none;
}
.ninja-qb-modal > * { border-color: var(--line) !important; }

.ninja-qb-overlay h2,
.ninja-qb-overlay h3,
.ninja-qb-head strong,
.ninja-qb-title {
  font-family: "Bodoni Moda", "Times New Roman", serif;
  font-weight: 400;
  letter-spacing: -.01em;
  text-transform: none;
}
html[dir="rtl"] .ninja-qb-overlay h2,
html[dir="rtl"] .ninja-qb-overlay h3,
html[dir="rtl"] .ninja-qb-title { font-family: "Tajawal", sans-serif; }

/* ---------- Font Awesome is not loaded here ----------
   Hide the empty glyph gutters and draw our own select chevron. */
.ninja-qb-overlay i[class*="fa-"] { display: none !important; }
.ninja-qb-field--select::after {
  content: "" !important;
  font-family: inherit !important;
  width: 7px; height: 7px;
  border-right: 1px solid var(--ink2);
  border-bottom: 1px solid var(--ink2);
  transform: translateY(-70%) rotate(45deg);
  inset-inline-start: auto !important;
  inset-inline-end: 16px;
}

/* ---------- fields: border the wrapper, never the control ---------- */
.ninja-qb-field {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: 0 !important;
  padding: 0 14px !important;
  gap: 0 !important;
  transition: border-color .2s ease;
}
.ninja-qb-field:focus-within {
  border-color: var(--ink) !important;
  box-shadow: none !important;
}
.ninja-qb-field input,
.ninja-qb-field select,
.ninja-qb-field textarea,
.ninja-qb-city-wrap input,
.ninja-qb-city-wrap select {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  font-size: 16px !important;      /* stop iOS zooming on focus */
  color: var(--ink) !important;
  min-height: 50px;
}
.ninja-qb-field input::placeholder,
.ninja-qb-field textarea::placeholder { color: #8B817D; }
.ninja-qb-field:has(.is-err) { border-color: #6B2333 !important; background: #FBF6F6 !important; }

/* ---------- quantity stepper ---------- */
.ninja-qb-stepper button {
  border-radius: 0 !important;
  border: 1px solid var(--line) !important;
  background: var(--surface) !important;
  color: var(--ink) !important;
  min-width: 2.75rem; min-height: 2.75rem;
}
.ninja-qb-stepper button:hover { background: #E9DFDE !important; border-color: var(--ink) !important; color: var(--ink) !important; }
.ninja-qb-stepper input {
  border-radius: 0 !important;
  border-color: var(--line) !important;
  font-weight: 500 !important;
  font-size: 16px !important;
  height: 2.75rem !important;
}

/* ---------- totals ---------- */
.ninja-qb-row { color: var(--ink2); }
.ninja-qb-row--total { color: var(--ink); }
.ninja-qb-total-val,
.ninja-qb-sub,
.ninja-qb-disc { color: var(--ink) !important; font-variant-numeric: tabular-nums; }

/* ---------- product card ---------- */
.ninja-qb-overlay [class*="ninja-qb-prod"] {
  border-radius: 0 !important;
  border-color: var(--line) !important;
  background: var(--surface) !important;
}
.ninja-qb-overlay img { border-radius: 0 !important; }

/* ---------- coupon toggle ---------- */
.ninja-qb-coupon-toggle {
  color: var(--ink2) !important;
  font-weight: 400 !important;
  border-bottom: 1px solid var(--line);
}
.ninja-qb-coupon-toggle:hover { text-decoration: none; border-color: var(--ink); }

/* ---------- submit ---------- */
.ninja-qb-overlay button[type="submit"],
.ninja-qb-submit {
  border-radius: 999px !important;
  background: var(--ink) !important;
  color: var(--cream) !important;
  border: 1px solid var(--ink) !important;
  font-weight: 500 !important;
  letter-spacing: .13em;
  text-transform: uppercase;
  font-size: .8125rem !important;
  min-height: 3.25rem;
}
html[dir="rtl"] .ninja-qb-overlay button[type="submit"] {
  letter-spacing: 0; text-transform: none; font-size: .9375rem !important;
}

/* ---------- close ---------- */
.ninja-qb-close {
  background: transparent !important;
  border: 1px solid var(--line) !important;
  color: var(--ink) !important;
  border-radius: 999px !important;
}
.ninja-qb-close:hover { background: #E9DFDE !important; }

/* ---------- delivery cost, shown as soon as a governorate is picked ---------- */
.sadan-qb-delivery {
  margin: 0;
  padding: 0 0 .75rem;
  font-size: .8125rem;
  color: var(--ink2);
  font-variant-numeric: tabular-nums;
}
.ninja-qb-field--select { flex-wrap: wrap; }
.ninja-qb-field--select .sadan-qb-delivery { flex: 1 0 100%; }

@media (prefers-reduced-motion: reduce) {
  .ninja-qb-overlay, .ninja-qb-modal { transition: none !important; }
}


/* ---------- #5 sizing and the close control ---------- */
.ninja-qb-modal {
  width: min(420px, calc(100vw - 24px));
  max-height: calc(100svh - 24px);
  padding: 0;
}
.ninja-qb-modal > form,
.ninja-qb-body { padding: 20px !important; }

.ninja-qb-close {
  width: 44px !important; height: 44px !important;
  font-size: 1.25rem !important; line-height: 1 !important;
  display: grid !important; place-items: center !important;
}
.ninja-qb-close::before { content: "\00d7"; }

/* the icon column is hidden, so reclaim its gutter */
.ninja-qb-field { gap: 0 !important; }
.ninja-qb-field > i { display: none !important; width: 0 !important; }

.ninja-qb-overlay [class*="ninja-qb-prod"] strong,
.ninja-qb-overlay [class*="ninja-qb-prod"] h3 {
  font-family: "Bodoni Moda", serif; font-size: 1.5rem; font-weight: 400;
}
.ninja-qb-overlay [class*="ninja-qb-prod"] [class*="price"] {
  font-family: "Jost", sans-serif; font-size: 1.125rem; font-weight: 500;
}