/* =========================
   GLOBAL RESET & BASE
========================= */
*{
  box-sizing:border-box;
}

body{
  margin:0;
  font-family:Arial, Helvetica, sans-serif;
  background:#f3f3f7;
  color:#222;
}

/* =========================
   TOP BARS
========================= */
.topbar{
  background:#6f4bd8;
  color:#fff;
  text-align:center;
  padding:10px;
  font-size:14px;
}

.subbar{
  background:#7d5be7;
  color:#fff;
  text-align:center;
  padding:10px;
  font-size:13px;
}

/* =========================
   CATEGORY NAV
========================= */
.category{
  display:flex;
  justify-content:center;
  gap:15px;
  padding:20px;
  flex-wrap:wrap;
}

.category a{
  background:#6f4bd8;
  color:#fff;
  padding:10px 18px;
  border-radius:6px;
  text-decoration:none;
  font-size:14px;
  font-weight:600;
}

.category a:hover{
  background:#5a3bc4;
}

/* =========================
   MAIN LAYOUT
========================= */
.container{
  max-width:1200px;
  margin:auto;
  display:grid;
  grid-template-columns:1fr 2.2fr;
  gap:30px;
  padding:30px 20px;
}

/* =========================
   SIDEBAR
========================= */
.sidebar{
  background:#fff;
  border-radius:12px;
  padding:20px;
  box-shadow:0 4px 15px rgba(0,0,0,.08);
}

.sidebar h3{
  margin-top:0;
}

.sidebar ul{
  padding-left:18px;
  font-size:14px;
}

/* =========================
   ORDER PREVIEW
========================= */
.order-box{
  margin:20px 0;
  border:1px dashed #ccc;
  padding:15px;
  border-radius:10px;
  text-align:center;
}

.order-box img{
  max-width:100%;
  border-radius:8px;
  border:1px solid #ddd;
}

.note{
  font-size:12px;
  color:#666;
  margin-top:8px;
}

/* =========================
   OFFERS
========================= */
.offer{
  background:#fff;
  border:2px dashed #6f4bd8;
  border-radius:14px;
  padding:20px;
  margin-bottom:20px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  box-shadow:0 4px 15px rgba(0,0,0,.08);
}

.offer h4{
  margin:6px 0;
}

.badge{
  font-size:12px;
  color:#4caf50;
}

.stars{
  color:#f4b400;
  font-size:14px;
}

/* =========================
   BUTTON (WHITE + BOLD + GLOW)
========================= */
.btn{
  background:#6f4bd8;
  color:#ffffff !important;
  padding:10px 18px;
  border-radius:20px;
  text-decoration:none;
  font-size:13px;
  font-weight:700;
  white-space:nowrap;
  position:relative;
  box-shadow:
    0 0 8px rgba(111,75,216,0.6),
    0 0 16px rgba(111,75,216,0.4);
  transition:all .3s ease;
}

.btn:hover{
  background:#5a3bc4;
  color:#ffffff !important;
  box-shadow:
    0 0 12px rgba(111,75,216,0.9),
    0 0 28px rgba(111,75,216,0.6);
  transform:translateY(-1px);
}

.btn:active{
  transform:translateY(0);
}

/* Optional soft pulse (safe for Ads) */
@keyframes glowPulse{
  0%{box-shadow:0 0 8px rgba(111,75,216,.5);}
  50%{box-shadow:0 0 20px rgba(111,75,216,.9);}
  100%{box-shadow:0 0 8px rgba(111,75,216,.5);}
}

.primary-cta{
  animation:glowPulse 2.5s infinite;
}

/* =========================
   HOW SECTION
========================= */
.how{
  background:#fff;
  border-radius:12px;
  padding:20px;
  box-shadow:0 4px 15px rgba(0,0,0,.08);
}

/* =========================
   FOOTER (FINAL – SOLVED)
========================= */
.site-footer{
  background:#1f2430;
  padding:40px 20px;
  text-align:center;
  color:#cfd3dc;
}

.footer-container{
  max-width:1100px;
  margin:auto;
}

.footer-nav{
  margin-bottom:12px;
}

/* FORCE footer links (NO blue / NO purple) */
.site-footer a,
.site-footer a:link,
.site-footer a:visited,
.site-footer a:active{
  color:#b9c0ff !important;
  text-decoration:none !important;
  font-weight:500;
}

.site-footer a:hover{
  color:#ffffff !important;
  text-decoration:underline !important;
}

.footer-nav span{
  margin:0 6px;
  color:#555;
}

.footer-copy{
  margin:8px 0 14px;
  font-size:14px;
  color:#dcdcdc;
}

.footer-disclaimer{
  font-size:13px;
  line-height:1.6;
  color:#aeb4c2;
}

/* =========================
   GLOBAL LINK SAFETY
========================= */
a{
  text-decoration:none;
}

/* =========================
   RESPONSIVE
========================= */
@media(max-width:900px){
  .container{
    grid-template-columns:1fr;
  }
}