/* =========================================================
   v4 additions (loaded after style.css; nothing in style.css is changed)
   Futuristic accents are scoped to the NEW sections only.
   ========================================================= */
:root { --neon:#00e5ff; --violet:#7c4dff; --ink:#0b1030; --ink2:#141a4d; --brand:#1a237e; --ok:#2e7d32; --warn:#e65100; }

/* service strip under the category nav */
.service-nav { background:linear-gradient(90deg,#0b1030,#141a4d); border-bottom:1px solid rgba(0,229,255,.25); overflow-x:auto; white-space:nowrap; -webkit-overflow-scrolling:touch; }
.service-nav .container { display:flex; gap:4px; padding:0 15px; }
.service-nav a { color:#cfe9ff; padding:9px 13px; font-size:13px; display:inline-flex; align-items:center; gap:6px; border-bottom:2px solid transparent; flex-shrink:0; }
.service-nav a:hover, .service-nav a.on { color:#fff; border-bottom-color:var(--neon); background:rgba(255,255,255,.06); }

/* hero */
.hx { position:relative; overflow:hidden; border-radius:16px; padding:38px 28px; margin-bottom:24px; color:#fff;
  background:radial-gradient(900px 300px at 85% -10%,rgba(124,77,255,.55),transparent 60%),radial-gradient(700px 300px at 0% 110%,rgba(0,229,255,.28),transparent 60%),linear-gradient(135deg,#0b1030,#141a4d 60%,#1a237e); }
.hx::before { content:""; position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px); background-size:36px 36px; mask-image:linear-gradient(180deg,#000,transparent 85%); -webkit-mask-image:linear-gradient(180deg,#000,transparent 85%); }
.hx > * { position:relative; }
.hx .tag { display:inline-block; font-size:12px; letter-spacing:1px; text-transform:uppercase; color:var(--neon); border:1px solid rgba(0,229,255,.45); padding:4px 12px; border-radius:20px; background:rgba(0,229,255,.08); }
.hx h1 { font-size:clamp(24px,4.2vw,40px); line-height:1.15; margin:12px 0 8px; }
.hx h1 span { background:linear-gradient(90deg,var(--neon),#b388ff); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; }
.hx p { color:#c9d4ff; max-width:620px; font-size:15px; }
.hx .cta { display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }
.btn-neon { background:linear-gradient(90deg,var(--neon),#40c4ff); color:#00212b; font-weight:700; box-shadow:0 0 18px rgba(0,229,255,.45); }
.btn-neon:hover { background:linear-gradient(90deg,#40f0ff,#80d8ff); }
.btn-ghost { background:rgba(255,255,255,.1); color:#fff; border:1px solid rgba(255,255,255,.3); }
.btn-ghost:hover { background:rgba(255,255,255,.2); }
.btn-wa { background:#25d366; color:#fff; }
.btn-wa:hover { background:#1ebe5a; }

/* section headers */
.sec-head { display:flex; justify-content:space-between; align-items:end; gap:10px; margin:32px 0 14px; flex-wrap:wrap; }
.sec-head h2 { font-size:22px; border-left:5px solid var(--violet); padding-left:12px; color:var(--ink); }
.sec-head a.more { color:var(--brand); font-size:14px; font-weight:600; }
.sec-head a.more:hover { text-decoration:underline; }

/* deal of the day */
.dod { display:grid; grid-template-columns:1.1fr 1fr; gap:0; border-radius:16px; overflow:hidden; color:#fff; background:linear-gradient(135deg,#1a0b3d,#2a1370 55%,#4527a0); box-shadow:0 8px 30px rgba(69,39,160,.35); border:1px solid rgba(179,136,255,.4); }
.dod-img { background:radial-gradient(circle at 50% 40%,rgba(255,255,255,.18),transparent 70%); display:flex; align-items:center; justify-content:center; padding:20px; min-height:240px; }
.dod-img img { max-height:260px; width:auto; object-fit:contain; filter:drop-shadow(0 10px 25px rgba(0,0,0,.45)); }
.dod-body { padding:26px 26px 24px; }
.dod-body .lab { display:inline-block; background:#ff5252; color:#fff; font-size:12px; font-weight:700; padding:4px 12px; border-radius:20px; letter-spacing:.5px; }
.dod-body h3 { font-size:22px; margin:10px 0 6px; }
.dod-body p { color:#d6cfff; font-size:14px; }
.dod-price { margin:12px 0; font-size:30px; font-weight:800; color:#fff; }
.dod-price s { font-size:16px; color:#b9aee8; font-weight:400; margin-left:8px; }
.cd { display:flex; gap:8px; margin:10px 0 16px; }
.cd .u { background:rgba(0,0,0,.35); border:1px solid rgba(255,255,255,.18); border-radius:10px; padding:8px 4px; min-width:58px; text-align:center; }
.cd .u b { display:block; font-size:22px; font-variant-numeric:tabular-nums; }
.cd .u small { font-size:10px; color:#b9aee8; text-transform:uppercase; letter-spacing:.6px; }
.cd-mini { font-size:13px; font-weight:700; color:#c62828; font-variant-numeric:tabular-nums; }
.cd-done { color:#999; }

/* quick services */
.qs-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.qs { position:relative; background:#fff; border-radius:14px; padding:18px 16px; box-shadow:0 1px 8px rgba(0,0,0,.08); transition:.25s; overflow:hidden; border:1px solid transparent; }
.qs::after { content:""; position:absolute; inset:0; border-radius:14px; padding:1px; background:linear-gradient(135deg,var(--neon),var(--violet)); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; opacity:0; transition:.25s; }
.qs:hover { transform:translateY(-4px); box-shadow:0 10px 24px rgba(26,35,126,.18); }
.qs:hover::after { opacity:1; }
.qs .ic { font-size:30px; width:54px; height:54px; border-radius:14px; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#e8eaff,#f3e9ff); margin-bottom:10px; }
.qs b { display:block; color:var(--ink); }
.qs small { color:#667; font-size:12.5px; }

/* offer cards */
.offer-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:16px; }
.offer-card { background:#fff; border-radius:14px; overflow:hidden; box-shadow:0 1px 8px rgba(0,0,0,.08); display:flex; flex-direction:column; border-top:4px solid var(--violet); }
.offer-card .oi { position:relative; background:#f6f7ff; height:150px; display:flex; align-items:center; justify-content:center; }
.offer-card .oi img { max-height:140px; width:auto; object-fit:contain; }
.offer-card .oi .ob { position:absolute; top:10px; left:10px; background:#ff5252; color:#fff; font-size:12px; font-weight:700; padding:3px 10px; border-radius:20px; }
.offer-card .obody { padding:14px 16px 16px; display:flex; flex-direction:column; gap:6px; flex:1; }
.offer-card h3 { font-size:16px; }
.offer-card p { font-size:13px; color:#555; flex:1; }
.offer-price { font-size:20px; font-weight:800; color:var(--brand); }
.offer-price s { font-size:13px; color:#999; font-weight:400; margin-left:6px; }
.coupon-box { display:flex; align-items:center; gap:8px; border:1px dashed var(--violet); border-radius:8px; padding:6px 10px; font-size:13px; background:#faf7ff; }
.coupon-box code { font-weight:800; letter-spacing:1px; color:#4527a0; }
.coupon-box button { margin-left:auto; border:none; background:#4527a0; color:#fff; border-radius:6px; padding:3px 10px; cursor:pointer; font-size:12px; }
.offer-actions { display:flex; gap:6px; flex-wrap:wrap; margin-top:6px; }

/* catalogue cards (mobiles / accessories) */
.cc-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:16px; }
.cc { background:#fff; border-radius:14px; overflow:hidden; box-shadow:0 1px 8px rgba(0,0,0,.08); display:flex; flex-direction:column; transition:.25s; }
.cc:hover { transform:translateY(-3px); box-shadow:0 8px 22px rgba(26,35,126,.16); }
.cc-img { position:relative; display:block; background:#f6f7ff; }
.cc-img img { height:190px; width:100%; object-fit:contain; padding:14px; }
.cc-badges { position:absolute; top:10px; left:10px; display:flex; flex-direction:column; gap:5px; align-items:flex-start; }
.bdg { font-size:11px; font-weight:700; padding:3px 10px; border-radius:20px; color:#fff; background:#1a237e; }
.bdg.used { background:#ef6c00; } .bdg.new { background:#2e7d32; } .bdg.deal { background:#ff5252; }
.cc-body { padding:12px 14px 14px; display:flex; flex-direction:column; gap:6px; flex:1; }
.cc-title { font-size:14.5px; font-weight:600; color:var(--ink); line-height:1.3; min-height:38px; }
.cc-title:hover { color:var(--brand); }
.chips { display:flex; flex-wrap:wrap; gap:5px; }
.chp { font-size:11.5px; background:#eef0ff; color:#303f9f; padding:2px 8px; border-radius:6px; }
.cc-price { font-size:18px; font-weight:800; color:var(--brand); margin-top:auto; }
.cc-price s { font-size:12.5px; font-weight:400; color:#999; margin-left:6px; }
.cc-note { font-size:11px; color:#888; }
.cc .btn-wa { width:100%; text-align:center; padding:8px; font-size:13px; }

/* filters */
.fbar { background:#fff; border-radius:12px; padding:14px; box-shadow:0 1px 6px rgba(0,0,0,.06); margin-bottom:16px; }
.fbar form { display:flex; gap:10px; flex-wrap:wrap; align-items:end; }
.fbar label { display:block; font-size:12px; color:#666; margin-bottom:3px; }
.fbar select, .fbar input { padding:9px 10px; border:1px solid #ccd; border-radius:8px; font-size:14px; min-width:120px; }
.tabs { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
.tabs a { padding:8px 16px; border-radius:22px; border:1px solid #c5cae9; background:#fff; color:var(--brand); font-size:14px; }
.tabs a.on { background:var(--brand); color:#fff; border-color:var(--brand); }

/* page header */
.ph { border-radius:14px; padding:22px 24px; margin-bottom:20px; color:#fff; background:linear-gradient(135deg,#0b1030,#1a237e); position:relative; overflow:hidden; }
.ph::after { content:""; position:absolute; right:-40px; top:-60px; width:220px; height:220px; border-radius:50%; background:radial-gradient(circle,rgba(0,229,255,.35),transparent 70%); }
.ph h1 { font-size:24px; position:relative; } .ph p { color:#c9d4ff; position:relative; margin-top:4px; }

/* forms */
.fx { background:#fff; border-radius:14px; padding:22px; box-shadow:0 1px 8px rgba(0,0,0,.08); }
.fx h3 { margin-bottom:12px; color:var(--ink); }
.fx .row2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.fx .g { margin-bottom:12px; }
.fx label.l { display:block; font-size:13px; font-weight:600; margin-bottom:4px; color:#333; }
.fx input[type=text], .fx input[type=tel], .fx input[type=email], .fx input[type=number], .fx select, .fx textarea { width:100%; padding:10px 12px; border:1px solid #c9cde0; border-radius:8px; font-size:14px; background:#fff; }
.fx input:focus, .fx select:focus, .fx textarea:focus { outline:none; border-color:var(--violet); box-shadow:0 0 0 3px rgba(124,77,255,.15); }
.fx .chk { display:flex; gap:8px; align-items:flex-start; font-size:13px; color:#444; margin:8px 0; }
.fx .chk input { margin-top:3px; }
.fx .hp { position:absolute; left:-9999px; height:0; overflow:hidden; }
.est { background:linear-gradient(135deg,#e8f5e9,#f1fff4); border:1px solid #a5d6a7; border-radius:10px; padding:12px 14px; margin:10px 0; font-size:14px; }
.est b { color:#1b5e20; font-size:18px; }
.okbox { background:#e8f5e9; border:1px solid #a5d6a7; border-radius:12px; padding:18px; margin-bottom:16px; }
.okbox .tk { font-size:24px; font-weight:800; letter-spacing:2px; color:#1b5e20; }
.two-col { display:grid; grid-template-columns:1.3fr 1fr; gap:20px; align-items:start; }

/* status pills for customer lookups */
.sp { display:inline-block; padding:3px 12px; border-radius:20px; font-size:12px; font-weight:700; background:#e3f2fd; color:#1565c0; }
.sp.ok { background:#e8f5e9; color:#2e7d32; } .sp.bad { background:#ffebee; color:#c62828; } .sp.wait { background:#fff3e0; color:#e65100; }

/* EMI */
.emi-wrap { display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:start; }
.emi-out { background:linear-gradient(135deg,#0b1030,#1a237e); color:#fff; border-radius:14px; padding:22px; }
.emi-big { font-size:36px; font-weight:800; color:var(--neon); margin:4px 0 12px; }
.emi-row { display:flex; justify-content:space-between; padding:8px 0; border-top:1px solid rgba(255,255,255,.14); font-size:14px; }
.emi-bar { height:12px; border-radius:6px; background:#7c4dff; overflow:hidden; margin:10px 0 4px; }
.emi-bar i { display:block; height:100%; background:var(--neon); }
.emi-legend { display:flex; justify-content:space-between; font-size:12px; color:#c9d4ff; }

/* tips / articles */
.tip-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:16px; }
.tip-card { background:#fff; border-radius:14px; overflow:hidden; box-shadow:0 1px 8px rgba(0,0,0,.08); display:flex; flex-direction:column; transition:.25s; }
.tip-card:hover { transform:translateY(-3px); box-shadow:0 8px 22px rgba(26,35,126,.16); }
.tip-card img { height:150px; width:100%; object-fit:cover; background:#e8eaf6; }
.tip-card .tb { padding:14px 16px 16px; }
.tip-card .cat { font-size:11px; font-weight:700; color:var(--violet); text-transform:uppercase; letter-spacing:.6px; }
.tip-card h3 { font-size:16px; margin:5px 0; color:var(--ink); line-height:1.3; }
.tip-card p { font-size:13px; color:#555; }
.tip-card .dt { font-size:12px; color:#888; margin-top:6px; }
.article { background:#fff; border-radius:14px; padding:26px 28px; box-shadow:0 1px 8px rgba(0,0,0,.08); max-width:820px; margin:0 auto 20px; }
.article h1 { font-size:28px; line-height:1.25; color:var(--ink); }
.article .meta { color:#888; font-size:13px; margin:8px 0 16px; }
.article .hero-img { width:100%; max-height:380px; object-fit:cover; border-radius:12px; margin-bottom:18px; }
.article .body { font-size:16px; line-height:1.8; color:#333; }
.article .body h2 { font-size:22px; margin:24px 0 8px; color:var(--brand); } .article .body h3 { font-size:18px; margin:18px 0 6px; }
.article .body p { margin:0 0 14px; } .article .body ul { margin:0 0 14px 22px; } .article .body li { margin-bottom:5px; }
.article .body a { color:var(--brand); text-decoration:underline; }

/* reviews */
.rv-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:14px; }
.rv { background:#fff; border-radius:14px; padding:16px; box-shadow:0 1px 8px rgba(0,0,0,.08); }
.rv .st { color:#fbbc04; letter-spacing:2px; } .rv p { font-size:14px; margin:6px 0; color:#444; } .rv small { color:#888; }

/* contact CTA */
.cta-band { border-radius:16px; padding:26px 24px; margin:30px 0 10px; color:#fff; background:linear-gradient(135deg,#0b1030,#1a237e); display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.cta-band h3 { font-size:20px; } .cta-band p { color:#c9d4ff; font-size:14px; }

/* returning visitor strip */
.wb { position:fixed; left:50%; transform:translateX(-50%); bottom:14px; z-index:97; background:#0b1030; color:#fff; border:1px solid rgba(0,229,255,.5); border-radius:14px; padding:12px 16px; box-shadow:0 8px 28px rgba(0,0,0,.35); display:flex; align-items:center; gap:12px; max-width:92vw; font-size:14px; }
.wb a { color:var(--neon); font-weight:700; } .wb button { background:none; border:none; color:#aaa; font-size:20px; cursor:pointer; }

/* product page additions */
.spec-chips { margin:8px 0; }
.offer-ribbon { background:linear-gradient(90deg,#ff5252,#ff8a65); color:#fff; border-radius:10px; padding:10px 14px; margin:10px 0; font-size:14px; }

/* ---------- admin additions ---------- */
.admin-content .adm-card { background:#fff; border-radius:10px; padding:18px 20px; box-shadow:0 1px 6px rgba(0,0,0,.06); margin-bottom:18px; }
.admin-content details.adm { background:#fff; border-radius:10px; box-shadow:0 1px 6px rgba(0,0,0,.06); margin-bottom:10px; }
.admin-content details.adm > summary { padding:12px 16px; cursor:pointer; display:flex; gap:12px; align-items:center; flex-wrap:wrap; list-style:none; }
.admin-content details.adm[open] > summary { border-bottom:1px solid #eee; }
.admin-content details.adm .inner { padding:14px 16px; }
.admin-content .grid3 { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.admin-content .grid2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.bars { display:flex; align-items:flex-end; gap:4px; height:150px; padding:10px 0; border-bottom:1px solid #ddd; }
.bars .b { flex:1; background:linear-gradient(180deg,#7c4dff,#1a237e); border-radius:4px 4px 0 0; position:relative; min-height:2px; }
.bars .b span { position:absolute; bottom:100%; left:50%; transform:translateX(-50%); font-size:10px; color:#555; white-space:nowrap; }
.thumbs { display:flex; gap:8px; flex-wrap:wrap; } .thumbs img { width:90px; height:90px; object-fit:cover; border-radius:8px; border:1px solid #ddd; }

/* responsive */
@media(max-width:900px){
  .qs-grid { grid-template-columns:repeat(2,1fr); }
  .dod { grid-template-columns:1fr; } .dod-img { min-height:180px; }
  .two-col, .emi-wrap { grid-template-columns:1fr; }
  .admin-content .grid3 { grid-template-columns:1fr 1fr; }
}
@media(max-width:600px){
  .hx { padding:26px 18px; } .fx .row2, .admin-content .grid2, .admin-content .grid3 { grid-template-columns:1fr; }
  .cd .u { min-width:50px; } .cc-img img { height:150px; } .article { padding:18px; } .article h1 { font-size:22px; }
  .cc-grid { grid-template-columns:repeat(2,1fr); gap:10px; } .cc-body { padding:10px; } .cc-title { font-size:13px; }
  .sec-head h2 { font-size:19px; } .qs-grid { gap:10px; } .qs { padding:14px 12px; }
}
@media(prefers-reduced-motion:reduce){ *{ transition:none !important; } }

/* ---------- mobile header fixes (the v3 header overflowed a 390px screen) ---------- */
@media(max-width:700px){
  .topbar-inner { flex-wrap:wrap; gap:3px 12px; font-size:12px; justify-content:space-between; }
  .topbar-links a { margin-right:8px; }
  .main-nav { gap:10px 12px; padding:10px 15px; }
  .main-nav .logo { flex:1 1 auto; min-width:0; }
  .logo-img { max-width:150px; height:38px; }
  .search-form { order:3; flex:1 1 100%; min-width:0; }
  .nav-icons { gap:14px; font-size:20px; }
  .categories-nav { overflow-x:auto; white-space:nowrap; -webkit-overflow-scrolling:touch; }
  .categories-nav .container { display:flex; }
  .categories-nav a { flex-shrink:0; }
}