/*
Theme Name: CouponTorch
Theme URI: https://coupontorch.com/
Author: CouponTorch
Author URI: https://coupontorch.com/
Description: CouponTorch child theme for Clipper - modern, clean coupon site design
Template: clipper
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

/* ==========================================================================
   CouponTorch Design System
   Clean, modern aesthetic
   Colors from CouponTorch logo: Navy Blue + Orange/Flame
   ========================================================================== */

/* --- CSS Variables (Brand Colors) --- */
:root {
    --ct-navy: #1B2A4A;
    --ct-navy-light: #2C3E5A;
    --ct-navy-dark: #0F1A2E;
    --ct-orange: #E8722A;
    --ct-orange-hover: #D4631E;
    --ct-orange-light: #FFF3EC;
    --ct-yellow: #F5A623;
    --ct-bg: #F5F7FA;
    --ct-white: #FFFFFF;
    --ct-gray-100: #F8F9FA;
    --ct-gray-200: #E9ECEF;
    --ct-gray-300: #DEE2E6;
    --ct-gray-400: #ADB5BD;
    --ct-gray-500: #6C757D;
    --ct-gray-700: #495057;
    --ct-gray-900: #212529;
    --ct-text: #333333;
    --ct-text-light: #6C757D;
    --ct-text-muted: #999999;
    --ct-success: #28A745;
    --ct-radius: 8px;
    --ct-radius-lg: 12px;
    --ct-shadow: 0 1px 3px rgba(0,0,0,0.08);
    --ct-shadow-md: 0 4px 12px rgba(0,0,0,0.1);
    --ct-shadow-hover: 0 6px 20px rgba(0,0,0,0.12);
    --ct-transition: all 0.2s ease;
    --ct-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
}

/* ==========================================================================
   1. GLOBAL RESETS & TYPOGRAPHY
   ========================================================================== */

body {
    font-family: var(--ct-font) !important;
    background: var(--ct-bg) !important;
    color: var(--ct-text) !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--ct-font) !important;
    color: var(--ct-gray-900) !important;
    font-weight: 600 !important;
}

a {
    color: var(--ct-navy) !important;
    transition: var(--ct-transition);
}

a:hover {
    color: var(--ct-orange) !important;
}

/* ==========================================================================
   2. HEADER - Clean & Modern
   ========================================================================== */

/* Top bar background */
.top-bar-section,
.top-bar,
.nav-top-bar,
header .top-bar {
    background: var(--ct-navy) !important;
    border: none !important;
    box-shadow: none !important;
}

/* Hide Register, Login, RSS from top bar */
.header-login,
.top-bar .login-register,
.top-bar a[href*="register"],
.top-bar a[href*="login"],
.top-bar .fa-rss-square,
.rss-link,
.top-bar .social-links,
.social-links,
a.rss-link {
    display: none !important;
}

/* Navigation links */
.top-bar-section .menu a,
.top-bar .menu-item a,
.nav-top-bar a {
    color: rgba(255,255,255,0.85) !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    text-transform: none !important;
    letter-spacing: 0.3px !important;
    transition: var(--ct-transition) !important;
    padding: 0 16px !important;
}

.top-bar-section .menu a:hover,
.top-bar .menu-item a:hover {
    color: #FFFFFF !important;
    background: rgba(255,255,255,0.1) !important;
}

/* Active nav item */
.top-bar .current-menu-item a,
.top-bar .current_page_item a {
    color: #FFFFFF !important;
    background: rgba(255,255,255,0.15) !important;
    border-radius: 4px !important;
}

/* Header branding area — compact */
.header-branding {
    background: var(--ct-white) !important;
    padding: 10px 0 !important;
    box-shadow: var(--ct-shadow) !important;
}

.header-branding-wrap,
.header-branding .row {
    padding-top: 20px !important;
    padding-bottom: 10px !important;
    display: flex !important;
    align-items: center !important;
}

/* Search bar in header */
.header-branding .search-box input[type="text"],
.header-branding .search-box input[type="search"],
#searchform input[type="text"],
.search-form input[type="search"] {
    border: 2px solid var(--ct-gray-200) !important;
    border-radius: var(--ct-radius) !important;
    padding: 10px 16px !important;
    font-size: 14px !important;
    transition: var(--ct-transition) !important;
    background: var(--ct-gray-100) !important;
}

.header-branding .search-box input[type="text"]:focus,
#searchform input[type="text"]:focus {
    border-color: var(--ct-orange) !important;
    background: var(--ct-white) !important;
    box-shadow: 0 0 0 3px rgba(232, 114, 42, 0.15) !important;
    outline: none !important;
}

/* Search button */
.header-branding .search-box button,
#searchform button,
.search-form button {
    background: var(--ct-orange) !important;
    border: none !important;
    border-radius: 0 var(--ct-radius) var(--ct-radius) 0 !important;
    color: white !important;
    transition: var(--ct-transition) !important;
}

.header-branding .search-box button:hover,
#searchform button:hover {
    background: var(--ct-orange-hover) !important;
}

/* ==========================================================================
   3. STORE PAGE HEADER (top section with store info)
   ========================================================================== */

.head.store,
.head.no-bg.store {
    background: var(--ct-white) !important;
    border-radius: var(--ct-radius-lg) !important;
    padding: 16px !important;
    margin-bottom: 0 !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
}

/* Store header row: vertically center image with text */
.head.store .row {
    display: flex !important;
    align-items: center !important;
}

/* Store thumbnail */
.thumb-wrap {
    border-radius: var(--ct-radius) !important;
    overflow: hidden !important;
    box-shadow: var(--ct-shadow) !important;
}

.thumb-wrap img,
.store-thumb {
    border-radius: var(--ct-radius) !important;
    border: 1px solid var(--ct-gray-200) !important;
    object-fit: contain !important;
    margin: 0 !important;
}

/* Store header logo: clean look, no shadow/border */
.head.store .thumb-wrap {
    box-shadow: none !important;
}

.head.store .thumb-wrap img {
    border: none !important;
}

/* Store title */
.head.store h1,
.head.no-bg.store h1 {
    font-size: 28px !important;
    font-weight: 700 !important;
    color: var(--ct-gray-900) !important;
    margin-bottom: 8px !important;
}

/* Store description */
.store-description {
    color: var(--ct-text-light) !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
}

/* Store URL link */
.store-url a {
    color: var(--ct-orange) !important;
    font-size: 13px !important;
    text-decoration: none !important;
}

.store-url a:hover {
    text-decoration: underline !important;
}

/* ==========================================================================
   4. CONTENT BOXES (main containers)
   ========================================================================== */

.content-box {
    background: var(--ct-white) !important;
    border-radius: var(--ct-radius-lg) !important;
    box-shadow: var(--ct-shadow) !important;
    border: none !important;
    margin-bottom: 20px !important;
    overflow: hidden !important;
}

.box-holder {
    padding: 0 !important;
    border: none !important;
}

/* Section headers (Active Coupons, etc.) */
.content-box .head {
    background: transparent !important;
    border-bottom: 1px solid var(--ct-gray-200) !important;
    padding: 20px 24px !important;
    margin: 0 !important;
}

.content-box .head h2 {
    font-size: 18px !important;
    font-weight: 600 !important;
    color: var(--ct-gray-900) !important;
    margin: 0 !important;
}

/* Counter (Total: X) */
.counter,
.counter-red {
    background: none !important;
    color: var(--ct-text-muted) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    border: none !important;
    padding: 0 !important;
}

.counter span,
.counter-red span {
    color: var(--ct-orange) !important;
    font-weight: 600 !important;
}

/* ==========================================================================
   5. COUPON CARDS - Complete Redesign
   ========================================================================== */

/* Individual coupon item */
.item {
    background: var(--ct-white) !important;
    border: none !important;
    border-bottom: 1px solid var(--ct-gray-200) !important;
    padding: 0 !important;
    margin: 0 !important;
    transition: var(--ct-transition) !important;
}

.item:last-child {
    border-bottom: none !important;
}

.item:hover {
    background: var(--ct-gray-100) !important;
}

.item-holder {
    padding: 20px 24px !important;
    border: none !important;
    background: transparent !important;
}

/* --- HIDE: Store image/name in each coupon (already shown in store header) --- */
.item .store-holder {
    display: none !important;
}

/* Adjust layout when store image is hidden */
.item .item-top .large-3.medium-6.columns {
    display: none !important;
}

.item .item-top .large-9.medium-6.columns {
    width: 100% !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
}

/* Expand inner panel column (vote box column is hidden) */
.item .item-top .large-8.medium-12.columns {
    width: 100% !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
}

/* --- Coupon title --- */
.item .entry-title,
.item .entry-header h1 {
    font-size: 17px !important;
    font-weight: 600 !important;
    color: var(--ct-gray-900) !important;
    margin-bottom: 8px !important;
    line-height: 1.4 !important;
}

.item .entry-title a {
    color: var(--ct-gray-900) !important;
    text-decoration: none !important;
}

.item .entry-title a:hover {
    color: var(--ct-orange) !important;
}

/* --- Coupon Code Button (CTA) - Standardized size & styles --- */

/* Base link-holder: same size for all button types */
.item .link-holder {
    position: relative !important;
    width: 200px !important;
    height: 48px !important;
    border-radius: var(--ct-radius) !important;
    flex-shrink: 0 !important;
    overflow: hidden !important;
}

/* Ensure ct-code-peek (position:absolute inset-0) stays within the
   link-holder on the single coupon page (not inside .item).
   Same dimensions as .item .link-holder so the button covers the peek. */
.coupon_type-coupon-code .link-holder {
    position: relative !important;
    width: 200px !important;
    height: 48px !important;
    flex-shrink: 0 !important;
    overflow: hidden !important;
}

/* The actual button — same base style for all */
.item .coupon-code a,
.item .coupon-code-link,
.item a.coupon-code-link,
a.coupon-code-link,
.codebox a {
    position: relative !important;
    z-index: 1 !important;
    background: var(--ct-orange) !important;
    color: white !important;
    border: none !important;
    border-radius: var(--ct-radius) !important;
    width: 200px !important;
    height: 48px !important;
    padding: 0 16px !important;
    font-family: var(--ct-font) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    cursor: pointer !important;
    letter-spacing: 0.2px !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
    transition: background 0.2s ease, box-shadow 0.2s ease !important;
}

/* =============================================================
   COUPON-CODE: reveal animation (only coupon_type-coupon-code)
   ============================================================= */

/* Code peek span injected by JS — hidden by default */
.coupon_type-coupon-code .link-holder .ct-code-peek {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    background: var(--ct-orange-light) !important;
    border: 2px dashed var(--ct-orange) !important;
    border-radius: var(--ct-radius) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    padding-right: 10px !important;
    font-family: 'Courier New', Courier, monospace !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: 2px !important;
    color: var(--ct-orange) !important;
    z-index: 0 !important;
    overflow: hidden !important;
    user-select: none !important;
    cursor: pointer !important;
}

/* Code-type button: partially reveal code by default */
.coupon_type-coupon-code .link-holder a.coupon-code-link {
    width: 178px !important;
    border-radius: var(--ct-radius) 0 0 var(--ct-radius) !important;
    transition: width 0.2s ease, box-shadow 0.2s ease, background 0.2s ease !important;
}

/* On hover: slide slightly to tease peek without revealing too much */
.coupon_type-coupon-code .link-holder:hover a.coupon-code-link {
    width: 158px !important;
    box-shadow: -2px 0 8px rgba(232, 114, 42, 0.25) !important;
    background: var(--ct-orange-hover) !important;
}

/* =============================================================
   PROMOTION: static button — simple hover only
   ============================================================= */
.coupon_type-promotion .link-holder a.coupon-code-link:hover {
    background: var(--ct-orange-hover) !important;
    box-shadow: 0 4px 12px rgba(232, 114, 42, 0.3) !important;
}

/* Scissors icon — hidden on all CTA buttons */
.codebox .fa-scissors,
.coupon-code .fa-scissors,
.link-holder .fa-scissors,
.coupon-code-link .fa-scissors,
.coupon-code-link .fa {
    display: none !important;
}

/* Codebox container (wraps the link-holder) */
.item .coupon-code-box,
.item .codebox {
    display: flex !important;
    align-items: center !important;
}

/* --- HIDE: Vote/Success box --- */
.thumbsup-vote,
.vote,
.thumbsup-up,
.thumbsup-down,
.item .large-4.medium-12.columns:last-child {
    display: none !important;
}

/* --- Coupon content/description: hidden (shown in modal instead) --- */
.item-content {
    display: none !important;
}

/* --- "See Details" link injected by JS --- */
.ct-see-details {
    display: inline-block !important;
    margin-top: 6px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--ct-orange) !important;
    text-decoration: none !important;
    cursor: pointer !important;
    font-family: var(--ct-font) !important;
    transition: color 0.15s ease !important;
}

.ct-see-details:hover {
    color: var(--ct-orange-hover) !important;
    text-decoration: underline !important;
}

/* --- HIDE: Item meta (Category, Tags, Created, Expires) --- */
.item-meta {
    display: none !important;
}

/* --- HIDE: Item footer (Share, Comment, Report, Author) --- */
.item-footer {
    display: none !important;
}

/* --- Adjust coupon item layout to be more horizontal --- */
.item .item-top .row {
    display: flex !important;
    align-items: center !important;
}

.item .item-panel {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    flex-wrap: wrap !important;
}

.item .item-panel .entry-header {
    flex: 1 !important;
    min-width: 0 !important;
}

/* ==========================================================================
   6. SIDEBAR MODERNIZATION
   ========================================================================== */

#sidebar,
.sidebar,
aside.medium-4 {
    padding-left: 24px !important;
}

#sidebar .widget,
.sidebar .widget {
    background: var(--ct-white) !important;
    border-radius: var(--ct-radius-lg) !important;
    box-shadow: var(--ct-shadow) !important;
    padding: 20px !important;
    margin-bottom: 20px !important;
    border: none !important;
}

#sidebar .widget-title,
.sidebar .widget-title,
#sidebar h3,
.sidebar h3 {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: var(--ct-gray-900) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 16px !important;
    padding-bottom: 12px !important;
    border-bottom: 2px solid var(--ct-orange) !important;
}

/* Tag cloud in sidebar */
.tagcloud a,
.widget_tag_cloud a {
    background: var(--ct-gray-100) !important;
    color: var(--ct-text) !important;
    border: 1px solid var(--ct-gray-200) !important;
    border-radius: 20px !important;
    padding: 4px 12px !important;
    font-size: 13px !important;
    display: inline-block !important;
    margin: 3px !important;
    transition: var(--ct-transition) !important;
}

.tagcloud a:hover,
.widget_tag_cloud a:hover {
    background: var(--ct-orange) !important;
    color: white !important;
    border-color: var(--ct-orange) !important;
}

/* Sidebar lists */
#sidebar ul li,
.sidebar ul li {
    padding: 8px 0 !important;
    border-bottom: 1px solid var(--ct-gray-100) !important;
    font-size: 14px !important;
}

#sidebar ul li:last-child,
.sidebar ul li:last-child {
    border-bottom: none !important;
}

#sidebar ul li a,
.sidebar ul li a {
    color: var(--ct-text) !important;
}

#sidebar ul li a:hover,
.sidebar ul li a:hover {
    color: var(--ct-orange) !important;
}

/* ==========================================================================
   7. FOOTER - Clean & Minimal
   ========================================================================== */

footer,
.site-footer,
#footer,
.footer {
    background: var(--ct-navy) !important;
    color: rgba(255,255,255,0.7) !important;
    border: none !important;
}

/* Hide "Clipper Theme | Powered by WordPress" */
footer .site-info,
.footer-text,
.site-footer .copyright a[href*="appthemes"],
.site-footer a[href*="wordpress"] {
    visibility: hidden !important;
    font-size: 0 !important;
}

/* Footer links */
footer a,
.site-footer a,
#footer a {
    color: rgba(255,255,255,0.8) !important;
}

footer a:hover,
.site-footer a:hover,
#footer a:hover {
    color: var(--ct-orange) !important;
}

/* Footer nav */
.footer-nav a,
#footer-nav a {
    color: rgba(255,255,255,0.7) !important;
    font-size: 13px !important;
}

/* ==========================================================================
   8. HOMEPAGE OVERRIDES
   ========================================================================== */

/* Featured slider - modern cards */
.featured-coupon,
.featured .item {
    border-radius: var(--ct-radius) !important;
    box-shadow: var(--ct-shadow) !important;
    overflow: hidden !important;
}

/* Slick slider dots */
.slick-dots li button:before {
    color: var(--ct-orange) !important;
}

/* ==========================================================================
   9. STORES LISTING PAGE
   ========================================================================== */

.stores-list a,
.store-list a {
    color: var(--ct-text) !important;
    font-weight: 500 !important;
}

.stores-list a:hover,
.store-list a:hover {
    color: var(--ct-orange) !important;
}

/* ==========================================================================
   10. PAGINATION
   ========================================================================== */

.pagination a,
.page-numbers a {
    background: var(--ct-white) !important;
    color: var(--ct-text) !important;
    border: 1px solid var(--ct-gray-200) !important;
    border-radius: var(--ct-radius) !important;
    padding: 8px 14px !important;
    transition: var(--ct-transition) !important;
}

.pagination a:hover,
.page-numbers a:hover {
    background: var(--ct-orange) !important;
    color: white !important;
    border-color: var(--ct-orange) !important;
}

.pagination .current,
.page-numbers .current {
    background: var(--ct-orange) !important;
    color: white !important;
    border: 1px solid var(--ct-orange) !important;
    border-radius: var(--ct-radius) !important;
    padding: 8px 14px !important;
}

/* ==========================================================================
   11. MOBILE RESPONSIVE
   ========================================================================== */

@media screen and (max-width: 768px) {

    /* ---- 1. HIDE NAVIGATION DROPDOWN ---- */
    #tinynav1,
    .tinynav,
    select.tinynav1,
    .top-bar {
        display: none !important;
    }

    /* Stack layout on mobile */
    .content-area .medium-8,
    .content-area .medium-4,
    #primary,
    #sidebar,
    aside.medium-4 {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    /* ---- COMPACT MOBILE HEADER ---- */
    .header-branding {
        padding: 2px 0 !important;
    }

    /* Must match desktop specificity (.header-branding .row = 2 classes) */
    .header-branding-wrap,
    .header-branding .row,
    .row.header-branding-wrap {
        padding-top: 4px !important;
        padding-bottom: 2px !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 2px !important;
    }

    /* Make header columns full-width on mobile so centering works */
    .header-branding-wrap > .medium-6.columns,
    .header-branding .row > .medium-6.columns {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
        float: none !important;
    }

    /* Logo on mobile — centered */
    .header-branding-wrap > .columns:first-child,
    .header-branding-wrap > .medium-6.columns:first-child {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        float: none !important;
        text-align: center !important;
    }

    .site-branding {
        text-align: center !important;
        float: none !important;
        width: 100% !important;
    }

    .site-branding .site-logo {
        display: inline-block !important;
        float: none !important;
        text-align: center !important;
    }

    .site-branding img,
    .header-branding img {
        max-height: 52px !important;
        width: auto !important;
        display: inline-block !important;
        float: none !important;
        margin: 0 auto !important;
    }

    /* Hide text site-title (logo image is enough) */
    .site-branding .site-title,
    .site-branding .h1.site-title,
    .site-branding .description {
        display: none !important;
    }

    /* Compact search bar on mobile */
    .header-branding .medium-6.columns.top-navigation-header {
        padding: 0 12px !important;
    }

    .header-branding .search-box,
    .header-branding .search-form,
    #searchform {
        margin: 0 !important;
        padding: 0 !important;
    }

    .header-branding .search-box input[type="text"],
    .header-branding .search-box input[type="search"],
    #searchform input[type="text"] {
        height: 34px !important;
        padding: 6px 12px !important;
        font-size: 13px !important;
    }

    .header-branding .search-box button,
    #searchform button {
        height: 34px !important;
        width: 34px !important;
    }

    /* ---- COMPACT STORE HEADER ---- */
    .head.store,
    .head.no-bg.store {
        padding: 10px 12px !important;
        flex-direction: column !important;
        align-items: stretch !important;
    }

    /* ---- 2. STORE HEADER: side-by-side, logo + text ---- */
    .head.store .row {
        display: grid !important;
        grid-template-columns: 90px 1fr !important;
        gap: 12px !important;
        align-items: center !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Hide empty adsense row in store header */
    .head.store .row + .row {
        display: none !important;
    }

    /* Bypass Foundation columns — direct sizing */
    .head.store .row > .columns {
        width: auto !important;
        max-width: none !important;
        padding: 0 !important;
        float: none !important;
    }

    .head.store .row > .columns:first-child {
        grid-column: 1 !important;
    }

    .head.store .row > .columns:last-child {
        grid-column: 2 !important;
        min-width: 0 !important;
    }

    .thumb-wrap {
        width: 90px !important;
        height: 90px !important;
        margin: 0 !important;
    }

    .thumb-wrap img,
    .store-thumb {
        width: 90px !important;
        height: 90px !important;
        object-fit: contain !important;
        border-radius: 8px !important;
        margin: 0 !important;
    }

    .head.store h1,
    .head.no-bg.store h1 {
        font-size: 18px !important;
        text-align: left !important;
        margin-bottom: 6px !important;
        line-height: 1.2 !important;
    }

    .store-description {
        text-align: left !important;
        font-size: 12px !important;
        line-height: 1.3 !important;
        display: -webkit-box !important;
        -webkit-line-clamp: 2 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        margin-bottom: 0 !important;
    }

    .store-description p {
        margin: 0 !important;
    }

    /* Hide store URL and RSS on mobile */
    .head.store .store-url,
    .head.store .rss-link {
        display: none !important;
    }

    /* Reduce content area top padding on mobile */
    .content-area {
        padding-top: 4px !important;
    }

    .site-main, #main {
        padding-top: 0 !important;
    }

    .content-area > .medium-4.columns {
        padding-top: 0 !important;
    }

    /* Reduce gap between content boxes */
    .content-box {
        margin-bottom: 6px !important;
    }

    /* ---- MOBILE COUPON CARDS ---- */
    .item-holder {
        padding: 12px 10px !important;
    }

    /* Side-by-side: title left, button right */
    .item .item-panel {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 8px !important;
    }

    .item .item-panel .entry-header {
        flex: 1 1 0 !important;
        min-width: 0 !important;
    }

    .item .entry-title,
    .item .entry-header h1 {
        font-size: 14px !important;
        line-height: 1.3 !important;
    }

    /* CTA buttons on mobile — fixed width, not full-width */
    .item .link-holder {
        width: 160px !important;
        height: 42px !important;
        flex-shrink: 0 !important;
        margin: 0 !important;
    }

    .item a.coupon-code-link,
    .item .coupon-code-link {
        width: 160px !important;
        height: 42px !important;
        font-size: 13px !important;
        padding: 0 10px !important;
    }

    /* Code-type: partial peek on mobile — button LEFT-aligned so peek shows on RIGHT */
    .coupon_type-coupon-code .link-holder {
        width: 160px !important;
        text-align: left !important;
    }

    .coupon_type-coupon-code .link-holder a.coupon-code-link {
        width: 140px !important;
        height: 42px !important;
        font-size: 13px !important;
        margin-right: auto !important;
        margin-left: 0 !important;
    }

    /* Promotion-type: full button width inside holder */
    .coupon_type-promotion .link-holder a.coupon-code-link {
        width: 160px !important;
        height: 42px !important;
        font-size: 13px !important;
        border-radius: var(--ct-radius) !important;
    }

    /* Mobile content box */
    .content-box {
        border-radius: var(--ct-radius) !important;
        margin-bottom: 8px !important;
    }

    .content-box .head {
        padding: 12px !important;
    }

    /* "Active Coupons" heading — tighter */
    .content-box .head h2,
    .content-box .box-head h2 {
        font-size: 16px !important;
        margin: 0 !important;
    }

    /* Coupon description - compact */
    .item-content {
        font-size: 13px !important;
        line-height: 1.4 !important;
        max-height: 2.8em !important;
        overflow: hidden !important;
    }

    /* Mobile sidebar */
    #sidebar {
        padding-left: 12px !important;
        margin-top: 12px !important;
    }

    /* ---- 6. MOBILE FOOTER ---- */

    /* Hide the category/store widget panel on mobile — too much clutter */
    footer .panel,
    footer .panel-holder,
    #footer .panel {
        display: none !important;
    }

    /* Keep the bottom bar with copyright + nav links */
    footer .bar,
    #footer .bar {
        background: var(--ct-navy) !important;
        padding: 16px 12px !important;
    }

    footer .bar .row,
    #footer .bar .row.bar-holder {
        flex-direction: column !important;
        text-align: center !important;
        gap: 8px !important;
    }

    /* Foundation column override for footer bar */
    footer .bar .medium-6.columns,
    #footer .bar .medium-6.columns {
        width: 100% !important;
        flex: 0 0 100% !important;
        float: none !important;
        text-align: center !important;
    }

    footer .bar p,
    #footer .bar p {
        color: rgba(255,255,255,0.7) !important;
        font-size: 12px !important;
        margin: 0 !important;
    }

    /* Footer nav links — inline, centered */
    footer .bar .inline-list,
    #footer .bar #menu-footer {
        text-align: center !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    footer .bar .inline-list li,
    #footer .bar #menu-footer li {
        display: inline-block !important;
        margin: 0 8px !important;
    }

    footer .bar .inline-list a,
    #footer .bar #menu-footer a {
        color: rgba(255,255,255,0.85) !important;
        font-size: 13px !important;
        text-decoration: none !important;
    }
}

@media screen and (max-width: 480px) {

    /* Very small screens */
    .item-holder {
        padding: 10px 8px !important;
    }

    .item .entry-title,
    .item .entry-header h1 {
        font-size: 13px !important;
    }

    .head.store h1,
    .head.no-bg.store h1 {
        font-size: 18px !important;
    }

    .content-box .head h2 {
        font-size: 14px !important;
    }

    /* Narrower buttons on very small screens */
    .item .link-holder {
        width: 140px !important;
    }

    .item a.coupon-code-link,
    .item .coupon-code-link {
        width: 140px !important;
        font-size: 12px !important;
    }

    .coupon_type-coupon-code .link-holder a.coupon-code-link {
        width: 122px !important;
        margin-right: auto !important;
        margin-left: 0 !important;
    }

    .coupon_type-promotion .link-holder a.coupon-code-link {
        width: 140px !important;
    }
}

/* ==========================================================================
   12. HIDE UNRELIABLE COUPONS SECTION (optional - cleaner look)
   ========================================================================== */

/* Hide "Unreliable Coupons" section when empty or always */
.content-box:has(.counter-red) {
    display: none !important;
}

/* ==========================================================================
   13. GLOBAL UTILITY OVERRIDES
   ========================================================================== */

/* Remove background gradient from body */
body.wp-theme-clipper {
    background: var(--ct-bg) !important;
    background-image: none !important;
}

/* Remove inner borders/shadows from the old theme */
.content-box .box-holder {
    border: none !important;
    box-shadow: none !important;
}

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Better focus styles for accessibility */
a:focus,
button:focus,
input:focus {
    outline: 2px solid var(--ct-orange) !important;
    outline-offset: 2px !important;
}

/* Remove old Clipper gradients and textures */
.top-bar-section,
.top-bar,
body.wp-theme-clipper .top-bar,
.nav-top-bar {
    background-image: none !important;
}

/* ==========================================================================
   14. REFINEMENTS (Round 2 - post-testing fixes)
   ========================================================================== */

/* --- Fix: RSS icon still visible in store header --- */
.info .rss-link,
a.rss-link,
.fa-rss-square,
.head.store .rss-link,
.info > a[href*="feed"] {
    display: none !important;
}

/* Override yellow/beige tooltip background on coupon code link */
.coupon-code-link.has-tip,
a.coupon-code-link.has-tip,
.has-tip {
    border-bottom: none !important;
}

.coupon-code-link.has-tip::before,
.coupon-code-link.has-tip::after {
    display: none !important;
}

/* --- Fix: Clipboard tooltip styling --- */
.tooltip,
.has-tip {
    background: var(--ct-navy) !important;
    color: white !important;
    border-radius: 4px !important;
    font-size: 12px !important;
}

/* --- Fix: Reduce header-to-content spacing --- */
.header-branding {
    margin-bottom: 0 !important;
}

.content-area {
    padding-top: 10px !important;
}

.site-main,
#main {
    padding-top: 0 !important;
}

/* Align sidebar with main content */
.content-area > .medium-4.columns {
    padding-top: 0 !important;
}

/* Reduce gap between store header box and coupon list */
.content-box {
    margin-bottom: 10px !important;
}

/* --- Fix: Better horizontal layout for coupon cards --- */
.item .item-top {
    display: flex !important;
    align-items: center !important;
}

.item .item-panel {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 20px !important;
    width: 100% !important;
}

.item .item-panel .entry-header {
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

.item .item-panel .entry-header h1 {
    margin-bottom: 0 !important;
}

.item .item-panel .link-holder,
.item .item-panel .codebox,
.item .item-panel .coupon-code-box {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
}

/* Hide the clearfix div inside the panel */
.item .item-panel .clear {
    display: none !important;
}

/* --- Fix: Coupon description - collapse by default with "more" link --- */
.item-content {
    max-height: 3.2em !important;
    overflow: hidden !important;
    position: relative !important;
    margin-top: 8px !important;
    padding-right: 0 !important;
}

.item-content a[href*="more"],
.item-content .more-link {
    color: var(--ct-orange) !important;
    font-weight: 500 !important;
    text-decoration: none !important;
}

/* --- Fix: "more >>" link styling ---
 * Scoped to .item-content so [href*="more"] cannot match the CTA button
 * when a coupon slug happens to contain the substring "more" (e.g.,
 * "5-off-apparel-beauty-more-at-shein" — caused the button text to
 * render orange-on-orange, making it invisible).
 */
a.more-link,
.item-content a[href*="#more"],
.item-content a[href*="more"],
.item-content .more-link {
    color: var(--ct-orange) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
}

/* Defense-in-depth: the CTA button label must never inherit accent color,
 * no matter what other rule matches. Revealed state below restores orange.
 */
.item a.coupon-code-link,
.item a.coupon-code-link > span {
    color: #fff !important;
}

.ct-revealed a.coupon-code-link,
.ct-revealed a.coupon-code-link > span,
a.coupon-code-link.ct-code-shown,
a.coupon-code-link.ct-code-shown > span {
    color: var(--ct-orange) !important;
}

/* --- Fix: Footer panel/widget area styling --- */
.panel,
footer .panel {
    background: var(--ct-navy-light) !important;
    border: none !important;
}

/* --- HIDE: Footer widget area (Categories, Stores lists) --- */
footer .panel-holder,
footer .panel > .row.column.panel-holder,
#footer .panel-holder {
    display: none !important;
}

/* --- Fix: Categories and Stores sections in footer area --- */
.footer-widgets h3,
footer h3,
.panel h3 {
    color: rgba(255,255,255,0.9) !important;
    font-size: 14px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

/* ==========================================================================
   HOMEPAGE + SEARCH STORE LOGOS
   Restores the store logo column on the front page (.home) and search results
   (.search). All other pages keep the logo column hidden (global rules above).

   To revert: delete from this comment down to "END HOMEPAGE STORE LOGOS".
   Backup: clipper-child/backups/style_2026-04-24_pre-homepage-logo.css
   ========================================================================== */

/* 1. Restore and size the logo column */
:is(.home, .search) .item .item-top .large-3.medium-6.columns {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 162px !important;
    width: 162px !important;
    max-width: 162px !important;
    padding-right: 20px !important;
    padding-left: 0 !important;
}

:is(.home, .search) .item .store-holder {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
}

/* 2. Logo box */
:is(.home, .search) .item .store-image {
    width: 130px !important;
    height: 125px !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
    padding: 0 !important;
    border: none !important;
    background-color: transparent !important;
}

/* 3. Inner cover: fill the box completely */
:is(.home, .search) .item .store-image .item-cover {
    width: 100% !important;
    height: 100% !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center top !important;
}

/* 4. Hide store name text — the logo is the visual identifier */
:is(.home, .search) .item .store-name {
    display: none !important;
}

/* 5. Right column takes all remaining space */
:is(.home, .search) .item .item-top .large-9.medium-6.columns {
    flex: 1 1 auto !important;
    width: auto !important;
    max-width: none !important;
}

/* 6. Mobile: logo left, title above button stacked */
@media (max-width: 640px) {
    /* Logo column: 120px, top-aligned, no Foundation gutter */
    :is(.home, .search) .item .item-top .large-3.medium-6.columns {
        flex: 0 0 120px !important;
        width: 120px !important;
        max-width: 120px !important;
        padding-left: 0 !important;
        padding-right: 12px !important;
        align-self: flex-start !important;
    }

    /* Content column: no Foundation gutter so button margin math is clean */
    :is(.home, .search) .item .item-top .large-9.medium-6.columns {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    :is(.home, .search) .item .store-image {
        width: 90px !important;
        height: 90px !important;
        border-radius: 8px !important;
        background-color: transparent !important;
        padding: 0 !important;
        border: none !important;
    }

    /* Override the 768px block: stack title above button */
    :is(.home, .search) .item .item-panel {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 6px !important;
    }

    :is(.home, .search) .item .item-panel .entry-header {
        flex: 0 0 auto !important;
        width: 100% !important;
        min-height: 90px !important;
        padding-right: 10px !important;
    }

    /* Button: 7px inset left and right, aligned with image square edges */
    :is(.home, .search) .item .link-holder,
    :is(.home, .search) .coupon_type-coupon-code .link-holder {
        margin-left: -111px !important;
        width: calc(100% + 102px) !important;
        height: auto !important;
    }

    /* Button link: full width, slimmer height */
    :is(.home, .search) .item a.coupon-code-link,
    :is(.home, .search) .item .coupon-code-link {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        padding-top: 10px !important;
        padding-bottom: 10px !important;
        text-align: center !important;
        box-sizing: border-box !important;
    }

    /* Coupon-code type: full-width button on home/search mobile — no peek */
    :is(.home, .search) .coupon_type-coupon-code .link-holder a.coupon-code-link {
        width: 100% !important;
        border-radius: var(--ct-radius) !important;
    }
}

/* END HOMEPAGE STORE LOGOS */

/* =========================================================================
   DISABLE COMMENTS
   ========================================================================= */

#comments,
.comment-respond,
.comments-title,
.comment-list,
.comment-navigation,
.comment-count {
    display: none !important;
}

/* --- Fix: Remove "Unreliable Coupons" via alternative selector for older browsers --- */
.counter-red {
    display: none !important;
}

/* Also target the parent content-box of unreliable coupons */
.content-box .head:has(h2) + .entry-list:empty {
    display: none !important;
}

/* --- Fix: Entry list in coupon loop --- */
.entry-list {
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
}

/* --- Enhancement: "Show Coupon Code" vs "Click to Redeem" differentiation --- */
/* Both use the same reveal animation - no border differentiation needed */

/* --- Fix: Content area row gap --- */
.content-area.row {
    max-width: 1200px !important;
    margin: 0 auto !important;
}

/* --- Fix: Adsense/ad container spacing --- */
.adsense {
    margin: 16px 0 !important;
    text-align: center !important;
}

/* --- Fix: Foundation "no-bg" override --- */
.head.no-bg {
    background: var(--ct-white) !important;
}

/* (Round 2 mobile rules merged into main @media block above) */

/* ==========================================================================
   CouponTorch Modal — Coupon Code Popup
   ========================================================================== */

#ct-modal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(27, 42, 74, 0.75) !important;
    z-index: 999999 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    animation: ct-fade-in 0.2s ease !important;
}

@keyframes ct-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.ct-modal-box {
    background: var(--ct-white) !important;
    padding: 32px !important;
    border-radius: var(--ct-radius-lg) !important;
    width: 90% !important;
    max-width: 440px !important;
    text-align: center !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3) !important;
    position: relative !important;
    font-family: var(--ct-font) !important;
    animation: ct-slide-up 0.25s ease !important;
}

@keyframes ct-slide-up {
    from { transform: translateY(20px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}

.ct-modal-close {
    position: absolute !important;
    top: 12px !important;
    right: 16px !important;
    background: none !important;
    border: none !important;
    font-size: 28px !important;
    cursor: pointer !important;
    color: var(--ct-gray-400) !important;
    line-height: 1 !important;
    padding: 4px 8px !important;
    transition: color 0.15s ease !important;
}

.ct-modal-close:hover {
    color: var(--ct-gray-700) !important;
}

.ct-modal-title {
    margin: 0 0 20px 0 !important;
    color: var(--ct-navy) !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    font-family: var(--ct-font) !important;
}

.ct-modal-code-row {
    display: flex !important;
    justify-content: center !important;
    align-items: stretch !important;
    margin-bottom: 20px !important;
    border-radius: var(--ct-radius) !important;
    overflow: hidden !important;
    border: none !important;
    height: 52px !important;
}

.ct-modal-code-input {
    flex: 1 !important;
    height: 52px !important;
    box-sizing: border-box !important;
    padding: 0 16px !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    font-family: 'Courier New', Courier, monospace !important;
    letter-spacing: 2px !important;
    border: none !important;
    background: var(--ct-orange-light) !important;
    color: var(--ct-navy) !important;
    text-align: center !important;
    outline: none !important;
    min-width: 0 !important;
    border-radius: var(--ct-radius) 0 0 var(--ct-radius) !important;
}

.ct-modal-copy-btn {
    background: var(--ct-orange) !important;
    color: var(--ct-white) !important;
    border: none !important;
    height: 52px !important;
    box-sizing: border-box !important;
    padding: 0 24px !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    font-family: var(--ct-font) !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    transition: background 0.15s ease !important;
    border-radius: 0 var(--ct-radius) var(--ct-radius) 0 !important;
}

.ct-modal-copy-btn:hover {
    background: var(--ct-orange-hover) !important;
}

.ct-modal-copy-btn.ct-copied {
    background: var(--ct-success) !important;
}

.ct-modal-help {
    margin: 0 0 16px 0 !important;
    color: var(--ct-text-light) !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
}

.ct-modal-redeem-btn {
    display: block !important;
    margin: 0 auto 16px !important;
    padding: 10px 24px !important;
    border: 2px solid var(--ct-navy) !important;
    border-radius: var(--ct-radius) !important;
    color: var(--ct-navy) !important;
    background: transparent !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    font-family: var(--ct-font) !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: background 0.15s ease, color 0.15s ease !important;
}

.ct-modal-redeem-btn:hover {
    background: var(--ct-navy) !important;
    color: var(--ct-white) !important;
    text-decoration: none !important;
}

/* --- Expandable coupon details inside modal --- */
.ct-modal-details {
    border-top: 1px solid var(--ct-gray-200) !important;
    margin-top: 4px !important;
    padding-top: 0 !important;
}

.ct-modal-details-toggle {
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    width: 100% !important;
    padding: 12px 0 4px 0 !important;
    font-family: var(--ct-font) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--ct-text-light) !important;
    transition: color 0.15s ease !important;
}

.ct-modal-details-toggle:hover {
    color: var(--ct-navy) !important;
}

.ct-chevron {
    font-size: 11px !important;
    transition: transform 0.2s ease !important;
    display: inline-block !important;
}

.ct-modal-details-toggle.ct-open .ct-chevron {
    transform: rotate(180deg) !important;
}

.ct-modal-details-content {
    padding: 12px 0 4px 0 !important;
    text-align: left !important;
}

.ct-modal-details-title {
    display: block !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--ct-navy) !important;
    margin-bottom: 6px !important;
}

.ct-modal-details-text {
    font-size: 13px !important;
    line-height: 1.6 !important;
    color: var(--ct-text-light) !important;
    margin: 0 !important;
}

/* ==========================================================================
   Button "Revealed" State — after user clicks and code is shown
   ========================================================================== */

.ct-revealed a.coupon-code-link,
a.coupon-code-link.ct-code-shown {
    background: var(--ct-orange-light) !important;
    color: var(--ct-orange) !important;
    border: 2px dashed var(--ct-orange) !important;
    font-family: 'Courier New', Courier, monospace !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    letter-spacing: 1.5px !important;
    width: 200px !important;
    border-radius: var(--ct-radius) !important;
}

/* Hide the peek span when code is revealed (it's now on the button) */
.ct-revealed .ct-code-peek {
    display: none !important;
}

/* ==========================================================================
   Override: Hide Clipper's ColorBox for coupon popups
   ========================================================================== */
#colorbox.ct-hidden,
#cboxOverlay.ct-hidden {
    display: none !important;
}

/* ==========================================================================
   Mobile Modal
   ========================================================================== */
@media (max-width: 480px) {
    .ct-modal-box {
        padding: 24px 20px !important;
        margin: 0 12px !important;
    }

    .ct-modal-code-input {
        font-size: 16px !important;
        padding: 12px 10px !important;
    }

    .ct-modal-copy-btn {
        padding: 0 16px !important;
        font-size: 14px !important;
    }

    .ct-modal-title {
        font-size: 18px !important;
    }
}

/* Affiliate disclosure bar */
#ct-affiliate-disclosure {
    background: #f5f5f5;
    border-top: 1px solid #e0e0e0;
    text-align: center;
    padding: 8px 16px;
    font-size: 12px;
    color: #666;
}

#ct-affiliate-disclosure a {
    color: #666;
    text-decoration: underline;
}

/* ==========================================================================
   WPFORMS — CouponTorch styled
   ========================================================================== */

.wpforms-container {
    max-width: 600px;
}

/* Labels */
.wpforms-form .wpforms-field-label {
    font-family: var(--ct-font) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--ct-gray-900) !important;
    margin-bottom: 6px !important;
}

.wpforms-form .wpforms-field-sublabel {
    font-size: 12px !important;
    color: var(--ct-text-muted) !important;
    margin-top: 4px !important;
}

/* Inputs & textarea */
.wpforms-form input[type="text"],
.wpforms-form input[type="email"],
.wpforms-form textarea {
    width: 100% !important;
    padding: 12px 16px !important;
    border: 2px solid var(--ct-gray-300) !important;
    border-radius: var(--ct-radius) !important;
    font-family: var(--ct-font) !important;
    font-size: 15px !important;
    color: var(--ct-text) !important;
    background: var(--ct-white) !important;
    box-sizing: border-box !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
    outline: none !important;
    box-shadow: none !important;
}

.wpforms-form input[type="text"]:focus,
.wpforms-form input[type="email"]:focus,
.wpforms-form textarea:focus {
    border-color: var(--ct-orange) !important;
    box-shadow: 0 0 0 3px rgba(232, 114, 42, 0.15) !important;
}

.wpforms-form textarea {
    min-height: 160px !important;
    resize: vertical !important;
}

/* Submit button */
.wpforms-form button[type="submit"],
.wpforms-form .wpforms-submit {
    background: var(--ct-orange) !important;
    color: var(--ct-white) !important;
    border: none !important;
    border-radius: var(--ct-radius) !important;
    padding: 0 32px !important;
    height: 48px !important;
    font-family: var(--ct-font) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    letter-spacing: 0.2px !important;
    transition: background 0.2s ease, box-shadow 0.2s ease !important;
}

.wpforms-form button[type="submit"]:hover,
.wpforms-form .wpforms-submit:hover {
    background: var(--ct-orange-hover) !important;
    box-shadow: var(--ct-shadow-md) !important;
}

/* Validation errors */
.wpforms-form .wpforms-field input.wpforms-error,
.wpforms-form .wpforms-field textarea.wpforms-error {
    border-color: #dc3545 !important;
    box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.15) !important;
}

.wpforms-form label.wpforms-error {
    font-size: 13px !important;
    color: #dc3545 !important;
    margin-top: 4px !important;
    font-weight: 400 !important;
}

/* Success message */
.wpforms-confirmation-container-full {
    background: #d4edda !important;
    color: #155724 !important;
    border: none !important;
    border-radius: var(--ct-radius) !important;
    padding: 12px 16px !important;
    font-size: 14px !important;
}

@media (max-width: 600px) {
    .wpforms-form button[type="submit"],
    .wpforms-form .wpforms-submit {
        width: 100% !important;
    }
}