/* ====================================================================
   BusiGroup Geographic Reports — stateful component styles.

   Layout, typography, buttons and cards are handled by Tailwind utilities
   in the templates (config + tokens live in base.html). This file holds ONLY
   the bits that are coupled to JavaScript (toggled classes, injected widgets)
   or to third-party elements (Leaflet, Google Places) that Tailwind can't
   reach cleanly. Keep it small.
   ==================================================================== */

:root {
  --primary: #1B365D;
  --accent: #E8935A;
  --line: #E1E5EE;
  --ink: #0A1C34;
  --ink-soft: #44474E;
  --success: #1D9E75;
  --danger: #BA1A1A;
}

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
  user-select: none;
}
.material-symbols-outlined.fill { font-variation-settings: 'FILL' 1; }

/* ── Button depth — add `btn-3d` alongside a button's colour utilities ──
   Layered drop shadow + a faint inset top highlight so solid buttons read
   as physical objects, plus a small hover lift and a pressed-in active
   state. Colour stays on the Tailwind utility classes; this only adds the
   shadow/motion, so there's no conflict. */
.btn-3d {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.15),
    0 4px 12px -3px rgba(10, 28, 52, 0.32),
    0 2px 4px -1px rgba(10, 28, 52, 0.16);
  transition: transform 0.15s ease, box-shadow 0.15s ease,
              background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.btn-3d:hover {
  transform: translateY(-1.5px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.20),
    0 10px 22px -4px rgba(10, 28, 52, 0.38),
    0 4px 8px -2px rgba(10, 28, 52, 0.20);
}
.btn-3d:active {
  transform: translateY(0);
  box-shadow:
    inset 0 2px 4px rgba(10, 28, 52, 0.22),
    0 2px 5px -1px rgba(10, 28, 52, 0.26);
}
.btn-3d:disabled,
.btn-3d[disabled] { box-shadow: none; transform: none; }

/* ── Spin keyframe (shared by overlay + status spinners) ─────────────── */
@keyframes bg-spin { to { transform: rotate(360deg); } }

/* ── Order-submit overlay (order.js toggles .show) ──────────────────── */
.overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(10, 20, 40, 0.82);
  color: #fff;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 18px;
  font-size: 15px;
}
.overlay.show { display: flex; }
.overlay .spinner {
  width: 54px; height: 54px;
  border: 4px solid rgba(255, 255, 255, 0.18);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: bg-spin 1s linear infinite;
}

/* ── Inline error box (order.js / checkout toggle .show) ────────────── */
.error-box {
  display: none;
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 10px;
  background: #FDECEC;
  border: 1px solid var(--danger);
  color: #8B1F1E;
  font-size: 14px;
}
.error-box.show { display: block; }

/* ── Clinic-field group swap (order.js toggles .active) ─────────────── */
.clinic-fields { display: none; }
.clinic-fields.active { display: block; }

/* ── Address card lock state (order.js toggles .locked) ─────────────── */
.address-card.locked { opacity: 0.5; pointer-events: none; }
.address-card.locked #map { background: #EEF1F8; }

/* ── Map + Google Places autocomplete element ───────────────────────── */
#map {
  width: 100%;
  height: 300px;
  border-radius: 10px;
  border: 1px solid var(--line);
  overflow: hidden;
  margin-top: 10px;
  background: #EEF1F8;
}
#address-container { width: 100%; display: block; }
#address-container gmp-place-autocomplete,
#address-container gmpx-place-picker { width: 100%; }
gmp-place-autocomplete {
  --gmpx-color-surface: #fff;
  width: 100%;
}

/* ── Confirmation status spinner (confirmation.js adds .done/.failed) ── */
.status-spinner {
  width: 52px; height: 52px;
  border: 4px solid var(--line);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: bg-spin 1.2s linear infinite;
}
.status-spinner.done   { border-top-color: var(--success); border-color: var(--success); animation: none; }
.status-spinner.failed { border-top-color: var(--danger);  border-color: var(--danger);  animation: none; }

/* progress-fill base (confirmation.js sets inline width/background) */
.progress-fill { height: 100%; width: 0; background: var(--accent); transition: width 0.4s ease; }

/* ── Rating stars (confirmation feedback) ───────────────────────────── */
/* HTML is rendered reverse (5..1) inside a row-reverse flex so the visual
   order reads 1..5; the sibling selector then lights the checked star and
   everything after it in HTML order (everything to its left visually). */
.rating-stars { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; gap: 10px; font-size: 38px; }
.rating-stars .star-option input { display: none; }
.rating-stars .star-option span {
  cursor: pointer; color: #D3DAE6; line-height: 1; display: inline-block;
  transform-origin: center; transition: color 0.12s ease, transform 0.12s ease;
}
.rating-stars .star-option:hover span,
.rating-stars .star-option:hover ~ .star-option span { color: var(--accent); transform: scale(1.18); }
.rating-stars .star-option:has(input:checked) span,
.rating-stars .star-option:has(input:checked) ~ .star-option span { color: var(--accent); animation: star-pop 0.32s ease; }
@keyframes star-pop { 0% { transform: scale(1); } 45% { transform: scale(1.4); } 100% { transform: scale(1); } }

/* ── Completion tick (confirmation ready state) ─────────────────────── */
.tick { display: inline-flex; }
.tick svg { width: 72px; height: 72px; }
.tick .tick-c { fill: none; stroke: var(--success); stroke-width: 2.5; stroke-dasharray: 145; stroke-dashoffset: 145; }
.tick .tick-k { fill: none; stroke: var(--success); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 48; stroke-dashoffset: 48; }
.tick.go { animation: tick-pop 0.45s ease; }
.tick.go .tick-c { animation: tick-draw 0.5s ease forwards; }
.tick.go .tick-k { animation: tick-draw 0.35s 0.45s ease forwards; }
@keyframes tick-draw { to { stroke-dashoffset: 0; } }
@keyframes tick-pop { 0% { transform: scale(0.8); } 60% { transform: scale(1.08); } 100% { transform: scale(1); } }

/* ── Checkout preview iframe ────────────────────────────────────────── */
.pdf-frame { width: 100%; height: 720px; border: 0; display: block; background: #fff; }

/* ====================================================================
   LEGACY — internal admin dashboard styles.

   The customer-facing pages (landing / order / checkout / confirmation)
   are now Tailwind. The admin pages (templates/admin/*) are internal staff
   tools and were NOT part of the visual redesign, so they still use these
   class-based component styles. Kept here so they keep rendering. Safe to
   migrate to Tailwind later if the admin UI gets a refresh.
   ==================================================================== */
:root {
  --navy: #1B365D;
  --navy-deep: #0A1428;
  --orange: #E8935A;
  --orange-deep: #DE8344;
  --slate: #4A5878;
  --slate-soft: #5A6A86;
  --line-soft: #E1E5EE;
  --bg: #F6F8FC;
  --green: #1D9E75;
  --red: #E24B4A;
}

.btn {
  display: inline-block; padding: 12px 20px; background: var(--navy); color: #fff;
  border: 0; border-radius: 10px; font-size: 14px; font-weight: 600; letter-spacing: 0.3px;
  cursor: pointer; transition: background 0.15s; text-decoration: none;
}
.btn:hover { background: var(--navy-deep); color: #fff; }
.btn:disabled { background: #8A93A8; cursor: not-allowed; }
.btn-primary { background: var(--navy); }
.btn-secondary { background: #fff; color: var(--navy); border: 1px solid var(--line); }
.btn-secondary:hover { background: var(--bg); color: var(--navy); }
.btn-ghost { background: transparent; color: var(--navy); border: 1px solid var(--line); }
.btn-ghost:hover { background: var(--bg); color: var(--navy); }
.btn-sm { padding: 6px 12px; font-size: 12px; }

.card {
  background: #fff; border-radius: 14px; padding: 28px 28px 24px 28px; margin-bottom: 22px;
  box-shadow: 0 4px 20px rgba(20, 40, 72, 0.05); border: 1px solid var(--line-soft);
}
.card .subtitle { color: var(--slate-soft); margin: 0 0 18px 0; font-size: 13px; }
.muted { color: var(--slate-soft); }
.small { font-size: 12px; }
.center { text-align: center; }

.kv { display: grid; grid-template-columns: 130px 1fr; row-gap: 8px; column-gap: 14px; margin: 8px 0 14px 0; font-size: 14px; }
.kv dt { color: var(--slate-soft); font-weight: 500; }
.kv dd { margin: 0; color: var(--navy); word-break: break-word; }
.kv dd.price { font-size: 17px; font-weight: 700; color: var(--orange-deep); }

.confirm-grid { display: grid; grid-template-columns: 1fr; gap: 22px; }
.feedback-list { list-style: none; padding: 0; margin: 8px 0; }
.feedback-list li { padding: 10px 0; border-bottom: 1px solid var(--line-soft); }

.pill { display: inline-block; padding: 4px 10px; border-radius: 99px; font-size: 12px; font-weight: 600; letter-spacing: 0.4px; text-transform: uppercase; }
.pill-success { background: #DFF6E8; color: var(--green); margin-bottom: 12px; }
.pill-veterinary { background: #E8F5E9; color: #1D7E47; }
.pill-gp { background: #E3EDFB; color: var(--navy); }
.pill-dentist { background: #FDECDC; color: var(--orange-deep); }
.pill-status-draft { background: #EEF1F8; color: var(--slate); }
.pill-status-paid { background: #DCEAFB; color: var(--navy); }
.pill-status-running { background: #FFF6DC; color: #8C6E00; }
.pill-status-uploading { background: #FFF6DC; color: #8C6E00; }
.pill-status-complete { background: #DFF6E8; color: var(--green); }
.pill-status-failed { background: #FDE3E1; color: var(--red); }
.pill-status-refunded { background: #EEF1F8; color: var(--slate); }

.admin-shell { padding: 36px 0 80px 0; }
.admin-inner { max-width: 1280px; margin: 0 auto; padding: 0 28px; }
.admin-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 22px; }
.admin-nav a { margin-left: 18px; font-size: 14px; color: var(--slate); padding-bottom: 4px; }
.admin-nav a.active { color: var(--navy); border-bottom: 2px solid var(--orange); }
.stat-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; margin-bottom: 22px; }
@media (max-width: 1000px) { .stat-grid { grid-template-columns: repeat(3, 1fr); } }
.stat-tile { background: #fff; border: 1px solid var(--line-soft); border-radius: 12px; padding: 16px 18px; }
.stat-num { font-size: 30px; font-weight: 700; color: var(--navy); line-height: 1.2; }
.stat-label { font-size: 12px; color: var(--slate-soft); text-transform: uppercase; letter-spacing: 0.8px; margin-top: 2px; }
.stat-bad .stat-num { color: var(--red); }
.filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; background: #fff; padding: 12px 14px; border: 1px solid var(--line-soft); border-radius: 10px; }
.filters input, .filters select { flex: 1; min-width: 140px; padding: 8px 12px; font-size: 14px; border: 1px solid var(--line); border-radius: 6px; }
.table-wrap { overflow-x: auto; background: #fff; border: 1px solid var(--line-soft); border-radius: 12px; }
.admin-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.admin-table th { text-align: left; padding: 12px 14px; background: #FBFCFE; border-bottom: 1px solid var(--line-soft); font-size: 12px; font-weight: 600; color: var(--slate); text-transform: uppercase; letter-spacing: 0.6px; }
.admin-table td { padding: 12px 14px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.admin-table tr:hover td { background: #FBFCFE; }
.admin-table td.addr { max-width: 280px; }
.admin-map { width: 100%; height: 70vh; border-radius: 12px; border: 1px solid var(--line); margin-top: 14px; }
.codeblock { background: #F4F6FB; border: 1px solid var(--line-soft); border-radius: 8px; padding: 12px 14px; font-family: 'SF Mono', 'Monaco', 'Consolas', monospace; font-size: 13px; overflow-x: auto; white-space: pre-wrap; word-break: break-word; }