/**
 * CSP-Compliant Utility Classes
 * Replaces inline styles for Content Security Policy compliance
 * Date: 2025-12-10
 * Updated: 2025-12-23 (CSP Phase 4 - Inline style extraction)
 * Updated: 2026-01-13 (SEC-053 - Report problem page inline style fixes)
 */

/* ================================================
   MODAL BODY SCROLL LOCK
   ================================================ */

/* Prevent body scrolling when modal is open */
body.modal-open {
  overflow: hidden !important;
  position: fixed;
  width: 100%;
}

/* ================================================
   VISIBILITY UTILITIES
   ================================================ */

/* Hide elements without display:none (maintains layout) */
.hidden {
  display: none !important;
}

/* Display none utility - CSP Phase 4 */
.display-none {
  display: none;
}

/* ================================================
   LOADING STATE UTILITIES - CSP Phase 4
   ================================================ */

/* Generic loading container - replaces inline style="padding: 2rem; text-align: center;" */
.loading-container {
  padding: 2rem;
  text-align: center;
}

/* Loading text - replaces inline style="color: #ffee00; font-size: 1.2em;" */
.loading-text {
  color: #ffee00;
  font-size: 1.2em;
}

/* ================================================
   REVIEWS LOADING STATE
   ================================================ */

/* Loading message in reviews modal */
.reviews-loading {
  text-align: center;
  padding: 2em;
  color: #ffee00;
}

/* Loading spinner animation */
.reviews-loading .fa-spinner {
  font-size: 2em;
  animation: spin 1s linear infinite;
}

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

/* ================================================
   REVIEWS ERROR STATE
   ================================================ */

/* Error message in reviews modal */
.reviews-error {
  color: #ff6b6b;
  text-align: center;
  padding: 2em;
  font-size: 1.1em;
}

/* ================================================
   PAGE HEADER HERO BACKGROUND - CSP Phase 4
   ================================================ */

/* Page header with background image - replaces inline background-image styles */
.page-header-hero {
  background-image: url("/assets/images/JAMWRLD_3840x1200_crisp.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* ================================================
   SPACING UTILITIES - SEC-053 FIX (2026-01-13)
   Report problem page inline style remediation
   ================================================ */

/* Margin top utilities */
.mt-2rem {
  margin-top: 2rem;
}

.mt-3rem {
  margin-top: 3rem;
}

/* Margin bottom utilities */
.mb-1-5rem {
  margin-bottom: 1.5rem;
}

/* ================================================
   TEXT COLOR UTILITIES - SEC-053 FIX (2026-01-13)
   ================================================ */

/* Secondary text color - replaces inline style="color: #888;" */
.text-secondary {
  color: #888888;
}

/* ================================================
   POSITION UTILITIES - SEC-053 FIX (2026-01-13)
   ================================================ */

/* Position relative - replaces inline style="position: relative;" */
.position-relative {
  position: relative;
}

/* ================================================
   ACCESSIBILITY
   ================================================ */

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .reviews-loading .fa-spinner {
    animation: none;
  }
}