/* MODAL BASE */
.modal-overlay {
    display: none;
    position: fixed;
    z-index: 1500;
    left: 0; top: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.85);
    align-items: center;
    justify-content: center;
    transition: .25s;
}
.modal-box {
    background: #181818;
    color: #fff;
    padding: 32px 24px 24px 24px;
    border-radius: 18px;
    box-shadow: 0 8px 64px #000a;
    max-width: 350px;
    width: 94vw;
    position: relative;
    animation: modalIn .36s cubic-bezier(.44,2,.14,1);
    font-family: 'Poppins', Arial, sans-serif;
}
@keyframes modalIn { from { transform: scale(.9) translateY(40px); opacity:0; } to { transform: scale(1) translateY(0); opacity:1; } }
.close-modal {
    background: transparent;
    border: none;
    color: #ffd900;
    font-size: 2rem;
    position: absolute;
    top: 8px;
    right: 20px;
    cursor: pointer;
    font-weight: bold;
    transition: color 0.2s;
}
.close-modal:hover { color: #fff; }
.modal-box h2 { text-align: center; margin-bottom: 22px; font-family: 'Orbitron', Arial, sans-serif; color: #ffd900; }
.modal-box form { display: flex; flex-direction: column; gap: 16px; }
.modal-box input {
    background: #111;
    color: #ffd900;
    border: 1.5px solid #ffd900;
    padding: 10px 12px;
    border-radius: 8px;
    outline: none;
    font-size: 1.06em;
    transition: border .16s;
}
.modal-box input:focus { border: 1.5px solid #fff; }
.modal-box button[type="submit"] {
    background: #ffd900;
    color: #111;
    font-family: 'Orbitron', Arial, sans-serif;
    font-weight: bold;
    letter-spacing: 1.2px;
    border: none;
    border-radius: 7px;
    padding: 11px 0;
    font-size: 1.1em;
    margin-top: 6px;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}
.modal-box button[type="submit"]:hover { background: #111; color: #ffd900; border: 1.5px solid #ffd900;}
.modal-box p { text-align: center; margin-top: 2px; color: #ffd900; font-size: 0.97em;}
.modal-box a { color: #ffd900; text-decoration: underline; }
.modal-box a:hover { color: #fff; }
.modal {
  position: fixed; z-index: 1010; left:0; top:0; width:100vw; height:100vh; display:flex;
  align-items:center; justify-content:center; background:rgba(0,0,0,0.6);
}
.modal-bg {
  position:absolute; width:100vw; height:100vh; left:0; top:0;
}
.modal-content {
  position:relative; background:#111; border-radius:18px; padding:32px 22px 22px 22px;
  min-width:320px; max-width:96vw; box-shadow:0 10px 28px #0007;
  color:#fff; font-family:inherit; z-index:2;
  animation: modalpop .25s;
}
@keyframes modalpop { from{transform:scale(.85); opacity:0;} to{transform:scale(1); opacity:1;} }
.modal-close {
  position:absolute; top:10px; right:14px; font-size:2rem; color:#ffd900; border:none; background:none; cursor:pointer;
}
.loader { border:5px solid #333; border-top:5px solid #ffd900; border-radius:50%; width:34px; height:34px; animation: spin 1s linear infinite; }
@keyframes spin { 100% { transform: rotate(360deg); } }
.modal-overlay {
    display: none;
    position: fixed;
    z-index: 5000;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100vw; height: 100vh;
    background: rgba(0,0,0,0.82); /* Fondo negro con transparencia */
    align-items: center;
    justify-content: center;
    transition: opacity .17s;
    overflow-y: auto;
}

.modal-overlay[style*="flex"], /* También si lo activas con display:flex */
.modal-overlay:target {
    display: flex !important;
}

.modal-content {
    background: #161616;
    color: #ffd900;
    border-radius: 15px;
    box-shadow: 0 8px 32px #000a;
    max-width: 380px;
    width: 95vw;
    margin: 36px 0;
    padding: 34px 25px 26px 25px;
    position: relative;
    animation: modalPop .18s;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-height: 92vh;
    overflow-y: auto;
}

@keyframes modalPop {
    0% { transform: scale(0.93) translateY(20px); opacity: 0.2; }
    100% { transform: scale(1) translateY(0); opacity: 1; }
}

.close-modal {
    position: absolute;
    top: 15px; right: 18px;
    background: none;
    border: none;
    font-size: 2.1rem;
    color: #ffd900;
    cursor: pointer;
    font-weight: bold;
    z-index: 10;
    transition: color .17s;
}
.close-modal:hover { color: #fff; }

/* Adaptar tamaño para móviles */
@media (max-width: 500px) {
    .modal-content {
        padding: 13px 3vw 18px 3vw;
        max-width: 97vw;
    }
}
/* MODAL: Overlay de fondo */
.modal {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100vw; height: 100vh;
    background: rgba(0,0,0,0.83);
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
}

.modal[style*="flex"] {
    display: flex !important;
}

/* Fondo clickable para cerrar */
.modal-bg {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    width: 100vw; height: 100vh;
    background: transparent;
    z-index: 1;
}

/* Contenedor del modal */
.modal-content {
    position: relative;
    background: #161616;
    color: #ffd900;
    border-radius: 17px;
    box-shadow: 0 10px 36px #000a;
    max-width: 410px;
    width: 96vw;
    max-height: 90vh;
    margin: 34px auto;
    padding: 32px 25px 24px 25px;
    z-index: 2;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    /* Este overflow permite que solo el modal haga scroll si es más grande que la ventana */
}

.modal-close {
    position: absolute;
    top: 12px; right: 18px;
    background: none;
    border: none;
    font-size: 2rem;
    color: #ffd900;
    cursor: pointer;
    z-index: 10;
    transition: color .17s;
}
.modal-close:hover { color: #ff4747; }

#comprarModalBody {
    min-height: 120px;
    /* Puedes quitar align-items:center si no quieres centrar todo */
    display: block;
    align-items: stretch;
    justify-content: flex-start;
}

/* Mobile adaptativo */
@media (max-width: 600px) {
    .modal-content {
        width: 98vw;
        max-width: 98vw;
        min-width: unset;
        max-height: 98vh;
        padding: 18px 5px 16px 5px;
    }
}