﻿.sidePanel { 
    width: 400px; 
    height: calc(100vh - 130px) !important;
    background-color: #ffffff; 
    position: fixed !important;
    top: 0 !important;
    left: auto !important; 
    right: 0 !important; 
    z-index: 50 !important; /* <--- Ez biztosítja, hogy a sötétítés felett legyen */
    
    /* Alaphelyzetben teljesen kitoljuk jobbra a képernyőről */
    transform: translateX(100%) !important; 
    transition: transform 0.3s ease-in-out !important; 
    
    -webkit-box-shadow: -9px 0px 5px 0px rgba(0,0,0,0.05); 
    -moz-box-shadow: -9px 0px 5px 0px rgba(0,0,0,0.05); 
    box-shadow: -9px 0px 5px 0px rgba(0,0,0,0.05); 
}

/* Amikor a JS rárakja az osztályt, visszarántjuk 0-ra (beúszik) */
.miniClassWidth { 
    transform: translateX(0) !important;
}

/* Mobilos nézet */
@media only screen and (max-width: 500px) {
    .sidePanel {
        width: 100%;
    }
}
.sidePanel a { text-decoration: none; font-size: 0.9em; color: #000000; display: block; transition: 0.3s; }
.sidePanel a:hover { color: #000000; }
.sidePanel .closebtn { position: absolute; top: 10px; right: 25px; font-size: 36px; z-index: 10; }

/* Kosár betöltő spinner animációja */
.sidepanel-loading { 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    height: 200px; 
}

.spinner { 
    border: 4px solid rgba(0, 0, 0, 0.1); 
    width: 36px; 
    height: 36px; 
    border-radius: 50%; 
    border-left-color: #142D6F; 
    animation: spin 1s linear infinite; 
}

@keyframes spin { 
    to { transform: rotate(360deg); } 
}

#btnSubmit:disabled { opacity: 0.6; cursor: not-allowed; pointer-events: none; transform: none; }

.tab-content { display: none !important; }
.tab-content.active { display: block !important; }

.tab-link { transition: all 0.2s ease-in-out; margin-bottom: -1px; border-top-left-radius: 0.5rem; border-top-right-radius: 0.5rem; }
