/** * ============================================================================= * TH - Apex Coupons CSS (v3.0.1) * ============================================================================= * Previously housed in Elementor > Custom Code ("TH - Apex Coupons CSS", , * priority 1, Entire Site). Now shipped and enqueued by the plugin itself. * Uses !important to override any conflicting theme/Elementor styles. * * v3.0.1 fixes: * - Text overflow / line-break on long titles * - Magnifier icon styling * - Removed hover motion on close button * ============================================================================= */ /* ============================================================================= APEX COUPONS - WRAPPER ============================================================================= */ .apex-coupon-wrapper { position: relative !important; display: block !important; width: 100% !important; margin-bottom: 16px !important; } /* ============================================================================= APEX COUPONS - CONDENSED BUTTON (the "See details" trigger) ============================================================================= */ .Coupon_condensed { display: flex !important; align-items: center !important; justify-content: space-between !important; width: 100% !important; padding: 16px 20px !important; background-color: #ffffff !important; border: 2px dashed var( --e-global-color-secondary ) !important; border-radius: 12px !important; text-align: left !important; transition: background-color 0.2s ease !important; cursor: pointer !important; box-sizing: border-box !important; outline: none !important; } .Coupon_condensed:hover { background-color: #fafafa !important; } .Coupon_condensed:focus { outline: none !important; } .Coupon_condensed > span:first-child { flex: 1 !important; min-width: 0 !important; } /* FIX #1: Text overflow - allow line breaks */ .Coupon_condensed .h5, .Coupon_condensed span.h5 { display: block !important; font-size: 1.125rem !important; font-weight: 700 !important; color: var( --e-global-color-primary ) !important; margin: 0 0 4px 0 !important; line-height: 1.3 !important; font-family: inherit !important; /* Text wrapping */ white-space: normal !important; word-wrap: break-word !important; overflow-wrap: break-word !important; hyphens: auto !important; } .Coupon_condensed .underline { display: inline-block !important; text-decoration: underline !important; color: #666666 !important; font-size: 0.875rem !important; font-weight: 400 !important; } .Coupon_condensed > span:last-child { flex-shrink: 0 !important; margin-left: 16px !important; display: flex !important; align-items: center !important; justify-content: center !important; } /* ============================================================================= FIX #2: MAGNIFIER ICON STYLING ============================================================================= */ .Coupon_condensed svg { width: 28px !important; height: 28px !important; fill: #999999 !important; flex-shrink: 0 !important; } .Coupon_condensed svg use { fill: #999999 !important; } /* Inline SVG magnifier icon fallback */ .Coupon_condensed > span:last-child svg { width: 28px !important; height: 28px !important; fill: #999999 !important; display:none; } /* ============================================================================= APEX COUPONS - MODAL OVERLAY ============================================================================= */ .Coupon_modal { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; width: 100% !important; height: 100% !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 20px !important; background-color: rgba(0, 0, 0, 0.75) !important; z-index: 999999 !important; opacity: 0 !important; visibility: hidden !important; transition: opacity 0.3s ease, visibility 0.3s ease !important; overflow: auto !important; box-sizing: border-box !important; } .Coupon_modal.is-active, .Coupon_modal[aria-hidden="false"] { opacity: 1 !important; visibility: visible !important; } /* ============================================================================= APEX COUPONS - MODAL CONTENT WRAPPER ============================================================================= */ .Coupon_wrap { flex: 0 1 auto !important; max-width: 520px !important; width: 100% !important; position: relative !important; } .Coupon_full { position: relative !important; } /* ============================================================================= APEX COUPONS - MODAL COUPON BOX ============================================================================= */ .Coupon_modal .Coupon, .Coupon_full .Coupon { background-color: #ffffff !important; border: 3px dashed !important; border-color: var(--e-global-color-accent) !important; border-radius: 12px !important; padding: 28px 24px !important; position: relative !important; box-sizing: border-box !important; } @media (min-width: 768px) { .Coupon_modal .Coupon, .Coupon_full .Coupon { padding: 32px 28px !important; } } /* ============================================================================= APEX COUPONS - MODAL TITLE ============================================================================= */ .Coupon_modal .Coupon h4, .Coupon_full .Coupon h4 { font-size: 1.5rem !important; font-weight: 900 !important; color: #1a1a1a !important; margin: 0 0 16px 0 !important; line-height: 1.25 !important; font-family: inherit !important; /* Text wrapping for modal title too */ white-space: normal !important; word-wrap: break-word !important; overflow-wrap: break-word !important; } @media (min-width: 768px) { .Coupon_modal .Coupon h4, .Coupon_full .Coupon h4 { font-size: 1.75rem !important; } } .Coupon_modal .Coupon h4 a, .Coupon_full .Coupon h4 a { color: #1a1a1a !important; text-decoration: none !important; } .Coupon_modal .Coupon h4 a:hover, .Coupon_full .Coupon h4 a:hover { text-decoration: underline !important; } /* ============================================================================= APEX COUPONS - MODAL DESCRIPTION TEXT ============================================================================= */ .Coupon_modal .Coupon p, .Coupon_full .Coupon p { font-size: 0.9375rem !important; color: #666666 !important; line-height: 1.6 !important; margin: 0 0 20px 0 !important; } /* Description after button (terms/disclaimer) */ .Coupon_modal .Coupon .Btn + p, .Coupon_full .Coupon .Btn + p, .Coupon_modal .Coupon p:last-of-type, .Coupon_full .Coupon p:last-of-type { font-size: 0.8125rem !important; color: #888888 !important; margin-top: 20px !important; margin-bottom: 0 !important; } /* ============================================================================= APEX COUPONS - SCHEDULE BUTTON (Red CTA) ============================================================================= */ .Coupon_modal .Coupon .Btn, .Coupon_full .Coupon .Btn, .Coupon .Btn.Btn-primary { display: block !important; width: 100% !important; padding: 18px 28px !important; text-align: center !important; text-decoration: none !important; border-radius: 6px !important; font-weight: 700 !important; font-size: 1rem !important; letter-spacing: 0.5px !important; text-transform: uppercase !important; transition: background-color 0.2s ease !important; margin: 20px 0 !important; box-sizing: border-box !important; border: none !important; cursor: pointer !important; } .Coupon_modal .Coupon .Btn-primary, .Coupon_full .Coupon .Btn-primary, .Coupon .Btn.Btn-primary { background-color: var( --e-global-color-secondary ) !important; color: #ffffff !important; } .Coupon_modal .Coupon .Btn-primary:hover, .Coupon_full .Coupon .Btn-primary:hover, .Coupon .Btn.Btn-primary:hover { background-color: var( --e-global-color-primary ) !important; color: #ffffff !important; } .Coupon .Btn_textWrapper { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 12px !important; } .Coupon .Btn_text { display: inline !important; } /* Add arrow after button text */ .Coupon_modal .Coupon .Btn-primary .Btn_textWrapper::after, .Coupon_full .Coupon .Btn-primary .Btn_textWrapper::after { content: "→" !important; font-size: 1.25rem !important; font-weight: 400 !important; margin-left: 8px !important; } /* ============================================================================= FIX #3: CLOSE BUTTON - NO MOTION ON HOVER ============================================================================= */ .Coupon_close { position: absolute !important; top: -14px !important; right: -14px !important; width: 44px !important; height: 44px !important; padding: 0 !important; background-color: #1a1a1a !important; border: none !important; border-radius: 50% !important; cursor: pointer !important; display: flex !important; align-items: center !important; justify-content: center !important; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3) !important; transition: background-color 0.2s ease !important; z-index: 10 !important; outline: none !important; /* NO transform on base state */ transform: none !important; } .Coupon_close:hover { /* NO scale/movement - just color change */ transform: none !important; background-color: #333333 !important; } .Coupon_close:focus { outline: none !important; transform: none !important; } .Coupon_close svg { width: 22px !important; height: 22px !important; fill: #ffffff !important; } /* ============================================================================= APEX COUPONS - UTILITY CLASSES ============================================================================= */ .pin { position: fixed !important; top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important; } .block { display: block !important; } .clear { clear: both !important; } .hidden { display: none !important; } /* ============================================================================= APEX COUPONS - PREVENT BODY SCROLL WHEN MODAL OPEN ============================================================================= */ body.coupon-modal-open { overflow: hidden !important; } /* ============================================================================= APEX COUPONS - MODAL ANIMATION ============================================================================= */ .Coupon_modal .Coupon_wrap { transform: scale(0.95) translateY(10px) !important; transition: transform 0.3s ease !important; } .Coupon_modal.is-active .Coupon_wrap, .Coupon_modal[aria-hidden="false"] .Coupon_wrap { transform: scale(1) translateY(0) !important; } /* ============================================================================= APEX COUPONS - RESPONSIVE ADJUSTMENTS ============================================================================= */ @media (max-width: 480px) { .Coupon_condensed { padding: 14px 16px !important; } .Coupon_condensed .h5, .Coupon_condensed span.h5 { font-size: 1rem !important; } .Coupon_modal .Coupon, .Coupon_full .Coupon { padding: 20px 16px !important; } .Coupon_modal .Coupon h4, .Coupon_full .Coupon h4 { font-size: 1.25rem !important; } .Coupon_close { top: -10px !important; right: -10px !important; width: 38px !important; height: 38px !important; } .Coupon_close svg { width: 18px !important; height: 18px !important; } .Coupon_modal .Coupon .Btn, .Coupon_full .Coupon .Btn { padding: 16px 20px !important; font-size: 0.9375rem !important; } } /* ============================================================================= APEX COUPONS - FORCE OVERRIDE ANY THEME CONFLICTS ============================================================================= */ /* Reset any inherited button styles */ button.Coupon_condensed, button.Coupon_close { font-family: inherit !important; line-height: inherit !important; -webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important; } /* Ensure modal is above everything */ .Coupon_modal { z-index: 999999 !important; } /* Override any max-width constraints on modal */ .Coupon_modal .Coupon_wrap { max-width: 520px !important; } /* ============================================================================= APEX COUPONS - PAGE FILTERS ============================================================================= */ .apex-coupons-page__filters { display: flex !important; flex-wrap: wrap !important; gap: 0.5rem 1rem !important; margin: 0 0 1.5rem !important; padding: 0 !important; list-style: none !important; } .apex-coupons-page__filters li { margin: 0 !important; } .apex-coupons-page__filter-link { display: inline-block !important; padding: 0.5rem 1rem !important; color: inherit !important; background: #ffffff !important; border: 1px solid #cccccc !important; border-radius: 4px !important; text-decoration: none !important; } .apex-coupons-page__filter-link:hover { background: #f5f5f5 !important; border-color: #999999 !important; } .apex-coupons-page__filter-link.is-active { color: #ffffff !important; background: var(--e-global-color-accent, #c8202f) !important; border-color: var(--e-global-color-accent, #c8202f) !important; } .apex-coupons-page__empty { grid-column: 1 / -1 !important; margin: 0 !important; } .apex-coupons-page__grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 1rem !important; } .apex-coupons-page__grid-item { min-width: 0 !important; } @media (max-width: 768px) { .apex-coupons-page__grid { grid-template-columns: minmax(0, 1fr) !important; } } /* ============================================================================= APEX COUPONS - IMAGE DEAL PAGE ============================================================================= */ .apex-coupons-image-page__grid { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 24px !important; } .apex-coupon-image-card { display: flex !important; flex-direction: column !important; min-width: 0 !important; overflow: hidden !important; background: #ffffff !important; border: 1px solid #e2e2e2 !important; border-radius: 12px !important; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08) !important; } .apex-coupon-image-card__media { position: relative !important; width: 100% !important; aspect-ratio: 16 / 10 !important; overflow: hidden !important; background: #f2f2f2 !important; } .apex-coupon-image-card__image { display: block !important; width: 100% !important; height: 100% !important; object-fit: cover !important; } .apex-coupon-image-card__placeholder { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 100% !important; padding: 24px !important; color: #ffffff !important; background: linear-gradient(135deg, var(--e-global-color-primary, #222222), var(--e-global-color-secondary, #c8202f)) !important; box-sizing: border-box !important; } .apex-coupon-image-card__placeholder span { font-size: 1.25rem !important; font-weight: 800 !important; letter-spacing: 0.06em !important; text-align: center !important; text-transform: uppercase !important; } .apex-coupon-image-card__content { display: flex !important; flex: 1 !important; flex-direction: column !important; align-items: flex-start !important; padding: 24px !important; } .apex-coupon-image-card__category { display: inline-block !important; margin: 0 0 10px !important; color: var(--e-global-color-secondary, #c8202f) !important; font-size: 0.75rem !important; font-weight: 800 !important; letter-spacing: 0.08em !important; line-height: 1.2 !important; text-transform: uppercase !important; } .apex-coupon-image-card__title { margin: 0 0 12px !important; color: var(--e-global-color-primary, #1a1a1a) !important; font-family: inherit !important; font-size: 1.4rem !important; font-weight: 800 !important; line-height: 1.25 !important; overflow-wrap: anywhere !important; } .apex-coupon-image-card__description { margin: 0 0 20px !important; color: #666666 !important; font-size: 0.9375rem !important; line-height: 1.6 !important; } .apex-coupon-image-card__button { display: block !important; width: 100% !important; margin: auto 0 0 !important; padding: 14px 20px !important; color: #ffffff !important; background: var(--e-global-color-secondary, #c8202f) !important; border: 0 !important; border-radius: 6px !important; box-sizing: border-box !important; font-size: 0.9375rem !important; font-weight: 700 !important; letter-spacing: 0.04em !important; line-height: 1.3 !important; text-align: center !important; text-decoration: none !important; text-transform: uppercase !important; transition: background-color 0.2s ease !important; } .apex-coupon-image-card__button:hover, .apex-coupon-image-card__button:focus { color: #ffffff !important; background: var(--e-global-color-primary, #1a1a1a) !important; } @media (max-width: 1024px) { .apex-coupons-image-page__grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } @media (max-width: 640px) { .apex-coupons-image-page__grid { grid-template-columns: minmax(0, 1fr) !important; gap: 18px !important; } .apex-coupon-image-card__content { padding: 20px !important; } } /* ============================================================================= APEX COUPONS - MID-PAGE STRIP CTA ============================================================================= */ .apex-coupons-strip { display: block !important; width: 100% !important; margin: 0 0 1.5rem !important; box-sizing: border-box !important; } .apex-coupons-strip__header { display: flex !important; align-items: baseline !important; justify-content: space-between !important; gap: 1rem !important; margin: 0 0 1rem !important; } .apex-coupons-strip__header--end { justify-content: flex-end !important; } .apex-coupons-strip__title { margin: 0 !important; color: var(--e-global-color-primary, #1a1a1a) !important; font-family: inherit !important; font-size: 1.5rem !important; font-weight: 800 !important; line-height: 1.2 !important; } .apex-coupons-strip__view-all { flex-shrink: 0 !important; color: var(--e-global-color-secondary, #c8202f) !important; font-size: 0.875rem !important; font-weight: 700 !important; text-decoration: underline !important; white-space: nowrap !important; } .apex-coupons-strip__tabs { display: flex !important; flex-wrap: nowrap !important; gap: 0.5rem !important; margin: 0 0 1rem !important; padding: 0 0 0.25rem !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; scrollbar-width: thin !important; } .apex-coupons-strip__tab { flex: 0 0 auto !important; margin: 0 !important; padding: 0.45rem 0.9rem !important; color: inherit !important; background: #ffffff !important; border: 1px solid #cccccc !important; border-radius: 4px !important; cursor: pointer !important; font-family: inherit !important; font-size: 0.875rem !important; font-weight: 600 !important; line-height: 1.2 !important; white-space: nowrap !important; -webkit-appearance: none !important; appearance: none !important; } .apex-coupons-strip__tab:hover { background: #f5f5f5 !important; border-color: #999999 !important; } .apex-coupons-strip__tab.is-active { color: #ffffff !important; background: var(--e-global-color-accent, #c8202f) !important; border-color: var(--e-global-color-accent, #c8202f) !important; } .apex-coupons-strip__track-wrap { position: relative !important; } .apex-coupons-strip__track { display: flex !important; flex-wrap: nowrap !important; gap: 1rem !important; margin: 0 !important; padding: 0.25rem 0.15rem 0.75rem !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; scroll-snap-type: x mandatory !important; scrollbar-width: thin !important; } .apex-coupon-strip-card { position: relative !important; display: flex !important; flex: 0 0 min(280px, 78vw) !important; flex-direction: column !important; align-items: flex-start !important; width: min(280px, 78vw) !important; min-height: 168px !important; padding: 18px 18px 16px !important; background: #ffffff !important; border: 2px dashed var(--e-global-color-secondary, #c8202f) !important; border-radius: 12px !important; box-sizing: border-box !important; scroll-snap-align: start !important; } .apex-coupon-strip-card.is-hidden { display: none !important; } .apex-coupon-strip-card__category { display: inline-block !important; margin: 0 0 8px !important; color: var(--e-global-color-primary, #1a1a1a) !important; font-size: 0.6875rem !important; font-weight: 800 !important; letter-spacing: 0.08em !important; line-height: 1.2 !important; text-transform: uppercase !important; } .apex-coupon-strip-card__title { margin: 0 0 8px !important; color: var(--e-global-color-primary, #1a1a1a) !important; font-family: inherit !important; font-size: 1.05rem !important; font-weight: 800 !important; line-height: 1.3 !important; overflow-wrap: anywhere !important; } .apex-coupon-strip-card__excerpt { margin: 0 0 14px !important; color: #666666 !important; font-size: 0.8125rem !important; line-height: 1.45 !important; } .apex-coupon-strip-card__actions { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 0.65rem 0.85rem !important; margin-top: auto !important; width: 100% !important; } .apex-coupon-strip-card__claim { display: inline-block !important; padding: 10px 14px !important; color: #ffffff !important; background: var(--e-global-color-primary, #1a1a1a) !important; border: 0 !important; border-radius: 6px !important; font-size: 0.8125rem !important; font-weight: 700 !important; letter-spacing: 0.03em !important; line-height: 1.2 !important; text-decoration: none !important; text-transform: uppercase !important; transition: background-color 0.2s ease !important; } .apex-coupon-strip-card__claim:hover, .apex-coupon-strip-card__claim:focus { color: #ffffff !important; background: var(--e-global-color-secondary, #c8202f) !important; } .apex-coupon-strip-card__details { margin: 0 !important; padding: 0 !important; color: #666666 !important; background: transparent !important; border: 0 !important; cursor: pointer !important; font-family: inherit !important; font-size: 0.8125rem !important; font-weight: 600 !important; line-height: 1.2 !important; text-decoration: underline !important; -webkit-appearance: none !important; appearance: none !important; } .apex-coupon-strip-card__details:hover, .apex-coupon-strip-card__details:focus { color: var(--e-global-color-primary, #1a1a1a) !important; } @media (max-width: 640px) { .apex-coupons-strip__header { flex-direction: column !important; align-items: flex-start !important; gap: 0.35rem !important; } .apex-coupons-strip__title { font-size: 1.25rem !important; } .apex-coupon-strip-card { flex-basis: min(250px, 82vw) !important; width: min(250px, 82vw) !important; min-height: 156px !important; padding: 16px !important; } }