/* ==============================================================
   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); }

.repeat-order-btn {
  background: var(--color-indigo-soft);
  color: var(--color-indigo);
  border: 1.5px solid var(--color-indigo-soft);
  font-weight: 600;
}
.repeat-order-btn:hover {
  background: var(--color-indigo);
  color: var(--color-surface);
  border-color: var(--color-indigo);
  text-decoration: none;
}
.repeat-order-btn:disabled {
  background: var(--color-surface-alt);
  color: var(--color-ink-30-text);
  border-color: var(--color-border);
  cursor: not-allowed;
}

.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);
}
.required-mark {
  color: var(--color-danger);
  font-weight: 700;
}

.field .hint {
  font-size: var(--text-xs);
  color: var(--color-ink-50);
  margin-top: var(--space-2);
}
.field-hint-above { margin-top: 0; margin-bottom: 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; }

/* Country-code phone input (checkout, service request, inquiry —
   see js/components/phone-input.js). The country <select> keeps a
   comfortable fixed width for its "Name (+123)" labels rather than
   fighting the local-number input for equal flex space; the local
   input takes the remaining width. Below 480px both the row and the
   phone-input-hint remain full width and the two controls stay
   side-by-side (a phone number is short enough that stacking them
   would waste vertical space and look broken, unlike the wider
   date/time .field-row pair which does stack) — verified at 375px. */
.phone-input-row {
  display: flex;
  gap: var(--space-2);
  align-items: stretch;
}
.phone-input-country {
  flex: 0 0 auto;
  width: 40%;
  max-width: 168px;
  min-width: 108px;
  padding-left: var(--space-2);
  padding-right: var(--space-1);
}
.phone-input-local {
  flex: 1 1 auto;
  min-width: 0; /* allow the flex item to shrink below its content size on narrow screens instead of overflowing the row */
}
.phone-input-hint {
  margin-top: var(--space-2);
  margin-bottom: 0;
}
@media (max-width: 360px) {
  /* Only the narrowest phones need the fixed max-width relaxed
     further — the flex-basis percentage already keeps both controls
     usable at 375px and above. */
  .phone-input-country { min-width: 96px; }
}

@media (max-width: 480px) {
  .field-row { flex-direction: column; gap: 0; }
  .drawer {
    top: 0 !important;
    right: 0 !important;
    left: 0 !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-width: none !important;
    margin-left: 0 !important;
  }
}

/* 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;
  left: 0;
  top: 0;
  height: 100vh;
  height: 100dvh;
  max-width: 420px;
  margin-left: auto;
  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);
}
.drawer-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border);
}
.drawer-header h3 {
  flex: 1;
  margin: 0;
}
.drawer-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.drawer-footer {
  flex-shrink: 0;
  padding: var(--space-4);
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
  box-shadow: 0 -4px 12px rgba(11, 14, 26, 0.08);
  position: relative;
  z-index: 1;
}
@keyframes slideIn { from { transform: translateX(100%); } to { transform: translateX(0); } }

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