/*
Theme Name: Zolvd Scanner
Theme URI: https://zolvd.ai
Author: Zolvd
Author URI: https://zolvd.ai
Description: A mobile-first wine scanning app theme. Snap a label, get instant AI-powered wine info, ratings, and cellar management. Fully editable via the WordPress Customizer.
Version: 0.06
Requires at least: 6.0
Tested up to: 6.7
License: Proprietary
License URI: https://zolvd.ai/license
Text Domain: zolvd-scanner
Tags: mobile, wine, scanner, full-width-template
*/

/* ═══════════════════════════════════════════════════
   FONTS
═══════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Inter:wght@400;500&family=JetBrains+Mono:ital,wght@0,400;0,500;1,400&display=swap');

/* ═══════════════════════════════════════════════════
   DESIGN TOKENS
═══════════════════════════════════════════════════ */
:root {
  --bg:            #F1E8DB;
  --paper:         #F8F1E5;
  --paper-2:       #EADFCD;
  --ink:           #251812;
  --ink-2:         #5B4A40;
  --ink-3:         #8C7A6B;
  --line:          rgba(37,24,18,0.10);
  --line-2:        rgba(37,24,18,0.18);

  --terracotta:    #C5634A;
  --terracotta-s:  #E89B85;
  --sage:          #7A8B6E;
  --sage-s:        #B5C0A6;
  --wine:          #5D1F2C;
  --gold:          #C99A48;

  --serif:  "Instrument Serif", "Georgia", serif;
  --sans:   "Inter", -apple-system, system-ui, sans-serif;
  --mono:   "JetBrains Mono", ui-monospace, monospace;

  --shadow-card: 0 1px 2px rgba(37,24,18,0.04), 0 6px 18px rgba(37,24,18,0.06);
  --shadow-fab:  0 8px 24px rgba(93,31,44,0.30), 0 2px 6px rgba(37,24,18,0.10);

  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
}

/* ═══════════════════════════════════════════════════
   RESET & BASE
═══════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; overflow: hidden; }

body {
  font-family: var(--sans);
  background: #DCD2C0;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background-image:
    radial-gradient(at 20% 10%, rgba(197,99,74,0.12), transparent 50%),
    radial-gradient(at 80% 90%, rgba(122,139,110,0.14), transparent 50%);
}

button { font: inherit; color: inherit; border: 0; background: transparent; cursor: pointer; padding: 0; -webkit-tap-highlight-color: transparent; }
input, textarea { font: inherit; }
a { color: inherit; text-decoration: none; }

/* ═══════════════════════════════════════════════════
   APP FRAME
═══════════════════════════════════════════════════ */
#zolvd-app {
  position: relative;
  width: 390px;
  height: 844px;
  max-width: 100vw;
  max-height: 100dvh;
  background: var(--bg);
  border-radius: 44px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,0.28), 0 0 0 0.5px rgba(0,0,0,0.12);
  display: flex;
  flex-direction: column;
}

/* Full-screen mobile: no frame chrome */
@media (max-width: 420px) {
  body { padding: 0; background: var(--bg); align-items: flex-start; }
  #zolvd-app {
    width: 100%;
    height: 100dvh;
    border-radius: 0;
    box-shadow: none;
  }
}

/* ═══════════════════════════════════════════════════
   SCREEN LAYOUT
═══════════════════════════════════════════════════ */
.zolvd-screen {
  position: absolute;
  inset: 0;
  bottom: 84px; /* leave room for tab bar */
  display: none;
  flex-direction: column;
  background: var(--bg);
}
.zolvd-screen.active { display: flex; }
.zolvd-screen.fullscreen { bottom: 0; z-index: 20; }

.screen-scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.screen-scroll::-webkit-scrollbar { display: none; }

.pad-status { padding-top: 54px; }

/* ═══════════════════════════════════════════════════
   TYPOGRAPHY
═══════════════════════════════════════════════════ */
.serif   { font-family: var(--serif); font-weight: 400; }
.serif-i { font-family: var(--serif); font-style: italic; font-weight: 400; }
.mono    { font-family: var(--mono); }

.eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.t-lg { font-size: 17px; line-height: 1.35; }
.t-md { font-size: 15px; line-height: 1.40; }
.t-sm { font-size: 13px; line-height: 1.40; color: var(--ink-2); }
.t-xs { font-size: 11px; line-height: 1.40; color: var(--ink-3); }

/* ═══════════════════════════════════════════════════
   COMPONENTS
═══════════════════════════════════════════════════ */

/* Card */
.card {
  background: var(--paper);
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
}

/* Chip */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 12px;
  font-family: var(--mono);
  letter-spacing: 0.02em;
  color: var(--ink-2);
  white-space: nowrap;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.chip.active { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.chip.sage   { background: rgba(122,139,110,0.18); border-color: rgba(122,139,110,0.30); color: #4A5A3F; }
.chip.terra  { background: rgba(197,99,74,0.16); border-color: rgba(197,99,74,0.30); color: #8B3D26; }
.chip.wine-c { background: rgba(93,31,44,0.12); border-color: rgba(93,31,44,0.25); color: var(--wine); }

/* Divider */
.divider { height: 1px; background: var(--line); }

/* Button */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px; padding: 0 22px;
  border-radius: 999px;
  font-family: var(--sans); font-size: 15px; font-weight: 500;
  background: var(--ink); color: var(--paper);
  transition: transform .12s, opacity .12s;
}
.btn:active { transform: scale(0.97); }
.btn.ghost  { background: transparent; border: 1px solid var(--line-2); color: var(--ink); }
.btn.terra  { background: var(--terracotta); color: #fff; }
.btn.wine   { background: var(--wine); color: #F1E8DB; }
.btn.block  { width: 100%; }

/* Score pill */
.score-pill {
  display: inline-flex; align-items: baseline; gap: 3px;
  padding: 4px 10px;
  background: var(--ink); color: var(--paper);
  border-radius: 999px;
  font-family: var(--mono); font-size: 13px;
}

/* Avatar */
.avatar {
  width: 32px; height: 32px; border-radius: 999px;
  background: var(--paper-2);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 11px; color: var(--ink-2);
  border: 1px solid var(--line);
  flex-shrink: 0;
}

/* Picture placeholder */
.pic {
  background:
    repeating-linear-gradient(135deg, rgba(37,24,18,0.04) 0 8px, transparent 8px 16px),
    linear-gradient(180deg, var(--paper-2), var(--paper));
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-3);
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border-radius: var(--r-sm);
}

/* Rating row */
.rating-row {
  display: grid;
  grid-template-columns: 90px 1fr 36px;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
}
.rating-track {
  height: 5px;
  background: var(--paper-2);
  border-radius: 999px;
  position: relative;
  overflow: hidden;
}
.rating-fill {
  position: absolute; top: 0; left: 0; bottom: 0;
  background: var(--terracotta);
  border-radius: 999px;
  transition: width .6s cubic-bezier(.2,.7,.2,1);
}
.rating-fill.gold { background: var(--gold); }
.rating-fill.sage { background: var(--sage); }

/* Section header */
.section-header {
  display: flex; align-items: flex-end; justify-content: space-between;
  margin-bottom: 14px;
}
.section-wrap {
  padding: 28px 20px 0;
}

/* Swatch dot */
.swatch {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 2px;
  vertical-align: middle;
}

/* ═══════════════════════════════════════════════════
   BOTTLE CSS
═══════════════════════════════════════════════════ */
.bottle-thumb {
  position: relative;
  flex-shrink: 0;
  border-radius: 8px 8px 4px 4px;
  box-shadow: inset 0 0 0 0.5px rgba(0,0,0,0.25), 0 2px 4px rgba(0,0,0,0.10);
}
.bottle-thumb .b-neck {
  position: absolute;
  top: 0; left: 50%;
  transform: translate(-50%, -90%);
  border-radius: 3px 3px 0 0;
  background: #1A0810;
}
.bottle-thumb .b-label {
  position: absolute;
  left: 10%; right: 10%;
  top: 38%; bottom: 12%;
  background: linear-gradient(180deg, #F8F1E5 0%, #E8DCC8 100%);
  border-radius: 2px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  overflow: hidden;
  padding: 3px;
}
.bottle-thumb .b-label-line {
  width: 80%;
  height: 1px;
  background: rgba(37,24,18,0.5);
}
.bottle-thumb .b-label-text {
  font-family: var(--serif);
  color: var(--ink);
  text-align: center;
  line-height: 1;
}

/* ═══════════════════════════════════════════════════
   TAB BAR
═══════════════════════════════════════════════════ */
#tab-bar {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 84px;
  background: rgba(248,241,229,0.88);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-top: 1px solid var(--line);
  padding: 10px 8px 26px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  align-items: end;
  z-index: 10;
}
.tab-item {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 6px 2px;
  font-family: var(--mono); font-size: 9px; letter-spacing: 0.06em;
  color: var(--ink-3);
  text-transform: uppercase;
  transition: color .15s;
}
.tab-item.active { color: var(--ink); }
.tab-item svg { transition: stroke .15s; }

.tab-scan-btn {
  width: 54px; height: 54px;
  border-radius: 999px;
  background: var(--wine);
  color: #F1E8DB;
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 2px;
  box-shadow: var(--shadow-fab);
  transition: transform .12s;
}
.tab-scan-btn:active { transform: scale(0.93); }

/* ═══════════════════════════════════════════════════
   HOME SCREEN
═══════════════════════════════════════════════════ */
.hero-scan-card {
  display: block; width: 100%; text-align: left;
  background: linear-gradient(135deg, #5D1F2C 0%, #3A1018 100%);
  color: #F1E8DB;
  border-radius: 24px;
  padding: 22px;
  position: relative; overflow: hidden;
  transition: transform .12s;
}
.hero-scan-card:active { transform: scale(0.98); }
.hero-scan-card .hero-bottle-bg {
  position: absolute; right: -24px; top: -8px; opacity: 0.15;
}
.hero-open-camera {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 16px;
  background: rgba(241,232,219,0.16);
  border-radius: 999px;
  backdrop-filter: blur(10px);
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em;
}

/* Horizontal scroll row */
.h-scroll {
  display: flex; gap: 12px;
  overflow-x: auto; padding: 4px 0;
  margin: 0 -20px; padding-left: 20px; padding-right: 20px;
  scrollbar-width: none;
}
.h-scroll::-webkit-scrollbar { display: none; }

/* Wine card (vertical) */
.wine-card-v {
  flex-shrink: 0; width: 170px;
  background: var(--paper); border-radius: 20px;
  border: 1px solid var(--line);
  padding: 14px; text-align: left;
  transition: transform .12s;
}
.wine-card-v:active { transform: scale(0.97); }

/* Wine card (grid) */
.wine-card-g {
  background: var(--paper); border-radius: var(--r-md);
  border: 1px solid var(--line);
  padding: 14px; text-align: left;
  transition: transform .12s;
  box-shadow: var(--shadow-card);
}
.wine-card-g:active { transform: scale(0.97); }

/* ═══════════════════════════════════════════════════
   WINE ROW (list item)
═══════════════════════════════════════════════════ */
.wine-row {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 20px;
  width: 100%; text-align: left;
  border-bottom: 1px solid var(--line);
  transition: background .12s;
}
.wine-row:active { background: var(--paper-2); }

/* ═══════════════════════════════════════════════════
   SCAN SCREEN
═══════════════════════════════════════════════════ */
.viewfinder {
  position: absolute; inset: 0;
  background: #0A0807;
  overflow: hidden;
}
.viewfinder::before {
  content: '';
  position: absolute; inset: 0;
  /* vignette only — centre stays transparent so the camera feed shows through */
  background: radial-gradient(ellipse 80% 70% at 50% 38%,
    rgba(0,0,0,0)    0%,
    rgba(0,0,0,0)   28%,
    rgba(0,0,0,0.45) 65%,
    rgba(0,0,0,0.72) 100%
  );
  pointer-events: none;
  z-index: 1;
}
.scan-silhouette {
  position: absolute;
  left: 50%; top: 38%;
  transform: translate(-50%, -50%);
  opacity: 0.18; /* ghost guide — doesn't fight the live camera */
  z-index: 0;
}
.scan-frame {
  position: absolute; left: 50%; top: 38%;
  transform: translate(-50%, -50%);
  width: 200px; height: 320px;
  z-index: 2; pointer-events: none;
}
.bracket { position: absolute; width: 24px; height: 24px; border: 2px solid rgba(255,255,255,0.85); }
.bracket.tl { top: 0; left: 0; border-right: 0; border-bottom: 0; border-top-left-radius: 6px; }
.bracket.tr { top: 0; right: 0; border-left: 0; border-bottom: 0; border-top-right-radius: 6px; }
.bracket.bl { bottom: 0; left: 0; border-right: 0; border-top: 0; border-bottom-left-radius: 6px; }
.bracket.br { bottom: 0; right: 0; border-left: 0; border-top: 0; border-bottom-right-radius: 6px; }

@keyframes scanLine {
  0%   { top: 18%; opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { top: 82%; opacity: 0; }
}
.scan-line {
  position: absolute;
  left: 12%; right: 12%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--terracotta), transparent);
  box-shadow: 0 0 12px var(--terracotta);
  animation: scanLine 2s ease-in-out infinite;
}

#scan-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}
#scan-canvas { display: none; }

.scan-top-chrome {
  position: absolute; top: 0; left: 0; right: 0;
  padding: 54px 20px 0;
  display: flex; justify-content: space-between; align-items: center;
  z-index: 5;
}
.scan-chrome-btn {
  width: 40px; height: 40px; border-radius: 999px;
  background: rgba(20,12,8,0.5);
  backdrop-filter: blur(10px);
  display: inline-flex; align-items: center; justify-content: center;
  color: #F1E8DB;
}
.scan-bottom-chrome {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 20px 20px 36px;
  z-index: 5;
}
.scan-shutter {
  width: 76px; height: 76px; border-radius: 999px;
  background: #F1E8DB;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 5px rgba(241,232,219,0.28);
  transition: transform .1s;
}
.scan-shutter:active { transform: scale(0.93); }
.scan-shutter-inner {
  width: 64px; height: 64px; border-radius: 999px;
  border: 3px solid #0A0807; background: #F1E8DB;
}
.scan-mode-tabs {
  display: flex; justify-content: center; gap: 24px;
  margin-bottom: 22px;
}

/* ═══════════════════════════════════════════════════
   SCANNING (analyzing) SCREEN
═══════════════════════════════════════════════════ */
.scanning-panel {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: #F8F1E5;
  border-radius: 28px 28px 0 0;
  padding: 24px 24px 48px;
  z-index: 6;
}
@keyframes slideUp {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
.anim-slide-up { animation: slideUp .35s cubic-bezier(.2,.7,.2,1) both; }

.step-dot {
  width: 22px; height: 22px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%       { transform: scale(1.3); opacity: 0.7; }
}
.step-dot-active { animation: pulse .9s ease infinite; }

@keyframes shimmerMove {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(200%); }
}
.shimmer-bar {
  flex: 1; height: 2px;
  background: var(--line);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}
.shimmer-bar::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, var(--terracotta), transparent);
  animation: shimmerMove 1.2s linear infinite;
}

/* ═══════════════════════════════════════════════════
   RESULT SCREEN
═══════════════════════════════════════════════════ */
.result-hero {
  background: linear-gradient(180deg, var(--paper-2) 0%, var(--bg) 100%);
  padding-bottom: 8px;
}
.result-tabs {
  display: flex; gap: 20px;
  padding: 20px 20px 0;
  border-bottom: 1px solid var(--line);
  margin: 8px 0 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.result-tabs::-webkit-scrollbar { display: none; }
.result-tab {
  padding-bottom: 12px; margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  color: var(--ink-3);
  white-space: nowrap;
  font-size: 15px;
  font-weight: 400;
  transition: color .15s;
}
.result-tab.active {
  border-bottom-color: var(--ink);
  color: var(--ink);
  font-weight: 500;
}

/* Floating rate CTA */
.rate-fab {
  position: absolute; left: 16px; right: 16px; bottom: 16px; z-index: 30;
}

/* Vintage bar chart */
.vintage-bar {
  border-radius: 4px 4px 0 0;
  transition: height .4s ease;
}

/* ═══════════════════════════════════════════════════
   CELLAR SCREEN
═══════════════════════════════════════════════════ */
.cellar-stat-strip {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1px;
  background: var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}
.cellar-stat {
  background: var(--paper);
  padding: 16px 12px;
  text-align: center;
}
.cellar-tabs {
  display: flex; gap: 22px;
  padding: 22px 20px 10px;
  border-bottom: 1px solid var(--line);
  margin: 8px 0 0;
  align-items: flex-end;
}
.cellar-tab {
  display: flex; align-items: center; gap: 6px;
  padding-bottom: 10px; margin-bottom: -11px;
  border-bottom: 2px solid transparent;
  color: var(--ink-3);
  font-size: 15px;
  transition: color .15s;
}
.cellar-tab.active {
  border-bottom-color: var(--ink);
  color: var(--ink);
  font-weight: 500;
}

/* ═══════════════════════════════════════════════════
   PROFILE SCREEN
═══════════════════════════════════════════════════ */
.profile-avatar-ring {
  width: 84px; height: 84px; border-radius: 999px;
  background: linear-gradient(135deg, var(--terracotta) 0%, var(--wine) 100%);
  display: inline-flex; align-items: center; justify-content: center;
  color: #F1E8DB;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════
   RATE SCREEN
═══════════════════════════════════════════════════ */
.star-btn { padding: 4px; transition: transform .1s; }
.star-btn:active { transform: scale(1.2); }

/* ═══════════════════════════════════════════════════
   SEARCH SCREEN
═══════════════════════════════════════════════════ */
.search-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 0 16px; height: 48px;
  background: var(--paper);
  border-radius: 999px;
  border: 1px solid var(--line);
}
.search-bar input {
  flex: 1; border: 0; background: transparent;
  font-size: 15px; color: var(--ink); outline: none;
}
.search-bar input::placeholder { color: var(--ink-3); }

/* ═══════════════════════════════════════════════════
   ANIMATIONS
═══════════════════════════════════════════════════ */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.anim-in  { animation: fadeIn  .28s ease both; }
.anim-up  { animation: fadeUp  .35s cubic-bezier(.2,.7,.2,1) both; }

/* ═══════════════════════════════════════════════════
   LOADING / ERROR STATES
═══════════════════════════════════════════════════ */
.loading-shimmer {
  background: linear-gradient(90deg, var(--paper-2) 25%, var(--paper) 50%, var(--paper-2) 75%);
  background-size: 400px 100%;
  animation: shimmerMove 1.4s linear infinite;
  border-radius: var(--r-sm);
}

/* ═══════════════════════════════════════════════════
   CUSTOMIZER LIVE PREVIEW HELPERS
═══════════════════════════════════════════════════ */
.zolvd-customizer-text { transition: color .2s; }