:root {
    --primary-color: #4f46e5; --primary-hover: #4338ca; --secondary-color: #0d9488; --secondary-hover: #0f766e;
    --background-color: #f8fafc; --text-color: #0f172a; --muted-text-color: #475569; --card-bg: #ffffff;
    --border-color: #e2e8f0; --navbar-bg: #0f172a; --font-family: 'Roboto Condensed', sans-serif;
    --visit-store-bg: #1e293b; --visit-store-hover: #0f172a;
    --popup-bg: #ffffff; --popup-text-color: #0f172a;
}
body[data-theme="dark"] {
    --primary-color: #818cf8; --primary-hover: #a5b4fc; --secondary-color: #2dd4bf; --secondary-hover: #5eead4;
    --background-color: #0f172a; --text-color: #f8fafc; --muted-text-color: #94a3b8; --card-bg: #1e293b;
    --border-color: #334155; --navbar-bg: #0f172a;
    --visit-store-bg: #334155; --visit-store-hover: #475569;
    --popup-bg: #1e293b; --popup-text-color: #f8fafc;
    
    /* FIX: Comprehensive Bootstrap Dark Mode Variable Overrides */
    --bs-body-color: var(--text-color); --bs-body-bg: var(--background-color); --bs-border-color: var(--border-color);
    --bs-link-color: var(--primary-color); --bs-link-hover-color: var(--primary-hover);
    --bs-secondary-color: var(--muted-text-color); --bs-tertiary-color: var(--muted-text-color);
    --bs-breadcrumb-active-color: var(--muted-text-color); --bs-breadcrumb-divider-color: var(--muted-text-color);
    --bs-list-group-color: var(--text-color); --bs-list-group-bg: var(--card-bg); --bs-list-group-border-color: var(--border-color);
    --bs-list-group-action-color: var(--text-color); --bs-list-group-action-hover-color: var(--primary-hover);
    --bs-list-group-action-hover-bg: var(--background-color); --bs-list-group-active-color: #fff;
    --bs-list-group-active-bg: var(--primary-color); --bs-list-group-active-border-color: var(--primary-color);
    --bs-modal-bg: var(--popup-bg); --bs-modal-header-border-color: var(--border-color); --bs-modal-footer-border-color: var(--border-color);
    --bs-modal-color: var(--popup-text-color); --bs-btn-close-color: var(--text-color); 
    --bs-form-control-bg: var(--card-bg); --bs-form-control-color: var(--text-color);
}
body { background-color: var(--background-color); font-family: var(--font-family); color: var(--text-color); transition: background-color 0.3s, color 0.3s; }
h1, h2, h3, h4, h5, h6, .page-header { color: var(--text-color); }
.bg-dark h1, .bg-dark h2, .bg-dark h3, .bg-dark h4, .bg-dark h5, .bg-dark h6 { color: #ffffff; }
a { text-decoration: none; color: var(--primary-color); font-weight: 600; } a:hover { color: var(--primary-hover); }
a:focus-visible, button:focus-visible, .btn:focus-visible { outline: 2px solid var(--primary-hover); outline-offset: 1px; }
.navbar.bg-dark { background-color: var(--navbar-bg) !important; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
#theme-toggle { color: #D1D5DB; } #theme-toggle:hover { color: white; background-color: rgba(255,255,255,0.1); }
.search-container { position: relative; }
#search-results { position: absolute; top: 100%; left: 0; right: 0; background: var(--card-bg); border: 1px solid var(--border-color); z-index: 1050; max-height: 300px; overflow-y: auto; display: none; border-radius: 0 0 0.25rem 0.25rem; box-shadow: 0 4px 6px rgba(0,0,0,0.1); }
#search-results a { display: block; padding: 0.75rem 1rem; color: var(--text-color); font-weight: normal; }
#search-results a:hover { background-color: var(--background-color); }
.hero-banner { background: linear-gradient(135deg, var(--primary-color), #374151); color: white; }
.hero-banner-inner { padding: 4rem 1rem; } .hero-banner h1 { font-weight: 700; font-size: 2.8rem; }
.store-logo-wrapper { display: block; background-color: var(--card-bg); border: 1px solid var(--border-color); border-radius: 8px; padding: 1rem; transition: box-shadow 0.2s; }
/* MODIFIED: Ensure images within wrappers are responsive */
.store-logo-wrapper img { max-height: 70px; width: 100%; object-fit: contain; }
.info-section { background: var(--card-bg); padding: 1.5rem; border: 1px solid var(--border-color); border-radius: 8px; margin-bottom: 1.5rem; }
.info-section h3 { font-size: 1.3rem; margin-bottom: 1rem; color: var(--text-color); font-weight: 600; }
.info-section i { margin-right: 0.5rem; color: var(--primary-color); }
.accordion-button { color: var(--text-color); background-color: var(--card-bg); font-weight: 600; }
.accordion-button:not(.collapsed) { color: var(--primary-hover); background-color: var(--card-bg); box-shadow: inset 0 -1px 0 var(--border-color); }
.accordion-item, .accordion { border-color: var(--border-color); background-color: var(--card-bg); }
.accordion-body { color: var(--muted-text-color); }
.deal-item { background-color: var(--card-bg); border: 1px solid var(--border-color); margin-bottom: 1.5rem; padding: 1.5rem; display: flex; flex-wrap: nowrap; align-items: center; gap: 1.5rem; border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.05); transition: transform 0.2s, box-shadow 0.2s; }
.deal-item:hover { transform: translateY(-3px); box-shadow: 0 6px 12px rgba(0,0,0,0.08); }
.deal-item.expired { opacity: 0.65; background-color: var(--background-color); }
.deal-item.expired .deal-type-box { background-color: #6c757d; }
.deal-type-box { flex-shrink: 0; width: 100px; height: 100px; background-color: var(--muted-text-color); color: #fff; display: flex; align-items: center; justify-content: center; text-align: center; font-weight: bold; border-radius: 8px; padding: 0.5rem; }
.deal-content { flex-grow: 1; min-width: 0; }
.deal-content h2 { font-size: 1.1rem; font-weight: 600; margin-bottom: 0.5rem; }
.deal-content .description { color: var(--muted-text-color); }
.deal-expiry { font-size: 0.8rem; color: #dc3545; font-weight: 600; margin-top: 0.5rem; }
.deal-action { flex-shrink: 0; width: 160px; text-align: center; }
.az-list { display: flex; flex-wrap: wrap; list-style: none; padding: 0; margin: 0 0 1rem 0; gap: 0.35rem; justify-content: center; }
.az-list li { margin: 0; }
.az-list a, .az-list span { display: block; padding: 0.5rem 0.75rem; border: 1px solid var(--border-color); background: var(--card-bg); color: var(--text-color); border-radius: 0.25rem; min-width: 42px; text-align: center; transition: all 0.2s ease-in-out; font-weight: 600; }
.az-list a:hover { background-color: var(--primary-hover); color: white; border-color: var(--primary-hover); transform: translateY(-2px); }
.az-list span.disabled { color: var(--muted-text-color); background-color: var(--background-color); pointer-events: none; }
.az-list a.active { background-color: var(--primary-color); color: white; border-color: var(--primary-color); }
.btn-coupon-action { display: flex; align-items: center; justify-content: center; width: 100%; padding: 0.75rem 1rem; font-size: 1rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; border-radius: 6px; border: none; transition: all 0.2s ease-in-out; box-shadow: 0 2px 4px rgba(0,0,0,0.07); }
.btn-coupon-action:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0,0,0,0.15); }
.btn-code { background-color: var(--primary-color); color: white; } .btn-code:hover { background-color: var(--primary-hover); color: white; }
.btn-deal { background-color: var(--secondary-color); color: white; } .btn-deal:hover { background-color: var(--secondary-hover); color: white; }
.btn-visit-store { background-color: var(--visit-store-bg); color: white; } .btn-visit-store:hover { background-color: var(--visit-store-hover); color: white; }
.filter-sort-nav .btn-secondary { background-color: var(--card-bg); color: var(--text-color); border: 1px solid var(--border-color); }
.filter-sort-nav .btn-secondary:hover { background-color: var(--background-color); }
.filter-sort-nav .btn-secondary.active { background-color: var(--primary-color); color: white; border-color: var(--primary-color); }
/* MODIFIED: Ensure brand logo container is responsive */
.brand-logo a { background: var(--card-bg); border: 1px solid var(--border-color); display: flex; align-items: center; justify-content: center; height: 100%; padding: 1rem; }
.brand-logo img { max-width: 100%; max-height: 50px; object-fit: contain; }
.verified-by-line a { color: var(--muted-text-color); } .verified-by-line a:hover { color: var(--text-color); }
.list-group-item { background-color: var(--card-bg); border-color: var(--border-color); color: var(--text-color); }
.list-group-item.active { background-color: var(--primary-color); border-color: var(--primary-color); color: #fff; }
a.list-group-item-action:hover, a.list-group-item-action:focus { color: var(--primary-hover); background-color: var(--background-color); }
.social-icons { display: flex; justify-content: center; gap: 1rem; }
.social-icon { color: white; width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; transition: transform 0.2s; }
.social-icon:hover { transform: scale(1.1); }
.twitter-bg { background-color: #1DA1F2; } .facebook-bg { background-color: #1877F2; } .linkedin-bg { background-color: #0A66C2; }
.instagram-bg { background: #d6249f; background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%); }
.youtube-bg { background-color: #FF0000; } .pinterest-bg { background-color: #E60023; }
.star-rating { color: #FFC107; } .star-rating .fa-star-half-alt { color: #FFC107; } .star-rating .far { color: #E0E0E0; }
#backToTopBtn { position: fixed; bottom: 20px; right: 30px; z-index: 99; border: none; outline: none; background-color: var(--primary-color); color: white; cursor: pointer; width: 50px; height: 50px; border-radius: 50%; font-size: 18px; box-shadow: 0 4px 8px rgba(0,0,0,0.2); display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transform: translateY(20px); transition: opacity 0.3s, visibility 0.3s, transform 0.3s, background-color 0.3s; }
#backToTopBtn.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
#backToTopBtn:hover { background-color: var(--primary-hover); }
.featured-image-container {
    margin-bottom: 1.5rem;
}
.video-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; }
.video-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
@media (max-width: 767px) { .deal-item { flex-direction: column; text-align: center; } .deal-action { width: 100%; margin-top: 1rem; max-width: 320px; margin-left: auto; margin-right: auto; } .hero-banner h1 { font-size: 2rem; } #backToTopBtn { bottom: 15px; right: 15px; width: 45px; height: 45px; } }