:root {
  --bg-color: #050505;
  --text-color: #ffffff;
  --accent-color: #1e90ff; /* A nice blue, distinct from the red in the player if needed */
  --container-width: 800px;
  --spacing-unit: 1rem;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Analysis Screen Styles */
.analysis-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    display: none; /* Hidden by default */
}

.spinner {
    width: 50px;
    height: 50px;
    border: 5px solid #f3f3f3;
    border-top: 5px solid #177826;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 20px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.analysis-text {
    font-size: 1.2rem;
    color: #333;
    font-weight: bold;
    animation: pulseText 1.5s infinite;
}

@keyframes pulseText {
    0% { opacity: 0.6; }
    50% { opacity: 1; }
    100% { opacity: 0.6; }
}

/* Interstitial Message Styles */
.interstitial-message {
    text-align: center;
    padding: 2rem;
    display: none;
}

.interstitial-text {
    font-size: 1.5rem;
    color: #333;
    font-weight: bold;
    margin-bottom: 1rem;
}

.interstitial-sub {
    font-size: 1rem;
    color: #666;
}


body.quiz-theme {
    background-color: #ffffff;
    color: #000000;
}

body.quiz-theme .footer {
    color: #888;
}

/* Quiz Specific Header */
.quiz-header {
    width: 100%;
    max-width: 600px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    background: #fff;
    position: relative;
}

.back-btn {
    font-size: 1.5rem;
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

.logo-wrapper {
    flex-grow: 1;
    display: flex;
    justify-content: center;
}

.logo {
    height: 40px; /* Adjust based on actual logo */
    font-weight: bold;
    color: #177826; /* Green from reference */
    display: flex;
    align-items: center;
    gap: 5px;
}

.progress-container {
    width: 100%;
    max-width: 600px;
    padding: 0 1rem;
    margin-bottom: 2rem;
}

.progress-bar {
    width: 100%;
    height: 6px;
    background-color: #e0e0e0;
    border-radius: 3px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    width: 20%; /* Example progress */
    background-color: #000;
    border-radius: 3px;
}

.quiz-container {
  width: 100%;
  max-width: 600px;
  padding: 0 var(--spacing-unit);
  margin-top: 0; /* Adjusted for header */
  text-align: left; /* Aligned left usually for this style, or center? Ref looks centered title, buttons full width */
}

.quiz-question {
  font-size: 1.25rem;
  font-weight: 800;
  margin-bottom: 1.5rem;
  line-height: 1.2;
  color: #000;
  text-align: center;
}

.quiz-options {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.quiz-btn {
  background-color: #e6e6e6;
  color: #000000;
  border: 1px solid #cccccc;
  padding: 1rem 1.5rem;
  border-radius: 50px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.quiz-btn:hover {
  background-color: #f5f5f5;
  border-color: #bbb;
  transform: none;
}

/* Arrow icon circle */
.arrow-icon {
    width: 24px;
    height: 24px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #666;
    font-size: 12px;
}

/* Restore quiz image styles */
.quiz-image-wrapper {
  display: block;
  width: 100%;
  height: 150px; /* Reduced height as requested */
  overflow: hidden;
  border-radius: 12px;
  margin-bottom: 2rem;
  box-shadow: 0 5px 15px rgba(0,0,0,0.05);
  position: relative;
}

.quiz-image {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Changed to contain so full image is visible if it was being cropped too much, or 'cover' if they just want a shorter banner. Let's stick to cover for banners usually, but 'contain' might make it look 'smaller' visually if it has whitespace. Let's try height reduction with cover first, but usually 'smaller image' means less screen real estate. */
    object-fit: cover; 
}

.quiz-btn::before { display: none; }


.main-container {
  width: 100%;
  max-width: var(--container-width);
  padding: 0 var(--spacing-unit);
  margin-top: 2rem;
  text-align: center;
}

.headline {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  line-height: 1.2;
}

.headline span {
  color: #ff0000; /* Red emphasis to match VSL style urgency */
}

.subheadline {
  font-size: 1.1rem;
  color: #cccccc;
  margin-bottom: 2rem;
}

.video-wrapper {
  width: 100%;
  margin-bottom: 2rem;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
  border-radius: 8px; /* Optional rounded corners */
  overflow: hidden;
  background-color: #000;
  position: relative;
}

.video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 10;
  cursor: pointer;
  transition: opacity 0.3s;
}

.video-overlay.hidden {
  opacity: 0;
  pointer-events: none;
}

.play-icon {
  width: 80px;
  height: 80px;
  background: rgba(255, 0, 0, 0.9);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 1rem;
  box-shadow: 0 0 20px rgba(255, 0, 0, 0.5);
  animation: pulse 1.5s infinite;
}

.play-icon::after {
  content: '';
  width: 0;
  height: 0;
  border-left: 20px solid white;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  margin-left: 5px;
}

.overlay-text {
  color: white;
  font-size: 1.5rem;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 1px;
}

@keyframes pulse {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.7); }
  70% { transform: scale(1.1); box-shadow: 0 0 0 20px rgba(255, 0, 0, 0); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 0, 0, 0); }
}

.delayed-section {
  display: none;
  margin-top: 2rem;
  padding-bottom: 4rem;
}

/* Removed duplicate quiz styles that were causing conflicts */


.cta-button {
  display: inline-block;
  background: linear-gradient(135deg, #1fa2ff 0%, #12d8fa 100%);
  color: white;
  padding: 1.25rem 3rem;
  border-radius: 50px;
  font-size: 1.5rem;
  font-weight: bold;
  text-decoration: none;
  box-shadow: 0 10px 20px rgba(31, 162, 255, 0.3);
  transition: transform 0.2s, box-shadow 0.2s;
}

.cta-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 15px 30px rgba(31, 162, 255, 0.4);
}

.footer {
  margin-top: auto;
  padding: 2rem;
  font-size: 0.8rem;
  color: #666;
  text-align: center;
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

/* Mobile Adjustments */
@media (max-width: 600px) {
  .headline {
    font-size: 1.5rem;
  }
  
  .main-container {
    margin-top: 1rem;
  }
}