/* AshAra Phase 3 core components. Loads after tokens.css + base.css.
 * Every interactive control meets the 44px touch target and has visible focus. */

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--touch-min); padding: var(--space-2) var(--space-5);
  font-weight: 600; font-size: var(--fs-sm); letter-spacing: var(--tracking-wide); text-transform: none;
  border: var(--border-width) solid transparent; border-radius: var(--radius-md);
  cursor: pointer; text-decoration: none;
  transition: background-color var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard), transform var(--motion-fast) var(--ease-standard);
}
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled='true'] { opacity: var(--color-disabled-opacity); cursor: not-allowed; transform: none; }

.btn--primary { background: var(--ash-charcoal); color: var(--color-text-inverse); }
.btn--primary:hover:not(:disabled) { background: var(--ash-charcoal-2); }
.btn--secondary { background: transparent; color: var(--color-text); border-color: var(--color-border-strong); }
.btn--secondary:hover:not(:disabled) { background: var(--color-surface-raised); }
.btn--accent { background: var(--ash-brass-deep); color: #fff; }
.btn--accent:hover:not(:disabled) { background: var(--ash-brass); }
.btn--text { background: transparent; color: var(--color-link); padding-inline: var(--space-2); min-height: var(--touch-min); }
.btn--text:hover:not(:disabled) { text-decoration: underline; }
.btn--icon { padding: var(--space-2); min-width: var(--touch-min); }

.btn.is-loading { color: transparent; position: relative; pointer-events: none; }
.btn.is-loading::after {
  content: ''; position: absolute; width: 1.1em; height: 1.1em; border-radius: 50%;
  border: 2px solid currentColor; border-top-color: transparent; color: var(--color-text-inverse);
  animation: ash-spin 0.7s linear infinite;
}
@keyframes ash-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .btn.is-loading::after { animation: none; } }

/* ---------- Form controls ---------- */
.field { display: grid; gap: var(--space-2); margin-bottom: var(--space-4); }
.field > label { font-size: var(--fs-sm); font-weight: 600; color: var(--color-text); }
.input, .select, .textarea {
  width: 100%; min-height: var(--touch-min); padding: var(--space-2) var(--space-3);
  background: var(--color-surface); color: var(--color-text);
  border: var(--border-width) solid var(--color-border-strong); border-radius: var(--radius-md);
}
.input::placeholder { color: var(--color-text-muted); }
.input:focus-visible, .select:focus-visible, .textarea:focus-visible { box-shadow: var(--focus-ring); border-color: var(--ash-brass-deep); }
.input[aria-invalid='true'] { border-color: var(--color-error); }
.field__error { font-size: var(--fs-sm); color: var(--color-error); }
.field__hint { font-size: var(--fs-sm); color: var(--color-text-muted); }

.checkbox, .radio { display: flex; align-items: center; gap: var(--space-2); min-height: var(--touch-min); }
.checkbox input, .radio input { width: 1.2rem; height: 1.2rem; accent-color: var(--ash-brass-deep); }

/* ---------- Alerts (role=alert / status) ---------- */
.alert { display: flex; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); border: var(--border-width) solid transparent; font-size: var(--fs-sm); }
.alert--success { background: var(--color-success-bg); color: var(--color-success); border-color: var(--color-success); }
.alert--warning { background: var(--color-warning-bg); color: var(--color-warning); border-color: var(--color-warning); }
.alert--error { background: var(--color-error-bg); color: var(--color-error); border-color: var(--color-error); }
.alert--info { background: var(--color-info-bg); color: var(--color-info); border-color: var(--color-info); }

/* ---------- Status badge ---------- */
.badge { display: inline-flex; align-items: center; gap: var(--space-1); padding: 0.15rem var(--space-2); border-radius: var(--radius-pill); font-size: var(--fs-xs); font-weight: 600; letter-spacing: var(--tracking-wide); background: var(--color-surface-raised); color: var(--color-text); border: var(--border-width) solid var(--color-border); }
.badge--rent { background: var(--color-info-bg); color: var(--color-info); }
.badge--available { background: var(--color-success-bg); color: var(--color-success); }
.badge--unavailable { background: var(--color-surface-raised); color: var(--color-text-muted); }

/* ---------- Toast region ---------- */
.toast-region { position: fixed; inset-block-end: var(--space-4); inset-inline-end: var(--space-4); display: grid; gap: var(--space-2); z-index: var(--z-toast); max-width: min(92vw, 24rem); }
.toast { background: var(--color-surface); color: var(--color-text); border: var(--border-width) solid var(--color-border-strong); border-left: 4px solid var(--ash-brass-deep); border-radius: var(--radius-md); box-shadow: var(--shadow-md); padding: var(--space-3) var(--space-4); }

/* ---------- Dialog + drawer ---------- */
.dialog-backdrop { position: fixed; inset: 0; background: rgba(35, 32, 28, 0.5); z-index: var(--z-dialog); display: grid; place-items: center; padding: var(--space-4); }
.dialog { background: var(--color-surface); color: var(--color-text); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); width: 100%; max-width: var(--container-narrow); max-height: 90vh; overflow: auto; padding: var(--space-5); }
.drawer-backdrop { position: fixed; inset: 0; background: rgba(35, 32, 28, 0.5); z-index: var(--z-drawer); }
.drawer { position: fixed; inset-block: 0; inset-inline-start: 0; width: min(88vw, 22rem); background: var(--color-surface); box-shadow: var(--shadow-lg); z-index: var(--z-drawer); overflow: auto; padding: var(--space-5); }

/* ---------- Skeleton / empty / error states ---------- */
.skeleton { background: linear-gradient(90deg, var(--color-surface-raised) 25%, var(--ash-cream) 37%, var(--color-surface-raised) 63%); background-size: 400% 100%; animation: ash-shimmer 1.4s ease infinite; border-radius: var(--radius-sm); min-height: 1rem; }
@keyframes ash-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .skeleton { animation: none; } }
.state { text-align: center; padding: var(--space-7) var(--space-4); color: var(--color-text-muted); display: grid; gap: var(--space-3); justify-items: center; }
.state h3 { color: var(--color-text); }

/* ---------- Product card + price/deposit ---------- */
.product-card { display: grid; gap: var(--space-2); background: var(--color-surface); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; transition: box-shadow var(--motion-base) var(--ease-standard); }
.product-card:hover { box-shadow: var(--shadow-md); }
.product-card__media { aspect-ratio: 3 / 4; background: var(--color-surface-raised); }
.product-card__body { padding: var(--space-3) var(--space-4) var(--space-4); display: grid; gap: var(--space-1); }
.product-card__title { font-family: var(--font-serif); font-size: var(--fs-md); }
.product-card__partner { font-size: var(--fs-xs); color: var(--color-text-muted); }

.price { display: inline-flex; align-items: baseline; gap: var(--space-1); font-variant-numeric: tabular-nums; }
.price__amount { font-weight: 700; color: var(--color-text); }
.price__label { font-size: var(--fs-xs); color: var(--color-text-muted); }
.deposit { font-size: var(--fs-sm); color: var(--color-text-muted); font-variant-numeric: tabular-nums; }