/* Scoped styles to the main container */
#ihe-main-container {
    font-family: 'Inter', sans-serif;
    color: #080A47;
}

.hub-node, .pt-element {
    transition: all 0.3s ease-in-out;
    background-color: white;
}

.hub-node {
     border-bottom-width: 4px;
}

.hub-node:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 35px -10px rgba(8, 10, 71, 0.1), 0 8px 15px -8px rgba(8, 10, 71, 0.1);
}

.pt-element {
    border: 1px solid rgba(0,0,0,0.1);
    border-top-width: 4px;
}
.pt-element:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 20px -5px rgba(8, 10, 71, 0.15);
    z-index: 10;
    position: relative;
}

/* Modal Animations */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes slideInUp {
    from { opacity: 0; transform: translateY(50px); }
    to { opacity: 1; transform: translateY(0); }
}
.modal-fade-in {
    animation: fadeIn 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
.modal-slide-in-up {
    animation: slideInUp 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Custom Scrollbar */
.modal-content::-webkit-scrollbar {
    width: 8px;
}
.modal-content::-webkit-scrollbar-track {
    background: #e2e8f0;
    border-radius: 10px;
}
.modal-content::-webkit-scrollbar-thumb {
    background: #64748b;
    border-radius: 10px;
}
.modal-content::-webkit-scrollbar-thumb:hover {
    background: #080A47;
}

/* Tab styling */
.tab-btn {
    transition: all 0.3s;
}
.tab-btn.active {
    background-color: #080A47;
    color: white;
}
.tab-btn:not(.active) {
    background-color: white;
    color: #080A47;
}

/* Map Styling */
.country {
    stroke: #F7EBE8;
    stroke-width: 0.5px;
    transition: fill 0.3s;
}
.country.has-data {
    cursor: pointer;
}
.country.has-data:hover {
    fill: #D90368 !important;
}
.country.active {
    fill: #D90368 !important;
}