/* polish.css — global look & feel + mobile refinement layer.
   Loaded AFTER main.css/components.css; only overrides/refines. */

/* ── Rendering & motion ─────────────────────────────────────── */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overscroll-behavior-y: none; }
* { -webkit-tap-highlight-color: transparent; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ── Cards: consistent elevation + hover lift ───────────────── */
.card {
  transition: transform .18s ease, box-shadow .18s ease;
  border-radius: 14px;
  overflow: hidden;
}
.card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(10, 22, 40, .12); }
.card:active { transform: translateY(-1px); }
.card-img img { transition: transform .35s ease; }
.card:hover .card-img img { transform: scale(1.04); }
.card-price { letter-spacing: -0.01em; }

/* ── Buttons: focus rings + press feedback ──────────────────── */
.btn, button { touch-action: manipulation; }
.btn:active { transform: scale(.97); }
.btn:focus-visible, a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--blue-400, #3b82e8); outline-offset: 2px;
}

/* ── Forms: nicer fields, no iOS zoom ───────────────────────── */
input, select, textarea {
  border-radius: 10px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--blue-400, #3b82e8) !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 232, .15);
}
@media (max-width: 768px) {
  /* iOS Safari zooms into inputs with font-size < 16px — prevent it. */
  input, select, textarea { font-size: 16px !important; }
}

/* ── Touch targets (Android/iOS guideline ≥44px) ────────────── */
@media (max-width: 768px) {
  .btn, .btn-sm { min-height: 42px; }
  .nav-actions .btn { min-height: 38px; }
  .footer-legal a { padding: 8px 6px; display: inline-block; }
}

/* ── iOS safe areas (notch / home indicator) ────────────────── */
@supports (padding: env(safe-area-inset-left)) {
  body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
  footer { padding-bottom: calc(1.5rem + env(safe-area-inset-bottom)); }
}

/* ── Images: never overflow, subtle fade-in ─────────────────── */
img { max-width: 100%; height: auto; }
.card-img-bg.has-img img { background: #eef2f7; }

/* ── Tables & wide content scroll inside, not the page ──────── */
@media (max-width: 768px) {
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ── Section headings rhythm ────────────────────────────────── */
.section-head h2 { letter-spacing: -0.015em; }
.page-title { letter-spacing: -0.02em; }

/* ── Scrollbar (desktop) ────────────────────────────────────── */
@media (min-width: 900px) {
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-thumb { background: #c7d0dd; border-radius: 8px; border: 2px solid transparent; background-clip: content-box; }
  ::-webkit-scrollbar-thumb:hover { background-color: #9fb0c6; }
  ::-webkit-scrollbar-track { background: transparent; }
}

/* ── Selection color ────────────────────────────────────────── */
::selection { background: #c8f7e4; color: #0d3b2e; }

/* ── Clear the bottom tab bar on mobile ──────────────────────
   The tab bar (#mobileTabBar) occupies ~62px + safe-area at the bottom of
   the viewport on phones. Lift the AI assistant bubble/panel and the privacy
   consent banner above it so nothing overlaps. */
@media (max-width: 768px) {
  body.has-tabbar #asstBtn,
  body.has-tabbar #asstPanel {
    bottom: calc(70px + env(safe-area-inset-bottom, 0px)) !important;
  }
  body.has-tabbar #privacyConsent {
    bottom: calc(62px + env(safe-area-inset-bottom, 0px)) !important;
  }
}