/* ==================================================
   GLOBAL
   ================================================== */


   body {
      font-family: 'Exo 2', sans-serif;
      margin: 0;
      padding: 0;
      background-color: #DFDFDF;
      height: 100%;
    }
  
    /* Optional customizations */
  .container {
     background-color: #DFDFDF; /* Matches the project's background */
  }
  
  h1 {
     font-size: 30px;
     font-weight: 600;
     color: #272D2D;
     margin-bottom: 10px;
  }
  
  p {
     font-size: 11px;
     color: #666;
  }
  
  p a {
     color: #188C48;
     text-decoration: none;
  }
  
  p a:hover {
     text-decoration: underline;
  }
  
  .btn-welc
  {
     color: white;
     background-color: #23CE6B;
     border: none;
     transition: background-color 0.3s ease, transform 0.2s ease; /* Smooth hover animation */
  }
  
  /* Hover state for welcome button */
  .btn-welc:hover {
     background-color: #1FB862; /* Slightly darker/lighter shade for feedback */
     color: #fff;
     transform: scale(1.03); /* Subtle grow effect */
     text-decoration: none; /* Ensure no underline appears */
  }
  
  .btn-success {
     background-color: #188C48;
     border: none;
  }
  
  .btn-success:hover {
     background-color: #145A36;
  }
  
  .g-recaptcha {
     display: flex;
     justify-content: center;
  }
  
  .auth-input {
     height: 45px;
     background-color: #DFDFDF;
     border: 1px solid #AAA8A8;
     border-radius: 12px;
     padding: 10px 18px 10px 18px;
     font-size: 14px;
     color: #333;
     box-shadow: none;
  }
  
  .auth-input:focus {
     border-color: #188C48;
     background-color: #DFDFDF;
     outline: none;
     box-shadow: 0 0 0 3px rgba(24, 140, 72, 0.3);
  }
  
  .auth-checkbox {
     display: none;
  }
  
  .form-check {
     position: relative;
     padding-left: 30px;
  }
  
  .form-check-label {
     cursor: pointer;
  }
  
  .auth-checkbox + .form-check-label::before {
     content: '';
     display: inline-block;
     position: absolute;
     left: 0;
     top: 50%;
     transform: translateY(-50%);
     width: 24px;
     height: 24px;
     background-color: #DFDFDF;
     border: 2px solid #ccc;
     border-radius: 4px;
     transition: all 0.3s ease;
  }
  
  .auth-checkbox:checked + .form-check-label::before {
     background-color: #188C48;
     border-color: #188C48;
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425z'/%3E%3C/svg%3E");
     background-repeat: no-repeat;
     background-position: center;
     background-size: 14px;
  }
  
  .auth-checkbox + .form-check-label:hover::before,
  .auth-checkbox:focus + .form-check-label::before {
     border-color: #188C48; 
     box-shadow: 0 0 0 3px rgba(24, 140, 72, 0.3);
  }
  
  
  .button-container {
     display: flex;
     justify-content: left;
     align-items: left;
  }
  
  
  .auth-btn {
     width: 150px; /* Set fixed width */
     height: 40px; /* Set fixed height */
     border: 1px solid #272d2d; /* Outline with the theme color */
     background-color: transparent;
     color: #272d2d; /* Theme color for text */
     font-size: 14px; /* Font size */
     font-weight: 500; /* Slightly bold text */
     border-radius: 5px; /* Optional: Rounded corners */
     cursor: pointer; /* Pointer cursor for hover state */
     transition: all 0.3s ease; /* Smooth hover and focus effects */
  }
  
  /* Hover state */
  .auth-btn:hover {
     background-color: #272d2d; /* Fill background with theme color */
     color: #fff; /* Change text color to white */
  }
  
  /* Focus state */
  .auth-btn:focus {
     outline: none; /* Remove default focus outline */
     box-shadow: 0 0 0 3px rgba(24, 140, 72, 0.3); /* Subtle glow effect */
  }
  
  /* ==================================================
     AUTH LAYOUT HELPERS
     ================================================== */
  .auth-container {
    max-width: 1600px;
    margin: 0 auto;
    padding-left: 0;
    padding-right: 0;
  }
  
  .image-section {
    height: 100vh;
    overflow: hidden;
    line-height: 0; /* avoid descender gap */
  }
  
  /* Ensure full image visible on desktop */
  @media (min-width: 992px) {
    .image-section img {
      display: block; /* remove baseline gap */
      width: 100%;
      height: 100%;
      object-fit: cover !important;
      object-position: center center;
    }
  }
  
  .form-card {
    background: transparent;
  }
  
  /* Auth brand */
  .auth-logo img {
    height: 28px;
    width: auto;
  }
  
  /* Password toggle button position */
  .password-input-wrapper { position: relative; }
  .password-toggle {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    height: 36px;
    width: 36px;
    background: none;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 20;
    cursor: pointer;
  }
  .password-toggle .material-icons-outlined { pointer-events: none; }
  .password-input-wrapper .auth-input { padding-right: 44px !important; }
  
  /* Helper text sizing inside auth forms */
  .form-card .small {
    font-size: 14px !important;
  }
  
  /* ==================================================
     RESPONSIVE
     ================================================== */
  @media (max-width: 991.98px) {
    h1 {
      font-size: 26px;
    }
    p.small {
      font-size: 12px;
    }
    .form-section {
      padding: 24px !important;
    }
    .form-card {
      background: #ffffff;
      border-radius: 5px;
      outline: 0.5px solid #969696;
      outline-offset: 0;
      padding: 20px;
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    }
    .button-container {
      justify-content: stretch;
    }
    .auth-btn {
      width: 100%;
    }
    /* Visually hide labels on mobile but keep them for screen readers */
    .form-card .form-label {
      position: absolute !important;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
    }
  }
  
  @media (max-width: 575.98px) {
    h1 {
      font-size: 24px;
      margin-bottom: 8px;
    }
    .auth-input {
      height: 48px;
      font-size: 16px; /* prevents iOS zoom */
      background-color: #FCFCFC;
    }
  }
  
  /* Mobile auth footer */
  .auth-mobile-footer {
    display: none;
  }
  
  @media (max-width: 991.98px) {
    .auth-mobile-footer {
      display: block;
      background: #ffffff;
      color: #272D2D;
      text-align: center;
      font-size: 12px;
      padding: 10px 12px;
      border-top: 1px solid #eaeaea;
    }
  }