/* ============================================================
   MV STYLES — FORMS, BUTTONS, STATES, PROSE
   Loaded after components.css. Restyles the existing button /
   form class names so templates get the new look without edits,
   and adds a proper field / error / toast / empty / prose system.
   ============================================================ */

/* ---------- Buttons ---------- */
.btn,
.btn-primary, .btn-secondary, .btn-outline, .btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: var(--radius-sm);
  font: 600 0.9375rem/1 var(--font-primary);
  letter-spacing: 0.01em;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background var(--transition-fast), color var(--transition-fast),
              border-color var(--transition-fast), transform var(--transition-fast);
  -webkit-tap-highlight-color: transparent;
}
.btn:disabled, .btn.is-loading,
button.btn[disabled] { opacity: 0.55; cursor: not-allowed; }

.btn-primary,
.btn.btn--primary {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}
.btn-primary:hover:not(:disabled),
.btn.btn--primary:hover:not(:disabled) { background: var(--color-primary-light); border-color: var(--color-primary-light); color: #fff; }

.btn-secondary, .btn-outline,
.btn.btn--secondary {
  background: var(--color-background);
  color: var(--color-primary);
  border-color: var(--color-primary);
}
.btn-secondary:hover:not(:disabled), .btn-outline:hover:not(:disabled),
.btn.btn--secondary:hover:not(:disabled) { background: var(--color-primary); color: #fff; }

.btn-ghost, .btn.btn--ghost {
  background: transparent;
  color: var(--color-primary);
  border-color: transparent;
}
.btn-ghost:hover:not(:disabled) { background: var(--color-surface); }

.btn--accent { background: var(--color-accent); color: var(--color-primary-dark); border-color: var(--color-accent); }
.btn--accent:hover:not(:disabled) { background: var(--color-accent-light); border-color: var(--color-accent-light); }

.btn--danger { background: var(--color-danger); color: #fff; border-color: var(--color-danger); }
.btn--danger:hover:not(:disabled) { filter: brightness(1.08); }

.btn--wa { background: #fff; color: #1DA851; border-color: #1DA851; }
.btn--wa:hover:not(:disabled) { background: #1DA851; color: #fff; }

.btn--block, .btn-block { display: flex; width: 100%; }
.btn--sm { padding: 8px 14px; font-size: 0.8125rem; }
.btn--lg { padding: 15px 30px; font-size: 1rem; }

/* Loading spinner inside a button */
.btn.is-loading { position: relative; color: transparent !important; }
.btn.is-loading::after {
  content: "";
  position: absolute;
  width: 16px; height: 16px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: btn-spin 0.6s linear infinite;
  color: #fff;
}
.btn-secondary.is-loading::after, .btn-outline.is-loading::after { color: var(--color-primary); }
@keyframes btn-spin { to { transform: rotate(360deg); } }

/* ---------- Form fields ---------- */
.field { margin-bottom: var(--spacing-5); }
.field__label,
label.field-label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 6px;
}
.field__label .req { color: var(--color-danger); }

.field-control,
.form-control,
.field input:not([type="checkbox"]):not([type="radio"]),
.field select,
.field textarea {
  width: 100%;
  padding: 11px 14px;
  font: inherit;
  font-size: 0.9375rem;
  color: var(--color-text);
  background: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.field-control:focus,
.form-control:focus,
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(185, 140, 70, 0.18);
}
.field-control::placeholder,
.form-control::placeholder { color: var(--color-text-muted); }
textarea.field-control, .field textarea { min-height: 120px; resize: vertical; }

.field__hint { margin-top: 6px; font-size: 0.75rem; color: var(--color-text-muted); }
.field__error { margin-top: 6px; font-size: 0.75rem; color: var(--color-danger); font-weight: 500; }
.field--invalid .field-control,
.field--invalid input,
.field--invalid select,
.field--invalid textarea { border-color: var(--color-danger); }
.field--invalid .field-control:focus { box-shadow: 0 0 0 3px rgba(178, 59, 46, 0.16); }

.form-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: var(--spacing-6); }
.form-note { font-size: 0.8125rem; color: var(--color-text-muted); }

/* ---------- Inline messages / alerts (reuse .alert from shell.css) ---------- */
.form-message { padding: 11px 14px; border-radius: var(--radius-sm); font-size: 0.875rem; }
.form-message.success { background: #EEF5EF; border: 1px solid #CBE0CF; color: #2C5138; }
.form-message.error { background: #FBEEEC; border: 1px solid #F0CFC9; color: #7E2A20; }

/* ---------- Toast (shared with showMiniNotification) ---------- */
.toast-region { position: fixed; top: 16px; right: 16px; z-index: var(--z-toast); display: flex; flex-direction: column; gap: 8px; max-width: 300px; }
.toast {
  background: var(--color-primary); color: #fff;
  padding: 11px 16px; border-radius: var(--radius-sm);
  font: 600 0.875rem/1.35 var(--font-primary);
  box-shadow: var(--shadow-lg);
}
.toast--success { background: var(--color-success); }
.toast--error { background: var(--color-danger); }

/* ---------- Empty state (generic; .products-empty already in components.css) ---------- */
.empty-state, .empty {
  text-align: center;
  padding: var(--spacing-16) var(--spacing-4);
  color: var(--color-text-light);
}
.empty-state .empty-state-icon, .empty .empty-icon { display: none; }
.empty-state h2, .empty-state-title, .empty h2 {
  font-family: var(--font-display);
  font-size: 1.375rem;
  color: var(--color-text);
  margin-bottom: 8px;
}
.empty-state p, .empty-state-text, .empty p { margin-bottom: var(--spacing-5); font-size: 0.9375rem; }

/* ---------- Document / legal / info pages ---------- */
.doc-page { max-width: 780px; margin: 0 auto; padding: var(--spacing-10) var(--spacing-4) var(--spacing-16); }
.doc-page__eyebrow { text-transform: uppercase; letter-spacing: var(--tracking-wider); font-size: 0.72rem; font-weight: 700; color: var(--color-accent-dark); margin-bottom: 10px; }
.doc-page__title { font-family: var(--font-display); font-size: clamp(1.7rem, 4vw, 2.4rem); font-weight: 700; margin: 0 0 8px; }
.doc-page__meta { color: var(--color-text-muted); font-size: 0.875rem; margin-bottom: var(--spacing-8); }

.prose { color: var(--color-text); line-height: 1.7; }
.prose > * + * { margin-top: var(--spacing-4); }
.prose h2 { font-family: var(--font-display); font-size: 1.375rem; font-weight: 700; margin-top: var(--spacing-10); }
.prose h3 { font-size: 1.0625rem; font-weight: 700; margin-top: var(--spacing-8); }
.prose h2 + p, .prose h3 + p { margin-top: var(--spacing-3); }
.prose p, .prose li { color: var(--color-text-light); }
.prose a { color: var(--color-accent-dark); text-decoration: underline; text-underline-offset: 2px; }
.prose a:hover { color: var(--color-primary); }
.prose strong { color: var(--color-text); }
.prose ul, .prose ol { padding-left: 1.35rem; }
.prose li + li { margin-top: 6px; }
.prose blockquote {
  border-left: 3px solid var(--color-accent);
  padding-left: var(--spacing-4);
  color: var(--color-text-light);
  font-style: italic;
}
.prose table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.prose th, .prose td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--color-border); }
.prose th { font-weight: 600; color: var(--color-text); background: var(--color-surface); }
.prose hr { border: 0; border-top: 1px solid var(--color-border); margin: var(--spacing-8) 0; }

/* ---------- Mobile: prevent iOS Safari zoom-on-focus (inputs must be >= 16px) ---------- */
@media (max-width: 640px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select,
  textarea,
  .field-control,
  .form-control,
  .search-input,
  .filter-field,
  .newsletter-input,
  .quantity-input,
  .qty input {
    font-size: 16px;
  }
}

/* ---------- Skeleton ---------- */
.skeleton {
  background: linear-gradient(90deg, var(--color-surface) 25%, var(--color-surface-alt) 37%, var(--color-surface) 63%);
  background-size: 400% 100%;
  animation: skeleton-shimmer 1.4s ease infinite;
  border-radius: var(--radius-sm);
}
@keyframes skeleton-shimmer { to { background-position: -100% 0; } }