/* ═══════════════════════════════════════════════════════════════════════
   DEXO QUICK - Shared Layout Styles (Quick Commerce)
   Imports quick-commerce.css + utility classes for sub-pages
   ═══════════════════════════════════════════════════════════════════════ */
@import url('quick-commerce.css');
@import url('customer-ui.css?v=20261029j');

/* ── Aliases: map old --dq-* vars to --qc-* for backward compat ─────── */
:root {
  --dq-primary: var(--qc-primary);
  --dq-primary-dark: var(--qc-primary-dark);
  --dq-primary-light: var(--qc-primary-light);
  --dq-primary-bg: var(--qc-primary-bg);
  --dq-bg: var(--qc-bg);
  --dq-surface: var(--qc-white);
  --dq-text: var(--qc-text);
  --dq-text-muted: var(--qc-text-secondary);
  --dq-border: var(--qc-border);
  --dq-radius: var(--qc-radius);
  --dq-shadow: var(--qc-shadow);
  --dq-danger: var(--qc-danger);
}

/* ── Sub-page body reset ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: var(--qc-bg);
  color: var(--qc-text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { cursor: pointer; border: none; background: none; font: inherit; }

/* ── Page Container ──────────────────────────────────────────────────── */
.qc-page,
.sh-page {
  max-width: 1280px;
  margin: 0 auto;
  padding: 20px 16px 100px;
  min-height: 60vh;
}
.sh-page-title { font-size: 1.3rem; font-weight: 800; margin-bottom: 4px; }
.sh-page-subtitle { font-size: 0.82rem; color: var(--qc-text-secondary); margin-bottom: 20px; }

/* ── Cards ───────────────────────────────────────────────────────────── */
.sh-card {
  background: var(--qc-white);
  border: 1px solid var(--qc-border);
  border-radius: var(--qc-radius);
  padding: 16px;
  box-shadow: var(--qc-shadow);
}
.sh-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.06); }

/* ── Buttons ─────────────────────────────────────────────────────────── */
.sh-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 20px;
  border-radius: var(--qc-radius);
  font-weight: 700;
  font-size: 0.85rem;
  transition: all 0.2s;
}
.sh-btn-primary { background: var(--qc-primary); color: #fff; }
.sh-btn-primary:hover { background: var(--qc-primary-dark); }
.sh-btn-outline { border: 1.5px solid var(--qc-border); color: var(--qc-text); }
.sh-btn-outline:hover { border-color: var(--qc-primary); color: var(--qc-primary); }
.sh-btn-sm { padding: 6px 14px; font-size: 0.78rem; border-radius: 8px; }

/* ── Badge ───────────────────────────────────────────────────────────── */
.sh-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
}
.sh-badge-green { background: #dcfce7; color: #166534; }
.sh-badge-amber { background: #fef3c7; color: #92400e; }
.sh-badge-red { background: #fee2e2; color: #991b1b; }
.sh-badge-blue { background: #dbeafe; color: #1e40af; }

/* ── Empty State ─────────────────────────────────────────────────────── */
.sh-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--qc-text-secondary);
}
.sh-empty svg { width: 64px; height: 64px; margin: 0 auto 16px; opacity: 0.4; }
.sh-empty h3 { font-size: 1.1rem; color: var(--qc-text); margin-bottom: 6px; }
.sh-empty p { font-size: 0.85rem; max-width: 360px; margin: 0 auto 16px; }

/* ── Loading ─────────────────────────────────────────────────────────── */
.sh-loading { display: flex; align-items: center; justify-content: center; padding: 40px; }
.sh-spinner {
  width: 32px; height: 32px;
  border: 3px solid var(--qc-border);
  border-top-color: var(--qc-primary);
  border-radius: 50%;
  animation: sh-spin 0.7s linear infinite;
}
@keyframes sh-spin { to { transform: rotate(360deg); } }

/* ── Footer columns (shared between index + sub-pages) ─────────────── */
.sh-footer-col h4 { color: #fff; font-size: 0.9rem; margin-bottom: 12px; }
.sh-footer-col a { display: block; font-size: 0.8rem; padding: 3px 0; transition: color 0.2s; }
.sh-footer-col a:hover { color: var(--qc-primary); }
.sh-footer-col p { font-size: 0.8rem; line-height: 1.6; }

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .sh-page { padding-bottom: 120px; }
}