/* COMPREHENSIVE BUTTON STANDARDIZATION - Early 2000s Style */
/* This file overrides ALL button inconsistencies across the entire codebase */

/* =================================================================== */
/* RESET ALL BUTTON STYLES TO CONSISTENT EARLY 2000s APPEARANCE */
/* =================================================================== */

/* Base button reset - applies to ALL button-related classes */
.btn, .user-btn, .nav-link, .retry-button, .nav-button, .search-btn, .filter-btn, 
.leaderboard-refresh, .test-button, .mobile-menu-toggle, .close-btn, .consent-btn,
.game-play-btn, .btn-play, .btn-favorite, .btn-load-more, .screenshot-nav-btn,
.carousel-nav, .carousel-play-pause, .reorder-btn, .avatar-edit-btn, .remove-favorite,
.toggle-switch, .slider, .history-pagination .btn, .settings-actions .btn,
.favorites-controls .btn, .customization-form .btn, .leaderboard-nav button,
.mobile-nav-link, .featured-play-button, .carousel-indicator, .achievement-icon,
button[class*="btn"], input[type="button"], input[type="submit"], input[type="reset"] {
  /* Core early 2000s button styling - RESTORED TO ORIGINAL */
  display: inline-block !important;
  padding: 6px 12px !important;  /* Slightly larger than original for usability */
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 12px !important;    /* Readable but compact */
  font-weight: normal !important;
  line-height: 1.4 !important;
  text-decoration: none !important;
  text-align: center !important;
  cursor: pointer !important;
  border: 1px outset #CCCCCC !important;
  background: #E0E0E0 !important;
  color: #333333 !important;
  vertical-align: middle !important;
  white-space: nowrap !important;
  box-sizing: border-box !important;
  
  /* Remove all modern CSS3 effects */
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  transition: none !important;
  background-image: none !important;
  text-shadow: none !important;
  outline: none !important;
}

/* Hover state - consistent across ALL buttons */
.btn:hover, .user-btn:hover, .nav-link:hover, .retry-button:hover, .nav-button:hover, 
.search-btn:hover, .filter-btn:hover, .leaderboard-refresh:hover, .test-button:hover, 
.mobile-menu-toggle:hover, .close-btn:hover, .consent-btn:hover, .game-play-btn:hover, 
.btn-play:hover, .btn-favorite:hover, .btn-load-more:hover, .screenshot-nav-btn:hover,
.carousel-nav:hover, .carousel-play-pause:hover, .reorder-btn:hover, .avatar-edit-btn:hover, 
.remove-favorite:hover, .mobile-nav-link:hover, .featured-play-button:hover, 
.carousel-indicator:hover, button[class*="btn"]:hover, input[type="button"]:hover, 
input[type="submit"]:hover, input[type="reset"]:hover {
  background: #D0D0D0 !important;
  border: 1px outset #CCCCCC !important;
  color: #333333 !important;
  text-decoration: none !important;
  transform: none !important;
  box-shadow: none !important;
}

/* Active/pressed state - consistent across ALL buttons */
.btn:active, .user-btn:active, .nav-link:active, .retry-button:active, .nav-button:active, 
.search-btn:active, .filter-btn:active, .leaderboard-refresh:active, .test-button:active, 
.mobile-menu-toggle:active, .close-btn:active, .consent-btn:active, .game-play-btn:active, 
.btn-play:active, .btn-favorite:active, .btn-load-more:active, .screenshot-nav-btn:active,
.carousel-nav:active, .carousel-play-pause:active, .reorder-btn:active, .avatar-edit-btn:active, 
.remove-favorite:active, .mobile-nav-link:active, .featured-play-button:active, 
.carousel-indicator:active, button[class*="btn"]:active, input[type="button"]:active, 
input[type="submit"]:active, input[type="reset"]:active {
  background: #C0C0C0 !important;
  border: 1px inset #CCCCCC !important;
  transform: none !important;
  box-shadow: none !important;
}

/* Focus state - accessibility compliance */
.btn:focus, .user-btn:focus, .nav-link:focus, .retry-button:focus, .nav-button:focus, 
.search-btn:focus, .filter-btn:focus, .leaderboard-refresh:focus, .test-button:focus, 
.mobile-menu-toggle:focus, .close-btn:focus, .consent-btn:focus, .game-play-btn:focus, 
.btn-play:focus, .btn-favorite:focus, .btn-load-more:focus, .screenshot-nav-btn:focus,
.carousel-nav:focus, .carousel-play-pause:focus, .reorder-btn:focus, .avatar-edit-btn:focus, 
.remove-favorite:focus, .mobile-nav-link:focus, .featured-play-button:focus, 
.carousel-indicator:focus, button[class*="btn"]:focus, input[type="button"]:focus, 
input[type="submit"]:focus, input[type="reset"]:focus {
  outline: 2px solid #0066CC !important;
  outline-offset: 2px !important;
}

/* =================================================================== */
/* PRIMARY BUTTONS - Blue theme for main actions */
/* =================================================================== */
.btn-primary, .btn.btn-primary, input[type="submit"].btn-primary {
  background: #0066CC !important;
  border: 1px outset #0066CC !important;
  color: white !important;
}

.btn-primary:hover, .btn.btn-primary:hover, input[type="submit"].btn-primary:hover {
  background: #0099FF !important;
  border: 1px outset #0066CC !important;
  color: white !important;
}

.btn-primary:active, .btn.btn-primary:active, input[type="submit"].btn-primary:active {
  background: #004499 !important;
  border: 1px inset #0066CC !important;
}

/* =================================================================== */
/* SECONDARY BUTTONS - Gray theme for alternative actions */
/* =================================================================== */
.btn-secondary, .btn.btn-secondary {
  background: #999999 !important;
  border: 1px outset #999999 !important;
  color: white !important;
}

.btn-secondary:hover, .btn.btn-secondary:hover {
  background: #BBBBBB !important;
  border: 1px outset #999999 !important;
  color: white !important;
}

.btn-secondary:active, .btn.btn-secondary:active {
  background: #777777 !important;
  border: 1px inset #999999 !important;
}

/* =================================================================== */
/* SPECIAL GAME BUTTONS */
/* =================================================================== */

/* Large play buttons */
.btn-play-large, .featured-play-button {
  display: inline-block !important;
  padding: 10px 20px !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 13px !important;
  font-weight: bold !important;
  background: #0066CC !important;
  border: 2px outset #0066CC !important;
  color: white !important;
  cursor: pointer !important;
  text-decoration: none !important;
  text-align: center !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  transition: none !important;
}

.btn-play-large:hover, .featured-play-button:hover {
  background: #0099FF !important;
  border: 2px outset #0066CC !important;
  color: white !important;
}

.btn-play-large:active, .featured-play-button:active {
  background: #004499 !important;
  border: 2px inset #0066CC !important;
}

/* Favorite buttons */
.btn-favorite {
  display: inline-block !important;
  width: 32px !important;
  height: 32px !important;
  background: #E0E0E0 !important;
  border: 1px outset #CCCCCC !important;
  color: #CC0000 !important;
  font-size: 16px !important;
  cursor: pointer !important;
  text-align: center !important;
  line-height: 30px !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  transition: none !important;
}

.btn-favorite:hover {
  background: #D0D0D0 !important;
  border: 1px outset #CCCCCC !important;
}

.btn-favorite:active {
  background: #C0C0C0 !important;
  border: 1px inset #CCCCCC !important;
}

.btn-favorite.active {
  color: #CC0000 !important;
  background: #FFE6E6 !important;
}

/* =================================================================== */
/* NAVIGATION SPECIFIC OVERRIDES */
/* =================================================================== */

/* Active navigation links */
.nav-link.active {
  background: #C0C0C0 !important;
  border: 1px inset #CCCCCC !important;
  color: #333333 !important;
  box-shadow: none !important;
}

/* Mobile menu toggle specific styling */
.mobile-menu-toggle {
  display: none !important;
  flex-direction: column !important;
  gap: 3px !important;
  padding: 8px !important;
}

.mobile-menu-toggle span {
  display: block !important;
  width: 20px !important;
  height: 2px !important;
  background: #333333 !important;
  border: none !important;
}

/* =================================================================== */
/* SIZE VARIANTS - Early 2000s Appropriate Sizing */
/* =================================================================== */
.btn-xs, .btn.btn-xs { padding: 3px 6px !important; font-size: 10px !important; }
.btn-sm, .btn.btn-sm { padding: 4px 8px !important; font-size: 11px !important; }
.btn-md, .btn.btn-md { padding: 6px 12px !important; font-size: 12px !important; }
.btn-lg, .btn.btn-lg { padding: 8px 16px !important; font-size: 13px !important; }
.btn-xl, .btn.btn-xl { padding: 10px 20px !important; font-size: 14px !important; }

.btn-block, .btn.btn-block {
  display: block !important;
  width: 100% !important;
}

/* =================================================================== */
/* DISABLED STATE */
/* =================================================================== */
.btn:disabled, .user-btn:disabled, .nav-link:disabled, .retry-button:disabled, 
.nav-button:disabled, .search-btn:disabled, .filter-btn:disabled, 
.leaderboard-refresh:disabled, .test-button:disabled, .btn-primary:disabled,
.btn-secondary:disabled, .btn-play-large:disabled, button[class*="btn"]:disabled,
input[type="button"]:disabled, input[type="submit"]:disabled, input[type="reset"]:disabled {
  background: #F0F0F0 !important;
  color: #CCCCCC !important;
  cursor: not-allowed !important;
  border: 1px solid #E0E0E0 !important;
}

/* =================================================================== */
/* MOBILE RESPONSIVENESS - Simple and Clean */
/* =================================================================== */
@media (max-width: 768px) {
  .mobile-menu-toggle {
    display: flex !important;
  }
  
  /* Slightly larger buttons on mobile for touch usability */
  .btn, .user-btn, .nav-link, .retry-button, .nav-button, .search-btn, 
  .filter-btn, .leaderboard-refresh, .test-button, button[class*="btn"],
  input[type="button"], input[type="submit"], input[type="reset"] {
    padding: 8px 14px !important;
    font-size: 13px !important;
  }
}

/* =================================================================== */
/* FORM BUTTON OVERRIDES */
/* =================================================================== */
form .btn, form button, form input[type="submit"], form input[type="button"], form input[type="reset"] {
  background: #E0E0E0 !important;
  border: 1px outset #CCCCCC !important;
  color: #333333 !important;
  padding: 4px 8px !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 11px !important;
  cursor: pointer !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  transition: none !important;
}

form .btn-primary, form input[type="submit"] {
  background: #0066CC !important;
  border: 1px outset #0066CC !important;
  color: white !important;
}

/* =================================================================== */
/* CAROUSEL AND SPECIAL COMPONENT OVERRIDES */
/* =================================================================== */
.carousel-nav, .carousel-play-pause, .carousel-indicator {
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  transition: none !important;
}

.screenshot-nav-btn {
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  transition: none !important;
}

/* =================================================================== */
/* COOKIE CONSENT AND MODAL BUTTON OVERRIDES */
/* =================================================================== */
.consent-btn, .close-btn {
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  transition: none !important;
  background-image: none !important;
}

/* =================================================================== */
/* FINAL CATCH-ALL OVERRIDE */
/* =================================================================== */
/* This ensures ANY button-like element follows early 2000s styling */
*[class*="btn"]:not(.btn-group):not(.button-row):not(.button-demo):not(.button-group) {
  border-radius: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  transition: none !important;
  background-image: none !important;
  text-shadow: none !important;
}

*[class*="btn"]:not(.btn-group):not(.button-row):not(.button-demo):not(.button-group):hover {
  transform: none !important;
  box-shadow: none !important;
}

*[class*="btn"]:not(.btn-group):not(.button-row):not(.button-demo):not(.button-group):active {
  transform: none !important;
  box-shadow: none !important;
}