/* VeyBuy Pro - Zero-Maintenance Shopping Calculator Suite */
:root {
  --primary:#059669; --primary-dark:#047857; --primary-light:#d1fae5;
  --accent:#f59e0b; --accent-light:#fef3c7; --danger:#ef4444;
  --bg:#f8fafc; --card:#ffffff; --text:#0f172a; --text-secondary:#64748b;
  --border:#e2e8f0; --radius:16px; --shadow:0 4px 6px -1px rgb(0 0 0 / .1),0 2px 4px -2px rgb(0 0 0 / .1);
  --shadow-lg:0 20px 25px -5px rgb(0 0 0 / .1),0 8px 10px -6px rgb(0 0 0 / .1);
}
* { box-sizing:border-box; margin:0; padding:0 }
html { scroll-behavior:smooth }
body {
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  background:var(--bg); color:var(--text); line-height:1.65; -webkit-font-smoothing:antialiased;
}
a { color:var(--primary); text-decoration:none }
a:hover { text-decoration:underline }

/* Header */
header {
  background:var(--card); border-bottom:1px solid var(--border); position:sticky; top:0; z-index:50;
}
.nav-container {
  max-width:1140px; margin:0 auto; padding:0 1.5rem; height:64px;
  display:flex; align-items:center; justify-content:space-between;
}
.logo { font-size:1.6rem; font-weight:800; color:var(--primary); letter-spacing:-.5px }
.logo span { color:var(--accent) }
.nav-links { display:flex; gap:1.25rem; list-style:none }
.nav-links a {
  text-decoration:none; color:var(--text-secondary); font-weight:500; font-size:.9rem;
  padding:.25rem 0; border-bottom:2px solid transparent; transition:all .2s;
}
.nav-links a:hover,.nav-links a.active { color:var(--primary); border-bottom-color:var(--primary) }
.mobile-menu-btn { display:none; background:none; border:none; font-size:1.5rem; cursor:pointer; color:var(--text) }

/* Layout */
.container { max-width:860px; margin:0 auto; padding:2rem 1.5rem }
.container-wide { max-width:1140px }
.page-title { font-size:2.2rem; font-weight:800; margin-bottom:.5rem; letter-spacing:-.5px; line-height:1.2 }
.page-subtitle { color:var(--text-secondary); margin-bottom:2rem; font-size:1.1rem; max-width:700px }

/* Cards */
.card {
  background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow);
  padding:2rem; margin-bottom:1.5rem;
}
.card h2 { font-size:1.25rem; margin-bottom:1.25rem; display:flex; align-items:center; gap:.5rem }
.card h3 { font-size:1.1rem; margin:1.5rem 0 .75rem }

/* Inputs */
.input-group { margin-bottom:1.25rem }
.input-group label { display:block; font-weight:600; font-size:.9rem; margin-bottom:.4rem }
.input-group small { display:block; color:var(--text-secondary); font-size:.8rem; margin-top:.25rem }
input[type=number],input[type=text],select {
  width:100%; padding:.85rem 1rem; border:2px solid var(--border); border-radius:12px;
  font-size:1rem; font-family:inherit; transition:border-color .2s,box-shadow .2s;
  background:var(--card); color:var(--text);
}
input:focus,select:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-light) }
input::placeholder { color:#94a3b8 }
.row { display:grid; grid-template-columns:1fr 1fr; gap:1rem }
.row-3 { display:grid; grid-template-columns:1fr 1fr 1fr; gap:1rem }
.row-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem }

/* Buttons */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.9rem 1.5rem; border-radius:12px; font-weight:700; font-size:1rem;
  cursor:pointer; border:none; transition:transform .1s,box-shadow .2s;
}
.btn:active { transform:scale(.98) }
.btn-primary { background:var(--primary); color:#fff; box-shadow:0 4px 12px rgba(5,150,105,.25); width:100% }
.btn-primary:hover { background:var(--primary-dark); box-shadow:0 6px 16px rgba(5,150,105,.35) }
.btn-secondary { background:var(--bg); color:var(--text); border:2px solid var(--border) }
.btn-secondary:hover { background:#f1f5f9 }

/* Results */
.result-box {
  background:linear-gradient(135deg,var(--primary-light) 0%,#ecfdf5 100%);
  border:2px solid #a7f3d0; border-radius:14px; padding:1.75rem; margin-top:1.5rem;
  display:none; animation:slideDown .35s ease;
}
.result-box.show { display:block }
.result-box.winner {
  background:linear-gradient(135deg,var(--accent-light) 0%,#fffbeb 100%);
  border-color:#fcd34d;
}
@keyframes slideDown { from{opacity:0;transform:translateY(-10px)} to{opacity:1;transform:translateY(0)} }
.result-label { font-size:.8rem; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--primary); margin-bottom:.2rem }
.result-value { font-size:2rem; font-weight:800; color:var(--text); line-height:1.2 }
.result-detail { color:var(--text-secondary); font-size:.95rem; margin-top:.5rem }
.result-grid { display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-top:1rem }
.result-item { background:rgba(255,255,255,.6); padding:1rem; border-radius:10px }

/* AdSense Zones */
.ad-unit {
  background:#f1f5f9; border:1px dashed #cbd5e1; border-radius:var(--radius);
  text-align:center; color:var(--text-secondary); font-size:.85rem; overflow:hidden;
  margin:1.5rem 0; min-height:90px; display:flex; align-items:center; justify-content:center; flex-direction:column;
}
.ad-unit ins { display:block; margin:0 auto }
.ad-label { font-size:.7rem; color:#94a3b8; text-transform:uppercase; letter-spacing:1px; margin-bottom:.4rem }

/* Tool Cards */
.tools-grid {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1.5rem; margin-top:2rem;
}
.tool-card {
  background:var(--card); border-radius:var(--radius); box-shadow:var(--shadow); padding:1.75rem;
  text-decoration:none; color:inherit; transition:transform .2s,box-shadow .2s; border:2px solid transparent;
  display:flex; flex-direction:column;
}
.tool-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:var(--primary-light) }
.tool-icon { width:48px; height:48px; background:var(--primary-light); color:var(--primary); border-radius:12px;
  display:flex; align-items:center; justify-content:center; font-size:1.5rem; margin-bottom:1rem; flex-shrink:0 }
.tool-card h3 { font-size:1.15rem; margin-bottom:.4rem }
.tool-card p { color:var(--text-secondary); font-size:.9rem; line-height:1.5; flex-grow:1 }
.badge { display:inline-block; padding:.25rem .6rem; border-radius:999px; font-size:.75rem; font-weight:700; margin-top:auto; align-self:flex-start }
.badge-green { background:var(--primary-light); color:var(--primary) }
.badge-amber { background:var(--accent-light); color:#b45309 }

/* Content sections */
.content-section { margin-top:2rem }
.content-section h2 { font-size:1.4rem; margin-bottom:1rem; font-weight:700 }
.content-section h3 { font-size:1.15rem; margin:1.25rem 0 .5rem; color:var(--primary-dark) }
.content-section p,.content-section li { color:var(--text-secondary); line-height:1.8; margin-bottom:.75rem }
.content-section ul { margin-left:1.25rem; margin-bottom:1rem }
.content-section ul li { margin-bottom:.4rem }

/* FAQ */
.faq-item { border-bottom:1px solid var(--border); padding:1.25rem 0 }
.faq-item:last-child { border-bottom:none }
.faq-q { font-weight:700; color:var(--text); margin-bottom:.4rem; cursor:pointer }
.faq-a { color:var(--text-secondary); line-height:1.7 }

/* Tables */
.data-table { width:100%; border-collapse:collapse; margin:1rem 0; font-size:.95rem }
.data-table th,.data-table td { padding:.75rem; text-align:left; border-bottom:1px solid var(--border) }
.data-table th { font-weight:600; font-size:.8rem; color:var(--text-secondary); text-transform:uppercase; letter-spacing:.5px; background:#f8fafc }
.data-table tr:hover td { background:#f8fafc }
.data-table td { font-weight:500 }

/* Breadcrumb */
.breadcrumb { font-size:.85rem; color:var(--text-secondary); margin-bottom:1.5rem }
.breadcrumb a { color:var(--primary) }
.breadcrumb a:hover { text-decoration:underline }

/* Footer */
footer { text-align:center; padding:3rem 1.5rem; color:var(--text-secondary); font-size:.9rem; border-top:1px solid var(--border); margin-top:2rem }
footer a { color:var(--primary) }

/* Toggle */
.toggle-row { display:flex; align-items:center; gap:1rem; margin-bottom:1.25rem }
.switch { position:relative; display:inline-block; width:50px; height:28px }
.switch input { opacity:0; width:0; height:0 }
.slider { position:absolute; cursor:pointer; top:0; left:0; right:0; bottom:0; background:#cbd5e1; transition:.4s; border-radius:28px }
.slider:before { position:absolute; content:""; height:20px; width:20px; left:4px; bottom:4px; background:#fff; transition:.4s; border-radius:50% }
input:checked+.slider { background:var(--primary) }
input:checked+.slider:before { transform:translateX(22px) }

/* Sidebar layout for wide screens */
@media(min-width:1024px){
  .has-sidebar { display:grid; grid-template-columns:1fr 300px; gap:2rem }
  .sidebar { position:sticky; top:90px; height:fit-content }
  .sidebar .ad-unit { margin-bottom:1rem }
}

/* Responsive */
@media(max-width:768px){
  .row,.row-3,.row-4,.result-grid { grid-template-columns:1fr }
  .page-title { font-size:1.6rem }
  .card { padding:1.25rem }
  .nav-links { display:none }
  .mobile-menu-btn { display:block }
  .tools-grid { grid-template-columns:1fr }
  .has-sidebar { display:block }

  /* Fixed mobile menu toggle */
  .nav-links.show {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 64px;
    left: 0;
    right: 0;
    background: var(--card);
    border-bottom: 1px solid var(--border);
    padding: 1rem 1.5rem;
    box-shadow: var(--shadow-lg);
    gap: 0.75rem;
  }
}

/* Utility */
.text-center { text-align:center }
.mb-1 { margin-bottom:1rem }
.mt-1 { margin-top:1rem }
.mt-2 { margin-top:2rem }
.hidden { display:none }
.highlight { background:var(--accent-light); padding:.1rem .4rem; border-radius:4px; font-weight:600 }