body {
  font-family: "Josefin Sans", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  overflow-x: hidden;
  background: #100235 !important;
  color: #fff !important;
}

body.coming-soon:before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background-color: #683DF5 !important;
  opacity: 0.7;
  z-index: 1;
}

.josefin-sans-700 {
  font-family: "Josefin Sans", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
}

ul, ol{
  padding: 0;
  list-style: none;
  text-decoration: none;
}

a:link, a:visited,  a:hover, a:active{
    text-decoration: none !important;
    color: inherit !important;
}

p,h1,h2,h3,h4,h5,h6{
  color:#fff !important;
}

.rounded{
  border-radius:12px !important;
}

#top, .modal-content.bg{
  background: #360254 !important;
  color: #fff !important;
}

#hero{
  overflow: hidden;
  color:#fff !important;
  background: #b92163 !important;
  background: linear-gradient(0deg, #b92163 0%, #360254 100%) !important;
  height:70vh;
  
}

#heroCheckout{
  overflow: hidden;
  color:#fff !important;
  background: #b92163 !important;
  background: linear-gradient(0deg, #b92163 0%, #360254 100%) !important;  
}

@media all and (max-width: 991px) {
  #hero {
    height:105vh;
  }
}

.t1{
  color: #FFB200 !important;
}

#hero .b1, #heroCheckout .b1, #main .b1, .btn.b1{
  color:#fff !important;
  background: #f02080 !important;
  background: linear-gradient(0deg, #ffb200 0%, #f02080 100%) !important;
}

#hero .b2{
  color:#fff !important;
  background: #A83EF5 !important;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.ray {
  animation: rotate 20s linear infinite;
}

#main{
  background:#100235 !important;
  color:#fff !important;
}

@media all and (min-width: 992px) {
  #main .countdown{
    position: relative;
    bottom:100px;
  }
}

#main .c1{
  width:80px;
  line-height:80px;
}

#main p{
   color:#fff !important;
}

#main .bg{
  background:#683DF5 !important;
}

#main .numbers, #heroCheckout .numbers{
  width: clamp(70px, 12vw, 110px) !important;
  height: clamp(70px, 12vw, 110px) !important;
  line-height: clamp(70px, 12vw, 110px) !important;
  border: 2px solid #fff !important;
  position: relative !important;
  font-size: clamp(1.25rem, 4vw, 2rem) !important;
  font-weight: 700 !important;
  letter-spacing: 1px !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
  transition: all 0.3s ease !important;
  cursor: pointer !important;
  box-shadow: 0 0 15px rgba(40, 167, 69, 0.4), inset 0 0 5px rgba(255, 255, 255, 0.15) !important;
}

#main .numbers:hover:not(.sold):not(.reserved):not(.cancelled):not(.selected),
#heroCheckout .numbers:hover:not(.sold):not(.reserved):not(.cancelled):not(.selected) {
  transform: scale(1.08) !important;
  box-shadow: 0 0 25px rgba(40, 167, 69, 0.8) !important;
  border-color: #fff !important;
  border-width: 2px !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5) !important;
}

/* Responsive ticket sizes */
@media (max-width: 1200px) {
  #main .numbers, #heroCheckout .numbers{
    width: clamp(80px, 11vw, 105px) !important;
    height: clamp(80px, 11vw, 105px) !important;
    line-height: clamp(80px, 11vw, 105px) !important;
    font-size: clamp(1.15rem, 3.8vw, 1.9rem) !important;
  }
  
  #main .numbers:hover:not(.sold):not(.reserved):not(.cancelled):not(.selected),
  #heroCheckout .numbers:hover:not(.sold):not(.reserved):not(.cancelled):not(.selected) {
    transform: scale(1.08) !important;
    box-shadow: 0 0 22px rgba(40, 167, 69, 0.7) !important;
  }
}

@media (max-width: 768px) {
  #main .numbers, #heroCheckout .numbers{
    width: clamp(70px, 10vw, 95px) !important;
    height: clamp(70px, 10vw, 95px) !important;
    line-height: clamp(70px, 10vw, 95px) !important;
    font-size: clamp(1rem, 3.5vw, 1.7rem) !important;
  }
  
  #main .numbers:hover:not(.sold):not(.reserved):not(.cancelled):not(.selected),
  #heroCheckout .numbers:hover:not(.sold):not(.reserved):not(.cancelled):not(.selected) {
    transform: scale(1.08) !important;
    box-shadow: 0 0 18px rgba(40, 167, 69, 0.6) !important;
  }
}

@media (max-width: 480px) {
  #main .numbers, #heroCheckout .numbers{
    width: clamp(65px, 9vw, 85px) !important;
    height: clamp(65px, 9vw, 85px) !important;
    line-height: clamp(65px, 9vw, 85px) !important;
    font-size: clamp(0.95rem, 3vw, 1.5rem) !important;
  }
  
  #main .numbers:hover:not(.sold):not(.reserved):not(.cancelled):not(.selected),
  #heroCheckout .numbers:hover:not(.sold):not(.reserved):not(.cancelled):not(.selected) {
    transform: scale(1.08) !important;
    box-shadow: 0 0 15px rgba(40, 167, 69, 0.6) !important;
  }
}

#heroCheckout .numbers{
  background: linear-gradient(135deg, #FFB200 0%, #ff9500 100%);
  color: #fff;
  box-shadow: 0 0 15px rgba(255, 178, 0, 0.4), inset 0 0 5px rgba(255, 255, 255, 0.15) !important;
}

#main .numbers.sold{
  background: linear-gradient(135deg, #6f42c1 0%, #4c2b8a 100%) !important;
  color:#fff !important;
  border-color: #6f42c1 !important;
  cursor: not-allowed !important;
  opacity: 1;
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 15px rgba(111, 66, 193, 0.4), inset 0 0 5px rgba(255, 255, 255, 0.1) !important;
}

#main .numbers.sold:before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, transparent 45%, rgba(255, 178, 0, 0.8) 45%, rgba(255, 178, 0, 0.8) 55%, transparent 55%);
  z-index: 10;
  pointer-events: none;
  transform: none !important;
}

#main .numbers.reserved{
  background: linear-gradient(135deg, #fd7e14 0%, #e56908 100%) !important;
  color:#fff !important;
  border-color: #fd7e14 !important;
  cursor: not-allowed !important;
  opacity: 1;
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 15px rgba(253, 126, 20, 0.4), inset 0 0 5px rgba(255, 255, 255, 0.1) !important;
}

#main .numbers.reserved:before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, transparent 45%, rgba(255, 255, 255, 0.8) 45%, rgba(255, 255, 255, 0.8) 55%, transparent 55%);
  z-index: 10;
  pointer-events: none;
  transform: none !important;
}

#main .numbers.cancelled{
  background:#6c757d !important;
  color:#fff !important;
  border-color: #adb5bd !important;
  opacity: 0.6;
  position: relative;
  overflow: hidden;
}

#main .numbers.cancelled:before{
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, transparent 45%, rgba(173, 181, 189, 0.8) 45%, rgba(173, 181, 189, 0.8) 55%, transparent 55%);
  z-index: 10;
  pointer-events: none;
  transform: none !important;
}

#main .numbers.selected,
#main .numbers.selected:hover,
#main .numbers.selected:focus{
  background: linear-gradient(135deg, #25D366 0%, #128C7E 100%) !important;
  color:#fff !important;
  border: 2px solid #fff !important;
  transform: scale(1.12) !important;
  box-shadow: 0 0 25px rgba(37, 211, 102, 0.8), inset 0 0 8px rgba(255, 255, 255, 0.3) !important;
  cursor: pointer !important;
  opacity: 1 !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
}

#main .numbers.selected:before{
  position:absolute;
  top: -5px;
  right: -5px;
  font-family: "bootstrap-icons";  
  font-weight: 900;
  font-size: 16px;
  content: "\F26A";
  color: #fff;
  background: #28a745;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  z-index: 10;
  pointer-events: none;
  transform: none !important;
}

/* Asegurar que los estilos de selected tengan prioridad */
div.numbers.selected {
  background: linear-gradient(45deg, #28a745, #20c997) !important;
  border: 3px solid #fff !important;
  color: #fff !important;
  transform: scale(1.08) !important;
  box-shadow: 0 0 35px rgba(40, 167, 69, 0.95) !important;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
}

#prize{
  background: #100235  !important;
  background: linear-gradient(0deg, #100235 0%, #360254  100%) !important;
}

#prize a{
  color: #fff !important;
}

#prize .bg{
  background:#683DF5 !important; 
}

#prize .progress-bar{
  background: #EC6624 !important;
}

#faq .bgFaq{
  background: #683DF5 !important;
  color: #fff !important;
}

#myVideo .modal-dialog .modal-content{
  background: #360254 !important;
  color: #fff !important;

}

#myVideo .btn{
   color: #fff !important;
}

.colorImage{
  filter: hue-rotate(0deg) saturate(100%) invert(0%);
}

@media (min-width: 1366px) {
    .display-2 {
        font-size: 4.5rem !important;
    }
}

@media (min-width: 992px) and (max-width: 1365px){
    .display-2 {
        font-size: 3rem !important;
    }
}

.mobile-bottom-nav {
    z-index: 2000;
    background: rgba(16, 2, 53, 0.9) !important;
    backdrop-filter: blur(10px);
}
.mobile-bottom-nav a {
    font-size: 0.7rem;
    opacity: 0.8;
}
.mobile-bottom-nav a:hover {
    opacity: 1;
    color: #FFB200 !important;
}

/* Espacio extra en el footer para no tapar el contenido con el menu movil */
footer {
    padding-bottom: 80px !important;
}

/* Estilos para el cronómetro regresivo */
#main .timer {
    font-size: 3rem !important;
    font-weight: 700;
    text-shadow: 0 0 20px rgba(255, 178, 0, 0.5);
    letter-spacing: 2px;
}

#main .timer small {
    font-size: 1.5rem;
    color: #FFB200;
    margin-left: 5px;
}

@media (max-width: 768px) {
    #main .timer {
        font-size: 2rem !important;
    }
    #main .timer small {
        font-size: 1rem;
    }
}

/* Estilos para el contenedor de boletos con scroll horizontal */
.ticket-container {
    width: 100%;
    overflow: hidden;
    padding: 20px 0;
}

#ticket-list {
  max-height: 700px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  position: relative;
  padding: 20px;
}

.ticket-group {
    scroll-snap-align: start;
    position: relative;
    padding: 15px;
    min-width: fit-content;
}

#ticket-list::-webkit-scrollbar {
    height: 8px;
}

#ticket-list::-webkit-scrollbar-track {
    background: #683DF5;
    border-radius: 10px;
}

#ticket-list::-webkit-scrollbar-thumb {
    background: #FFB200;
    border-radius: 10px;
}

#ticket-list::-webkit-scrollbar-thumb:hover {
    background: #ff9500;
}

@media (max-width: 768px) {
    #ticket-list {
        max-height: 600px;
        padding: 15px;
    }
    
    .ticket-group {
        padding: 10px;
    }
    
    .ticket-container {
        padding: 15px 0;
    }
}

/* Estilos para el buscador de boletos */
.search-tickets-section {
    animation: glow 3s ease-in-out infinite alternate;
}

@keyframes glow {
    from {
        box-shadow: 0 0 30px rgba(255, 178, 0, 0.3);
    }
    to {
        box-shadow: 0 0 50px rgba(255, 178, 0, 0.6);
    }
}

#search-results {
    min-height: 50px;
}

#search-results .ticket-result {
    background: linear-gradient(135deg, rgba(104, 61, 245, 0.9) 0%, rgba(54, 2, 84, 0.9) 100%);
    padding: 20px;
    margin: 15px 0;
    border-radius: 15px;
    border: 2px solid #FFB200;
    box-shadow: 0 0 20px rgba(255, 178, 0, 0.3);
    transition: all 0.3s ease;
    animation: slideIn 0.5s ease-out;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

#search-results .ticket-result:hover {
    transform: scale(1.02);
    box-shadow: 0 0 30px rgba(255, 178, 0, 0.5);
}

#search-results .ticket-result.pagado {
    border-color: #28a745;
    background: linear-gradient(135deg, rgba(40, 167, 69, 0.2) 0%, rgba(54, 2, 84, 0.9) 100%);
}

#search-results .ticket-result.pendiente {
    border-color: #FFA500;
    background: linear-gradient(135deg, rgba(255, 165, 0, 0.2) 0%, rgba(54, 2, 84, 0.9) 100%);
}

#search-results .ticket-result .ticket-number {
    font-size: 2rem;
    font-weight: bold;
    color: #FFB200;
    text-shadow: 0 0 10px rgba(255, 178, 0, 0.5);
}

#search-results .ticket-result.pagado .ticket-number {
    color: #28a745;
    text-shadow: 0 0 10px rgba(40, 167, 69, 0.5);
}

#search-results .ticket-result.pendiente .ticket-number {
    color: #FFA500;
    text-shadow: 0 0 10px rgba(255, 165, 0, 0.5);
}

#search-results .no-results {
    background: linear-gradient(135deg, rgba(255, 178, 0, 0.1) 0%, rgba(104, 61, 245, 0.2) 100%);
    padding: 25px;
    border-radius: 15px;
    border: 2px dashed #FFB200;
    color: #FFB200;
    font-size: 1.1rem;
}

/* Estilos para el apartado de ganadores */
.winners-section {
    animation: fadeIn 1s ease-in;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.winner-card {
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
}

.winner-card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        45deg,
        transparent,
        rgba(255, 255, 255, 0.1),
        transparent
    );
    transform: rotate(45deg);
    transition: all 0.6s ease;
    opacity: 0;
}

.winner-card:hover::before {
    animation: shine 0.6s ease;
}

@keyframes shine {
    0% {
        left: -50%;
        opacity: 1;
    }
    100% {
        left: 150%;
        opacity: 0;
    }
}

.winner-card:hover {
    transform: translateY(-10px) scale(1.05);
    box-shadow: 0 0 50px rgba(255, 178, 0, 0.5);
}

.winner-icon {
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

.winner-number {
    font-family: 'Josefin Sans', sans-serif;
    font-weight: 700;
    animation: glowNumber 2s ease-in-out infinite alternate;
}

@keyframes glowNumber {
    from {
        text-shadow: 0 0 10px currentColor;
    }
    to {
        text-shadow: 0 0 20px currentColor, 0 0 30px currentColor;
    }
}

/* Animación shimmer para barras de progreso */
@keyframes shimmer {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* Estilos para el botón de comprar números */
.buyNumbers {
    background: linear-gradient(45deg, #FFB200 0%, #ff9500 50%, #FFB200 100%) !important;
    background-size: 200% 100% !important;
    animation: shimmer 3s ease-in-out infinite !important;
    border: none !important;
    border-radius: 50px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    box-shadow: 0 0 30px rgba(255, 178, 0, 0.5) !important;
    transition: all 0.3s ease !important;
    font-size: 1.2rem !important;
    padding: 15px 30px !important;
}

.buyNumbers:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 0 50px rgba(255, 178, 0, 0.8) !important;
    background-position: 100% 0 !important;
}

.buyNumbers:active {
    transform: scale(0.98) !important;
}

@media (max-width: 768px) {
    .buyNumbers {
        font-size: 1rem !important;
        padding: 12px 20px !important;
        border-radius: 25px !important;
    }
}

@media (min-width: 992px) {
    .buyNumbers {
        font-size: 1.3rem !important;
        padding: 18px 40px !important;
    }
}

/* Estilos para el dropdown de selección rápida */
.quick-select-dropdown {
    transform: translateX(-50%) !important;
    left: 50% !important;
    margin-top: 10px !important;
}

.quick-select-dropdown .dropdown-item {
    color: #fff !important;
    padding: 12px 20px !important;
    border-radius: 10px !important;
    margin: 5px 0 !important;
    transition: all 0.3s ease !important;
    font-weight: 500 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.quick-select-dropdown .dropdown-item:hover {
    background: linear-gradient(90deg, #FFB200 0%, #ff9500 100%) !important;
    color: #360254 !important;
    transform: translateX(5px) !important;
    box-shadow: 0 0 15px rgba(255, 178, 0, 0.5) !important;
}

.quick-select-dropdown .dropdown-item i {
    font-size: 1.2rem !important;
}

.quick-select-dropdown .dropdown-divider {
    border-color: rgba(255, 178, 0, 0.5) !important;
    margin: 10px 0 !important;
}

@media (max-width: 768px) {
    .quick-select-dropdown {
        min-width: 250px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
    }
    
    .quick-select-dropdown .dropdown-item {
        padding: 10px 15px !important;
        font-size: 0.9rem !important;
    }
    
    /* Aumentar espaciado en secciones principales para móvil */
    #hero {
        padding: 40px 0 !important;
    }
    
    #main {
        padding: 50px 0 !important;
    }
    
    #prize {
        padding: 50px 0 !important;
    }
    
    #faq {
        padding: 50px 0 !important;
    }
    
    .winners-section {
        margin-top: 50px !important;
        margin-bottom: 50px !important;
    }
    
    .search-tickets-section {
        margin-top: 50px !important;
        margin-bottom: 50px !important;
        padding: 30px 20px !important;
    }
    
    /* Hacer más pequeños los botones de navegación en móvil */
    #scrollLeft, #scrollRight {
        font-size: 0.8rem !important;
        padding: 8px 15px !important;
    }
    
    #scrollLeft i, #scrollRight i {
        font-size: 0.9rem !important;
    }
}