/* css/rifa-deportiva.css */

/* Oculta completamente el div.header que está dentro de div.wrapper */
/* Esto esconderá la imagen del coche en rifa-deportiva.html */
.wrapper > .header {
    display: none !important;
}

/* Ajusta el padding superior de la sección principal de boletos */
/* ¡AÑADIMOS !important AQUÍ PARA FORZAR LA APLICACIÓN! */
.buy-ticket-section {
    padding-top: 100px !important; /* Ahora este valor debería aplicarse */
    padding-bottom: 80px; 
    background-color: #000000; /* Asegura que tenga el mismo fondo que el resto de tu página */
}

/* Asegura que la sección de detalles de la rifa no tenga un margen superior indeseado */
#raffle-details-rifa-deportiva {
    margin-top: 0 !important; 
}

/* Si habías añadido un div.header-spacing-only en el HTML, asegúrate de que esté oculto */
/* (Aunque con la última versión de HTML que me pasaste, regresamos a la estructura original) */
.header-spacing-only {
    display: none !important;
}

/* Ajustes para textos largos que causan barras de desplazamiento */
.contact-text.link_alias,
.contact-text.link,
.contact-text.interbank { /* <-- ¡Añadida esta clase! */
    white-space: normal; /* Permite que el texto se envuelva a la siguiente línea */
    overflow-x: hidden;  /* Oculta cualquier barra de desplazamiento horizontal */
}

/* Estilos para el nuevo input numérico de cantidad de boletos */
.raffle-ticket-selector .ticket-counter-input {
    display: flex;
    align-items: center;
    justify-content: center; /* Centrar los elementos */
    margin-bottom: 15px;
}

.raffle-ticket-selector .ticket-quantity-input {
    width: 80px; /* Ancho más pequeño para el input */
    text-align: center;
    margin: 0 10px; /* Espacio entre los botones y el input */
    font-size: 1.2em;
    padding: 8px 5px;
    border-radius: 5px;
    border: 1px solid #555; /* Cambiado de #ddd a #555 para consistencia con otros inputs */
    background-color: #333; /* Ajustado para el tema oscuro */
    color: #fff; /* Ajustado para el tema oscuro */
}
.raffle-ticket-selector .ticket-quantity-input:focus {
    border-color: #890028;
    outline: none;
    box-shadow: 0 0 0 3px rgba(137, 0, 40, 0.5);
    background-color: #222;
}
.raffle-ticket-selector .ticket-quantity-input:hover:not(:focus) {
    border-color: #a0204a;
    box-shadow: 0 0 0 2px rgba(137, 0, 40, 0.3);
}

/* Ajustes para los botones +/- si es necesario, asegúrate que se vean bien */
.raffle-ticket-selector .btn-ticket-minus,
.raffle-ticket-selector .btn-ticket-plus {
    background-color: #890028; /* Color de tus botones de acción */
    color: white;
    border: none;
    padding: 8px 15px;
    border-radius: 50%; /* Para que sean redondos como antes */
    width: 40px; /* Tamaño fijo */
    height: 40px; /* Tamaño fijo */
    font-size: 1.5em; /* Tamaño del texto +/- */
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}

.raffle-ticket-selector .btn-ticket-minus:hover,
.raffle-ticket-selector .btn-ticket-plus:hover {
    background-color: #a00030;
}

/* Si el botón de confirmar cantidad está debajo, podrías necesitar ajustar su margen */
/* NOTA: Este botón será eliminado del HTML, pero la regla se mantiene por si acaso u otros botones lo usan. */
.btn-confirm-quantity {
    margin-top: 15px; 
    width: 100%; 
}

/* Asegúrate que el total de USD se vea bien */
.raffle-ticket-selector p {
    font-size: 1.1em;
    color: #ffffff; /* Color de texto general para la sección */
}
.raffle-ticket-selector .ticket-total {
    font-weight: bold;
    color: #890028; /* Color de énfasis */
}

/* Asegúrate de que el span de la tasa BCV también se vea bien */
.payment-details #bcvRateDisplay {
    font-weight: bold;
    color: #890028; /* O el color que prefieras para la tasa */
}

/* Estilos para la sección superior de detalles del premio de la rifa */
.raffle-prize-details {
    display: flex; /* Para que la imagen y la info puedan estar lado a lado o apiladas */
    flex-direction: column; /* Por defecto, apiladas para móviles, se cambiará en desktop */
    align-items: center; /* Centra los ítems apilados */
    gap: 25px; /* Espacio entre la imagen y el bloque de información */
    padding: 20px; /* Padding interno para que no se pegue a los bordes de .raffle-details-section */
    background-color: #1a1a1a; /* Un color de fondo similar a tus tarjetas */
    border-bottom: 1px solid #333; /* Separador sutil */
    border-top-left-radius: 8px; /* Coincide con el borde de la sección principal */
    border-top-right-radius: 8px; /* Coincide con el borde de la sección principal */
    margin-bottom: 20px; /* Espacio antes del selector de boletos */
}

.raffle-image-display {
    width: 100%; /* Ocupa todo el ancho disponible en columna */
    max-width: 500px; /* Limita el tamaño de la imagen en pantallas grandes */
    border-radius: 8px;
    overflow: hidden; /* Para que la imagen respete los bordes redondeados */
    box-shadow: 0 4px 15px rgba(137, 0, 40, 0.4); /* Sombra para destacar la imagen */
}

.raffle-prize-image {
    width: 100%;
    height: auto;
    display: block; /* Elimina espacio extra */
    object-fit: cover; /* Asegura que la imagen cubra el contenedor sin distorsión */
}

.raffle-info-block {
    text-align: center; /* Centra el texto por defecto */
    width: 100%; /* Ocupa todo el ancho disponible */
}

.raffle-info-block h3 {
    font-size: 2em; /* Título del premio más grande */
    color: #FFFFFF;
    margin-bottom: 10px;
    margin-top: 0;
}

.raffle-description {
    font-size: 1.1em;
    color: #CCCCCC;
    margin-bottom: 15px;
    line-height: 1.5;
}

.raffle-price-tag {
    font-size: 1.5em; /* Precio más grande */
    color: #890028; /* Tu color de acento para el precio */
    font-weight: 700;
    margin-bottom: 0; /* Sin margen inferior */
}

/* Media Query para pantallas más grandes (desktop) */
@media (min-width: 768px) {
    .raffle-prize-details {
        flex-direction: row; /* La imagen y la info se ponen en fila */
        justify-content: center; /* Centra el contenido horizontalmente */
        align-items: flex-start; /* Alinea al inicio verticalmente (arriba) */
        padding: 30px;
    }

    .raffle-image-display {
        flex-shrink: 0; /* Evita que la imagen se encoja si no hay espacio */
        width: 45%; /* La imagen ocupa el 45% del ancho disponible */
        max-width: 400px; /* Límite para que no sea excesivamente grande */
    }

    .raffle-info-block {
        flex-grow: 1; /* Permite que el bloque de info ocupe el espacio restante */
        text-align: left; /* Alinea el texto a la izquierda en desktop */
        padding-left: 20px; /* Espacio entre la imagen y el texto */
    }
}

/* Ajustes para la sección de detalles de rifa para que el padding y los bordes se vean bien */
/* Se sobrescribe el padding-top si ya existe en .raffle-details-section para que el nuevo bloque lo controle */
.raffle-details-section {
    padding-top: 0 !important; /* IMPORTANTE: Asegura que el padding superior lo maneje .raffle-prize-details */
    /* Deja el padding-bottom original de .raffle-details-section o ajustalo como necesites */
}