@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

:root {
    --primary-blue: #0D6EFD;
    --success-green: #28A745;
    --text-dark: #212529;
    --text-light: #6c757d;
    --bg-light: #F8F9FA;
    --warning-bg: #FFF3CD;
    --warning-text: #856404;
    --white: #ffffff;
    --border-color: #dee2e6;
    --font-main: 'Poppins', sans-serif;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-main);
    color: var(--text-dark);
    background-color: var(--white);
    line-height: 1.5;
    padding-bottom: 80px;
    /* Space for sticky footer */
}

a {
    text-decoration: none;
    color: inherit;
}

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

/* Utilities */
.text-center {
    text-align: center;
}

.text-success {
    color: var(--success-green);
}

.text-danger {
    color: #dc3545;
}

.fw-bold {
    font-weight: 700;
}

.d-flex {
    display: flex;
}

.justify-content-between {
    justify-content: space-between;
}

.align-items-center {
    align-items: center;
}

.mb-2 {
    margin-bottom: 0.5rem;
}

.mb-3 {
    margin-bottom: 1rem;
}

.mt-3 {
    margin-top: 1rem;
}

.py-3 {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

/* Sticky Header */
.top-promo-banner {
    background-color: #000;
    color: #fff;
    text-align: center;
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.promo-gif {
    width: 100%;
    height: auto;
    border-radius: 4px;
    margin-top: 10px;
}

.promo-text {
    font-size: 18px;
    font-weight: bold;
    color: #ffd700;
    /* Gold color for impact */
    animation: flash 2s infinite;
}

@keyframes flash {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

.sticky-top-bar {
    background-color: #f8f9fa;
    border-bottom: 1px solid #ddd;
    text-align: center;
    padding: 5px 0;
    font-size: 14px;
    font-weight: 500;
}

.main-header {
    background: var(--white);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
}

.brand-logo img {
    height: 40px;
}

.govt-logo img {
    height: 40px;
}

/* Hero Section */
.hero-section {
    padding: 20px 0;
    text-align: center;
}

.rating-stars {
    color: #ffc107;
    margin-bottom: 10px;
}

.product-badges {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 15px;
}

.badge {
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    color: white;
}

.badge-gmp {
    background-color: #007bff;
}

.badge-original {
    background-color: var(--success-green);
}

.product-image-container {
    margin: 20px 0;
}

.product-image {
    max-width: 100%;
    height: auto;
    max-height: 400px;
}

.product-title {
    font-size: 24px;
    font-weight: 800;
    margin-bottom: 10px;
}

.price-container {
    font-size: 24px;
    margin-bottom: 20px;
}

.old-price {
    text-decoration: line-through;
    color: var(--text-light);
    font-size: 18px;
    margin-right: 10px;
}

.new-price {
    color: var(--text-dark);
    font-weight: 700;
}

.order-btn {
    display: inline-block;
    background-color: var(--primary-blue);
    color: white;
    padding: 15px 40px;
    font-size: 18px;
    font-weight: 600;
    border-radius: 50px;
    box-shadow: 0 4px 6px rgba(13, 110, 253, 0.3);
    border: none;
    cursor: pointer;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(13, 110, 253, 0.7);
    }

    70% {
        transform: scale(1.05);
        box-shadow: 0 0 0 10px rgba(13, 110, 253, 0);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(13, 110, 253, 0);
    }
}

/* Info Banner */
.info-banner {
    background-color: #e2e6ea;
    padding: 15px;
    text-align: center;
    margin: 20px 15px;
    border-radius: 8px;
}

.support-info {
    font-size: 14px;
    margin-top: 5px;
}

/* Ingredients */
.section-title {
    text-align: center;
    font-size: 28px;
    font-weight: 700;
    margin: 40px 0 20px;
    position: relative;
    padding-bottom: 10px;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background-color: var(--primary-blue);
}

.ingredients-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    padding: 0 15px;
}

.ingredient-card {
    background: white;
    padding: 15px;
    text-align: center;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    border: 1px solid #eee;
}

.ingredient-img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 50%;
    margin-bottom: 10px;
    background-color: #f8f9fa;
}

/* Reviews Section New Design */
.reviews-section-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px 15px;
    background: #fff;
}

.reviews-header-top {
    text-align: center;
    margin-bottom: 20px;
}

.reviews-header-top h2 {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 10px;
    color: var(--text-dark);
}

.overall-rating {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.star-row {
    color: var(--text-dark);
    font-size: 20px;
}

.star-filled {
    color: var(--text-dark);
    /* The image shows black/dark stars for the header or solid color */
}

/* Actually image shows solid black stars in the very header? No, they look like standard stars but maybe outline is verified? 
   Wait, the image shows "4.47 out of 5" and Black stars? Or Dark Blue? 
   Let's stick to standard gold or the dark color from image. 
   Image: Stars are Black with some fill. Let's use black for accuracy to image. */
.rating-stars-black {
    color: #000;
}

.rating-text {
    font-size: 16px;
    color: var(--text-dark);
    font-weight: 500;
}

.review-count-sub {
    color: #666;
    font-size: 14px;
}

/* Rating Distribution Bars */
.rating-distribution {
    margin: 20px 0;
}

.dist-row {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    font-size: 14px;
    color: #333;
}

.dist-stars {
    min-width: 80px;
    display: flex;
}

.dist-bar-container {
    flex-grow: 1;
    height: 12px;
    background-color: #f1f1f1;
    border-radius: 6px;
    margin: 0 10px;
    overflow: hidden;
}

.dist-bar-fill {
    height: 100%;
    background-color: #1a73e8;
    /* Google blue-ish */
    border-radius: 6px;
}

.dist-count {
    min-width: 30px;
    text-align: right;
    color: #666;
}

/* Review Actions Buttons */
.review-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 25px 0;
}

.btn-write-review,
.btn-ask-question {
    width: 100%;
    padding: 12px;
    border-radius: 25px;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    font-size: 16px;
    transition: all 0.2s;
}

.btn-write-review {
    background-color: #0D6EFD;
    color: white;
    border: none;
}

.btn-ask-question {
    background-color: white;
    color: #0D6EFD;
    border: 1px solid #0D6EFD;
}

/* Media Gallery */
.customer-media-section {
    margin-bottom: 30px;
}

.customer-media-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 15px;
    text-align: center;
}

.media-scroller {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 10px;
    justify-content: center;
    /* Centered as per image seems like */
}

.media-item {
    width: 100px;
    height: 100px;
    border-radius: 8px;
    object-fit: cover;
    border: 1px solid #eee;
    flex-shrink: 0;
}

/* Review Item Q&A Style */
.review-item-qa {
    border-top: 1px solid #eee;
    padding-top: 20px;
    margin-top: 20px;
}

.reviewer-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.user-avatar-placeholder {
    width: 40px;
    height: 40px;
    background-color: #f1f3f4;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #555;
    font-size: 18px;
}

.reviewer-name {
    font-weight: 700;
    font-size: 16px;
}

.review-date {
    margin-left: auto;
    font-size: 12px;
    color: #777;
}

.review-stars-small {
    font-size: 12px;
    color: #000;
    /* Matching the header style */
    margin-bottom: 5px;
}

.review-content-text {
    font-size: 14px;
    color: #333;
    margin-bottom: 15px;
    line-height: 1.5;
}

.admin-reply-box {
    background-color: #d1f2eb;
    /* Light teal */
    padding: 15px;
    border-radius: 8px;
    font-size: 14px;
    color: #333;
    line-height: 1.5;
}

.reply-header {
    font-weight: 600;
    margin-bottom: 5px;
    color: #000;
}

/* Sticky Footer */
.sticky-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: white;
    z-index: 1000;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
}

.delivery-bar {
    background-color: var(--success-green);
    color: white;
    text-align: center;
    padding: 5px;
    font-size: 13px;
    font-weight: 500;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
}

.footer-price {
    font-weight: bold;
    font-size: 18px;
}

.footer-btn {
    background-color: var(--primary-blue);
    color: white;
    padding: 10px 30px;
    border-radius: 5px;
    font-weight: 600;
}


/* --- Responsive & Desktop Optimizations --- */

/* Utility for responsive container padding */
@media (min-width: 768px) {
    .container {
        padding: 0 30px;
        max-width: 960px;
    }
}

@media (min-width: 1024px) {
    .container {
        max-width: 1140px;
    }

    /* General Typography bump for desktop */
    body {
        font-size: 16px;
    }
}

/* Header Optimization */
@media (min-width: 768px) {
    .header-content {
        padding: 15px 30px;
    }

    .brand-logo span {
        font-size: 24px !important;
    }
}

/* Hero Section Desktop Split */
@media (min-width: 992px) {
    .hero-section {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        text-align: left;
        gap: 40px;
        padding: 60px 0;
    }

    .hero-content-left {
        flex: 1;
        order: 1;
    }

    .hero-image-right {
        flex: 1;
        order: 2;
        display: flex;
        justify-content: center;
    }

    /* Re-ordering for visual hierarchy if needed, but usually image right is good or left. 
       Let's actually keep the requested structure: Image central is default mobile. 
       For desktop, let's put Image Left, Content Right or vice versa.
       Let's try: Image Left, Details Right for a "Product Page" feel.
    */
    .hero-section {
        /* Resetting previous flex to be specific */
        display: flex;
        align-items: center;
        justify-content: space-between;
        text-align: left;
    }

    /* We need to restructure HTML slightly or use Flexbox ordering heavily. 
       Since we can't easily change HTML structure without editing HTML file, 
       we will target elements by default order and verify.
       
       Current HTML order:
       1. Rating
       2. Badges
       3. Title
       4. Subtitle
       5. Image
       6. Price
       7. Button
       
       We want: 
       Left Col: Image
       Right Col: All text info
    */

    /* We'll use a Grid for easier placement or sticking to Flex with a wrapper? 
       Actually, since all items are direct children of .hero-section, 
       we can use Grid to place them into two columns.
    */
    .hero-section {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 40px;
        align-items: center;
        text-align: left;
    }

    /* Left Column: Image */
    .product-image-container {
        grid-column: 1;
        grid-row: 1 / span 6;
        /* Span multiple rows to cover height of text */
        margin: 0;
        display: flex;
        justify-content: center;
    }

    /* Right Column: Content */
    .rating-stars,
    .product-badges,
    .product-title,
    .text-secondary,
    /* Subtitle P */
    .price-container,
    .order-btn {
        grid-column: 2;
        justify-content: flex-start;
        /* For flex items inside like badges */
    }

    /* Specific alignments for right column items */
    .product-badges {
        justify-content: flex-start;
    }

    .product-title {
        font-size: 36px;
        line-height: 1.2;
    }

    .product-image {
        max-height: 500px;
        /* Larger image on desktop */
    }
}


/* Info Banner */
@media (min-width: 768px) {
    .info-banner {
        display: flex;
        justify-content: space-between;
        align-items: center;
        text-align: left;
        padding: 20px 40px;
    }

    .info-banner h3 {
        margin-bottom: 0;
    }

    .support-info {
        margin-top: 0;
        text-align: right;
    }
}

/* Ingredients Grid */
@media (min-width: 576px) {
    .ingredients-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 992px) {
    .ingredients-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 30px;
    }

    .ingredient-card {
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }

    .ingredient-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    }
}

/* Media Coverage Images */
@media (min-width: 768px) {
    .section-title {
        font-size: 36px;
    }

    /* Select container of media images (inline style in HTML unfortunately). 
       We can't easily target style attributes, but we can target the section > div */
}


/* Reviews Section */
@media (min-width: 768px) {
    .reviews-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

@media (min-width: 992px) {
    .reviews-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 30px;
    }

    .review-card {
        margin: 0;
        height: 100%;
    }
}

/* Bottom Nav / Desktop Footer */
@media (min-width: 768px) {
    .sticky-footer {
        position: static;
        padding: 10px 0;
    }

    .footer-content {
        justify-content: center;
        gap: 40px;
    }

    body {
        padding-bottom: 0;
    }
}

/* Order Section Form */
.order-section {
    background-color: #fff;
    padding: 30px 15px;
    margin-top: 20px;
    text-align: center;
    border-top: 5px solid var(--primary-blue);
    margin-bottom: 20px;
}

.order-cta-text {
    font-size: 20px;
    font-weight: 700;
    color: #d32f2f;
    /* Red for urgency */
    margin-bottom: 20px;
    line-height: 1.4;
}

.order-gif {
    width: 100%;
    height: auto;
    border-radius: 8px;
    margin-bottom: 25px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.order-form-container {
    max-width: 600px;
    margin: 0 auto;
    background: #f8f9fa;
    padding: 25px;
    border-radius: 10px;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08);
}

.form-group {
    margin-bottom: 15px;
    text-align: left;
}

.form-label {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
    color: var(--text-dark);
}

.form-control {
    width: 100%;
    padding: 12px;
    border: 1px solid #ced4da;
    border-radius: 5px;
    font-size: 16px;
    font-family: var(--font-main);
}

.form-control:focus {
    border-color: var(--primary-blue);
    outline: none;
    box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.25);
}

.order-submit-btn {
    width: 100%;
    background-color: var(--success-green);
    color: white;
    padding: 15px;
    font-size: 20px;
    font-weight: 700;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 10px;
    text-transform: uppercase;
    transition: background-color 0.3s;
    animation: pulse-green 2s infinite;
}

.order-submit-btn:hover {
    background-color: #218838;
}

@keyframes pulse-green {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.7);
    }

    70% {
        transform: scale(1.02);
        box-shadow: 0 0 0 10px rgba(40, 167, 69, 0);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(40, 167, 69, 0);
    }
}

.bottom-trust-img {
    max-width: 100%;
    height: auto;
    margin-top: 25px;
    border-radius: 8px;
}

/* Feature Highlight Section */
.feature-highlight-section {
    padding: 20px 15px;
    text-align: center;
    background-color: #fff3cd;
    /* Light warning bg for attention */
    margin: 20px 0;
}

.feature-text {
    font-size: 22px;
    font-weight: 800;
    color: #212529;
    margin-bottom: 20px;
    line-height: 1.4;
}

.feature-gif {
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

/* Second Feature Highlight */
.second-feature-section {
    padding: 20px 15px;
    text-align: center;
    background-color: #ffe5e5;
    /* Light red/pinkish background */
    margin: 20px 0;
    border-radius: 8px;
}

.feature-heading-large {
    font-size: 24px;
    font-weight: 800;
    color: #d32f2f;
    margin-bottom: 20px;
    line-height: 1.3;
    text-transform: uppercase;
}

/* Highlighted Benefits Section */
.highlight-benefits-section {
    background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
    padding: 30px 20px;
    margin: 30px 0;
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(255, 165, 0, 0.4);
}

.benefits-highlight {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.benefit-item {
    background-color: rgba(255, 255, 255, 0.95);
    padding: 15px 20px;
    font-size: 18px;
    font-weight: 700;
    color: #d32f2f;
    border-left: 5px solid #d32f2f;
    border-radius: 6px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.benefit-item:hover {
    transform: translateX(10px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
    background-color: #fff;
}