@keyframes pulse-icon-animation {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.15); 
    opacity: 0.8; 
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
      :root {
            --theme-primary: #ef8354;
            --theme-primary-darker: #e86f3a;
            --color-bg: #f8f9fa;
            --color-card-bg: #ffffff;
            --color-text-heading: #2d3748;
            --color-text-light: #718096;
            --color-border: #e2e8f0;
            --shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
            --timeline-line-color: #dbe2ef;
            --timeline-left-offset: 30px;
      
            --theme-text-dark: #1a2c4e; 
            --theme-text-muted: #9ba7b4; 
            --theme-border: #e2e8f0;
            --radius-md: 8px;
            --shadow-card: 0 8px 25px rgba(0, 0, 0, 0.08);

            --toggle-bg: #e2e8f0;
            --toggle-active-bg: #007bff; 
            --toggle-text: #718096; 
            --toggle-text-active: #ffffff; 
        }

        .city-table-container .g-redirect-table-btns {
                       font-size: 13px;
    font-weight: 600;
    padding: 6px 10px;
    border-radius: 5px;
    text-decoration: none;
    background-color: #02073e;
    color: var(--white-color);
    border: 2px solid var(--secondary-color);
}
.city-table-container .g-redirect-table-btns:hover{
    border: 2px solid white;
}
                
       
        .city-table-container .leo-layout-wrapper {
        
            display: flex; flex-direction: row; align-items: flex-start;
            gap: 25px; max-width: 1600px; margin: 0 auto; 
            position: relative;
        }
     

        /* Timeline Styles */
        .city-table-container .server-timeline { position: relative; padding: 1rem 0; }
        .city-table-container .server-timeline::before {
            content: ''; position: absolute; top: 20px; bottom: 20px;
            left: var(--timeline-left-offset); width: 4px;
            background-color: var(--timeline-line-color); border-radius: 2px;
        }
        .city-table-container .timeline-item { position: relative; margin-bottom: 2rem; }
        .city-table-container .timeline-node {
             position: absolute;
                top: 1.25rem;
                left: var(--timeline-left-offset);
                width: 15px;
                height: 230px;
                background: #e2f0ff;
                border: 4px solid #e2f0ff;
                transform: translateX(-50%);
                z-index: 2;

        }

        .city-table-container .timeline-content {
            margin-left: calc(var(--timeline-left-offset) + 25px);
            background: #fff; border: 1px solid var(--color-border);
            border-radius: 12px; box-shadow: var(--shadow);
            box-shadow: 0px 0px 10px -4px #000;

        }
        
        /* Card Internals */
        .city-table-container .item-header { padding: 1.25rem; border-bottom: 1px solid var(--color-border); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
        .header-text h4 { font-size: 23px; font-weight: 700; color: var(--theme-primary); margin: 0;}
        
        /* --- START NEW MANAGEMENT TOGGLE STYLES --- */
        .city-table-container .management-toggle { 
            width: max-content!important;
            display: flex; 
            align-items: center; 
            gap: 10px; 
            position: relative; 
        }
        .city-table-container .g-new-product-pricing-table-wrapper {
            width:100%!important;
        }

        .city-table-container .toggle-pill-container {
                width: max-content!important;
            position: relative;
            display: flex;
            background-color: var(--toggle-bg);
            border-radius: 50px;
            padding-left: 10px;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
            
        }

        .city-table-container .toggle-pill-slider {
            position: absolute;
            top: 2px;
            left: 2px;
            width: calc(50% - 2px); 
            height: calc(100% - 4px); 
            background-color: var(--toggle-active-bg);
            border-radius: 50px;
            transition: transform 0.3s ease, background-color 0.3s ease;
            z-index: 1;
        }

        .city-table-container .toggle-pill-slider.unmanaged {
            transform: translateX(100%);
        }

        .city-table-container .toggle-option {
            line-height: 15px;
            position: relative;
            flex: 1;
            text-align: center;
            padding: 8px 15px;
            font-size: 14px;
            font-weight: 600;
            color: var(--toggle-text);
            cursor: pointer;
            user-select: none;
            z-index: 2; 
            transition: color 0.3s ease;
        }

        .city-table-container .toggle-option.active {
            color: var(--toggle-text-active);
        }
       
   @media (max-width: 460px) {
    .city-table-container .toggle-option {
            font-size: 10px;
    }
    .city-table-container .toggle-pill-container {
            max-width: 180px;
    }
   }

        /* Specs */
        .city-table-container .item-specs { background: #e2f0ff; display: flex;  }
                    .city-table-container .spec { 
                        padding:15px;
                    display: flex;

                
                    align-items: flex-start;

                    flex-direction: column;

                    justify-content: flex-start;


                    text-align: center;

                    color: black;

                }
        .city-table-container .spec-details {
            display: flex;
            flex-direction: column;
        }
        .city-table-container .spec-label{
                font-size: 14px; 

              font-weight: 700;
        }
        .city-table-container  .spec-img {
                height: auto;
                width: 20px;
        }
        .city-table-container .item-footer .buy-icon{
            margin-right: 10px;
            height: auto;
                width: 30px;
        }

        .city-table-container .spec-value { font-weight: 600; color: var(--color-text-heading);text-align: left; }
        .city-table-container .spec-icon-value{

    margin-bottom: 8px;
            gap: 10px;
            display: flex;
            flex-direction: row;
            align-content: center;
            justify-content: center;
            align-items: center;
        }

        .city-table-container .spec:not(:last-child) {
    border-right: 2px solid #fff;
}
.city-table-container .spec:nth-child(1) {
    width:200px;
}
.city-table-container .spec:nth-child(2) {
    width:170px;
}
.city-table-container .spec:nth-child(3) {
    width:170px;
}

        /* Footer */

        .city-table-container .item-footer { padding: 1rem 8rem; background: #f8f9fa; border-top: 1px solid var(--color-border);  border-radius: 0 0 12px 12px; }

        .city-table-container .price-amount {  
            
            display: flex;
            font-size: 42px;
            font-weight: 800;
            color: #28bb56;
            justify-content: space-between;
        }
        .city-table-container .price-amount-unmanage {
                align-items: center;
                gap: 9px;
                display: flex;
                justify-content: flex-end;
        }

        /* Styling for the Managed Service Addition */
.city-table-container  #management-fee {
    color: #ff4757;
    font-weight: 600!important;
    font-size: 20px!important;
    margin-left: 5px;
}
.city-table-container .product-price-month {
    font-size:20px;
        /* margin-bottom: 10px; */
     color: #1a2c4e;
}

/* --- NEW TOOLTIP CSS ... */

        .city-table-container .btn-buy { font-size:18px; background: var(--theme-primary); color: white; padding: 8px 18px; border-radius: 6px; text-decoration: none; font-weight: 600; }

        @media (min-width: 768px) {

            :root { --timeline-left-offset: 40px; }
            
        }

        @media (max-width: 991px) {

            .city-table-container .leo-layout-wrapper { flex-direction: column; }

            .city-table-container .leo-filter-sidebar {
                    position: relative!important;

                        align-self: center!important;

                        margin-bottom:30px!important;
                        
                        max-width: 100%!important;

            }



            .city-table-container .leo-filter-column { width: 100%; position: relative; }

            .city-table-container .item-specs {display:grid;grid-template-columns: repeat(3, 1fr); 

            }

        }

  @media (max-width: 768px) {
            .city-table-container .item-specs { flex-direction:column; }
            .city-table-container .management-info-tooltip .tooltip-text {
                width:200px!important;
            }
            .city-table-container .g-redirect-table-btns {
            min-width: 352px;
            }

            .city-table-container .leo-filter-sidebar {
                top:20px!important;
            }
            .city-table-container .item-footer {
                    flex-direction: column;
                        gap: 15px;
            }
            .city-table-container .server-timeline .header-text h4 {
                font-size:16px!important;
            }

            .city-table-container .spec:not(:last-child) {
                border-right: none ;
            }
            .city-table-container .spec:nth-child(1){
                    width:100%;
                        border-right: 2px solid orange;
                        border-bottom: 2px solid orange;
            }
             .city-table-container .spec:nth-child(2){
                        width:100%;
                        border-bottom: 2px solid orange;
            }
            .city-table-container .spec:nth-child(3){
                    width:100%;
                        border-right: 2px solid orange;
                        border-bottom: 2px solid orange;
            }
             .city-table-container .spec:nth-child(4){
                        width:100%;
                        border-bottom: 2px solid orange;
            }
                 .city-table-container .spec:nth-child(5){
                        width:100%;
                        border-bottom: 2px solid orange;
            }
                

        }


          @media (max-width: 468px) {

            .city-table-container .item-os-logos img {
                width: 25px;
            }

            .city-table-container .price-amount{
                font-size:25px!important;
            }

            .city-table-container .item-specs { grid-template-columns: repeat(1, 1fr); }

            .city-table-container .g-redirect-table-btns {
            min-width: 292px;
            }

       .city-table-container .btn-buy {
            font-size: 14px;
            padding: 4px 4px;
            margin-bottom:10px;
       }
       .city-table-container .item-footer{
       padding:5px 10px;
            
       }
        .header-text h4{
            max-width: 300px;
        }
            .city-table-container .spec:nth-child(1){
                
                    border-right: none;
                    
            }
             .city-table-container .spec:nth-child(3){
                
                    border-right: none;
                    
            }
                 .city-table-container .server-timeline .header-text h4 {
        font-size: 14px !important;
    }

        .city-table-container .header-text {
            display: flex !important;
            align-items: center;
            gap: 10px;
            flex-direction: column;
            align-content: center;
            justify-content: center;
        }
        .city-table-container .toggle-pill-container{
            padding-left: 0px;
        }
        .city-table-container .management-toggle{
            gap:0px;
        }
        .city-table-container .item-header{
                justify-content: center;
               align-items: center;
                   gap: 25px;
        }
        .city-table-container .price-amount {
                flex-direction: column;
             align-items: center;
        }
        }

      .city-table-container .g-redirect-table-btns-div {

            margin: auto;

            display: flex;

            gap: 20px;

            align-items: center;

            justify-content: flex-start;

            flex-wrap: wrap;

            margin-bottom: 30px;

        }  



        .city-table-container .g-redirect-table-btns .fas.fa-server {

           

            margin-right: 8px;

            font-size: 16px; 

            color: #ffffff;

        }


    .city-table-container .leo-filter-sidebar {
        margin-bottom: 50px;

        max-width:380px;

        color:white; 

        background: #02073e;

        border-radius: var(--radius-md); 

        padding: 20px;

        border: 1px solid rgba(255, 255, 255, 0.1);

        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3); 

        transition: transform 0.3s ease;

        position: sticky; 

        top: 110px; 

        align-self: flex-start; 

    }


      .city-table-container .leo-content-area{



        flex-grow: 1; 

        width: 100%; 

        overflow: visible;

      
      }

    /* Sidebar Header */

   .city-table-container .leo-filter-sidebar h3 {

        font-size: 1.3rem; 

        font-weight: 800;

        color: #ffffff; /* White heading text */

        margin: 0 0 24px 0;

        padding-bottom: 5px;

        border-bottom: 2px solid var(--theme-primary); 

        display: flex;

        align-items: center;

        gap: 10px;

        letter-spacing: -0.02em;

    }

    /* Filter Group Spacing */
    .city-table-container .filter-group {

        margin-bottom: 12px; 

    }



    .city-table-container .filter-title {

        font-size: 0.85rem; 

        font-weight: 700;

        color: #ffffff; 

        text-transform: uppercase;

        letter-spacing: 0.5px;

        margin-bottom: 12px;

        display: flex;

        justify-content: space-between;

        align-items: center;

    }



    /* --- 4. BUTTONS (PILL STYLE) --- */

    .city-table-container .filter-options {

        color:var(--theme-text-dark); /* Default text color for button content */

        display: flex;

        flex-wrap: wrap;

        gap: 8px;

    }



    .city-table-container .filter-btn {

        background: rgba(255, 255, 255, 0.1); /* Semi-transparent white background */

        border: 1px solid rgba(255, 255, 255, 0.3); /* Light border */

        color: #ffffff; /* White text for base state */

        padding: 10px 18px; 

        font-size: 0.85rem;

        font-weight: 600;

        border-radius: 50px; 

        cursor: pointer;

        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);

        box-shadow: none; 

        flex-grow: 1; 
       

    }



    .city-table-container .filter-btn:hover {

        border-color: var(--theme-primary); 

        background: var(--theme-primary); /* Use theme primary color on hover */

        color: #ffffff;

        transform: translateY(-2px); 
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

    }



    .city-table-container .filter-btn.active {

        background: var(--theme-primary);

        border-color: var(--theme-primary);

        color: #ffffff;

        box-shadow: 0 4px 12px rgba(239, 131, 84, 0.3);

        transform: translateY(-1px);

    }
    
    @media (max-width: 468px) {
        .city-table-container .filter-btn {
            min-width: 45%;
            padding: 8px 12px;
            font-size: 0.8rem;
        }
    }


    /* --- 5. CUSTOM PRICE SLIDER --- */



    /* Wrapper for positioning and custom track fill */

    .city-table-container .range-slider-wrapper {

        position: relative;

        height: 30px; 

        margin: 10px 0 20px 0; 
        --range-max: 100%; 

    }



    /* Custom filled track visual (Base track is lighter on dark background) */

    .city-table-container .range-slider-wrapper::before {

        content: '';

        position: absolute;

        top: 50%;

        width: 100%;

        height: 8px; 

        background: rgba(255, 255, 255, 0.15); /* Light grey/white transparent */

        border-radius: 10px;

        transform: translateY(-50%);

        left: 0;

        z-index: 0; 

        border: 1px solid rgba(255, 255, 255, 0.3);

    }



    /* The actual range input - positioned over the custom track */

    .city-table-container .range-slider-wrapper .range-slider {

        position: absolute;

        padding: 0 10px;

        width: calc(100% + 20px);

        -webkit-appearance: none;

        left: -10px;

        background: transparent;

        margin: 0;

        top: 50%;

        transform: translateY(-50%);

        z-index:1!important;

    }



    /* 1. Track Styling (Make it invisible/transparent) */

    .city-table-container .range-slider::-webkit-slider-runnable-track {
        width: 100%; height: 8px; cursor: pointer; background: transparent; border: none; pointer-events: all; 
    }

    .city-table-container .range-slider::-moz-range-track {
        width: 100%; height: 8px; cursor: pointer; background: transparent; border: none;
    }


    /* KEY: Custom colored fill using a linear gradient on the MAX slider track */

    .city-table-container #max-price-slider::-webkit-slider-runnable-track {

        background: linear-gradient(to right, 
            var(--theme-primary) var(--range-max), 
            transparent var(--range-max) 
        );
        background-color: transparent; 
        border-radius: 10px;

    }
    .city-table-container #max-price-slider::-moz-range-track {

        background: linear-gradient(to right, 
            var(--theme-primary) var(--range-max),
            transparent var(--range-max)
        );
        background-color: transparent;
        border-radius: 10px;

    }


    /* 2. Thumb (Handle) Styling - General appearance */

    .city-table-container .range-slider-wrapper .range-slider::-webkit-slider-thumb {

        pointer-events: all!important; 
        -webkit-appearance: none;
        height: 20px; 
        width: 20px;
        border-radius: 50%;

        background: #ffffff; /* Always white for visibility against dark track */
        border: 4px solid var(--theme-primary); 

        cursor: grab;

        box-shadow: 0 4px 12px rgba(0,0,0,0.5); /* Stronger shadow against dark background */

        transition: all 0.2s;
        z-index:1!important;
        
        margin-top: -8px; 


    }



    /* Firefox Thumb */

    .city-table-container .range-slider-wrapper .range-slider::-moz-range-thumb {
        pointer-events: all!important; 

        height: 20px;
        width: 20px;
        border-radius: 50%;
        background: #ffffff;
        border: 4px solid var(--theme-primary);
        cursor: grab;
        box-shadow: 0 4px 12px rgba(0,0,0,0.5);
        transition: all 0.2s;

    }


    /* Hover and Active States */

    .city-table-container .range-slider-wrapper .range-slider::-webkit-slider-thumb:hover { 

        transform: scale(1.1); 
        box-shadow: 0 6px 15px rgba(239, 131, 84, 0.8); /* More prominent glow */

    }

    .city-table-container .range-slider:active::-webkit-slider-thumb { 

        cursor: grabbing; 
        background: var(--theme-primary); 
        border-color: var(--theme-primary); 

    }

      .city-table-container .range-slider:active::-moz-range-thumb { 

        cursor: grabbing; 
        background: var(--theme-primary); 
        border-color: var(--theme-primary); 

    }
    
    .city-table-container .price-input {
          /* Input boxes are light on the dark background */
        width: 100px; 
        padding: 8px 10px!important; 
        border: 1px solid rgba(255, 255, 255, 0.3)!important; 
        border-radius: var(--radius-md)!important; 
        background: rgba(255, 255, 255, 0.05)!important; /* Very subtle background */
        color: #ffffff!important; /* White text */
        font-weight: 700!important; 
        box-shadow: inset 0 1px 3px rgba(0,0,0,0.5); 
        transition: border-color 0.2s;
    }
    
    .city-table-container .price-input:focus {
        border-color: var(--theme-primary)!important;
        outline: none;
        box-shadow: 0 0 0 3px rgba(239, 131, 84, 0.5); 
    }


    
    .city-table-container #max-price-slider {
        z-index: 3!important; 
    }
    
    /* --- 6. RESET BUTTON --- */

   .city-table-container #reset-all-btn {

    margin-bottom:15px!important;

        width: 100%;

        padding: 8px;

        background: #02073e; /* Dark background */

        color: #ffff; /* Light red text for contrast */

        border: 2px solid #ffff;

        font-weight: 700; 

        border-radius: var(--radius-md);

        cursor: pointer;

        transition: all 0.2s;

        margin-top: 10px;

        display: flex;

        align-items: center;

        justify-content: center;

        gap: 8px;

    }

    
    
    .city-table-container #reset-all-btn:hover {

        background: #e53e3e; /* Red background on hover */
        color: white; /* White text on hover */
        border-color: #e53e3e;

    }

    
    
    .city-table-container .leo-filter-sidebar #reset-all-btn::before {

        content: '\f2ea';

        font-family: "Font Awesome 6 Free";

        font-weight: 900;

    }



    .city-table-container .timeline-item[style*="display: none"] { display: none !important; }

    
    
    .city-table-container .no-results-msg {

        text-align: center;

        padding: 60px 20px;

            background: rgba(239, 131, 84, 0.2); 

        border-radius: var(--radius-md);

        border: 1px solid var(--theme-primary); 

        color: var(--theme-text-dark); 

    }
    .city-table-container .no-results-msg p { font-size: 1.0rem; margin: 0; }



    .city-table-container .item-os-logos img{

        width:30px;

    }



    .city-table-container .item-os-logos .os-icon:nth-child(1):hover {

    
    color: #0078D4;

}



    .city-table-container .item-os-logos .os-icon:nth-child(2):hover {

        color: #A80030;

    }



    .city-table-container .item-os-logos .os-icon:nth-child(3):hover {

    
        color: #000000;

    }



    .city-table-container .item-os-logos .os-icon:nth-child(4):hover {

    
        color: #E95420;

    }
        .city-table-container .item-os-logos .os-icon:nth-child(5):hover {

    
        color: #28bb56;

    }

    .city-table-container .item-os-logos .os-icon{
        color:grey;
    }
    .city-table-container  .item-specs i {
    width: 25px;
    height: 25px;
    color: #ffffff;
    font-size: 25px;
    background: #02073e;
    padding: 10px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 5px;

}


.city-table-container  .leo-refcode {
    color: #555;
    font-size: 12px !important;
    font-weight: 500 !important;
    display: flex;
    font-style: italic;
}


/* Final price display spacing */

.city-table-container .filter-title > span {

    white-space: nowrap;

}
/* --- NEW TOOLTIP CSS (Same as before) --- */
/* The .management-toggle container is kept */

.city-table-container .management-info-tooltip {
    position: relative;
    display: inline-block;
    cursor: help; 
    margin-left: 5px;
}

/* Red/Orange Icon (The theme primary color is orange) */
.city-table-container .management-info-tooltip .fas.fa-info-circle {
    color: grey; /* Uses the orange defined in :root */
    font-size: 1.1rem;
    /* Required for 'transform' to work properly */
 display: inline-block;
  
 /* Apply the animation */
 animation-name: pulse-icon-animation;
 animation-duration: 2s;             /* A slower, more subtle pace (2 seconds) */
 animation-iteration-count: infinite; /* Makes it loop forever */
 animation-timing-function: ease-in-out; /* Smooth start and end */
}

/* New style for the highlighted text inside the tooltip */
.city-table-container .management-info-tooltip .tooltip-highlight {
    color: var(--theme-primary); /* Orange color */
    font-weight: 700;
}

.city-table-container .management-info-tooltip .tooltip-text {
    visibility: hidden;
    width: 320px; 
    background-color: #ffffff; /* White background */
    color: #2d3748; /* Dark text */
    text-align: left;
    border-radius: 8px;
    padding: 12px;
    position: absolute;
    z-index: 10;
    bottom: 125%; 
    left: 50%;
    margin-left: -160px; /* Center the tooltip (half of width) */
    opacity: 0;
    transition: opacity 0.3s;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    line-height: 1.5;
    font-size: 0.9rem;
    font-weight: 400;
    border: 1px solid var(--theme-primary); /* Orange border for distinction */
}

/* Arrow for the tooltip */
.city-table-container .management-info-tooltip .tooltip-text::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -6px;
    border-width: 6px;
    border-style: solid;
    /* White arrow with orange tip/border */
    border-color: var(--theme-primary) transparent transparent transparent; 
    /* The white body is covered by the box above, so we use the border color here */
}

/* Show the tooltip on hover */
.city-table-container .management-info-tooltip:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
}

.city-table-container .product-location{
    font-weight: 600;
    color: var(--color-text-light);
    padding: 10px 10px;
    border: 1px solid var(--color-border);
    border-radius: 6px;
    text-align: center;
    white-space: nowrap;
}
.city-table-container .header-text {
    /* Critical: Enables horizontal alignment */
    display: flex!important; 
    align-items: center!important; /* Vertically align the flag and h4 */
    gap: 10px; 
}

/* 2B. Style the Flag Image */
.city-table-container .city-flag-icon {
width: 34px !important;
    height: 26px !important;
    border-radius: 10px !important;
    flex-shrink: 0 !important;
    object-fit: cover !important;
}

/* Ensure the heading margin doesn't interfere */
.city-table-container  .header-text h4 {
    margin: 0!important; 
}