/* ====================================================
   VEGETABLE NAME WHEEL — Child-Friendly Green Theme
   TheWheelOfName.com
   ==================================================== */
:root {
  --vw-green:    #2D7D46;
  --vw-green-d:  #1F5C33;
  --vw-green-l:  #D1F0DA;
  --vw-lime:     #5CB85C;
  --vw-orange:   #F5A623;
  --vw-orange-l: #FEF3DC;
  --vw-red:      #E53E3E;
  --vw-purple:   #805AD5;
  --vw-yellow:   #ECC94B;
  --vw-bg:       #F2F8F4;
  --vw-white:    #FFFFFF;
  --vw-g50:      #F9FAFB;
  --vw-g100:     #F3F4F6;
  --vw-g200:     #E5E7EB;
  --vw-g400:     #9CA3AF;
  --vw-g600:     #4B5563;
  --vw-g700:     #374151;
  --vw-g800:     #1A2E1F;
  --vw-r:        16px;
  --vw-sh-sm:    0 1px 4px rgba(0,0,0,.06);
  --vw-sh-md:    0 4px 18px rgba(0,0,0,.1);
  --vw-sh-lg:    0 10px 40px rgba(0,0,0,.14);
  --vw-font:     'Nunito','Quicksand',sans-serif;
}
*,*::before,*::after { box-sizing: border-box; margin: 0; padding: 0; }
body.vw-page { font-family: var(--vw-font); background: var(--vw-bg); color: var(--vw-g800); min-height: 100vh; }

/* ── NAV ───────────────────────────────────────── */
.vw-nav { position: sticky; top: 0; z-index: 200; background: var(--vw-white); border-bottom: 1px solid var(--vw-g200); box-shadow: var(--vw-sh-sm); }
.vw-nav-inner { max-width: 1440px; margin: 0 auto; display: flex; align-items: center; gap: 1rem; padding: 0 1.5rem; height: 64px; }
.vw-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; }
.vw-logo-icon { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, #2D7D46, #5CB85C); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; flex-shrink: 0; }
.vw-logo-text { font-weight: 900; font-size: 1.1rem; color: var(--vw-g800); line-height: 1; }
.vw-logo-text span { color: var(--vw-green); }
.vw-nav-links { display: flex; gap: 2px; flex: 1; flex-wrap: wrap; }
.vw-nav-links a { font-size: .85rem; font-weight: 600; color: var(--vw-g600); text-decoration: none; padding: .4rem .85rem; border-radius: 8px; transition: background .15s, color .15s; white-space: nowrap; }
.vw-nav-links a:hover { background: var(--vw-g100); color: var(--vw-g800); }
.vw-nav-links a.active { color: var(--vw-green); background: var(--vw-green-l); }
.vw-nav-drop { position: relative; }
.vw-nav-drop > a { display: flex; align-items: center; gap: 3px; }
.vw-drop-menu { position: absolute; top: calc(100% + 4px); left: 0; background: var(--vw-white); border: 1px solid var(--vw-g200); border-radius: 12px; box-shadow: var(--vw-sh-lg); min-width: 190px; padding: 6px 0; z-index: 300; opacity: 0; pointer-events: none; transform: translateY(-8px); transition: opacity .18s, transform .18s; }
.vw-nav-drop:hover .vw-drop-menu { opacity: 1; pointer-events: all; transform: translateY(0); }
.vw-drop-menu a { display: flex; align-items: center; gap: 8px; padding: 8px 14px; font-size: .85rem; font-weight: 600; color: var(--vw-g600); text-decoration: none; transition: background .12s; }
.vw-drop-menu a:hover { background: var(--vw-green-l); color: var(--vw-green); }

/* ── HERO ───────────────────────────────────────── */
.vw-hero { background: linear-gradient(135deg, #0a3d1a 0%, #2D7D46 50%, #5CB85C 100%); padding: 3.5rem 1.5rem 3rem; text-align: center; position: relative; overflow: hidden; }
.vw-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 20% 80%, rgba(245,166,35,.15), transparent 50%), radial-gradient(ellipse at 80% 20%, rgba(255,255,255,.08), transparent 50%); pointer-events: none; }
.vw-hero-vegs { font-size: 1.8rem; letter-spacing: .4rem; margin-bottom: .75rem; opacity: .85; position: relative; }
.vw-hero h1 { font-size: clamp(2rem, 5vw, 3.4rem); font-weight: 900; color: #fff; margin-bottom: .6rem; position: relative; }
.vw-hero p { font-size: 1rem; color: rgba(255,255,255,.85); max-width: 680px; margin: 0 auto 2rem; line-height: 1.7; position: relative; }
.vw-hero-btns { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; position: relative; }
.vw-hero-btn { display: inline-flex; align-items: center; gap: 8px; padding: .75rem 1.75rem; border-radius: 12px; font-size: .95rem; font-weight: 800; border: none; cursor: pointer; transition: all .2s; text-decoration: none; font-family: var(--vw-font); }
.vw-hero-btn.primary { background: white; color: var(--vw-green-d); box-shadow: 0 4px 14px rgba(0,0,0,.2); }
.vw-hero-btn.primary:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.25); }
.vw-hero-btn.ghost { background: rgba(255,255,255,.15); color: white; border: 1.5px solid rgba(255,255,255,.35); backdrop-filter: blur(6px); }
.vw-hero-btn.ghost:hover { background: rgba(255,255,255,.25); }

/* ── 3-COL LAYOUT ───────────────────────────────── */
.vw-layout { max-width: 1440px; margin: 0 auto; display: grid; grid-template-columns: 260px 1fr 280px; gap: 1.25rem; padding: 1.5rem; align-items: start; }

/* ── PANELS ─────────────────────────────────────── */
.vw-panel { background: var(--vw-white); border-radius: var(--vw-r); box-shadow: var(--vw-sh-sm); border: 1px solid var(--vw-g200); overflow: hidden; margin-bottom: 1rem; }
.vw-panel-title { font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .7px; color: var(--vw-g400); padding: .9rem 1.1rem .5rem; border-bottom: 1px solid var(--vw-g100); }
.vw-panel-body { padding: 1rem 1.1rem; }
.vw-divider { border: none; border-top: 1px solid var(--vw-g100); margin: .6rem 0; }

/* Search */
.vw-search { width: 100%; border: 1.5px solid var(--vw-g200); border-radius: 10px; padding: .5rem .8rem; font-size: .88rem; font-weight: 600; font-family: var(--vw-font); color: var(--vw-g800); background: var(--vw-white); outline: none; transition: border-color .15s; margin-bottom: .7rem; }
.vw-search:focus { border-color: var(--vw-green); box-shadow: 0 0 0 3px rgba(45,125,70,.1); }

/* Count label */
.vw-count-label { font-size: .78rem; color: var(--vw-g400); font-weight: 700; text-align: right; margin-bottom: .5rem; }

/* Category chips */
.vw-cat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; margin-bottom: .75rem; }
.vw-cat-chip { display: flex; align-items: center; gap: 5px; padding: .35rem .6rem; border-radius: 8px; cursor: pointer; font-size: .77rem; font-weight: 700; border: 1.5px solid var(--vw-g200); background: var(--vw-g50); transition: all .15s; user-select: none; }
.vw-cat-chip:hover { border-color: var(--vw-green); background: var(--vw-green-l); }
.vw-cat-chip input[type=checkbox] { width: 13px; height: 13px; accent-color: var(--vw-green); cursor: pointer; flex-shrink: 0; }
.vw-cat-chip.active { border-color: var(--vw-green); background: var(--vw-green-l); color: var(--vw-green-d); }

/* Toggles */
.vw-toggle-row { background: linear-gradient(135deg, var(--vw-green-l), #e0f2e7); border-radius: 12px; padding: .85rem; margin-bottom: .7rem; display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.vw-toggle-row .tr-label { font-size: .82rem; font-weight: 800; color: var(--vw-green-d); }
.vw-toggle-row .tr-sub { font-size: .72rem; color: var(--vw-g600); }
.vw-toggle { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; }
.vw-toggle input { opacity: 0; width: 0; height: 0; }
.vw-toggle-sl { position: absolute; inset: 0; border-radius: 24px; background: var(--vw-g200); cursor: pointer; transition: background .2s; }
.vw-toggle-sl::before { content: ''; position: absolute; width: 18px; height: 18px; border-radius: 50%; background: white; left: 3px; top: 3px; transition: transform .2s; box-shadow: var(--vw-sh-sm); }
.vw-toggle input:checked + .vw-toggle-sl { background: var(--vw-green); }
.vw-toggle input:checked + .vw-toggle-sl::before { transform: translateX(20px); }

/* Apply button */
.vw-apply-btn { width: 100%; margin-top: .4rem; padding: .6rem; border-radius: 10px; background: linear-gradient(135deg, var(--vw-green), var(--vw-lime)); color: white; font-size: .88rem; font-weight: 800; border: none; cursor: pointer; font-family: var(--vw-font); transition: all .2s; }
.vw-apply-btn:hover { transform: translateY(-1px); box-shadow: var(--vw-sh-md); }

/* ── CENTER / WHEEL ─────────────────────────────── */
.vw-center { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.vw-wheel-section { position: relative; }
.vw-wheel-wrap { position: relative; display: flex; align-items: center; justify-content: center; }

/* Floating action buttons — horizontal row below spin button */
.vw-fab-group { display: flex; flex-direction: row; gap: .75rem; justify-content: center; }
.vw-fab { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--vw-g200); background: var(--vw-white); color: var(--vw-g600); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: var(--vw-sh-sm); transition: transform .15s, color .15s, box-shadow .15s; }
.vw-fab:hover { transform: translateY(-2px) scale(1.06); color: var(--vw-green); box-shadow: var(--vw-sh-md); }
.vw-fab[aria-pressed="false"] { color: var(--vw-g400); opacity: .6; }

/* Fullscreen — canvas fills the screen */
#vw-wheel-section:fullscreen,
#vw-wheel-section:-webkit-full-screen {
  display: flex; align-items: center; justify-content: center;
  background: #0a3d1a; width: 100%; height: 100%;
}
#vw-wheel-section:fullscreen .vw-winner-overlay,
#vw-wheel-section:-webkit-full-screen .vw-winner-overlay { border-radius: 0; }
.vw-wheel-canvas { border-radius: 50%; display: block; filter: drop-shadow(0 8px 32px rgba(45,125,70,.28)); cursor: pointer; }
.vw-needle { position: absolute; top: -8px; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 12px solid transparent; border-right: 12px solid transparent; border-top: 28px solid var(--vw-red); filter: drop-shadow(0 2px 4px rgba(229,62,62,.5)); z-index: 10; pointer-events: none; }
.vw-spin-btn { margin-top: .5rem; padding: .9rem 3.5rem; background: linear-gradient(135deg, var(--vw-green), var(--vw-lime)); color: white; font-size: 1.15rem; font-weight: 900; border: none; border-radius: 40px; cursor: pointer; box-shadow: 0 6px 20px rgba(45,125,70,.4); transition: all .2s; font-family: var(--vw-font); letter-spacing: .5px; }
.vw-spin-btn:hover:not(:disabled) { transform: translateY(-2px) scale(1.03); box-shadow: 0 10px 28px rgba(45,125,70,.5); }
.vw-spin-btn:disabled { opacity: .55; cursor: not-allowed; }
.vw-wheel-actions { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: center; }
.vw-wh-btn { padding: .45rem 1rem; border: 1.5px solid var(--vw-g200); border-radius: 10px; font-size: .83rem; font-weight: 700; font-family: var(--vw-font); background: var(--vw-white); color: var(--vw-g600); cursor: pointer; transition: all .15s; }
.vw-wh-btn:hover { border-color: var(--vw-green); color: var(--vw-green); background: var(--vw-green-l); }

/* Winner overlay */
.vw-winner-overlay { position: absolute; inset: 0; background: rgba(10,61,26,.6); backdrop-filter: blur(4px); display: none; align-items: center; justify-content: center; z-index: 50; border-radius: 20px; }
.vw-winner-overlay.visible { display: flex; }
.vw-winner-card { background: var(--vw-white); border-radius: 20px; box-shadow: 0 20px 60px rgba(0,0,0,.25); padding: 1.75rem; text-align: center; max-width: 340px; width: 90%; animation: vw-pop .4s cubic-bezier(.34,1.56,.64,1) both; max-height: 90vh; overflow-y: auto; }
@keyframes vw-pop { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.wc-emoji { font-size: 3.5rem; line-height: 1; margin-bottom: .4rem; }
.wc-winner-label { font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 1.2px; color: var(--vw-g400); margin-bottom: .25rem; }
.wc-name { font-size: 2rem; font-weight: 900; color: var(--vw-green); line-height: 1.2; margin-bottom: .4rem; }
.wc-category { display: inline-block; padding: .2rem .75rem; border-radius: 20px; font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; margin-bottom: .6rem; }
.wc-fact { font-size: .86rem; color: var(--vw-g600); line-height: 1.5; margin: .5rem 0; padding: .7rem; background: var(--vw-green-l); border-radius: 10px; text-align: left; }
.wc-nutrition { font-size: .8rem; font-weight: 700; color: var(--vw-orange); margin-bottom: .7rem; }
.wc-actions { display: flex; gap: .4rem; flex-wrap: wrap; justify-content: center; }
.wc-btn { padding: .4rem .9rem; border-radius: 10px; font-size: .8rem; font-weight: 800; border: none; cursor: pointer; font-family: var(--vw-font); transition: all .15s; }
.wc-btn.spin-again { background: linear-gradient(135deg, var(--vw-green), var(--vw-lime)); color: white; }
.wc-btn.speak-btn { background: var(--vw-orange-l); color: #b45309; border: 1.5px solid #f59e0b; }
.wc-btn.quiz-btn { background: #EDE9FE; color: #6C4DF6; border: 1.5px solid #a78bfa; }
.wc-btn.remove-btn { background: var(--vw-g100); color: var(--vw-g600); }
.wc-btn.close-btn { background: var(--vw-g100); color: var(--vw-g600); }
.wc-btn:hover { opacity: .85; transform: translateY(-1px); }

/* Quiz panel (inside winner card) */
.vw-quiz-panel { display: none; margin-top: .75rem; padding: .75rem; background: #faf7ff; border: 1.5px solid #d6bcfa; border-radius: 12px; }
.vw-quiz-q { font-size: .86rem; font-weight: 800; color: var(--vw-g800); margin-bottom: .5rem; text-align: left; }
.vw-quiz-opts { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; }
.vq-opt { padding: .4rem .5rem; border-radius: 8px; border: 1.5px solid var(--vw-g200); background: var(--vw-white); cursor: pointer; font-size: .8rem; font-weight: 700; font-family: var(--vw-font); transition: all .15s; text-align: center; }
.vq-opt:hover:not(:disabled) { border-color: #805AD5; background: #EDE9FE; color: #5B21B6; }
.vq-opt.correct { background: var(--vw-green-l); border-color: var(--vw-green); color: var(--vw-green-d); }
.vq-opt.wrong { background: #fff5f5; border-color: var(--vw-red); color: #b91c1c; }
.vq-opt:disabled { cursor: default; }

/* ── RIGHT PANEL ────────────────────────────────── */
.vw-learn-empty { text-align: center; color: var(--vw-g400); font-size: .85rem; padding: 1.5rem .5rem; line-height: 1.6; }
.vw-learn-emoji { font-size: 2.8rem; margin-bottom: .4rem; }
.vw-learn-name { font-size: 1.2rem; font-weight: 900; color: var(--vw-green); margin-bottom: .3rem; }
.vw-learn-badge { display: inline-block; padding: .2rem .7rem; border-radius: 20px; font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; margin-bottom: .75rem; }
.vw-lr { display: flex; align-items: flex-start; gap: .6rem; padding: .5rem 0; border-bottom: 1px solid var(--vw-g100); font-size: .83rem; }
.vw-lr:last-child { border-bottom: none; }
.vw-lr-key { font-weight: 800; color: var(--vw-g600); min-width: 82px; flex-shrink: 0; }
.vw-lr-val { color: var(--vw-g800); line-height: 1.4; }

/* Progress */
.vw-progress-bar-wrap { background: var(--vw-g100); border-radius: 8px; height: 8px; overflow: hidden; margin: .5rem 0; }
.vw-progress-bar { height: 100%; width: 0%; background: linear-gradient(90deg, var(--vw-green), var(--vw-lime)); border-radius: 8px; transition: width .5s ease; }
.vw-progress-stats { display: flex; justify-content: space-between; font-size: .75rem; font-weight: 700; color: var(--vw-g600); }

/* Daily Vegetable */
.vw-daily-card { background: linear-gradient(135deg, #1F5C33, #2D7D46); border-radius: 14px; padding: 1rem; color: white; margin-bottom: 1rem; text-align: center; }
.vw-daily-label { font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; opacity: .75; margin-bottom: .3rem; }
.vw-daily-emoji { font-size: 2.2rem; margin-bottom: .2rem; }
.vw-daily-name { font-size: 1.05rem; font-weight: 900; margin-bottom: .3rem; }
.vw-daily-fact { font-size: .76rem; opacity: .85; line-height: 1.4; }

/* History */
.vw-history-list { max-height: 200px; overflow-y: auto; }
.vw-hist-item { display: flex; align-items: center; gap: .6rem; padding: .35rem .5rem; border-radius: 8px; font-size: .82rem; font-weight: 700; }
.vw-hist-item:nth-child(odd) { background: var(--vw-g50); }
.vw-hist-emoji { font-size: 1.1rem; flex-shrink: 0; }
.vw-hist-name { flex: 1; color: var(--vw-g800); }
.vw-hist-cat { font-size: .68rem; padding: .1rem .4rem; border-radius: 6px; }

/* ── TOAST ──────────────────────────────────────── */
.vw-toast { position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%); background: var(--vw-green); color: white; padding: .65rem 1.5rem; border-radius: 40px; font-size: .88rem; font-weight: 800; box-shadow: var(--vw-sh-lg); opacity: 0; transition: opacity .25s; z-index: 9999; pointer-events: none; white-space: nowrap; }
.vw-toast.show { opacity: 1; }

/* ── CONTENT SECTIONS ───────────────────────────── */
.vw-content { max-width: 1440px; margin: 0 auto; padding: 0 1.5rem 3rem; }
.vw-section { margin-bottom: 3rem; }
.vw-section-title { font-size: 1.5rem; font-weight: 900; color: var(--vw-g800); margin-bottom: .5rem; }
.vw-section-sub { color: var(--vw-g600); margin-bottom: 1.5rem; line-height: 1.6; font-size: .95rem; }
.vw-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; }
.vw-card { background: var(--vw-white); border-radius: 14px; padding: 1.25rem; box-shadow: var(--vw-sh-sm); border: 1px solid var(--vw-g200); }
.vw-card-icon { font-size: 2rem; margin-bottom: .5rem; }
.vw-card-title { font-size: 1rem; font-weight: 800; color: var(--vw-green); margin-bottom: .4rem; }
.vw-card-body { font-size: .85rem; color: var(--vw-g600); line-height: 1.55; }

/* Category badge colours */
.cat-leafy   { background: #d1fae5; color: #065f46; }
.cat-root    { background: #fed7aa; color: #7c2d12; }
.cat-fruiting{ background: #fee2e2; color: #991b1b; }
.cat-bulb    { background: #ede9fe; color: #4c1d95; }
.cat-stem    { background: #e0f2fe; color: #0c4a6e; }
.cat-flower  { background: #fef9c3; color: #713f12; }

/* FAQ */
.vw-faq-list { display: flex; flex-direction: column; gap: .75rem; }
.vw-faq-item { background: var(--vw-white); border: 1px solid var(--vw-g200); border-radius: 12px; overflow: hidden; }
.vw-faq-q { padding: 1rem 1.25rem; font-weight: 800; cursor: pointer; display: flex; justify-content: space-between; align-items: center; font-size: .95rem; gap: .5rem; }
.vw-faq-q:hover { background: var(--vw-g50); }
.vw-faq-icon { font-size: 1.1rem; color: var(--vw-g400); transition: transform .2s; flex-shrink: 0; }
.vw-faq-item.open .vw-faq-icon { transform: rotate(45deg); }
.vw-faq-a { padding: 0 1.25rem; max-height: 0; overflow: hidden; transition: max-height .3s, padding .3s; font-size: .9rem; color: var(--vw-g600); line-height: 1.6; }
.vw-faq-item.open .vw-faq-a { max-height: 600px; padding: .75rem 1.25rem 1rem; }

/* ── VEGETABLE REFERENCE GRID ───────────────────────────── */
.vw-veg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.25rem; }
.vw-veg-cat-block { background: var(--vw-white); border: 1px solid var(--vw-g200); border-radius: 14px; padding: 1.25rem 1.4rem; box-shadow: var(--vw-sh-sm); }
.vw-veg-cat-title { font-size: 1.05rem; font-weight: 900; margin: 0 0 .6rem; }
.vw-veg-cat-desc { font-size: .82rem; color: var(--vw-g500); line-height: 1.6; margin: 0 0 .75rem; }
.vw-veg-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .5rem; }
.vw-veg-list li { font-size: .83rem; color: var(--vw-g700); line-height: 1.5; padding: .4rem .6rem; background: var(--vw-g50); border-radius: 8px; }
.vw-veg-list li strong { color: var(--vw-g800); }

/* ── RELATED TOOLS SECTION ──────────────────────────────── */
.vw-related-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; }
.vw-related-card { background: var(--vw-white); border: 1px solid var(--vw-g200); border-radius: 14px; padding: 1.25rem; text-decoration: none; color: inherit; box-shadow: var(--vw-sh-sm); transition: transform .15s, box-shadow .15s; display: flex; flex-direction: column; align-items: center; text-align: center; gap: .5rem; }
.vw-related-card:hover { transform: translateY(-3px); box-shadow: var(--vw-sh-lg); }
.vw-related-card-icon { font-size: 2.2rem; }
.vw-related-card-title { font-size: .95rem; font-weight: 800; color: var(--vw-green); }
.vw-related-card-desc { font-size: .78rem; color: var(--vw-g500); line-height: 1.45; }

/* ── FOOTER ─────────────────────────────────────────────── */
.vw-footer { background: #1a3a24; color: rgba(255,255,255,.75); text-align: center; padding: 2rem 1.5rem; font-size: .85rem; line-height: 1.7; margin-top: 2rem; }
.vw-footer a { color: rgba(255,255,255,.85); text-decoration: none; font-weight: 600; transition: color .15s; }
.vw-footer a:hover { color: #fff; text-decoration: underline; }