@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700;800&display=swap');

:root {
    --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-display: 'Poppins', 'Inter', system-ui, sans-serif;
    --font-sans: var(--font-body);

    --theme-primary-ring: color-mix(in srgb, var(--theme-primary) 18%, transparent);
    --theme-primary-shadow: 0 1px 3px 0 color-mix(in srgb, var(--theme-primary) 24%, transparent);
    --theme-primary-gradient: linear-gradient(135deg, var(--theme-primary) 0%, #ef4444 100%);
    --theme-primary-strong: var(--theme-primary-hover);
    --theme-primary-deep: var(--theme-primary-active);
    --theme-primary-faint: color-mix(in srgb, var(--theme-primary) 4%, #ffffff);
    --theme-secondary-soft: color-mix(in srgb, var(--theme-secondary) 38%, #ffffff);
    --theme-discount-bg: #f0f9ff;
    --theme-discount-border: #bae6fd;
    --theme-discount-ink: #0369a1;
    --theme-hero-panel-bg: var(--theme-primary-light);
    --theme-hero-panel-border: var(--theme-primary-border);

    --radius-sm: 3px;
    --radius-md: 4px;
    --radius-lg: 4px;
    --radius-xl: 6px;

    --r-card: 4px;
    --r-ctl: 4px;

    --shadow-xs: 0 1px 1px 0 rgba(28, 25, 23, 0.04);
    --shadow-sm: 0 1px 2px 0 rgba(28, 25, 23, 0.06);
    --shadow-md: 0 2px 6px -1px rgba(28, 25, 23, 0.08);
    --shadow-lg: 0 6px 14px -4px rgba(28, 25, 23, 0.1);
    --shadow-xl: 0 12px 22px -8px rgba(28, 25, 23, 0.12);
}

body {
    font-family: var(--font-body);
}

h1, h2, h3, h4, h5, h6,
.legal-h1, .legal-h2, .legal-h3,
.brand-title, .banner-title,
.discount-amount, .col-discount-val, .rating-score, .rating-score-pill,
.btn-join, .btn-coupon-main, .btn-deal-direct, .btn-cta-submit, .btn-modal-go {
    font-family: var(--font-display);
}

.brand-title {
    font-weight: 600;
    letter-spacing: -0.2px;
}

.section-title {
    position: relative;
    padding-bottom: 12px;
}

.section-title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 44px;
    height: 3px;
    background: var(--theme-primary);
}

.legal-h2 {
    border-bottom-color: var(--theme-primary-border);
}

.store-logo-box,
.store-hero-banner-right,
.coupon-card,
.discount-tag,
.sidebar-widget,
.widget-rating-box,
.widget-connect-box,
.widget-gif-banner-box,
.sidebar-gif-link,
.sidebar-gif-img,
.sidebar-tip-card,
.current-coupons-table-wrapper,
.step-card,
.step-badge-num,
.saving-method-card,
.saving-icon-box,
.faq-item,
.cta-banner,
.cta-icon-box,
.no-coupons-card,
.auth-modal-icon,
.store-dir-card,
.store-dir-logo,
.modal-card,
.legal-hero-header,
.legal-sidebar,
.legal-content-card,
.legal-callout-box,
.legal-table-wrapper,
.legal-faq-item,
.contact-info-card,
.contact-channel-icon,
.optout-card,
.toggle-switch-row {
    border-radius: var(--r-card) !important;
}

.search-bar input,
.mobile-drawer-search input,
.btn-sign-in,
.btn-join,
.btn-deal-direct,
.widget-alert-input,
.btn-widget-alert,
.category-dropdown,
.tabs-filter-dropdown,
.btn-visit-store-outline,
.connect-cat-tag,
.cta-input-group,
.cta-input,
.btn-cta-submit,
.btn-modal-copy,
.btn-modal-go,
.modal-code-box,
.modal-code-input,
.modal-deal-notice,
.modal-meta-pill,
.modal-store-badge,
.btn-reset-filters,
.footer-country-select,
.contact-form-input,
.contact-form-textarea,
.contact-form-select,
.legal-sidebar-link,
.legal-badge,
.info-tab-btn,
.legal-h2-number,
.cta-status-message,
.rating-feedback-msg,
.store-dir-badge,
.rating-score-pill,
.cat-badge-count,
.pill-btn {
    border-radius: var(--r-ctl) !important;
}

.btn-coupon-group {
    border-radius: var(--r-ctl) !important;
}

.btn-coupon-main {
    border-radius: var(--r-ctl) 0 0 var(--r-ctl) !important;
}

.btn-coupon-code {
    border-radius: 0 var(--r-ctl) var(--r-ctl) 0 !important;
}

@media (min-width: 1025px) {
    .main-layout {
        grid-template-columns: 340px minmax(0, 1fr);
    }

    .sidebar-col {
        order: -1;
    }
}

.site-header {
    border-bottom: 1px solid var(--theme-border);
}

.coupon-card:hover {
    border-color: var(--theme-primary-border);
    box-shadow: var(--shadow-md);
}

.step-card:hover,
.saving-method-card:hover {
    border-color: var(--theme-primary-border);
    box-shadow: var(--shadow-md);
}

.faq-item.active {
    border-color: var(--theme-primary-border);
}

.tab-btn.active::after {
    height: 3px;
    border-radius: 0;
}