/* Load local Poppins font files from ../fonts/ */
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}


.brand {
  color: #ffffff; 
  font-size: 80px; 
  margin: 0;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -1px;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

body {

    
        margin: 0px;
        padding: 0px;
        background-color: #134984;
        text-align: center;
        font-family: 'Poppins', verdana, arial, helvetica, sans-serif;
   
      .site-header, header{
        position: relative;
        height: 234px;
        box-sizing: border-box;
        padding: 12px 0;
        overflow: visible;
        background-color:#134984;
      }
      /* Fallback for very small viewports: use full width and a minimum height */
      @media (max-width: 480px) {
        #container {
          width: calc(100% - 32px);
          aspect-ratio: auto;
          min-height: 420px;
          margin: 12px auto;
        }
      }

      #left{
        position: absolute;
        left: 24px;
        top: 50%;
        transform: translateY(-50%);
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
      }

      #right-group{
        position: absolute;
        right: 0; 
        top: 50%;
        transform: translateY(-50%);
        display: flex;
        align-items: center;
        gap: 0; 
        white-space: nowrap; 
      }

      .header-photo{
        display: block;
        width: 610px; 
        height: 234px; 
        object-fit: cover;
        border-radius: 6px;
        flex: 0 0 auto;
        z-index: 2;
        margin-right: 0; 
      }

      .tagline{
        color: #ffffff;
        margin: 0 0 0 0;
        font-size: 20px; 
        font-weight: 600;
        text-align: left; 
        white-space: normal; 
        z-index: 3;
      }

      /* Specific tweaks when the tagline is under the brand on the left */
      #left .tagline {
        margin-top: 8px;
        max-width: 520px;
        line-height: 1.1;
      }

      
      @media (max-width: 760px){
        #left{ position: static; transform: none; padding-left: 16px; }
        #right-group{ position: static; transform: none; justify-content: flex-end; padding: 12px 16px; }
        .header-photo{ width: 100%; height: 140px; }
        .tagline{ text-align: left; }
      }
  height: 234px;
  box-sizing: border-box;
  
}




      /* Main white content area: center as a square and leave space on left/right */
      #container{
        border: 5px solid #000;
      
        background-color: #cac6c6;
        width: min(850px, 80vw); /* fixed max width but responsive down */
        aspect-ratio: 1 / 1; /* keep container square */
        margin: 0px auto; /* center horizontally and give vertical spacing */
        overflow: hidden;
        box-sizing: border-box;
      }

      #content {
        margin: 50px auto 0px auto;
        padding: 50px 20px 20px 20px; 
        width: 700px;
        
        overflow: auto;
        text-align: left;
        position: relative; 
        padding-right: 120px; 
        
      }



.form-column {
  display: flex;
  flex-direction: column;
  align-items: flex-start; 
  max-width: 420px;
  gap: 22px; 
  margin-left: 40px;
}

.form-column .text-input {
  width: 300px !important;
  box-sizing: border-box;
}


#content > p:first-of-type {
  text-align: center;
  margin: 0 0 20px;
}


.form-column .submit_button {
  align-self: flex-start; 
  margin: 18px 0 0 0;
  display: inline-block;
}


.legacy-toggle-right {
  position: absolute;
  bottom: 12px;
  right: 12px;
}

.legacy-toggle-right input {
  padding: 6px 10px;
  font-size: 13px;
  background: #e6e6e6;
  color: #111;
  border-radius: 6px;
  border: 0;
}
      
      #content ol {
        padding-left: 40px;
      }
      
      .welcome {
        color: #000;
        font-family: 'Poppins', verdana,arial,helvetica, sans-serif;
        font-size: 25px;
      }
      .agree {
        background-color: #0a0;
        /*color: green;*/
        font-size: 20px;
      }
      .no_agree {
        background-color: #d00;
        /*color: red;*/
        font-size: 20px;
      }
      .step {
        font-size: 18px;
        padding: 4px;
      }

      .disclaimer_button {
        padding: 6px 12px;
        color: #fff;
        font-weight: bold;
        margin: 4px;
        border-radius:          7px;
         -o-border-radius:      7px;
         -icab-border-radius:   7px;
         -khtml-border-radius:  7px;
         -moz-border-radius:    7px;
         -webkit-border-radius: 7px;
      }
      .submit_button {
        background-color: #5AA300;
        font: normal 16px 'Poppins', verdana,arial,helvetica, sans-serif;
        border: 0px;
        padding: 28px 52px; /* larger click target */
        color: #ffffff;
        font-weight: 700;
        font-size: 15px;
        text-transform: uppercase;
        letter-spacing: 0.6px;
        margin: 20px 0 4px;
        border-radius:          8px;
         -o-border-radius:      7px;
         -icab-border-radius:   7px;
         -khtml-border-radius:  7px;
         -moz-border-radius:    7px;
         -webkit-border-radius: 7px;
      }
    .selected_button {
          cursor: pointer;
          background-color: #5AA300;
      font: normal 16px 'Poppins', verdana,arial,helvetica, sans-serif;
          border: 0px;
          padding: 6px 12px;
          color: #000;
          font-weight: bold;
          margin: 4px;
          min-width: 110px;
          border-radius:          7px;
          -o-border-radius:      7px;
          -icab-border-radius:   7px;
          -khtml-border-radius:  7px;
          -moz-border-radius:    7px;
          -webkit-border-radius: 7px;
      }
    .unselected_button {
          cursor: pointer;
          background-color: #ccc;
      font: normal 16px 'Poppins', verdana,arial,helvetica, sans-serif;
          border: 0px;
          padding: 6px 12px;
          color: #000;
          font-weight: bold;
          margin: 4px;
          min-width: 110px;
          border-radius:          7px;
          -o-border-radius:      7px;
          -icab-border-radius:   7px;
          -khtml-border-radius:  7px;
          -moz-border-radius:    7px;
          -webkit-border-radius: 7px;
      }
      #name {
          margin-top: 10px;
          margin-bottom: 5px;
      }
      #name.legacy-hidden {
          visibility: hidden;
      }
      .submit_button:hover {
        cursor: pointer;
      }

.text-input {
  font: normal 16px 'Poppins', verdana,arial,helvetica, sans-serif;
  width: 230px;
  border: 1px solid #000;
  padding: 5px;
  height: 31px;
}

#form-inner-content, .form-inner-content {
  display: block;
  margin-left: 0;  /* align to content left edge */
  text-align: left;
}

.spacer {
  font-size: 20px;
}

/* Modal styles for disclaimer popup */
#disclaimer-modal { position: fixed; top: 0; left: 0; right: 0; bottom: 0; display: none; z-index: 9999; }
#disclaimer-modal .modal-backdrop { position: absolute; top:0; left:0; right:0; bottom:0; background: rgba(0,0,0,0.6); }
#disclaimer-modal .modal { position: relative; max-width: 900px; margin: 6vh auto; background: #fff; padding: 20px; border-radius: 6px; z-index: 10000; box-shadow: 0 6px 24px rgba(0,0,0,0.4); }
#disclaimer-modal .modal-body { max-height: 70vh; overflow: auto; text-align: left; font-size: 13px; }
#disclaimer-modal .modal-close { position: absolute; right: 10px; top: 6px; text-decoration: none; color: #333; font-weight: bold; }
#disclaimer-modal .modal-agree, #disclaimer-modal .modal-disagree { margin: 8px 6px; }

/* Disabled submit visual */
input.submit_button[disabled] { opacity: 0.5; cursor: default; }