/* ================= BD SHOP - GLOBAL STYLE ================= */
* { margin:0; padding:0; box-sizing:border-box; font-family: 'Segoe UI', Roboto, Arial, sans-serif; }

:root{
  --bg-dark: #0e1218;
  --bg-card: #171c26;
  --bg-input: #1c2230;
  --blue: #2196f3;
  --blue-light: #4facfe;
  --pink: #ff4d6d;
  --green: #2ecc71;
  --text-light: #ffffff;
  --text-muted: #9aa3b2;
  --border: #2a3040;
}

body{
  background: var(--bg-dark);
  color: var(--text-light);
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh;
  position: relative;
  padding-bottom: 70px;
}

a { text-decoration:none; color:inherit; }
ul { list-style:none; }
img { max-width:100%; display:block; }

/* ---------- TOP HEADER ---------- */
.topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px; background:var(--bg-dark);
  position:sticky; top:0; z-index:50;
  border-bottom:1px solid var(--border);
}
.topbar h1{ font-size:20px; font-weight:700; }
.topbar .icon-btn{
  width:38px; height:38px; border-radius:50%;
  background:var(--bg-card); display:flex; align-items:center; justify-content:center;
  font-size:18px;
}

/* ---------- SEARCH BAR ---------- */
.search-bar{
  display:flex; align-items:center; gap:8px;
  background:var(--bg-input); border:1px solid var(--border);
  border-radius:12px; padding:10px 14px; margin:14px 16px;
}
.search-bar input{
  flex:1; background:transparent; border:none; outline:none;
  color:var(--text-light); font-size:15px;
}
.search-bar input::placeholder{ color:var(--text-muted); }

/* ---------- IMAGE SLIDER (Home banner) ---------- */
.slider{
  position:relative; margin:0 16px 18px; border-radius:16px; overflow:hidden;
  height:160px; background:var(--bg-card);
}
.slider .slides{ display:flex; height:100%; transition: transform .4s ease; }
.slider .slide{ min-width:100%; height:100%; }
.slider .slide img{ width:100%; height:100%; object-fit:cover; }
.slider .dots{ position:absolute; bottom:8px; left:0; right:0; display:flex; justify-content:center; gap:6px; }
.slider .dots span{ width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.4); }
.slider .dots span.active{ background:#fff; width:16px; border-radius:4px; }

/* ---------- SECTION TITLES ---------- */
.section-title{
  display:flex; justify-content:space-between; align-items:center;
  padding:0 16px; margin:18px 0 10px;
}
.section-title h2{ font-size:17px; font-weight:700; }
.section-title a{ font-size:13px; color:var(--blue-light); }

/* ---------- PRODUCT GRID ---------- */
.product-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:12px; padding:0 16px;
}
.product-card{
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:14px; overflow:hidden; position:relative;
}
.product-card .thumb{ position:relative; height:130px; background:#fff; }
.product-card .thumb img{ width:100%; height:100%; object-fit:cover; }
.badge-off{
  position:absolute; top:8px; right:8px; background:var(--pink);
  color:#fff; font-size:11px; font-weight:700; padding:4px 8px; border-radius:20px;
}
.badge-sold{
  position:absolute; bottom:8px; left:8px; background:rgba(0,0,0,.6);
  color:#fff; font-size:11px; padding:3px 8px; border-radius:8px;
}
.badge-outstock{
  position:absolute; inset:0; background:rgba(0,0,0,.55);
  display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:700; color:#fff;
}
.product-card .info{ padding:10px; }
.product-card .info h3{ font-size:13.5px; font-weight:600; line-height:1.3; height:34px; overflow:hidden; }
.product-card .price{ margin-top:6px; font-size:15px; font-weight:700; color:var(--blue-light); }
.product-card .price del{ font-size:12px; color:var(--text-muted); font-weight:400; margin-left:6px; }

/* ---------- BUTTONS ---------- */
.btn-primary{
  display:flex; align-items:center; justify-content:center; gap:8px;
  background:linear-gradient(90deg, var(--blue), var(--blue-light));
  color:#fff; border:none; border-radius:14px; padding:15px; font-size:16px;
  font-weight:700; width:100%; cursor:pointer;
}
.btn-outline{
  display:flex; align-items:center; justify-content:center; gap:8px;
  background:transparent; color:var(--text-light); border:1px solid var(--border);
  border-radius:14px; padding:14px; font-size:15px; font-weight:600; width:100%; cursor:pointer;
}

/* ---------- FORMS ---------- */
.form-wrap{ padding:24px 20px; }
.form-wrap h1{ font-size:24px; font-weight:800; margin-bottom:6px; }
.form-wrap p.sub{ color:var(--text-muted); margin-bottom:24px; font-size:14px; }
.form-group{ margin-bottom:16px; }
.form-group label{ display:block; font-size:13px; color:var(--text-muted); margin-bottom:6px; }
.form-group input, .form-group select, .form-group textarea{
  width:100%; background:var(--bg-input); border:1px solid var(--border);
  border-radius:12px; padding:13px 14px; color:var(--text-light); font-size:15px; outline:none;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus{ border-color:var(--blue); }
.alert{ padding:12px 14px; border-radius:10px; font-size:13.5px; margin-bottom:16px; }
.alert-error{ background:rgba(255,77,109,.12); color:#ff8fa3; border:1px solid rgba(255,77,109,.3); }
.alert-success{ background:rgba(46,204,113,.12); color:#7be8a6; border:1px solid rgba(46,204,113,.3); }

.form-footer{ text-align:center; margin-top:18px; font-size:14px; color:var(--text-muted); }
.form-footer a{ color:var(--blue-light); font-weight:600; }

.divider{ display:flex; align-items:center; gap:10px; margin:20px 0; color:var(--text-muted); font-size:13px; }
.divider::before, .divider::after{ content:''; flex:1; height:1px; background:var(--border); }

/* ---------- BOTTOM NAV ---------- */
.bottom-nav{
  position:fixed; bottom:0; left:50%; transform:translateX(-50%);
  width:100%; max-width:480px; background:var(--bg-card);
  border-top:1px solid var(--border); display:flex; z-index:100;
}
.bottom-nav a{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:3px;
  padding:10px 0; font-size:11px; color:var(--text-muted);
}
.bottom-nav a.active{ color:var(--blue-light); }
.bottom-nav a i{ font-size:19px; }