/* Custom styles for the VPN server list section will go here. */

/* Ensure accordion always expands to fit table content and disables animation */
.accordion-body,
.accordion-collapse {
    height: auto !important;
    overflow: visible !important;
    transition: none !important;
}

/* --- VPN Region Header/Toggle (Accordion Style) --- */

/* Highlight for search matches */
.vpn-server-table .highlight {
    background-color: #f3f7fc !important;
    font-weight: bold;
}

/* --- Custom Search Dropdown --- */
.vpn-search-dropdown {
    position: relative;
    width: 100%;
    max-width: 400px;
    margin: 1.5rem 0 1rem 0;
}
.vpn-search-dropdown .form-control.vpn-search-input {
    padding-left: 2.2rem;
    padding-right: 2.2rem;
    height: 48px;
    font-size: 1.1rem;
    border-radius: 8px;
    border: 1px solid #ced4da;
    box-shadow: none;
    transition: border-color 0.2s;
}
.vpn-search-dropdown .form-control.vpn-search-input:focus,
.vpn-search-dropdown .form-control.vpn-search-input:hover {
    border-color: #2563eb;
    outline: none;
}
.vpn-search-dropdown .search-icon {
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: #adb5bd;
    pointer-events: none;
}
.vpn-search-dropdown .chevron-icon {
    position: absolute;
    right: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: #6c757d;
    pointer-events: none;
    transition: transform 0.2s;
}
.vpn-search-dropdown.open .chevron-icon {
    transform: translateY(-50%) rotate(180deg);
}
.vpn-search-dropdown-list {
    position: absolute;
    top: 110%;
    left: 0;
    right: 0;
    background: #181b23;
    color: #fff;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.18);
    max-height: 380px;
    min-width: 100%;
    overflow-y: auto;
    z-index: 10;
    padding: 0.5rem 0;
    display: block;
}
.vpn-search-dropdown-list.d-none {
    display: none;
}
.vpn-search-dropdown-list .dropdown-item {
    padding: 0.65rem 1.25rem;
    cursor: pointer;
    font-size: 1rem;
    color: #fff;
    transition: background 0.15s, color 0.15s;
    border: none;
    background: none;
}
.vpn-search-dropdown-list .dropdown-item:hover,
.vpn-search-dropdown-list .dropdown-item.selected {
    background: #2563eb;
    color: #fff;
}


.vpn-region-header {
    margin: 0 0 16px 0;
    padding: 0;
    background: none;
    border: none;
}

.vpn-region-toggle, .protocols-region-toggle {
    display: flex;
    align-items: center;
    width: 100%;
    background: #fff;
    border: none;
    border-radius: 12px;
    box-shadow: 0 0 0 1px rgba(92, 80, 80, 0.05);
    font-size: 1.18rem;
    font-weight: 500;
    text-align: left;
    color: #23272f;
    padding: 1.25rem 1.5rem;
    margin-bottom: 0;
    outline: none;
    cursor: pointer;
    transition: box-shadow 0.15s;
    min-height: 60px;
    text-decoration: none !important;
}
.vpn-region-toggle:focus, .protocols-region-toggle:focus {
    box-shadow: 0 0 0 1px #5b606840;
    background: #fff;
}
.vpn-region-toggle:not(:focus), .protocols-region-toggle:not(:focus) {
    box-shadow: 0 0 0 1px #5b606840;
    background: #fff;
}
.vpn-region-toggle:active, .vpn-region-toggle:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}
.vpn-region-toggle .chevron, .protocols-region-toggle .chevron {
    margin-left: auto;
    transition: transform 0.3s;
    display: inline-block;
}
.vpn-region-toggle:not(.collapsed) .chevron, .protocols-region-toggle:not(.collapsed) .chevron {
    transform: rotate(180deg);
}
.vpn-region-toggle .chevron, .protocols-region-toggle .chevron {
    width: 1.25em;
    height: 1.25em;
    display: inline-block;
}



.server-list-section .vpn-custom-tabs .nav-link:not(.active):not(:focus) {
    color: #6c757d !important;
}
.vpn-custom-tabs .nav-link:not(.active):not(:focus) .tab-icon svg {
    color: #6c757d !important;
}
.vpn-custom-tabs .nav-link .tab-icon svg {
    color: #6c757d; /* Muted grey for SVG */
    transition: color 0.2s;
}
.vpn-custom-tabs .nav-link.active, 
.vpn-custom-tabs .nav-link:focus {
    color: #2563eb;
    border: none;
    border-bottom: 3px solid #2563eb;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
}
.vpn-custom-tabs .nav-link.active .tab-icon svg, .vpn-custom-tabs .nav-link:focus .tab-icon svg {
    color: #2563eb; /* Blue for SVG */
}
.vpn-custom-tabs .nav-link:not(.active):not(:focus) .tab-label {
    color: #6c757d !important;
}
.vpn-custom-tabs .nav-link .tab-label {
    font-weight: 400;
    font-size: 1rem;
    letter-spacing: 0.01em;
    
}
.vpn-custom-tabs .tab-icon svg {
    stroke-width: 1 !important;
}
.vpn-custom-tabs .nav-link:hover, 
.vpn-custom-tabs .nav-link:focus-visible {
    background: #e7f0fd;
    border-radius: 8px;
    transition: background 0.2s;
}

.server-list-section .accordion-item {
    border: 1px solid #dee2e6;
    border-radius: .5rem;
    margin-bottom: 1rem;
}

.server-list-section .accordion-body {
    padding: 0;
}

.server-list-section .accordion-button {
    font-size: 1.25rem;
    font-weight: 500;
    color: #212529;
    background-color: #f8f9fa;
}

.server-list-section .accordion-button:not(.collapsed) {
    color: #0c63e4;
    background-color: #e7f1ff;
    box-shadow: inset 0 -1px 0 rgba(0,0,0,.125);
}

.server-list-section .accordion-button:focus {
    box-shadow: none;
}

.server-list-section .accordion-button:not(.collapsed) {
    background-color: #f8f9fa;
}

.server-list-section .accordion-button::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23212529'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

/* Server Table Styles */
.server-table {
    width: 100%;
    border-spacing: 0;
}

.server-table-header,
.server-table-row {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid #dee2e6;
}

.country-list .country-item:last-child .country-row {
    border-bottom: none;
}

.server-table-header {
    background-color: #f8f9fa;
    font-weight: 600;
    color: #495057;
    border-top: 1px solid #dee2e6;
    border-bottom: 1px solid #dee2e6;
}

.server-table-cell {
    display: flex;
    align-items: center;
    justify-content: center;
}

.country-cell {
    flex: 3;
    justify-content: flex-start;
    gap: 10px;
}

.feature-cell {
    flex: 1;
}

.country-row {
    cursor: pointer;
    transition: background-color 0.2s;
}

.country-row:hover {
    background-color: #f1f3f5;
}

.city-list .city-row {
    background-color: #f8f9fa;
}

.city-list .city-row .country-cell {
    padding-left: 40px;
}

.city-list .city-row:last-child {
    border-bottom: none;
}

.country-flag {
    font-size: 1.5rem;
}

.feature-cell svg {
    width: 20px;
    height: 20px;
}