Checkout Page

<div class="container py-4">
  <!-- i. Breadcrumb Section -->
  <nav aria-label="breadcrumb" class="mb-4">
    <ol class="breadcrumb bg-light p-3 rounded-4 shadow-sm">
      <li class="breadcrumb-item"><a href="#" class="text-decoration-none text-primary">Home</a></li>
      <li class="breadcrumb-item"><a href="#" class="text-decoration-none text-primary">Cart</a></li>
      <li class="breadcrumb-item active" aria-current="page">Checkout</li>
    </ol>
  </nav>

  <div class="row g-4">
    <!-- ii. Billing & Shipping Details Form -->
    <div class="col-lg-8">
      <div class="card border-0 shadow-sm rounded-4 p-4 mb-4">
        <h4 class="fw-bold mb-4"><i class="bi bi-geo-alt me-2 text-primary"></i>Billing & Shipping Details</h4>
        <form>
          <div class="row g-3">
            <div class="col-md-6">
              <label class="form-label small fw-bold">First Name</label>
              <input type="text" class="form-control rounded-pill border-light-subtle shadow-none bg-light" placeholder="e.g. John" required>
            </div>
            <div class="col-md-6">
              <label class="form-label small fw-bold">Last Name</label>
              <input type="text" class="form-control rounded-pill border-light-subtle shadow-none bg-light" placeholder="e.g. Doe" required>
            </div>
            <div class="col-12">
              <label class="form-label small fw-bold">Address</label>
              <input type="text" class="form-control rounded-pill border-light-subtle shadow-none bg-light" placeholder="123 Shopping St, Dhaka" required>
            </div>
            <div class="col-md-6">
              <label class="form-label small fw-bold">Email Address</label>
              <input type="email" class="form-control rounded-pill border-light-subtle shadow-none bg-light" placeholder="john@example.com" required>
            </div>
            <div class="col-md-6">
              <label class="form-label small fw-bold">Phone Number</label>
              <input type="tel" class="form-control rounded-pill border-light-subtle shadow-none bg-light" placeholder="+880 1XXX-XXXXXX" required>
            </div>
            <div class="col-md-6">
              <label class="form-label small fw-bold">City</label>
              <select class="form-select rounded-pill border-light-subtle shadow-none bg-light">
                <option selected>Dhaka</option>
                <option>Chittagong</option>
                <option>Sylhet</option>
              </select>
            </div>
            <div class="col-md-6">
              <label class="form-label small fw-bold">Postcode / ZIP</label>
              <input type="text" class="form-control rounded-pill border-light-subtle shadow-none bg-light" placeholder="1200">
            </div>
            <div class="col-12">
              <div class="form-check">
                <input class="form-check-input" type="checkbox" id="saveInfo">
                <label class="form-check-label small" for="saveInfo">Save this information for next time</label>
              </div>
            </div>
          </div>
        </form>
      </div>

      <!-- iv. Payment Gateway Selection -->
      <div class="card border-0 shadow-sm rounded-4 p-4">
        <h4 class="fw-bold mb-4"><i class="bi bi-wallet2 me-2 text-primary"></i>Select Payment Method</h4>
        <div class="row g-3">
          <div class="col-md-4">
            <input type="radio" class="btn-check" name="payment" id="cod" checked>
            <label class="btn btn-outline-dark w-100 py-3 rounded-4" for="cod">
              <i class="bi bi-truck fs-3 d-block mb-2"></i>
              Cash on Delivery
            </label>
          </div>
          <div class="col-md-4">
            <input type="radio" class="btn-check" name="payment" id="card">
            <label class="btn btn-outline-dark w-100 py-3 rounded-4" for="card">
              <i class="bi bi-credit-card fs-3 d-block mb-2"></i>
              Credit / Debit Card
            </label>
          </div>
          <div class="col-md-4">
            <input type="radio" class="btn-check" name="payment" id="bkash">
            <label class="btn btn-outline-dark w-100 py-3 rounded-4" for="bkash">
              <i class="bi bi-phone fs-3 d-block mb-2"></i>
              bKash / Nagad
            </label>
          </div>
        </div>
      </div>
    </div>

    <!-- Right Side: iii. Order Summary Box -->
    <div class="col-lg-4">
      <div class="sticky-top" style="top: 100px; z-index: 1;">
        <div class="card border-0 shadow-sm rounded-4 p-4 mb-4">
          <h5 class="fw-bold mb-4">Order Summary</h5>
          <div class="d-flex align-items-center mb-3">
            <img src="https://images.unsplash.com/photo-1542291026-7eec264c27ff?w=60" class="rounded-3 border me-3" alt="Item">
            <div class="flex-grow-1">
              <h6 class="small fw-bold mb-0">Red Sport Shoes</h6>
              <small class="text-muted">Qty: 1</small>
            </div>
            <span class="small fw-bold">$85.00</span>
          </div>
          <div class="d-flex align-items-center mb-3">
            <img src="https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=60" class="rounded-3 border me-3" alt="Item">
            <div class="flex-grow-1">
              <h6 class="small fw-bold mb-0">Studio Headphones</h6>
              <small class="text-muted">Qty: 1</small>
            </div>
            <span class="small fw-bold">$299.00</span>
          </div>
          <hr>
          <div class="d-flex justify-content-between mb-2 small text-muted">
            <span>Subtotal</span>
            <span>$384.00</span>
          </div>
          <div class="d-flex justify-content-between mb-2 small text-muted">
            <span>Shipping Fee</span>
            <span>$12.00</span>
          </div>
          <div class="d-flex justify-content-between mt-3">
            <h5 class="fw-bolder">Total Pay</h5>
            <h5 class="fw-bolder text-primary">$396.00</h5>
          </div>
          <button class="btn btn-primary w-100 btn-lg rounded-pill py-3 fw-bold mt-4 shadow">Place Order Now</button>
        </div>

        <!-- v. Trust Badges & Secure Checkout Slider -->
        <div id="trustSlider" class="carousel slide bg-light rounded-4 overflow-hidden" data-bs-ride="carousel">
          <div class="carousel-inner p-3 text-center">
            <div class="carousel-item active">
              <i class="bi bi-shield-check text-success fs-1"></i>
              <h6 class="fw-bold mt-2">SSL Secure Transaction</h6>
              <p class="small text-muted mb-0">Your data is always encrypted.</p>
            </div>
            <div class="carousel-item">
              <i class="bi bi-arrow-counterclockwise text-primary fs-1"></i>
              <h6 class="fw-bold mt-2">7 Days Return Policy</h6>
              <p class="small text-muted mb-0">Easy returns if not satisfied.</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<style>
  .breadcrumb-item+.breadcrumb-item::before {
    content: ">";
  }

  .form-control:focus,
  .form-select:focus {
    background-color: #fff;
    border-color: #0d6efd;
  }

  .btn-check:checked+.btn-outline-dark {
    background-color: #0d6efd;
    border-color: #0d6efd;
    color: white;
  }

</style>