:root{
  --gold:#d4af37;
  --dark:#0f172a;
  --light:#f8fafc;
  --white:#fff;
  --gray:#e5e7eb;
  --green:#27ae60;
}

/* ================= RESET ================= */
*{margin:0; padding:0; box-sizing:border-box;}
body{
  font-family:'Poppins',sans-serif;
  background:var(--light);
  color:#1f2933;
}

/* ================= HEADER ================= */
header{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  z-index:100;
  background:rgba(0,0,0,0.6);
  backdrop-filter:blur(10px);
}
header .nav{
  max-width:1200px;
  margin:auto;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:18px 20px;
  color:var(--white);
}
header .logo{
  font-size:22px;
  font-weight:600;
}
header .logo span{color:var(--gold);}
header .back-btn{
  color:var(--white);
  text-decoration:none;
  font-size:16px;
  opacity:.85;
}
header .back-btn:hover{opacity:1;}

/* ================= HERO ================= */
.checkout-hero{
  display:flex;
  justify-content:center;
  padding:120px 20px 40px;
}

/* ================= CARD ================= */
.checkout-content{
  max-width:400px;
  width:100%;
}
.checkout-content h1{
  font-size:28px;
  font-weight:600;
  margin-bottom:10px;
}
.checkout-content p{
  margin-bottom:25px;
  color:#475569;
}
.checkout-card{
  background:var(--white);
  padding:25px;
  border-radius:20px;
  box-shadow:0 15px 35px rgba(0,0,0,0.08);
}
.row{
  display:flex;
  justify-content:space-between;
  margin-bottom:18px;
  font-size:16px;
}
.row.highlight{
  font-weight:600;
  color:var(--green);
}

/* ================= COUPON ROW ================= */
.coupon-row{
  display:flex;
  gap:12px;
  margin-bottom:15px;
}
.coupon-row input{
  flex:1;
  padding:10px;
  border-radius:8px;
  border:1px solid var(--gray);
}
.coupon-row button{
  padding:10px 16px;
  background:var(--dark);
  color:var(--white);
  border:none;
  border-radius:8px;
  cursor:pointer;
  font-weight:500;
  transition:0.3s;
}
.coupon-row button:hover{
  background:var(--gold);
  color:var(--dark);
}

/* ================= PAY BUTTON ================= */
.pay-btn{
  width:100%;
  padding:14px 0;
  background:var(--gold);
  color:var(--dark);
  border:none;
  border-radius:10px;
  font-size:16px;
  font-weight:600;
  cursor:pointer;
  transition:all .3s;
}
.pay-btn:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(212,175,55,.35);
}

/* ================= SUCCESS POPUP ================= */
.success-popup{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.65);
  display:flex;
  justify-content:center;
  align-items:center;
  z-index:9999;
}
.success-popup .popup-content{
  background:var(--white);
  padding:40px;
  border-radius:20px;
  text-align:center;
  max-width:400px;
  animation:pop 0.4s ease;
}
.success-popup .popup-content h2{
  margin-bottom:15px;
}
.success-popup .popup-content p{
  color:#475569;
}
.success-popup .popup-content button{
  margin-top:20px;
  padding:12px 25px;
  background:var(--dark);
  color:var(--white);
  border:none;
  border-radius:8px;
  cursor:pointer;
  font-weight:600;
}
.success-popup .popup-content button:hover{
  background:var(--gold);
  color:var(--dark);
}

/* ================= POPUP ANIMATION ================= */
@keyframes pop{
  from{transform:scale(.9);opacity:0}
  to{transform:scale(1);opacity:1}
}

/* ================= RESPONSIVE ================= */
@media(max-width:480px){
  .checkout-card{
    padding:20px;
  }
  .checkout-content h1{
    font-size:24px;
  }
  .row{
    font-size:14px;
  }
  .coupon-row input{
    padding:8px;
  }
  .coupon-row button{
    padding:8px 12px;
  }
  .pay-btn{
    padding:12px 0;
    font-size:15px;
  }
}
/* ================= HEADER ================= */
header{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  z-index:100;
  background:rgba(0,0,0,0.8); /* dark semi-transparent */
  backdrop-filter:blur(8px);
  padding:0; /* remove extra padding */
  box-shadow:0 2px 8px rgba(0,0,0,0.2);
}

header .nav{
  max-width:1200px;
  margin:auto;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:16px 20px; /* vertical + horizontal spacing */
}

header .logo{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:22px;
  font-weight:700;
  color:var(--white);
}

header .logo span{
  color:var(--gold);
}

header .logo img{
  height:50px; /* adjust logo size */
  width:auto;
  object-fit:contain;
}

header .back-btn{
  font-size:16px;
  color:var(--white);
  text-decoration:none;
  padding:6px 12px;
  border:1px solid var(--gold);
  border-radius:6px;
  font-weight:500;
  transition:all 0.3s ease;
}
header .back-btn:hover{
  background:var(--gold);
  color:var(--dark);
}

/* MOBILE RESPONSIVE */
@media(max-width:768px){
  header .nav{
    padding:12px 16px;
  }
  header .logo{
    font-size:20px;
  }
  header .logo img{
    height:40px;
  }
  header .back-btn{
    font-size:14px;
    padding:5px 10px;
  }
}


/* DARK THEME */

body[data-theme="dark"]{
background:#111;
color:#fff;
}

body[data-theme="dark"] button,
body[data-theme="dark"] .btn{
background:#333;
color:#fff;
}

body[data-theme="dark"] button:hover{
background:#555;
}


/* PINK THEME */

body[data-theme="pink"]{
background:#fff0f6;
}

body[data-theme="pink"] button,
body[data-theme="pink"] .btn{
background:#ff2d8d;
color:#fff;
}

body[data-theme="pink"] button:hover{
background:#e02178;
}


/* BLUE THEME */

body[data-theme="blue"]{
background:#f0f6ff;
}

body[data-theme="blue"] button,
body[data-theme="blue"] .btn{
background:#2979ff;
color:#fff;
}

body[data-theme="blue"] button:hover{
background:#1c5ed6;
}


/* ORANGE THEME */

body[data-theme="orange"]{
background:#fff6ef;
}

body[data-theme="orange"] button,
body[data-theme="orange"] .btn{
background:#ff7a00;
color:#fff;
}

body[data-theme="orange"] button:hover{
background:#e56d00;
}


/* YELLOW THEME */

body[data-theme="yellow"]{
background:#fffdf4;
}

body[data-theme="yellow"] button,
body[data-theme="yellow"] .btn{
background:#d4af37;
color:#fff;
}

body[data-theme="yellow"] button:hover{
background:#b9972d;
}

.payment-popup{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,0.6);
display:none;
align-items:center;
justify-content:center;
z-index:9999;
}

.popup-box{
background:#fff;
padding:35px;
border-radius:14px;
text-align:center;
width:320px;
animation:popupAnim .3s ease;
}

.popup-icon{
font-size:60px;
margin-bottom:15px;
}

.popup-success{
color:#00b67a;
}

.popup-fail{
color:#ff3b3b;
}

.popup-btn{
margin-top:20px;
padding:10px 30px;
border:none;
background:#000;
color:#fff;
border-radius:8px;
cursor:pointer;
font-size:14px;
}

@keyframes popupAnim{
from{
transform:scale(.7);
opacity:0;
}
to{
transform:scale(1);
opacity:1;
}
}