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

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

    --theme-primary-ring: color-mix(in srgb, var(--theme-primary) 22%, transparent);
    --theme-primary-shadow: 0 2px 8px 0 color-mix(in srgb, var(--theme-primary) 24%, transparent);
    --theme-primary-gradient: linear-gradient(135deg, var(--theme-primary) 0%, #14b8a6 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: #fff1f2;
    --theme-discount-border: #fecdd3;
    --theme-discount-ink: #be123c;
    --theme-hero-panel-bg: var(--theme-primary-light);
    --theme-hero-panel-border: var(--theme-primary-border);

    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 12px;
    --radius-xl: 14px;

    --r-card: 12px;
    --r-ctl: 10px;
    --r-chip: 999px;

    --header-bar: var(--theme-primary-active);
    --header-ink: #ffffff;
    --header-ink-soft: #a7d8d3;
    --header-line: rgba(255, 255, 255, 0.16);
    --header-field: rgba(255, 255, 255, 0.1);

    --shadow-xs: 0 1px 2px 0 rgba(19, 78, 74, 0.06);
    --shadow-sm: 0 1px 3px 0 rgba(19, 78, 74, 0.09), 0 1px 2px -1px rgba(19, 78, 74, 0.05);
    --shadow-md: 0 4px 12px -2px rgba(19, 78, 74, 0.1), 0 2px 4px -2px rgba(19, 78, 74, 0.05);
    --shadow-lg: 0 14px 24px -6px rgba(19, 78, 74, 0.12), 0 4px 6px -2px rgba(19, 78, 74, 0.05);
    --shadow-xl: 0 22px 32px -8px rgba(19, 78, 74, 0.12), 0 8px 10px -6px rgba(19, 78, 74, 0.05);
}

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: 700;
    letter-spacing: -0.3px;
}

.section-title,
.legal-h2 {
    padding-left: 14px;
    border-left: 4px solid var(--theme-primary);
}

.section-subtitle,
.content-prose {
    padding-left: 18px;
}

.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,
.saving-method-card,
.saving-icon-box,
.faq-item,
.cta-banner,
.cta-icon-box,
.no-coupons-card,
.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,
.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,
.btn-reset-filters,
.footer-country-select,
.contact-form-input,
.contact-form-textarea,
.contact-form-select,
.legal-sidebar-link,
.info-tab-btn,
.legal-h2-number,
.cta-status-message,
.rating-feedback-msg,
.store-dir-badge {
    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;
}

.pill-btn {
    border-radius: var(--r-chip) !important;
}

.site-header {
    background: var(--header-bar) !important;
    border-bottom: 1px solid var(--header-line) !important;
}

.site-header .brand-title {
    color: var(--header-ink) !important;
}

.site-header .brand-tagline {
    color: var(--header-ink-soft) !important;
}

.site-header .nav-link {
    color: #cfe9e6;
}

.site-header .nav-link:hover,
.site-header .nav-link.active {
    color: var(--header-ink);
}

.site-header .header-right .search-bar input {
    background-color: var(--header-field) !important;
    border-color: rgba(255, 255, 255, 0.24) !important;
    color: var(--header-ink);
}

.site-header .header-right .search-bar input::placeholder {
    color: rgba(255, 255, 255, 0.62);
}

.site-header .header-right .search-bar input:focus {
    background-color: rgba(255, 255, 255, 0.18) !important;
    border-color: rgba(255, 255, 255, 0.7) !important;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.16) !important;
}

.site-header .header-right .search-icon {
    color: rgba(255, 255, 255, 0.72) !important;
}

.site-header .header-right .search-clear-btn {
    color: rgba(255, 255, 255, 0.8);
}

.site-header .header-right .search-clear-btn:hover {
    color: var(--header-ink);
    background-color: rgba(255, 255, 255, 0.16);
}

.site-header .auth-buttons .btn-sign-in {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.38);
    color: var(--header-ink);
}

.site-header .auth-buttons .btn-sign-in:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.7);
    color: var(--header-ink);
}

.site-header .auth-buttons .btn-join {
    background-color: var(--header-ink);
    color: var(--theme-primary-active);
    box-shadow: none;
}

.site-header .auth-buttons .btn-join:hover {
    background-color: var(--theme-primary-light);
}

.site-header .mobile-menu-btn {
    background-color: rgba(255, 255, 255, 0.14) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
}

.site-header .mobile-menu-btn span {
    background: var(--header-ink) !important;
}

.site-header .mobile-nav-drawer {
    border-top: 1px solid var(--header-line);
}

.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: 4px;
    border-radius: 4px 4px 0 0;
}