/* ==============================================================
   OlaOrder Component Styles
   ============================================================== */

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--touch-target-min);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-full);
  border: none;
  font-weight: 600;
  font-size: var(--text-base);
  transition: background-color var(--duration-base) var(--ease-standard),
              border-color var(--duration-base) var(--ease-standard),
              transform var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-fast) var(--ease-standard);
  white-space: nowrap;
  cursor: pointer;
}
.btn:active { transform: scale(0.98); }
.btn:focus-visible { outline: 2px solid var(--color-indigo); outline-offset: 2px; }

.btn-primary {
  background: var(--color-indigo);
  color: white;
}
.btn-primary:hover { background: var(--color-indigo-hover); text-decoration: none; }
.btn-primary:active { background: var(--color-indigo-hover); transform: scale(0.98); }

.btn-secondary {
  background: var(--color-surface);
  color: var(--color-ink);
  border: 1.5px solid var(--color-border);
}
.btn-secondary:hover { background: var(--color-surface-alt); border-color: var(--color-ink-30); text-decoration: none; }
.btn-secondary:active { background: var(--color-ink-10); }

.btn-ghost {
  background: transparent;
  color: var(--color-indigo);
}
.btn-ghost:hover { background: var(--color-indigo-soft); text-decoration: none; }
.btn-ghost:active { background: var(--color-indigo-soft); filter: brightness(0.97); }

.btn-danger {
  background: var(--color-danger-soft);
  color: var(--color-danger);
}
.btn-danger:hover { background: var(--color-danger); color: white; text-decoration: none; }
.btn-danger:active { filter: brightness(0.95); }

.btn-block { width: 100%; }
.btn-sm { min-height: var(--height-control-sm); padding: var(--space-2) var(--space-4); font-size: var(--text-sm); }

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}
.btn:disabled:hover, .btn:disabled:active { transform: none; filter: none; }

/* Brief success confirmation state — e.g. "Added ✓" after Add to cart.
   Transitions smoothly rather than an abrupt color swap. */
.btn-added {
  background: var(--color-mint) !important;
  color: white !important;
}

/* ---------- Cards ---------- */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  transition: border-color var(--duration-base) var(--ease-standard),
              box-shadow var(--duration-base) var(--ease-standard);
}

.card-flat {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

/* Applied to cards that are themselves clickable (e.g. step cards,
   offering cards) so hovering communicates interactivity without
   introducing a new visual language per page. */
.card-interactive {
  cursor: pointer;
}
.card-interactive:hover {
  border-color: var(--color-ink-30);
  box-shadow: var(--shadow-sm);
}

/* ---------- Forms ---------- */
.field {
  margin-bottom: var(--space-5);
}

.field label {
  display: block;
  font-weight: 600;
  font-size: var(--text-sm);
  margin-bottom: var(--space-2);
  color: var(--color-ink-90);
}

.field .hint {
  font-size: var(--text-xs);
  color: var(--color-ink-50);
  margin-top: var(--space-2);
}
.hint-spaced { margin-top: var(--space-2); }

.field .error {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-xs);
  font-weight: 500;
  color: var(--color-danger);
  margin-top: var(--space-2);
  animation: fieldMessageIn var(--duration-base) var(--ease-out-premium);
}

@keyframes fieldMessageIn {
  from { opacity: 0; transform: translateY(-2px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .field .error { animation: none; }
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="time"],
textarea,
select {
  width: 100%;
  min-height: var(--touch-target-min);
  padding: var(--space-3) var(--space-4);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-ink);
  transition: border-color var(--duration-base) var(--ease-standard),
              box-shadow var(--duration-base) var(--ease-standard);
}

input:focus, textarea:focus, select:focus {
  border-color: var(--color-indigo);
  box-shadow: 0 0 0 3px var(--color-indigo-soft);
  outline: none;
}

input.invalid, textarea.invalid, select.invalid {
  border-color: var(--color-danger);
}
input.invalid:focus, textarea.invalid:focus, select.invalid:focus {
  border-color: var(--color-danger);
  box-shadow: 0 0 0 3px var(--color-danger-soft);
}

textarea { min-height: 96px; resize: vertical; }

.field-row {
  display: flex;
  gap: var(--space-4);
}
.field-row > * { flex: 1; }

@media (max-width: 480px) {
  .field-row { flex-direction: column; gap: 0; }
}

/* Toggle switch */
.toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  cursor: pointer;
}
.toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.toggle .track {
  width: 44px;
  height: 26px;
  background: var(--color-ink-10);
  border-radius: var(--radius-full);
  position: relative;
  transition: background-color var(--duration-base) var(--ease-standard);
  flex-shrink: 0;
}
.toggle .track::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  background: white;
  border-radius: var(--radius-full);
  transition: transform var(--duration-base) var(--ease-out-premium);
  box-shadow: var(--shadow-sm);
}
.toggle input:checked + .track { background: var(--color-indigo); }
.toggle input:checked + .track::after { transform: translateX(18px); }
.toggle input:focus-visible + .track { outline: 2px solid var(--color-indigo); outline-offset: 2px; }
.toggle:hover .track { background: var(--color-ink-30); }
.toggle input:checked:hover + .track { background: var(--color-indigo-hover); }

/* ---------- Badges (status pills) ---------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 600;
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1.4;
  white-space: nowrap;
}
.badge::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background: currentColor;
  flex-shrink: 0;
}

.badge-new { background: var(--color-indigo-soft); color: var(--color-indigo-hover); }
.badge-accepted, .badge-in_discussion { background: var(--color-warn-soft); color: var(--color-warn-text); }
.badge-completed { background: var(--color-mint-soft); color: var(--color-success-text); }
.badge-cancelled, .badge-declined { background: var(--color-danger-soft); color: var(--color-danger-text); }

/* Offering type badges */
.badge-product::before, .badge-service::before { display: none; }
.badge-product { background: var(--color-product-soft); color: var(--color-indigo-hover); }
.badge-service { background: var(--color-service-soft); color: var(--color-service-text); }

/* ---------- Empty states ---------- */
.empty-state {
  text-align: center;
  padding: var(--space-10) var(--space-5);
  color: var(--color-ink-50);
}
.empty-state-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-full);
  background: var(--color-surface-alt);
  color: var(--color-ink-50);
  margin-bottom: var(--space-4);
}
.empty-state-icon svg {
  width: 28px;
  height: 28px;
}
.empty-state h3 { color: var(--color-ink-70); margin-bottom: var(--space-2); }
.empty-state p { max-width: 360px; margin: 0 auto var(--space-5); }

/* ---------- Loading ---------- */
.spinner {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2.5px solid var(--color-ink-10);
  border-top-color: var(--color-indigo);
  border-radius: var(--radius-full);
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .spinner { animation-duration: 1.4s; }
}

.skeleton {
  background: linear-gradient(90deg, var(--color-ink-10) 25%, var(--color-surface-alt) 50%, var(--color-ink-10) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s ease-in-out infinite;
  border-radius: var(--radius-sm);
}
@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .skeleton { animation: none; background: var(--color-ink-10); }
}

/* Common skeleton shapes, reused across list/stat/thumbnail loading states
   so no page needs to hand-write inline sizing. */
.skeleton-text-lg { width: 30%; height: 20px; margin-bottom: var(--space-2); }
.skeleton-text-md { width: 40%; height: 16px; margin-bottom: var(--space-2); }
.skeleton-text-sm { width: 55%; height: 14px; }
.skeleton-text-xs { width: 25%; height: 12px; }
.skeleton-title { width: 160px; height: 28px; }
.skeleton-thumb { width: 56px; height: 56px; border-radius: var(--radius-sm); flex-shrink: 0; }
.skeleton-stat-value { width: 60%; height: 36px; margin-bottom: var(--space-2); }
.skeleton-stat-label { width: 80%; height: 16px; }
.skeleton-row-fill { flex: 1; }

/* ---------- Toast / inline alert ---------- */
.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  animation: fieldMessageIn var(--duration-base) var(--ease-out-premium);
}
.alert-error { background: var(--color-danger-soft); color: var(--color-danger-text); }
.alert-success { background: var(--color-mint-soft); color: var(--color-success-text); }
.alert-info { background: var(--color-indigo-soft); color: var(--color-indigo-hover); }
.alert-spaced { margin-bottom: var(--space-6); }
.alert-inline-action { display: inline-flex; margin-left: var(--space-3); vertical-align: middle; }

@media (prefers-reduced-motion: reduce) {
  .alert { animation: none; }
}

/* ---------- Modal / drawer ---------- */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(11, 14, 26, 0.5);
  z-index: 100;
  animation: fadeIn var(--duration-base) var(--ease-standard);
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.drawer {
  position: fixed;
  right: 0;
  top: 0;
  bottom: 0;
  width: min(420px, 100vw);
  background: var(--color-surface);
  z-index: 101;
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  animation: slideIn var(--duration-slow) var(--ease-out-premium);
}
@keyframes slideIn { from { transform: translateX(100%); } to { transform: translateX(0); } }

@media (prefers-reduced-motion: reduce) {
  .overlay, .drawer { animation: none; }
}