* { margin: 0; padding: 0; box-sizing: border-box; font-family: Arial, sans-serif; }  
        body { background: #f8f8f8; color: #333; } 
                /* Navbar */
        .navbar { 
            position: fixed; 
            top: 0; left: 0; width: 100%; 
            display: flex; justify-content: space-between; align-items: center; 
            padding: 15px 10%; background: white; 
            box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1); 
            z-index: 1000;
        }
 
        .navbar {
    border-bottom: 1px solid #FF0000;  /* Change color as needed */
}
        .logo img { height: 40px; }

        .nav-links { 
            list-style: none; 
            display: flex; gap: 20px; 
        }
        .nav-links li { display: inline; }
        .nav-links a { 
            color: #333; text-decoration: none; font-size: 16px; font-weight: bold; 
        }
        .btn-login { 
            background: #FF0000; padding: 8px 15px; 
            border-radius: 5px; color: white; 
            text-decoration: none; font-weight: bold; 
        }

        /* Hamburger Menu */
        .menu-icon {
            display: none;
            font-size: 24px;
            cursor: pointer;
            color: red;
        }

        /* Mobile Navigation */
        @media (max-width: 768px) {
            .menu-icon { display: block; position: relative; z-index: 1100; }
            
            .nav-links { 
                position: absolute; top: 75px; right: 0; 
                background: white; width: 100%; 
                flex-direction: column; 
                text-align: center; padding: 0;
                box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
                
                /* Initially hidden */
                height: 0;
                overflow: hidden;
                transition: height 0.5s ease-in-out;
            }
            .nav-links.active { height: auto; padding: 10px 0; }
            
            .nav-links li { padding: 10px; border-bottom: 1px solid #ddd; }
        }
       
       #userEmail {
    max-width: 180px;  /* ✅ Increased width */
    overflow: hidden;  
    text-overflow: ellipsis; /* ✅ Shows "..." when text overflows */
    white-space: nowrap;  
    display: inline-block;
    font-size: 16px; /* ✅ Slightly bigger text */
    font-weight: 500;
    vertical-align: middle;
    padding: 0 10px; /* ✅ Add some spacing */
}
    
    /* ✅ Checkout Page Styling */
.checkout-container {
    background: white;
    padding: 20px;
    margin: 30px auto;
    border-radius: 10px;
    max-width: 600px;
    text-align: center;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}

.checkout-container h2 {
    font-size: 22px;
    color: #d40000;
}

.order-details {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

/* ✅ Image Container */
.image-container {
    display: flex;
    justify-content: center;
    gap: 15px;
}

.image-container img {
    width: 180px;
    height: auto;
    border: 2px solid #ddd;
    border-radius: 0px;
}

/* ✅ Shipping Address */
.shipping-container {
    background: white;
    padding: 20px;
    margin: 20px auto;
    border-radius: 10px;
    max-width: 600px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    text-align: left;
}

.shipping-container h2 {
    font-size: 22px;
    color: #d40000;
    text-align: center;
}

/* ✅ Improved Payment Button */
button#placeOrderBtn {
  display: block;
  background: #d40000;
  color: white;
  font-size: 16px;
  padding: 12px 20px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-weight: bold;
  min-width: 180px;
  text-align: center;
  margin: 20px auto;
  /* Centering */
  transition: background 0.3s, transform 0.2s;
  box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.2);
}

button#placeOrderBtn:hover {
  background: #b00000;
  transform: scale(1.05);
}
/* ✅ Responsive */
@media (max-width: 768px) {
    .image-container {
        flex-direction: column;
        align-items: center;
    }
}