/* Respilon KSA components, the 12 every page is assembled from: button, price, badge, card,
 * gallery, accordion, stepper, review, FAQ, drawer, toast, form field. Documented on /design.
 * Every interactive state has a [data-state] twin so /design can show hover, focus, active and
 * disabled side by side without a pointer. Logical properties only. Motion 300ms at most. */

:root { --dir: 1; }
[dir='rtl'] { --dir: -1; }

/* ============ 1. Button ============ */
.r-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  min-block-size: var(--control-height);
  min-inline-size: var(--touch-min);
  padding: var(--space-3) var(--space-6);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  text-align: center;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard), translate var(--motion-fast) var(--ease-standard);
}
.r-btn:active, .r-btn[data-state~='active'] { translate: 0 1px; }
.r-btn[data-state~='focus'] { outline: 2px solid var(--color-blue); outline-offset: 2px; }
.r-btn--block { inline-size: 100%; }
.r-btn--sm { min-block-size: var(--touch-min); padding: var(--space-2) var(--space-4); font-size: var(--text-sm); }

/* Primary: the one gold action per view. Gold is a background only, text stays navy. */
.r-btn--primary { background: var(--color-gold); border-color: var(--color-gold); color: var(--color-navy); }
.r-btn--primary:hover, .r-btn--primary[data-state~='hover'] { background: var(--color-gold-hover); border-color: var(--color-gold-hover); }
.r-btn--primary:active, .r-btn--primary[data-state~='active'] { background: var(--color-gold-active); border-color: var(--color-gold-active); }

.r-btn--secondary { background: var(--color-navy); border-color: var(--color-navy); color: var(--color-white); }
.r-btn--secondary:hover, .r-btn--secondary[data-state~='hover'] { background: var(--color-navy-hover); border-color: var(--color-navy-hover); }
.r-btn--secondary:active, .r-btn--secondary[data-state~='active'] { background: var(--color-navy); }

.r-btn--outline { background: transparent; border-color: var(--color-navy); color: var(--color-navy); }
.r-btn--outline:hover, .r-btn--outline[data-state~='hover'] { background: var(--color-grey); }
.r-btn--outline:active, .r-btn--outline[data-state~='active'] { background: var(--color-line); }

.r-btn--link {
  padding-inline: 0;
  min-block-size: var(--touch-min);
  background: transparent;
  color: var(--color-blue);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
}
.r-btn--link:hover, .r-btn--link[data-state~='hover'] { text-decoration-thickness: 2px; }

.r-btn:disabled, .r-btn[aria-disabled='true'], .r-btn[data-state~='disabled'] {
  background: var(--color-disabled);
  border-color: var(--color-disabled);
  color: var(--color-ink-subtle);
  cursor: not-allowed;
  translate: none;
}
.r-btn--link:disabled, .r-btn--link[data-state~='disabled'] { background: transparent; border-color: transparent; text-decoration-line: none; }
.r-btn[aria-busy='true'] { cursor: progress; }

/* Price inside the add to cart label (Aesop, Glossier): one action, the price in it. */
.r-btn__price { padding-inline-start: var(--space-3); border-inline-start: 1px solid currentColor; }

.r-icon-btn {
  display: inline-grid;
  place-items: center;
  inline-size: var(--touch-min);
  block-size: var(--touch-min);
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-navy);
  transition: background-color var(--motion-fast) var(--ease-standard);
}
.r-icon-btn:hover, .r-icon-btn[data-state~='hover'] { background: var(--color-grey); }
.r-icon-btn:active, .r-icon-btn[data-state~='active'] { background: var(--color-line); }
.r-icon-btn[data-state~='focus'] { outline: 2px solid var(--color-blue); outline-offset: 2px; }
.r-icon-btn:disabled, .r-icon-btn[data-state~='disabled'] { color: var(--color-ink-subtle); background: transparent; cursor: not-allowed; }
.r-icon { inline-size: 24px; block-size: 24px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.r-icon--sm { inline-size: 16px; block-size: 16px; }

/* ============ 2. Price ============ */
.r-price { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--space-2); row-gap: var(--space-1); }
.r-price__now { font-size: var(--text-md); font-weight: var(--weight-bold); color: var(--color-navy); }
.r-price__was { font-size: var(--text-sm); color: var(--color-ink-subtle); text-decoration-line: line-through; }
.r-price__vat { flex-basis: 100%; font-size: var(--text-sm); color: var(--color-ink-muted); }
.r-price--lg .r-price__now { font-size: var(--text-2xl); }
.r-price--inline .r-price__vat { flex-basis: auto; }
.r-price__soon { font-size: var(--text-md); font-weight: var(--weight-bold); color: var(--color-blue); }

/* ============ 3. Badge ============ */
.r-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  line-height: var(--leading-body-en);
  white-space: nowrap;
}
.r-badge--gold { background: var(--color-gold); color: var(--color-navy); }
.r-badge--navy { background: var(--color-navy); color: var(--color-white); }
.r-badge--soon { background: var(--color-blue-tint); color: var(--color-blue); }
.r-badge--ok { background: var(--color-success-tint); color: var(--color-success); }
.r-badge--error { background: var(--color-error-tint); color: var(--color-error); }
.r-badge--outline { background: var(--color-white); border-color: var(--color-line-strong); color: var(--color-ink-muted); }
.r-count {
  display: inline-grid;
  place-items: center;
  min-inline-size: 24px;
  block-size: 24px;
  padding-inline: var(--space-1);
  border-radius: var(--radius-pill);
  background: var(--color-navy);
  color: var(--color-white);
  font-size: var(--text-xs);
  line-height: 1;
}

/* ============ 4. Card (product) ============ */
.r-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  background: var(--color-white);
}
.r-card__media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--color-cream);
}
.r-card__media img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: scale var(--motion-slow) var(--ease-standard); }
.r-card__media .r-badge { position: absolute; inset-block-start: var(--space-3); inset-inline-start: var(--space-3); }
.r-card__body { display: flex; flex-direction: column; gap: var(--space-2); padding-block: var(--space-4) 0; }
.r-card__role { font-size: var(--text-sm); color: var(--color-ink-muted); }
.r-card__soon { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--color-navy); }
.r-card__title { font-size: var(--text-md); line-height: var(--leading-heading); }
/* The ::after overlay makes the whole card the target; the link box itself still clears 44px
 * because the audit measures the element, not its pseudo. */
.r-card__link { display: flex; align-items: center; min-block-size: var(--touch-min); color: var(--color-navy); text-decoration: none; }
.r-card__link::after { content: ''; position: absolute; inset: 0; border-radius: var(--radius-lg); }
/* The ring goes on the whole card (below); the title also underlines so the focused element itself changes. */
.r-card__link:focus-visible { outline: none; text-decoration-line: underline; text-decoration-thickness: 2px; text-underline-offset: 0.25em; }
.r-card:hover .r-card__media img, .r-card[data-state~='hover'] .r-card__media img { scale: 1.03; }
.r-card:hover .r-card__link, .r-card[data-state~='hover'] .r-card__link { text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: 0.25em; }
.r-card:has(.r-card__link:focus-visible), .r-card[data-state~='focus'] { outline: 2px solid var(--color-blue); outline-offset: 4px; }
.r-card:active .r-card__media, .r-card[data-state~='active'] .r-card__media { opacity: 0.9; }
.r-card .r-btn { position: relative; z-index: 1; margin-block-start: var(--space-2); }
.r-card__placeholder {
  display: grid;
  place-items: center;
  block-size: 100%;
  padding: var(--space-6);
  color: var(--color-ink-muted);
  font-size: var(--text-sm);
  text-align: center;
}

/* ============ 5. Gallery ============ */
.r-gallery { display: grid; gap: var(--space-3); }
.r-gallery__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  border-radius: var(--radius-lg);
}
.r-gallery__track::-webkit-scrollbar { display: none; }
.r-gallery__slide { scroll-snap-align: start; aspect-ratio: 1; background: var(--color-cream); }
.r-gallery__slide img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.r-gallery__bar { display: flex; align-items: center; justify-content: space-between; }
.r-gallery__count { font-size: var(--text-sm); color: var(--color-ink-muted); }
/* The scroller clips, so it carries 4px of padding for the 2px focus ring and 2px offset. */
.r-gallery__thumbs { display: flex; gap: var(--space-2); overflow-x: auto; scrollbar-width: none; padding: var(--space-1); margin: calc(-1 * var(--space-1)); }
.r-gallery__thumb {
  flex: none;
  inline-size: 64px;
  block-size: 64px;
  padding: 0;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: var(--radius-md);
  background: var(--color-cream);
  color: var(--color-ink-muted);
  font-size: var(--text-xs);
  transition: border-color var(--motion-fast) var(--ease-standard);
}
.r-gallery__thumb img { inline-size: 100%; block-size: 100%; object-fit: cover; }
/* The shadow keeps a hover cue on the current thumb, whose navy border outranks the hover border. */
.r-gallery__thumb:hover, .r-gallery__thumb[data-state~='hover'] { border-color: var(--color-line-strong); box-shadow: var(--shadow-md); }
.r-gallery__thumb[aria-current='true'] { border-color: var(--color-navy); }
.r-gallery__thumb:active, .r-gallery__thumb[data-state~='active'] { border-color: var(--color-navy); }
.r-gallery__thumb[data-state~='focus'] { outline: 2px solid var(--color-blue); outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) { .r-gallery__track { scroll-behavior: smooth; } }

/* ============ 6. Accordion (native details, no script) ============ */
.r-accordion { border-block-start: 1px solid var(--color-line); }
.r-accordion__item { border-block-end: 1px solid var(--color-line); }
.r-accordion__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-block-size: 56px;
  padding-block: var(--space-3);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-heading);
  list-style: none;
  cursor: pointer;
}
.r-accordion__summary::-webkit-details-marker { display: none; }
.r-accordion__summary:hover, .r-accordion__summary[data-state~='hover'] { text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: 0.25em; }
.r-accordion__summary:active, .r-accordion__summary[data-state~='active'] { color: var(--color-ink-muted); }
.r-accordion__summary[data-state~='focus'] { outline: 2px solid var(--color-blue); outline-offset: 2px; }
.r-accordion__icon { flex: none; transition: rotate var(--motion-base) var(--ease-standard); }
.r-accordion__item[open] > .r-accordion__summary .r-accordion__icon { rotate: 180deg; }
.r-accordion__panel { padding-block: 0 var(--space-6); color: var(--color-ink-muted); }
.r-accordion__item[data-state~='disabled'] > .r-accordion__summary { color: var(--color-ink-subtle); cursor: not-allowed; }

/* ============ 7. Stepper (quantity) ============ */
.r-stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-md);
  background: var(--color-white);
}
.r-stepper__btn {
  display: grid;
  place-items: center;
  inline-size: var(--touch-min);
  block-size: var(--touch-min);
  padding: 0;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-navy);
  transition: background-color var(--motion-fast) var(--ease-standard);
}
.r-stepper__btn:hover, .r-stepper__btn[data-state~='hover'] { background: var(--color-grey); }
.r-stepper__btn:active, .r-stepper__btn[data-state~='active'] { background: var(--color-line); }
.r-stepper__btn[data-state~='focus'] { outline: 2px solid var(--color-blue); outline-offset: 2px; }
.r-stepper__btn:disabled, .r-stepper__btn[data-state~='disabled'] { background: transparent; color: var(--color-ink-subtle); cursor: not-allowed; }
.r-stepper__input {
  inline-size: 48px;
  block-size: var(--touch-min);
  padding: 0;
  border: 0;
  background: transparent;
  font-size: var(--text-base);
  font-weight: var(--weight-bold);
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* ============ 8. Review ============ */
.r-review {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--color-cream);
}
.r-review__stars { display: flex; gap: var(--space-1); }
.r-review__stars svg { inline-size: 16px; block-size: 16px; }
.r-review__star { fill: var(--color-gold); }
.r-review__star--off { fill: var(--color-line); }
.r-review__text { font-size: var(--text-base); }
.r-review__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--color-ink-muted); }
.r-review__name { font-weight: var(--weight-bold); color: var(--color-navy); }
.r-review--empty { justify-items: start; background: var(--color-grey); }

/* ============ 9. FAQ (accordion with questions as headings, [data-faq] for JSON-LD) ============ */
.r-faq__group + .r-faq__group { margin-block-start: var(--space-10); }
.r-faq__group-title { margin-block-end: var(--space-4); font-size: var(--text-sm); font-weight: var(--weight-bold); color: var(--color-ink-muted); }
.r-faq__q { font-size: var(--text-md); font-weight: var(--weight-semibold); line-height: var(--leading-heading); }
.r-faq__a { max-inline-size: var(--measure); }
.r-faq__more { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); margin-block-start: var(--space-8); }

/* ============ 10. Drawer (native dialog, slides in from the inline end) ============ */
.r-drawer {
  position: fixed;
  inset-block: 0;
  inset-inline-start: auto;
  inset-inline-end: 0;
  inline-size: min(25rem, calc(100vw - var(--space-12)));
  max-inline-size: none;
  block-size: 100dvh;
  max-block-size: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: var(--color-white);
  color: var(--color-navy);
  box-shadow: var(--shadow-lg);
  translate: calc(100% * var(--dir)) 0;
  transition: translate var(--motion-slow) var(--ease-standard), display var(--motion-slow) allow-discrete, overlay var(--motion-slow) allow-discrete;
}
.r-drawer[open] { display: flex; flex-direction: column; translate: 0 0; }
@starting-style { .r-drawer[open] { translate: calc(100% * var(--dir)) 0; } }
.r-drawer::backdrop { background: var(--color-scrim); }
html:has(.r-drawer[open]) { overflow: hidden; }
.r-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-6);
  border-block-end: 1px solid var(--color-line);
}
.r-drawer__title { font-size: var(--text-lg); }
.r-drawer__body { flex: 1; overflow-y: auto; padding: var(--space-6); }
.r-drawer__foot { display: grid; gap: var(--space-3); padding: var(--space-6); border-block-start: 1px solid var(--color-line); background: var(--color-cream); }
.r-drawer__total { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); }
.r-drawer__empty { display: grid; justify-items: start; gap: var(--space-4); }

.r-line { display: grid; grid-template-columns: 72px 1fr; gap: var(--space-4); align-items: start; }
.r-line + .r-line { margin-block-start: var(--space-6); padding-block-start: var(--space-6); border-block-start: 1px solid var(--color-line); }
.r-line__media { inline-size: 72px; aspect-ratio: 1; border-radius: var(--radius-md); background: var(--color-cream); }
.r-line__info { display: grid; gap: var(--space-2); }
.r-line__info > .r-btn--link { justify-self: start; }
.r-line__name { font-size: var(--text-base); font-weight: var(--weight-semibold); }
.r-line__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); }

/* Static preview of the open drawer for /design (same parts, drawn in the page flow). */
.r-drawer--preview { position: static; display: flex; flex-direction: column; inline-size: 100%; max-inline-size: 25rem; block-size: auto; translate: none; border: 1px solid var(--color-line); border-radius: var(--radius-lg); overflow: hidden; }

/* ============ 11. Toast ============ */
.r-toast-region {
  position: fixed;
  inset-inline: var(--gutter);
  inset-block-end: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
  z-index: var(--z-toast);
  display: grid;
  justify-items: center;
  gap: var(--space-2);
  pointer-events: none;
}
.r-toast {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  inline-size: 100%;
  max-inline-size: 420px;
  padding-block: var(--space-2);
  padding-inline: var(--space-4) var(--space-2);
  border-radius: var(--radius-md);
  background: var(--color-navy);
  color: var(--color-white);
  box-shadow: var(--shadow-md);
  pointer-events: auto;
  animation: r-toast-in var(--motion-base) var(--ease-standard);
}
.r-toast__text { flex: 1; font-size: var(--text-sm); }
.r-toast--ok .r-toast__icon { color: var(--color-gold); }
.r-toast--error { background: var(--color-error); }
.r-toast .r-icon-btn { color: var(--color-white); }
.r-toast .r-icon-btn:hover { background: var(--color-navy-hover); }
.r-toast--error .r-icon-btn:hover { background: var(--color-navy); }
.r-toast .r-icon-btn:focus-visible { outline-color: var(--color-white); }
@keyframes r-toast-in { from { opacity: 0; translate: 0 var(--space-2); } }

/* ============ 12. Form field ============ */
.r-field { display: grid; gap: var(--space-2); }
.r-field__label { font-size: var(--text-sm); font-weight: var(--weight-bold); }
.r-field__optional { font-weight: var(--weight-regular); color: var(--color-ink-muted); }
.r-field__hint { font-size: var(--text-sm); color: var(--color-ink-muted); }
.r-field__error { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--color-error); }
.r-input {
  inline-size: 100%;
  min-block-size: var(--control-height);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-line-strong);
  border-radius: var(--radius-md);
  background: var(--color-white);
  color: var(--color-navy);
  font-size: var(--text-base); /* 16px, so iOS does not zoom on focus */
  line-height: var(--leading-body-en);
  transition: border-color var(--motion-fast) var(--ease-standard);
}
.r-input::placeholder { color: var(--color-ink-subtle); opacity: 1; }
.r-input:hover, .r-input[data-state~='hover'] { border-color: var(--color-navy); }
.r-input:focus, .r-input[data-state~='focus'] { border-color: var(--color-blue); outline: 2px solid var(--color-blue); outline-offset: 0; }
.r-input:disabled, .r-input[data-state~='disabled'] { background: var(--color-disabled); border-color: var(--color-disabled); color: var(--color-ink-subtle); cursor: not-allowed; }
.r-input[aria-invalid='true'] { border-color: var(--color-error); }
.r-input[aria-invalid='true']:focus { outline-color: var(--color-error); }
textarea.r-input { min-block-size: 120px; resize: vertical; }

.r-select { position: relative; display: grid; }
.r-select .r-input { appearance: none; padding-inline-end: var(--space-12); cursor: pointer; }
.r-select .r-icon { position: absolute; inset-inline-end: var(--space-4); inset-block-start: 50%; translate: 0 -50%; pointer-events: none; }

/* Phone: +966 and the number read left to right in both languages. The prefix sits inside the
 * input's box, so the input keeps its own border, hover, focus ring and error state: a ring drawn
 * on a wrapper leaves the focused element itself without one (G2). */
.r-input-group { position: relative; display: grid; }
.r-input-group__prefix { position: absolute; inset-block: 1px; inset-inline-start: 1px; display: grid; place-items: center; inline-size: var(--space-16); border-inline-end: 1px solid var(--color-line); color: var(--color-ink-muted); font-size: var(--text-base); pointer-events: none; }
.r-input-group .r-input { padding-inline-start: var(--space-20); }

.r-check {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  min-block-size: var(--touch-min);
  padding-block: var(--space-2);
  font-size: var(--text-sm);
  cursor: pointer;
}
.r-check input { flex: none; inline-size: 20px; block-size: 20px; margin: var(--space-1) 0 0; accent-color: var(--color-navy); cursor: pointer; }
.r-check input:disabled { cursor: not-allowed; }
.r-check:has(input:disabled) { color: var(--color-ink-subtle); cursor: not-allowed; }
.r-check[data-state~='focus'] input { outline: 2px solid var(--color-blue); outline-offset: 2px; }