/* === Global Reset === */
body {
  font-family: 'Roboto', sans-serif;
  background-color: #000; /* dark base */
  color: #f8f9fa; /* light default text */
  margin: 0;
  padding: 0;
}

/* === Navbar === */
.navbar { background-color:#111; padding:0.8rem 1rem; }
.navbar-brand .logo { height:40px; }
.brand-text { font-weight:bold; font-size:1.2rem; color:#00aaff; }
.navbar-nav .nav-link { color:#f8f9fa !important; margin-left:15px; }
.navbar-nav .nav-link:hover { color:#ffc107 !important; }

/* === Hero (Home) === */
.hero {
  position:relative;
  background:url("../images/bmw-hero.jpg") no-repeat center center/cover;
  height:70vh; display:flex; align-items:center; justify-content:center;
  text-align:center; color:#fff;
}
.hero-overlay { position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.6); }
.hero-content-wrapper { position:relative; z-index:2; }
.hero h1 { font-size:3rem; font-weight:bold; margin-bottom:1rem; color:#ffc107; }
.hero p { font-size:1.2rem; margin-bottom:2rem; }

/* === Auth Container (shared wrapper) === */
.auth-container {
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  background:url('../images/bmw-hero.jpg') no-repeat center center;
  background-size:cover;
  padding:6rem;
}

/* === Cards (Auth, Cart, Checkout, Payment) === */
.auth-card, .cart-card, .checkout-summary, .payment-wrapper, .form-card {
  background:rgba(28,28,28,0.85);
  backdrop-filter:blur(12px);
  color:#f8f9fa;
  padding:2rem; border-radius:12px;
  box-shadow:0 8px 30px rgba(0,0,0,0.6);
  width:100%; max-width:900px; box-sizing:border-box;
  margin:2rem auto;
}
.auth-card h2, .checkout-summary h2, .cart-card h2, .payment-wrapper h2, .form-card h2 {
  color:#ffc107; font-weight:bold; margin-bottom:1.5rem;
  text-shadow:1px 1px 2px #000;
}

/* === Forms === */
.form-label {
  color:#f8f9fa;
  font-weight:500;
  text-shadow:1px 1px 2px #000;
}
.form-control {
  background:rgba(0,0,0,0.7);
  border:1px solid #444;
  color:#f8f9fa;
  width:100%;
}
.form-control:focus {
  border-color:#ffc107;
  box-shadow:0 0 5px #ffc107;
}
.form-control::placeholder { color:#ccc; }

/* === Buttons === */
.btn { border:none; border-radius:6px; font-weight:600; padding:10px 15px; }
.btn-primary, .btn-warning { background:#ffc107; color:#000; }
.btn-danger { background:#e74c3c; color:#fff; }
.btn-success { background:#28a745; color:#fff; }
.btn-link { color:#ffc107; }

/* === Cart Page === */
.cart-card { max-width:900px; }
.table-cart, .cart-table { width:100%; table-layout:fixed; border-collapse:collapse; }
.table-cart th, .cart-table th {
  background:#111; color:#ffc107; text-align:center; font-weight:600; padding:12px;
}
.table-cart td, .cart-table td {
  color:#f8f9fa; vertical-align:middle; word-wrap:break-word; white-space:normal;
  padding:12px; text-align:center;
}
.table-cart tbody tr:hover, .cart-table tbody tr:hover { background:#2f2f2f; }

/* Quantity column fix */
.table-cart td.qty {
  width: 80px;
  text-align: center;
}
.table-cart input[type="number"] {
  width: 60px;
  padding: 6px;
  text-align: center;
  border: 1px solid #444;
  border-radius: 4px;
  background: rgba(0,0,0,0.7);
  color: #f8f9fa;
}

.cart-total {
  text-align:right; font-size:1.4rem; font-weight:bold; color:#28a745;
  margin-top:1rem; border-top:1px solid #444; padding-top:0.5rem;
}
.cart-actions { display:flex; justify-content:flex-end; gap:12px; margin-top:20px; }
.cart-actions .btn { min-width:120px; }

/* === Checkout Page === */
.checkout-summary { max-width:900px; margin:3rem auto; }
.checkout-summary .cart-table tfoot td {
  font-weight:bold; background:#222; color:#28a745;
}

/* === Payment Wrapper === */
.payment-wrapper { max-width:600px; margin:3rem auto; text-align:center; }
.payment-wrapper h2 { color:#ffc107; font-weight:700; margin-bottom:1rem; }
#card-frame { background:#fff; border-radius:6px; padding:1rem; }
#pay-button {
  background:#ffc107; color:#000;
  font-size:1.2rem; font-weight:600;
  padding:0.75rem 2rem; border:none; border-radius:8px;
}

/* === Footer === */
.footer { background:rgba(53,53,53,0.8); color:#fff; padding:40px 20px; }
.footer h3 { color:#f8f9fa; }
.footer a { color:#f8f9fa; text-decoration:none; }
.footer a:hover { text-decoration:underline; }

/* === Responsive === */
@media (max-width:768px) {
  .auth-container { display:block; padding:1rem; }
  input, select, textarea { width:100%; padding:12px; margin-bottom:15px; }
  .btn { width:100%; margin:10px 0; }

  /* Cart table becomes card-like */
  .table-cart thead { display:none; }
  .table-cart tr {
    display:block; margin-bottom:1rem; border:1px solid #444;
    border-radius:8px; background:rgba(28,28,28,0.95); padding:0.75rem;
  }
  .table-cart td {
    display:flex; justify-content:space-between; padding:0.5rem;
    border:none; color:#f8f9fa; background:transparent;
  }
  .table-cart td::before {
    content: attr(data-label);
    font-weight:bold; color:#ffc107; margin-right:0.5rem;
  }

  /* Quantity input smaller on mobile */
  .table-cart td.qty { flex: 0 0 70px; }
  .table-cart input[type="number"] { width: 50px; font-size:0.9rem; }

  /* Buttons stack neatly */
  .cart-actions {
    flex-direction:column;
    gap:10px;
    margin-top:15px;
  }
  .cart-actions .btn { width:100%; }

  /* Total centered */
  .cart-total {
    text-align:center;
    font-size:1.2rem;
    margin-top:15px;
  }
}