/* Component primitives. One name, one definition — the React components in
   @qaisariya/ui-web and the Jinja macros in backend/storefront/templates/components/
   both emit these exact class names. */

/* ---------- Button ---------- */
.q-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--q-space-2);
  inline-size: auto;
  min-block-size: var(--q-control-md);
  padding-inline: var(--q-space-5);
  border-radius: var(--q-radius-md);
  font-weight: var(--q-weight-semibold);
  font-size: var(--q-text-sm);
  letter-spacing: var(--q-tracking-tight);
  white-space: nowrap;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform var(--q-dur-instant) var(--q-ease-settle),
              filter var(--q-dur-instant) var(--q-ease-settle),
              background-color var(--q-dur-fast) var(--q-ease-standard),
              box-shadow var(--q-dur-fast) var(--q-ease-standard);
}
.q-btn:active { transform: translateY(1px) scale(.99); }
/* The label wrapper lays an icon and its text out in a row (Tailwind's reset makes svg display:block,
   which stacked them). */
.q-btn > span { display: inline-flex; align-items: center; justify-content: center; gap: var(--q-space-2); }
.q-btn:disabled, .q-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; pointer-events: none; }

.q-btn--sm { min-block-size: var(--q-control-sm); padding-inline: var(--q-space-4); font-size: var(--q-text-xs); }
.q-btn--lg { min-block-size: var(--q-control-lg); padding-inline: var(--q-space-6); font-size: var(--q-text-md); }
.q-btn--pill { border-radius: var(--q-radius-pill); }
.q-btn--full { inline-size: 100%; }

.q-btn--primary { background: var(--q-action); color: var(--q-on-action); }
.q-btn--primary:hover { background: var(--q-action-hover); }
.q-btn--secondary { background: transparent; color: var(--q-text); border-color: var(--q-border-strong); }
.q-btn--secondary:hover { background: var(--q-surface-sunken); }
.q-btn--quiet { background: transparent; color: var(--q-text); }
.q-btn--quiet:hover { background: var(--q-surface-sunken); }
.q-btn--danger { background: var(--q-danger); color: var(--q-surface); }
.q-btn--danger:hover { filter: brightness(1.06); }

.q-btn--loading { color: transparent; pointer-events: none; position: relative; }
.q-btn--loading::after {
  content: ""; position: absolute; inline-size: 16px; block-size: 16px; border-radius: 50%;
  border: 2px solid currentColor; border-inline-end-color: transparent; color: var(--q-on-action);
  animation: q-spin .7s linear infinite;
}

/* Platform call-to-action (landing, console). Solid, like the primary button: it was a glossy gradient
   with a lit edge, which read as cheap next to the rest of the product. Not used in shop scope. */
.q-btn--glow { background: var(--q-action); color: var(--q-on-action); }
.q-btn--glow:hover { background: var(--q-action-hover); }
.q-btn--glow:focus-visible { outline: 2px solid var(--q-focus); outline-offset: 3px; }

/* ---------- Field ---------- */
.q-field { display: flex; flex-direction: column; gap: var(--q-space-2); inline-size: 100%; }
.q-field__label { font-size: var(--q-text-sm); font-weight: var(--q-weight-semibold); color: var(--q-text); }
.q-field__control {
  block-size: var(--q-control-md);
  padding-inline: var(--q-space-4);
  border-radius: var(--q-radius-md);
  border: 1px solid var(--q-border-strong);
  background: var(--q-surface);
  color: var(--q-text);
  transition: border-color var(--q-dur-fast) var(--q-ease-standard), box-shadow var(--q-dur-fast) var(--q-ease-standard);
}
.q-field__control--select {
  appearance: none;
  padding-inline-end: var(--q-space-10);
  background-image: var(--q-select-chevron);
  background-repeat: no-repeat;
  background-position: right var(--q-space-3) center;
  cursor: pointer;
}
[dir="rtl"] .q-field__control--select { background-position: left var(--q-space-3) center; }
textarea.q-field__control { block-size: auto; padding-block: var(--q-space-3); resize: vertical; }
.q-field__control:focus-visible { border-color: var(--q-focus); box-shadow: 0 0 0 3px var(--q-accent-subtle); outline: none; }
.q-field__control:disabled { background: var(--q-surface-sunken); color: var(--q-text-muted); cursor: not-allowed; }
.q-field__control::placeholder { color: var(--q-text-muted); opacity: .72; }
.q-field__hint { font-size: var(--q-text-xs); color: var(--q-text-muted); }
.q-field--error .q-field__control { border-color: var(--q-danger); }
.q-field__error { font-size: var(--q-text-xs); color: var(--q-danger); }

/* ---------- Checkbox ---------- */
.q-check {
  position: relative;
  display: flex; align-items: flex-start; gap: var(--q-space-3);
  inline-size: 100%; padding: var(--q-space-3) var(--q-space-4);
  border: 1px solid var(--q-border); border-radius: var(--q-radius-md);
  background: var(--q-surface); color: var(--q-text); cursor: pointer;
}
.q-check:has(.q-check__input:checked) { border-color: var(--q-action); }
.q-check:has(.q-check__input:disabled) { opacity: .55; cursor: not-allowed; }
.q-check__input {
  position: absolute; inline-size: 1px; block-size: 1px; opacity: 0;
}
.q-check__box {
  flex: none; display: grid; place-items: center; inline-size: 1.25rem; block-size: 1.25rem;
  margin-block-start: 1px; border: 1.5px solid var(--q-border-strong);
  border-radius: var(--q-radius-xs); background: var(--q-surface); color: var(--q-on-action);
}
.q-check__box svg { inline-size: 100%; block-size: 100%; opacity: 0; }
.q-check__input:checked + .q-check__box { border-color: var(--q-action); background: var(--q-action); }
.q-check__input:checked + .q-check__box svg { opacity: 1; }
.q-check__input:focus-visible + .q-check__box { outline: 2px solid var(--q-focus); outline-offset: 3px; }
.q-check__copy { display: grid; gap: var(--q-space-1); min-inline-size: 0; }
.q-check__label { font-size: var(--q-text-sm); font-weight: var(--q-weight-semibold); line-height: 1.4; }
.q-check__hint { font-size: var(--q-text-xs); color: var(--q-text-muted); line-height: 1.4; }

/* ---------- Badge / status ---------- */
.q-badge {
  display: inline-flex; align-items: center; gap: var(--q-space-1);
  padding-block: 2px; padding-inline: var(--q-space-2);
  border-radius: var(--q-radius-xs); font-size: var(--q-text-xs); font-weight: var(--q-weight-semibold);
  background: var(--q-surface-sunken); color: var(--q-text-muted);
}
.q-status { padding-inline: var(--q-space-3); border-radius: var(--q-radius-pill); }
.q-status--success { background: var(--q-success-subtle); color: var(--q-success); }
.q-status--warning { background: var(--q-warning-subtle); color: var(--q-warning); }
.q-status--danger  { background: var(--q-danger-subtle);  color: var(--q-danger); }
.q-status--info    { background: var(--q-info-subtle);    color: var(--q-info); }
.q-status--accent  { background: var(--q-accent-subtle);  color: var(--q-accent-text); }

/* ---------- Card / surface ---------- */
.q-card {
  background: var(--q-surface);
  border: 1px solid var(--q-border);
  border-radius: var(--q-radius-lg);
  box-shadow: var(--q-shadow-1);
}
.q-card--raised { box-shadow: var(--q-shadow-2); }
.q-card--padded { padding: var(--q-space-6); }
@media (max-width: 480px) { .q-card--padded { padding: var(--q-space-4); } }

/* ---------- Eyebrow + page header ---------- */
/* Small uppercase label above a title. Never below 12px, and one colour. */
.q-eyebrow { display: inline-block; color: var(--q-accent-text); font-size: var(--q-text-xs); font-weight: var(--q-weight-bold); letter-spacing: var(--q-tracking-caps); text-transform: uppercase; }
.q-pagehead { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--q-space-4); }
.q-pagehead__copy { display: grid; gap: var(--q-space-1); flex: 1 1 20rem; min-inline-size: 0; }
.q-pagehead__title { margin: 0; color: var(--q-text); font-size: var(--q-text-xl); font-weight: var(--q-weight-bold); line-height: 1.2; letter-spacing: var(--q-tracking-tight); }
.q-pagehead__description { margin: 0; color: var(--q-text-muted); font-size: var(--q-text-sm); line-height: 1.5; }
.q-pagehead__action { flex: none; }
.q-divider { border: 0; border-block-start: 1px solid var(--q-border); }

/* ---------- Price ---------- */
.q-price { font-weight: var(--q-weight-semibold); font-variant-numeric: tabular-nums; }
.q-price--sale { color: var(--q-accent-text); }
.q-price__strike { color: var(--q-text-muted); text-decoration: line-through; font-weight: var(--q-weight-regular); margin-inline-start: var(--q-space-2); }

/* ---------- Segmented / tabs ---------- */
.q-segmented { display: inline-flex; background: var(--q-surface-sunken); border-radius: var(--q-radius-md); padding: 3px; gap: 2px; }
.q-segmented__item {
  padding-block: var(--q-space-2); padding-inline: var(--q-space-4);
  border-radius: var(--q-radius-sm); font-size: var(--q-text-sm); font-weight: var(--q-weight-medium); color: var(--q-text-muted);
  transition: background var(--q-dur-fast) var(--q-ease-standard), color var(--q-dur-fast) var(--q-ease-standard);
}
.q-segmented__item[aria-selected="true"] { background: var(--q-surface); color: var(--q-text); box-shadow: var(--q-shadow-1); }

/* ---------- Sheet / overlay ---------- */
.q-sheet {
  position: fixed; inset-block: 0; inset-inline-end: 0; inline-size: min(420px, 100vw);
  background: var(--q-surface); box-shadow: var(--q-shadow-3); z-index: var(--q-z-sheet);
  display: flex; flex-direction: column;
}
[dir="rtl"] .q-sheet { inset-inline-end: auto; inset-inline-start: 0; }
.q-sheet__backdrop { position: fixed; inset: 0; background: var(--q-overlay-scrim); z-index: var(--q-z-overlay); }
@media (max-width: 560px) {
  .q-sheet { inset-inline: 0; inset-block-start: auto; block-size: auto; max-block-size: 88vh; border-start-start-radius: var(--q-radius-xl); border-start-end-radius: var(--q-radius-xl); }
}

/* ---------- Toast ---------- */
.q-toast {
  position: fixed; inset-block-end: var(--q-space-5); inset-inline-start: 50%; translate: -50% 0;
  background: var(--q-text); color: var(--q-surface); padding-block: var(--q-space-3); padding-inline: var(--q-space-5);
  border-radius: var(--q-radius-md); box-shadow: var(--q-shadow-2); z-index: var(--q-z-toast); font-size: var(--q-text-sm);
}

/* ---------- Skeleton ---------- */
.q-skeleton { background: var(--q-surface-sunken); border-radius: var(--q-radius-sm); position: relative; overflow: hidden; }
.q-skeleton::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--q-surface) 60%, transparent), transparent);
  animation: q-shimmer 1.6s var(--q-ease-standard) infinite;
}
@keyframes q-shimmer { from { translate: -100% 0; } to { translate: 100% 0; } }

/* ---------- Empty state ---------- */
.q-empty { display: flex; flex-direction: column; align-items: center; gap: var(--q-space-3); padding-block: var(--q-space-12); text-align: center; color: var(--q-text-muted); }

/* ---------- Header (sticky, glass-after-scroll) ---------- */
.q-header { position: sticky; inset-block-start: 0; z-index: var(--q-z-sticky); background: transparent; transition: background var(--q-dur-fast) var(--q-ease-standard); }
.q-header[data-scrolled="true"] { background: var(--q-surface); border-block-end: 1px solid var(--q-border); }
.q-header[data-scrolled="true"].q-header--glass { background: color-mix(in srgb, var(--q-surface) 88%, transparent); -webkit-backdrop-filter: blur(var(--q-glass-blur)); backdrop-filter: blur(var(--q-glass-blur)); }

/* ---------- WhatsApp float (storefront) ---------- */
.q-wa-float {
  position: fixed; inset-inline-end: var(--q-space-5); inset-block-end: var(--q-space-6);
  inline-size: 56px; block-size: 56px; border-radius: 50%; background: #25D366;
  display: grid; place-items: center; box-shadow: var(--q-shadow-3); z-index: var(--q-z-overlay);
}
[dir="rtl"] .q-wa-float { inset-inline-end: auto; inset-inline-start: var(--q-space-5); }
.q-wa-float::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid rgba(37,211,102,.5);
}