/* Import Google Sans Flex handled in header via link tag for performance, 
   but we apply it here */

:root {
    --brand-yellow: #f4d500;
    --brand-blue: #035288;
    --text-dark: #333333;
}

body {
    font-family: "Google Sans Flex", "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: var(--text-dark);
    -webkit-font-smoothing: antialiased;
}

/* Specific Tweak for Top Bar */
.top-bar {
    background-color: #f8f9fa;
    font-size: 0.85rem;
    padding: 8px 0;
}

/* Navbar Hover Effects */
.nav-link:hover {
    color: var(--brand-blue) !important;
}

/* Footer Link Hover */
footer a:hover {
    text-decoration: underline !important;
}

/* --- HERO SECTION STYLES --- */
.hero-bg {
    background-color: #fcfbf7;
    padding: 60px 0 80px 0;
    position: relative;
    overflow-x: visible; /* Allow arrow to hang outside if needed */
}

/* Headline */
.hero-headline {
    font-size: 3.5rem;
    font-weight: 800;
    color: #1e1e1e;
    letter-spacing: -1px;
    margin-bottom: 15px;
    line-height: 1.1;
    text-align: left;
    /* Aligns perfectly with the search container padding */
    padding-left: 5px; 
}

/* Yellow Highlight */
.highlight-yellow {
    position: relative;
    z-index: 1;
}
.highlight-yellow::after {
    content: '';
    position: absolute;
    bottom: 6px;
    left: -2px;
    width: 105%;
    height: 35%;
    background-color: #f4d500;
    z-index: -1;
    transform: rotate(-1.5deg);
}

/* Search Container */
.search-container {
    position: relative; /* Anchor for the absolute arrow */
    width: 100%;
}

/* ABSOLUTE ARROW POSITIONING */
.arrow-side-icon {
    position: absolute;
    left: -85px; /* Move it to the left of the search bar */
    top: 50%;    /* Center vertically relative to search bar */
    transform: translateY(-50%) rotate(10deg); /* Adjust alignment */
    width: 65px;
    height: auto;
    opacity: 0.9;
    z-index: 1;
}

/* Search Pill */
/* --- HERO SEARCH FIX --- */
.search-pill {
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid #1e1e1e;
    border-radius: 50px;
    padding: 5px; /* Spacing for button */
    height: 64px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
    transition: box-shadow 0.2s, border-color 0.2s;
    width: 100%;
}

.search-pill:focus-within {
    border-color: #035288;
    box-shadow: 0 0 0 4px rgba(3, 82, 136, 0.15);
}

/* Icon */
.search-icon-box {
    padding-left: 20px;
    padding-right: 15px;
    color: #5e5e5e;
    font-size: 18px;
    display: flex;
    align-items: center;
}

/* Input Field - Added !important to override Bootstrap */
.hero-search-input {
    border: 0 !important;       /* KEY FIX */
    outline: 0 !important;      /* KEY FIX */
    box-shadow: none !important;/* KEY FIX */
    background: transparent !important;
    font-size: 1.1rem;
    height: 100%;
    color: #1e1e1e;
    padding-left: 0;
    flex-grow: 1;
}

.hero-search-input:focus {
    box-shadow: none !important;
    outline: none !important;
    border: none !important;
}

/* Button */
.btn-hero-search {
    background-color: #1e1e1e;
    color: #fff;
    border-radius: 50px;
    padding: 0 40px;
    height: 100%;
    font-weight: 700;
    font-size: 16px;
    border: none;
    white-space: nowrap;
    transition: background-color 0.2s;
}
.btn-hero-search:hover { background-color: #000; color: #fff; }
/* Recent Links */
.recent-links {
    font-size: 14px;
    color: #1e1e1e;
    padding-left: 5px; /* Align with Headline */
}
.recent-label { font-weight: 700; margin-right: 5px; }
.recent-item {
    color: #1e1e1e;
    text-decoration: underline;
    text-decoration-color: #ccc;
    text-underline-offset: 3px;
    font-weight: 500;
    padding: 0 5px;
}
.recent-item:hover { color: #035288; text-decoration-color: #035288; }
.clear-history {
    color: #035288;
    text-decoration: none;
    font-weight: 700;
    font-size: 13px;
}
.clear-history:hover { text-decoration: underline; }

/* --- MOBILE ADJUSTMENTS (Max-width 768px) --- */
@media (max-width: 768px) {
    .arrow-side-icon { display: none; } 
    .hero-headline { font-size: 2.5rem; text-align: center; padding-left: 0; }
    .hero-bg { text-align: center; padding: 40px 0; } 
    .recent-links { justify-content: center; padding-left: 0; margin-top: 15px; }
    
    /* Search Pill Container */
    .search-pill {
        height: 58px; /* Slightly taller for better touch target */
        padding: 4px; /* Space between border and button */
        flex-direction: row !important;
        flex-wrap: nowrap;
        border-radius: 50px;
        gap: 0;
        
        /* FIX: Forces content to respect the border radius strictly */
        -webkit-mask-image: -webkit-radial-gradient(white, black);
        overflow: hidden;
    }
    
    /* Input Field */
    .hero-search-input {
        padding: 0 0 0 20px; /* More padding so text doesn't hit the curve */
        text-align: left;
        font-size: 16px; /* Prevents iOS zoom */
        flex-grow: 1;    /* Takes available space */
        min-width: 0;    /* Allows shrinking if needed */
        height: 100%;
    }
    .search-icon-box { display: none; }
    
    /* Search Button (Circle Fix) */
    .btn-hero-search {
        width: 48px;        /* Fixed Width */
        min-width: 48px;    /* FIX: Prevents squishing into an oval */
        height: 48px;       /* Fixed Height */
        padding: 0;
        font-size: 18px;
        border-radius: 50%;
        margin-left: 4px;   /* Small gap from input */
        
        /* Centering */
        display: flex;
        align-items: center;
        justify-content: center;
        aspect-ratio: 1/1; /* Enforces 1:1 circle ratio */
    }
    
    /* Ensure icon is perfectly centered */
    .btn-hero-search i { 
        display: block; 
        line-height: 1;
        margin: 0;
    }
}

/* --- LIVE SEARCH DROPDOWN --- */
.search-dropdown {
    display: none; /* Hidden by default */
    position: absolute;
    top: 100%; /* Push below search pill */
    left: 0;
    width: 100%;
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 24px; /* Rounded card style */
    box-shadow: 0 10px 30px rgba(0,0,0,0.12);
    margin-top: 12px; /* Space between bar and dropdown */
    padding: 20px 0;
    z-index: 1000;
    overflow: hidden;
}

/* Header Text ("Most popular searches") */
.dropdown-header {
    padding: 0 24px 12px 24px;
    font-size: 16px;
    font-weight: 700;
    color: #1e1e1e;
}

/* Individual Result Row */
.dropdown-item-row {
    display: flex;
    align-items: center;
    padding: 12px 24px;
    text-decoration: none;
    transition: background-color 0.1s ease;
    cursor: pointer;
}

/* Hover Effect */
.dropdown-item-row:hover {
    background-color: #f2f2f2; /* Light gray hover */
    text-decoration: none;
}

/* The Pill Icon Circle */
.icon-pill {
    width: 32px;
    height: 32px;
    border: 1px solid #e0e0e0; /* Subtle border */
    border-radius: 8px; /* Rounded square/squircle look */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 16px;
    background-color: #fff;
    color: #1e1e1e;
    font-size: 14px;
}

/* Text inside the row */
.text-content {
    font-size: 15px;
    color: #1e1e1e;
    display: flex;
    align-items: center;
}

/* Mobile Adjustments for Dropdown */
@media (max-width: 768px) {
    .search-dropdown {
        border-radius: 16px;
        width: 100%; /* Ensure it fits screen */
    }
}

/* --- NEW AND NOW SECTION STYLES --- */
.bg-light-creme {
    background-color: #fcfbf7; /* Matches hero bg */
}

/* Header Colors */
.bg-dark-blue { background-color: #003865; }
.bg-primary-blue { background-color: #035288; }
.font-small { font-size: 12px; }
.letter-spacing-1 { letter-spacing: 1px; }

/* Promo Card Gradient */
.bg-gradient-promo {
    background: linear-gradient(135deg, #eef7ff 0%, #e6f0fa 100%);
    /* You can adjust this to a pink/blue gradient if you want exact image match */
    /* background: linear-gradient(135deg, #ffeef5 0%, #eef7ff 100%); */
}

/* Yellow Badge Circle */
.price-yellow-badge {
    position: absolute;
    top: 20px;
    right: 20px;
    background-color: #ffe500;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    transform: rotate(10deg);
}

/* Dashed Separator */
.border-dashed-bottom {
    border-bottom: 1px dashed #d0d0d0;
}

/* Hover State for List Items */
.hover-bg-gray:hover {
    background-color: #f8f9fa;
    transition: background-color 0.2s;
}

/* Product Icons */
.drug-icon-circle {
    width: 40px;
    height: 40px;
    background-color: #fff;
    border-radius: 50%;
    border: 1px solid #e0e0e0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Simple Pill Shape CSS Icon */
.drug-icon-pill {
    width: 24px;
    height: 12px;
    background-color: #ccc;
    border-radius: 10px;
    transform: rotate(-45deg);
    box-shadow: inset 0 -2px 4px rgba(0,0,0,0.2);
}

/* Floating Image in Promo Card */
.promo-floating-img {
    position: absolute;
    bottom: -20px;
    right: -20px;
    width: 120px;
    opacity: 0.9;
    transform: rotate(-15deg);
    pointer-events: none;
}

/* --- WIDE PROMO BANNERS --- */
.wide-black-card {
    background-color: #000;
    border-radius: 16px;
    height: 100px; /* Fixed height for consistency */
    transition: transform 0.2s ease;
    width: 100%;
}

.wide-black-card:hover {
    transform: translateY(-3px);
}

/* White Icon Circle */
.icon-circle-white {
    width: 48px;
    height: 48px;
    background-color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #000;
}

/* Yellow Curve Background */
.yellow-curve-bg {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 40%; /* Covers right side */
    background-color: #ffe500; /* GoodRx Yellow */
    z-index: 1;
    
    /* Create the convex curve shape */
    border-top-left-radius: 100px;
    border-bottom-left-radius: 100px;
    
    /* Align button text */
    display: flex;
    align-items: center;
}

.btn-text-arrow {
    font-size: 14px;
    white-space: nowrap;
    z-index: 2; /* Ensure text sits on top */
}

/* Responsive adjustment for small screens */
@media (max-width: 768px) {
    .wide-black-card {
        height: auto;
        flex-direction: column;
        padding-bottom: 0;
    }
    
    .yellow-curve-bg {
        position: relative;
        width: 100%;
        height: 50px;
        border-radius: 0 0 16px 16px; /* Rounded bottom only */
        justify-content: center;
        padding-right: 0 !important;
        margin-top: 15px;
    }
    
    .icon-circle-white {
        margin-bottom: 10px;
    }
    
    .wide-black-card .d-flex.p-4 {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
    }
}

/* --- UPDATED PRODUCT PAGE STYLES --- */

/* Fix sticky top offset to account for your header height */
.sticky-offset {
    top: 80px !important; /* Adjust this value to match your actual header height */
    z-index: 9;
}

/* Ensure the main row aligns tops so sticky works */
.row.align-items-start {
    align-items: start !important;
}

/* New Floating Prescription Badge */
.prescription-badge-float {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 5;
    background-color: #fff; /* White background for clean look */
    color: #dc3545; /* Danger red color for emphasis */
    border: 1px solid #f1f1f1;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    font-weight: 700;
    font-size: 13px;
    padding: 8px 16px;
    border-radius: 50px; /* Pill shape */
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Carousel Image Styling */
.product-carousel-img {
    height: 400px; /* Fixed height for consistency */
    width: 100%;
    object-fit: contain; /* Ensures whole image is visible */
    padding: 20px;
    background-color: #fff;
    border-radius: 16px;
}

/* Clean up carousel indicators (dots) */
.carousel-indicators [data-bs-target] {
    background-color: #035288; /* Use your brand blue */
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: none;
    opacity: 0.5;
    margin: 0 4px;
}
.carousel-indicators .active {
    opacity: 1;
    width: 12px;
    height: 12px;
}

/* Mobile Fix: Ensure pricing card has spacing on mobile */
@media (max-width: 991px) {
    .mobile-pricing-gap {
        margin-bottom: 24px;
    }
}

/* --- QUANTITY SELECTION GRID --- */
.pack-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Force 2 equal columns */
    gap: 12px; /* Space between boxes */
    width: 100%;
}

.pack-option {
    border: 1px solid #dee2e6; /* Light gray default border */
    border-radius: 8px;
    padding: 12px 8px;
    cursor: pointer;
    text-align: center;
    background-color: #fff;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 75px; /* Ensure consistent height */
    position: relative;
}

/* Hover Effect */
.pack-option:hover {
    border-color: #035288;
    background-color: #f8fbff;
}

/* Active (Selected) State - Matches your Blue Design */
.pack-option.active {
    border: 2px solid #035288; /* Thicker Blue Border */
    background-color: #eef7ff; /* Light Blue Background */
    color: #035288;
    box-shadow: 0 2px 5px rgba(3, 82, 136, 0.1);
}

/* Quantity Text (e.g., "50 Pills") */
.pack-option .pack-qty {
    font-weight: 800;
    font-size: 16px;
    margin-bottom: 4px;
    color: #212529; /* Dark text default */
}

/* Price per unit Text (e.g., "$0.30/Pill") */
.pack-option .pack-ppp {
    font-size: 13px;
    color: #6c757d; /* Muted gray default */
    font-weight: 500;
}

/* Active Text Colors */
.pack-option.active .pack-qty {
    color: #035288; /* Blue text when active */
}
.pack-option.active .pack-ppp {
    color: #4a6f8a; /* Slightly blue-gray when active */
}

/* --- PRODUCT HEADLINE STYLES --- */
.product-main-headline {
    font-size: 28px; /* Large readable size */
    font-weight: 800; /* Extra bold */
    color: #1e1e1e;   /* Dark black/grey */
    line-height: 1.2;
}

.product-subtitle-badge {
    font-size: 15px;
    font-weight: 500;
    color: #555;
}

.product-subtitle-badge .fa-circle-check {
    font-size: 16px;
    /* Ensure the green matches the screenshot */
    color: #198754 !important; 
}

/* Mobile Responsiveness for Headline */
@media (max-width: 768px) {
    .product-main-headline {
        font-size: 22px; /* Slightly smaller on mobile */
    }
}

/* --- SIMILAR MEDICATIONS CAROUSEL --- */
.similar-meds-carousel {
    overflow-x: auto;
    scroll-behavior: smooth;
    scroll-snap-type: x mandatory;
    padding-bottom: 10px; /* Space for scrollbar */
    -webkit-overflow-scrolling: touch; /* Smooth scroll on iOS */
    scrollbar-width: thin; /* Firefox */
}

/* Hide Scrollbar for cleaner look (Optional - remove if you want visible scrollbar) */
.similar-meds-carousel::-webkit-scrollbar {
    height: 8px;
}
.similar-meds-carousel::-webkit-scrollbar-thumb {
    background-color: #ddd;
    border-radius: 4px;
}
.similar-meds-carousel::-webkit-scrollbar-track {
    background-color: transparent;
}

/* --- SIMILAR MEDICATIONS CARD UPDATES --- */

.similar-card {
    width: 280px;
    scroll-snap-align: start;
    transition: transform 0.2s, box-shadow 0.2s;
    background-color: #fff;
    
    /* NEW: 2px Black Border */
    border: 2px solid #000 !important; 
}

.similar-card:hover {
    transform: translateY(-5px);
    /* Make shadow slightly stronger on hover */
    box-shadow: 4px 8px 0px rgba(0,0,0,1) !important; /* Sharp retro shadow effect (optional, looks good with black borders) */
}

/* NEW: Yellow View Button */
.btn-view-yellow {
    background-color: #f4d500; /* Theme Yellow */
    color: #000;               /* Black Text */
    border: none;
    font-weight: 700;
    padding: 6px 20px;
    transition: background-color 0.2s;
}

.btn-view-yellow:hover {
    background-color: #ffe600; /* Lighter yellow on hover */
    color: #000;
}

/* Ensure images blend nicely */
.similar-card img {
    mix-blend-mode: multiply; 
}

/* --- CART UI STYLES --- */

/* Desktop Badge */
.cart-badge-desktop {
    font-size: 10px;
    padding: 4px 6px;
}

/* Mobile Floating Cart */
.mobile-cart-float {
    position: fixed;
    bottom: 25px;
    right: 25px;
    width: 60px;
    height: 60px;
    background-color: #035288; /* Brand Blue */
    border-radius: 50%;
    z-index: 9999;
    display: none; /* Hidden by default, JS toggles it */
    transition: transform 0.2s;
    text-decoration: none;
}

.mobile-cart-float:active {
    transform: scale(0.95);
}

/* Ensure header icons align */
.fa-cart-shopping {
    cursor: pointer;
    transition: color 0.2s;
}
.fa-cart-shopping:hover {
    color: #035288;
}

/* --- CART DRAWER LAYOUT --- */
.offcanvas-body {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Hide Scrollbar in Recs Carousel */
#recs-scroll-container::-webkit-scrollbar {
    display: none;
}
#recs-scroll-container {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* --- UPDATED CHECKOUT CSS --- */

/* 1. INPUT FIELDS (Clean, Visible Borders) */
.form-control, .form-select {
    border: 1px solid #ced4da !important; /* Visible Border */
    padding: 0.6rem 0.8rem; /* Standard comfortable padding */
    font-size: 15px;
    border-radius: 6px;
    box-shadow: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.form-control:focus, .form-select:focus {
    border-color: #035288 !important; /* Brand blue focus */
    box-shadow: 0 0 0 3px rgba(3, 82, 136, 0.1) !important;
}

/* --- ACCORDION BUTTON FIXES --- */

/* 1. Base Button Styles */
.accordion-button {
    box-shadow: none !important; /* Remove blue glow */
    color: #212529;
    display: flex;         /* Ensure flexbox layout */
    align-items: center;   /* Vertically center content */
    width: 100%;           /* Full width */
}

/* 2. Active (Open) State */
.accordion-button:not(.collapsed) {
    background-color: #f8fbff;
    color: #035288;
}

/* 3. FORCE ARROW VISIBILITY (The Fix) */
.accordion-button::after {
    flex-shrink: 0;        /* Critical: Prevents arrow from disappearing/squishing */
    width: 1.25rem;        
    height: 1.25rem;
    margin-left: auto;     /* Pushes arrow to the far right */
    content: "";
    /* Standard Grey Chevron SVG */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-size: 1.25rem;
    transition: transform 0.2s ease-in-out;
    opacity: 0.6;
}

/* 4. Active Arrow State (Blue & Rotated) */
.accordion-button:not(.collapsed)::after {
    /* Brand Blue Chevron SVG */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23035288'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    transform: rotate(-180deg);
    opacity: 1;
}

/* Table Spacing Compactness */
.order-summary-table td {
    padding-top: 2px;
    padding-bottom: 2px;
}

/* 3. CARD LETTER SPACING */
.letter-spacing-1 {
    letter-spacing: 2px;
}

/* 4. BUTTONS */
.btn-pay-now {
    transition: transform 0.2s;
}
.btn-pay-now:hover {
    transform: translateY(-2px);
    background-color: #ffc107;
}

/* Brand Blue Text Color */
.text-brand-blue {
    color: #035288 !important;
}

/* Indent the details table on desktop to align with the text (bypassing the image) */
@media (min-width: 992px) {
    .desktop-indent {
        padding-left: 80px !important; /* 50px image + 16px margin + 14px extra */
    }
}

/* --- PAYMENT CARD STYLES --- */

/* Base Card Style */
.payment-option-card {
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    border: 1px solid #dee2e6; /* Default Border */
}

/* Hover Effect */
.payment-option-card:hover {
    background-color: #f8f9fa;
}

/* Active State (Added via JS) */
.border-brand-blue {
    border: 2px solid #035288 !important; /* Thicker Blue Border */
    background-color: #f0f7ff !important; /* Very Light Blue BG */
}

/* Ensure header background matches nicely when active */
.bg-alice-blue {
    background-color: #f0f7ff !important;
}

/* Remove default focus outlines */
input[type="radio"]:focus {
    outline: none;
}

/* --- RECENTLY VIEWED STYLES --- */

/* Container typography */
.recent-links {
    font-size: 0.9rem; /* Small, readable text */
    line-height: 1.4;
}

/* "Recently viewed:" Label */
.recent-label {
    font-weight: 700;
    color: #1e1e1e;
}

/* Product Links (e.g. Viagra) */
.recent-item {
    color: #1e1e1e;
    text-decoration: none;
    border-bottom: 1px solid #1e1e1e; /* Subtle underline like the design */
    transition: all 0.2s ease;
}

.recent-item:hover {
    color: #035288; /* Brand Blue on hover */
    border-color: #035288;
}

/* Clear History Button */
.clear-history {
    color: #035288; /* Brand Blue */
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: opacity 0.2s;
}

.clear-history:hover {
    opacity: 0.8;
    text-decoration: underline;
}

/* --- FULL SCREEN SEARCH MODAL STYLES --- */
/* --- FIXED: GOOGLE AI-STYLE SEAMLESS BORDER --- */

.modal-search-pill {
    position: relative;
    border-radius: 50px; /* Full pill shape */
    background: transparent;
    z-index: 1;
    display: flex;
    align-items: center;
    padding: 3px; /* Border thickness */
    overflow: hidden; /* Clips the giant spinner to the pill shape */
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
}

/* 1. The Spinning Gradient Layer (The Fix) */
.modal-search-pill::before {
    content: "";
    position: absolute;
    /* Center anchor */
    top: 50%;
    left: 50%;
    
    /* FIX: Use 150vmax to ensure it's a GIANT square larger than any screen dimension */
    width: 150vmax; 
    height: 150vmax; 
    
    /* The Brand Color Chain: Yellow -> Orange -> Blue -> Black -> Yellow */
    background: conic-gradient(
        from 0deg, 
        #f4d500,   /* Yellow */
        #e94e1b,   /* Orange */
        #035288,   /* Blue */
        #1e1e1e,   /* Black */
        #f4d500    /* Loop back to Yellow */
    );
    
    /* Center and Rotate */
    transform: translate(-50%, -50%);
    animation: spin-border 4s linear infinite;
    z-index: -2;
}

/* 2. The White Inner Mask (Creates the "Hollow" center) */
.modal-search-pill::after {
    content: "";
    position: absolute;
    /* This creates the gap, revealing the 3px border */
    inset: 3px; 
    background: #fff; 
    border-radius: 50px;
    z-index: -1;
}

/* 3. The Spin Animation */
@keyframes spin-border {
    0% {
        transform: translate(-50%, -50%) rotate(0deg);
    }
    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

/* 4. Input Transparency (Crucial) */
.modal-search-pill .input-group-text, 
.modal-search-pill input.form-control,
.modal-search-pill button {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    position: relative;
    z-index: 10;
}

/* 5. Placeholder Style */
.modal-search-pill input::placeholder {
    color: #6c757d;
    opacity: 1;
}

/* Ensure Close Button is visible on all backgrounds */
.btn-close {
    opacity: 0.8;
}
.btn-close:hover {
    opacity: 1;
}

/* Placeholder Color */
/* .modal-search-pill input::placeholder {
    color: #6c757d;
    font-weight: 400;
} */

/* Modal Background (Optional: Clean White) */
.modal-fullscreen .modal-content {
    background-color: #fff; 
}

/* Popular Search Buttons */
.btn-light.border {
    border-color: #e0e0e0 !important;
    color: #333;
}
.btn-light.border:hover {
    background-color: #f1f3f4;
    border-color: #d0d0d0 !important;
}
/* List Item Hover Effects */
.list-group-item-action:hover {
    background-color: #f8f9fa;
    padding-left: 20px; /* Slight shift on hover */
    transition: all 0.2s;
}

.list-group-item-action i {
    width: 20px;
    text-align: center;
}

/* --- GRADIENT MODAL STYLE --- */
#searchModal .modal-content {
    /* 0% - 50%: Solid White (readable area)
       100%: Transparent (fades out)
    */
    background: linear-gradient(
        to bottom, 
        rgba(255, 255, 255, 1) 0%, 
        rgba(255, 255, 255, 1) 50%, 
        rgba(255, 255, 255, 0) 100%
    );
    
    /* Remove default shadows so it looks like a smooth overlay */
    box-shadow: none !important;
}

/* Optional: Blur the website content behind the modal for a 'frosted' look */
#searchModal {
    backdrop-filter: blur(2px); 
}

/* Search Result Price Badge */
.list-group-item-action .badge {
    font-weight: 600;
    font-size: 1rem;
    white-space: nowrap; /* Prevent price from breaking into two lines */
}

/* --- BEAUTIFIED SEARCH DROPDOWN --- */

/* 1. Section Headers (e.g. "Matching Medicines") */
.search-section-header {
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 1px;
    color: #6c757d;
    text-transform: uppercase;
    background-color: #f8f9fa;
    padding: 8px 16px;
    border-radius: 6px;
    margin-top: 15px;
    margin-bottom: 8px;
}

/* 2. Result Item Card */
.search-result-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    margin-bottom: 8px; /* Space between items */
    border-radius: 12px; /* Rounded corners */
    border: 1px solid transparent;
    transition: all 0.2s ease;
    text-decoration: none;
    background: #fff;
}

/* Hover Effect: Soft Blue Tint + Lift */
.search-result-item:hover {
    background-color: #f0f7ff; /* Very light blue */
    border-color: #dbeafe;
    transform: translateY(-2px); /* Subtle lift */
    box-shadow: 0 4px 12px rgba(3, 82, 136, 0.08); /* Soft blue shadow */
}

/* 3. Icon Box (The square holding the icon) */
.result-icon-box {
    width: 42px;
    height: 42px;
    background-color: #f1f3f5; /* Light grey default */
    color: #035288; /* Brand Blue */
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    margin-right: 15px;
    transition: all 0.2s;
}

/* Make icon turn blue on hover */
.search-result-item:hover .result-icon-box {
    background-color: #035288;
    color: #fff;
}

/* 4. Text Styling */
.result-title {
    font-weight: 700;
    color: #212529;
    font-size: 15px;
    margin-bottom: 2px;
}
.result-subtitle {
    font-size: 13px;
    color: #868e96;
    font-weight: 500;
}
.search-result-item:hover .result-title {
    color: #035288; /* Title turns blue on hover */
}

/* 5. Price Badge (Brand Yellow) */
.price-pill-badge {
    background-color: #f4d500; /* CheapMeds Yellow */
    color: #000;
    font-weight: 700;
    font-size: 0.85rem;
    padding: 6px 14px;
    border-radius: 50px;
    white-space: nowrap;
    border: 1px solid rgba(0,0,0,0.05);
}

/* --- UPDATED PRICE SECTION STYLES --- */

/* Container for the price block */
.search-price-box {
    text-align: right;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 100px; /* Ensure enough width */
    line-height: 1.2;
}

/* The "from" or "Starts" label */
.price-label-small {
    font-size: 11px;
    color: #6c757d; /* Muted gray */
    margin-bottom: 2px;
}

/* The Price Value (Big Green Text) */
.price-value-large {
    font-size: 18px; /* Large and readable */
    font-weight: 800; /* Extra bold */
    color: #198754; /* Success Green (matches your reference image) */
    letter-spacing: -0.5px;
}

/* The "/pill" suffix */
.price-per-unit {
    font-size: 11px;
    font-weight: 600;
    color: #212529; /* Dark gray */
    margin-left: 2px;
}

/* --- DARK ANIMATED CONTACT BAR (Optimized for Fold/Narrow) --- */

.sub-navbar {
    /* Deep Dark Gradient */
    background: linear-gradient(
        270deg, 
        #0f2027, #203a43, #2c5364, #240b36, #0f2027 
    );
    background-size: 400% 400%;
    animation: gradient-flow 12s ease infinite;
    
    padding: 8px 0; /* More space for larger icons */
    font-size: 16px; 
    position: relative;
    z-index: 900;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

@keyframes gradient-flow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.sub-navbar .container {
    max-width: 100%;
    overflow-x: hidden; 
}

.sub-nav-item {
    display: flex;
    align-items: center;
    gap: 10px; /* More space between icon and text */
    text-decoration: none;
    color: #fff;
    font-weight: 700;
    transition: transform 0.2s ease;
    padding: 4px 8px;
    border-radius: 8px;
}

.sub-nav-item:hover {
    background-color: rgba(255, 255, 255, 0.1);
    transform: translateY(-2px);
    color: #fff;
}

/* --- UPDATED: LARGER ICONS --- */
.icon-circle {
    width: 38px;  /* INCREASED SIZE (was 32px) */
    height: 38px; /* INCREASED SIZE */
    background-color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* Icon Font Size */
    font-size: 22px; /* Bigger icon symbol inside */
    
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
    flex-shrink: 0; 
}

.text-primary { color: #035288 !important; }
.text-success { color: #25d366 !important; }
.text-info { color: #0088cc !important; }

/* --- MOBILE & NARROW SCREEN LOGIC --- */

/* 1. Standard Mobile (Tablets/Phones) */
@media (max-width: 768px) {
    .sub-navbar .container {
        justify-content: space-evenly !important; 
        padding-left: 10px;
        padding-right: 10px;
    }
    .toll-label { display: none; } /* Hide "Toll Free:" label */
}

/* 2. Narrow Screens (Fold 5 Cover Screen / Small Phones) */
@media (max-width: 480px) {
    /* Hide the text "WhatsApp" and "Telegram" */
    .app-text {
        display: none !important;
    }

    /* Keep the Phone Number Text visible but maybe smaller */
    .phone-text {
        font-size: 15px; 
        white-space: nowrap;
    }

    /* Ensure icons are close but distinct */
    .sub-nav-item {
        gap: 0; /* Remove gap since there is no text for WA/TG */
        padding: 4px; /* Tighter padding */
    }
    
    /* Give the Phone item a bit more space since it has text */
    .phone-item {
        gap: 8px; 
    }
}

.scratch-container {
    border: 4px solid #f4d500; /* Gold Border */
    position: relative;
    user-select: none;
}
/* Optional: Makes the cursor look like a coin when hovering */
.scratch-container:active {
    cursor: grabbing; 
}