/* =====================================================================
   PAIDGET.COM — FINTECH LUXURY / DYNAMIC NEON GLASS THEME
   Central theme layer. Loaded after the existing site stylesheets.
   Visual-only: does not change routes, forms, calculations or business logic.
   ===================================================================== */
:root {
  color-scheme: dark;
  --pc-bg: #090116;
  --pc-bg-deep: #05000d;
  --pc-bg-elevated: #160326;
  --pc-panel: rgba(18, 7, 34, .78);
  --pc-panel-strong: rgba(18, 7, 34, .94);
  --pc-panel-hover: rgba(34, 9, 53, .92);
  --pc-purple: #74109a;
  --pc-purple-bright: #a915b6;
  --pc-magenta: #e000d0;
  --pc-magenta-soft: rgba(224, 0, 208, .16);
  --pc-gold: #e3bd52;
  --pc-gold-light: #ffe18a;
  --pc-gold-soft: rgba(227, 189, 82, .14);
  --pc-text: #f7f5fb;
  --pc-muted: #b8b1ca;
  --pc-border: rgba(227, 189, 82, .25);
  --pc-border-glow: rgba(224, 0, 208, .42);
  --pc-glass-blur: 16px;
  --pc-glass-saturation: 155%;
  --pc-radius-sm: 10px;
  --pc-radius-md: 16px;
  --pc-radius-lg: 22px;
  --pc-shadow-panel: 0 14px 36px rgba(0,0,0,.34), 0 0 24px rgba(169,21,182,.10);
  --pc-shadow-neon: 0 0 0 1px rgba(224,0,208,.12), 0 0 20px rgba(224,0,208,.18);
  --pc-shadow-gold: 0 0 0 1px rgba(227,189,82,.12), 0 0 18px rgba(227,189,82,.12);
  --pc-gradient-primary: linear-gradient(125deg, #541078 0%, #8e119f 48%, #d500c6 100%);
  --pc-gradient-heading: linear-gradient(100deg, #fff7d6 0%, #ffe18a 38%, #f5a8ff 76%, #e000d0 100%);
  --pc-transition: 220ms cubic-bezier(.2,.7,.2,1);
  --pc-page-glow: radial-gradient(ellipse at 12% 0%, rgba(116,16,154,.22), transparent 38%),
                  radial-gradient(ellipse at 92% 12%, rgba(224,0,208,.13), transparent 32%),
                  radial-gradient(ellipse at 50% 100%, rgba(227,189,82,.055), transparent 42%);
}

html { background: var(--pc-bg-deep); }
html, body {
  background-color: var(--pc-bg) !important;
  color: var(--pc-text);
  min-height: 100%;
  overflow-x: clip;
}
body {
  background-image: var(--pc-page-glow), linear-gradient(145deg, #090116 0%, #10021d 48%, #070111 100%) !important;
  background-attachment: fixed !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
main, .main-content, .content, .content-wrapper, .page-content, #root {
  background-color: transparent;
}
::selection { background: rgba(224,0,208,.34); color: #fff; }

/* Global typography and links */
h1, h2, h3, h4, h5, h6 { color: var(--pc-text); text-wrap: pretty; }
.text-g, .text-muted, .text-slate-400, .text-slate-500 { color: var(--pc-muted) !important; }
a { transition: color var(--pc-transition), text-shadow var(--pc-transition); }
a:hover { color: var(--pc-gold-light); }

/* Header and navigation surfaces */
nav.header, .header-container, header, .navbar, .topbar, .app-header {
  background: rgba(10,3,24,.82) !important;
  -webkit-backdrop-filter: blur(var(--pc-glass-blur)) saturate(var(--pc-glass-saturation));
  backdrop-filter: blur(var(--pc-glass-blur)) saturate(var(--pc-glass-saturation));
  border-color: var(--pc-border) !important;
  box-shadow: 0 8px 28px rgba(0,0,0,.22), 0 1px 0 rgba(227,189,82,.07);
}
.navp img, .navbar-brand img, .logo img { object-fit: contain; }

/* Reusable glass surfaces: explicit known site classes only */
.card, .panel, .box, .custom-offer-layout, .mi_card, .ref_card,
.mobile-mode-container-profilecard, .for-mobile-mode-profilecard,
.user_card, .profile-card, .cashout-section, .getting-started-box,
.offerList, .offer_sec, .csm-ds, .p-invite, .api-step, .in-r,
.modal-content, .dropdown-menu, .ts-dropdown {
  color: var(--pc-text);
  background: linear-gradient(145deg, rgba(29,8,48,.82), rgba(9,2,22,.88)) !important;
  border-color: var(--pc-border) !important;
  box-shadow: var(--pc-shadow-panel);
  -webkit-backdrop-filter: blur(var(--pc-glass-blur)) saturate(var(--pc-glass-saturation));
  backdrop-filter: blur(var(--pc-glass-blur)) saturate(var(--pc-glass-saturation));
}
.card, .panel, .box, .custom-offer-layout, .mi_card, .ref_card,
.mobile-mode-container-profilecard, .for-mobile-mode-profilecard,
.user_card, .profile-card, .offerList, .offer_sec {
  border-style: solid;
  border-width: 1px;
  border-radius: var(--pc-radius-md);
  transition: border-color var(--pc-transition), box-shadow var(--pc-transition), background var(--pc-transition), transform var(--pc-transition);
}
.card:hover, .panel:hover, .custom-offer-layout:hover, .mi_card:hover,
.ref_card:hover, .user_card:hover, .profile-card:hover, .offerList:hover {
  border-color: rgba(255,225,138,.42) !important;
  box-shadow: var(--pc-shadow-panel), 0 0 22px rgba(224,0,208,.13);
}
.card-header, .panel-heading {
  color: var(--pc-gold-light) !important;
  background: linear-gradient(100deg, rgba(71,10,96,.86), rgba(130,10,125,.64)) !important;
  border-bottom-color: var(--pc-border) !important;
}

/* Premium neon highlights for brand and financial values */
.coin, .coins, .coin-icon, .earning, .balance, .points, .amount,
.offer-persent, .second-earning-menu, .csm_off_rate_h {
  color: var(--pc-gold-light) !important;
  text-shadow: 0 0 12px rgba(227,189,82,.18);
}
.get-paid, .gradient-text, .pc-gradient-text {
  color: var(--pc-gold-light);
  background: var(--pc-gradient-heading);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Buttons: retain original sizing and click behavior */
.csm_btn_log_, .csm_btn_log_2, .csm_btn_log_3, .csm_btn_log_4,
.btn-primary, .off_sp_btn, .csm-start-earning-button,
button.btn-primary, input[type="submit"], .button-primary {
  color: #fff !important;
  background: var(--pc-gradient-primary) !important;
  border: 1px solid rgba(255,225,138,.66) !important;
  border-bottom-color: #b78d2e !important;
  box-shadow: 0 7px 22px rgba(196,0,205,.22), inset 0 1px rgba(255,255,255,.15);
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
  transition: transform var(--pc-transition), box-shadow var(--pc-transition), filter var(--pc-transition);
}
.csm_btn_log_:hover, .csm_btn_log_2:hover, .csm_btn_log_3:hover,
.csm_btn_log_4:hover, .btn-primary:hover, .off_sp_btn:hover,
.csm-start-earning-button:hover, button.btn-primary:hover,
input[type="submit"]:hover, .button-primary:hover {
  color: #fff !important;
  border-color: var(--pc-gold-light) !important;
  box-shadow: 0 8px 26px rgba(224,0,208,.30), 0 0 20px rgba(224,0,208,.18), inset 0 1px rgba(255,255,255,.2);
  filter: brightness(1.08);
  transform: translateY(-1px);
}
.sl-active-all, .sl-active-home {
  background-image: var(--pc-gradient-primary) !important;
  border-left-color: var(--pc-gold) !important;
  box-shadow: inset 3px 0 0 rgba(255,225,138,.85), 0 0 18px rgba(224,0,208,.12);
}
.bb-red { border-bottom-color: var(--pc-gold) !important; }

/* Tables */
table, .table { color: var(--pc-text) !important; background: rgba(7,2,22,.58) !important; }
thead th, table th, .table th {
  color: var(--pc-gold-light) !important;
  background: linear-gradient(90deg, rgba(71,10,96,.88), rgba(125,12,120,.72)) !important;
  border-color: var(--pc-border) !important;
}
table td, .table td { color: #f5f2fa !important; border-color: rgba(255,255,255,.075) !important; }
tbody tr:hover, table tbody tr:hover, .table tbody tr:hover { background: rgba(169,20,184,.10) !important; }

/* Forms and accessible focus states */
input:not([type="checkbox"]):not([type="radio"]), textarea, select,
.form-control, .form-input, .form-select, .form-textarea, .form-multiselect, .ts-control {
  color: var(--pc-text) !important;
  background-color: rgba(6,2,20,.82) !important;
  border-color: rgba(227,189,82,.28) !important;
  border-radius: var(--pc-radius-sm);
}
input::placeholder, textarea::placeholder, .form-control::placeholder,
.form-input::placeholder, .form-textarea::placeholder { color: rgba(247,245,251,.48) !important; }
input:focus, textarea:focus, select:focus, .form-control:focus, .form-input:focus,
.form-select:focus, .form-textarea:focus, .ts-control:focus {
  border-color: var(--pc-gold) !important;
  outline: none;
  box-shadow: 0 0 0 3px rgba(227,189,82,.10), 0 0 18px rgba(210,0,225,.13) !important;
}
input[type="checkbox"], input[type="radio"] { accent-color: var(--pc-magenta); }
.dropdown-item { color: var(--pc-text) !important; }
.dropdown-item:hover, .dropdown-item:focus { background: rgba(169,20,184,.20) !important; color: #fff !important; }

/* Mobile navigation */
.for-mobile-navigation-bar {
  background: rgba(8,2,20,.94) !important;
  border-top: 1px solid var(--pc-border) !important;
  box-shadow: 0 -8px 25px rgba(0,0,0,.30), 0 0 18px rgba(224,0,208,.07);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
}
.for-mobile-navigation-bar-inner {
  background: linear-gradient(135deg, rgba(25,7,43,.96), rgba(49,9,58,.94)) !important;
  border-color: rgba(227,189,82,.22) !important;
}
.nav-li-n-o-mobile { color: var(--pc-text) !important; }
.nav-li-n-o-mobile i { color: var(--pc-gold-light) !important; }
.second-earning-menu { background: var(--pc-gradient-primary) !important; color: #fff !important; }
.offer_sec { background: linear-gradient(135deg, rgba(80,13,100,.86), rgba(137,10,124,.68)) !important; }
.offer-persent { background: linear-gradient(135deg, #8d167f, #d5ac43) !important; }

/* Admin area, modals, alerts and focusable controls */
.sidebar, .app-sidebar, .side-nav, .menu-panel { background-color: rgba(9,2,24,.94) !important; border-color: var(--pc-border) !important; }
.modal-header, .modal-footer { border-color: var(--pc-border) !important; }
.alert, .toast, .notification { border-color: var(--pc-border); }
:focus-visible { outline: 2px solid var(--pc-gold-light); outline-offset: 3px; }

/* Scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--pc-bg-deep); }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--pc-purple), #d1a63f); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, var(--pc-magenta), var(--pc-gold)); }

@media (max-width: 768px) {
  :root { --pc-glass-blur: 11px; --pc-radius-md: 14px; --pc-radius-lg: 18px; }
  body { background-attachment: scroll !important; }
  .main-content { margin-bottom: max(4.5rem, env(safe-area-inset-bottom)) !important; }
  .card, .panel, .box, .custom-offer-layout, .mi_card, .ref_card,
  .mobile-mode-container-profilecard, .for-mobile-mode-profilecard,
  .user_card, .profile-card { box-shadow: 0 8px 22px rgba(0,0,0,.27), 0 0 13px rgba(169,21,182,.07); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}


/* Standalone Live Leads page: unify its former cyan/navy accents with PAIDGET */
.pc-live-leads .glass-panel,
.pc-live-leads .lead-card-mobile,
.pc-live-leads .stat-card,
.pc-live-leads [class*="bg-[#07131c"],
.pc-live-leads [class*="bg-[#0a1320"] {
  color: var(--pc-text) !important;
  background: linear-gradient(145deg, rgba(29,8,48,.90), rgba(9,2,22,.94)) !important;
  border-color: var(--pc-border) !important;
  box-shadow: var(--pc-shadow-panel), 0 0 14px rgba(224,0,208,.08) !important;
  -webkit-backdrop-filter: blur(var(--pc-glass-blur)) saturate(var(--pc-glass-saturation));
  backdrop-filter: blur(var(--pc-glass-blur)) saturate(var(--pc-glass-saturation));
}
.pc-live-leads [class*="text-cyan-"],
.pc-live-leads [class*="border-cyan-"],
.pc-live-leads [class*="shadow-cyan-"] {
  color: var(--pc-gold-light) !important;
  border-color: rgba(227,189,82,.28) !important;
  --tw-shadow-color: rgba(224,0,208,.16) !important;
}
.pc-live-leads .pagination-btn:hover,
.pc-live-leads [class*="bg-cyan-"] {
  background: var(--pc-gradient-primary) !important;
  color: #fff !important;
}
.pc-live-leads .avatar-ring { box-shadow: 0 0 0 2px rgba(227,189,82,.40), 0 0 14px rgba(224,0,208,.12); }
.pc-live-leads .serial-number { color: var(--pc-gold-light) !important; }

/* PAIDGET SIDEBAR - FORCE BLUE GLASS */
.sidebar .sidebar-panel,
.sidebar .sidebar-panel > div,
.sidebar .sidebar-panel .bg-white,
.sidebar .sidebar-panel .bg-fg-1 {
    background: rgba(190, 220, 255, 0.30) !important;
    background-color: rgba(190, 220, 255, 0.30) !important;
    -webkit-backdrop-filter: blur(28px) saturate(180%) !important;
    backdrop-filter: blur(28px) saturate(180%) !important;
}

.sidebar .sidebar-panel {
    border-right: 1px solid rgba(255,255,255,0.75) !important;
    box-shadow: 8px 0 35px rgba(50,110,190,0.12) !important;
}
/* END BLUE GLASS */

/* PAIDGET PREMIUM BLUE CYAN GLASS V2 */
.sidebar .sidebar-panel,
.sidebar .sidebar-panel > div,
.sidebar .sidebar-panel .bg-white,
.sidebar .sidebar-panel .bg-fg-1 {
    background: linear-gradient(
        155deg,
        rgba(17, 91, 160, 0.88),
        rgba(10, 64, 125, 0.91),
        rgba(12, 112, 155, 0.86)
    ) !important;
    background-color: rgba(15, 75, 135, 0.90) !important;
    backdrop-filter: blur(28px) saturate(175%) !important;
    -webkit-backdrop-filter: blur(28px) saturate(175%) !important;
}

.sidebar .sidebar-panel {
    border-right: 1px solid rgba(160, 225, 255, 0.28) !important;
    box-shadow: 8px 0 35px rgba(0, 70, 150, 0.18) !important;
}

.csm-sidebar a {
    color: rgba(235, 247, 255, 0.90) !important;
    border: 1px solid transparent !important;
    border-radius: 12px !important;
    transition: all .28s ease !important;
}

.csm-sidebar a:hover {
    background: rgba(100, 205, 255, 0.16) !important;
    border-color: rgba(140, 225, 255, 0.28) !important;
    color: #ffffff !important;
    box-shadow: 0 5px 18px rgba(0, 35, 90, 0.18) !important;
    transform: translateX(3px);
}

.csm-sidebar a[class*="bg-slate-200"] {
    background: linear-gradient(
        100deg,
        rgba(45, 175, 245, 0.32),
        rgba(80, 220, 240, 0.16)
    ) !important;
    color: #ffffff !important;
    border-color: rgba(140, 225, 255, 0.35) !important;
    box-shadow: inset 3px 0 0 #62d8ff,
                0 4px 16px rgba(0, 30, 90, 0.15) !important;
}

.csm-sidebar a i {
    color: #9de5ff !important;
}

@media (prefers-reduced-motion: reduce) {
    .csm-sidebar a {
        transition: none !important;
    }
}
/* END PAIDGET PREMIUM BLUE CYAN GLASS V2 */

/* PAIDGET PREMIUM BLUE CYAN GLASS V2 */
.sidebar .sidebar-panel,
.sidebar .sidebar-panel > div,
.sidebar .sidebar-panel .bg-white,
.sidebar .sidebar-panel .bg-fg-1 {
    background: linear-gradient(
        155deg,
        rgba(17, 91, 160, 0.88),
        rgba(10, 64, 125, 0.91),
        rgba(12, 112, 155, 0.86)
    ) !important;
    background-color: rgba(15, 75, 135, 0.90) !important;
    backdrop-filter: blur(28px) saturate(175%) !important;
    -webkit-backdrop-filter: blur(28px) saturate(175%) !important;
}

.sidebar .sidebar-panel {
    border-right: 1px solid rgba(160, 225, 255, 0.28) !important;
    box-shadow: 8px 0 35px rgba(0, 70, 150, 0.18) !important;
}

.csm-sidebar a {
    color: rgba(235, 247, 255, 0.90) !important;
    border: 1px solid transparent !important;
    border-radius: 12px !important;
    transition: all .28s ease !important;
}

.csm-sidebar a:hover {
    background: rgba(100, 205, 255, 0.16) !important;
    border-color: rgba(140, 225, 255, 0.28) !important;
    color: #ffffff !important;
    box-shadow: 0 5px 18px rgba(0, 35, 90, 0.18) !important;
    transform: translateX(3px);
}

.csm-sidebar a[class*="bg-slate-200"] {
    background: linear-gradient(
        100deg,
        rgba(45, 175, 245, 0.32),
        rgba(80, 220, 240, 0.16)
    ) !important;
    color: #ffffff !important;
    border-color: rgba(140, 225, 255, 0.35) !important;
    box-shadow: inset 3px 0 0 #62d8ff,
                0 4px 16px rgba(0, 30, 90, 0.15) !important;
}

.csm-sidebar a i {
    color: #9de5ff !important;
}

@media (prefers-reduced-motion: reduce) {
    .csm-sidebar a {
        transition: none !important;
    }
}
/* END PAIDGET PREMIUM BLUE CYAN GLASS V2 */

/* PAIDGET TRUE FULL TRANSPARENT GLASS SIDEBAR */

.sidebar,
.sidebar .sidebar-panel {
    background: transparent !important;
}

.sidebar .sidebar-panel,
.sidebar .sidebar-panel > div,
.sidebar .sidebar-panel .bg-white,
.sidebar .sidebar-panel .bg-fg-1,
.sidebar .sidebar-panel [class*="bg-navy"] {
    background: rgba(65, 165, 235, 0.12) !important;
    background-color: rgba(65, 165, 235, 0.12) !important;
    background-image: none !important;
    -webkit-backdrop-filter: blur(35px) saturate(190%) !important;
    backdrop-filter: blur(35px) saturate(190%) !important;
}

.sidebar .sidebar-panel {
    border-right: 1px solid rgba(210, 240, 255, 0.38) !important;
    box-shadow:
        8px 0 35px rgba(20, 100, 180, 0.10),
        inset -1px 0 0 rgba(255,255,255,0.12) !important;
}

.csm-sidebar {
    background: transparent !important;
}

.csm-sidebar a {
    background-color: transparent !important;
    color: rgba(235, 248, 255, 0.94) !important;
    border: 1px solid transparent !important;
    border-radius: 13px !important;
    transition: all .30s ease !important;
}

.csm-sidebar a:hover {
    background: rgba(160, 220, 255, 0.16) !important;
    border-color: rgba(220, 245, 255, 0.30) !important;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.20),
        0 5px 20px rgba(30, 110, 190, 0.10) !important;
    transform: translateX(3px);
}

.csm-sidebar a[class*="bg-slate-200"] {
    background: rgba(90, 190, 255, 0.20) !important;
    color: #ffffff !important;
    border-color: rgba(190, 235, 255, 0.34) !important;
    box-shadow:
        inset 3px 0 0 rgba(100, 220, 255, 0.95),
        inset 0 1px 0 rgba(255,255,255,0.20) !important;
}

.csm-sidebar a i {
    color: #a9eaff !important;
}

@media (prefers-reduced-motion: reduce) {
    .csm-sidebar a {
        transition: none !important;
    }
}

/* END TRUE FULL GLASS SIDEBAR */

/* PAIDGET SIDEBAR - FINAL GLASS OVERRIDE */
html body .sidebar .sidebar-panel,
html body .sidebar .sidebar-panel > div,
html body .sidebar .sidebar-panel .bg-white,
html body .sidebar .sidebar-panel .bg-fg-1,
html body.dark .sidebar .sidebar-panel .dark\:bg-navy-750,
html body.dark .sidebar .sidebar-panel .dark\:bg-navy-700 {
    background: rgba(90, 175, 235, 0.13) !important;
    background-color: rgba(90, 175, 235, 0.13) !important;
    background-image: none !important;
    -webkit-backdrop-filter: blur(32px) saturate(180%) !important;
    backdrop-filter: blur(32px) saturate(180%) !important;
}

html body .sidebar .sidebar-panel {
    border-right: 1px solid rgba(210, 240, 255, 0.35) !important;
    box-shadow: 8px 0 35px rgba(30, 100, 180, 0.12) !important;
}

html body .sidebar .csm-sidebar {
    background: transparent !important;
}

html body .sidebar .csm-sidebar a {
    color: #eaf7ff !important;
}

html body .sidebar .csm-sidebar a:hover {
    background: rgba(130, 210, 255, 0.18) !important;
    border-color: rgba(220, 245, 255, 0.32) !important;
}

html body .sidebar .csm-sidebar a[class*="bg-slate-200"] {
    background: rgba(90, 190, 255, 0.22) !important;
    border-color: rgba(190, 235, 255, 0.35) !important;
}

/* END FINAL GLASS OVERRIDE */


/* PAIDGET MOBILE BOTTOM NAV - CLEAN ICON ONLY */
@media screen and (max-width: 768px) {
    .csm-bottom-nav {
        height: 52px !important;
        min-height: 52px !important;
        background: transparent !important;
        background-color: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }

    .csm-bottom-nav ul {
        height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    .csm-bottom-nav ul li {
        height: 100% !important;
        min-width: 0 !important;
        flex: 1 1 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    .csm-bottom-nav ul li > a {
        width: 100% !important;
        height: 100% !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        outline: 0 !important;
        box-shadow: none !important;
        filter: none !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }

    .csm-bottom-nav ul li > a::before,
    .csm-bottom-nav ul li > a::after {
        display: none !important;
        content: none !important;
    }

    .csm-bottom-nav .nav-label {
        display: none !important;
    }

    .csm-bottom-nav ul li > a svg {
        width: 26px !important;
        height: 26px !important;
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        filter: none !important;
    }

    .csm-bottom-nav ul li > a i {
        margin: 0 !important;
        font-size: 22px !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }
}
/* END CLEAN MOBILE BOTTOM NAV */


/* PAIDGET MOBILE OFFER PREVIEW */
.mobile-offer-preview { display: none !important; }

@media screen and (max-width: 767px) {
    .mobile-offer-preview {
        display: flex !important;
        flex-flow: row nowrap !important;
        width: 100% !important;
        max-width: 100% !important;
        gap: 12px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        padding: 12px 4px 18px !important;
        margin: 0 0 14px !important;
        box-sizing: border-box !important;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        touch-action: pan-x;
    }

    .mobile-offer-preview-item {
        display: block !important;
        flex: 0 0 260px !important;
        width: 260px !important;
        min-width: 260px !important;
        height: 150px !important;
        overflow: hidden !important;
        border-radius: 14px !important;
    }

    .mobile-offer-preview-item img {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        border-radius: 14px !important;
    }

    .old-offer-preview {
        display: none !important;
    }
}