/* style.css - Mobile First Design */
@import url('https://fonts.googleapis.com/css2?family=Hind+Siliguri:wght@400;600;700&display=swap');

* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Hind Siliguri', sans-serif; }

body { background-color: #f4f7f6; color: #333; }

/* Mobile Container */
.mobile-container {
    max-width: 480px;
    margin: 0 auto;
    background: #fff;
    min-height: 100vh;
    box-shadow: 0 0 15px rgba(0,0,0,0.1);
    padding-bottom: 50px;
}

/* Cards */
.card, .header-card {
    padding: 20px;
    margin: 10px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    border: 1px solid #eee;
}
.header-card { text-align: center; background: #fffcf9; }

h1 { font-size: 22px; color: #d32f2f; margin-bottom: 15px; font-weight: 700; }
h2 { font-size: 18px; color: #2c3e50; border-bottom: 2px dashed #ddd; padding-bottom: 8px; margin-bottom: 15px; }

/* Prices & Animations */
.price-section { margin: 20px 0; }

.regular-price {
    font-size: 20px;
    color: #777;
    text-decoration: line-through;
    display: block;
    margin-bottom: 10px;
}

.offer-badge {
    background: #d32f2f;
    color: #fff;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    box-shadow: 0 5px 15px rgba(211, 47, 47, 0.4);
}
.offer-text { font-size: 14px; text-transform: uppercase; }
.offer-price { font-size: 28px; font-weight: bold; margin: 0; padding: 0; border: none; color: #fff; }

.free-delivery { color: #27ae60; font-size: 16px; margin-top: 15px; font-weight: 700; }

/* Keyframes */
@keyframes strikePulse { 0% { opacity: 0.6; transform: scale(0.95); } 50% { opacity: 1; transform: scale(1.05); color: #ff0000; } 100% { opacity: 0.6; transform: scale(0.95); } }
.strike-pulse { animation: strikePulse 1.5s infinite; }

@keyframes circlePulse { 0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(211, 47, 47, 0.7); } 70% { transform: scale(1.05); box-shadow: 0 0 0 15px rgba(211, 47, 47, 0); } 100% { transform: scale(1); } }
.circle-pulse { animation: circlePulse 2s infinite; }

/* Buttons */
.btn-order {
    display: block;
    width: 100%;
    background: #ff5722;
    color: #fff;
    text-align: center;
    padding: 15px;
    font-size: 20px;
    font-weight: bold;
    border-radius: 8px;
    text-decoration: none;
    margin: 15px 0;
    box-shadow: 0 4px 6px rgba(255, 87, 34, 0.3);
}
.btn-submit { width: 100%; background: #4caf50; color: #fff; padding: 15px; font-size: 20px; border: none; border-radius: 8px; font-weight: bold; cursor: pointer; }

@keyframes blinkBtn { 0% { background: #ff5722; } 50% { background: #e64a19; transform: scale(1.02); } 100% { background: #ff5722; } }
.blink-btn { animation: blinkBtn 1s infinite; }

/* Benefits List */
.benefits { list-style: none; }
.benefits li { margin-bottom: 10px; padding-left: 25px; position: relative; font-size: 15px; }
.benefits li::before { content: '✅'; position: absolute; left: 0; color: #4caf50; }

/* Media */
.media-container img { width: 100%; border-radius: 8px; }
.gallery img { width: 100%; margin-bottom: 10px; border-radius: 8px; border: 1px solid #ddd; }
.review-scroll { display: flex; overflow-x: auto; gap: 10px; padding-bottom: 10px; }
.review-scroll img { height: 250px; border-radius: 8px; border: 1px solid #ccc; }

/* Form */
.input-group { margin-bottom: 15px; }
.input-group label { display: block; font-weight: 600; margin-bottom: 5px; }
.input-group input, .input-group textarea { width: 100%; padding: 12px; border: 1px solid #ccc; border-radius: 6px; font-size: 15px; }
.order-summary { background: #e8f5e9; padding: 15px; border-radius: 8px; margin-bottom: 15px; text-align: center; }
.qty-control { display: flex; justify-content: center; align-items: center; margin-bottom: 10px; }
.qty-control button { width: 35px; height: 35px; font-size: 20px; border: none; background: #fff; border-radius: 4px; cursor: pointer; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
.qty-control input { width: 50px; text-align: center; font-size: 18px; border: none; background: transparent; font-weight: bold; }
.total-price-display { font-size: 22px; font-weight: bold; color: #d32f2f; }

/* Floating Support */
.floating-support { position: fixed; bottom: 20px; right: 20px; z-index: 999; }
.support-btn { background: #007bff; color: white; border: none; width: 60px; height: 60px; border-radius: 50%; font-size: 25px; cursor: pointer; box-shadow: 0 4px 10px rgba(0,0,0,0.2); }
.pulse-support { animation: circlePulse 2s infinite; }
.support-options { position: absolute; bottom: 70px; right: 0; display: flex; flex-direction: column; gap: 10px; width: 160px; }
.support-options.hidden { display: none; }
.opt-btn { padding: 10px 15px; text-decoration: none; color: white; border-radius: 25px; text-align: center; font-weight: bold; font-size: 14px; box-shadow: 0 2px 5px rgba(0,0,0,0.2); }
.wa { background: #25D366; } .call { background: #1f91ce; } .imo { background: #0056b3; }

.mt-15 { margin-top: 15px; }