/* ==========================================================
   Custom CSS — consolidated from Code Snippets plugin into
   the theme (enqueued after theme styles in wpcoupon_theme_scripts).
   Sections:
     1. Icon font + overflow + mobile header modal fixes
     2. Store / Category page layout (2 cols, header box, buttons)
     3. Page content + title spacing
     4. Breadcrumb + description (show full)
     5. Unified header box (logo + description)
     6. Three buttons (کپی کد | استفاده از کد | مشاهده مطلب)
     7. Store extra info box
     8. Accessibility helpers
     9. Full coupon titles
     10. Headings, related coupons widget, offer stats, extra terms
     11. Coupon modal footer + myButton
     12. Show more / Show less description toggle
     13. Jump-to-coupons button
   ========================================================== */

/* ============================================
   1. Icons must keep theme icon font (do not override with body typography)
   ============================================ */
i.icon, .icon {
    font-family: Icons !important;
}

/* ============================================
   Force Vazirmatn everywhere (only font of the theme)
   Icon fonts (dashicons / Icons / outline-icons / brand-icons / Step /
   Rating / Dropdown / Checkbox / Accordion) are excluded on purpose.
   Note: semantic.min.css + style.css already declare Vazirmatn natively;
   this rule is the safety net for plugin/theme leftovers.
   ============================================ */
body,
body p, body div, body span, body a, body li, body ul, body ol,
body h1, body h2, body h3, body h4, body h5, body h6,
body input, body select, body textarea, body button,
body table, body td, body th, body blockquote,
.coupon-item, .store-listing-item, .coupon-title, .coupon-des,
.widget-title, .entry-title, .page-title, .site-header, .site-footer {
    font-family: 'Vazirmatn', 'Vazirmatn Fallback', Tahoma, sans-serif !important;
}
/* Re-assert icon fonts after the force rule above */
.dashicons,
.dashicons-before::before {
    font-family: dashicons !important;
}

/* ============================================
   Kill horizontal overflow (mobile Chrome left gap)
   Clip ONLY at page level so inner boxes do not get scrollbars
   html keeps overflow-x:hidden (root scroller — safe for sticky).
   body/#page use overflow-x:clip — clip does NOT create a scroll
   container (unlike hidden, which forces overflow-y:auto and makes
   #page the sticky containing block, silently disabling the mobile
   ribbon's position:sticky in every browser).
   Old browsers without clip drop the line: sticky works, only the
   horizontal-gap fix degrades (max-width:100% still contains).
   ============================================ */
html {
    overflow-x: hidden !important;
}
body, #page {
    overflow-x: clip !important;
    max-width: 100% !important;
}

/* ============================================
   Fix huge empty space under footer (STRONG)
   Cause: .sm-header .modal { height: 100vh; position: absolute }
   Breakpoint: theme switches to mobile header at max-width 1110px
   ============================================ */

/* Default: kill 100vh absolute modals so they never stretch the page */
.sm-header .modal,
.sm-header .response_menu_modal {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    height: auto !important;
    max-height: 100vh !important;
    min-height: 0 !important;
}

/* Closed state — completely out of layout.
   NOTE: only :not(.is-visible) — the JS toggles is-visible, never .active.
   A bare :not(.active) branch kept matching the OPEN modal and forced
   padding:0 !important on it, hiding the close button behind the search input. */
.sm-header .modal:not(.is-visible),
.sm-header .response_menu_modal:not(.is-visible) {
    display: none !important;
    height: 0 !important;
    max-height: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Open state */
.sm-header .modal.is-visible,
.sm-header .response_menu_modal.is-visible {
    display: block !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 100% !important;
    max-height: 100vh !important;
    z-index: 9999 !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

.sm-header .overlay:not(.is-visible),
.sm-header .menu-overlay:not(.is-visible) {
    display: none !important;
}

.sm-header .overlay.is-visible,
.sm-header .menu-overlay.is-visible {
    display: block !important;
    position: fixed !important;
    z-index: 9998 !important;
}

/* Mobile search/menu modal — prominent cancel button (visible on dark blur) */
.sm-header .modal-close-btn,
.sm-header .menu-close-btn {
    width: 36px !important;
    height: 36px !important;
    right: 14px !important;
    top: 10px !important;
    padding: 0 !important;
    font-size: 16px !important;
    line-height: 32px !important;
    text-align: center !important;
    border: none !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.95) !important;
    color: #232a30 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35) !important;
}
.sm-header .is-visible h4.search-title {
    max-width: calc(100% - 90px);
}

/* Page wrappers must not force full viewport height */
html, body {
    min-height: 0 !important;
    height: auto !important;
}

#page,
.site,
.site-content,
#content,
#content-wrap,
.site-footer,
footer#colophon {
    min-height: 0 !important;
    height: auto !important;
}

/* Prevent leftover clearfix / after pseudo gaps */
#page::after,
.site::after,
.site-content::after,
#content-wrap::after {
    content: none !important;
    display: none !important;
    height: 0 !important;
}

/* ============================================
   2. Custom styles for Store / Brands page
   - 2 columns instead of 3
   - Clean description (no scrollbar)
   - Two buttons (Copy Code + View)
   - Fully responsive
   ============================================ */

/* --- 2 Columns layout (STORE + CATEGORY) --- */
/* Parent list containers */
.st-list-coupons,
.store-listings,
.coupon_list_wrap,
#cat-coupon-lists,
.cat-coupon-lists {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    gap: 20px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Outer category section must not break layout */
section#store-listings-wrapper.st-list-coupons {
    display: block !important;
    width: 100% !important;
}
section#store-listings-wrapper.st-list-coupons > #cat-coupon-lists,
section#store-listings-wrapper.st-list-coupons > .cat-coupon-lists {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    gap: 20px !important;
    width: 100% !important;
}

/* Each coupon card = exactly half row (minus gap) */
.st-list-coupons .store-listing-item,
.store-listings .store-listing-item,
.couponstore-tpl-full .store-listing-item,
#cat-coupon-lists .store-listing-item,
.cat-coupon-lists .store-listing-item,
#cat-coupon-lists > .coupon-item,
.cat-coupon-lists > .coupon-item,
.st-list-coupons > .coupon-item,
.store-listings > .coupon-item {
    flex: 0 0 calc(50% - 10px) !important;
    width: calc(50% - 10px) !important;
    max-width: calc(50% - 10px) !important;
    min-width: 0 !important;
    margin: 0 !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
    float: none !important;
    box-sizing: border-box !important;
}

/* --- Equal card height + buttons always at bottom --- */
.st-list-coupons .store-listing-item,
.store-listings .store-listing-item,
#cat-coupon-lists .store-listing-item,
.cat-coupon-lists .store-listing-item,
.st-list-coupons > .coupon-item,
.store-listings > .coupon-item,
#cat-coupon-lists > .coupon-item,
.cat-coupon-lists > .coupon-item {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    align-self: stretch !important;
}

.store-listing-item .latest-coupon {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
}

.store-listing-item .latest-coupon .coupon-des {
    flex: 1 1 auto !important;
}

.store-listing-item .coupon-detail.coupon-button-type {
    margin-top: auto !important;
    width: 100% !important;
    float: none !important;
    clear: both !important;
}

/* --- Clean Description (show ~100 words, no bad scroll) --- */
.store-listing-item .latest-coupon .coupon-des {
    height: auto !important;
    max-height: 220px !important;         /* enough for ~100 words */
    overflow: hidden !important;
    overflow-y: hidden !important;
    text-overflow: ellipsis !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 12 !important;    /* ~12 lines */
    -webkit-box-orient: vertical !important;
    line-height: 1.6 !important;
    margin-bottom: 14px !important;
    color: #555 !important;
    font-size: 13.5px !important;
}

/* Hide old single button styles if any remain */
.store-listing-item .cu_btn.two-buttons .coupon-button,
.store-listing-item .cu_btn.three-buttons .coupon-button {
    display: none !important;
}

/* --- Responsive columns --- */
@media screen and (max-width: 640px) {
    .st-list-coupons .store-listing-item,
    .store-listings .store-listing-item,
    .couponstore-tpl-full .store-listing-item,
    #cat-coupon-lists .store-listing-item,
    .cat-coupon-lists .store-listing-item,
    #cat-coupon-lists > .coupon-item,
    .cat-coupon-lists > .coupon-item,
    .st-list-coupons > .coupon-item,
    .store-listings > .coupon-item {
        flex: 0 0 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 16px 0 !important;
    }

    .st-list-coupons,
    .store-listings,
    .coupon_list_wrap,
    #cat-coupon-lists,
    .cat-coupon-lists {
        gap: 16px !important;
    }
}

/* ============================================
   3. Page content padding + title
   ============================================ */
#content.site-content {
    padding: 10px !important;
}

/* Make sure page title looks good */
.page .page-title,
.page .entry-title {
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 20px;
    color: #222;
    line-height: 1.4;
}

/* Fullwidth template title + padding fixes */
.cm-page-title h1.page-title,
.cm-page-title h1.entry-title {
    font-size: 32px;
    font-weight: 700;
    line-height: 1.3;
}

.container-page .container {
    padding-left: 10px !important;
    padding-right: 10px !important;
}

/* Compact fullwidth template - no header image, minimal spacing */
.cm-full-top-compact .cm-page-title {
    background-image: none !important;
    background: transparent !important;
    min-height: 0 !important;
    padding: 18px 0 12px !important;
}

.cm-full-top-compact .cm-thumb-img,
.cm-full-top-compact .cm-page-title[style*="background-image"] {
    display: none !important;
}

.cm-full-top-compact h1.page-title {
    font-size: 26px !important;
    line-height: 1.35 !important;
    margin: 0 !important;
    color: #222 !important;
    text-shadow: none !important;
}

/* Reduce gap between title and content */
.container-page {
    padding-top: 0 !important;
    margin-top: 0 !important;
}

.container-page .container {
    padding-top: 5px !important;
}

.post-entry.content-box {
    margin-top: 0 !important;
}

/* ============================================
   4. Store & Category pages
   1. Hide breadcrumb
   2. Show full description (no scroll / no height limit)
   ============================================ */

/* 1. Hide breadcrumb on store & category pages */
.single-store-header .ui.breadcrumb,
.single-store-header .breadcrumbs,
.single-cat .ui.breadcrumb,
.single-cat .breadcrumbs,
.custom-page-header .ui.breadcrumb,
.custom-page-header .breadcrumbs,
.custom-page-header .site-breadcrumb {
    display: none !important;
}

/* 2. Show full description - remove height limit & scroll */
.custom-page-header .des-overflow {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
}

.single-store-header .des-overflow,
.single-cat .des-overflow,
.header_des .des-overflow {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}

/* ============================================
   5. Merge header-thumb + yellow box into ONE box
   (Store pages & Category pages)
   ============================================ */

/* Make the whole inner-content one unified box */
.custom-page-header .inner-content,
.single-store-header .inner-content,
.single-cat .inner-content {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 25px !important;
    background: #fefbf7 !important;          /* same yellow/cream color */
    border: 2px solid #f0e6d8 !important;
    border-radius: 12px !important;
    padding: 25px 30px !important;
    margin-bottom: 0 !important;
    overflow: hidden;
}

/* Thumb becomes part of the same box */
.custom-page-header .header-thumb,
.single-store-header .header-thumb,
.single-cat .cat_lg_thumb,
.single-cat .header-thumb {
    float: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    margin-right: 0 !important;
    min-height: auto !important;
    border-radius: 10px !important;
    overflow: hidden;
    flex-shrink: 0;
    background: transparent !important;
    border: none !important;
}

.custom-page-header .header-thumb img,
.single-store-header .header-thumb img {
    width: 140px !important;
    max-width: 140px !important;
    height: auto !important;
    border-radius: 10px !important;
    object-fit: contain;
}

/* Content area - remove its own box styling */
.custom-page-header .header-content,
.single-store-header .header-content,
.single-cat .header-content {
    flex: 1 1 auto !important;
    padding: 0 !important;
    margin: 0 !important;
    min-height: auto !important;
    border-radius: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    display: block !important;
    overflow: visible !important;
}

.custom-page-header .header_des,
.single-store-header .header_des {
    width: 100% !important;
    float: none !important;
}

/* Title spacing inside the unified box */
.custom-page-header .header-content h1,
.single-store-header .header-content h1 {
    margin-top: 0 !important;
    margin-bottom: 10px !important;
}

/* Hide the small mobile thumb duplicate if large one is shown */
@media screen and (min-width: 991px) {
    .custom-page-header .sm_header_thumb {
        display: none !important;
    }
}

/* Mobile: stack logo above text, still one box */
@media screen and (max-width: 990px) {
    .custom-page-header .inner-content,
    .single-store-header .inner-content,
    .single-cat .inner-content {
        flex-direction: column !important;
        text-align: center !important;
        padding: 20px 18px !important;
        gap: 15px !important;
    }

    .custom-page-header .header-thumb,
    .single-store-header .header-thumb,
    .single-cat .cat_lg_thumb {
        display: flex !important;
        margin: 0 auto !important;
    }

    .custom-page-header .header-thumb img,
    .single-store-header .header-thumb img {
        width: 110px !important;
        max-width: 110px !important;
    }

    .custom-page-header .sm_header_thumb {
        display: none !important; /* avoid double logo */
    }

    .custom-page-header .header-content {
        text-align: center !important;
    }
}

/* ============================================
   FIX: Logo on LEFT + no double image on mobile
   ============================================ */

/* Force logo to the visual LEFT side (works on RTL sites) */
.custom-page-header .inner-content,
.single-store-header .inner-content,
.single-cat .inner-content {
    flex-direction: row !important;
    direction: ltr !important; /* forces left-to-right layout for this box only */
}

/* Keep the text content RTL so Persian text is correct */
.custom-page-header .header-content,
.single-store-header .header-content,
.single-cat .header-content,
.custom-page-header .header_des,
.single-store-header .header_des {
    direction: rtl !important;
    text-align: right !important;
}

/* Logo always on the left */
.custom-page-header .header-thumb,
.single-store-header .header-thumb,
.single-cat .cat_lg_thumb,
.single-cat .header-thumb {
    order: 1 !important;
    margin-right: 25px !important;
    margin-left: 0 !important;
}

.custom-page-header .header-content {
    order: 2 !important;
}

/* ===== MOBILE: hide duplicate logo ===== */
@media screen and (max-width: 990px) {

    /* Hide the small mobile thumb completely */
    .custom-page-header .sm_header_thumb,
    .single-store-header .sm_header_thumb,
    .single-cat .sm_header_thumb,
    .header-content .sm_header_thumb {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        width: 0 !important;
        overflow: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Show only the main header-thumb once, centered */
    .custom-page-header .header-thumb,
    .single-store-header .header-thumb,
    .single-cat .cat_lg_thumb,
    .single-cat .header-thumb {
        display: flex !important;
        order: 1 !important;
        margin: 0 auto 12px auto !important;
    }

    .custom-page-header .inner-content,
    .single-store-header .inner-content,
    .single-cat .inner-content {
        flex-direction: column !important;
        direction: rtl !important;
        text-align: center !important;
    }

    .custom-page-header .header-content {
        text-align: center !important;
        direction: rtl !important;
    }
}

/* ============================================
   Reduce logo spacing - tighter to the left
   ============================================ */
.custom-page-header .inner-content,
.single-store-header .inner-content,
.single-cat .inner-content {
    padding: 18px 20px 18px 15px !important;  /* less left padding */
    gap: 15px !important;
}

.custom-page-header .header-thumb,
.single-store-header .header-thumb,
.single-cat .cat_lg_thumb,
.single-cat .header-thumb {
    margin: 0 !important;
    margin-right: 12px !important;
    margin-left: 0 !important;
    padding: 0 !important;
    min-width: auto !important;
    width: auto !important;
}

.custom-page-header .header-thumb img,
.single-store-header .header-thumb img,
.single-cat .header-thumb img {
    width: 100px !important;
    max-width: 100px !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
    display: block !important;
}

/* Remove extra space from the icon wrapper */
.custom-page-header .header-thumb .ui.center.aligned.icon,
.single-store-header .header-thumb .ui.center.aligned.icon {
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
}

@media screen and (max-width: 990px) {
    .custom-page-header .inner-content,
    .single-store-header .inner-content {
        padding: 15px !important;
        gap: 10px !important;
    }

    .custom-page-header .header-thumb img,
    .single-store-header .header-thumb img {
        width: 90px !important;
        max-width: 90px !important;
    }
}

/* ============================================
   MOBILE: remove extra top/bottom space around logo
   ============================================ */
@media screen and (max-width: 990px) {

    .custom-page-header .inner-content,
    .single-store-header .inner-content,
    .single-cat .inner-content {
        padding: 12px 14px !important;
        gap: 8px !important;
        align-items: center !important;
    }

    .custom-page-header .header-thumb,
    .single-store-header .header-thumb,
    .single-cat .cat_lg_thumb,
    .single-cat .header-thumb {
        margin: 0 auto !important;
        padding: 0 !important;
        min-height: 0 !important;
        height: auto !important;
        line-height: 0 !important;
    }

    .custom-page-header .header-thumb img,
    .single-store-header .header-thumb img {
        width: 80px !important;
        max-width: 80px !important;
        height: auto !important;
        margin: 0 auto !important;
        padding: 0 !important;
        display: block !important;
    }

    .custom-page-header .header-thumb .ui.center.aligned.icon,
    .single-store-header .header-thumb .ui.center.aligned.icon,
    .custom-page-header .header-thumb .ui.icon,
    .single-store-header .header-thumb .ui.icon {
        margin: 0 !important;
        padding: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        line-height: 0 !important;
    }

    /* Reduce space under title on mobile */
    .custom-page-header .header-content h1,
    .single-store-header .header-content h1 {
        margin-top: 4px !important;
        margin-bottom: 6px !important;
        font-size: 18px !important;
    }

    .custom-page-header .des-overflow {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
}

/* ============================================
   6. Three buttons - Samsung / mobile friendly
   کپی کد | استفاده از کد | مشاهده مطلب
   ============================================ */

.store-listing-item .coupon-detail.coupon-button-type {
    width: 100% !important;
    float: none !important;
    clear: both !important;
    margin-top: auto !important;
    padding-top: 12px !important;
}

.store-listing-item .cu_btn.three-buttons,
.store-listing-item .cu_btn.two-buttons {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    box-sizing: border-box !important;
}

.store-listing-item .coupon-copy-btn,
.store-listing-item .coupon-use-btn,
.store-listing-item .coupon-view-btn {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 12px 10px !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    text-align: center !important;
    border: none !important;
    text-decoration: none !important;
    line-height: 1.3 !important;
    min-height: 50px !important;
    height: auto !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    transition: background 0.2s ease !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    -webkit-tap-highlight-color: transparent !important;
}

.store-listing-item .coupon-copy-btn i,
.store-listing-item .coupon-use-btn i,
.store-listing-item .coupon-view-btn i {
    font-size: 16px !important;
}

.store-listing-item .coupon-copy-btn .btn-label,
.store-listing-item .coupon-use-btn .btn-label,
.store-listing-item .coupon-view-btn .btn-label {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    max-width: 100% !important;
}

.store-listing-item .coupon-copy-btn i,
.store-listing-item .coupon-use-btn i,
.store-listing-item .coupon-view-btn i {
    flex-shrink: 0 !important;
    margin: 0 !important;
}

/* کپی کد - blue */
.store-listing-item .coupon-copy-btn {
    background: #2185d0 !important;
    color: #fff !important;
}
.store-listing-item .coupon-copy-btn:hover,
.store-listing-item .coupon-copy-btn:active {
    background: #1678c2 !important;
    color: #fff !important;
}
.store-listing-item .coupon-copy-btn.copied {
    background: #21ba45 !important;
}

/* استفاده از کد - green */
.store-listing-item .coupon-use-btn {
    background: #21ba45 !important;
    color: #fff !important;
}
.store-listing-item .coupon-use-btn:hover,
.store-listing-item .coupon-use-btn:active {
    background: #16ab39 !important;
    color: #fff !important;
}

/* مشاهده مطلب - cyan #27E4F5 */
.store-listing-item .coupon-view-btn {
    background: #27E4F5 !important;
    color: #033 !important;
    border: 1px solid #1fcadb !important;
}
.store-listing-item .coupon-view-btn:hover,
.store-listing-item .coupon-view-btn:active {
    background: #1fcadb !important;
    color: #011 !important;
}

/* Tablets / medium phones - still side by side but tighter */
@media screen and (max-width: 900px) {
    .store-listing-item .coupon-copy-btn,
    .store-listing-item .coupon-use-btn,
    .store-listing-item .coupon-view-btn {
        font-size: 13px !important;
        padding: 11px 6px !important;
        min-height: 48px !important;
    }
}

/* Samsung / small mobile - STACK full width */
@media screen and (max-width: 767px) {
    .store-listing-item .cu_btn.three-buttons,
    .store-listing-item .cu_btn.two-buttons {
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
    }

    .store-listing-item .coupon-copy-btn,
    .store-listing-item .coupon-use-btn,
    .store-listing-item .coupon-view-btn {
        flex: none !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        min-height: 48px !important;
        height: 48px !important;
        font-size: 14px !important;
        padding: 12px 16px !important;
        white-space: normal !important;
        border-radius: 10px !important;
    }

    .store-listing-item .coupon-copy-btn .btn-label,
    .store-listing-item .coupon-use-btn .btn-label,
    .store-listing-item .coupon-view-btn .btn-label {
        white-space: normal !important;
        font-size: 14px !important;
    }
}

/* ============================================
   7. Store Extra Info box (same style as header box)
   ============================================ */
.store-extra-info.inner-content,
.store-extra-info {
    background: #fefbf7 !important;
    border: 2px solid #f0e6d8 !important;
    border-radius: 12px !important;
    padding: 22px 24px !important;
    margin: 24px 0 10px 0 !important;
    box-sizing: border-box !important;
    width: 100% !important;
    clear: both !important;
    overflow: hidden !important;
    direction: rtl !important;
    text-align: right !important;
    color: #222 !important;
    line-height: 1.7 !important;
    font-size: 14.5px !important;
}

.store-extra-info p {
    margin: 0 0 12px 0 !important;
    line-height: 1.7 !important;
}

.store-extra-info p:last-child {
    margin-bottom: 0 !important;
}

.store-extra-info h1,
.store-extra-info h2,
.store-extra-info h3,
.store-extra-info h4 {
    margin: 0 0 12px 0 !important;
    line-height: 1.4 !important;
    color: #161b1e !important;
}

.store-extra-info ul,
.store-extra-info ol {
    margin: 0 0 12px 20px !important;
    padding: 0 !important;
}

.store-extra-info a {
    color: #2185d0 !important;
    text-decoration: none !important;
}

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

.store-extra-info img {
    max-width: 100% !important;
    height: auto !important;
    border-radius: 8px !important;
}

@media screen and (max-width: 640px) {
    .store-extra-info.inner-content,
    .store-extra-info {
        padding: 16px 14px !important;
        margin-top: 18px !important;
        font-size: 14px !important;
    }
}

/* ============================================
   8. Accessibility: hide screen-reader text visually
   ============================================ */
.screen-reader-text {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* ============================================
   9. Full coupon titles (no ... truncation)
   ============================================ */
.store-listing-item .latest-coupon .coupon-title,
.store-listing-item .latest-coupon .coupon-title a,
.store-listing-item .coupon-title,
.store-listing-item .coupon-title a,
.coupon-listing-item .coupon-title,
.coupon-listing-item .coupon-title a {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    max-width: 100% !important;
    width: 100% !important;
    display: block !important;
    word-wrap: break-word !important;
    overflow-wrap: anywhere !important;
    line-height: 1.35 !important;
    height: auto !important;
    max-height: none !important;
    -webkit-line-clamp: unset !important;
}

/* Mobile: keep full title readable */
@media screen and (max-width: 767px) {
    .store-listing-item .latest-coupon .coupon-title,
    .store-listing-item .latest-coupon .coupon-title a,
    .store-listing-item .coupon-title a {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: unset !important;
        font-size: 16px !important;
        line-height: 1.4 !important;
    }
}

/* ============================================
   10. Headings, widgets, stats, extra terms
   ============================================ */

/* Heading 4 (h4) – more space between lines */
h4,
.h4,
.entry-content h4,
.post-entry h4,
.store-extra-info h4,
.des-overflow h4,
.header_des h4,
.content-box h4,
.site-main h4 {
    line-height: 1.7 !important;
}

/* Related coupons widget (single coupon sidebar) */
.widget-related-coupons .related-coupons-block {
    margin-bottom: 18px;
}

.widget-related-coupons .related-coupons-title {
    margin: 0 0 12px 0 !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
}

.widget-related-coupons .related-coupons-list {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.widget-related-coupons .related-coupon-item {
    margin: 0 0 8px 0 !important;
    padding: 0 !important;
}

.widget-related-coupons .related-coupon-link {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    padding: 10px 12px !important;
    background: #fefbf7 !important;
    border: 1px solid #f0e6d8 !important;
    border-radius: 10px !important;
    text-decoration: none !important;
    color: #222 !important;
    transition: background 0.2s ease !important;
}

.widget-related-coupons .related-coupon-link:hover {
    background: #fff6ea !important;
    color: #111 !important;
}

.widget-related-coupons .related-coupon-name {
    font-size: 13.5px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
}

.widget-related-coupons .related-coupon-code,
.widget-related-coupons .related-coupon-badge {
    font-size: 12px !important;
    color: #2185d0 !important;
    font-weight: 600 !important;
}

.widget-related-coupons .related-coupon-badge {
    color: #21ba45 !important;
}

/* Related coupons – empty state message */
.widget-related-coupons .related-coupons-empty {
    padding: 14px 16px !important;
    background: #f8f9fa !important;
    border: 1px dashed #d0d5dd !important;
    border-radius: 10px !important;
    text-align: center !important;
}

.widget-related-coupons .related-coupons-empty p {
    margin: 0 !important;
    font-size: 13.5px !important;
    color: #666 !important;
    line-height: 1.5 !important;
}

/* Related coupons TOP block — mobile/tablet only (<900px), compact */
.related-coupons-top {
    display: none !important; /* hidden on desktop */
}

@media screen and (max-width: 900px) {
    .related-coupons-top {
        display: block !important;
        margin: 8px auto 6px auto !important;
        padding: 0 8px !important;
    }

    .related-coupons-top .related-coupons-block {
        margin-bottom: 6px !important;
    }

    .related-coupons-top .related-coupons-title {
        font-size: 13px !important;
        margin: 0 0 4px 0 !important;
        line-height: 1.3 !important;
        font-weight: 700 !important;
    }

    .related-coupons-top .related-coupons-list {
        display: flex !important;
        flex-direction: column !important;
        gap: 4px !important;
        list-style: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .related-coupons-top .related-coupon-item {
        margin: 0 !important;
        padding: 0 !important;
    }

    /* One compact line per coupon */
    .related-coupons-top .related-coupon-link {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 8px !important;
        padding: 6px 10px !important;
        border-radius: 8px !important;
        min-height: 0 !important;
        line-height: 1.3 !important;
    }

    .related-coupons-top .related-coupon-name {
        font-size: 12px !important;
        font-weight: 600 !important;
        line-height: 1.3 !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }

    .related-coupons-top .related-coupon-code,
    .related-coupons-top .related-coupon-badge {
        font-size: 11px !important;
        flex-shrink: 0 !important;
        white-space: nowrap !important;
    }

    .related-coupons-top .related-coupons-empty {
        padding: 8px 10px !important;
        border-radius: 8px !important;
    }

    .related-coupons-top .related-coupons-empty p {
        font-size: 12px !important;
        margin: 0 !important;
    }
}

/* Detailed offer_available stats */
.offer_available.offer_available_detailed {
    padding-bottom: 18px !important;
}

.offer_available .offer-stats {
    list-style: none !important;
    margin: 12px 0 0 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

.offer_available .offer-stat {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 8px 10px !important;
    background: rgba(255, 255, 255, 0.55) !important;
    border-radius: 8px !important;
    line-height: 1.3 !important;
}

.offer_available .offer-stat-num {
    font-size: 16px !important;
    font-weight: 800 !important;
    color: #161b1e !important;
    min-width: 28px !important;
    text-align: center !important;
}

.offer_available .offer-stat-label {
    font-size: 12.5px !important;
    font-weight: 600 !important;
    color: #4e595f !important;
    flex: 1 1 auto !important;
    text-align: right !important;
}

.offer_available .offer-stat-sale .offer-stat-num { color: #21ba45 !important; }
.offer_available .offer-stat-exclusive .offer-stat-num { color: #a5673f !important; }
.offer_available .offer-stat-shipping .offer-stat-num { color: #2185d0 !important; }

.offer_available .offer-stat-code .offer-stat-num { color: #2185d0 !important; }

/* Extra coupon terms under .coupon-type-text */
.coupon-extra-terms {
    list-style: none !important;
    margin: 8px 0 0 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}
.coupon-extra-term {
    margin: 0 !important;
    padding: 8px 12px !important;
    background: #f8f9fa !important;
    border: 1px solid #eee !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    align-items: baseline !important;
}
.coupon-extra-label {
    font-weight: 700 !important;
    color: #333 !important;
}
.coupon-extra-value {
    color: #555 !important;
}

/* Compact extra terms on store / category listing cards */
.store-listing-item .listing-extra-terms {
    margin: 6px 0 8px 0 !important;
    gap: 4px !important;
}
.store-listing-item .listing-extra-terms .coupon-extra-term {
    padding: 5px 8px !important;
    font-size: 12px !important;
}

/* Similar coupons note above footer on single coupon */
.coupon-similar-note {
    margin: 8px 20px 16px !important;
    padding: 12px 14px !important;
    background: #ffc0c0  !important;
    border: 1px solid #d0d5dd !important;
    border-radius: 8px !important;
    font-size: 13.5px !important;
    line-height: 1.7 !important;
    color: #1a1a1a !important;
}
.coupon-similar-note p {
    margin: 0 0 8px 0 !important;
    color: #1a1a1a !important;
}
.coupon-similar-note p:last-child {
    margin-bottom: 0 !important;
}
.coupon-similar-note a,
.coupon-similar-link {
    color: #084c8d !important;
    font-weight: 700 !important;
    text-decoration: underline !important;
    text-underline-offset: 2px !important;
}
.coupon-similar-note a:hover,
.coupon-similar-link:hover {
    color: #063665 !important;
    text-decoration: underline !important;
}

/* Comments: login required link contrast + not color-only */
.must-log-in,
p.must-log-in {
    color: #1a1a1a !important;
}
.must-log-in a,
p.must-log-in a {
    color: #084c8d !important;
    font-weight: 700 !important;
    text-decoration: underline !important;
    text-underline-offset: 2px !important;
}
.must-log-in a:hover,
p.must-log-in a:hover {
    color: #063665 !important;
}

/* Extra field values inside the same .offer row */
.store-listing-item .latest-coupon .offer {
    white-space: normal !important;
}
.store-listing-item .latest-coupon .offer br,
.store-listing-item .latest-coupon .offer p {
    display: none !important;
}
.store-listing-item .coupon-extra-item {
    display: inline !important;
    font-weight: inherit !important;
    font-size: inherit !important;
}

/* Under 1250px: move محدودیت استفاده (3rd extra field) to next row */
@media screen and (max-width: 1250px) {
    .store-listing-item .coupon-extra-item.extra-usage {
        display: block !important;
        width: 100% !important;
        margin-top: 4px !important;
    }
    .store-listing-item .coupon-extra-item.extra-usage .coupon-extra-sep {
        display: none !important;
    }
}

/* ============================================
   11. Coupon modal footer + myButton
   ============================================ */
.coupon-modal .coupon-footer {
  background: #cae795;
}
/* Single coupon: "به دردم خورد" Google source button */
/* ==========================================================
   Base Button Style (Desktop & Shared Styles)
   ========================================================== */
.coupon-footer .myButton,
a.myButton {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    /* Colors & Gradient */
    background: linear-gradient(135deg, #0d9488 0%, #0f766e 100%);
    color: #ffffff !important;

    /* Typography */
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none !important;
    white-space: nowrap; /* Prevents awkward line breaks */

    /* Sizing & Touch Target */
    min-height: 44px; /* Standard accessible mobile touch target */
    padding: 10px 24px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.15);

    /* Elevation & Performance */
    box-shadow: 0 4px 6px -1px rgba(13, 148, 136, 0.2),
                0 2px 4px -2px rgba(13, 148, 136, 0.1);
    cursor: pointer;
    user-select: none;
    -webkit-tap-highlight-color: transparent; /* Removes blue tap box on mobile */
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

/* Hover effect only for devices with a real mouse cursor (Fixes sticky hover on phones) */
@media (hover: hover) {
    .coupon-footer .myButton:hover,
    a.myButton:hover {
        background: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%);
        box-shadow: 0 6px 12px -2px rgba(13, 148, 136, 0.35);
        transform: translateY(-1px);
        color: #ffffff !important;
    }
}

/* Mobile & Touch Click Feedback */
.coupon-footer .myButton:active,
a.myButton:active {
    transform: scale(0.97);
    box-shadow: 0 2px 4px -1px rgba(13, 148, 136, 0.2);
}

/* Accessibility Focus */
.coupon-footer .myButton:focus-visible,
a.myButton:focus-visible {
    outline: 2px solid #0d9488;
    outline-offset: 2px;
}

/* ==========================================================
   Mobile Responsive Adjustments (Screens below 640px)
   ========================================================== */
@media (max-width: 640px) {
    .coupon-footer .myButton,
    a.myButton {
        display: flex;       /* Expands inside mobile container */
        width: 100%;         /* Full-width button on mobile screens */
        max-width: 100%;
        padding: 12px 16px;  /* Comfortable tap padding */
        font-size: 14px;     /* Slightly better proportion on smaller screens */
        text-align: center;
    }
}

/* ============================================
   12. Show more / Show less — store & coupon-category
   header description (JS in custom.js)
   ============================================ */
.cm-desc-collapse.is-collapsed {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 3 !important;
    overflow: hidden !important;
    max-height: none !important;
    height: auto !important;
}
.cm-desc-collapse.is-expanded {
    display: block !important;
    -webkit-line-clamp: unset !important;
    overflow: visible !important;
    max-height: none !important;
    height: auto !important;
}
.cm-desc-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 10px;
    min-height: 40px;
    padding: 8px 14px;
    border: 1px solid #d0d5dd;
    border-radius: 8px;
    background: #fff;
    color: #2185d0;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    font-family: Vazirmatn, 'Vazirmatn Fallback', Tahoma, sans-serif;
    line-height: 1.3;
    -webkit-tap-highlight-color: transparent;
}
.cm-desc-toggle:hover,
.cm-desc-toggle:focus {
    background: #f5f9fc;
    border-color: #2185d0;
    outline: none;
}
.cm-desc-wrap { position: relative; }
.cm-desc-wrap .cm-desc-collapse { position: relative; }
.cm-desc-wrap.has-fade .cm-desc-collapse.is-collapsed::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 2.2em;
    background: linear-gradient(to bottom, rgba(254,251,247,0), #fefbf7 90%);
    pointer-events: none;
}

/* ============================================
   13. Jump-to-coupons button (mobile/tablet ≤900px)
   ============================================ */
html {
    scroll-behavior: smooth;
}

/* Offset so target isn't hidden under sticky header */
#cat-coupon-lists,
#coupon-listings-store {
    scroll-margin-top: 80px;
}

/* Hidden on desktop */
.jump-to-coupons-btn {
    display: none !important;
}

/* Mobile + tablet only */
@media screen and (max-width: 900px) {
    .jump-to-coupons-btn {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        gap: 8px;
        position: fixed;
        left: 50%;
        bottom: 20px;
        transform: translateX(-50%);
        z-index: 9990;
        min-height: 48px;
        min-width: 48px;
        padding: 12px 20px;
        border-radius: 999px;
        background: #1e79c4;
        color: #fff !important;
        font-size: 14px;
        font-weight: 700;
        text-decoration: none !important;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
        line-height: 1.2;
        border: none;
        -webkit-tap-highlight-color: transparent;
        font-family: Vazirmatn, 'Vazirmatn Fallback', Tahoma, sans-serif;
    }

    .jump-to-coupons-btn:hover,
    .jump-to-coupons-btn:focus {
        background: #1a6fb8;
        color: #fff !important;
    }

    .jump-to-coupons-btn .jump-to-coupons-label {
        white-space: nowrap;
    }

    .jump-to-coupons-btn i.icon {
        font-family: Icons !important;
        margin: 0 !important;
        font-size: 14px !important;
    }

    /* Optional: hide button after user scrolled near coupons */
    .jump-to-coupons-btn.is-hidden {
        opacity: 0;
        pointer-events: none;
        transform: translateX(-50%) translateY(12px);
        transition: opacity 0.2s ease, transform 0.2s ease;
    }
}

/* ============================================
   Mobile header: logo keeps its option width, centered.
   - The logo column must NEVER grow (flex 0 1 auto) so it cannot
     push the search/menu buttons off-screen.
   - RTL scrollbar (~15px on the left) shifts the header left; the
     primary-header padding compensates so nothing is clipped.
   (option: Theme Options → General → Mobile Logo Width)
   ============================================ */
@media screen and (max-width: 1110px) {
    .sm-header .primary-header {
        padding-left: 15px;
        padding-right: 0;
    }
    .sm-header .primary-header .head-item {
        width: auto;
        flex: 0 1 auto;
        float: none;
        min-width: 0;
    }
    .sm-header .primary-header .head-item .logo_area {
        width: auto;
        flex: 1 1 0%;
        min-width: 0;
        padding: 0 6px;
        box-sizing: border-box;
        display: flex;
        justify-content: center;
    }
    .sm-header .primary-header .head-item .logo_area img {
        width: auto;
        max-width: 100%;
        height: auto;
        margin: 0 auto;
    }
}

/* ============================================
   FIX: Category/store header on mobile (≤990px)
   - Hide the DESKTOP thumb (cat_lg_thumb / single-store .header-thumb).
   - Show only the small sm_header_thumb once, centered, compact.
   - Gap from box top to image = 10px (verified).
   ============================================ */
@media screen and (max-width: 990px) {
    .single-cat .cat_lg_thumb,
    .single-store-header .header-thumb,
    .custom-page-header .header-thumb:not(.sm_header_thumb),
    .single-cat .header-thumb:not(.sm_header_thumb) {
        display: none !important;
    }

    /* The clearfix ::before adds phantom vertical space inside the flex box */
    .single-cat .inner-content::before,
    .single-store-header .inner-content::before,
    .custom-page-header .inner-content::before {
        content: none !important;
        display: none !important;
    }

    .custom-page-header .header-content .sm_header_thumb,
    .single-store-header .header-content .sm_header_thumb {
        display: block !important;
        visibility: visible !important;
        height: auto !important;
        width: auto !important;
        overflow: visible !important;
        min-width: 0 !important;
        min-height: 0 !important;
        margin: 0 auto 8px auto !important;
        padding: 0 !important;
        line-height: 0 !important;
    }

    .custom-page-header .header-content .sm_header_thumb img,
    .single-store-header .header-content .sm_header_thumb img {
        width: 90px !important;
        max-width: 90px !important;
        height: auto !important;
        margin: 0 auto !important;
        display: block !important;
    }

    .custom-page-header .inner-content,
    .single-store-header .inner-content,
    .single-cat .inner-content {
        padding: 8px 14px 12px !important;
        gap: 0 !important;
    }

    .custom-page-header .header-content .sm_header_thumb .ui.icon,
    .single-store-header .header-content .sm_header_thumb .ui.icon {
        margin: 0 !important;
        padding: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        line-height: 0 !important;
    }
}

/* ============================================
   Blog section (front_blog) — better looking cards
   - Post cards: white box, border, shadow, rounded, hover lift
   - Intro box (post_sec): matched box style
   - Meta: date + category chips; title hover; excerpt clamp
   ============================================ */
.front_blog .post_item {
    background: #fff !important;
    border: 1px solid #e6ecf2 !important;
    border-radius: 14px !important;
    box-shadow: 0 2px 10px rgba(22, 27, 30, 0.06) !important;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease !important;
}
.front_blog .post_item:hover {
    transform: translateY(-4px);
    border-color: #d5e0ea !important;
    box-shadow: 0 10px 24px rgba(22, 27, 30, 0.12) !important;
    background: #fff !important;
}
.front_blog .post_item .b_post {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.front_blog .post_item .f_b_post_img {
    height: 200px;
    overflow: hidden;
}
.front_blog .post_item .f_b_post_img .ft_image {
    transition: transform .4s ease;
}
.front_blog .post_item:hover .f_b_post_img .ft_image {
    transform: scale(1.05);
}
.front_blog .post_item .f_b_post_content {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 18px 16px 20px;
}
.front_blog .post_item .f_b_post_content .fb_post_meta {
    float: none;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 10px;
    margin-bottom: 8px;
    text-transform: none;
}
.front_blog .post_item .f_b_post_content .fb_post_meta .fb_post_date,
.front_blog .post_item .f_b_post_content .fb_post_meta .published-date {
    float: none;
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    color: #8a939b;
    background: #f2f5f8;
    padding: 4px 10px;
    border-radius: 999px;
    text-transform: none;
}
.front_blog .post_item .f_b_post_content .fb_post_meta .fb_post_cat {
    float: none;
}
.front_blog .post_item .f_b_post_content .fb_post_meta .fb_post_cat a {
    float: none;
    font-size: 12px;
    font-weight: 600;
    color: #2185d0;
    background: #e8f3fc;
    padding: 4px 10px;
    border-radius: 999px;
    text-transform: none;
    display: inline-block;
    text-decoration: none;
}
.front_blog .post_item .f_b_post_content .fb_post_title {
    float: none;
    margin: 0 0 10px;
    font-size: 17px;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.front_blog .post_item .f_b_post_content .fb_post_title a {
    color: #161b1e;
    transition: color .2s ease;
    text-decoration: none;
}
.front_blog .post_item .f_b_post_content .fb_post_title a:hover {
    color: #2185d0;
}
.front_blog .post_item .f_b_post_content .fb_post_content {
    float: none;
    margin-top: auto;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.front_blog .post_item .f_b_post_content .fb_post_content p {
    font-size: 13.5px;
    line-height: 1.7;
    color: #5c666e;
    margin: 0;
}
/* Intro box — match the card style */
.front_blog .post_sec {
    background: #fff !important;
    border: 1px solid #e6ecf2 !important;
    border-radius: 14px !important;
    box-shadow: 0 2px 10px rgba(22, 27, 30, 0.06) !important;
    padding: 34px 30px 30px;
}
.front_blog .post_sec .blog_intro_title {
    float: none;
    width: auto;
}
.front_blog .post_sec .blog_intro_des {
    float: none;
    width: auto;
}
.front_blog .post_sec .blog_link {
    float: none;
    width: auto;
}
.front_blog .post_sec .blog_link a {
    float: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ============================================
   Blog intro box (post_sec) — full-width horizontal
   bar at the TOP of the blog list on ALL screens.
   - Always first (order -1), never beside the cards.
   - Contents arranged horizontally (icon | title | desc | link).
   ============================================ */
.front_blog .post_sec {
    float: none !important;
    width: 100% !important;
    order: -1 !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: wrap;
    gap: 16px 20px !important;
    padding: 22px 26px !important;
    margin: 0 0 6px 0 !important;
}
.front_blog .post_sec .blog_icon {
    float: none !important;
    margin: 0 !important;
    flex-shrink: 0;
}
.front_blog .post_sec .blog_intro_title {
    float: none !important;
    width: auto !important;
    margin: 0 !important;
    white-space: nowrap;
    flex-shrink: 0;
}
.front_blog .post_sec .blog_intro_des {
    float: none !important;
    width: auto !important;
    margin: 0 !important;
    flex: 1 1 180px;
}
.front_blog .post_sec .blog_link {
    float: none !important;
    width: auto !important;
    margin: 0 !important;
    margin-inline-start: auto;
    flex-shrink: 0;
}
.front_blog .post_sec .blog_link a {
    float: none !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}
/* Small screens: keep horizontal, let it wrap gracefully */
@media screen and (max-width: 640px) {
    .front_blog .post_sec {
        gap: 10px 14px !important;
        padding: 18px 16px !important;
        justify-content: center;
        text-align: center;
    }
    .front_blog .post_sec .blog_intro_des {
        flex: 1 1 100%;
        text-align: center;
    }
    .front_blog .post_sec .blog_link {
        margin-inline-start: 0;
    }
}

/* ============================================
   CLS fixes (PageSpeed: layout shifts)
   - Brand logos: fixed-size box so images loading
     can't push content around.
   - Header logos: min-height reserve (in case the
     uploaded logo SVG has no intrinsic size).
   ============================================ */
.popular-brand-item .brand-item {
    min-height: 80px;
}
.popular-brand-item .brand-item .image {
    width: 100%;
    height: 80px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.popular-brand-item .brand-item .image img {
    max-width: 100%;
    max-height: 80px;
    width: auto;
    height: auto;
    object-fit: contain;
}
/* Header logo reserve (prevents shift when an SVG logo loads without size) */
.site-header .logo_area {
    min-height: 44px;
}
.site-header .logo_area img {
    max-width: 100%;
    height: auto;
}

/* ============================================
   Desktop header: align all items on one line
   (logo, nav icons, search, login buttons were
   at different heights — items now share the
   same vertical center; logo top margin removed)
   ============================================ */
.lg-header .header-flex,
.sm-header .header-flex {
    align-items: center !important;
}
.lg-header .header-flex .logo_area {
    margin-top: 0 !important;
}

/* ============================================
   Mobile header: eye-catching search button
   Filled brand-blue circle, white icon + soft
   glow so visitors notice the search affordance.
   ============================================ */
.sm-header .right-icon .search_icon {
    background: #1e79c4 !important;
    color: #ffffff !important;
    border-radius: 50% !important;
    box-shadow: 0 3px 10px rgba(30, 121, 196, 0.45) !important;
}
.sm-header .right-icon .search_icon:hover {
    background: #1a6fb8 !important;
}
.sm-header .right-icon .search_icon i.icon {
    color: #ffffff !important;
    margin-left: 0 !important;
}

/* ---------------------------------------------------------------
   Mobile category strip (under .sm-header): rtl.css centers
   .coupon-menu-details .menu-panel .link-wrap, which is fine when
   all items fit (desktop) — but on mobile the strip overflows and
   a centered RTL flex line sends overflow to BOTH sides. The
   start-side (right) overflow is unreachable by RTL scrolling, so
   the first categories could never be seen on screens < ~990px.
   Start-aligning the mobile strip keeps the whole row reachable:
   it begins at the first category and overflows only leftward.
---------------------------------------------------------------- */
.sm-header .coupon-menu-details .menu-panel .sm-link-wrap {
    justify-content: flex-start;
}

/* ---------------------------------------------------------------
   Multi-store coupon cards: when a coupon is linked to 2+ stores,
   show every store logo side by side in equal boxes. The card CSS
   forces .store-thumb widths (80/75/150px per breakpoint) and the
   row uses space-between, so this container gets an explicit
   auto width, no shrinking, and equal shrinkable logo boxes:
   equal size on every screen, no overlap, nothing clipped.
---------------------------------------------------------------- */
.store-thumb.multi-store-thumbs {
    display: flex;
    align-items: stretch;
    gap: 6px;
    width: auto;
    max-width: 100%;
}
.store-listing-item .store-thumb-link .store-thumb.multi-store-thumbs {
    width: auto !important;
    max-width: 100% !important;
    flex-shrink: 0;
    min-width: 0;
}
.store-thumb.multi-store-thumbs .thumb-padding {
    flex: 1 1 80px;
    width: auto;
    min-width: 0;
    max-width: 80px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    overflow: hidden;
}
.store-thumb.multi-store-thumbs .thumb-padding picture {
    display: block;
    height: 40px;
    line-height: 0;
}
.store-thumb.multi-store-thumbs .thumb-padding img {
    float: none;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 40px;
}
.store-thumb.multi-store-thumbs .thumb-padding:after {
    display: none;
}

/* ---------------------------------------------------------------
   Single coupon page header: multi-store logos (same feature as the
   listing cards) — both store logos side by side in EQUAL-HEIGHT
   boxes (58px), vertically centered, no matter the logo aspect ratio
   (wide vs square). The card rule above forces <picture> to a fixed
   40px height, which squashed square logos to a different level —
   overridden here so every logo sits at the same level.
---------------------------------------------------------------- */
.coupon-modal .coupon-header .coupon-store-thumb .multi-store-thumbs {
    display: inline-flex;
    gap: 10px;
    justify-content: center;
    align-items: center;
    background: none;
    overflow: visible;
    vertical-align: middle;
}
.coupon-modal .coupon-header .coupon-store-thumb .multi-store-thumbs .thumb-padding {
    flex: 0 0 auto;
    width: auto;
    height: 58px; /* equal fixed height for every logo box */
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    padding: 4px;
}
.coupon-modal .coupon-header .coupon-store-thumb .multi-store-thumbs .thumb-padding picture {
    display: block;
    height: auto; /* card rule forces 40px — would squash square logos */
    line-height: 0;
}
.coupon-modal .coupon-header .coupon-store-thumb .multi-store-thumbs .thumb-padding img {
    max-height: 50px;
    max-width: 110px;
    width: auto;
    height: auto;
}
.coupon-modal .coupon-header .coupon-store-thumb .multi-store-thumbs .thumb-padding:after {
    display: none;
}

/* ---------------------------------------------------------------
   Menu store boxes (desktop strip + mobile strip): store names were
   20px with a fixed 60px height + negative margin, so long Persian
   names overflowed onto the offer line and overlapped content on
   mobile. Now compact: 14px names (auto height, max 2-3 lines) and
   13px offer text — everything stays inside the 166px strip.
---------------------------------------------------------------- */
.coupon-menu-details .store-item-link .item-title {
    font-size: 14px;
    line-height: 18px;
    height: auto;
    min-height: 36px;
    margin-top: 0;
    overflow: hidden;
}
.coupon-menu-details .store-item-link a .logo-offer .top-offer {
    font-size: 13px;
    line-height: 16px;
    padding: 6px 17px;
}

/* ---------------------------------------------------------------
   Desktop category strip (.lg-header): rtl.css centers
   .coupon-menu-details .menu-panel .link-wrap (justify-content:
   center) and style.css gives it overflow: hidden. A centered RTL
   flex row that overflows clips content on BOTH sides and the
   start-side (right) overflow is unreachable by RTL scrolling —
   so the first categories could never be scrolled to and the
   prev/next buttons looked dead. Start-align + real scrolling
   fixes it (same pattern as the mobile sm-link-wrap fix above).
---------------------------------------------------------------- */
.lg-header .coupon-menu-details .menu-panel .lg-link-wrap {
    justify-content: flex-start;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.lg-header .coupon-menu-details .menu-panel .lg-link-wrap::-webkit-scrollbar {
    display: none;
}

/* ---------------------------------------------------------------
   14. Deal button on single coupon pages (coupon type = sale)
   Markup: <a class="ui button btn btn_secondary deal-actived">
   (single-coupon.php + coupon-modal.php — "رفتن به صفحه کمپین").
   Problem: the Redux dynamic CSS paints .ui.btn.btn_secondary a
   pale green (#ecffdc) that almost disappears against the #f6fdff
   page background, and hover swaps to pale cream (#fffbda).
   Fix: reuse the site's teal CTA style (same as myButton, section
   11) so the primary action gets white text on a solid teal
   gradient. 4 class selectors beat the 3-class dynamic rule.
---------------------------------------------------------------- */
.ui.btn.btn_secondary.deal-actived {
    background: linear-gradient(135deg, #0d9488 0%, #0f766e 100%);
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 4px 6px -1px rgba(13, 148, 136, 0.2),
                0 2px 4px -2px rgba(13, 148, 136, 0.1);
    font-weight: 600;
    font-size: 16px !important;
    padding: 10px 24px !important;
    min-height: 44px;
    text-decoration: none !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}
/* grow with the text — never wrap to 2 lines on DESKTOP only
   (overrides the fixed width:200px in style.css .ui.btn.btn_secondary;
   mobile ≤640px keeps its original style, see the media query below) */
@media (min-width: 641px) {
    .ui.btn.btn_secondary.deal-actived {
        width: auto !important;
        max-width: 100%;
        white-space: nowrap;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}
/* hover only for devices with a real mouse cursor */
@media (hover: hover) {
    .ui.btn.btn_secondary.deal-actived:hover {
        background: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%);
        color: #ffffff !important;
        opacity: 1;
        box-shadow: 0 6px 12px -2px rgba(13, 148, 136, 0.35);
        transform: translateY(-1px);
    }
}
/* touch click feedback */
.ui.btn.btn_secondary.deal-actived:active {
    transform: scale(0.97);
    box-shadow: 0 2px 4px -1px rgba(13, 148, 136, 0.2);
}
/* keyboard focus */
.ui.btn.btn_secondary.deal-actived:focus-visible {
    outline: 2px solid #0d9488;
    outline-offset: 2px;
}
/* arrow icon inside the button keeps white */
.ui.btn.btn_secondary.deal-actived i.icon {
    color: #ffffff;
    opacity: 0.9;
}
/* mobile (≤640px): UNCHANGED from the original mobile style —
   desktop-only fix above must not alter small screens */
@media (max-width: 640px) {
    .ui.btn.btn_secondary.deal-actived {
        display: flex;
        width: 100%;
        max-width: 100%;
        padding: 12px 16px;
        font-size: 14px;
        text-align: center;
    }
}

/* ---------------------------------------------------------------
   15. Footer nav (menu-bala) — fast, light & beautiful
   Pure CSS pills: no images, no JS, no extra requests, no layout
   shift (CLS-safe). Old float layout in style.css (line ~3990)
   floats every li and stacks them 1-per-line under 500px —
   replaced with a clean centered flex row of soft pills.
---------------------------------------------------------------- */
.footer-nav-wrap {
    float: none;
    width: 100%;
    padding: 14px 0 6px;
    margin-top: 18px;
    border-top: 1px dashed #e3edf0;           /* light separator */
}
.site-footer .container.footer-container {
    max-width: 1170px;
}
.site-footer-nav {
    float: none;
    width: 100%;
    padding: 0 12px !important;
}
.site-footer-nav ul.menu {
    float: none;
    width: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px 10px;
    margin: 0 !important;
    padding: 0;
    list-style: none;
    text-align: center;
}
.site-footer-nav ul.menu > li {
    float: none;
    display: block;
    width: auto;
    margin: 0 !important;
}
.site-footer-nav ul.menu > li > a {
    display: inline-flex;
    align-items: center;
    padding: 7px 14px;
    border-radius: 999px;
    background: #f2f8fa;
    color: #4a5568;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.4;
    text-decoration: none !important;
    border: 1px solid transparent;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}
/* hover only for real cursors */
@media (hover: hover) {
    .site-footer-nav ul.menu > li > a:hover {
        background: #0d9488;
        color: #ffffff;
        border-color: #0d9488;
    }
}
/* keyboard focus */
.site-footer-nav ul.menu > li > a:focus-visible {
    outline: 2px solid #0d9488;
    outline-offset: 2px;
    border-radius: 999px;
}
/* touch feedback */
.site-footer-nav ul.menu > li > a:active {
    background: #0d9488;
    color: #ffffff;
}
/* submenu (dropdown children) — pure-CSS hover/focus dropdown
   that matches the pill design. Also fully keyboard-accessible:
   the li gets :focus-within when any child link is tabbed to. */
.site-footer-nav ul.menu > li {
    position: relative;
}
.site-footer-nav ul.menu .sub-menu {
    display: block;
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 999;
    min-width: 180px;
    margin: 6px 0 0 !important;
    padding: 6px !important;
    background: #ffffff;
    border: 1px solid #e2ecf0;
    border-radius: 10px;
    box-shadow: 0 10px 25px rgba(45, 62, 80, 0.13);
    list-style: none;
    text-align: right;
    direction: rtl;
    /* hidden until hover/focus — no display:none, keeps links tabbable */
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}
/* RTL edge alignment: keep the panel inside the viewport so the
   last pills (leftmost in RTL) never overflow off-screen */
.site-footer-nav ul.menu > li:first-child .sub-menu {
    right: auto;
    left: 0;
}
.site-footer-nav ul.menu .sub-menu li {
    display: block;
    width: 100%;
    margin: 0 !important;
}
.site-footer-nav ul.menu .sub-menu li a {
    display: block;
    width: 100%;
    padding: 7px 12px;
    border-radius: 6px;
    background: transparent;
    color: #4a5568;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.6;
    text-decoration: none !important;
    white-space: nowrap;
}
.site-footer-nav ul.menu .sub-menu li a:hover,
.site-footer-nav ul.menu .sub-menu li a:active {
    background: #0d9488;
    color: #ffffff;
}
.site-footer-nav ul.menu .sub-menu li a:focus-visible {
    outline: 2px solid #0d9488;
    outline-offset: -2px;
}
/* caret hint on parents that have children */
.site-footer-nav ul.menu > li.menu-item-has-children > a::after {
    content: "▾";
    font-size: 10px;
    margin-right: 5px;
    margin-left: -3px;
    opacity: 0.6;
}
/* open on hover (real cursors) and on keyboard/touch focus */
@media (hover: hover) {
    .site-footer-nav ul.menu > li:hover > .sub-menu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
}
.site-footer-nav ul.menu > li:focus-within > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
/* mobile: sub-items collapse into the pill flow as small pills,
   no absolute overlay (avoids clipping inside the footer) */
@media screen and (max-width: 600px) {
    .site-footer-nav ul.menu .sub-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 6px 8px;
        min-width: 0;
        margin: 4px 0 0 !important;
        padding: 0 !important;
        background: transparent;
        border: 0;
        box-shadow: none;
    }
    .site-footer-nav ul.menu .sub-menu li {
        width: auto;
    }
    .site-footer-nav ul.menu .sub-menu li a {
        display: inline-block;
        width: auto;
        padding: 4px 10px;
        border-radius: 999px;
        background: #f2f8fa;
        font-size: 12px;
    }
    .site-footer-nav ul.menu > li.menu-item-has-children > a::after {
        content: none;
    }
}

/* ---------------------------------------------------------------
   16. Coupon By Category widget — store logo boxes
   The 4 demo styles force .coupon_store_img to 75x43 with
   background-size:cover, which CROPS large logos (sides get cut).
   contain keeps the whole logo visible inside the box, padded
   with white so wide/tall logos always fit — no cropping.
---------------------------------------------------------------- */
.demo_1 .section_content .cu_img .coupon_store_img,
.demo_2 .section_content .cu_img .coupon_store_img,
.demo_3 .section_content .cu_img .coupon_store_img,
.demo_4 .section_content .cu_img .coupon_store_img {
    width: 75px;
    height: 43px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    background-color: #ffffff;
}
/* hover shrink effect removed from theme (demo_1) — keep the box
   stable; the logo is no longer a link so no pointer needed */

/* ---------------------------------------------------------------
   17. Coupon By Category widget — equal-height cards (desktop)
   Grid rows (demo_2/3/4) stretch by default but the cards inside
   .sec_coupon_item_wrap did not fill the wrapper, so a long
   description made one card taller than its neighbors. Fix: make
   the wrapper a flex column and let the card grow to 100% height;
   the button row (cu_btn) is pinned to the card bottom with
   margin-top:auto so short cards look identical to tall ones.
   Desktop (≥992px) only — mobile keeps its natural stacked look.
---------------------------------------------------------------- */
@media (min-width: 992px) {
    /* demo_2 / demo_3 / demo_4: wrapper stretches, card fills it */
    .demo_2 .sec_coupon_item_wrap,
    .demo_3 .sec_coupon_item_wrap,
    .demo_4 .sec_coupon_item_wrap {
        display: flex;
    }
    .demo_2 .sec_coupon_item,
    .demo_3 .sec_coupon_item,
    .demo_4 .sec_coupon_item {
        height: 100%;
        display: flex;
        flex-direction: column;
    }
    /* pin the action button row to the bottom of every card */
    .demo_2 .section_content .cu_btn,
    .demo_3 .section_content .cu_btn,
    .demo_4 .section_content .cu_btn {
        margin-top: auto;
    }
    /* demo_1: horizontal row — give all cards one fixed height and
       center their content so none looks taller */
    .demo_1 .sec_coupon_item {
        height: 190px;
        align-items: center;
    }
}

/* ---------------------------------------------------------------
   18. Coupon By Category widget — content thumbnail (1.4.68)
   .cu_content may start with a small left-floated thumbnail kept
   from the coupon post content by wpcoupon_cat_card_excerpt().
   Fixed 64px box, cover-crop, rounded — the grid stays uniform
   whether a card has an image or not. Text flows around it.
---------------------------------------------------------------- */
.section_content .cu_content .cu-content-thumb {
    float: left;
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 6px;
    margin: 2px 10px 6px 0;
    background: #f2f8fa;
}
.section_content .cu_content .cu-content-thumb:dir(rtl) {
    float: right;
    margin: 2px 0 6px 10px;
}

/* ============================================================
   Mobile Sticky Ribbon (Redux section "Mobile Sticky Ribbon")
   Markup printed by wpcoupon_mobile_sticky_ribbon() (header.php).
   It renders as a direct child of #page (above or below the
   header) so position:sticky can pin it for the whole page.
   Hidden on desktop by the inline <style> the function prints
   (breakpoint is an option: 575 / 767 / 1110).
   ============================================================ */
#cm-ribbon {
    position: relative;
    /* below the sticky mobile header (z-index 100), above content */
    z-index: 99;
    line-height: 1.5;
    -webkit-tap-highlight-color: transparent;
}
#cm-ribbon.cm-ribbon--sticky {
    position: -webkit-sticky; /* older iOS Safari */
    position: sticky;
    top: 0;
}
/* "Above header" is the highest element of the page: outrank the sticky
   mobile header (z-index 100) so the header slides under the ribbon,
   never over it. Modals/overlays sit far higher and are unaffected. */
#cm-ribbon.cm-ribbon--above.cm-ribbon--sticky {
    z-index: 101;
}
#cm-ribbon .cm-ribbon__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 9px 44px;
}
#cm-ribbon.cm-ribbon--align-start .cm-ribbon__inner {
    justify-content: flex-start;
}
#cm-ribbon.cm-ribbon--align-end .cm-ribbon__inner {
    justify-content: flex-end;
}
#cm-ribbon .cm-ribbon__track {
    flex: 1 1 auto;
    min-width: 0;
}
#cm-ribbon .cm-ribbon__text {
    overflow-wrap: break-word;
}
#cm-ribbon .cm-ribbon__text-link {
    color: inherit;
    text-decoration: none;
    display: inline-block;
    max-width: 100%;
}
#cm-ribbon .cm-ribbon__text-link:hover .cm-ribbon__text {
    text-decoration: underline;
}
#cm-ribbon a.cm-ribbon__cta {
    flex-shrink: 0;
    display: inline-block;
    padding: 3px 14px;
    border-radius: 999px;
    font-size: 0.88em;
    font-weight: 700;
    line-height: 1.6;
    background: var(--cm-ribbon-cta-bg);
    color: var(--cm-ribbon-cta-color) !important;
    text-decoration: none;
    white-space: nowrap;
}
#cm-ribbon a.cm-ribbon__cta:hover {
    filter: brightness(1.15);
}
#cm-ribbon .cm-ribbon__close {
    position: absolute;
    top: 50%;
    /* logical properties only: in RTL inline-end = left, in LTR = right.
       Never mix with physical right/left — pinning both sides stretches
       the absolute button across the whole ribbon. */
    inset-inline-start: auto;
    inset-inline-end: 4px;
    transform: translateY(-50%);
    background: transparent;
    border: 0;
    padding: 6px;
    cursor: pointer;
    font-size: 14px;
    color: inherit;
    opacity: 0.75;
    line-height: 1;
}
#cm-ribbon .cm-ribbon__close:hover,
#cm-ribbon .cm-ribbon__close:focus-visible {
    opacity: 1;
    outline: none;
}
#cm-ribbon .cm-ribbon__close i.icon {
    margin: 0;
    width: auto;
}

/* Close animation — JS adds .cm-ribbon--closing before removing the node */
#cm-ribbon.cm-ribbon--closing {
    height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    opacity: 0;
    overflow: hidden;
    transition: height 0.25s ease, opacity 0.2s ease, padding 0.25s ease;
}

/* Marquee mode for messages too long to fit */
#cm-ribbon.cm-ribbon--marquee .cm-ribbon__track {
    overflow: hidden;
}
#cm-ribbon.cm-ribbon--marquee .cm-ribbon__text,
#cm-ribbon.cm-ribbon--marquee .cm-ribbon__text-link {
    display: inline-block;
    white-space: nowrap;
    padding-inline-start: 100%;
    animation: cmRibbonScroll 16s linear infinite;
}
@keyframes cmRibbonScroll {
    to {
        transform: translateX(-100%);
    }
}
@media (prefers-reduced-motion: reduce) {
    #cm-ribbon.cm-ribbon--marquee .cm-ribbon__text,
    #cm-ribbon.cm-ribbon--marquee .cm-ribbon__text-link {
        animation: none;
        padding-inline-start: 0;
        white-space: normal;
    }
}

/* Very small phones: tighter padding so text keeps room */
@media (max-width: 400px) {
    #cm-ribbon .cm-ribbon__inner {
        padding: 8px 34px;
        gap: 8px;
    }
}