/* ===== Global ===== */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f5f5f5;
    color: #1f2937;
}
.container { width: 90%; max-width: 1200px; margin: auto; }

/* ===== HEADER ===== */
.header {
    background:#fff;
    box-shadow:0 4px 10px rgba(0,0,0,0.05);
    padding:15px 0;
    position:sticky;
    top:0;
    z-index:100;
}
.header-flex { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; }
.logo { height:50px; }
nav a { margin:0 15px; text-decoration:none; color:#1f2937; font-weight:600; }
nav a.active, nav a:hover { color:#4338ca; }
.menu-toggle { display:none; font-size:24px; cursor:pointer; }
.cart-icon { cursor:pointer; font-size:18px; }

/* ===== HERO ===== */
.hero {
    color:#fff;
    text-align:center;
    border-radius:12px;
    padding:100px 20px;
    margin-bottom:60px;
    background: linear-gradient(270deg, #4338ca, #facc15, #4338ca, #facc15);
    background-size: 400% 400%;
    animation: gradientBG 15s ease infinite;
}
@keyframes gradientBG { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }
.hero h1,.hero p,.hero-btn { opacity:0; transform:translateY(20px); animation:fadeUp 1s forwards; }
.hero h1{animation-delay:0.5s;} 
.hero p{animation-delay:1s;} 
.hero-btn{animation-delay:1.5s;}
@keyframes fadeUp{to{opacity:1;transform:translateY(0);} }
.hero-btn{background:#facc15;color:#1f2937;padding:15px 30px;border-radius:8px;text-decoration:none;font-weight:bold;transition:transform 0.3s;}
.hero-btn:hover{transform:scale(1.05);}

/* ===== GRIDS & CARDS ===== */
.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:25px; }
.card { background:rgba(255,255,255,0.9); border-radius:12px; overflow:hidden; box-shadow:0 10px 25px rgba(0,0,0,0.08); transition:transform 0.4s; display:flex; flex-direction:column; align-items:center;}
.card:hover{transform:translateY(-10px) scale(1.05);}
.card img{width:100%; display:block; border-bottom:1px solid #ddd;}
.card-content{padding:15px; text-align:center; width:100%;}
.card-title{font-weight:600; margin-bottom:10px; font-size:18px;}
.card-price{font-weight:bold;color:#4338ca;margin-bottom:15px;font-size:16px;}
.card-btn{background-color:#4338ca;color:#fff;padding:10px 20px;border-radius:8px;text-decoration:none;font-weight:bold; display:inline-block; transition:0.3s;}
.card-btn:hover{background-color:#1e3a8a; transform:scale(1.05);}
.card-fields, .bank-fields, .paypal-fields {display: none;flex-direction: column;gap: 10px;margin-top: 10px;  /* Ensure spacing from payment option buttons */}

/* ===== FEATURES ===== */
.feature-box{background:#fff;padding:25px;border-radius:12px;text-align:center; box-shadow:0 10px 25px rgba(0,0,0,0.05); transition:0.3s;}
.feature-box:hover{transform:translateY(-5px);}
.feature-box img{width:60px;margin-bottom:15px;}

/* ===== CHECKOUT ===== */
.checkout-container { max-width:1000px; margin:40px auto; padding:20px; display:flex; flex-direction:column; gap:30px; }
.checkout-shipping, .order-summary, .payment-section, .order-confirmation { background:#fff; padding:20px; border-radius:12px; box-shadow:0 5px 15px rgba(0,0,0,0.08);}
.checkout-shipping h3, .order-summary h3, .payment-section h3, .order-confirmation h3 { color:#4338ca; margin-bottom:15px; font-size:20px; }
.checkout-shipping form { display:grid; grid-template-columns:1fr 1fr; gap:15px; }
.checkout-shipping form input { width:100%; padding:10px; border-radius:6px; border:1px solid #d1d5db; font-size:14px; }
.checkout-shipping form input:focus { outline:none; border-color:#4338ca; box-shadow:0 0 0 2px rgba(67,56,202,0.2); }
.checkout-shipping form .full-width { grid-column:1 / -1; }
.checkout-section #payment-step {display: flex;flex-direction: column;gap: 15px;}

.summary-item { display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px solid #e5e7eb; font-size:15px; }
.summary-item.total { font-weight:bold; font-size:16px; }
.payment-method { display:block; margin-bottom:10px; cursor:pointer; }
.payment-method input { display:none; }
.method-box { display:block; padding:12px; border:1px solid #ddd; border-radius:8px; transition:0.3s; background:#fff; }
.payment-method input:checked + .method-box { border-color:#4338ca; background:#eef2ff; }
.payment-option {min-height: 50px;/* consistent height */ align-items: center;}
.place-order { padding:15px; border:none; border-radius:8px; background:linear-gradient(90deg,#facc15,#eab308); color:#1f2937; font-weight:bold; cursor:pointer; transition:0.3s; margin-top:10px;}
.place-order:hover { background:linear-gradient(90deg,#eab308,#ca8a04); }
.order-confirmation p { font-size:14px; margin:5px 0; }
.order-number { font-weight:bold; color:#22c55e; }

/* ===== FOOTER ===== */
.footer { text-align:center; padding:40px 20px; background:#1f2937; color:#fff; }

/* ===== MEDIA ===== */
@media(max-width:768px){
    .header-flex { flex-direction:column; align-items:flex-start;}
    nav { width:100%; flex-direction:column; display:none;}
    nav.show { display:flex;}
    nav a { margin:10px 0;}
    .menu-toggle { display:block; margin-top:10px;}
    .grid { grid-template-columns:1fr; }
    .checkout-shipping form { grid-template-columns:1fr; }
    .checkout-container { padding:15px; }
}
@media(max-width:768px){
    .payment-methods{flex-direction:column;}
    .payment-option{width:100%;}
    .card-fields, .bank-fields{width:100%;}
}