/* /home/epyhost/public_html/assets/css/function-new.css */

:root {
    --epy-blue: #3730a3 !important; 
    --epy-blue-hover: #312e81 !important;
    --epy-bg: #e2e8f0 !important; 
    --epy-card-bg: #ffffff !important;
    --epy-border: #cbd5e1 !important; 
    --epy-text-dark: #020617 !important; 
    --epy-text-muted: #334155 !important; 
    --navy: #012e65;
    --navy-dark: #011f47;
    --navy-mid: #023a7d;
    --blue: #48a0d8;
    --blue-light: #6bb5e3;
    --blue-dim: rgba(72, 160, 216, 0.12);
    --white: #ffffff;
    --black: #000000;
    --surface: #f4f7fc;
    --surface-2: #eef2f9;
    --border: #dde4f0;
    --text-body: #1a2740;
    --text-muted: #637088;
    --text-light: #6c7c91;
    --card-shadow: 0 2px 12px rgba(1, 46, 101, 0.07), 0 1px 3px rgba(1, 46, 101, 0.05);
    --card-shadow-hover: 0 8px 32px rgba(1, 46, 101, 0.14), 0 2px 8px rgba(1, 46, 101, 0.08);
    --transition: 0.2s cubic-bezier(0.4,0,0.2,1);
}

/* =========================================
   1. LAYOUT & CONTAINERS
========================================= */
.g-new-product-pricing-table-container {
    background: var(--epy-bg) !important;
    margin: 0px auto !important;
    padding: 40px 20px !important;
    height: auto !important;
    overflow: visible !important;
    box-sizing: border-box !important;
}

.g-new-product-pricing-table-wrapper,
.epy-wrapper {
    max-width: 1600px !important;
    margin: 0 auto !important;
    height: auto !important;
    overflow: visible !important;
    box-sizing: border-box !important;
    font-family: 'Inter', sans-serif !important;
}

/* =========================================
   2. TOP SEARCH BAR
========================================= */
.epy-top-bar { 
    position: relative !important; 
    margin-bottom: 35px !important; 
    max-width: 850px !important; 
    margin-left: auto !important; 
    margin-right: auto !important;
}
.search-icon { 
    position: absolute !important; 
    left: 25px; 
    top: 50%; 
    transform: translateY(-50%) !important; 
    color: #94a3b8 !important; 
    font-size: 18px !important; 
    z-index: 10 !important;
    transition: color 0.3s ease !important;
}
.epy-top-bar input { 
    width: 100% !important; 
    padding: 18px 25px 18px 55px !important; 
    border: 2px solid transparent !important; 
    border-radius: 50px !important; 
    font-family: 'Inter', sans-serif !important;
    font-size: 16px !important; 
    font-weight: 500 !important;
    outline: none !important; 
    background: #ffffff !important; 
    color: var(--epy-text-dark) !important; 
    box-shadow: 0 10px 30px rgba(2, 7, 62, 0.06) !important; 
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; 
}
.epy-top-bar input:focus { 
    border-color: var(--epy-blue) !important; 
    box-shadow: 0 15px 35px rgba(55, 48, 163, 0.15) !important; 
    transform: translateY(-2px) !important;
}

/* =========================================
   3. SIDEBAR FILTERS (DARK THEME)
========================================= */
.epy-main-layout { 
    display: grid !important; 
    /* UPDATED: 260px filter column on the left, flexible product column on the right */
    grid-template-columns: 260px minmax(0, 1fr) !important;
    gap: 30px !important; 
    align-items: start !important; 
    overflow: visible !important; 
}

.epy-results {
    /* UPDATED: Shifted to the right */
    order: 2 !important; 
}

.epy-filters {
    background: #0f172a !important; 
    border: 1px solid #1e293b !important;
    border-radius: 16px !important;
    padding: 25px !important;
    box-shadow: 0 10px 30px rgba(2, 7, 62, 0.08) !important;
    order: 1 !important; 
    
    align-self: start !important; 
    
    /* NEW: Limits height to the screen size and enables scrolling */
    max-height: calc(100vh - 140px) !important; 
    overflow-y: auto !important; 
    
    position: -webkit-sticky !important; 
    position: sticky !important;
    top: 120px !important; 
    z-index: 50 !important; 
}

/* Custom Dark Scrollbar for the Sidebar */
.epy-filters::-webkit-scrollbar {
    width: 6px !important;
}
.epy-filters::-webkit-scrollbar-track {
    background: #0f172a !important; 
    border-radius: 10px !important;
}
.epy-filters::-webkit-scrollbar-thumb {
    background: #334155 !important; 
    border-radius: 10px !important;
}
.epy-filters::-webkit-scrollbar-thumb:hover {
    background: #475569 !important; 
}

.epy-filter-head { 
    display: flex !important; 
    justify-content: space-between !important; 
    align-items: center !important; 
    margin-bottom: 25px !important; 
    padding-bottom: 15px !important;
    border-bottom: 1px solid #1e293b !important;
}
.epy-filter-head h3 { font-family: 'Inter', sans-serif !important; font-size: 15px !important; font-weight: 800 !important; color: #f8fafc !important; margin: 0 !important; letter-spacing: 0.5px !important;}
#epy-reset { 
    background: transparent !important; 
    border: 1px solid #334155 !important; 
    color: #94a3b8 !important; 
    cursor: pointer !important; 
    font-family: 'Inter', sans-serif !important;
    font-size: 12px !important; 
    font-weight: 600 !important; 
    padding: 6px 12px !important; 
    border-radius: 6px !important;
    display: flex !important; 
    align-items: center !important; 
    gap: 6px !important; 
    transition: 0.2s ease !important;
}
#epy-reset:hover { background: #1e293b !important; color: #f8fafc !important; border-color: #475569 !important;}

.epy-filter-block { margin-bottom: 25px !important; }
.epy-filter-block:last-child { margin-bottom: 0 !important; }
.epy-filter-block h4 { font-family: 'Inter', sans-serif !important; margin: 0 0 14px 0 !important; font-size: 12px !important; font-weight: 700 !important; color: #64748b !important; text-transform: uppercase !important; letter-spacing: 0.5px !important;}

.epy-price-inputs { display: flex !important; gap: 10px !important; align-items: center !important; }
.epy-price-inputs input { font-family: 'Inter', sans-serif !important; width: 100% !important; padding: 12px 10px !important; border-radius: 8px !important; border: 1px solid #334155 !important; text-align: center !important; color: #f8fafc !important; font-size: 14px !important; background: #1e293b !important; font-weight: 600 !important; transition: 0.2s !important;}
.epy-price-inputs input:focus { border-color: #3b82f6 !important; background: #0f172a !important; outline: none !important;}
.separator { color: #475569 !important; font-weight: 800 !important; }

.epy-filter-block label { 
    display: flex !important; 
    align-items: center !important; 
    margin-bottom: 6px !important; 
    font-family: 'Inter', sans-serif !important;
    font-size: 13px !important; 
    cursor: pointer !important; 
    position: relative !important; 
    padding: 8px 8px 8px 34px !important; 
    color: #cbd5e1 !important; 
    font-weight: 500 !important; 
    border-radius: 8px !important;
    transition: background 0.2s ease, color 0.2s ease !important;
}
.epy-filter-block label:hover {
    background: #1e293b !important;
    color: #f8fafc !important;
}

.epy-filter-block input[type="checkbox"], .epy-filter-block input[type="radio"] { position: absolute !important; opacity: 0 !important; cursor: pointer !important; }
.checkmark-box, .checkmark-radio { position: absolute !important; top: 50% !important; transform: translateY(-50%) !important; left: 8px !important; height: 18px !important; width: 18px !important; background-color: transparent !important; border: 2px solid #475569 !important; border-radius: 4px !important; transition: 0.2s ease !important;}
.checkmark-radio { border-radius: 50% !important; }
.epy-filter-block input:checked ~ .checkmark-box, .epy-filter-block input:checked ~ .checkmark-radio { background-color: #3b82f6 !important; border-color: #3b82f6 !important; }
.checkmark-box:after { content: "" !important; position: absolute !important; display: none !important; left: 4px !important; top: 1px !important; width: 5px !important; height: 10px !important; border: solid white !important; border-width: 0 2px 2px 0 !important; transform: rotate(45deg) !important; }
.checkmark-radio:after { content: "" !important; position: absolute !important; display: none !important; left: 4px !important; top: 4px !important; width: 6px !important; height: 6px !important; background: white !important; border-radius: 50% !important; }
.epy-filter-block input:checked ~ .checkmark-box:after, .epy-filter-block input:checked ~ .checkmark-radio:after { display: block !important; }

/* =========================================
   3.5 SORTING AND COUNT BAR 
========================================= */
.epy-sorting { 
    display: flex !important; 
    justify-content: space-between !important; 
    align-items: center !important; 
    margin-bottom: 24px !important; 
    background: transparent !important;
    padding: 0px 0px 10px 0px !important;
    border-radius: 0px !important;
    box-shadow: none !important;
    border: none !important;
}
#res-count {
    font-family: 'Inter', sans-serif !important;
    padding: 10px 16px 10px 16px !important;
    border-radius: 8px !important;
    border: 1px solid #cbd5e1 !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    color: var(--epy-text-dark) !important;
    background-color: #fff !important;
}
#sort-select { 
    font-family: 'Inter', sans-serif !important;
    padding: 10px 40px 10px 16px !important; 
    border-radius: 8px !important; 
    border: 1px solid #cbd5e1 !important; 
    font-weight: 600 !important; 
    font-size: 14px !important; 
    color: var(--epy-text-dark) !important; 
    cursor: pointer !important; 
    background-color: #fff !important; 
    appearance: none !important; 
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%2364748b' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E") !important; 
    background-repeat: no-repeat !important; 
    background-position: right 14px center !important; 
    transition: 0.2s ease !important;
    outline: none !important;
}
#sort-select:focus {
    border-color: var(--epy-blue) !important;
    box-shadow: 0 0 0 3px rgba(55, 48, 163, 0.1) !important;
}

/* =========================================
   4. PRODUCT GRID & CARDS 
========================================= */
.epy-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 24px !important;
}

.epy-product-card {
    background: #ffffffc9 !important;
    border-radius: 16px !important;
    border: 1px solid var(--epy-border) !important;
    padding: 0px !important;
    display: flex !important;
    flex-direction: column !important;
    box-shadow: var(--card-shadow) !important;
    transition: all 0.2s ease !important;
    position: relative !important;
}
.epy-product-card:hover { 
    transform: translateY(-4px) !important; 
    box-shadow: var(--card-shadow-hover) !important; 
    border-color: var(--epy-blue) !important;
    z-index: 10 !important;
}

/* Top Area: Title (Row 1) & GPU Box (Row 2) */
.card-top-section {
    display: flex !important;
    flex-direction: column !important; /* Stacks the rows vertically */
    align-items: stretch !important;
    padding: 20px 20px 0 !important;
    gap: 12px !important; /* Space between title row and GPU row */
}

.card-title-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    gap: 15px !important; /* Space between text and badge */
}

.card-title {
    font-family: 'Poppins', sans-serif !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    color: var(--navy) !important;
    line-height: 1.3 !important;
    margin: 0 !important;
    flex: 1 !important; /* Allows long text to wrap safely */
}

.card-gpu-row {
    display: flex !important;
    justify-content: flex-end !important; /* Pushes the yellow box to the right */
    width: 100% !important;
}

/* Badges */
.grid-badges { 
    display: flex !important; 
    margin: 0 !important; 
    flex-shrink: 0 !important; /* Prevents the GPU/Gaming tag from squishing */
}
.grid-badge { font-family: 'Inter', sans-serif !important; padding: 0px 10px !important; border-radius: 4px !important; font-size: 10px !important; font-weight: 700 !important; display: inline-block !important; text-transform: uppercase !important; border: 1px solid var(--epy-border) !important; color: var(--epy-text-muted) !important; }

/* Custom Badge Colors */
.badge-gpu { border-color: #bbf7d0 !important; background: #f0fdf4 !important; color: #16a34a !important; }
.badge-storage { border-color: #bfdbfe !important; background: #eff6ff !important; color: #2563eb !important; }
.badge-gaming { border-color: #e9d5ff !important; background: #faf5ff !important; color: #9333ea !important; }

.grid-gpu-model { 
    font-family: 'Inter', sans-serif !important;
    font-size: 12px !important; 
    font-weight: 600 !important; 
    color: var(--epy-text-dark) !important; 
    display: inline-flex !important; 
    align-items: center !important; 
    background: #fefce8 !important; 
    padding: 0px 8px !important; 
    border-radius: 4px !important; 
    border: 1px solid #fef08a !important; 
    margin: 0 !important; 
}
.grid-gpu-model i { margin-right: 6px !important; color: #fbbf24 !important;}

/* Vertical Specs List (Flat Design) */
.grid-specs-list {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 1px !important;
    margin: 16px 0 0 !important;
    background: var(--border) !important;
    border-top: 1px solid var(--border) !important;
}
.grid-spec-item:nth-child(1) {
    border-radius: 0 !important;
}
.grid-spec-item {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    padding: 12px 14px !important;
    background: var(--white) !important;
    position: relative !important;
}
.grid-spec-item > i {
    font-size: 13px !important;
    color: var(--blue) !important;
    margin-top: 2px !important;
    flex-shrink: 0 !important;
    width: 14px !important;
    text-align: center !important;
}
.spec-details {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    min-width: 0 !important;
}
.spec-label {
    font-family: 'Inter', sans-serif !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.07em !important;
    color: var(--text-light) !important;
    line-height: 1 !important;
}
.spec-value {
    font-family: 'Poppins', sans-serif !important;
    font-size: 15px !important; 
    font-weight: 600 !important;
    color: var(--text-body) !important;
    line-height: 1.3 !important;
    white-space: normal !important; /* FIXED: Changed from nowrap to normal to allow wrapping */
    word-wrap: break-word !important; /* FIXED: Ensures long contiguous strings break safely */
    overflow-wrap: break-word !important;
}

/* Features */
.grid-features-area {
    padding: 14px 16px !important;
    border-top: 1px solid var(--border) !important;
}
.included-label {
    font-family: 'Inter', sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: var(--text-light) !important;
    display: block !important;
    margin-bottom: 5px !important;
}
.grid-features-list {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 5px !important;
}
.feature-tag {
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--navy) !important;
    background: var(--surface-2) !important;
    border: 1px solid var(--border) !important;
    border-radius: 5px !important;
    padding: 3px 9px !important;
    position: relative !important;
    cursor: default !important;
    transition: background var(--transition), border-color var(--transition), color var(--transition) !important;
    white-space: nowrap !important;
}
.feature-tag.has-tooltip:hover {
    background: var(--navy) !important;
    color: var(--white) !important;
    border-color: var(--navy) !important;
}

/* Bottom action */
.bottom-action-wrapper {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 14px 16px 16px !important;
    margin-top: auto !important;
    border-top: 1px solid var(--border) !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
}
.grid-price-area { display: flex !important; flex-direction: column !important; gap: 3px !important; }
.grid-price-row { display: flex !important; align-items: baseline !important; gap: 1px !important; }
.grid-currency {
    font-family: 'Poppins', sans-serif !important;
    font-size: 24px !important; /* INCREASED FROM 15px */
    font-weight: 600 !important;
    color: var(--navy) !important;
    line-height: 1 !important;
    padding-top: 3px !important;
}
.grid-price {
    font-family: 'Poppins', sans-serif !important;
    font-size: 40px !important; /* INCREASED FROM 28px */
    font-weight: 800 !important;
    color: var(--navy) !important;
    line-height: 1 !important;
}
.grid-period {
    font-family: 'Inter', sans-serif !important;
    font-size: 16px !important; /* INCREASED FROM 12px */
    color: var(--text-muted) !important;
    font-weight: 500 !important;
    align-self: flex-end !important;
    margin-bottom: 2px !important;
}
.grid-cpanel-price {
    font-family: 'Inter', sans-serif !important;
    font-size: 15px !important;
    color: var(--text-muted) !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    font-weight: 500 !important;
}
.grid-cpanel-price i { font-size: 15px !important; color: #f96c00 !important; }
.cpanel-logo-text { font-weight: 800 !important; font-style: italic !important; color: #f96c00 !important; letter-spacing: -0.5px !important; }

/* CTA Button */
.epy-buy-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    background: var(--navy) !important;
    color: var(--white) !important;
    text-decoration: none !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    padding: 10px 16px !important;
    border-radius: 9px !important;
    white-space: nowrap !important;
    transition: background var(--transition), transform var(--transition), box-shadow var(--transition) !important;
    border: none !important;
    cursor: pointer !important;
}
.epy-buy-btn:hover {
    background: var(--blue) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 16px rgba(72,160,216,0.4) !important;
    color: var(--white) !important;
}
.epy-buy-btn:active { transform: translateY(0) !important; }
.epy-buy-btn i { font-size: 11px !important; }

/* Meta footer */
.grid-meta-footer {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 9px 16px !important;
    background: var(--surface) !important;
    border-top: 1px solid var(--border) !important;
    border-radius: 0 0 16px 16px !important;
}

.meta-loc {
    font-family: 'Inter', sans-serif !important;
    font-size: 12px !important;
    color: var(--text-muted) !important;
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    font-weight: 500 !important;
}
.meta-loc i { color: var(--blue) !important; font-size: 10px !important; }

.meta-id {
    font-family: 'Poppins', sans-serif !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    color: #637088 !important;
}

/* --- NEW COPY PID STYLES --- */
.copy-pid {
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    transition: color var(--transition) !important;
}

.copy-pid:hover {
    color: var(--blue) !important;
}

.copy-pid i {
    font-size: 11px !important;
    transition: color var(--transition) !important;
}

/* Responsive adjustments */
@media screen and (max-width: 1500px) {
    /* Triggers 2 columns only when screen is smaller than 1500px */
    .epy-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media screen and (max-width: 1024px) {
    .epy-main-layout { grid-template-columns: minmax(0, 1fr) !important; }
    .epy-filters { 
        position: relative !important; 
        top: 0 !important; 
        margin-bottom: 20px !important; 
        order: 1 !important; 
    }
    .epy-results {
        order: 2 !important; 
    }
    .epy-grid { grid-template-columns: minmax(0, 1fr) !important; }
}
@media screen and (max-width: 600px) {
    .bottom-action-wrapper {
        flex-direction: column !important;
        gap: 16px !important;
        padding: 20px 20px !important;
        justify-content: center !important;
        align-items: center !important;
    }
    .grid-btn-area { width: 100% !important; }
    .epy-buy-btn { width: 100% !important; }
}
@media screen and (max-width: 450px) {
    .epy-sorting {
        display: flex !important;
        flex-direction: column;
        gap: 20px;
    }
}

/* =========================================
   5. TOOLTIPS & INDICATORS 
========================================= */
.has-tooltip { cursor: help !important; position: relative !important; }

/* Question Mark Indicators */
.grid-gpu-model.has-tooltip::after, .grid-spec-item.has-tooltip .spec-label::after, .feature-tag.has-tooltip::after {
    content: "\f059" !important;
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
    margin-left: 6px !important;
    color: #cbd5e1 !important;
    font-size: 12px !important;
    display: inline-block !important;
}

/* Tooltip Boxes */
.custom-tooltip { visibility: hidden !important; opacity: 0 !important; position: absolute !important; bottom: 130% !important; left: 50% !important; transform: translateX(-50%) !important; background: #0f172a !important; color: white !important; padding: 14px !important; border-radius: 8px !important; width: max-content !important; min-width: 180px !important; z-index: 100 !important; pointer-events: none !important; box-shadow: 0 10px 20px rgba(0,0,0,0.2) !important; border: 1px solid #1e293b !important; transition: 0.2s !important; }
.custom-tooltip::after { content: "" !important; position: absolute !important; top: 100% !important; left: 50% !important; margin-left: -6px !important; border-width: 6px !important; border-style: solid !important; border-color: #0f172a transparent transparent transparent !important; }
.has-tooltip:hover .custom-tooltip { visibility: visible !important; opacity: 1 !important; bottom: 140% !important; }

.custom-tooltip.tooltip-down { bottom: auto !important; top: 120% !important; }
.custom-tooltip.tooltip-down::after { top: auto !important; bottom: 100% !important; border-color: transparent transparent #0f172a transparent !important; }
.has-tooltip:hover .custom-tooltip.tooltip-down { bottom: auto !important; top: 130% !important; }

/* Tooltip Internals */
.tt-title { font-family: 'Inter', sans-serif !important; font-weight: 700 !important; margin-bottom: 10px !important; border-bottom: 1px solid #334155 !important; padding-bottom: 8px !important; color: #94a3b8 !important; font-size: 11px !important; text-transform: uppercase !important; }
.tt-row {
    font-family: 'Inter', sans-serif !important;
    display: flex !important;
    justify-content: space-between !important;
    font-size: 10px !important;
    margin-bottom: 0px !important;
    color: #e2e8f0 !important;
    font-weight: 500 !important;
}
.tt-price { color: #818cf8 !important; font-weight: 700 !important; margin-left: 15px !important; }
.tt-more { font-family: 'Inter', sans-serif !important; font-size: 11px !important; text-align: center !important; color: #64748b !important; margin-top: 10px !important; font-style: italic !important; border-top: 1px dashed #334155 !important; padding-top: 8px !important; }

/* =========================================
   8. UTILITIES & LOAD MORE FIX
========================================= */
.hidden { display: none !important; }
#no-results.hidden { display: none !important; }

#epy-load-more {
    font-family: 'Poppins', sans-serif !important;
    font-weight: 600 !important;
    max-width: 250px !important;
    margin: 0 auto !important;
    background: transparent !important;
    color: var(--epy-blue) !important;
    border: 2px solid var(--epy-blue) !important;
    box-shadow: none !important;
}

#epy-load-more:hover {
    background: var(--epy-blue) !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
}

/* =========================================
   10. EMPTY STATE (NO RESULTS)
========================================= */
.epy-empty-state {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    background: #ffffff !important;
    border: 2px dashed #cbd5e1 !important;
    border-radius: 16px !important;
    padding: 80px 20px !important;
    margin-top: 10px !important;
    box-shadow: 0 10px 30px rgba(2, 7, 62, 0.02) !important;
    width: 100% !important;
}

.epy-empty-icon {
    width: 80px !important;
    height: 80px !important;
    background: #f8fafc !important;
    color: #94a3b8 !important;
    font-size: 32px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 20px !important;
    border: 1px solid #e2e8f0 !important;
}

.epy-empty-state h3 {
    font-family: 'Poppins', sans-serif !important;
    font-size: 24px !important;
    font-weight: 700 !important;
    color: var(--epy-text-dark) !important;
    margin: 0 0 12px 0 !important;
}

.epy-empty-state p {
    font-family: 'Inter', sans-serif !important;
    font-size: 15px !important;
    color: #64748b !important;
    font-weight: 500 !important;
    margin: 0 0 30px 0 !important;
    max-width: 450px !important;
    line-height: 1.6 !important;
}

.epy-reset-btn-large {
    width: auto !important;
    padding: 14px 35px !important;
    font-size: 15px !important;
}

/* =========================================
   ULTIMATE STICKY SIDEBAR OVERRIDE
========================================= */
/* 1. Only apply clip to the absolute root elements */
html, body {
    overflow-x: clip !important;
}

/* 2. FORCE internal wrappers to be entirely visible. 
   DO NOT put overflow-x here, or it will break sticky! */
.page-wrapper, 
.g-new-product-pricing-table-container, 
.g-new-product-pricing-table-wrapper, 
.epy-wrapper, 
.epy-main-layout {
    overflow: visible !important;
}