/* 
Theme Name: Premium Coupon Theme
Author: 99easyshop
Description: Premium Coupon Theme is a modern, lightweight, and SEO-friendly WordPress theme built for coupon, promo code, cashback, and deals websites. Designed with a clean UI and excellent user experience, it helps visitors quickly discover stores, categories, and verified discount codes through an intuitive search and well-organized layouts. The theme features a stylish hanging logo design, lightning-fast performance, responsive layouts, and optimized Core Web Vitals for better rankings and higher conversions. Whether you're creating a coupon directory, affiliate marketing website, or daily deals portal, Premium Coupon Theme provides everything needed to build a professional platform without sacrificing speed or usability. Key Features include: Modern and professional design, unique hanging logo, blazing-fast performance, mobile-first responsiveness, SEO & Core Web Vitals optimized, advanced store/category pages, powerful search, masonry/grid layouts, affiliate marketing ready, one-click demo import, AJAX interactions, retina-ready, schema markup, translation/RTL ready, WooCommerce compatible, and optimized for high-traffic sites.
Version: 9.5 
Tags: coupon, coupons, promo-code, promo-codes, discount, deals, cashback, affiliate, affiliate-marketing, shopping, ecommerce, directory, store, offers, vouchers, responsive, mobile-friendly, lightweight, fast-loading, seo, schema, modern, clean, ui, ux, masonry, grid-layout, custom-logo, translation-ready, rtl, widget-ready

*/ 

body { background-color: #f4f5f9; font-family: 'Open Sans', sans-serif; color: #333; margin: 0; padding: 0; } 
h1, h2, h3, h4, h5, h6 { font-family: 'Open Sans', sans-serif; color: #222; } 

/* WP Core Alignments */ 
.alignnone { margin: 5px 20px 20px 0; } 
.aligncenter { display: block; margin: 5px auto; } 
.alignright { float: right; margin: 5px 0 20px 20px; } 
.alignleft { float: left; margin: 5px 20px 20px 0; } 

/* ========================================================================== 
   HEADER & MENU 
   ========================================================================== */ 
.cd-dark-header { background-color: #1a1a1a; width: 100%; border-bottom: 2px solid rgba(0,0,0,0.2); position: relative; z-index: 50; } 
.cd-header-container { max-width: 1250px; margin: 0 auto; height: 90px; display: flex; align-items: stretch; padding: 0 15px; } 
.cd-logo-wrapper { width: 170px; position: relative; flex-shrink: 0; } 
.cd-logo-box { position: absolute; top: 0; left: 0; padding: 15px; width: 150px; height: 110px; border-radius: 0 0 8px 8px; display: flex; align-items: center; justify-content: center; z-index: 100; transition: background 0.3s; } 
.cd-logo-box img { max-width: 100%; max-height: 100%; object-fit: contain; } 
.cd-center-column { flex: 1; padding-left: 20px; display: flex; flex-direction: column; justify-content: center; gap: 12px; } 
.cd-search-bar { display: flex; width: 100%; max-width: 600px; } 
.cd-search-bar input { flex: 1; padding: 10px 15px; border: none; border-radius: 4px 0 0 4px; font-size: 14px; outline: none; background: #fff; color: #333; } 
.cd-search-bar button { border: none; padding: 0 20px; border-radius: 0 4px 4px 0; cursor: pointer; display: flex; align-items: center; justify-content: center; } 

/* Full Width Menu Background */ 
.cd-main-menu { display: flex; width: 100%; background-color: rgba(255, 255, 255, 0.15); padding: 8px 15px; border-radius: 4px; box-sizing: border-box; } 
.cd-nav-list { display: flex; gap: 20px; list-style: none; margin: 0; padding: 0; width: 100%; } 
.cd-nav-list li a { color: #fff; text-decoration: none; font-size: 13px; font-weight: 600; text-shadow: 0 1px 2px rgba(0,0,0,0.1); transition: 0.2s;} 
.cd-nav-list li a:hover { opacity: 0.8; } 
.cd-right-column { width: 100px; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 10px; flex-shrink: 0; } 
.cd-profile-area { display: flex; align-items: center; gap: 10px; color: #fff; cursor: pointer; }
.cd-profile-area .icon { font-size: 20px; } 
.cd-profile-area .user-info { display: flex; flex-direction: column; line-height: 1.2; } 
.cd-profile-area .name { font-size: 12px; font-weight: 600; } 
.cd-welcome-bar { text-align: center; background: #fff; color: #555; font-size: 13px; padding: 10px 0; border-bottom: 1px solid #e5e5e5; font-weight: 600; } 

/* ========================================================================== 
   BANNERS 
   ========================================================================== */ 
.cd-hero-section { background: #fdfdfd; padding: 30px 15px; border-bottom: 1px solid #eee; } 
.cd-hero-container { max-width: 1250px; margin: 0 auto; position: relative; } 
.cd-banners-wrapper { display: grid; gap: 15px; width: 100%; } 
.cd-grid-1 { grid-template-columns: 1fr; } 
.cd-grid-2 { grid-template-columns: repeat(2, 1fr); } 
.cd-grid-3 { grid-template-columns: repeat(3, 1fr); }
.cd-grid-4 { grid-template-columns: repeat(4, 1fr); } 
.cd-grid-5 { grid-template-columns: repeat(5, 1fr); } 
.cd-slider-viewport { overflow: hidden; width: 100%; } 
.cd-slider-track { display: flex; transition: transform 0.5s ease-in-out; width: max-content; } 
.cd-slide-item { flex-shrink: 0; } 
.cd-infinity-track { display: flex; width: max-content; animation: infinityScroll 15s linear infinite; } 
.cd-infinity-track:hover { animation-play-state: paused; } 
@keyframes infinityScroll { 0% { transform: translateX(0); } 100% { transform: translateX(calc(-50% - 7.5px)); } } 
.cd-banner-card { border-radius: 8px; overflow: hidden; box-shadow: 0 4px 10px rgba(0,0,0,0.08); background: #fff; aspect-ratio: 21/9; height: 250px; } 
.cd-banner-card a { display: block; width: 100%; height: 100%; } 
.cd-banner-card img { width: 100%; height: 100%; object-fit: cover; display: block; } 
.cd-slider-arrow { background: rgba(255,255,255,0.9); border: 1px solid #ddd; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; color: #555; cursor: pointer; position: absolute; z-index: 10; top: 50%; transform: translateY(-50%); box-shadow: 0 2px 5px rgba(0,0,0,0.1); } 
.cd-slider-arrow:hover { background: #fff; color: #000; }
.left-arrow { left: -20px; } 
.right-arrow { right: -20px; } 

/* ========================================================================== 
   MODULAR HOVER ANIMATIONS 
   ========================================================================== */ 
.cd-hover-box { position: relative; overflow: hidden; display: block; text-decoration: none; border-radius: 8px; background: #fff; box-shadow: 0 2px 5px rgba(0,0,0,0.02); } 
.cd-front, .cd-back { position: absolute; width: 100%; height: 100%; top: 0; left: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; transition: all 0.3s ease; } 
.cd-back { opacity: 0; z-index: -1; color: #fff; font-weight: bold; font-size: 14px; } 
/* 1. Reveal */ 
.hover-reveal:hover .cd-front { opacity: 0; } 
.hover-reveal:hover .cd-back { opacity: 1; z-index: 10; background-color: var(--theme-color); } 
/* 2. Zoom */ 
.hover-zoom { transition: 0.3s transform ease; } 
.hover-zoom:hover { transform: scale(1.05); z-index: 5; box-shadow: 0 10px 20px rgba(0,0,0,0.1); } 
/* 3. Border */ 
.hover-border { border: 2px solid transparent; transition: 0.2s border ease; } 
.hover-border:hover { border-color: var(--theme-color); } 

/* ========================================================================== 
   DYNAMIC TINTED BACKGROUND 
   ========================================================================== */ 
.cd-tinted-container { background: color-mix(in srgb, var(--theme-color) 8%, white); border: 1px solid color-mix(in srgb, var(--theme-color) 20%, white); padding: 20px; border-radius: 8px; } 

/* ========================================================================== 
   STORE LAYOUT 
   ========================================================================== */ 
.cd-store-large img { max-width: 60%; max-height: 50%; object-fit: contain; } 
.cd-crown-icon { position: absolute; top: 15px; right: 15px; background: #e53935; color: white; border-radius: 50%; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; font-size: 12px; } 
.cd-store-small img { max-width: 80%; max-height: 50px; object-fit: contain; } 

/* ========================================================================== 
   CATEGORIES LAYOUT 
   ========================================================================== */ 
.cd-cat-item { display: flex; align-items: center; gap: 15px; padding: 10px 15px; cursor: pointer; border-radius: 4px; position: relative; transition: 0.2s;} 
.cd-cat-item:hover { background: rgba(255,255,255,0.6); } 
.cd-cat-active { background: #e0f2fe !important; } 
@media (min-width: 1024px) {
    .cd-cat-active::after { content: ''; position: absolute; right: -8px; top: 50%; transform: translateY(-50%); border-width: 8px; border-style: solid; border-color: transparent transparent transparent #e0f2fe; }
}
.cd-cat-icon { width: 42px; height: 42px; border-radius: 50%; display: flex; justify-content: center; align-items: center; font-size: 20px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);} 
.cd-cat-name { font-weight: 600; font-size: 14px; color: #333; } 
.cd-offer-card { height: 100%; border: 1px solid #e0e0e0; border-radius: 6px; } 
.cd-offer-card .cd-front { position: relative; padding: 20px; } 

/* ========================================================================== 
   MISSED DEALS LAYOUT 
   ========================================================================== */ 
.cd-missed-card { transition: 0.3s ease; opacity: 0.8; filter: grayscale(40%); } 
.cd-missed-card:hover { opacity: 1; filter: grayscale(0%); box-shadow: 0 5px 15px rgba(0,0,0,0.05); transform: translateY(-2px); }

/* ========================================================================== 
   FAQ ACCORDION 
   ========================================================================== */ 
.cd-faq-container { --theme-active: #2271b1; }
.cd-faq-item {
    border: 1px solid transparent; 
    border-bottom-color: #e5e7eb; 
    margin-bottom: 4px;
    border-radius: 4px;
    background: transparent;
    transition: all 0.3s ease;
}
.cd-faq-btn {
    color: #222;
    font-weight: 700;
}
.cd-faq-icon { color: #555; }

/* Active States */
.cd-faq-item.active {
    border: 1px solid var(--theme-active);
    border-bottom-color: var(--theme-active);
    background-color: color-mix(in srgb, var(--theme-active) 5%, white); 
}
.cd-faq-item.active .cd-faq-btn,
.cd-faq-item.active .cd-faq-text { color: var(--theme-active); font-weight: 700; }
.cd-faq-item.active .cd-faq-icon { color: var(--theme-active); }