diff --git a/checkout.css b/checkout.css
index 3d1e1bf4..c6c90bb4 100644
--- a/checkout.css
+++ b/checkout.css
@@ -1,626 +1,86 @@
-/* ============================================================
-   checkout.css — Cara Fashion Store
-   Matches the main site UI (white navbar, teal accents)
-   ============================================================ */
-
-*, *::before, *::after {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-}
-
-:root {
-  --teal:       #1a7a6e;
-  --teal-dark:  #145f55;
-  --teal-light: #e6f4f2;
-  --text:       #1a1a1a;
-  --muted:      #6b7280;
-  --border:     #e5e7eb;
-  --bg:         #f5f5f5;
-  --white:      #ffffff;
-  --radius:     12px;
-}
-
-body {
-  font-family: 'Poppins', sans-serif;
-  background: var(--bg);
-  color: var(--text);
-  min-height: 100vh;
-}
-
-/* ══════════════════════════════════════════
-   NAVBAR — white, matches Cara main site
-══════════════════════════════════════════ */
-
-nav {
-  background: var(--white);
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0 56px;
-  height: 76px;
-  border-bottom: 1px solid var(--border);
-  position: sticky;
-  top: 0;
-  z-index: 100;
-}
-
-/* Handwritten logo — matches Cara script */
-.nav-logo {
-  font-family: 'Dancing Script', cursive;
-  font-size: 2.2rem;
-  font-weight: 700;
-  color: var(--text);
-  text-decoration: none;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  line-height: 1;
-}
-
-/* Lavender flower accent beside logo */
-.nav-logo::after {
-  content: "✿";
-  font-size: 1rem;
-  color: #a99fd4;
-  font-family: sans-serif;
-}
-
-.nav-links {
-  display: flex;
-  gap: 36px;
-  list-style: none;
-}
-
-.nav-links a {
-  color: var(--text);
-  text-decoration: none;
-  font-size: 0.9rem;
-  font-weight: 500;
-  padding-bottom: 4px;
-  position: relative;
-  transition: color 0.2s;
-}
-
-.nav-links a:hover {
-  color: var(--teal);
-}
-
-/* Teal underline for active nav link */
-.nav-links a.active {
-  color: var(--text);
-  font-weight: 600;
-}
-
-.nav-links a.active::after {
-  content: '';
-  position: absolute;
-  bottom: -4px;
-  left: 0;
-  right: 0;
-  height: 2.5px;
-  background: var(--teal);
-  border-radius: 2px;
-}
-
-.nav-right {
-  display: flex;
-  align-items: center;
-  gap: 18px;
-}
-
-.nav-right i {
-  font-size: 1.3rem;
-  color: var(--text);
-  cursor: pointer;
-  transition: color 0.2s;
-}
-
-.nav-right i:hover {
-  color: var(--teal);
-}
-
-/* Circle toggle for dark/light mode */
-.theme-toggle {
-  width: 38px;
-  height: 38px;
-  border-radius: 50%;
-  border: 1.5px solid var(--border);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-}
-
-/* ══════════════════════════════════════════
-   PAGE WRAPPER
-══════════════════════════════════════════ */
-
-.page-wrapper {
-  max-width: 1100px;
-  margin: 0 auto;
-  padding: 44px 24px 80px;
-}
-
-/* Back button — teal pill, same as product page "Back" */
-.back-btn {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  background: var(--teal);
-  color: var(--white);
-  border: none;
-  border-radius: 8px;
-  padding: 10px 22px;
-  font-family: 'Poppins', sans-serif;
-  font-size: 0.85rem;
-  font-weight: 600;
-  cursor: pointer;
-  transition: background 0.2s;
-  margin-bottom: 32px;
-}
-
-.back-btn:hover {
-  background: var(--teal-dark);
-}
-
-/* Page title block */
-.page-title {
-  text-align: center;
-  margin-bottom: 40px;
-}
-
-.page-title .brand-name {
-  font-family: 'Dancing Script', cursive;
-  font-size: 2rem;
-  color: var(--teal);
-  display: block;
-  margin-bottom: 4px;
-}
-
-.page-title h1 {
-  font-size: 2rem;
-  font-weight: 700;
-  color: var(--text);
-  letter-spacing: -0.3px;
-}
-
-.page-title p {
-  font-size: 0.88rem;
-  color: var(--muted);
-  margin-top: 6px;
-}
-
-/* ══════════════════════════════════════════
-   TWO-COLUMN GRID
-══════════════════════════════════════════ */
-
-.checkout-grid {
-  display: grid;
-  grid-template-columns: 1fr 370px;
-  gap: 28px;
-  align-items: start;
-}
-
-/* ══════════════════════════════════════════
-   CARD
-══════════════════════════════════════════ */
-
-.card {
-  background: var(--white);
-  border-radius: var(--radius);
-  padding: 28px 32px;
-  border: 1px solid var(--border);
-  margin-bottom: 20px;
-}
-
-.card:last-child {
-  margin-bottom: 0;
-}
-
-.card-title {
-  font-size: 0.95rem;
-  font-weight: 600;
-  color: var(--text);
-  margin-bottom: 22px;
-  padding-bottom: 14px;
-  border-bottom: 1px solid var(--border);
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.card-title i {
-  color: var(--teal);
-  font-size: 1.1rem;
-}
-
-/* ══════════════════════════════════════════
-   FORM ELEMENTS
-══════════════════════════════════════════ */
-
-.input-group {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-  margin-bottom: 18px;
-}
-
-.input-group:last-child {
-  margin-bottom: 0;
-}
-
-label {
-  font-size: 0.78rem;
-  font-weight: 600;
-  color: var(--text);
-  text-transform: uppercase;
-  letter-spacing: 0.4px;
-}
-
-input,
-textarea,
-select {
-  width: 100%;
-  padding: 13px 16px;
-  border: 1.5px solid var(--border);
-  border-radius: 8px;
-  font-family: 'Poppins', sans-serif;
-  font-size: 0.875rem;
-  color: var(--text);
-  background: var(--white);
-  transition: border-color 0.2s, box-shadow 0.2s;
-  outline: none;
-}
-
-input::placeholder,
-textarea::placeholder {
-  color: #b5bec9;
-}
-
-input:focus,
-textarea:focus,
-select:focus {
-  border-color: var(--teal);
-  box-shadow: 0 0 0 3px rgba(26, 122, 110, 0.1);
-}
-
-textarea {
-  resize: vertical;
-  min-height: 88px;
-}
-
-/* Two-column row inside a card */
-.row {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 16px;
-}
-
-/* ══════════════════════════════════════════
-   PAYMENT METHOD TABS
-══════════════════════════════════════════ */
-
-.payment-tabs {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 12px;
-  margin-top: 6px;
-}
-
-.payment-tab {
-  border: 1.5px solid var(--border);
-  border-radius: 8px;
-  padding: 14px 16px;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  font-size: 0.85rem;
-  font-weight: 500;
-  color: var(--muted);
-  transition: all 0.2s;
-  background: var(--white);
-  user-select: none;
-}
-
-.payment-tab i {
-  font-size: 1.15rem;
-}
-
-.payment-tab.active {
-  border-color: var(--teal);
-  background: var(--teal-light);
-  color: var(--teal);
-}
-
-/* Card details — shown only for Online Payment */
-.card-details-section {
-  display: none;
-  margin-top: 20px;
-  padding-top: 20px;
-  border-top: 1px solid var(--border);
-  animation: fadeSlide 0.25s ease;
-}
-
-.card-details-section.visible {
-  display: block;
-}
-
-@keyframes fadeSlide {
-  from { opacity: 0; transform: translateY(-8px); }
-  to   { opacity: 1; transform: translateY(0); }
-}
-
-/* ══════════════════════════════════════════
-   ORDER SUMMARY
-══════════════════════════════════════════ */
-
-.order-item {
-  display: flex;
-  align-items: center;
-  gap: 14px;
-  padding: 14px 0;
-  border-bottom: 1px solid var(--border);
-}
-
-.order-item:first-of-type { padding-top: 0; }
-.order-item:last-of-type  { border-bottom: none; }
-
-.item-thumb {
-  width: 62px;
-  height: 62px;
-  border-radius: 8px;
-  background: var(--bg);
-  border: 1px solid var(--border);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 1.5rem;
-  flex-shrink: 0;
-}
-
-.item-info {
-  flex: 1;
-  min-width: 0;
-}
-
-.item-name {
-  font-size: 0.85rem;
-  font-weight: 600;
-  color: var(--text);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.item-meta {
-  font-size: 0.75rem;
-  color: var(--muted);
-  margin-top: 2px;
-}
-
-.item-price {
-  font-size: 0.9rem;
-  font-weight: 700;
-  color: var(--teal);
-  white-space: nowrap;
-}
-
-/* Totals section */
-.totals {
-  margin-top: 18px;
-  padding-top: 18px;
-  border-top: 1px solid var(--border);
-}
-
-.total-row {
-  display: flex;
-  justify-content: space-between;
-  font-size: 0.85rem;
-  color: var(--muted);
-  margin-bottom: 10px;
-}
-
-.total-row.free-ship span:last-child {
-  color: var(--teal);
-  font-weight: 500;
-}
-
-.total-row.grand {
-  font-size: 1rem;
-  font-weight: 700;
-  color: var(--text);
-  margin-top: 14px;
-  padding-top: 14px;
-  border-top: 1px solid var(--border);
-  margin-bottom: 0;
-}
-
-/* Place Order button — teal pill, same as "Add to Cart" / "Buy Now" */
-.submit-btn {
-  width: 100%;
-  padding: 15px;
-  background: var(--teal);
-  color: var(--white);
-  border: none;
-  border-radius: 30px;
-  font-family: 'Poppins', sans-serif;
-  font-size: 0.95rem;
-  font-weight: 600;
-  cursor: pointer;
-  margin-top: 22px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-  transition: background 0.2s, transform 0.15s;
-  letter-spacing: 0.2px;
-}
-
-.submit-btn:hover {
-  background: var(--teal-dark);
-  transform: translateY(-1px);
-}
-
-.submit-btn:active {
-  transform: translateY(0);
-}
-
-/* Secure checkout badge */
-.secure-badge {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 5px;
-  font-size: 0.73rem;
-  color: var(--muted);
-  margin-top: 12px;
-}
-
-.secure-badge i {
-  color: var(--teal);
-}
-
-/* ══════════════════════════════════════════
-   SUCCESS POPUP
-══════════════════════════════════════════ */
-
-.success-overlay {
-  display: none;
-  position: fixed;
-  inset: 0;
-  background: rgba(0, 0, 0, 0.4);
-  z-index: 999;
-  align-items: center;
-  justify-content: center;
-}
-
-.success-overlay.show {
-  display: flex;
-}
-
-.popup-box {
-  background: var(--white);
-  border-radius: 20px;
-  padding: 52px 44px;
-  text-align: center;
-  max-width: 400px;
-  width: 90%;
-  animation: popIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
-}
-
-@keyframes popIn {
-  from { opacity: 0; transform: scale(0.82); }
-  to   { opacity: 1; transform: scale(1); }
-}
-
-.check-circle {
-  width: 76px;
-  height: 76px;
-  background: var(--teal);
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin: 0 auto 20px;
-}
-
-.check-circle i {
-  color: var(--white);
-  font-size: 2rem;
-}
-
-.popup-box h2 {
-  font-size: 1.5rem;
-  font-weight: 700;
-  margin-bottom: 8px;
-}
-
-.popup-box p {
-  font-size: 0.88rem;
-  color: var(--muted);
-  margin-bottom: 24px;
-}
-
-.popup-btn {
-  display: inline-block;
-  padding: 13px 34px;
-  background: var(--teal);
-  color: var(--white);
-  border: none;
-  border-radius: 30px;
-  font-family: 'Poppins', sans-serif;
-  font-size: 0.9rem;
-  font-weight: 600;
-  cursor: pointer;
-  transition: background 0.2s;
-  text-decoration: none;
+*{margin:0;padding:0;box-sizing:border-box}
+:root{
+--primary:#088178;
+--primary-dark:#066a62;
+--bg:#f8fafc;
+--white:#fff;
+--text:#111827;
+--muted:#6b7280;
+--border:#e5e7eb;
+}
+body{
+font-family:Poppins,sans-serif;
+background:
+radial-gradient(circle at top right,rgba(8,129,120,.1),transparent 35%),
+radial-gradient(circle at bottom left,rgba(8,129,120,.06),transparent 30%),
+var(--bg);
+color:var(--text);
+}
+.checkout-header{
+position:sticky;top:0;z-index:1000;
+display:flex;justify-content:space-between;align-items:center;
+padding:18px 40px;
+background:rgba(255,255,255,.85);
+backdrop-filter:blur(14px);
+border-bottom:1px solid var(--border);
+}
+.logo{font-family:'Dancing Script',cursive;font-size:2.4rem;color:var(--primary)}
+.back-link,.secure-pill{text-decoration:none;color:var(--text);font-weight:600}
+.page-wrapper{max-width:1300px;margin:auto;padding:40px 24px}
+.hero-banner{
+background:#fff;border-radius:24px;padding:30px;
+display:flex;justify-content:space-between;align-items:center;
+box-shadow:0 10px 30px rgba(0,0,0,.05);
+margin-bottom:30px;
+}
+.brand-name{color:var(--primary);font-family:'Dancing Script',cursive;font-size:2rem}
+.timer-box{font-size:1.4rem;font-weight:700;color:var(--primary)}
+.checkout-grid{display:grid;grid-template-columns:1fr 380px;gap:30px}
+.card,.summary-card{
+background:#fff;border-radius:24px;padding:30px;
+box-shadow:0 10px 30px rgba(0,0,0,.05);
+margin-bottom:24px;
+}
+.card h3,.summary-card h3{margin-bottom:20px}
+.input-group{margin-bottom:18px}
+label{display:block;font-size:.8rem;font-weight:600;margin-bottom:8px}
+input,textarea,select{
+width:100%;padding:15px;border:1px solid var(--border);
+border-radius:14px;font-family:inherit;
+}
+input:focus,textarea:focus,select:focus{
+outline:none;border-color:var(--primary);
+box-shadow:0 0 0 4px rgba(8,129,120,.12);
+}
+.row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
+.totals-sidebar{position:sticky;top:100px}
+.order-item{display:flex;align-items:center;gap:15px;padding-bottom:18px}
+.item-thumb{
+width:70px;height:70px;border-radius:14px;
+display:flex;align-items:center;justify-content:center;
+background:#f3f4f6;font-size:1.5rem
+}
+.item-info{flex:1}
+.item-price{font-weight:700;color:var(--primary)}
+.totals{border-top:1px solid var(--border);padding-top:18px}
+.total-row{display:flex;justify-content:space-between;margin-bottom:12px}
+.grand{
+padding-top:12px;border-top:1px solid var(--border);
+font-weight:700;font-size:1.1rem
+}
+.submit-btn{
+width:100%;padding:18px;border:none;
+border-radius:999px;color:#fff;font-weight:700;
+background:linear-gradient(135deg,#088178,#10b5a8);
+cursor:pointer;margin-top:20px;
+}
+.secure-badge{text-align:center;margin-top:12px;color:var(--muted)}
+.success-overlay{display:none}
+.error-msg{display:none;color:#dc2626;font-size:.8rem}
+
+@media(max-width:900px){
+.checkout-grid{grid-template-columns:1fr}
+.totals-sidebar{position:static}
+.row{grid-template-columns:1fr}
+.hero-banner{flex-direction:column;gap:15px;text-align:center}
 }
-
-.popup-btn:hover {
-  background: var(--teal-dark);
-}
-
-/* ══════════════════════════════════════════
-   RESPONSIVE
-══════════════════════════════════════════ */
-
-@media (max-width: 880px) {
-  nav {
-    padding: 0 20px;
-  }
-
-  .nav-links {
-    display: none;
-  }
-
-  .checkout-grid {
-    grid-template-columns: 1fr;
-  }
-}
-
-@media (max-width: 500px) {
-  .row {
-    grid-template-columns: 1fr;
-  }
-
-  .payment-tabs {
-    grid-template-columns: 1fr;
-  }
-
-  .page-title h1 {
-    font-size: 1.5rem;
-  }
-}
-
-/* ── Validation States ── */
-.input-group input.is-valid,
-.input-group textarea.is-valid,
-.input-group select.is-valid {
-  border-color: #22c55e !important;
-  box-shadow: 0 0 8px rgba(34, 197, 94, 0.2) !important;
-}
-
-.input-group input.is-invalid,
-.input-group textarea.is-invalid,
-.input-group select.is-invalid {
-  border-color: #dc2626 !important;
-  box-shadow: 0 0 8px rgba(220, 38, 38, 0.2) !important;
-}
-
-.error-msg {
-  display: none;
-  color: #dc2626;
-  font-size: 0.8rem;
-  margin-top: 6px;
-  font-weight: 500;
-  text-align: left;
-}
-
-.input-group input.is-invalid ~ .error-msg,
-.input-group textarea.is-invalid ~ .error-msg,
-.input-group select.is-invalid ~ .error-msg {
-  display: block;
-}
-
diff --git a/checkout.html b/checkout.html
index bd3fda49..9f452ebf 100644
--- a/checkout.html
+++ b/checkout.html
@@ -1,250 +1,171 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
-  <title>Secure Checkout – Cara</title>
-
-  <link rel="preconnect" href="https://fonts.googleapis.com">
-  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Dancing+Script:wght@700&display=swap" rel="stylesheet">
-  <link href="https://cdn.jsdelivr.net/npm/remixicon@4.5.0/fonts/remixicon.css" rel="stylesheet" />
-
-  <!-- Checkout styles -->
-  <link rel="stylesheet" href="checkout.css" />
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Secure Checkout – Cara</title>
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Dancing+Script:wght@700&display=swap" rel="stylesheet">
+<link href="https://cdn.jsdelivr.net/npm/remixicon@4.5.0/fonts/remixicon.css" rel="stylesheet">
+<link rel="stylesheet" href="checkout.css">
 </head>
 <body>
 
-  <div class="checkout-container">
-
-    <div class="checkout-header">
-      <div class="back-to-cart">
-        <a href="cart.html" class="back-link" aria-label="Back to cart"><i class="ri-arrow-left-line"></i> Back to Cart</a>
-        <a href="#" id="logout-btn" style="display:none">Logout</a>
-      </div>
-      <div class="logo">
-        <span>Cara</span>
-      </div>
-    </div>
-
+<header class="checkout-header">
+    <a href="cart.html" class="back-link"><i class="ri-arrow-left-line"></i> Back to Cart</a>
+    <div class="logo">Cara</div>
+    <div class="secure-pill"><i class="ri-lock-line"></i> Secure Checkout</div>
+</header>
 
-  <!-- ══ PAGE ══ -->
-  <div class="page-wrapper">
+<main class="page-wrapper">
 
-    <!-- Back button -->
-    <button class="back-btn" onclick="window.location.href='cart.html'">
-      <i class="ri-arrow-left-line"></i> Back to Cart
-    </button>
-
-    <!-- Page title -->
-    <div class="page-title">
-      <span class="brand-name">Cara</span>
-      <h1>Checkout Your Order</h1>
-      <p>Fill all details to complete your order</p>
-    </div>
-
-    <!-- Countdown Timer Banner -->
-    <div id="checkout-timer-banner" style="background: #fff3cd; color: #856404; padding: 12px; border-radius: 8px; margin-bottom: 20px; display: flex; align-items: center; gap: 10px; border: 1px solid #ffeeba; font-weight: 500;">
-      <i class="ri-time-line" style="font-size: 20px;"></i>
-      <span>Items are reserved! Complete your purchase within <strong id="countdown-timer">10:00</strong> minutes.</span>
+<div class="hero-banner">
+    <div>
+        <span class="brand-name">Cara</span>
+        <h1>Checkout Your Order</h1>
+        <p>Complete your purchase securely.</p>
     </div>
-    
-    <script>
-    document.addEventListener("DOMContentLoaded", () => {
-      const timerElement = document.getElementById("countdown-timer");
-      if (!timerElement) return;
-      let timeRemaining = 600;
-      const interval = setInterval(() => {
-        const minutes = Math.floor(timeRemaining / 60);
-        const seconds = timeRemaining % 60;
-        timerElement.textContent = `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
-        if (timeRemaining <= 0) {
-          clearInterval(interval);
-          alert("Reservation time expired. Please refresh the page to reserve items again.");
-          window.location.href = "cart.html";
-        }
-        timeRemaining--;
-      }, 1000);
-    });
-    </script>
-    <form id="checkoutForm" novalidate>
-
-      <div class="input-group">
-        <label for="fullName">Full Name</label>
-        <input type="text" id="fullName" placeholder="Enter your full name" data-validate="fullName" required>
-        <span class="error-msg"></span>
-      </div>
-
-        <!-- Contact Information -->
-        <fieldset class="card">
-          <legend class="card-title">
-            <i class="ri-user-3-line"></i> Contact Information
-          </legend>
-
-        <div class="input-group">
-          <label for="email">Email Address</label>
-          <input type="email" id="email" placeholder="Enter your email" data-validate="email" required>
-          <span class="error-msg"></span>
-        </div>
-
-        <div class="input-group">
-          <label for="phone">Phone Number</label>
-          <input type="tel" id="phone" placeholder="Enter phone number" data-validate="phone" autocomplete="tel" required>
-          <span class="error-msg"></span>
-        </div>
-        </fieldset>
-
-      <div class="input-group">
-        <label for="address">Delivery Address</label>
-        <textarea id="address" placeholder="Enter full address" data-validate="address" autocomplete="street-address" required></textarea>
-        <span class="error-msg"></span>
-      </div>
-
-        <div class="input-group">
-          <label for="city">City</label>
-          <input type="text" id="city" placeholder="Enter city" data-validate="city" required>
-          <span class="error-msg"></span>
-        </div>
-
-        <div class="input-group">
-          <label for="zip">ZIP Code</label>
-          <input type="text" id="zip" placeholder="ZIP Code" data-validate="zip" required>
-          <span class="error-msg"></span>
-        </div>
-
-      </div>
-
-      <!-- PAYMENT METHOD -->
-      <div class="input-group">
-        <label for="paymentMethod">Select Payment Method</label>
-
-        <select id="paymentMethod" data-validate="paymentMethod" required>
-          <option value="">Choose Payment Method</option>
-          <option value="cod">Cash On Delivery</option>
-          <option value="online">Online Payment</option>
-        </select>
-        <span class="error-msg"></span>
-      </div>
-
-      <!-- CARD DETAILS -->
-      <div class="payment-box" id="cardDetails">
-
-          <div class="payment-tabs">
-            <div class="payment-tab active" id="tabCOD" onclick="selectPayment('cod')">
-              <i class="ri-money-rupee-circle-line"></i> Cash on Delivery
-            </div>
-            <div class="payment-tab" id="tabOnline" onclick="selectPayment('online')">
-              <i class="ri-bank-card-2-line"></i> Online Payment
-            </div>
-          </div>
-
-        <div class="input-group">
-          <label for="cardName">Card Holder Name</label>
-          <input type="text" id="cardName" placeholder="Card holder name" autocomplete="cc-name" data-validate="cardName">
-          <span class="error-msg"></span>
-        </div>
-
-        <div class="input-group">
-          <label for="cardNumber">Card Number</label>
-          <input
-            type="text"
-            id="cardNumber"
-            placeholder="XXXX XXXX XXXX XXXX"
-            inputmode="numeric"
-            autocomplete="cc-number"
-            maxlength="19"
-            data-validate="cardNumber"
-          >
-          <span class="error-msg"></span>
-        </div>
-
-        <div class="row">
-
-          <div class="input-group">
-            <label for="expiry">Expiry Date</label>
-            <input
-              type="text"
-              id="expiry"
-              placeholder="MM/YY"
-              inputmode="numeric"
-              autocomplete="cc-exp"
-              maxlength="5"
-              data-validate="expiry"
-            >
-            <span class="error-msg"></span>
-          </div>
-
-          <div class="input-group">
-            <label for="cvv">CVV</label>
-            <input
-              type="password"
-              id="cvv"
-              placeholder="***"
-              inputmode="numeric"
-              autocomplete="cc-csc"
-              maxlength="4"
-              data-validate="cvv"
-            >
-            <span class="error-msg"></span>
-          </div>
-
-      <!-- COLUMN PREVIEW OR SIDEBAR -->
-      <div class="totals-sidebar">
-        <!-- Preview and Totals -->
-        <fieldset class="card">
-          <legend class="card-title">
-            <i class="ri-shopping-bag-3-line"></i> Order Summary
-          </legend>
-          <div class="order-item">
-            <div class="item-thumb"><i class="ri-shirt-line"></i></div>
-            <div class="item-info">
-              <div class="item-name">Tropical Print Shirt</div>
-              <div class="item-meta">H&M · Size L · Qty 2</div>
-            </div>
-            <div class="item-price">₹1,799</div>
-          </div>
-          <div class="totals">
-            <div class="total-row">
-              <span>Subtotal</span>
-              <span>₹4,097</span>
-            </div>
-            <div class="total-row free-ship">
-              <span>Shipping</span>
-              <span>Free</span>
-            </div>
-            <div class="total-row">
-              <span>Tax (5%)</span>
-              <span>₹205</span>
-            </div>
-            <div class="total-row grand">
-              <span>Total</span>
-              <span>₹4,302</span>
-            </div>
-          </div>
-          <button type="submit" class="submit-btn">
-            <i class="ri-shield-check-line"></i> Place Your Order
-          </button>
-          <div class="secure-badge">
-            <i class="ri-lock-line"></i> 100% Secure Checkout
-          </div>
-        </fieldset>
-      </div>
-
-    </form>
-  </div><!-- /page-wrapper -->
-
-  <!-- ══ SUCCESS POPUP ══ -->
-  <div class="success-overlay" id="successOverlay">
-    <div class="popup-box">
-      <div class="check-circle"><i class="ri-check-line"></i></div>
-      <h2>Order Successful!</h2>
-      <p>Your order has been placed successfully. We'll send you a confirmation shortly.</p>
-      <button class="popup-btn" onclick="window.location.href='shop.html'">Continue Shopping</button>
+    <div class="timer-box">
+        <i class="ri-time-line"></i>
+        <span id="countdown-timer">10:00</span>
     </div>
-  </div>
-
-  <script src="checkout.js"></script>
-  <script src="js/checkout-timer.js" defer></script>
-
-<script src="js/checkout-autosave.js" defer></script>
+</div>
+
+<form id="checkoutForm" novalidate>
+<div class="checkout-grid">
+
+<section class="checkout-left">
+
+<div class="card">
+<h3><i class="ri-user-3-line"></i> Contact Information</h3>
+
+<div class="input-group">
+<label for="fullName">Full Name</label>
+<input type="text" id="fullName" data-validate="fullName" required>
+<span class="error-msg"></span>
+</div>
+
+<div class="row">
+<div class="input-group">
+<label for="email">Email</label>
+<input type="email" id="email" data-validate="email" required>
+<span class="error-msg"></span>
+</div>
+
+<div class="input-group">
+<label for="phone">Phone</label>
+<input type="tel" id="phone" data-validate="phone" required>
+<span class="error-msg"></span>
+</div>
+</div>
+</div>
+
+<div class="card">
+<h3><i class="ri-map-pin-line"></i> Shipping Address</h3>
+
+<div class="input-group">
+<label for="address">Address</label>
+<textarea id="address" data-validate="address"></textarea>
+<span class="error-msg"></span>
+</div>
+
+<div class="row">
+<div class="input-group">
+<label for="city">City</label>
+<input type="text" id="city" data-validate="city">
+<span class="error-msg"></span>
+</div>
+
+<div class="input-group">
+<label for="zip">ZIP Code</label>
+<input type="text" id="zip" data-validate="zip">
+<span class="error-msg"></span>
+</div>
+</div>
+</div>
+
+<div class="card">
+<h3><i class="ri-bank-card-line"></i> Payment</h3>
+
+<select id="paymentMethod" data-validate="paymentMethod">
+<option value="">Choose Payment Method</option>
+<option value="cod">Cash On Delivery</option>
+<option value="online">Online Payment</option>
+</select>
+
+<div id="cardDetails" class="card-details">
+<div class="row">
+<div class="input-group">
+<label for="cardName">Card Holder</label>
+<input type="text" id="cardName">
+</div>
+
+<div class="input-group">
+<label for="cardNumber">Card Number</label>
+<input type="text" id="cardNumber">
+</div>
+</div>
+
+<div class="row">
+<div class="input-group">
+<label for="expiry">Expiry</label>
+<input type="text" id="expiry">
+</div>
+
+<div class="input-group">
+<label for="cvv">CVV</label>
+<input type="password" id="cvv">
+</div>
+</div>
+</div>
+</div>
+
+</section>
+
+<aside class="totals-sidebar">
+<div class="summary-card">
+<h3>Order Summary</h3>
+
+<div class="order-item">
+<div class="item-thumb"><i class="ri-shirt-line"></i></div>
+<div class="item-info">
+<div class="item-name">Tropical Print Shirt</div>
+<div class="item-meta">Size L × 2</div>
+</div>
+<div class="item-price">₹1,799</div>
+</div>
+
+<div class="totals">
+<div class="total-row"><span>Subtotal</span><span>₹4,097</span></div>
+<div class="total-row"><span>Shipping</span><span>Free</span></div>
+<div class="total-row"><span>Tax</span><span>₹205</span></div>
+<div class="total-row grand"><span>Total</span><span>₹4,302</span></div>
+</div>
+
+<button type="submit" class="submit-btn">
+<i class="ri-shield-check-line"></i> Place Order
+</button>
+
+<div class="secure-badge">
+<i class="ri-lock-line"></i> 100% Secure Checkout
+</div>
+</div>
+</aside>
+
+</div>
+</form>
+
+</main>
+
+<div class="success-overlay" id="successOverlay">
+<div class="popup-box">
+<div class="check-circle"><i class="ri-check-line"></i></div>
+<h2>Order Successful!</h2>
+<p>Your order has been placed successfully.</p>
+<button class="popup-btn">Continue Shopping</button>
+</div>
+</div>
+
+<script src="checkout.js"></script>
 </body>
 </html>