/* Global styles that apply to the whole page */
body {
    font-family: 'Inter', sans-serif;
    background-color: #f5f5f5;
    overflow-x: hidden;
  }
  
  /* Base font size for resizing */
  html {
      font-size: 18px;
      overflow-x: hidden;
  }
  html.text-sm { font-size: 16px; }
  html.text-lg { font-size: 20px; }
  
  /* Class to control visibility with JavaScript */
  .hidden {
      display: none;
  }
  
  .background-container {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: -1;
    background-image: url('https://storage.googleapis.com/flutterflow-io-6f20.appspot.com/projects/sniff-test-60x76s/assets/81oujn1e930o/fw-background-swoosh.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% auto;
  }
  
  .main-content { 
      background-color: #ffffff; 
  }
  
  /* Styles for the result cards based on severity */
  .result-card-base { 
      border-left-width: 8px; 
  }
  .result-card-none { 
      border-left-color: #22c55e; /* green-500 */
  }
  .result-card-low { 
      border-left-color: #f59e0b; /* amber-500 */
  }
  .result-card-medium { 
      border-left-color: #ef4444; /* red-500 */
  }
  .result-card-high { 
      border-left-color: #8b5cf6; /* violet-500 */
  }
  
  /* Spinner for loading state */
  .loader {
    border: 4px solid #f3f3f3;
    border-top: 4px solid #3498db;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 2s linear infinite;
  }
  
  @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
  
  /* --- Styles specific to the Condensation Calculator --- */
  .chart-container {
      position: relative;
      width: 100%;
      max-width: 600px;
      margin-left: auto;
      margin-right: auto;
      height: 300px;
      max-height: 400px;
  }
  @media (min-width: 640px) {
      .chart-container {
          height: 350px;
      }
  }
  .slider-thumb::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 28px;
      height: 28px;
      background: #3b82f6;
      cursor: pointer;
      border-radius: 50%;
  }
  .slider-thumb::-moz-range-thumb {
      width: 28px;
      height: 28px;
      background: #3b82f6;
      cursor: pointer;
      border-radius: 50%;
  }
  .active-btn {
      background-color: #3b82f6;
      color: white;
      border-color: #3b82f6;
  }
  details > summary {
      list-style: none;
      cursor: pointer;
      padding: 1rem;
      background-color: #f3f4f6;
      border-radius: 0.5rem;
      font-weight: 600;
      display: flex;
      justify-content: space-between;
      align-items: center;
  }
  details > summary::-webkit-details-marker {
      display: none;
  }
  details > summary::after {
      content: '+';
      font-size: 1.5rem;
      transition: transform 0.2s;
  }
  details[open] > summary::after {
      transform: rotate(45deg);
  }
  details[open] > summary {
      background-color: #e5e7eb;
  }
  .details-content {
      padding: 1rem;
      border: 1px solid #e5e7eb;
      border-top: none;
      border-radius: 0 0 0.5rem 0.5rem;
  }
  .aspect-video {
      position: relative;
      width: 100%;
      padding-bottom: 56.25%; /* 16:9 */
  }
  .aspect-video iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
  }