/* ══════════════════════════════════════════════
   Cashyspot — Global Stylesheet
══════════════════════════════════════════════ */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

:root {
  --blue:   #2563eb;
  --dark:   #0f1a2c;
  --navy:   #1e293b;
  --light:  #f4f7fc;
  --white:  #ffffff;
  --text:   #1e2b37;
  --muted:  #64748b;
  --radius: 1.5rem;
  --shadow: 0 12px 30px -12px rgba(0,0,0,.14);
}

body { font-family:"Inter",sans-serif; background:var(--light); color:var(--text); line-height:1.6; }
a    { text-decoration:none; color:inherit; }

/* ── Layout ─────────────────────────────────── */
.container { max-width:1280px; margin:0 auto; padding:0 2rem; }
.section-title {
  font-size:2rem; font-weight:700; margin:3rem 0 2rem;
  letter-spacing:-.02em; position:relative; display:inline-block;
}
.section-title::after {
  content:''; position:absolute; bottom:-8px; left:0;
  width:60px; height:4px;
  background:linear-gradient(90deg,#2563eb,#7c3aed); border-radius:4px;
}

/* ── Top Bar ─────────────────────────────────── */
.top-bar {
  background:var(--dark); color:#ccdbe9;
  padding:.5rem 2rem; font-size:.88rem;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  border-bottom:1px solid #2a3a4e;
}
.contact-info { display:flex; gap:2rem; flex-wrap:wrap; }
.top-bar a { color:#f0f6ff; transition:color .2s; margin-left:.5rem; }
.top-bar a:hover { color:#60a5fa; }
.social-top i { font-size:1.05rem; margin:0 .3rem; }
.whatsapp-top {
  background:#25D366; color:white !important; padding:.2rem 1rem;
  border-radius:30px; font-weight:600; font-size:.82rem;
  display:inline-flex; align-items:center; gap:6px;
}

/* ── Navbar ──────────────────────────────────── */
.navbar {
  display:flex; align-items:center; justify-content:space-between;
  padding:.8rem 2rem; background:rgba(255,255,255,.88);
  backdrop-filter:blur(16px); border-bottom:1px solid rgba(0,0,0,.06);
  position:sticky; top:0; z-index:60; flex-wrap:wrap;
}
.logo {
  font-size:1.85rem; font-weight:700;
  background:linear-gradient(145deg,#14375f,#2563eb);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.nav-links { display:flex; gap:2rem; align-items:center; font-weight:500; }
.nav-links a { color:var(--navy); transition:color .2s; }
.nav-links a:hover { color:var(--blue); }
.buy-link {
  background:var(--navy); color:white !important; padding:.4rem 1.4rem;
  border-radius:40px; font-weight:600;
}
.buy-link:hover { background:#0f172a; }
.menu-icon { display:none; font-size:1.7rem; cursor:pointer; color:var(--navy); }

/* ── Slider ──────────────────────────────────── */
.slider-wrap {
  margin:1.5rem 2rem 2.5rem; border-radius:2.5rem; overflow:hidden;
  box-shadow:0 30px 40px -20px #1e3c72; position:relative;
}
.slides-track { display:flex; transition:transform .45s ease; }
.slide {
  min-width:100%; height:340px; background-size:cover; background-position:center;
  display:flex; align-items:center; padding:0 5%;
  color:white; text-shadow:0 4px 12px rgba(0,0,0,.3);
}
.slide-content {
  max-width:560px; background:rgba(0,20,40,.52);
  backdrop-filter:blur(8px); padding:1.8rem 2.4rem; border-radius:2.5rem;
}
.slide-content h2 { font-size:2.6rem; font-weight:700; margin-bottom:.4rem; }
.slide-content p  { font-size:1.1rem; }
.slider-btn {
  position:absolute; top:50%; transform:translateY(-50%);
  background:rgba(255,255,255,.28); backdrop-filter:blur(4px);
  border:none; width:46px; height:46px; border-radius:50%;
  font-size:1.6rem; color:white; cursor:pointer; transition:.2s;
  display:flex; align-items:center; justify-content:center;
}
.slider-btn:hover { background:rgba(255,255,255,.7); color:#0f2b45; }
.prev-btn { left:18px; } .next-btn { right:18px; }
.dots { position:absolute; bottom:18px; left:50%; transform:translateX(-50%); display:flex; gap:9px; }
.dot {
  width:13px; height:13px; background:rgba(255,255,255,.45);
  border-radius:20px; cursor:pointer; transition:.25s;
}
.dot.active { background:white; width:28px; }

/* ── Category Grid ───────────────────────────── */
.category-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
  gap:1.6rem; margin:1.5rem 0 3rem;
}
.category-card {
  background:var(--white); border-radius:var(--radius);
  padding:1.8rem 1rem; text-align:center;
  box-shadow:var(--shadow); border:1px solid rgba(255,255,255,.7);
  transition:.22s; cursor:pointer;
}
.category-card:hover {
  transform:translateY(-8px); box-shadow:0 28px 30px -14px #2563eb44;
  border-color:#b1d0ff;
}
.category-card i   { font-size:2.8rem; color:#1e3a8a; margin-bottom:.9rem; }
.category-card span { font-weight:600; font-size:1rem; display:block; }

/* ── Brand / Model Grid ──────────────────────── */
.brand-grid, .model-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
  gap:1.6rem; margin:1.5rem 0 3rem;
}
.brand-card, .model-card {
  background:var(--white); border-radius:var(--radius);
  padding:1.6rem 1rem; text-align:center; box-shadow:var(--shadow);
  cursor:pointer; border:1px solid rgba(255,255,255,.7); transition:.22s;
}
.brand-card:hover, .model-card:hover {
  transform:translateY(-6px); box-shadow:0 24px 28px -12px #2563eb44;
  border-color:#b1d0ff;
}
.brand-card img, .model-card img {
  width:80px; height:80px; object-fit:contain; margin-bottom:.8rem;
}
.brand-card span, .model-card span { font-weight:600; display:block; }
.brand-card .brand-icon, .model-card .model-icon {
  width:72px; height:72px; border-radius:50%;
  background:var(--light); display:flex; align-items:center; justify-content:center;
  margin:0 auto .8rem; font-size:2.2rem; color:var(--blue);
}

/* ── Variant Cards ───────────────────────────── */
.variant-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:1.4rem; margin:1.5rem 0 3rem;
}
.variant-card {
  background:var(--white); border-radius:var(--radius);
  padding:1.8rem 1.4rem; box-shadow:var(--shadow);
  cursor:pointer; border:2px solid transparent; transition:.22s;
}
.variant-card:hover, .variant-card.selected {
  border-color:var(--blue); box-shadow:0 0 0 4px #2563eb22;
}
.variant-card h4 { font-size:1.1rem; font-weight:700; margin-bottom:.4rem; }
.variant-card .price-range { color:var(--muted); font-size:.9rem; }
.variant-card .base-price  { font-size:1.5rem; font-weight:700; color:var(--blue); }
.variant-card .btn-select {
  margin-top:1rem; width:100%; padding:.6rem;
  background:var(--blue); color:white; border:none;
  border-radius:40px; font-weight:600; cursor:pointer; transition:.2s;
}
.variant-card .btn-select:hover { background:#1d4ed8; }

/* ── Breadcrumb ──────────────────────────────── */
.breadcrumb {
  display:flex; gap:.4rem; align-items:center; flex-wrap:wrap;
  font-size:.9rem; color:var(--muted); margin:1.5rem 0;
}
.breadcrumb a { color:var(--blue); }
.breadcrumb span { color:var(--muted); }

/* ── Quiz / Questionnaire ────────────────────── */
.quiz-wrap { max-width:720px; margin:2rem auto 4rem; }
.progress-bar-outer {
  background:#e2e8f0; border-radius:40px; height:8px; margin-bottom:2rem;
}
.progress-bar-inner {
  height:8px; border-radius:40px;
  background:linear-gradient(90deg,var(--blue),#7c3aed); transition:width .4s;
}
.quiz-card {
  background:var(--white); border-radius:2rem; padding:2.4rem 2rem;
  box-shadow:var(--shadow); margin-bottom:1.5rem;
}
.quiz-card h3 { font-size:1.3rem; font-weight:700; margin-bottom:1.4rem; }
.option-list   { display:flex; flex-direction:column; gap:.9rem; }
.option-btn {
  background:var(--light); border:2px solid #e2e8f0;
  border-radius:1rem; padding:1rem 1.4rem;
  font-size:1rem; font-weight:500; cursor:pointer; text-align:left; transition:.2s;
  display:flex; justify-content:space-between; align-items:center;
}
.option-btn:hover { border-color:var(--blue); background:#eff6ff; }
.option-btn.chosen { border-color:var(--blue); background:#dbeafe; color:var(--blue); }
.option-deduct { font-size:.82rem; color:var(--muted); font-weight:600; }
.chosen .option-deduct { color:var(--blue); }
.quiz-nav { display:flex; gap:1rem; margin-top:1.5rem; }
.btn { padding:.7rem 2rem; border:none; border-radius:40px; font-weight:600; cursor:pointer; font-size:1rem; transition:.2s; }
.btn-primary { background:var(--blue); color:white; }
.btn-primary:hover { background:#1d4ed8; }
.btn-secondary { background:var(--navy); color:white; }
.btn-secondary:hover { background:#0f172a; }
.btn-outline { background:transparent; border:2px solid var(--blue); color:var(--blue); }
.btn-outline:hover { background:var(--blue); color:white; }

/* ── Price Result Card ───────────────────────── */
.price-result-card {
  background:var(--white); border-radius:2rem; padding:3rem 2.4rem;
  box-shadow:var(--shadow); text-align:center; max-width:540px; margin:2rem auto;
}
.price-result-card .device-name { font-size:1.3rem; color:var(--muted); margin-bottom:.5rem; }
.price-result-card .final-price {
  font-size:3.5rem; font-weight:800; color:var(--blue);
  background:linear-gradient(135deg,#1d4ed8,#7c3aed);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.price-result-card .deductions-list { text-align:left; margin:1.5rem 0; }
.price-result-card .deductions-list li {
  display:flex; justify-content:space-between;
  padding:.5rem 0; border-bottom:1px solid #f1f5f9; font-size:.95rem;
}
.price-result-card .deductions-list li span.deduct { color:#ef4444; font-weight:600; }

/* ── Address Form ────────────────────────────── */
.form-card {
  background:var(--white); border-radius:2rem; padding:2.4rem;
  box-shadow:var(--shadow); max-width:640px; margin:2rem auto;
}
.form-card h3 { font-size:1.4rem; font-weight:700; margin-bottom:1.8rem; }
.form-group { margin-bottom:1.2rem; }
.form-group label { display:block; font-weight:600; font-size:.9rem; margin-bottom:.4rem; }
.form-group input, .form-group select, .form-group textarea {
  width:100%; padding:.8rem 1rem; border:1.5px solid #e2e8f0;
  border-radius:.9rem; font-size:1rem; font-family:inherit;
  transition:border-color .2s; background:var(--light);
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  outline:none; border-color:var(--blue);
}
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }

/* ── Alert / Flash ───────────────────────────── */
.alert { padding:1rem 1.4rem; border-radius:1rem; margin-bottom:1.2rem; font-weight:500; }
.alert-success { background:#dcfce7; color:#15803d; border:1px solid #86efac; }
.alert-error   { background:#fee2e2; color:#b91c1c; border:1px solid #fca5a5; }

/* ── Blog Cards ──────────────────────────────── */
.blog-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1.8rem; margin:1.5rem 0 3rem; }
.blog-card { background:rgba(255,255,255,.9); border-radius:2rem; padding:2rem 1.8rem; box-shadow:0 12px 30px -12px #152e4e; }
.blog-card h3 { font-size:1.6rem; font-weight:600; margin:.5rem 0 .9rem; }
.blog-tag { background:#dbeafe; padding:.2rem 1rem; border-radius:30px; font-weight:600; font-size:.82rem; display:inline-block; }

/* ── Testimonials ────────────────────────────── */
.testimonial-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:1.6rem; max-height:500px; overflow-y:auto; }
.testimonial-card { background:rgba(255,255,255,.72); backdrop-filter:blur(12px); border-radius:2rem; padding:1.6rem; border:1px solid rgba(255,255,255,.8); }
.client-name { font-weight:700; display:flex; gap:.5rem; align-items:center; margin-bottom:.8rem; }

/* ── Footer ──────────────────────────────────── */
footer { background:#0e1b2b; color:#b0c5dd; padding:3rem 2rem 1.5rem; margin-top:4rem; border-radius:3rem 3rem 0 0; }
.footer-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:2.4rem; }
.footer-col ul { list-style:none; margin-top:1rem; }
.footer-col li { margin:.6rem 0; }
.footer-col h3 { font-size:1.05rem; font-weight:700; color:#e2e8f0; }
.footer-col a { color:#cbd5e1; transition:color .2s; }
.footer-col a:hover { color:white; }
.social-footer { display:flex; gap:1.4rem; margin-top:1.2rem; font-size:1.4rem; }
.footer-bottom { text-align:center; border-top:1px solid #253649; padding-top:1.8rem; margin-top:2.5rem; font-size:.88rem; }

/* ── WhatsApp Float ──────────────────────────── */
.wa-float { position:fixed; bottom:28px; right:28px; z-index:100; }
.wa-float a {
  background:#25D366; color:white; width:58px; height:58px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:2.1rem; box-shadow:0 8px 20px #25D36688; transition:.2s;
}
.wa-float a:hover { transform:scale(1.12); }

/* ── Page Stepper ────────────────────────────── */
.stepper { display:flex; align-items:center; justify-content:center; gap:0; margin:2rem 0 2.5rem; flex-wrap:wrap; }
.step {
  display:flex; flex-direction:column; align-items:center; gap:.35rem;
  font-size:.82rem; font-weight:600; color:var(--muted); position:relative;
}
.step-circle {
  width:38px; height:38px; border-radius:50%;
  background:#e2e8f0; display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:.95rem; transition:.3s;
}
.step.active .step-circle   { background:var(--blue); color:white; }
.step.done   .step-circle   { background:#22c55e; color:white; }
.step-line { width:60px; height:3px; background:#e2e8f0; margin-bottom:1.4rem; }
.step.done + .step-line, .step.active + .step-line { background:var(--blue); }

/* ── Confirmation ────────────────────────────── */
.confirm-wrap { text-align:center; padding:3rem 1rem; max-width:500px; margin:auto; }
.confirm-wrap .check-icon { font-size:5rem; color:#22c55e; margin-bottom:1rem; }
.confirm-wrap h2 { font-size:2rem; font-weight:700; margin-bottom:.8rem; }
.confirm-wrap p  { color:var(--muted); }

/* ── Responsive ──────────────────────────────── */
@media (max-width:800px) {
  .nav-links { display:none; flex-direction:column; background:white; width:100%; padding:1rem 0; }
  .nav-links.open { display:flex; }
  .menu-icon { display:block; }
  .slider-wrap { margin:1rem 1rem; }
  .slide-content h2 { font-size:1.9rem; }
  .top-bar { flex-direction:column; gap:8px; text-align:center; }
  .form-row { grid-template-columns:1fr; }
}
@media (max-width:500px) {
  .container { padding:0 1rem; }
  .final-price { font-size:2.8rem !important; }
}