*/

/*
 * Everything here uses logical properties, with no `[dir="rtl"]` block anywhere.
 * The Arabic layout mirrors because `inline-start` already means "right" when
 * the document direction is rtl. A physical `left` or `margin-right` added
 * below silently breaks that, so it is worth re-reading a diff for one.
 */

:root {
  --qasitli-radius-card: 10px;
  --qasitli-radius-button: 8px;
  --qasitli-line: rgba(28, 27, 30, 0.09);
  --qasitli-section-y: 96px;
}

@media (max-width: 782px) {
  :root { --qasitli-section-y: 48px; }
}

/*
 * Arabic carries diacritics above and descenders below the same line, so the
 * Latin 1.6 crowds it. Scoped to the language rather than the direction: the
 * leading follows the script, not which way the page runs.
 */
html[lang|="ar"] body { line-height: 1.8; }

/* Prices stay left-to-right inside Arabic sentences. Pair with <bdi> in markup. */
.qasitli-amount {
  unicode-bidi: isolate;
  direction: ltr;
  font-variant-numeric: tabular-nums;
}

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

.qasitli-card {
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--qasitli-line);
  border-radius: var(--qasitli-radius-card);
  padding: 24px;
}

/* Hero ------------------------------------------------------------------ */

.qasitli-hero {
  background: var(--wp--preset--color--brand);
  color: #fff;
  padding-block: var(--qasitli-section-y);
}

.qasitli-hero :is(h1, h2, p) { color: #fff; }

.qasitli-hero__sub {
  max-width: 44ch;
  opacity: 0.92;
  font-size: var(--wp--preset--font-size--large);
}

/*
 * The mockup sits after the copy in the DOM so a screen reader and a phone
 * both get the headline first; the grid puts it alongside on a wide screen,
 * on whichever side the reading direction makes "after".
 */
.qasitli-hero__grid {
  display: grid;
  gap: 48px;
  align-items: center;
}

@media (min-width: 900px) {
  .qasitli-hero__grid { grid-template-columns: 1fr minmax(0, 420px); }
}

/* Buttons --------------------------------------------------------------- */

.qasitli-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: var(--qasitli-radius-button);
  padding: 14px 24px;
  font-weight: 700;
  text-decoration: none;
  min-height: 48px;
}

.qasitli-btn--onbrand { background: #fff; color: var(--wp--preset--color--brand-strong); }
.qasitli-btn--onbrand:hover { background: var(--wp--preset--color--brand-soft); }

/* Outlined on red: white text clears AA on #E31E24 at 4.69:1. */
.qasitli-btn--ghost { border: 1.5px solid rgba(255, 255, 255, 0.7); color: #fff; }
.qasitli-btn--ghost:hover { border-color: #fff; }

/* Audience split -------------------------------------------------------- */

.qasitli-split { display: grid; gap: 24px; }

@media (min-width: 782px) {
  .qasitli-split { grid-template-columns: 1fr 1fr; }
}

.qasitli-split__card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--wp--preset--color--surface);
  border: 1px solid var(--qasitli-line);
  border-radius: var(--qasitli-radius-card);
  padding: 32px;
  text-decoration: none;
  color: inherit;
  transition: border-color 120ms ease;
}

.qasitli-split__card:hover { border-color: var(--wp--preset--color--brand); }

/* Cashback -------------------------------------------------------------- */

/* Green, not red: this is the reward, and red reads as a warning. */
.qasitli-cashback {
  background: var(--wp--preset--color--mint-soft);
  border-radius: var(--qasitli-radius-card);
  padding: 48px 32px;
}

.qasitli-cashback__rate {
  color: var(--wp--preset--color--mint);
  font-family: var(--wp--preset--font-family--heading);
  font-size: var(--wp--preset--font-size--xx-large);
  font-weight: 700;
}

.qasitli-rules { display: grid; gap: 12px; margin-block-start: 24px; padding: 0; list-style: none; }
.qasitli-rules li { padding-inline-start: 28px; position: relative; }

.qasitli-rules li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.55em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--wp--preset--color--mint);
}

/* Disclosures ----------------------------------------------------------- */

/*
 * Never smaller than 14px and never lighter than --ink-soft. A plan figure is
 * indicative and the bank sets the real terms; copy that qualifies a financial
 * claim has to be legible or it is not a disclosure.
 */
.qasitli-disclosure {
  color: var(--wp--preset--color--ink-soft);
  font-size: var(--wp--preset--font-size--small);
  max-width: 60ch;
}

.qasitli-footer-disclosure {
  border-block-start: 1px solid var(--qasitli-line);
  padding-block-start: 24px;
  margin-block-start: 24px;
}

/* Waitlist -------------------------------------------------------------- */

.qasitli-waitlist { display: flex; flex-wrap: wrap; gap: 12px; max-width: 480px; }
.qasitli-waitlist input[type="email"] {
  flex: 1 1 220px;
  min-height: 48px;
  border-radius: var(--qasitli-radius-button);
  border: 1px solid var(--qasitli-line);
  padding-inline: 16px;
  font: inherit;
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* Showcase -------------------------------------------------------------- */

.qasitli-showcase { display: grid; gap: 48px; align-items: center; }

@media (min-width: 900px) {
  .qasitli-showcase { grid-template-columns: minmax(0, 420px) 1fr; }
  /* Copy first in the DOM, mockups alongside. Phones stay on the inline start. */
  .qasitli-showcase__media { order: -1; }
}

.qasitli-showcase__media { display: flex; gap: 16px; justify-content: center; }

.qasitli-phone {
  margin: 0;
  max-width: 220px;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 12px 32px rgba(28, 27, 30, 0.14);
}

.qasitli-phone--raised { margin-block-start: -32px; }

.qasitli-dashboard img {
  border-radius: var(--qasitli-radius-card);
  border: 1px solid var(--qasitli-line);
}

/* Feature lists --------------------------------------------------------- */

.qasitli-features { display: grid; gap: 24px; margin: 24px 0 0; padding: 0; list-style: none; }

.qasitli-features li { display: grid; gap: 4px; }
.qasitli-features strong { font-family: var(--wp--preset--font-family--heading); }
.qasitli-features span { color: var(--wp--preset--color--ink-soft); }

@media (min-width: 782px) {
  .qasitli-features--grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}

/* Steps ----------------------------------------------------------------- */

.qasitli-steps {
  display: grid;
  gap: 24px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: qasitli-step;
}

@media (min-width: 782px) {
  .qasitli-steps { grid-template-columns: repeat(4, 1fr); }
}

.qasitli-steps li { display: grid; gap: 4px; counter-increment: qasitli-step; }

/*
 * The number is generated rather than typed so it cannot drift from the order,
 * and content: counter() reads as a number in both scripts without needing an
 * Arabic-Indic variant. Western digits throughout is the deliberate choice.
 */
.qasitli-steps li::before {
  content: counter(qasitli-step);
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--wp--preset--color--brand-soft);
  color: var(--wp--preset--color--brand-strong);
  font-family: var(--wp--preset--font-family--heading);
  font-weight: 700;
}

.qasitli-steps strong { font-family: var(--wp--preset--font-family--heading); }
.qasitli-steps span { color: var(--wp--preset--color--ink-soft); }

/* FAQ ------------------------------------------------------------------- */

.qasitli-faq { margin-block-start: 24px; border-block-start: 1px solid var(--qasitli-line); }
.qasitli-faq details { border-block-end: 1px solid var(--qasitli-line); }

.qasitli-faq summary {
  cursor: pointer;
  padding-block: 16px;
  padding-inline-end: 32px;
  font-family: var(--wp--preset--font-family--heading);
  font-weight: 600;
  position: relative;
  list-style: none;
  min-height: 48px;
}

.qasitli-faq summary::-webkit-details-marker { display: none; }

/* A plus that becomes a minus. Centred, so it needs no mirroring. */
.qasitli-faq summary::after {
  content: "+";
  position: absolute;
  inset-inline-end: 0;
  inset-block-start: 14px;
  font-size: 20px;
  color: var(--wp--preset--color--brand-strong);
}

.qasitli-faq details[open] summary::after { content: "\2212"; }
.qasitli-faq details p { margin: 0; padding-block-end: 16px; color: var(--wp--preset--color--ink-soft); }

/* Logo wall and misc ---------------------------------------------------- */

.qasitli-eyebrow {
  color: var(--wp--preset--color--ink-faint);
  font-size: var(--wp--preset--font-size--small);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.qasitli-logo-wall {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  align-items: center;
  justify-content: center;
}

.qasitli-logo-wall img { max-height: 40px; width: auto; filter: grayscale(1); opacity: 0.7; }

.qasitli-badges { display: flex; flex-wrap: wrap; gap: 12px; }
.qasitli-badge img { display: block; height: 48px; width: auto; }

.qasitli-cta-band { margin-block-start: var(--qasitli-section-y); text-align: center; }
.qasitli-cta-band .qasitli-waitlist,
.qasitli-cta-band .qasitli-badges { justify-content: center; margin-inline: auto; }

/* Footer legal links (shortcode [qasitli_legal_links]). */
.qasitli-legal {
	text-align: center;
	font-size: var(--wp--preset--font-size--small);
	margin-block: var(--wp--preset--spacing--20, 1rem);
}
.qasitli-legal a {
	color: inherit;
}