@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&display=swap');


/* Container visibility system */
.container {
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s ease;
      position: absolute; 
      top: 0;
      left: 0;
      width: 100%;
      height: 100vh; 
    }
    
    .container.active {
      opacity: 1;
      pointer-events: auto;
    }

    /* Front Screen Styles */
    .front-screen {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      background-color: #0e2330;
      color: #ffffff;
      text-align: center;
    }

    .logo1 {
      width: 100%;
      max-width: 600px;
      margin-bottom: 20px;
      margin-top: 140px;
    }

    .logo2 {
      position: absolute;
      top: 20px;
      left: 20px;
      width: 80px;
      height: auto;
    }

    .logo3 {
      width: 100%;
      max-width: 300px;
      margin-bottom: 20px;
    }

    .company-name {
      font-size: 12px;
      font-weight: 700;
      margin-top: 20px;
      position: absolute;
      bottom: 20px;
      left: 1rem;    
    }

    .main-text {
      font-size: 48px;
      font-weight: 600;
      margin-top: 20px;
      margin-bottom: 30px;
    }

    body {
      margin: 0;
      padding: 0;
      background-color: #0e2330;
      color: #ffffff;
      font-family: 'Montserrat', sans-serif;
    }

    /* Quiz Screen Styles */
    .quiz-screen {
      display: flex;
      justify-content: center;
      align-items: stretch;
      background-color: #0e2330;
      /* padding: 2rem; */
      padding: 0;
      width: 100%;
      height: 100vh;
    }

    .quiz-container {
      /* max-width: 1200px; */
      max-width: 100%;
      margin: 0 auto;
      width: 100%;
      height: 100vh;
      padding: 2rem;
      padding-bottom: 6rem;
      position: relative;
      min-height: 1.5em;
      background-color: #435569;
      border-radius: 12px;
      border: 2px solid #435569;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
      box-sizing: border-box;
      overflow: hidden;
    }

    .question {
      color: #ed7d31;
      font-size: 1.5rem;
      line-height: 2rem;
      margin-bottom: 1rem;
      padding: 0.25rem 0;
      min-height: 6rem;
    }

    .content {
      display: flex;
      gap: 3rem;
      flex-wrap: wrap;
      align-items: flex-start;
    }

    .options {
      display: flex;
      flex-direction: column;
      gap: 15px;
      margin-top: 0.5rem;
      width: 50%;
    }

    .option-button {
      background-color: #7a6d58;
      border: none;
      box-sizing: border-box;
      color: white;
      margin-bottom: 10px;
      padding: 12px;
      font-size: 16px;
      text-align: left;
      cursor: pointer;
      transition: background-color 0.3s;
      width: 100%;
      max-width: 100%;
    }

    .option-button:hover {
      background-color: #ab494e;
    }

    .option-button.selected {
      border: 2px solid #ed7d31;
      background-color: #ab494e;
    }

    .image-container {
      flex: 1;
    }

    .image-container img {
      width: 100%;
      max-width: 600px;
      height: auto;
      display: block;
      border: 2px solid #668283;
      border-radius: 8px;
    }

    .options.image-options {
      display: flex;
      flex-direction: row;
      justify-content: center;
      gap: 1rem;
      flex-wrap: wrap;
      margin: 1rem 0;
      width: 100%;
    }

    .image-option {
      flex: 1 1 clamp(30%, 30%, 100%);
      max-width: clamp(30%, 30%, 100%);
      cursor: pointer;
      border: 2px solid transparent;
      border-radius: 8px;
      overflow: hidden;
      transition: border-color 0.2s ease;
      box-sizing: border-box;
    }

    .image-option img {
      width: 100%;
      height: auto;
      display: block;
      object-fit: contain;
    }

    .image-option.selected {
      border-color: #007bff;
    }

    .image-label {
      text-align: center;
      font-weight: bold;
      margin-bottom: 0.5rem;
    }

    .image-containers2 {
      display: flex;
      flex-direction: column;
      gap: 1rem;
      width: 35%;
      margin-top: -70px;
      padding-top: 0;
    }

    .graph img {
      width: 100%;
      max-width: 600px;
      height: auto;
      display: block;
      border: 2px solid #668283;
      border-radius: 8px;
    }

    .navigation {
      position: absolute;
      bottom: 2rem;
      left: 2rem;
      display: flex;
      gap: 1rem;
    }

    .nav-button, .submit-button, .start-button {
      /* min-width: 140px; */
      background-color: #7A6D58;
      color: white;
      border: none;
      padding: 0.75rem 1.5rem;
      font-size: 1rem;
      border-radius: 6px;
      cursor: pointer;
      transition: background-color 0.3s ease;
    }

    .nav-button:hover:not(:disabled), .submit-button:hover:not(:disabled), .start-button:hover {
      background-color: #ab494e;
    }

    .nav-button:disabled {
      background-color: #929cb8;
      cursor: not-allowed;
    }

    /* Result Screen */
    .result-screen {
      height: 100vh;        /* Fills entire window height */
      width: 100vw;             /* Fills entire window width */
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      background-color: #0e2330;
      text-align: center;
      /* padding: 2rem; */
      position: fixed;          /* Ensures it fills window above anything */
      top: 0;
      left: 0;
    }

    .result-container {
      width: 100vw;            /* Fill screen width */
      height: 100vh;           /* Fill screen height */
      display: flex;
      flex-direction: column;
      background-color: #435569;
      /* padding: 2rem; */ 
      border-radius: 12px;
      color: #ed7d31;
      font-size: 1.4rem;
      justify-content: center; /* vertical centering within box */
      align-items: center;     /* horizontal centering */
      box-sizing: border-box;
      text-align: center;
    }

    .button-row {
      display: flex;
      justify-content: center;
      gap: 20px;
      margin-top: 20px;
      width: 100%;
    }

    .button-row button {
      background-color: #7a6d58;
      color: white;
      padding: 10px 20px;
      border: none;
      font-size: 16px;
      border-radius: 5px;
      cursor: pointer;
    }

    .button-row button:hover {
      opacity: 0.9;
    }

    /* Mobile Responsive */
    @media (max-width: 600px) {
      .content {
        flex-direction: column;
        align-items: center;
        gap: 1.5rem;
      }

      .options {
        width: 100%;
      }

      .option-button {
        width: 100%;
        font-size: 18px;
        padding: 14px;
      }

      .options.image-options {
        flex-direction: column !important;
        align-items: center;
        width: 100%;
      }

      .image-option {
        width: 100%;
        max-width: 100% !important;
      }

      .image-containers2 {
        width: 100%;
        margin-top: 1rem;
      }

      .image-container img {
        max-width: 100%;
        width: 100%;
      }

      .quiz-screen {
        padding: 0;
        height: 100vh;
        width: 100vw;
      }

      .quiz-container {
        padding: 1rem;
        padding-bottom: 8rem;
        border-radius: 0;
        border: none;
        box-shadow: none;
        height: 100vh; 
        width: 100vw;
        max-width: 100vw;
        /* max-height: calc(100vh - 7rem); /* space for padding/buttons */
        overflow-y: auto;
        background: #435569; /* same as nav bar */
        max-height: 100vh;         /* full height */
        overflow-y: auto;
        padding-bottom: 8rem;      /* space for nav buttons */
      }

      .question {
        font-size: 1.2rem;
        line-height: 1.5rem;
        min-height: 4rem;
        margin-bottom: 0.5rem;
      }

      .navigation {
        position:fixed; 
        bottom: 0;
        left: 0;
        width: 100%;
        padding: 1rem;
        background: #435569;
      }

      .result-container {
      width: 100vw;
      height: 100vh;
      padding: 1rem;
      border-radius: 0;
      }
  
      .result-screen {
      min-height: 100vh;
      width: 100vw;
      padding: 0;
      }
    
  }