/* ===========================================
   BLUE THEME CSS - Alternative Color Scheme
   =========================================== */

/* Blue Theme Color Variables */
:root {
  /* Original Blue Variables */
  --blue-primary: #1E3A8A;          /* Deep Blue */
  --blue-secondary: #3B82F6;        /* Bright Blue */
  --blue-accent: #60A5FA;           /* Light Blue */
  --blue-gradient-start: #1E40AF;   /* Blue Gradient Start */
  --blue-gradient-end: #3B82F6;     /* Blue Gradient End */
  --blue-dark: #1E293B;             /* Dark Blue */
  --blue-light: #DBEAFE;            /* Very Light Blue */
  --gold-accent: #FFD700;           /* Keep Gold for highlights */
  --white: #FFFFFF;
  --black: #000000;
  
  /* Theme Variables for Modal Consistency */
  --theme-primary: #1E3A8A;         /* Same as blue-primary */
  --theme-primary-dark: #1E293B;    /* Same as blue-dark */
  --theme-secondary: #3B82F6;       /* Same as blue-secondary */
  --theme-accent: #60A5FA;          /* Same as blue-accent */
  --theme-light: #DBEAFE;           /* Same as blue-light */
  --theme-dark: #1E293B;            /* Same as blue-dark */
  --theme-hover: #93C5FD;           /* Light blue for hover */
  --theme-glow: rgba(59, 130, 246, 0.4);     /* Blue glow */
  --theme-glow-hover: rgba(59, 130, 246, 0.6); /* Blue glow hover */
}

/* BUTTON STYLES - Blue Theme */
.btn-blue-theme,
.submit {
  background: linear-gradient(135deg, var(--blue-primary) 0%, var(--blue-secondary) 25%, var(--blue-accent) 50%, var(--blue-secondary) 75%, var(--blue-dark) 100%) !important;
  border: 2px solid var(--gold-accent) !important;
  border-radius: 25px !important;
  color: var(--white) !important;
  font-family: 'Lilita One', cursive !important;
  font-size: 18px !important;
  padding: 12px 30px !important;
  font-weight: bold !important;
  cursor: pointer !important;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7) !important;
  box-shadow: 0 5px 15px rgba(30, 58, 138, 0.3), 0 0 10px rgba(59, 130, 246, 0.4) !important;
  transition: all 0.3s ease !important;
  text-decoration: none !important;
  display: inline-block !important;
}

/* HIGH SPECIFICITY HOVER OVERRIDE */
form .btn-blue-theme:hover,
form .submit:hover,
.form-signin .btn-blue-theme:hover,
.form-signin .submit:hover,
.btn-blue-theme:hover:not(.disabled),
.submit:hover:not(.disabled) {
  background: linear-gradient(135deg, var(--blue-secondary) 0%, var(--blue-accent) 25%, #93C5FD 50%, var(--blue-accent) 75%, var(--blue-secondary) 100%) !important;
  border-color: #FFE135 !important;
  box-shadow: 0 8px 20px rgba(30, 58, 138, 0.4), 0 0 15px rgba(59, 130, 246, 0.6) !important;
  transform: translateY(-2px) !important;
  color: var(--white) !important;
}

.btn-blue-theme:hover,
.submit:hover {
  background: linear-gradient(135deg, var(--blue-secondary) 0%, var(--blue-accent) 25%, #93C5FD 50%, var(--blue-accent) 75%, var(--blue-secondary) 100%) !important;
  border-color: #FFE135 !important;
  box-shadow: 0 8px 20px rgba(30, 58, 138, 0.4), 0 0 15px rgba(59, 130, 246, 0.6) !important;
  transform: translateY(-2px) !important;
  color: var(--white) !important;
}

/* CARD STYLES - Blue Theme */
.card-blue-theme {
  background: var(--blue-primary) !important;
  border: 3px solid var(--gold-accent) !important;
  border-radius: 15px !important;
  box-shadow: 0 20px 40px rgba(30, 58, 138, 0.5), 0 0 30px rgba(255, 215, 0, 0.3) !important;
}

.card-blue-theme .card-body {
  background: transparent !important;
}

.card-blue-theme p {
  color: var(--white) !important;
}

.card-blue-theme strong {
  color: var(--gold-accent) !important;
}

/* MODAL STYLES - Blue Theme */
.swal2-modal.blue-theme {
  background: var(--blue-primary) !important;
  border: 2px solid var(--gold-accent) !important;
  border-radius: 15px !important;
}

.swal2-title.blue-theme {
  color: var(--white) !important;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7) !important;
}

.swal2-content.blue-theme {
  color: var(--white) !important;
}

.swal2-content.blue-theme p {
  color: var(--white) !important;
}

/* WELCOME MODAL - Blue Theme */
.welcome-popup-blue {
  background: var(--blue-primary) !important;
  border: 2px solid var(--gold-accent) !important;
  border-radius: 15px !important;
}

.welcome-logo-section.blue-theme {
  background: linear-gradient(135deg, var(--blue-secondary) 0%, var(--blue-primary) 100%) !important;
  border-radius: 15px 15px 0 0 !important;
  padding: 20px !important;
}

.welcome-content-section.blue-theme {
  background: var(--blue-primary) !important;
  padding: 25px !important;
}

.custom-modal-button.blue-theme {
  background: linear-gradient(135deg, var(--blue-primary) 0%, var(--blue-secondary) 25%, var(--blue-accent) 50%, var(--blue-secondary) 75%, var(--blue-dark) 100%) !important;
  border: 2px solid var(--gold-accent) !important;
  border-radius: 25px !important;
  color: var(--white) !important;
  font-family: 'Lilita One', cursive !important;
  font-size: 16px !important;
  padding: 12px 30px !important;
  font-weight: bold !important;
  cursor: pointer !important;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7) !important;
  box-shadow: 0 5px 15px rgba(30, 58, 138, 0.3), 0 0 10px rgba(59, 130, 246, 0.4) !important;
  transition: all 0.3s ease !important;
}

.custom-modal-button.blue-theme:hover {
  background: linear-gradient(135deg, var(--blue-secondary) 0%, var(--blue-accent) 25%, #93C5FD 50%, var(--blue-accent) 75%, var(--blue-secondary) 100%) !important;
  border-color: #FFE135 !important;
  box-shadow: 0 8px 20px rgba(30, 58, 138, 0.4), 0 0 15px rgba(59, 130, 246, 0.6) !important;
  transform: translateY(-2px) !important;
}

/* FORM STYLES - Blue Theme */
.form-group.blue-theme input,
.form-control.blue-theme {
  border: 2px solid var(--blue-secondary) !important;
  border-radius: 10px !important;
  background-color: #FFFFFF !important;
  color: #333333 !important;
  font-weight: 500 !important;
}

.form-group.blue-theme input:focus,
.form-control.blue-theme:focus {
  border-color: var(--blue-accent) !important;
  background-color: #FFFFFF !important;
  color: #333333 !important;
  box-shadow: 0 0 10px rgba(59, 130, 246, 0.3) !important;
}

.form-group.blue-theme input::placeholder,
.form-control.blue-theme::placeholder {
  color: #8B8B8B !important;
  opacity: 0.8;
}

/* POPUP/HISTORY STYLES - Blue Theme */
.popup-container.blue-theme {
  background: rgba(30, 58, 138, 0.8) !important;
}

.popup-body.blue-theme {
  background: var(--blue-primary) !important;
  border: 2px solid var(--blue-secondary) !important;
  border-radius: 10px !important;
}

.popup-header.blue-theme {
  background: var(--blue-secondary) !important;
  color: var(--white) !important;
}

.history-table.blue-theme {
  background: var(--blue-primary) !important;
}

.history-table.blue-theme th {
  background: var(--blue-secondary) !important;
  color: var(--white) !important;
  border-bottom: 2px solid var(--blue-accent) !important;
}

.history-table.blue-theme td {
  color: var(--white) !important;
  border-bottom: 1px solid rgba(59, 130, 246, 0.3) !important;
}

.history-table.blue-theme tr:hover {
  background-color: rgba(59, 130, 246, 0.1) !important;
}

/* ALERT STYLES - Blue Theme */
.alert-blue-theme {
  background: var(--blue-primary) !important;
  border: 2px solid var(--blue-secondary) !important;
  color: var(--white) !important;
  border-radius: 10px !important;
}

.alert-blue-theme .close {
  color: var(--white) !important;
}

/* PRIZE LEVEL TABLE - Blue Theme */
.prizes-level-table.blue-theme {
  background: var(--blue-primary) !important;
  border: 2px solid var(--blue-secondary) !important;
  border-radius: 10px !important;
}

.prizes-level-table.blue-theme th {
  background: linear-gradient(135deg, var(--blue-secondary) 0%, var(--blue-accent) 100%) !important;
  color: var(--white) !important;
  text-shadow: none !important;
  border: 1px solid var(--blue-accent) !important;
}

.prizes-level-table.blue-theme td {
  color: var(--white) !important;
  background: rgba(30, 58, 138, 0.3) !important;
  border: 1px solid rgba(59, 130, 246, 0.3) !important;
}

/* SOCIAL ICONS - Blue Theme */
.social-icon.blue-theme {
  background: linear-gradient(135deg, var(--blue-primary) 0%, var(--blue-secondary) 100%) !important;
  border: 2px solid var(--blue-accent) !important;
  box-shadow: 0 4px 15px rgba(30, 58, 138, 0.3) !important;
}

.social-icon.blue-theme:hover {
  background: linear-gradient(135deg, var(--blue-secondary) 0%, var(--blue-accent) 100%) !important;
  border-color: var(--gold-accent) !important;
  box-shadow: 0 6px 20px rgba(30, 58, 138, 0.5) !important;
}

/* INFORMATION BOXES - Blue Theme */
.info-box-blue-theme {
  background: var(--theme-primary-dark, #1E293B) !important;
  border: 2px solid var(--gold-accent) !important;
  border-radius: 12px !important;
  box-shadow: 0 6px 20px rgba(30, 41, 59, 0.25) !important;
  color: var(--white) !important;
}

.info-box-blue-theme h4,
.info-box-blue-theme p {
  color: var(--white) !important;
}

.info-box-blue-theme .highlight {
  color: var(--gold-accent) !important;
}

/* WINNER/CONGRATS STYLES - Blue Theme */
.winner-card-blue-theme {
  background: var(--blue-primary) !important;
  border: 3px solid var(--gold-accent) !important;
  border-radius: 15px !important;
  box-shadow: 0 20px 40px rgba(30, 58, 138, 0.5), 0 0 30px rgba(255, 215, 0, 0.3) !important;
}

.losers-card-blue-theme {
  background: var(--blue-dark) !important;
  border: 2px solid #6B7280 !important;
  border-radius: 15px !important;
  box-shadow: 0 10px 20px rgba(30, 41, 59, 0.3) !important;
}

/* TEXT COLORS - Blue Theme */
.text-blue-primary {
  color: var(--blue-primary) !important;
}

.text-blue-secondary {
  color: var(--blue-secondary) !important;
}

.text-blue-accent {
  color: var(--blue-accent) !important;
}

.text-blue-light {
  color: var(--blue-light) !important;
}

/* BACKGROUND UTILITIES - Blue Theme */
.bg-blue-primary {
  background-color: var(--blue-primary) !important;
}

.bg-blue-secondary {
  background-color: var(--blue-secondary) !important;
}

.bg-blue-accent {
  background-color: var(--blue-accent) !important;
}

.bg-blue-gradient {
  background: linear-gradient(135deg, var(--blue-primary) 0%, var(--blue-secondary) 50%, var(--blue-accent) 100%) !important;
}

/* RESPONSIVE ADJUSTMENTS - Blue Theme */
@media (max-width: 768px) {
  .btn-blue-theme,
  .submit {
    font-size: 16px !important;
    padding: 10px 25px !important;
  }
  
  .card-blue-theme {
    border-width: 2px !important;
    box-shadow: 0 10px 20px rgba(30, 58, 138, 0.3), 0 0 15px rgba(255, 215, 0, 0.2) !important;
  }
  
  .custom-modal-button.blue-theme {
    font-size: 14px !important;
    padding: 10px 20px !important;
  }
}

/* ANIMATION ENHANCEMENTS - Blue Theme */
@keyframes bluePulse {
  0%, 100% {
    box-shadow: 0 0 10px rgba(59, 130, 246, 0.4);
  }
  50% {
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.8), 0 0 30px rgba(59, 130, 246, 0.4);
  }
}

.pulse-blue {
  animation: bluePulse 2s ease-in-out infinite;
}

@keyframes blueGlow {
  from {
    text-shadow: 0 0 10px rgba(59, 130, 246, 0.8);
  }
  to {
    text-shadow: 0 0 20px rgba(59, 130, 246, 1), 0 0 30px rgba(59, 130, 246, 0.8);
  }
}

.glow-blue {
  animation: blueGlow 1.5s ease-in-out alternate infinite;
}

/* OVERRIDE ANY GREEN BOOTSTRAP/DEFAULT BUTTON HOVER */
.btn-blue-theme:hover,
.submit:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
button:hover {
  background: linear-gradient(135deg, var(--blue-secondary) 0%, var(--blue-accent) 25%, #93C5FD 50%, var(--blue-accent) 75%, var(--blue-secondary) 100%) !important;
  border-color: #FFE135 !important;
  color: var(--white) !important;
}

/* ULTRA-SPECIFIC OVERRIDE FOR FORM BUTTONS */
.form-signin input[type="button"]:hover,
.form-signin input[type="submit"]:hover,
.form-signin button[type="submit"]:hover,
div form input[type="button"]:hover,
div form input[type="submit"]:hover,
div form button[type="submit"]:hover {
  background: linear-gradient(135deg, var(--blue-secondary) 0%, var(--blue-accent) 25%, #93C5FD 50%, var(--blue-accent) 75%, var(--blue-secondary) 100%) !important;
  border-color: #FFE135 !important;
  color: #FFFFFF !important;
  box-shadow: 0 8px 20px rgba(30, 58, 138, 0.4), 0 0 15px rgba(59, 130, 246, 0.6) !important;
  transform: translateY(-2px) !important;
}