/* /home/eservers/public_html/assets/css/function-new.css */
:root {
    --primary-color: #000036;
    --secondary-color: #d0142c; /* Orange Buy Now Button */
    --prisec-color: #f08c22; /* Orange Buy Now Button */

    --price-green: #128518;
    --card-bg: #eef1f6;
    --card-border: #e0e5ec;
    --track-color: #e0e0e0;
}

/* ===== CONTAINER OVERRIDE FOR 1600px WIDTH ===== */
/* This forces the parent container to expand to 1600px instead of the global default */
.g-new-product-pricing-table-container .container {
    max-width: 1600px !important;
    width: 100%;
    padding: 0 20px;
    margin: 0 auto;
}

/* ===== LAYOUT ===== */
.filter-and-table-layout { 
    display: grid; 
    grid-template-columns: 400px 1fr; /* Widened sidebar for 1600px screens */
    gap: 40px; /* Increased gap for better breathing room */
    align-items: start; 
    margin-top: 30px; 
}
.filter-column { grid-column: 1; position: sticky; top: 110px; }
.table-column { grid-column: 2; min-width: 0; }
.g-new-product-pricing-table-tbody { 
    display: grid; 
    grid-template-columns: repeat(2, 1fr); 
    gap: 30px; /* Slightly larger gap between cards */
    align-items: start; 
}

/* ===== SIDEBAR FILTER STYLES ===== */
.common-section { 
    max-width: 100%; 
    border-radius: 8px; 
    background-color: white; 
    border: 1px solid var(--card-border); 
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); 
    padding-top: 0px !important;
}
.dark-bg-header { 
    background-color: var(--primary-color); 
    color: white; 
    padding: 18px 20px; 
    border-radius: 0; 
    font-size: 1.25rem; 
    font-weight: 700; 
    display: flex; 
    align-items: center; 
    gap: 10px; 
    margin: 0; 
}
.section-main-layout {
    padding: 25px 20px;
    max-height: calc(100vh - 185px);
    overflow-y: auto; /* 'auto' is cleaner than 'scroll' because it hides the bar when not needed */
    box-sizing: border-box; /* Forces padding to stay INSIDE the max-height limit */
}
/* Optional: Make the sidebar scrollbar look modern and match your dark blue theme */
.section-main-layout::-webkit-scrollbar {
    width: 6px;
}
.section-main-layout::-webkit-scrollbar-track {
    background: transparent;
}
.section-main-layout::-webkit-scrollbar-thumb {
    background: #cbd5e1; 
    border-radius: 10px;
}
.section-main-layout::-webkit-scrollbar-thumb:hover {
    background: var(--primary-color);
}
#resetFunc.dark-btn { 
    background-color: var(--primary-color); 
    color: white; 
    padding: 12px; 
    border-radius: 6px; 
    margin-bottom: 30px; 
    font-weight: 600; 
    cursor: pointer; 
    border: none; 
    width: 100%; 
    transition: 0.2s; 
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}
#resetFunc.dark-btn:hover { background-color: #1a1a4a; }

.product-filtering { margin-bottom: 25px; }
.product-filtering-title { 
    color: var(--primary-color); 
    font-weight: 800; 
    font-size: 15px; 
    margin-bottom: 15px; 
    display: flex; 
    align-items: center; 
    gap: 10px; 
    border-top: 1px solid #eee; 
    padding-top: 20px; 
}
.product-filtering:first-child .product-filtering-title { border-top: none; padding-top: 0; }

.filter-common-container { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.filter-common-btn { 
    background-color: #4c87b1; 
    border: 1px solid #dce1e8; 
    padding: 10px 12px; 
    border-radius: 6px; 
    cursor: pointer; 
    font-size: 13px; 
    font-weight: 600; 
    color: white; 
    transition: 0.2s; 
}
 .filter-common-btn:hover { 
    background-color: var(--primary-color); 
    color: white; 
    border-color: var(--primary-color); 
}

.filter-common-btn.active{
 background-color: #4c87b1; 
    color: white; 
    border-color: #4c87b1; 
}
/* Range Slider */
.range-slider-container { padding: 35px 10px 15px 10px; position: relative; }
.range-slider { position: relative; height: 20px; display: flex; align-items: center; width: 100%; }
.range-track-background { position: absolute; width: 100%; height: 6px; background: var(--track-color); border-radius: 5px; top: 50%; transform: translateY(-50%); z-index: 0; }
.range-track-active { position: absolute; height: 6px; background: var(--primary-color); border-radius: 5px; top: 50%; transform: translateY(-50%); z-index: 1; }
.range-slider input[type="range"] { position: absolute; width: 100%; height: 100%; background: transparent; appearance: none; pointer-events: none; z-index: 2; margin: 0; padding: 0; }
.range-slider input[type="range"]::-webkit-slider-thumb { appearance: none; width: 20px; height: 20px; background: #ffffff; border: 3px solid var(--primary-color); border-radius: 50%; cursor: grab; pointer-events: all; box-shadow: 0 2px 5px rgba(0,0,0,0.2); }
.range-value-bubble { position: absolute; background: var(--primary-color); color: #ffffff; padding: 4px 8px; border-radius: 4px; font-size: 12px; font-weight: 600; text-align: center; top: -30px; transform: translateX(-50%); z-index: 3; }

/* ===== PRODUCT GRID & CARDS ===== */
.group-header-bar { 
    background: var(--primary-color); 
    color: #fff; 
    padding: 10px 20px; 
    text-align: center; 
    font-size: 22px; 
    font-weight: 800; 
    border-radius: 0px; 
    grid-column: 1 / -1; 
    margin-bottom: 5px; 
}

.g-new-product-pricing-table-tbody-row { 
    background: var(--card-bg); 
    border: 1px solid var(--card-border); 
    border-radius: 12px; 
    padding: 25px; 
    display: flex; 
    flex-direction: column; 
    gap: 18px; 
    box-shadow: 0 4px 10px rgba(0,0,0,0.03); 
    transition: transform 0.2s, box-shadow 0.2s; 
}
.g-new-product-pricing-table-tbody-row:hover { 
    transform: translateY(-3px); 
    box-shadow: 0 8px 20px rgba(0,0,0,0.08); 
}

/* Card Top Row */
.card-top { display: flex; justify-content: space-between; align-items: flex-start; }
.card-top-left { display: flex; flex-direction: column; gap: 10px; max-width: 60%; }
.product-name { font-size: 26px; font-weight: 700; color: var(--primary-color); margin: 0; line-height: 1.2; }
.refcode { border: 1px solid var(--primary-color); color: var(--primary-color); padding: 4px 8px; font-size: 13px; font-weight: 700; border-radius: 4px; width: max-content; }

.card-top-right { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.flag-city { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 15px; color: var(--primary-color); }

/* --- UPDATED FLAG ICON STYLES --- */
.city-flag-icon { 
    width: 100%;
    max-width: 40px !important;
    height: auto;
    object-fit: contain;
    display: block; 
}

.price-new { color: var(--price-green); font-weight: 900; font-size: 42px; display: flex; align-items: baseline; }
.price-currency { font-size: 40px; margin-right: 2px; }
.price-mo { font-size: 20px; margin-left: 2px; }

/* Middle Specs Box (White) - UPDATED FOR NEW DESIGN */
.card-specs-box { 
    background: #ffffff;
    padding: 0; /* Removed padding to make borders touch edges */
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0; /* Removed gap */
    border: 1px solid var(--card-border);
    font-size: 20px;
    font-weight: 900;
    border-radius: 12px;
    text-align: left !important;
    overflow: hidden; /* Ensures borders stay within rounded corners */
}

.spec-cell { 
    display: flex; 
    flex-direction: column; 
    gap: 8px; 
    padding: 16px 20px; /* Padding moved inside cells */
}

/* Inner borders for 2x2 grid */
.spec-cell:nth-child(1),
.spec-cell:nth-child(2) {
    border-bottom: 1px solid var(--card-border);
}

.spec-cell:nth-child(1),
.spec-cell:nth-child(3) {
    border-right: 1px solid var(--card-border);
}

.spec-title { font-size: 11px; color: #777; font-weight: 800; text-transform: uppercase; display: flex; align-items: center; gap: 6px; }
.spec-title i { font-size: 12px; }
.spec-val { font-size: 16px; font-weight: 800; color: #1a1a1a; line-height: 1.3; } /* Changed color to dark gray */

/* Bottom Button */
.g-new-product-pricing-table-data-btn { 
    background: var(--prisec-color);
    color: #fff; 
    width: 100%; 
    padding: 16px; 
    border-radius: 8px; 
    text-align: center; 
    font-weight: 800; 
    font-size: 18px; 
    text-decoration: none; 
    border: none; 
    cursor: pointer; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    gap: 10px; 
    transition: 0.2s; 
}

.g-new-product-pricing-table-data-btn:hover {
    background: var(--primary-color);
    color: white;
}

.product-filtering-container {
    padding: 0rem;
}

.pr-fill{
    color: #d0142c;
}

/* ===== RESPONSIVE ===== */

/* 1. Large Laptops (1400px දක්වා) */
@media (max-width: 1400px) {
    .filter-and-table-layout { 
        grid-template-columns: 300px 1fr; /* Filter එකේ පළල ටිකක් අඩු කරනවා */
        gap: 30px; 
    }
}

/* 2. Tablets & Small Laptops (1200px සහ ඊට අඩු) - Filter එක උඩට ගැනීම */
@media (max-width: 1200px) {
    .filter-and-table-layout { 
        display: flex; 
        flex-direction: column; /* එක පේළියට එකක් එන විදියට හදනවා */
        gap: 20px;
    }
    .filter-column { 
        position: relative; /* Sticky ගතිය අයින් කරනවා */
        top: 0; 
        width: 100%; /* Filter එක Screen එකේ පළලටම හදනවා */
        margin-bottom: 10px; 
    }
    .section-main-layout {
        max-height: 350px; /* Filter list එක ගොඩක් දිග නම් scroll වෙන්න පොඩි box එකක් කරනවා */
        overflow-y: auto;
    }
    .table-column {
        width: 100%;
    }
}

/* 3. Mobile Landscape & Small Tablets (992px සහ ඊට අඩු) - Cards පේළියට එකක් කිරීම */
@media (max-width: 992px) {
    .g-new-product-pricing-table-tbody { 
        grid-template-columns: 1fr; /* Card එකක් සම්පූර්ණ පළලට හදනවා */
    }
    .product-name { font-size: 20px; }
    .price-new { font-size: 36px; }
}

/* 4. Mobile Phones (480px සහ ඊට අඩු) */
@media (max-width: 480px) {
    .card-top { flex-direction: column; gap: 15px; }
    .card-top-right { align-items: flex-start; }
    .price-new { font-size: 30px; }
    .g-new-product-pricing-table-tbody-row { padding: 15px; }

    /* Mobile එකට Spec Box එකේ Design එක */
    .card-specs-box { 
        grid-template-columns: 1fr; 
    }
    
    .spec-cell {
        border-right: none !important; /* දකුණු පැත්තේ border අයින් කරනවා */
        border-bottom: 1px solid var(--card-border); /* යටට border එකක් දානවා */
    }
    
    .spec-cell:last-child {
        border-bottom: none; /* අන්තිම එකේ යට border එක අයින් කරනවා */
    }
}