/* assets/css/v2/components.css — Shared A1 v2 components: buttons, tags, chips, form controls, cards, grid, plates, the only two motion helpers
   keywords: components, button, chip, form, card, grid, fx-float, fx-lift, reduced motion, logical properties
   Motion (transform/opacity/animation) exists ONLY on .fx-* classes, never on an ancestor of an ad slot (docs/AD-CONTRACT.md). */

.a1-section { padding-block: var(--sp-7); }
.a1-section > .wrap > h2 { margin-block-end: var(--sp-5); }
.a1-kicker {
  display: inline-block; margin-block-end: var(--sp-3);
  font-size: var(--fs-sm); font-weight: var(--fw-strong); letter-spacing: .04em; text-transform: uppercase; color: var(--c-brand);
}
:lang(ar) .a1-kicker { letter-spacing: 0; text-transform: none; }

/* buttons */
.a1-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: 44px; padding: var(--sp-2) var(--sp-5);
  border: 2px solid var(--c-brand); border-radius: var(--radius);
  font-weight: var(--fw-strong); font-size: 1rem; line-height: 1.2; text-decoration: none; cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.a1-btn img { width: 16px; height: 16px; }
.a1-btn-primary { background: var(--c-brand); color: var(--c-brand-ink); }
.a1-btn-primary:hover { background: var(--c-brand-strong); border-color: var(--c-brand-strong); color: var(--c-brand-ink); }
.a1-btn-ghost { background: transparent; color: var(--c-brand); }
.a1-btn-ghost:hover { background: var(--c-brand-soft); color: var(--c-brand-strong); }
.a1-btn[disabled] { background: var(--c-line); border-color: var(--c-line); color: var(--c-muted); cursor: not-allowed; }
.a1-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-block-start: var(--sp-5); }
@media (max-width: 479px) { .a1-actions .a1-btn { flex: 1 1 100%; } }   /* stacked buttons: the row count never depends on text width */

/* tags and chips */
.a1-tag { display: inline-block; padding: 2px var(--sp-3); border-radius: 999px; background: var(--c-brand-soft); color: var(--c-brand-strong); font-size: var(--fs-sm); font-weight: var(--fw-strong); }
.a1-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.a1-chips span { padding: 2px var(--sp-3); border: 1px solid var(--c-line); border-radius: 999px; font-size: var(--fs-sm); color: var(--c-muted); }
.a1-chip-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); list-style: none; margin-block-start: var(--sp-4); }
.a1-chip-row li { display: inline-flex; gap: var(--sp-2); align-items: baseline; padding: var(--sp-1) var(--sp-3); background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius); font-size: var(--fs-sm); }
.a1-chip-row span { color: var(--c-muted); }

/* name plate: shown when an app has no artwork; the hue comes from the slug */
.a1-plate {
  display: inline-grid; place-items: center; width: 48px; height: 48px; flex: none;
  border-radius: var(--radius); color: #fff; font-weight: var(--fw-display); font-size: 1.3rem;
  background: hsl(var(--hue, 220), 62%, 40%);
}
.a1-plate-lg { width: 112px; height: 112px; font-size: 3rem; border-radius: var(--radius-lg); }

/* forms: filters and the request form share the same controls */
.a1-filters, .a1-form { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: flex-start; }
.a1-form { flex-direction: column; align-items: stretch; }
.a1-form label { font-weight: var(--fw-strong); }
.a1-filters input, .a1-filters select, .a1-form input, .a1-form textarea {
  min-height: 44px; padding: var(--sp-2) var(--sp-3); background: var(--c-bg); color: var(--c-text);
  border: 1px solid var(--c-line); border-radius: var(--radius);
}
.a1-filters input[type="search"] { flex: 1 1 220px; }
.a1-form textarea { resize: vertical; min-height: 120px; }
.a1-filters input:focus, .a1-filters select:focus, .a1-form input:focus, .a1-form textarea:focus { border-color: var(--c-brand); outline: 3px solid var(--c-brand-soft); }
.a1-hint { display: flex; justify-content: space-between; font-size: var(--fs-sm); color: var(--c-muted); }
.a1-feedback { min-height: 1.6em; font-weight: var(--fw-strong); }
.a1-feedback[data-state="ok"] { color: #0a6b34; }
.a1-feedback[data-state="error"] { color: var(--c-danger); }
.a1-hp { position: absolute; inset-inline-start: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* cards and grid */
.a1-grid { display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.a1-card, .a1-feature, .a1-trust-card {
  display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-5);
  background: var(--c-bg); border: 1px solid var(--c-line); border-radius: var(--radius-lg); box-shadow: var(--shadow);
  color: var(--c-text); text-decoration: none;
}
.a1-card:hover { border-color: var(--c-brand); color: var(--c-text); }
.a1-card h3, .a1-feature h3, .a1-trust-card h3 { font-size: 1.15rem; }
.a1-card p, .a1-feature p, .a1-trust-card p { color: var(--c-muted); font-size: .95rem; }
.a1-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-3); }
.a1-card-top img { width: 56px; height: 56px; border-radius: var(--radius); object-fit: cover; }
.a1-card-title { font-size: var(--fs-sm); color: var(--c-brand); font-weight: var(--fw-strong); }
.a1-card-cta { margin-block-start: auto; padding-block-start: var(--sp-3); color: var(--c-brand); font-weight: var(--fw-strong); }
[dir="rtl"] .fx-flip { display: inline-block; transform: scaleX(-1); }   /* arrows follow the reading direction; static, never an ad ancestor */
.a1-empty { padding: var(--sp-7) var(--sp-5); text-align: center; background: var(--c-surface); border-radius: var(--radius-lg); }

/* motion helpers: the only place transform / animation are allowed */
.fx-lift { transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.fx-lift:hover, .fx-lift:focus-visible { transform: translateY(-4px); }
.fx-float { animation: a1-float var(--t, 6s) ease-in-out var(--d, 0s) infinite alternate; }
@keyframes a1-float { from { transform: translateY(0); } to { transform: translateY(-10px); } }   /* 10px <= --fx-max-shift (12px) */
@media (prefers-reduced-motion: reduce) {
  .fx-float { animation: none; }
  .fx-lift:hover, .fx-lift:focus-visible { transform: none; }
}