/**
 * Wheel of Fortune - Custom Styles
 * This is a consolidated and fixed version.
 */

/* Main body and content wrapper for sticky footer */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  /* padding-bottom: 100px !important; /* Space for the fixed footer - adjust if footer height changes */
  /* The above padding-bottom might be good if content can scroll behind a fixed footer.
     If shiny-footer is part of the flow, this might not be needed or set differently.
     Given shiny-footer is position:fixed, this padding is good. */
}

.main-content { /* You would wrap your main page content (excluding the fixed footer) in a div with this class */
  flex: 1;
  padding-bottom: 100px; /* Ensure space for the 80px fixed footer + a bit more */
}


/* Main Wheel Game Container */
#container {
  position: relative; /* Changed from !important where not needed */
  width: 600px;
  max-width: 100%;
  margin: 20px auto 20px auto; /* Centered, with top/bottom margin */
  overflow: visible;
}

/* Spin button styling - Positioned statically before the wheel */
.spinBtn {
  display: block !important;
  width: 300px !important;
  margin: 0 auto 20px auto !important; /* 0 top, auto L/R, 20px bottom margin */
  z-index: 10 !important;
  background-color: #4CAF50 !important;
  color: white !important;
  top:20px;
  border: none !important;
  border-radius: 8px !important;
  height: 60px !important;
  font-size: 20px !important;
  font-weight: bold !important;
  cursor: pointer !important;
  transition: background-color 0.3s !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;
}

.spinBtn:hover {
  background-color: #45a049 !important;
}

.spinBtn:disabled {
  background-color: #cccccc !important;
  cursor: not-allowed !important;
  color: #666666 !important;
  opacity: 0.7 !important;
}

/* Wheel container itself */
.wheelContainer {
top:100px;
  position: relative !important;
  width: 100% !important;
  height: auto !important;
  /* margin-bottom: 80px !important; /* This was for button below, likely not needed now */
}

/* SVG styles */
.wheelSVG {
  width: 100% !important;
  height: auto !important;
  max-width: 600px !important;
calc(100vh - 180px) !important; 
  display: block !important; /* Ensure it behaves as a block */
  margin: 0 auto; /* Center the SVG if its container is wider */
}

/* Prevent wheel elements from being hidden and remove unnecessary top offset */
.wheel, .mainContainer, .wheelContainer { /* Removed .wheelSVG from here as it's styled above */
  opacity: 1 !important;
  visibility: visible !important;
  display: block !important;
  /* top: 50px !important; /* REMOVED - this was likely for an absolutely positioned top button */
}

/* Ensure segments and peg are visible */
.wheel g, .pegContainer, .valueContainer, .centerCircle {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Hide toast messages completely */
.toast {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  position: absolute !important;
  pointer-events: none !important;
  height: 0 !important;
  width: 0 !important;
  overflow: hidden !important;
}


/* --- MODAL STYLES (Perfect Styling Section) --- */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 90%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000; /* Modals should be above footer (which is 1000) */
}

.modal {
  background-color: white;
  border-radius: 8px;
  padding: 24px;
  max-width: 90%;
  width: 450px;
  max-height: 90vh;
  overflow-y: auto;
  text-align: center;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

.modal h2 { /* General modal h2 */
  font-size: 24px;
  margin-bottom: 16px;
  color: #333;
}

.modal p {
  font-size: 16px;
  line-height: 1.5;
  margin-bottom: 16px;
  color: #555;
}

.modal button { /* General modal button */
  background-color: #4CAF50;
  color: white;
  border: none;
  padding: 12px 24px;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.modal button:hover {
  background-color: #45a049;
}

/* Blur effect for background when modal is open */
.blur-bg {
  filter: blur(5px);
  transition: filter 0.3s;
}

/* Form styles within modals */
.form-group {
  margin-bottom: 15px;
  text-align: left;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

.form-group input {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-sizing: border-box; /* Ensure padding doesn't increase width */
}

/* Feedback options styling */
.feedback-options {
  margin: 20px 0;
  text-align: left;
}

.feedback-option {
  margin-bottom: 12px;
  padding: 10px;
  border-radius: 4px;
  background-color: #f5f5f5;
  transition: background-color 0.2s;
}

.feedback-option:hover {
  background-color: #e0e0e0;
}

.feedback-option input[type="checkbox"] {
  margin-right: 10px;
  vertical-align: middle;
}

.feedback-option label {
  cursor: pointer;
  font-size: 16px;
  vertical-align: middle;
}

/* PERFECT STYLING Specifics for Modals */
.perfect-modal { /* Can inherit from .modal and add specifics */
  padding: 20px; /* Adjusted padding if different from general .modal */
}

.congratulations-title {
  font-size: 24px !important;
  margin-bottom: 10px !important;
  font-weight: bold;
  color: #333;
  text-align: center;
}

.title-divider {
  width: 60px;
  height: 3px;
  background-color: #007bff;
  margin: 0 auto 15px auto;
}

.prize-won-perfect {
  margin-bottom: 8px;
  text-align: center;
}

.won-text {
  font-size: 18px;
  color: #333;
}

.prize-name-pink {
  font-size: 24px !important;
  color: #e91e63 !important;
  font-weight: bold;
}

.prize-source-blue {
  font-size: 18px !important;
  color: #007bff !important;
  text-align: center;
  margin-bottom: 15px;
  font-style: normal !important;
}

.content-divider {
  width: 100%;
  height: 1px;
  background-color: #ddd;
  margin: 15px 0;
}

.prize-restrictions-perfect {
  font-size: 16px !important;
  color: #333 !important;
  margin: 8px 0;
  padding: 0;
  font-style: normal !important;
  line-height: 1.3;
  text-align: left !important; /* Changed to left for mobile fix */
}

.restriction-line {
  margin: 1px 0 !important; /* Reduced margin */
  font-weight: normal;
  color: #333 !important; /* Ensured color from mobile fix */
  text-align: left !important; /* Changed to left for mobile fix */
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.prize-restrictions-inline-perfect {
  margin: 10px 0 15px 0;
  text-align: left !important; /* Changed to left for mobile fix */
}

.loading-restrictions-perfect {
  font-style: italic;
  color: #999;
  font-size: 14px;
  text-align: center; /* Keep loading text centered */
}

.all-prizes-section {
  margin-top: 20px;
}

.all-prizes-title {
  font-size: 18px !important;
  font-weight: bold;
  color: #333;
  margin-bottom: 15px !important;
  text-align: left;
}

.prizes-list-perfect {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.prize-rectangle {
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  padding: 12px;
  background-color: #ffffff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.prize-rectangle * { /* Ensure text within rectangle is left aligned */
  text-align: left !important;
}

.prize-header-perfect {
  margin-bottom: 6px;
}

.prize-number-perfect {
  color: #4CAF50 !important;
  font-weight: bold !important;
  font-size: 16px;
}

.prize-name-perfect {
  color: #000 !important;
  font-weight: bold !important;
  font-size: 16px !important;
}

.prize-divider {
  width: 100%;
  height: 1px;
  background-color: #eee;
opacity: 100;
  margin: 6px 0;
}

.prize-source-perfect {
  font-size: 14px !important;
  color: #007bff !important;
  font-style: normal !important;
  margin-bottom: 8px;
}

.continue-btn-perfect {
  background-color: #007bff !important;
  color: white !important;
  border: none !important;
  padding: 12px 30px !important;
  border-radius: 6px !important;
  font-size: 16px !important;
  font-weight: bold !important;
  cursor: pointer !important;
  margin-top: 20px !important;
  width: 100% !important;
  text-transform: uppercase !important;
  box-sizing: border-box;
}

.continue-btn-perfect:hover {
  background-color: #0056b3 !important;
}

.form-container-perfect {
  margin-top: 20px;
}

.form-container-perfect h3 {
  font-size: 18px;
  margin-bottom: 15px;
  color: #333;
}

.summary-container-perfect {
  text-align: left;
}

.summary-container-perfect .all-prizes-title {
  text-align: left;
}

.contact-info {
  margin-top: 20px;
  padding: 12px;
  background-color: #f8f9fa;
  border-radius: 6px;
  font-style: italic;
  color: #666;
  font-size: 14px;
  border-left: 4px solid #007bff;
}

.feedback-summary {
  margin-top: 20px;
  padding: 15px;
  background-color: #f8f9fa;
  border-radius: 6px;
  border-left: 4px solid #4CAF50;
}

.feedback-summary h3 {
  margin-top: 0;
  margin-bottom: 10px;
  color: #333;
  font-size: 16px;
}

.feedback-summary-list {
  list-style-type: none;
  padding-left: 0;
  margin: 0;
}

.feedback-item {
  padding: 4px 0;
  font-size: 14px;
}

.feedback-number {
  font-weight: bold;
  color: #4CAF50;
  margin-right: 5px;
}

/* Hide old restriction styles if they were ever used */
.prize-restrictions-compact,
.prize-restrictions-section,
.prize-restrictions {
  display: none !important;
}


/* --- FOOTER STYLES --- */
.shiny-footer {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: auto; /* Auto height to accommodate content and padding */
  min-height: 80px; /* Minimum height */
  padding: 15px 0; /* Vertical padding */
  overflow: hidden;
  box-shadow: 0 -8px 25px rgba(0, 0, 0, 0.3);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  z-index: 1000; /* Ensure footer is above other content but below modals */
  box-sizing: border-box;
}

.shiny-footer::before { /* Animated shine effect */
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
  animation: shine 3s infinite;
  z-index: 1; /* Below content */
}

@keyframes shine {
  0% { left: -100%; }
  100% { left: 100%; }
}

.footer-container { /* This is the 900px max-width centered container for buttons */
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 15px; /* Padding for smaller screens so content isn't at edges */
  display: flex;
  justify-content: center; /* Center the buttons horizontally */
  align-items: center;    /* Vertically center buttons */
  flex-wrap: wrap;        /* Allow buttons to wrap on smaller screens */
  gap: 20px;              /* Space between buttons */
  position: relative;     /* For z-index if needed */
  z-index: 2;             /* Above shine effect */
  height: 100%;
}

.footer-link {
  display: flex; /* For centering text inside */
  align-items: center;
  justify-content: center;
  width: 150px; /* As requested */
  height: 45px; /* Fixed height for consistency */
  padding: 0 10px; /* Horizontal padding if text is long, adjust as needed */
  box-sizing: border-box;

  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.95);
  text-decoration: none;
  font-size: 14px; /* Adjusted for better fit in 150px width */
  font-weight: 600;
  border-radius: 25px; /* More rounded */
  border: 1px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  text-transform: uppercase;
  letter-spacing: 0.5px; /* Adjusted letter spacing */
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); /* Simplified text shadow */
  text-align: center;
  
  transition: all 0.3s ease; /* Simplified transition */
  line-height: 1.2; /* Ensure text fits well vertically */
}

.footer-link:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.4);
  transform: translateY(-2px); /* Subtle lift */
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}

.footer-link:active {
  transform: translateY(0px); /* Press down effect */
  background: rgba(255, 255, 255, 0.15);
}


/* --- RESPONSIVE STYLES --- */
@media (max-width: 768px) { /* General tablet and smaller */
  #container {
    width: 70% !important; /* More fluid */
    max-width: none !important; /* Allow it to be smaller than 400px if needed */
    margin-top: 10px;
    margin-bottom: 10px; /* Reduced bottom margin */
  }
  .wheelSVG {
    /* Offset for 768px: ~65px (button) + ~80px (footer) + 15px (gap) = 160px */
    max-height: calc(100vh - 160px) !important; /* Optimized for tablet sizes */
  }
  .spinBtn {
    width: 280px !important;
    height: 50px !important;
    font-size: 18px !important;
    margin-bottom: 15px !important; /* Adjust space below button */
  }
  
  .modal, .perfect-modal { /* Consolidate modal responsiveness */
    width: 80%;
    max-width: none; /* Allow to be smaller than 400px */
    padding: 16px;
  }
  
  .congratulations-title { font-size: 20px !important; }
  .prize-name-pink { font-size: 20px !important; }
  .prize-source-blue { font-size: 16px !important; }
  .prize-restrictions-perfect { font-size: 14px !important; color: #555 !important; font-weight: normal; } /* Adjusted color for mobile */
  .restriction-line { font-size: 13px !important; color: #555 !important; font-weight: normal; } /* Adjusted color for mobile */
  
  .prize-rectangle { padding: 10px; }
  .prize-number-perfect, .prize-name-perfect { font-size: 14px !important; }
  .prize-source-perfect { font-size: 12px !important; }
  
  .continue-btn-perfect { padding: 10px 20px !important; font-size: 14px !important; }

  /* Responsive Footer Buttons */
  .footer-container {
    gap: 10px; /* Reduce gap for smaller screens */
    padding: 0 10px;
  }
  .footer-link {
    width: 150px; /* Slightly smaller buttons */
    height: 40px;
    font-size: 12px;
  }
}

@media (max-width: 480px) { /* Small mobile screens */
  .spinBtn {
    width: 80%;
    max-width: 260px; /* Ensure it doesn't get too small */
    height: 45px;
    font-size: 16px;
  }
.wheelSVG {
    /* Offset for 768px: ~65px (button) + ~80px (footer) + 15px (gap) = 160px */
    max-height: calc(100vh - 160px) !important; /* Optimized for tablet sizes */
  }
  .modal, .perfect-modal {
    padding: 12px;
  }
  .congratulations-title { font-size: 18px !important; }
  .prize-name-pink { font-size: 18px !important; }
  .prize-source-blue { font-size: 14px !important; }

  /* Footer on very small screens */
  .footer-container {
 //   flex-direction: column; /* Stack footer buttons */
    align-items: center;
    gap: 10px;
  }
  .footer-link {
    width: 80%; /* Make stacked buttons wider */
    max-width: 130px; /* But not too wide */
    height: 40px;
    font-size: 13px;
  }
  .shiny-footer {
    min-height: auto; /* Allow footer to shrink if content stacks */
    padding: 10px 0;
  }
}

/* Dark mode support (optional examples) */
@media (prefers-color-scheme: dark) {
  .modal, .perfect-modal {
    background-color: #333; /* Darker modal background */
    color: #f1f1f1; /* Lighter text */
  }
  .modal h2, .modal p, .congratulations-title, .won-text, .all-prizes-title,
  .form-container-perfect h3, .summary-container-perfect .all-prizes-title,
  .feedback-summary h3 {
    color: #f1f1f1; /* Lighter text for titles and paragraphs */
  }
  .title-divider { background-color: #009bff; } /* Adjust accent colors */
  .prize-name-pink { color: #f06292 !important; }
  .prize-source-blue { color: #64b5f6 !important; }
  .prize-restrictions-perfect, .restriction-line { color: #ccc !important; }
  .loading-restrictions-perfect { color: #aaa; }
  .prize-rectangle { background-color: #424242; border-color: #555; }
  .prize-number-perfect, .feedback-number { color: #81c784 !important; }
  .prize-name-perfect { color: #e0e0e0 !important; }
  .prize-source-perfect { color: #64b5f6 !important; }
  .content-divider, .prize-divider { background-color: #555; }
  .continue-btn-perfect { background-color: #009bff !important; }
  .continue-btn-perfect:hover { background-color: #007acc !important; }
  .feedback-option { background-color: #555; }
  .feedback-option:hover { background-color: #666; }
  .feedback-option label { color: #f1f1f1; }
  .contact-info, .feedback-summary { background-color: #3a3a3a; border-left-color: #009bff; color: #ccc; }

  .spinBtn { background-color: #5cb85c !important; } /* Dark mode spin button */
  .spinBtn:hover { background-color: #4cae4c !important; }
  .spinBtn:disabled { background-color: #555 !important; color: #999 !important; }

  .form-group input {
    background-color: #555;
    border-color: #666;
    color: #f1f1f1;
  }
}