/*
 * qrme components (icons, buttons, fields, cards, alerts) for public pages,
 * the dashboard and the operator console. Requires fonts.css and tokens.css
 * first (and reset.css, outside the console). Do not hard-code colours here;
 * use the tokens.
 */

/* `hidden` must win over every display rule below (img, .field, .btn…). */
[hidden] { display: none !important; }

.icon { width: 1.25em; height: 1.25em; flex-shrink: 0; }
.icon-sm { width: 1em; height: 1em; flex-shrink: 0; }
.icon-lg { width: 1.5em; height: 1.5em; flex-shrink: 0; }
[dir="rtl"] .flip-rtl { transform: scaleX(-1); }
/* An icon inside a line of text (dashboard and public pages). */
.inline-icon { display: inline-block; vertical-align: -2px; margin-inline-end: var(--space-1); }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Buttons ---------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--control); padding: 0 var(--space-4);
  border: 1px solid transparent; border-radius: var(--radius);
  font-size: var(--text-sm); font-weight: 600; line-height: 1.2; text-decoration: none;
  cursor: pointer; user-select: none; white-space: nowrap;
  transition: background-color var(--duration) var(--ease), border-color var(--duration) var(--ease),
              color var(--duration) var(--ease), transform var(--duration) var(--ease);
}
.btn:active { transform: scale(0.98); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.55; pointer-events: none; }
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-hover); }
.btn-secondary { background: var(--surface); color: var(--text); border-color: var(--border-strong); }
.btn-secondary:hover { background: var(--surface-2); }
.btn-ghost { background: transparent; color: var(--text); }
.btn-ghost:hover { background: var(--surface-2); }
.btn-danger { background: var(--surface); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 35%, var(--bg)); }
.btn-danger:hover { background: var(--danger-soft); }
.btn-block { width: 100%; }
.btn-lg { min-height: var(--control-lg); font-size: var(--text-base); border-radius: var(--radius); }
.btn-icon { width: var(--control); padding: 0; }

/* Form controls ------------------------------------------------------------ */
.field { display: grid; gap: var(--space-2); align-content: start; }
.label { font-size: var(--text-sm); font-weight: 600; }
.label .req { color: var(--danger); margin-inline-start: 2px; }
.help { font-size: var(--text-xs); color: var(--text-muted); }
.error-text { font-size: var(--text-xs); color: var(--danger); font-weight: 500; }
.input, .select, .textarea {
  width: 100%; min-height: var(--control);
  padding: var(--space-2) var(--space-3);
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
.textarea { min-height: 96px; resize: vertical; line-height: var(--leading); }
.input:hover, .select:hover, .textarea:hover { border-color: color-mix(in srgb, var(--text) 35%, var(--bg)); }
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--focus);
}
.input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--danger); }
.input::placeholder, .textarea::placeholder { color: color-mix(in srgb, var(--text) 45%, var(--bg)); }
.select { appearance: none; padding-inline-end: var(--space-6);
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-size: 5px 5px; background-repeat: no-repeat;
  background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; }
[dir="rtl"] .select { background-position: 13px 50%, 18px 50%; }
.check { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--control); cursor: pointer; font-size: var(--text-sm); }
.check input { width: 18px; height: 18px; accent-color: var(--accent); }

/* Surfaces ----------------------------------------------------------------- */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.badge {
  display: inline-flex; align-items: center; gap: var(--space-1);
  padding: 2px 10px; border-radius: var(--radius-full);
  font-size: var(--text-xs); font-weight: 600; background: var(--surface-2); color: var(--text-muted);
}
.badge-accent { background: var(--accent-soft); color: var(--accent-ink); }
/* Text a little darker than the status colour: small type on a tinted chip needs 4.5:1. */
.badge-success { background: var(--success-soft); color: color-mix(in srgb, var(--success) 82%, var(--text)); }
.badge-warning { background: var(--warning-soft); color: color-mix(in srgb, var(--warning) 82%, var(--text)); }
.badge-danger { background: var(--danger-soft); color: color-mix(in srgb, var(--danger) 82%, var(--text)); }

/* Alerts use the same darker status text as badges: 14 px on a tint needs 4.5:1 (axe, phase 8). */
.alert { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3) var(--space-4);
  border-radius: var(--radius); font-size: var(--text-sm); border: 1px solid transparent; }
.alert-success { background: var(--success-soft); color: color-mix(in srgb, var(--success) 82%, var(--text)); border-color: color-mix(in srgb, var(--success) 25%, var(--bg)); }
.alert-error { background: var(--danger-soft); color: color-mix(in srgb, var(--danger) 82%, var(--text)); border-color: color-mix(in srgb, var(--danger) 25%, var(--bg)); }
.alert-info { background: var(--accent-soft); color: var(--accent-ink); border-color: color-mix(in srgb, var(--accent) 25%, var(--bg)); }
.alert-warning { background: var(--warning-soft); color: color-mix(in srgb, var(--warning) 82%, var(--text)); border-color: color-mix(in srgb, var(--warning) 25%, var(--bg)); }

/* Segmented control: two to four options of one setting (period, view, language), as links with
   aria-current or buttons with aria-pressed. */
.segmented { display: inline-grid; grid-auto-flow: column; grid-auto-columns: minmax(max-content, 1fr); gap: 2px; padding: 3px; max-width: 100%;
  border-radius: var(--radius); background: var(--surface-2); }
.segment { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: var(--control-sm); min-width: var(--control-sm);
  padding: 0 var(--space-3); border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text-muted);
  font: inherit; font-size: var(--text-sm); font-weight: 600; text-decoration: none; white-space: nowrap; cursor: pointer; }
.segment:hover { color: var(--text); }
.segment[aria-current="true"], .segment[aria-pressed="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }

/* Small links to the site's own pages (privacy notice, help): footers, sidebar, sign-in. */
.meta-links { display: flex; flex-wrap: wrap; justify-content: center; column-gap: var(--space-4); font-size: var(--text-xs); }
.meta-links a { display: inline-flex; align-items: center; min-height: var(--tap); color: var(--text-muted); }
.meta-links a:hover { color: var(--text); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; scroll-behavior: auto !important; }
}

/* The chevron of a <details> summary turns when it opens (the editor's panels, design parts, coupon terms). */
summary .chev { margin-inline-start: auto; color: var(--text-muted); transition: transform var(--duration) var(--ease); }
details[open] > summary .chev { transform: rotate(180deg); }