/*
 * Vinyolo v2 — Unified Design System (Visual Upgrade)
 * Premium wine SaaS aesthetic: airy, editorial, confident.
 *
 *  1.  Design Tokens
 *  2.  Base & Typography
 *  3.  Navbar
 *  4.  Flash Alerts
 *  5.  Buttons
 *  6.  Cards
 *  7.  Tables
 *  8.  Forms
 *  9.  Admin Layout
 * 10.  Admin Mobile Card View
 * 11.  Wine Image Modal
 * 12.  AI Assistant Bubble
 * 13.  Badges & Score Chips
 * 14.  Public Pages
 * 15.  Auth Pages
 * 16.  Dashboard
 * 17.  Pagination
 * 18.  Animations & Utilities
 */

/* ═══════════════════════════════════════════════════════
   1. DESIGN TOKENS
   ═══════════════════════════════════════════════════════ */
:root {
  --vy-burgundy:        #691929;
  --vy-burgundy-dark:   #4e1020;
  --vy-burgundy-mid:    #8c2a3a;
  --vy-burgundy-light:  rgba(105,25,41,0.08);
  --vy-gold:            #C7A97B;
  --vy-gold-light:      #E8D5B0;
  --vy-cream:           #F2E7DE;
  --vy-cream-light:     #FAF6F2;
  --vy-dark:            #1C0F0F;

  --vy-bg:              #F8F5F2;
  --vy-surface:         #FFFFFF;
  --vy-surface-alt:     #F5EDE6;
  --vy-border:          #E4D5C9;
  --vy-border-light:    #EDE3DC;

  --vy-text:            #1C1210;
  --vy-text-secondary:  #5A4A46;
  --vy-text-muted:      #9A8680;
  --vy-text-light:      #C4B0AB;

  --vy-success:         #1A7A45;
  --vy-warning:         #C47B00;
  --vy-danger:          #B83025;
  --vy-info:            #1B5FA6;

  --vy-navbar-height:   62px;
  --vy-navbar-pub-bg:   rgba(255,255,255,0.98);
  --vy-navbar-app-bg:   #120A0B;

  --vy-shadow-xs:       0 1px 2px rgba(28,15,15,.04);
  --vy-shadow-sm:       0 1px 4px rgba(28,15,15,.06), 0 2px 8px rgba(28,15,15,.04);
  --vy-shadow:          0 4px 12px rgba(28,15,15,.08), 0 1px 4px rgba(28,15,15,.06);
  --vy-shadow-md:       0 8px 24px rgba(28,15,15,.10), 0 2px 8px rgba(28,15,15,.06);
  --vy-shadow-lg:       0 16px 48px rgba(28,15,15,.14), 0 4px 16px rgba(28,15,15,.08);
  --vy-shadow-burgundy: 0 4px 16px rgba(105,25,41,.22);

  --vy-radius-xs: 4px;
  --vy-radius-sm: 8px;
  --vy-radius:    12px;
  --vy-radius-lg: 18px;
  --vy-radius-xl: 28px;

  --vy-trans-fast: all 0.15s ease;
  --vy-trans:      all 0.22s ease;
  --vy-trans-slow: all 0.35s ease;
}

/* ═══════════════════════════════════════════════════════
   2. BASE & TYPOGRAPHY
   ═══════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }

html { font-size: 16px; scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  background-color: var(--vy-bg);
  color: var(--vy-text);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, .vy-display {
  font-family: 'Cormorant Garamond', Georgia, serif;
  letter-spacing: -0.01em;
}

a { color: var(--vy-burgundy); text-decoration: none; }
a:hover { color: var(--vy-burgundy-mid); }

.vy-main { padding-top: var(--vy-navbar-height); min-height: 100vh; }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--vy-bg); }
::-webkit-scrollbar-thumb { background: var(--vy-border); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: var(--vy-text-light); }

/* ═══════════════════════════════════════════════════════
   3. NAVBAR
   ═══════════════════════════════════════════════════════ */
.vy-navbar { height: var(--vy-navbar-height); z-index: 1040; transition: box-shadow 0.25s; }

.vy-navbar--public {
  background-color: var(--vy-navbar-pub-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--vy-border-light);
  box-shadow: var(--vy-shadow-xs);
}
.vy-navbar--public .navbar-brand img { height: 40px; }
.vy-navbar--public .nav-link {
  color: var(--vy-text-secondary) !important;
  font-weight: 500;
  font-size: 0.9rem;
  padding: 0.35rem 0.8rem;
  border-radius: var(--vy-radius-sm);
  letter-spacing: 0.01em;
  transition: var(--vy-trans-fast);
}
.vy-navbar--public .nav-link:hover,
.vy-navbar--public .nav-link.active {
  color: var(--vy-burgundy) !important;
  background: var(--vy-burgundy-light);
}

.vy-navbar--app {
  background: linear-gradient(135deg, #120A0B 0%, #1C0E10 100%);
  box-shadow: 0 2px 16px rgba(0,0,0,0.40);
}
.vy-navbar--app .navbar-brand img { height: 38px; }
.vy-navbar--app .nav-link {
  color: rgba(242,231,222,0.78) !important;
  font-weight: 400;
  font-size: 0.875rem;
  padding: 0.35rem 0.75rem;
  border-radius: var(--vy-radius-sm);
  transition: var(--vy-trans-fast);
}
.vy-navbar--app .nav-link:hover { color: var(--vy-cream) !important; background: rgba(255,255,255,0.07); }
.vy-navbar--app .vy-nav-admin { color: var(--vy-gold) !important; }

.vy-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--vy-burgundy); color: #fff;
  font-size: 0.78rem; font-weight: 600; flex-shrink: 0;
}

.vy-dropdown {
  border: 1px solid var(--vy-border); border-radius: var(--vy-radius);
  box-shadow: var(--vy-shadow-md); padding: 0.4rem 0; min-width: 180px;
}
.vy-dropdown .dropdown-item {
  font-size: 0.875rem; padding: 0.5rem 1.1rem;
  color: var(--vy-text); transition: var(--vy-trans-fast);
}
.vy-dropdown .dropdown-item:hover { background: var(--vy-cream); color: var(--vy-burgundy); }
.vy-dropdown .dropdown-divider { border-color: var(--vy-border-light); margin: 0.25rem 0; }

/* ── Mobile nav: right-aligned dropdown panel ─────────────────
   On mobile the collapse div detaches from document flow and
   appears as a floating panel anchored below the hamburger.
   position:fixed on .vy-navbar makes it a containing block,
   so top:100% = immediately below the 62 px navbar bar.
   ──────────────────────────────────────────────────────────── */
@media (max-width: 991.98px) {

  /* Toggler icon — white version for dark navbar */
  .vy-navbar--app .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(242,231,222,0.85)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  }
  .vy-navbar--public .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(80,40,40,0.85)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  }

  /* The collapsible nav panel */
  #vy-nav {
    position: fixed !important;   /* fixed to viewport — bypasses all ancestor constraints */
    top: var(--vy-navbar-height) !important;
    right: 0 !important;
    left: auto !important;        /* don't stretch to left edge */
    width: auto !important;
    min-width: 225px;
    max-width: 285px;
    max-height: calc(100vh - var(--vy-navbar-height));
    overflow-y: auto;

    /* Panel look */
    background: linear-gradient(160deg, #1e1012 0%, #160b0d 100%) !important;
    border: 1px solid rgba(201,169,110,.22);
    border-top: 2px solid rgba(201,169,110,.4);
    border-radius: 0 0 .9rem .9rem;
    box-shadow: 0 14px 36px rgba(0,0,0,.75);
    padding: .5rem .4rem .65rem;
    z-index: 1039;
  }

  /* Stack nav items vertically, full width */
  #vy-nav .navbar-nav {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0 !important;
    width: 100%;
  }
  #vy-nav .nav-item { width: 100%; }
  #vy-nav .nav-link {
    padding: .6rem .85rem !important;
    border-radius: .45rem;
    width: 100%;
    display: flex;
    align-items: center;
  }
  #vy-nav .nav-link:hover {
    background: rgba(255,255,255,.08) !important;
  }

  /* Divider line between main links and user section */
  #vy-nav .nav-item.dropdown { margin-top: .3rem; border-top: 1px solid rgba(255,255,255,.07); padding-top: .3rem; }

  /* User dropdown inside the panel — show as inline list, not a floating menu */
  #vy-nav .dropdown-menu {
    position: static !important;
    transform: none !important;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.07);
    border-radius: .45rem;
    box-shadow: none;
    padding: .2rem .3rem;
    margin: .2rem 0 0 .75rem;
    min-width: auto;
    width: calc(100% - .75rem);
  }
  #vy-nav .dropdown-menu .dropdown-item {
    border-radius: .35rem;
    padding: .5rem .75rem;
    font-size: .85rem;
  }
  #vy-nav .dropdown-menu.show { display: block; }

  /* Badges and buttons inside panel */
  #vy-nav .badge  { margin: .3rem 0 .1rem .85rem; display: inline-block; }
  #vy-nav .btn    { margin: .4rem .85rem .1rem; width: calc(100% - 1.7rem); }
}

/* ═══════════════════════════════════════════════════════
   4. FLASH ALERTS
   ═══════════════════════════════════════════════════════ */
.vy-flash-container {
  position: fixed; top: calc(var(--vy-navbar-height) + 14px);
  left: 50%; transform: translateX(-50%);
  z-index: 1060; width: min(560px, 92vw);
}
.vy-alert { border-radius: var(--vy-radius); box-shadow: var(--vy-shadow-md); font-size: 0.9rem; border: none; }

/* ═══════════════════════════════════════════════════════
   5. BUTTONS
   ═══════════════════════════════════════════════════════ */
.btn {
  border-radius: var(--vy-radius-sm); font-weight: 500; font-size: 0.9rem;
  letter-spacing: 0.015em; transition: var(--vy-trans); border: 2px solid transparent;
}

.btn-vy { background-color: var(--vy-burgundy); color: #fff; border-color: var(--vy-burgundy); }
.btn-vy:hover, .btn-vy:focus-visible {
  background-color: var(--vy-burgundy-mid); border-color: var(--vy-burgundy-mid);
  color: #fff; transform: translateY(-1px); box-shadow: var(--vy-shadow-burgundy);
}
.btn-vy:active { transform: translateY(0); background-color: var(--vy-burgundy-dark); box-shadow: none; }

.btn-vy-outline { background: transparent; border-color: var(--vy-burgundy); color: var(--vy-burgundy); }
.btn-vy-outline:hover, .btn-vy-outline:focus-visible {
  background: var(--vy-burgundy); color: #fff;
  transform: translateY(-1px); box-shadow: var(--vy-shadow-burgundy);
}
.btn-vy-outline:active { transform: translateY(0); }

.btn-vy-ghost { background: var(--vy-cream); border-color: var(--vy-border); color: var(--vy-text-secondary); }
.btn-vy-ghost:hover { background: var(--vy-surface-alt); border-color: var(--vy-burgundy); color: var(--vy-burgundy); }

.btn-vy-danger { background: var(--vy-danger); border-color: var(--vy-danger); color: #fff; }
.btn-vy-danger:hover { background: #9b2820; border-color: #9b2820; color: #fff; }

.btn-vy-muted { background: var(--vy-surface-alt); border-color: var(--vy-border); color: var(--vy-text-muted); }
.btn-vy-muted:hover { background: var(--vy-border); color: var(--vy-text); }

/* ═══════════════════════════════════════════════════════
   6. CARDS
   ═══════════════════════════════════════════════════════ */
.card {
  border: 1px solid var(--vy-border-light) !important;
  border-radius: var(--vy-radius-lg) !important;
  box-shadow: var(--vy-shadow-sm);
  background: var(--vy-surface);
  transition: var(--vy-trans);
}
.card:hover { box-shadow: var(--vy-shadow); }
.card-header {
  border-radius: var(--vy-radius-lg) var(--vy-radius-lg) 0 0 !important;
  border-bottom: 1px solid var(--vy-border-light) !important;
  background: var(--vy-surface) !important;
  padding: 1rem 1.25rem;
}
.vy-card-wine { border-left: 3px solid var(--vy-burgundy) !important; border-radius: var(--vy-radius) !important; }

.vy-feature-card {
  padding: 2rem 1.5rem; text-align: center;
  border: 1px solid var(--vy-border-light); border-radius: var(--vy-radius-lg) !important;
  background: var(--vy-surface); box-shadow: var(--vy-shadow-sm);
  transition: var(--vy-trans); height: 100%;
}
.vy-feature-card:hover { box-shadow: var(--vy-shadow-md); transform: translateY(-4px); }
.vy-feature-icon-wrap {
  width: 64px; height: 64px; border-radius: var(--vy-radius);
  background: var(--vy-burgundy-light);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 1.25rem; font-size: 1.5rem; color: var(--vy-burgundy);
  transition: var(--vy-trans);
}
.vy-feature-card:hover .vy-feature-icon-wrap { background: var(--vy-burgundy); color: #fff; }

/* ═══════════════════════════════════════════════════════
   7. TABLES
   ═══════════════════════════════════════════════════════ */
.table { background: var(--vy-surface); border-radius: var(--vy-radius); overflow: hidden; font-size: 0.85rem; }
.table thead th {
  background: var(--vy-dark);
  color: rgba(242,231,222,0.88);
  font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.07em; text-transform: uppercase;
  border: none; padding: 0.75rem 0.75rem; white-space: nowrap;
}
.table thead th a { color: var(--vy-gold); }
.table thead th a:hover { color: var(--vy-gold-light); }
.table tbody tr { border-bottom: 1px solid var(--vy-border-light); transition: background-color 0.12s; }
.table tbody tr:last-child { border-bottom: none; }
.table-hover tbody tr:hover { background-color: #FAF6F2; }
.table tbody td { padding: 0.6rem 0.75rem; vertical-align: middle; color: var(--vy-text); }

.admin-table td        { font-size: 0.82rem; }
.admin-table .name-col { min-width: 150px; max-width: 230px; }
.admin-table .score-col { width: 50px; text-align: center; }
.admin-table .avg-col   { width: 62px; text-align: center; font-weight: 600; color: var(--vy-burgundy); }
.admin-table .update-col { width: 70px; text-align: center; }
.admin-table .img-col    { width: 58px; text-align: center; }

/* ═══════════════════════════════════════════════════════
   8. FORMS
   ═══════════════════════════════════════════════════════ */
.form-control, .form-select {
  border: 1.5px solid var(--vy-border);
  border-radius: var(--vy-radius-sm); font-size: 0.9rem;
  padding: 0.55rem 0.85rem; background: var(--vy-surface);
  color: var(--vy-text); transition: border-color 0.15s, box-shadow 0.15s;
}
.form-control:focus, .form-select:focus {
  border-color: var(--vy-burgundy); box-shadow: 0 0 0 3px rgba(105,25,41,0.10); outline: none;
}
.form-control::placeholder { color: var(--vy-text-light); }
.form-label { font-size: 0.84rem; font-weight: 500; color: var(--vy-text-secondary); margin-bottom: 0.35rem; }
.form-control-sm, .form-select-sm { font-size: 0.82rem; padding: 0.35rem 0.65rem; }

/* ═══════════════════════════════════════════════════════
   9. ADMIN LAYOUT
   ═══════════════════════════════════════════════════════ */
.vy-admin-stats {
  display: flex; align-items: center; gap: 1.5rem;
  padding: 0.9rem 1.4rem;
  background: var(--vy-surface);
  border-bottom: 1px solid var(--vy-border-light);
  flex-wrap: wrap;
}
.vy-admin-stat { display: flex; flex-direction: column; line-height: 1.2; }
.vy-admin-stat__value {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.5rem; font-weight: 600; color: var(--vy-burgundy);
}
.vy-admin-stat__label {
  font-size: 0.7rem; color: var(--vy-text-muted);
  letter-spacing: 0.05em; text-transform: uppercase;
}
.vy-admin-stat-divider { width: 1px; height: 28px; background: var(--vy-border); flex-shrink: 0; }

.vy-sidebar {
  background: var(--vy-surface);
  border-right: 1px solid var(--vy-border);
  padding: 1.25rem 1rem;
  height: calc(100vh - var(--vy-navbar-height));
  overflow-y: auto; overflow-x: hidden;
  position: sticky; top: var(--vy-navbar-height);
}
.vy-sidebar-label {
  font-size: 0.69rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--vy-text-light);
  margin: 1.25rem 0 0.5rem; padding: 0 0.15rem;
}
.vy-sidebar-label:first-child { margin-top: 0; }
.vy-sidebar-divider { border: none; border-top: 1px solid var(--vy-border-light); margin: 0.9rem 0; }

/* Offcanvas panel — sits below the navbar; overflow-y lives on .offcanvas-body (Bootstrap default)
   to avoid iOS nested-scroll / focus-blocking bugs.
   z-index 1046 keeps it above Bootstrap's backdrop (1040) even when backdrop is enabled. */
.vy-offcanvas { width: 100vw; max-width: 320px; top: var(--vy-navbar-height); bottom: 0; z-index: 1046; overflow: visible; }
@media (min-width: 992px) { .vy-offcanvas { width: 300px; max-width: 300px; top: 0; } }
/* Ensure the scrollable body inside the offcanvas works on iOS */
.vy-offcanvas .offcanvas-body { -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain; }

.filter-label { font-size: 0.78rem; font-weight: 600; color: var(--vy-text-secondary); margin-bottom: 0.25rem; }
.vy-action-btn { width: 100%; text-align: left; font-size: 0.84rem; padding: 0.45rem 0.8rem; margin-bottom: 0.2rem; border-radius: var(--vy-radius-sm); }
.vy-action-group { display: flex; flex-direction: column; gap: 0.2rem; margin-bottom: 0.75rem; }

/* ── Contextual "Selected" panel ──────────────────────────────────────── */
.vy-sel-panel {
  background: rgba(105,25,41,0.06);
  border: 1px solid rgba(105,25,41,0.18);
  border-radius: var(--vy-radius-sm);
  padding: 0.6rem 0.75rem 0.75rem;
  margin-bottom: 0.25rem;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  margin-top: 0;
  transition: max-height 0.3s ease, opacity 0.25s ease, margin-bottom 0.3s ease, padding 0.2s ease;
}
.vy-sel-panel.visible {
  max-height: 220px;
  opacity: 1;
  margin-bottom: 0.5rem;
}
.vy-sel-panel-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 0.5rem;
}
.vy-sel-panel-title {
  font-size: 0.69rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--vy-burgundy);
  display: flex; align-items: center; gap: 0.35rem;
}
.vy-sel-badge {
  background: var(--vy-burgundy); color: #fff;
  border-radius: 10px; padding: 0 7px;
  font-size: 0.7rem; font-weight: 800;
  min-width: 20px; text-align: center; line-height: 1.6;
}
.vy-sel-clear-link {
  font-size: 0.72rem; color: var(--vy-text-muted); cursor: pointer;
  padding: 2px 6px; border-radius: 4px; border: 1px solid transparent;
  transition: var(--vy-trans-fast); background: none;
  text-decoration: none;
}
.vy-sel-clear-link:hover { color: var(--vy-text-secondary); border-color: var(--vy-border); }
.vy-sel-divider { height: 1px; background: var(--vy-border-light); margin: 0.4rem 0; }

/* ── Power Tools accordion ────────────────────────────────────────────── */
.vy-power-tools {
  border: 1px solid var(--vy-border-light);
  border-radius: var(--vy-radius-sm);
  overflow: hidden;
  margin-top: 0.35rem;
}
.vy-power-hdr {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.5rem 0.75rem;
  background: var(--vy-surface-alt);
  cursor: pointer; user-select: none;
  transition: background var(--vy-trans-fast);
  border: none; width: 100%; text-align: left;
}
.vy-power-hdr:hover { background: var(--vy-cream); }
.vy-power-hdr-left {
  display: flex; align-items: center; gap: 0.4rem;
  font-size: 0.69rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--vy-text-muted);
}
.vy-power-chevron {
  font-size: 0.7rem; color: var(--vy-text-light);
  transition: transform 0.25s ease;
}
.vy-power-tools.open .vy-power-chevron { transform: rotate(180deg); }
.vy-power-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  background: var(--vy-surface-alt);
  padding: 0 0.35rem;
}
.vy-power-tools.open .vy-power-body { max-height: 280px; padding: 0.3rem 0.35rem 0.5rem; }
.vy-power-divider { height: 1px; background: var(--vy-border); margin: 0.35rem 0.4rem; }

/* ── Filter section groupings ─────────────────────────────────────────── */
.vy-filter-section {
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--vy-text-light);
  padding: 0.65rem 0.1rem 0.3rem;
  display: flex; align-items: center; gap: 0.4rem;
}
.vy-filter-section:first-child { padding-top: 0.1rem; }
.vy-filter-divider { height: 1px; background: var(--vy-border-light); margin: 0.55rem 0; }

/* Region select dim state when no country chosen */
#f-region.vy-dim, #f-region-mobile.vy-dim, select.vy-dim { opacity: 0.4; }
.vy-region-hint {
  font-size: 0.68rem; color: var(--vy-text-light); font-style: italic;
  margin-top: 0.15rem;
}

/* ── Active filter chips ──────────────────────────────────────────────── */
.vy-active-chips {
  display: flex; flex-wrap: wrap; gap: 0.25rem;
  margin-bottom: 0.5rem;
}
.vy-act-chip {
  display: inline-flex; align-items: center; gap: 0.25rem;
  background: rgba(105,25,41,0.08);
  border: 1px solid rgba(105,25,41,0.18);
  border-radius: 4px; padding: 2px 5px 2px 7px;
  font-size: 0.68rem; color: var(--vy-burgundy);
  white-space: nowrap;
}
.vy-act-chip-x {
  cursor: pointer; color: var(--vy-text-muted); font-size: 0.8rem;
  line-height: 1; padding: 0 1px;
  background: none; border: none;
  transition: color var(--vy-trans-fast);
}
.vy-act-chip-x:hover { color: var(--vy-danger); }

/* ── Drinking Window filter chips (sidebar) ───────────────────────────── */
.vy-dw-chips {
  display: flex; flex-wrap: wrap; gap: 0.3rem;
}
.vy-dw-chip {
  display: inline-flex; align-items: center;
  padding: 3px 9px; border-radius: 12px; cursor: pointer;
  font-size: 0.76rem; font-weight: 500; user-select: none;
  border: 1px solid var(--vy-border);
  background: transparent; color: var(--vy-text-secondary);
  transition: var(--vy-trans-fast);
  white-space: nowrap;
}
.vy-dw-chip:hover {
  border-color: var(--vy-burgundy);
  color: var(--vy-burgundy);
  background: var(--vy-burgundy-light);
}
.vy-dw-chip.on {
  background: var(--vy-burgundy);
  border-color: var(--vy-burgundy-dark);
  color: #fff;
  font-weight: 600;
}
.vy-dw-chip.on:hover {
  background: var(--vy-burgundy-mid);
}

/* Compact filter section label spacing */
.vy-filter-section { padding: 0.5rem 0.1rem 0.25rem; }
.vy-filter-section:first-child { padding-top: 0.05rem; }
.vy-filter-divider { margin: 0.45rem 0; }

.vy-modal-content { border: none; border-radius: var(--vy-radius-lg); overflow: hidden; box-shadow: var(--vy-shadow-lg); }
.vy-modal-header { background: var(--vy-dark); color: var(--vy-cream); border-bottom: none; padding: 1.1rem 1.4rem; }
.vy-modal-header .modal-title { font-size: 1rem; font-weight: 600; color: var(--vy-cream); }
.vy-modal-header .btn-close-white { opacity: 0.7; }
.vy-modal-header .btn-close-white:hover { opacity: 1; }

/* Push all Bootstrap modal dialogs below the fixed navbar so they're never clipped */
.modal .modal-dialog { margin-top: calc(var(--vy-navbar-height) + .75rem); }

.vy-search-wrap { position: relative; flex: 1; min-width: 200px; max-width: 380px; }
.vy-search-wrap .bi-search {
  position: absolute; left: 0.8rem; top: 50%; transform: translateY(-50%);
  color: var(--vy-text-muted); font-size: 0.85rem; pointer-events: none;
}
.vy-search-wrap .form-control { padding-left: 2.1rem; border-radius: var(--vy-radius-xl); background: var(--vy-bg); }
.vy-search-wrap .form-control:focus { background: var(--vy-surface); }

/* ══════════════════════════════════════════════════════
   10. ADMIN MOBILE CARD VIEW
   ══════════════════════════════════════════════════════ */
.vy-wine-card-list { display: flex; flex-direction: column; gap: 0.5rem; padding: 0.75rem 0; }
.vy-wine-card {
  background: var(--vy-surface); border: 1px solid var(--vy-border-light);
  border-radius: var(--vy-radius); padding: 1rem 1.1rem;
  box-shadow: var(--vy-shadow-xs); transition: var(--vy-trans); position: relative;
}
.vy-wine-card:hover { box-shadow: var(--vy-shadow); transform: translateX(2px); border-left: 3px solid var(--vy-burgundy); }
.vy-wine-card__check { position: absolute; top: 1rem; right: 1.1rem; }
.vy-wine-card__name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.08rem; font-weight: 600; color: var(--vy-dark);
  padding-right: 2rem; margin-bottom: 0.1rem; line-height: 1.3;
}
.vy-wine-card__vintage { font-size: 0.8rem; color: var(--vy-text-muted); margin-bottom: 0.5rem; }
.vy-wine-card__meta { display: flex; flex-wrap: wrap; gap: 0.35rem 0.9rem; font-size: 0.77rem; color: var(--vy-text-muted); margin-bottom: 0.65rem; }
.vy-wine-card__meta span { display: flex; align-items: center; gap: 0.2rem; }
.vy-wine-card__score { display: inline-block; background: var(--vy-burgundy); color: #fff; border-radius: 20px; padding: 0.12rem 0.6rem; font-size: 0.76rem; font-weight: 600; }
.vy-wine-card__actions { display: flex; gap: 0.4rem; margin-top: 0.7rem; }
.vy-wine-card__actions .btn { font-size: 0.79rem; padding: 0.28rem 0.7rem; }

/* ── Drinking window status badge (cards + modal) ── */
.vy-dw-status {
  display: inline-flex; align-items: center; gap: 0.25rem;
  font-size: 0.73rem; font-weight: 500;
  padding: 0.15rem 0.6rem; border-radius: 20px; border: 1px solid;
  white-space: nowrap;
}
.vy-dw-status.too-young   { background: rgba(220,53,69,0.1);  border-color: rgba(220,53,69,0.35); color: #c0293a; }
.vy-dw-status.approaching { background: rgba(180,140,0,0.1);  border-color: rgba(180,140,0,0.35); color: #957200; }
.vy-dw-status.drink-now   { background: rgba(25,135,84,0.1);  border-color: rgba(25,135,84,0.35); color: #157347; }
.vy-dw-status.past-peak   { background: rgba(90,90,90,0.1);   border-color: rgba(90,90,90,0.35);  color: #5a5a5a; }
.vy-dw-status.declining   { background: rgba(200,100,0,0.1);  border-color: rgba(200,100,0,0.35); color: #c06400; }
.vy-dw-status.likely-gone { background: rgba(105,25,41,0.1);  border-color: rgba(105,25,41,0.35); color: var(--vy-burgundy); }

/* ══════════════════════════════════════════════════════
   11. WINE IMAGE MODAL
   ══════════════════════════════════════════════════════ */
.vy-img-modal {
  display: none; position: fixed; inset: 0;
  background: rgba(18,10,11,0.93);
  justify-content: center; align-items: center;
  z-index: 2000; flex-direction: column;
  backdrop-filter: blur(4px);
}
.vy-img-modal.active { display: flex; }
.vy-img-modal__inner { position: relative; text-align: center; }
.vy-img-modal img { width: 580px; max-width: 86vw; aspect-ratio: 2/3; object-fit: contain; border-radius: var(--vy-radius); box-shadow: 0 0 60px rgba(0,0,0,0.7); }
.vy-img-modal__close { position: absolute; top: -2.25rem; right: -1.25rem; color: rgba(255,255,255,0.7); font-size: 2rem; cursor: pointer; line-height: 1; transition: var(--vy-trans-fast); }
.vy-img-modal__close:hover { color: #fff; transform: scale(1.1); }

/* Wine profile modals — top-aligned on desktop so tab switching doesn't jump */
#vxProfileModal .modal-dialog,
#wineDetailModal .modal-dialog {
  align-items: flex-start !important;
  margin-top: 5vh;
}

.popover { max-width: 130px; border: 1px solid var(--vy-border); border-radius: var(--vy-radius-sm); padding: 4px; }
.popover-image { width: 110px; aspect-ratio: 2/3; border-radius: var(--vy-radius-xs); display: block; margin: auto; object-fit: cover; }
.image-ribbon { display: flex; gap: 8px; justify-content: center; margin-top: 12px; overflow-x: auto; padding: 6px; }
.ribbon-thumb { width: 58px; aspect-ratio: 2/3; object-fit: cover; border-radius: var(--vy-radius-xs); opacity: 0.65; cursor: pointer; transition: var(--vy-trans); border: 2px solid transparent; }
.ribbon-thumb:hover, .ribbon-thumb.active-thumb { opacity: 1; transform: scale(1.06); border-color: var(--vy-gold); }

/* ══════════════════════════════════════════════════════
   12. AI ASSISTANT BUBBLE
   ══════════════════════════════════════════════════════ */
.vy-ai-bubble {
  position: fixed; bottom: 28px; right: 28px;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--vy-surface); border: 2px solid var(--vy-gold);
  box-shadow: var(--vy-shadow-md);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; z-index: 1030; transition: var(--vy-trans);
}
.vy-ai-bubble:hover { transform: scale(1.1) rotate(-5deg); box-shadow: var(--vy-shadow-lg); border-color: var(--vy-burgundy); }

/* ══════════════════════════════════════════════════════
   13. BADGES & SCORE CHIPS
   ══════════════════════════════════════════════════════ */
.vy-badge { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.25em 0.7em; border-radius: 20px; font-size: 0.74rem; font-weight: 600; letter-spacing: 0.02em; }
.vy-badge-success  { background: rgba(26,122,69,0.12); color: var(--vy-success); }
.vy-badge-warning  { background: rgba(196,123,0,0.12); color: var(--vy-warning); }
.vy-badge-muted    { background: var(--vy-surface-alt); color: var(--vy-text-muted); }
.vy-badge-burgundy { background: var(--vy-burgundy-light); color: var(--vy-burgundy); }

.score-excellent { color: var(--vy-success); font-weight: 600; }
.score-good      { color: #1a6b5a; font-weight: 500; }
.score-average   { color: var(--vy-text-muted); }

.vy-type-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 4px; }
.vy-type-dot--red   { background: #7B1D2E; }
.vy-type-dot--white { background: #C9B96A; border: 1px solid #9A8D4A; }
.vy-type-dot--rose  { background: #E8A0A0; }
.vy-type-dot--spark { background: #C7A97B; }

/* ══════════════════════════════════════════════════════
   14. PUBLIC PAGES
   ══════════════════════════════════════════════════════ */

/* Hero */
.vy-hero {
  position: relative; width: 100%; min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; background: var(--vy-dark);
}
.vy-hero__bg { position: absolute; inset: 0; object-fit: cover; width: 100%; height: 100%; opacity: 0.5; transform: scale(1.02); }
.vy-hero__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(160deg, rgba(18,10,11,0.55) 0%, rgba(105,25,41,0.20) 50%, rgba(18,10,11,0.75) 100%);
}
.vy-hero__content { position: relative; z-index: 2; text-align: center; color: #fff; padding: 2rem 1.5rem; max-width: 720px; }
.vy-hero__eyebrow {
  display: inline-block; font-size: 0.75rem; font-weight: 600;
  letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--vy-gold-light); margin-bottom: 1.1rem; opacity: 0.9;
}
.vy-hero__title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(3rem, 7.5vw, 5.2rem); font-weight: 600;
  line-height: 1.06; margin-bottom: 1.25rem;
  text-shadow: 0 2px 20px rgba(0,0,0,0.35);
}
.vy-hero__sub {
  font-size: clamp(1rem, 2.5vw, 1.15rem); font-weight: 300;
  opacity: 0.88; margin-bottom: 2.5rem; max-width: 540px;
  margin-left: auto; margin-right: auto; line-height: 1.75;
}
.vy-hero__actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.vy-hero__actions .btn { min-width: 148px; padding: 0.8rem 2rem; font-size: 0.95rem; }

.vy-hero__scroll {
  position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%);
  z-index: 2; color: rgba(255,255,255,0.45); font-size: 0.7rem;
  letter-spacing: 0.1em; text-transform: uppercase; text-align: center;
  animation: vy-bounce 2.4s infinite;
}
@keyframes vy-bounce {
  0%, 100% { transform: translateX(-50%) translateY(0); opacity: 0.45; }
  50%       { transform: translateX(-50%) translateY(7px); opacity: 0.7; }
}

/* Stats strip */
.vy-stats-strip { background: var(--vy-dark); padding: 1.75rem 0; }
.vy-stats-strip__item { text-align: center; padding: 0 1.5rem; border-right: 1px solid rgba(255,255,255,0.07); }
.vy-stats-strip__item:last-child { border-right: none; }
.vy-stats-strip__num { font-family: 'Cormorant Garamond', serif; font-size: 2.4rem; font-weight: 600; color: var(--vy-gold); line-height: 1; display: block; }
.vy-stats-strip__label { font-size: 0.73rem; color: rgba(255,255,255,0.4); letter-spacing: 0.07em; text-transform: uppercase; margin-top: 0.3rem; display: block; }

/* How it works steps */
.vy-step { display: flex; gap: 1.25rem; align-items: flex-start; margin-bottom: 2rem; }
.vy-step__num {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%;
  background: var(--vy-burgundy); color: #fff;
  font-family: 'Cormorant Garamond', serif; font-size: 1.2rem; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
}
.vy-step__title { font-weight: 600; font-size: 1rem; margin-bottom: 0.25rem; }
.vy-step__desc  { font-size: 0.9rem; color: var(--vy-text-muted); }

/* Membership cards */
.vy-membership-card {
  border: 1.5px solid var(--vy-border); border-radius: var(--vy-radius-lg);
  padding: 2.25rem 1.75rem; text-align: center;
  background: var(--vy-surface); box-shadow: var(--vy-shadow-sm);
  transition: var(--vy-trans); height: 100%;
}
.vy-membership-card:hover { box-shadow: var(--vy-shadow-md); transform: translateY(-4px); border-color: var(--vy-burgundy); }
.vy-membership-card.featured { border-color: var(--vy-burgundy); background: linear-gradient(160deg, var(--vy-cream-light), var(--vy-surface)); box-shadow: var(--vy-shadow-md); }
.vy-plan-tag { display: inline-block; background: var(--vy-burgundy); color: #fff; font-size: 0.69rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.2em 0.8em; border-radius: 20px; margin-bottom: 1rem; }
.vy-price { font-family: 'Cormorant Garamond', serif; font-size: 3rem; font-weight: 600; color: var(--vy-burgundy); line-height: 1; }
.vy-price-period { font-size: 0.85rem; color: var(--vy-text-muted); }
.vy-plan-feature { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: var(--vy-text-secondary); margin: 0.5rem 0; text-align: left; }
.vy-plan-feature i { color: var(--vy-success); flex-shrink: 0; }

/* Section layouts */
.vy-section { padding: 5rem 0; }
.vy-section--alt { background: var(--vy-cream-light); }
.vy-section__eyebrow { display: inline-block; font-size: 0.73rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--vy-burgundy); margin-bottom: 0.75rem; }
.vy-section__sub { color: var(--vy-text-muted); font-size: 1rem; max-width: 540px; }

/* Divider */
.vy-divider { height: 2px; background: linear-gradient(90deg, var(--vy-burgundy) 0%, var(--vy-gold) 50%, transparent 100%); border: none; border-radius: 2px; margin: 2rem 0; max-width: 100px; }
.vy-divider--center { margin-left: auto; margin-right: auto; }

/* Stories */
.vy-stories-hero { background: var(--vy-cream-light); padding: 4rem 1rem 3rem; text-align: center; }

/* About */
.vy-about-section { padding: 4rem 0; }
.vy-about-img { border-radius: var(--vy-radius-lg); width: 100%; object-fit: cover; max-height: 420px; box-shadow: var(--vy-shadow-md); }

/* ══════════════════════════════════════════════════════
   15. AUTH PAGES
   ══════════════════════════════════════════════════════ */
.vy-auth-wrap { min-height: 100vh; display: grid; grid-template-columns: 1fr; }
@media (min-width: 768px) { .vy-auth-wrap { grid-template-columns: 55% 45%; } }

.vy-auth-hero {
  position: relative; overflow: hidden;
  background: var(--vy-dark) url('../images/hero_wine.jpg') center/cover no-repeat;
  min-height: 300px;
}
.vy-auth-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(18,10,11,0.45) 0%, rgba(105,25,41,0.30) 50%, rgba(18,10,11,0.75) 100%); }
.vy-auth-hero-inner {
  position: relative; z-index: 1; color: #fff;
  padding: 3.5rem 3rem; display: flex;
  flex-direction: column; justify-content: flex-end; height: 100%; min-height: 100vh;
}
.vy-auth-hero-inner h2 { font-family: 'Cormorant Garamond', serif; font-size: 2.6rem; font-weight: 600; margin-bottom: 0.75rem; line-height: 1.12; }
.vy-auth-hero-inner p { opacity: 0.82; font-size: 1rem; line-height: 1.65; margin-bottom: 0; }

.vy-auth-features { list-style: none; padding: 0; margin: 2rem 0 0; }
.vy-auth-features li { display: flex; align-items: center; gap: 0.7rem; font-size: 0.9rem; opacity: 0.85; margin-bottom: 0.7rem; }
.vy-auth-features li .vy-af-icon {
  width: 22px; height: 22px; background: rgba(199,169,123,0.22); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.7rem; color: var(--vy-gold-light); flex-shrink: 0;
}

.vy-auth-form-side {
  display: flex; flex-direction: column; justify-content: center;
  padding: 4rem 3.5rem; background: var(--vy-surface);
}
@media (max-width: 767px) { .vy-auth-form-side { padding: 2.5rem 1.75rem; } }
.vy-auth-logo { height: 42px; margin-bottom: 2.75rem; }
.vy-auth-title { font-family: 'Cormorant Garamond', serif; font-size: 2.1rem; font-weight: 600; margin-bottom: 0.25rem; color: var(--vy-dark); }
.vy-auth-sub { color: var(--vy-text-muted); font-size: 0.9rem; margin-bottom: 2rem; }
.vy-auth-form-side .form-control { background: var(--vy-bg); border-color: var(--vy-border); padding: 0.65rem 0.9rem; }
.vy-auth-form-side .form-control:focus { background: var(--vy-surface); }

/* ══════════════════════════════════════════════════════
   16. DASHBOARD
   ══════════════════════════════════════════════════════ */
.vy-dashboard { padding: 2.5rem 0; }

.vy-greeting { padding: 0 0 2rem; border-bottom: 1px solid var(--vy-border-light); margin-bottom: 2rem; }
.vy-greeting__time { font-size: 0.75rem; letter-spacing: 0.07em; text-transform: uppercase; color: var(--vy-text-muted); margin-bottom: 0.35rem; }
.vy-greeting__name { font-family: 'Cormorant Garamond', serif; font-size: 2.2rem; font-weight: 600; color: var(--vy-dark); line-height: 1.2; }

.vy-stat-card {
  text-align: center; padding: 2rem 1.5rem;
  border: 1px solid var(--vy-border-light); border-radius: var(--vy-radius-lg) !important;
  background: var(--vy-surface); box-shadow: var(--vy-shadow-sm);
  transition: var(--vy-trans); height: 100%;
  display: flex; flex-direction: column; align-items: center;
}
.vy-stat-card:hover { box-shadow: var(--vy-shadow); transform: translateY(-2px); }
.vy-stat-icon {
  width: 52px; height: 52px; border-radius: var(--vy-radius);
  background: var(--vy-burgundy-light); color: var(--vy-burgundy);
  font-size: 1.4rem; display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem;
}
.vy-stat-num { font-family: 'Cormorant Garamond', serif; font-size: 3.2rem; font-weight: 600; color: var(--vy-burgundy); line-height: 1; margin-bottom: 0.3rem; }
.vy-stat-label { font-size: 0.76rem; color: var(--vy-text-muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 1.25rem; }

.vy-ai-card {
  background: linear-gradient(135deg, #120A0B 0%, #2a1010 100%);
  border: 1px solid rgba(199,169,123,0.18) !important;
  border-radius: var(--vy-radius-lg) !important;
  overflow: hidden; position: relative;
}
.vy-ai-card::before { content: ''; position: absolute; top: -30px; right: -30px; width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(circle, rgba(199,169,123,0.1), transparent); }

.vy-recent-table th { font-size: 0.76rem; }
.vy-recent-table td { font-size: 0.85rem; }

/* ══════════════════════════════════════════════════════
   17. PAGINATION
   ══════════════════════════════════════════════════════ */
.pagination { gap: 0.2rem; }
.pagination .page-link { color: var(--vy-text-secondary); border-color: var(--vy-border); border-radius: var(--vy-radius-sm) !important; font-size: 0.84rem; padding: 0.4rem 0.75rem; transition: var(--vy-trans-fast); }
.pagination .page-link:hover { background: var(--vy-cream); border-color: var(--vy-burgundy); color: var(--vy-burgundy); }
.pagination .page-item.active .page-link { background: var(--vy-burgundy); border-color: var(--vy-burgundy); color: #fff; box-shadow: var(--vy-shadow-burgundy); }
.pagination .page-item.disabled .page-link { color: var(--vy-text-light); }

/* ══════════════════════════════════════════════════════
   18. ANIMATIONS & UTILITIES
   ══════════════════════════════════════════════════════ */
@keyframes vy-fade-up {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
.vy-fade-up   { animation: vy-fade-up 0.5s ease both; }
.vy-fade-up--1 { animation-delay: 0.06s; }
.vy-fade-up--2 { animation-delay: 0.14s; }
.vy-fade-up--3 { animation-delay: 0.22s; }
.vy-fade-up--4 { animation-delay: 0.30s; }

.vy-filter-chip { display: inline-flex; align-items: center; gap: 0.3rem; background: var(--vy-surface); border: 1.5px solid var(--vy-burgundy); color: var(--vy-burgundy); border-radius: 20px; padding: 0.22rem 0.75rem; font-size: 0.78rem; font-weight: 500; cursor: pointer; transition: var(--vy-trans-fast); text-decoration: none; }
.vy-filter-chip:hover { background: var(--vy-burgundy); color: #fff; }

.selectable-thumb { border: 2px solid transparent; transition: var(--vy-trans-fast); cursor: pointer; }
.selectable-thumb:hover { border-color: var(--vy-burgundy); }
.active-thumb { border-color: var(--vy-gold) !important; }

.text-burgundy   { color: var(--vy-burgundy) !important; }
.bg-burgundy     { background-color: var(--vy-burgundy) !important; }
.text-gold       { color: var(--vy-gold) !important; }
.text-cream      { color: var(--vy-cream) !important; }
.bg-cream        { background-color: var(--vy-cream-light) !important; }
.border-burgundy { border-color: var(--vy-burgundy) !important; }
.bg-dark-wine    { background-color: var(--vy-dark) !important; }

.vy-hr { border: none; border-top: 1px solid var(--vy-border-light); margin: 1.5rem 0; }

/* bg-cream alias for Jinja templates */
.bg-cream-light { background-color: var(--vy-cream-light) !important; }

/* ────────────────────────────────────────────────────────
   22. Structured Tasting Profile
   ──────────────────────────────────────────────────────── */
.tp-range {
  height: 6px;
  border-radius: 3px;
  -webkit-appearance: none;
  appearance: none;
  outline: none;
}
.tp-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--vy-gold, #c9a96e);
  border: 2px solid #1e1414;
  cursor: pointer;
  box-shadow: 0 0 4px rgba(201,169,110,.4);
  transition: transform .15s ease;
}
.tp-range::-webkit-slider-thumb:hover {
  transform: scale(1.15);
  box-shadow: 0 0 8px rgba(201,169,110,.6);
}
.tp-range::-moz-range-thumb {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--vy-gold, #c9a96e);
  border: 2px solid #1e1414;
  cursor: pointer;
}
.tp-slider-row {
  transition: background .2s ease;
  padding: .4rem .5rem;
  border-radius: .3rem;
}
.tp-slider-row:hover {
  background: rgba(201,169,110,.04);
}

/* Mini radar container in wine detail */
#tastingProfileModal .modal-content {
  max-height: 85vh;
}
#tastingProfileModal .modal-body {
  overflow-y: auto;
}