*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

body{
  font-family:"Space Grotesk", system-ui, sans-serif;
  background:
    radial-gradient(1000px 500px at 20% -10%, #3b82f633, transparent),
    radial-gradient(900px 400px at 90% 10%, #22d3ee22, transparent),
    linear-gradient(180deg,#050814,#02040a);
  color:#eef4ff;
}




.car-nav{
  position: fixed;
  top: 4vh;
  left: 50%;
  transform: translateX(-50%);

  width: min(72%, 1100px);
  padding: 1.2vh 3vw;

  display: flex;
  justify-content: space-between;
  align-items: center;

  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(1vw);
  border-radius: 2vw;
  border: 1px solid rgba(255,255,255,0.15);

  box-shadow:
    0 2vw 4vw rgba(0,0,0,0.6),
    inset 0 1px 1px rgba(255,255,255,0.15);

  perspective: 1200px;
  transform-style: preserve-3d;
  z-index: 99;
}

/* LOGO */
.logo{
  display: flex;
  align-items: center;
  gap: 0.8vw;
  transform: translateZ(3vw);
}

.brand{
  font-size: clamp(1rem, 1.4vw, 1.4rem);
  letter-spacing: 0.3em;
  color: #fff;
}

.brand span{
  color: #3a8dff;
}

.logo svg{
  font-size: 1.2vw;
  transition: transform 0.4s ease;
}

.logo:hover svg{
  transform: translateX(0.5vw);
}


.car-nav{
  top: 30px;
  transform: translateX(-50%);
  width: 80%;
  padding: 12px 50px;
position: fixed;
  display: flex;
  justify-content: space-between;
  align-items: center;

  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(16px);
  border-radius: 20px;

  border: 1px solid rgba(255,255,255,0.15);
  box-shadow:
    0 30px 60px rgba(0,0,0,0.6),
    inset 0 1px 1px rgba(255,255,255,0.15);

  perspective: 1200px;
  transform-style: preserve-3d;
  z-index: 99;
}

/* LOGO */
.logo{
  display: flex;
  align-items: center;
  gap: 10px;
  transform: translateZ(40px);
}

.brand{
  color: white;
  font-size: 22px;
  letter-spacing: 3px;
}

.brand span{
  color: #3a8dff;
}

/* NAV LIST */
.nav3d{
  display: flex;
  gap: 45px;
  list-style: none;
  
}

.nav3d li{
  perspective: 800px;
}

/* LINKS */
.nav3d li a{
  text-decoration: none;
  color: white;
  font-size: 13px;
  letter-spacing: 3px;
  position: relative;
  padding: 10px 0;
  display: block;
  transform-style: preserve-3d;
  transition: all 0.4s ease;
}

.nav3d li a span{
  display: block;
  transform: translateZ(30px);
  transition: all 0.4s ease;
  font-size: 0.7vw;
}

/* GLOW LINE */
.nav3d li a::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 0%;
  height: 2px;
  background:linear-gradient(135deg,#1e3cff,#3a8dff);
  box-shadow: 0 0 10px #ff4e2b;
  transition: width 0.4s ease;
}

/* HOVER FULL 3D */
.nav3d li:hover a{
  transform: rotateX(19deg) rotateY(-34deg);
}

.nav3d li:hover a span{
  transform: translateZ(55px);
  color: #3a8dff;
}

.nav3d li:hover a::after{
  width: 100%;
}

/* BUTTON */
.nav-btn{
  transform: translateZ(40px);
}

.nav-btn1 button{
  padding:12px 26px;
  background:linear-gradient(135deg,#1e3cff,#3a8dff);
  border:none;
  border-radius:30px;
  color:#fff;
  font-size:12px;
  letter-spacing:2px;
  cursor:pointer;

  box-shadow:
    0 14px 30px rgba(58,141,255,.45),
    inset 0 0 0 rgba(255,255,255,.2);

  transition:.35s ease;
}

.nav-btn1 button:hover{
  transform:translateY(-2px);
  box-shadow:0 18px 45px rgba(58,141,255,.65);
}




/* ===========================
   RESPONSIVE – FIXED VERSION
=========================== */
/* Tablet (<= 1024px) */
@media (max-width: 1024px){
  .car-nav{
    width: 94%;
    padding: 16px 28px;
  }

  .nav3d{
    gap: 32px;
  }

  .nav3d li a{
    font-size: 18px;
    letter-spacing: 2px;
  }

  .logo,
  .nav-btn{
    transform: translateZ(25px);
  }

  .nav3d li a span{
    transform: translateZ(25px);
  }
}

/* Mobile (<= 768px) */
@media (max-width: 768px){
  .car-nav{
    flex-direction: column;
    gap: 18px;
    padding: 16px 20px;
  }

  /* 👇 MAIN FIX: menu ek ke niche ek */
  .nav3d{
    flex-direction: column;
    gap: 20px;
    align-items: center;
  }

  .nav3d li a{
    font-size: 19px;
  }

  .nav3d li:hover a{
    transform: rotateX(6deg) rotateY(-6deg);
  }

  .nav3d li a span{
    transform: translateZ(20px);
  }

  /* 👇 Button width controlled (not full) */
  .nav-btn button{
    width: 70%;
  }
}

/* Small Mobile (<= 480px) */
@media (max-width: 480px){
  .brand{
    font-size: 18px;
    letter-spacing: 2px;
  }

  .nav3d{
    gap: 16px;
  }

  .nav3d li a{
    font-size: 20px;
    letter-spacing: 2px;
  }

  /* 👇 Even smaller button */
  .nav-btn button{
    width: 80%;
  }

  .car-nav{
    border-radius: 16px;
  }
}

/* ================= LAYOUT ================= */
.checkout{
  display:grid;
  grid-template-columns:1.5fr .9fr;
  gap:4vw;
  padding:8vh 6vw;
}

/* ================= LEFT ================= */
.checkout-left{
  background:linear-gradient(180deg,#0b1224dd,#060913dd);
  border-radius:22px;
    margin-top: 12vh;

  padding:5vh 4vw;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 30px 80px rgba(0,0,0,.6);
}

.breadcrumb{
  font-size:12px;
  opacity:.55;
  margin-bottom:2vh;
}

.breadcrumb span{
  color:#60a5fa;
}

.checkout-left h1{
  font-size:34px;
  margin-bottom:.8vh;
  letter-spacing:.03em;
}

.subtext{
  font-size:13px;
  opacity:.7;
  margin-bottom:4.5vh;
}

/* ================= STEPS ================= */
.step{
  margin-bottom:5vh;
}

.step h3{
  display:flex;
  align-items:center;
  gap:14px;
  font-size:14px;
  margin-bottom:2.8vh;
}

.step h3 span{
  width:28px;
  height:28px;
  border-radius:50%;
  background:linear-gradient(135deg,#2563eb,#4f9cff);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  box-shadow:0 0 20px #2563eb88;
}

/* ================= FORM ================= */
.row{
  display:flex;
  gap:2vw;
}

.field{
  flex:1;
  margin-bottom:2.6vh;
}

.field label{
  display:block;
  font-size:11px;
  opacity:.65;
  margin-bottom:6px;
}

.field input{
  width:100%;
  padding:15px 18px;
  background:linear-gradient(180deg,#060b18,#030611);
  border-radius:14px;
  border:1px solid rgba(255,255,255,.08);
  color:#fff;
  transition:.35s ease;
}

.field input:focus{
  outline:none;
  border-color:#3b82f6;
  box-shadow:0 0 0 2px #2563eb33;
}

/* ================= PAYMENT ================= */
.payment-select{
  display:flex;
  gap:1.2vw;
  margin-bottom:3vh;
}

.payment-select button{
  flex:1;
  padding:15px;
  border-radius:16px;
  background:linear-gradient(180deg,#060b18,#030611);
  border:1px solid rgba(255,255,255,.08);
  color:#fff;
  font-size:12px;
  cursor:pointer;
  transition:.35s ease;
}

.payment-select button:hover{
  border-color:#3b82f6;
  box-shadow:0 0 25px #2563eb44;
}

.payment-select .active{
  border-color:#3b82f6;
  box-shadow:0 0 35px #2563eb77;
}

.secure{
  margin-top:2vh;
  font-size:11px;
  color:#7dd3fc;
}

/* ================= RIGHT ================= */
.checkout-right{
  background:linear-gradient(180deg,#0b1224ee,#060913ee);
  border-radius:22px;
      margin-top: 12vh;

  padding:4vh 3vw;
  border:1px solid rgba(255,255,255,.08);
  position:sticky;
  top:6vh;
  box-shadow:0 30px 80px rgba(0,0,0,.65);
}

.checkout-right h3{
  font-size:15px;
  margin-bottom:3vh;
  letter-spacing:.05em;
}
.car-preview{
  position:relative;
  border-radius:18px;
  overflow:hidden;
  margin-bottom:3vh;
  background:#050914;
  border:1px solid rgba(255,255,255,.08);
}

/* IMAGE */
.car-preview img{
  width:100%;
  height:36vh;
  object-fit:cover;
  display:block;
}

/* DARK GRADIENT OVERLAY */
.car-preview::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(
      to top,
      rgba(0,0,0,.75),
      rgba(0,0,0,.35),
      transparent
    );
  pointer-events:none;
}

/* TEXT OVER IMAGE */
.car-preview h4,
.car-preview span{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  z-index:2;
  text-align:center;
}

.car-preview h4{
  bottom:7vh;
  font-size:16px;
  letter-spacing:.12em;
}

.car-preview span{
  bottom:4.5vh;
  font-size:11px;
  opacity:.7;
  letter-spacing:.18em;
}

/* HOVER POLISH */
.car-preview:hover img{
  transform:scale(1.04);
  transition:.4s ease;
}

.car-preview:hover::after{
  background:
    linear-gradient(
      to top,
      rgba(0,0,0,.85),
      rgba(0,0,0,.45),
      transparent
    );
}

/* ================= PRICE LIST ================= */
.price-list{
  list-style:none;
  font-size:12px;
  line-height:2.6;
  opacity:.9;
}

.price-list li{
  display:flex;
  justify-content:space-between;
}

/* ================= TOTAL ================= */
.total{
  margin:3vh 0;
  padding-top:2.5vh;
  border-top:1px solid rgba(255,255,255,.15);
  display:flex;
  justify-content:space-between;
  font-size:16px;
  font-weight:600;
}

/* ================= BUTTON ================= */
.confirm{
  width:100%;
  padding:17px;
  border-radius:18px;
  border:none;
  background:linear-gradient(0deg,#a3b6dd63,#22d3ee98);
  color:#fff;
  font-size:13px;
  letter-spacing:.08em;
  cursor:pointer;
  box-shadow:0 0 45px #2563eb77;
  transition:.4s ease;
}

.confirm:hover{
  box-shadow:0 0 20px #22d3eeaa;
}

.note{
  font-size:10px;
  margin-top:0.59vw;
  text-align:center;
}

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

  .checkout-right{
    position:relative;
    top:auto;
  }

  .row{
    flex-direction:column;
  }
}