#modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.7); z-index: 100;
    display: flex; justify-content: center; align-items: center;
    opacity: 1; transition: opacity 0.3s;
}
#modal-overlay.hidden { opacity: 0; pointer-events: none; }

.modal-wrapper {
    position: relative; width: 90%; height: 90%; max-width: 1200px;
    border-radius: 12px; overflow: hidden; box-shadow: 0 20px 50px rgba(0,0,0,0.8);
}
.modal-bg-img { position: absolute; width: 100%; height: 100%; object-fit: cover; }

.modal-content {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 70%; height: 85%; background: rgba(255,255,255,0.95);
    z-index: 1; padding: 30px; overflow-y: auto; border-radius: 8px;
    display: flex; flex-direction: column;
    box-shadow: 0 0 20px rgba(0,0,0,0.2);
}

.close-btn {
    position: absolute; top: 10px; right: 15px; background: none; border: none;
    font-size: 2.5rem; cursor: pointer; color: #333;
}

.tab-content { display: flex; flex-direction: column; align-items: center; width: 100%; animation: fadeIn 0.5s; }
.tab-content.hidden { display: none; }
.lego-title { font-size: 2rem; margin-bottom: 20px; font-weight: 800; text-transform: uppercase; color: #333; border-bottom: 4px solid red; display: inline-block;}

@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@media(max-width: 768px) { .modal-content { width: 95%; height: 90%; padding: 15px; } }