/* ==========================================
   VARIABLES Y BASE
   ========================================== */
:root {
    --bg: #0a0a0a;
    --card-bg: rgba(255, 255, 255, 0.05);
    --accent: #007aff;
    --text: #ffffff;
    --success: #28a745;
    --danger: #ff4d4d;
}

body {
    background-color: var(--bg);
    color: var(--text);
    font-family: 'Inter', sans-serif;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

/* ==========================================
   NAVBAR (Fija y Transparente)
   ========================================== */
/* ==========================================
    NAVBAR (Logo Izquierda - Carrito Derecha)
   ========================================== */
/* Busca y reemplaza estos bloques en tu archivo CSS */

.navbar {
    display: flex;
    justify-content: space-between; /* Esto empuja logo a izq y carrito a der */
    align-items: center;
    padding: 0 5%; 
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 80px; 
    box-sizing: border-box; 
    z-index: 1000;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    background: rgba(10, 10, 10, 0.7);
}

.logo {
    display: flex;
    align-items: center;
    /* Eliminamos justify-content: center si lo tenías para que no fuerce el contenido */
    text-align: left; 
}

.logo a {
    display: flex;
    align-items: center;
}

/* Asegúrate de que no exista ninguna regla para .nav-spacer que ocupe espacio */
.nav-spacer {
    display: none;
}
.logo img {
    max-height: 50px; /* Reducido ligeramente para evitar que se vea muy pegado a los bordes */
    width: auto;
    display: block;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.logo img:hover {
    transform: scale(1.05);
}

/* Contenedor del Carrito en la Navbar */
.cart-nav-btn {
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 50px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
}

.cart-nav-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--accent);
}

#cart-count {
    background: var(--accent);
    color: white;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.8rem;
    margin-left: 8px;
    font-weight: 700;
}

/* ==========================================
    RESPONSIVE (Ajustes para Celulares)
   ========================================== */
@media (max-width: 768px) {
    .navbar {
        height: 65px; /* Un poco más de aire que los 60px anteriores */
        padding: 0 4%;
    }

    .logo img {
        max-height: 38px; /* Tamaño ideal para que no choque con el carrito */
    }

    .cart-nav-btn {
        padding: 6px 10px;
    }

    .cart-nav-btn .icon {
        font-size: 1.1rem;
    }
}

/* ==========================================
   HERO / CABECERA DE ÁLBUM
   ========================================== */
/* Ajustes para el Hero */
.hero {
    text-align: center;
    padding: 60px 20px;
    background-color: #0a0a0a; /* O el color de fondo que estés usando */
}

.hero h1 {
    font-size: 3.5rem;
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.hero-roles {
    font-size: 1.2rem;
    font-weight: 300;
    color: #cccccc;
    letter-spacing: 4px;
    text-transform: uppercase;
    margin-bottom: 20px;
}

.hero-location {
    font-size: 0.9rem;
    color: #007aff; /* Color azul para resaltar la ubicación */
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    font-weight: 400;
}

/* Responsivo para móviles */
@media (max-width: 768px) {
    .hero h1 { font-size: 2.2rem; }
    .hero-roles { font-size: 0.9rem; letter-spacing: 2px; }
}
#event-description {
    font-size: 1.1rem;
    max-width: 600px;
    margin: 15px auto 0 auto; 
    font-weight: 300;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.7);
}

/* ==========================================
   FILTROS (Select)
   ========================================== */
#tag-filters {
    padding: 0 5%;
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

#tag-select {
    padding: 12px 20px;
    border-radius: 10px;
    background: #1a1a1a;
    color: white;
    border: 1px solid #333;
    width: 100%;
    max-width: 400px;
    font-size: 1rem;
    outline: none;
    cursor: pointer;
    transition: border-color 0.3s;
}

#tag-select:focus {
    border-color: var(--accent);
}

/* ==========================================
   GALERÍA DE FOTOS
   ========================================== */
.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 25px;
    padding: 20px 5% 80px 5%;
}

.photo-card {
    background: var(--card-bg);
    border-radius: 15px;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
    border: 1px solid rgba(255,255,255,0.08);
    display: flex;
    flex-direction: column;
}

.photo-card:hover { 
    transform: translateY(-8px);
    border-color: var(--accent);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6);
}

.photo-card img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    display: block;
}

.info { 
    padding: 18px; 
    display: flex; 
    justify-content: space-between; 
    align-items: center;
    background: rgba(255, 255, 255, 0.02);
}

.info h4 { margin: 0; font-size: 1.05rem; font-weight: 500; }

.buy-btn {
    background: var(--accent);
    color: white;
    border: none;
    padding: 10px 22px;
    border-radius: 25px;
    cursor: pointer;
    font-weight: 600;
    transition: 0.3s ease;
}

.buy-btn:hover {
    background: #006ae6;
    transform: scale(1.05);
}

/* ==========================================
   MODAL DEL CARRITO (Lateral Derecha)
   ========================================== */
.modal {
    display: none;
    position: fixed;
    top: 0; 
    left: 0;
    width: 100%; 
    height: 100%;
    background: rgba(0,0,0,0.85);
    z-index: 2000;
}

.modal-content {
    background: #0f0f0f;
    margin-left: auto;
    width: 90%;
    max-width: 500px;
    height: 100vh;
    padding: 2rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    overflow: hidden; /* IMPORTANTE */
    box-shadow: -15px 0 40px rgba(0,0,0,0.7);
    border-left: 1px solid rgba(255,255,255,0.1);
}


.modal-content h2 {
    margin-top: 0;
    font-size: 1.8rem;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    padding-bottom: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Estilos para la miniatura dentro del carrito */
.cart-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.cart-item-info {
    display: flex;
    align-items: center;
    gap: 15px;
}

.cart-thumb {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.cart-item-name {
    margin: 0;
    font-weight: 500;
    font-size: 0.95rem;
}

.cart-item-price {
    margin: 4px 0 0 0;
    color: var(--accent);
    font-size: 0.85rem;
}
/* Contenedor del icono del carrito en la Navbar */
.cart-nav-btn {
    display: flex;
    align-items: center;
    background: var(--card-bg); /* Fondo sutil */
    padding: 8px 15px;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
}

.cart-nav-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--accent);
    transform: translateY(-2px);
}

/* El icono (puedes usar un emoji o un SVG de carrito) */
.cart-nav-btn i, .cart-nav-btn span.icon {
    font-size: 1.4rem; /* Tamaño del carrito */
    margin-right: 5px;
}

/* El contador (burbuja de número) más grande y legible */
#cart-count {
    background: var(--accent);
    color: white;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.9rem; /* Un poco más grande */
    font-weight: 700;
    min-width: 18px;
    text-align: center;
}

/* Ajuste específico para celulares */
@media (max-width: 768px) {
    .cart-nav-btn {
        padding: 6px 12px;
    }
    .cart-nav-btn span.icon {
        font-size: 1.2rem;
    }
}

#cart-items {

    flex: 1;

    overflow-y: auto;

    padding-right: 8px;

    margin-bottom: 20px;
}

/* SCROLL PREMIUM */
#cart-items::-webkit-scrollbar {
    width: 6px;
}

#cart-items::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.15);
    border-radius: 20px;
}

/* FOOTER FIJO ABAJO */
.cart-footer {

    margin-top: auto;

    padding-top: 20px;

    background: #0f0f0f;

    border-top: 1px solid rgba(255,255,255,0.08);

    position: sticky;

    bottom: 0;
}

/* BOTON */
.checkout-btn {
    width: 100%;
    padding: 18px;

    background: var(--success);

    color: white;

    border: none;

    border-radius: 12px;

    cursor: pointer;

    font-weight: bold;

    font-size: 1.1rem;

    transition: 0.3s;
}

.checkout-btn:hover {
    background: #218838;
    transform: translateY(-2px);
}

.filter-btn.active {
    background: #007aff !important;
    border-color: #007aff !important;
    color: white !important;
}

.lightbox {
    display: none;
    position: fixed;
    z-index: 5000;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95); /* Tu opacidad original */
    justify-content: center;
    align-items: center;
    cursor: zoom-out;
}

/* Contenedor intermedio que agrupa verticalmente la foto y sus acciones */
.lightbox-content-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 90%; /* Respeta el límite máximo que le dabas a tu foto */
    max-height: 90%;
    cursor: default; /* Evita que se cierre el visor si hacen clic al lado del botón */
}

/* Tu imagen original adaptada para dejar espacio inferior al botón */
.lightbox img {
    max-width: 100%;      /* Ahora se limita al tamaño del wrapper */
    max-height: 75vh;     /* Le baja un poco el alto máximo fijo para que entre el botón en cualquier pantalla */
    border-radius: 8px;   /* Tus bordes redondeados originales */
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5); /* Tu sombra original */
    transition: transform 0.3s;
    object-fit: contain;
}

/* Botón de cerrar de siempre */
.close-lightbox {
    position: absolute;
    top: 30px;
    right: 40px;
    color: white;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
    z-index: 5010; /* Por encima de todo */
}

/* ==========================================
   NUEVOS ESTILOS: ACCIONES Y BOTÓN DE COMPRA
   ========================================== */

/* Contenedor del botón abajo de la imagen */
.lightbox-actions {
    margin-top: 15px;
    width: 100%;
    display: flex;
    justify-content: center;
}

/* Botón de Carrito Premium (Estilo oscuro/blanco super pro) */
.lightbox-add-to-cart {
    background-color: #ffffff;
    color: #000000;
    border: none;
    padding: 12px 35px;
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: background-color 0.2s ease, transform 0.2s ease;
    box-shadow: 0 10px 25px rgba(0,0,0,0.5);
}

.lightbox-add-to-cart:hover {
    background-color: #e1e1e6;
    transform: translateY(-2px);
}

.lightbox-add-to-cart:active {
    transform: translateY(0);
}

.lightbox-add-to-cart i {
    font-size: 1rem;
}

/* Flechas del visor */
.nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,0.1);
    color: white;
    border: none;
    font-size: 2rem;
    padding: 20px;
    cursor: pointer;
    transition: 0.3s;
    border-radius: 50%;
    z-index: 5001;
}
.nav-btn:hover { background: var(--accent); }
.prev { left: 20px; }
.next { right: 20px; }

/* Estilo del botón volver - Minimalista */
.back-btn {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: #ffffff; /* Blanco por defecto */
    font-family: 'Inter', sans-serif;
    font-size: 1.1rem;
    font-weight: 400;
    transition: all 0.3s ease;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03); /* Fondo casi invisible */
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.back-btn .arrow {
    font-size: 1.4rem;
    line-height: 1;
    display: inline-block;
    transition: transform 0.3s ease;
}

/* Efecto al pasar el mouse */
.back-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--accent);
    color: var(--accent); /* Solo aquí se pone azul */
}

.back-btn:hover .arrow {
    transform: translateX(-4px); /* La flecha se mueve sutilmente */
}

/* Ajuste para que el texto aparezca solo si quieres */
.back-text {
    letter-spacing: 0.5px;
}

/* Responsive: En celular mantenemos el texto si hay espacio, sino solo flecha */
@media (max-width: 480px) {
    .back-text {
        font-size: 0.9rem;
    }
    .back-btn {
        padding: 6px 10px;
    }
}

/* Forzar cursor de mano en las fotos */
.photo-card img {
    cursor: pointer !important; /* Sacamos la lupa y dejamos la mano */
}


/* Ajuste para la navbar para que todo quede perfectamente alineado */
/* ==========================================
   WHATSAPP Y UTILIDADES
   ========================================== */
.whatsapp-fixed {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 60px;
    height: 60px;
    background-color: #25d366;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    z-index: 1500;
    transition: 0.3s;
}



.whatsapp-fixed:hover { transform: scale(1.1); background-color: #20ba5a; }
.whatsapp-fixed img { width: 32px; height: 32px; }

/* SweetAlert Z-Index Fix */
.swal2-container { z-index: 3000 !important; }

/* ==========================================
   RESPONSIVE
   ========================================== */
@media (max-width: 768px) {
    .hero { padding-top: 100px; }
    .hero h1 { font-size: 2.2rem; }
    .gallery { grid-template-columns: 1fr; padding: 10px 5%; }
    .photo-card img { height: 320px; }
    .modal-content { max-width: 100%; } /* Carrito ocupa todo el ancho en celus */
}



/* Este contenedor asegura que el contenido no toque los bordes */
/* ==========================================
   FILTRO HOME - ALINEACIÓN EXACTA
   ========================================== */
.filter-section-container {
    /* Usamos el mismo padding que .gallery para que la alineación sea perfecta */
    padding: 0 5%; 
    margin-top: 30px;
    display: flex;
    justify-content: flex-start;
    width: 100%;
    box-sizing: border-box; /* Crucial para que el padding no rompa el ancho */
}

.filter-container-home {
    text-align: left;
    max-width: 300px; /* Evita que el selector se estire demasiado */
}

.filter-container-home p {
    font-size: 0.7rem;
    margin-bottom: 8px;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: flex;
    align-items: center;
    gap: 5px;
}

.filter-container-home select {
    background: #111;
    color: #fff;
    border: 1px solid #333;
    padding: 10px 15px;
    border-radius: 8px;
    width: 100%; /* Ocupa el ancho de .filter-container-home */
    font-size: 0.9rem;
    outline: none;
    cursor: pointer;
    transition: all 0.3s ease;
    appearance: none; /* Quita el estilo por defecto de algunos navegadores */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: calc(100% - 15px) center;
}

.filter-container-home select:hover {
    border-color: var(--accent);
}

/* Ajuste para móviles: que el selector sea más ancho si es necesario */
@media (max-width: 768px) {
    .filter-section-container {
        padding: 0 5%; /* Mantiene consistencia con la galería en móvil */
    }
    .filter-container-home {
        max-width: 100%;
        width: 100%;
    }
}

/* ==========================================
   MEJORAS EN LA INFO DE LA FOTO (PRECIO Y TÍTULO)
   ========================================== */
/* Corrección para la estructura nueva de la tarjeta */
.photo-card .info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 15px;
}

.photo-card .info .text-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
}

/* Estilo para los botones de la paginación que ahora genera el JS */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin: 40px 0;
    width: 100%;
}

.page-link {
    background: #111111;
    border: 1px solid #222222;
    color: rgba(255, 255, 255, 0.6);
    min-width: 40px;
    height: 40px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

.page-link:hover {
    background: #1c1c1e;
    color: #ffffff;
    border-color: #444446;
}

.page-link.active {
    background: #007aff;
    border-color: #007aff;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(0, 122, 255, 0.3);
}
/* ==========================================
   PAGINACIÓN PÚBLICA PREMIUM
   ========================================== */
/* ==========================================
   PAGINACIÓN PREMIUM OPTIMIZADA (MOBILE FRIENDLY)
   ========================================== */
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap; /* Crucial: si hay muchos botones, bajan a la siguiente línea en celu */
    margin: 40px 0 60px 0;
    padding: 0 5%;
    width: 100%;
    box-sizing: border-box;
}

.page-link {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-width: 44px; /* Tamaño mínimo recomendado por Google para UI táctil */
    height: 44px;
    padding: 0 8px;
    background: #111111;
    border: 1px solid #222222;
    color: rgba(255, 255, 255, 0.6);
    font-family: 'Inter', sans-serif;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    cursor: pointer;
    box-sizing: border-box;
}

/* Efecto Hover (solo dispositivos con mouse) */
@media (hover: hover) {
    .page-link:hover {
        background: #1c1c1e;
        border-color: #444446;
        color: #ffffff;
        transform: translateY(-2px);
    }
}

/* Estado de la página Actual activa */
.page-link.active {
    background: #007aff !important; /* Fuerza el azul de acento */
    border-color: #007aff !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(0, 122, 255, 0.3);
}

/* Ajustes específicos para pantallas muy chicas (Celulares) */
@media (max-width: 480px) {
    .pagination {
        gap: 6px; /* Achicamos un poco el espacio entre botones */
        margin: 30px 0 40px 0;
    }
    .page-link {
        min-width: 38px; /* Un pelín más chicos en pantallas ultra compactas */
        height: 38px;
        font-size: 0.85rem;
    }
}

/* ==========================================
   NUEVOS ESTILOS PARA EL PRECIO Y DETALLES
   ========================================== */
.photo-card .info .text-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
    gap: 2px; /* Espacio mínimo entre elementos */
}

/* Referencia de la foto (ID) */
.photo-ref {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.4);
    font-weight: 400;
}

/* El precio propiamente dicho */
.photo-price {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--accent); /* Resalta en el azul de tu identidad visual */
    letter-spacing: 0.5px;
}

/* Título del álbum en la búsqueda global */
.photo-album-title {
    display: block;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.8rem;
    font-weight: 500;
    margin-bottom: 2px;
}

/* Ajuste responsivo para que en celulares no se encimen si el texto es largo */
@media (max-width: 480px) {
    .photo-card .info {
        padding: 12px 15px;
    }
    .photo-price {
        font-size: 1.1rem;
    }
    .buy-btn {
        padding: 8px 16px;
        font-size: 0.9rem;
    }
}

.buy-btn.already-in-cart {
    background-color: #1a1a1a !important;
    color: #666666 !important;
    border: 1px solid #333333 !important;
    cursor: not-allowed;
    transform: none !important;
    pointer-events: none; /* Evita que sigan clickeando */
}

.buy-btn.already-in-cart i {
    color: #28a745; /* Tilde verde sutil */
    margin-right: 5px;
}