<style>
  .mams-login {
    max-width: 760px;
    margin: 0 auto;
    font-family: inherit;        /* uses your site font */
    color: inherit;
    border: none;
    background: transparent;     /* flows with the page */
    box-shadow: none;
    padding: 0;
  }
  .mams-login .alert-danger {
    background: #fdecea;
    color: #a12a1f;
    padding: 0.75rem 1rem;
    border-radius: 6px;
    margin-bottom: 1rem;
  }

  /* email + password side by side */
  .mams-fields {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-bottom: 1.25rem;
  }
  .mams-field {
    flex: 1 1 260px;
    display: flex;
    flex-direction: column;
  }
  
  /* FIXED: Increased label size for better readability */
  .mams-field label {
    font-family: inherit;
    font-weight: 600;            /* slightly bolder */
    font-size: 1.05rem;          /* increased from 0.85rem */
    margin-bottom: 8px;
    color: inherit;
  }
  
  /* FIXED: Increased text size and padded fields for effortless reading */
  .mams-login input[type="text"],
  .mams-login input[type="email"],
  .mams-login input[type="password"] {
    width: 100%;
    background-color: #e6f2ff;   /* light blue fields */
    color: #1a202c;              /* Forced dark text for readability */
    border: 1px solid #cfe0f0;
    border-radius: 6px;
    padding: 14px 16px;          /* more breathing room */
    font-family: inherit;
    font-size: 1.1rem;           /* increased from 1rem */
    transition: border-color 0.2s, box-shadow 0.2s;
  }
  .mams-login input:focus {
    outline: none;
    border-color: #4a90d9;
    box-shadow: 0 0 0 3px rgba(74, 144, 217, 0.18);
  }

  /* FIXED: Enlarged checkbox label text */
  .mams-remember {
    font-family: inherit;
    font-size: 1rem;             /* increased from 0.85rem */
    margin-bottom: 1.5rem;
    color: inherit;
  }
  .mams-remember input { 
    margin-right: 8px; 
    vertical-align: middle; 
    transform: scale(1.1);       /* slightly larger checkbox */
  }

  /* green sign-in button */
  .mams-login .btn-active {
    display: block;
    width: 100%;
    background-color: #28a745;
    color: #fff !important;      /* Forced white text */
    border: none;
    border-radius: 6px;
    padding: 16px;
    font-family: inherit;
    font-size: 1.15rem;          /* slightly boosted */
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s;
  }
  .mams-login .btn-active:hover { background-color: #218838; }

  /* Styled links at bottom */
  .mams-links {
    margin-top: 1.5rem;
    font-size: 1rem;             /* bumped up for clarity */
    color: inherit;
  }
  .mams-links a {
    color: #4a90d9;
    text-decoration: none;
  }
  .mams-links a:hover {
    text-decoration: underline;
  }

  .mams-honeypot { display: none; }
</style>

{if isset($alt_loginform)}
  <div class="row" id="altlogin">{$alt_loginform}</div><br/>
{/if}

<fieldset class="mams-login" id="loginform">
  {$startform}{xt_form_csrf}

  {* honeypot — hidden via CSS, do not change *}
  <input class="mams-honeypot" type="text" name="{$actionid}mams__data" value=""/>

  {if $error}<div class="alert alert-danger">{$error}</div>{/if}

  <div class="mams-fields">
    <div class="mams-field">
      <label for="mams_username">*{$prompt_username}:</label>
      <input
        type="{if $username_is_email}email{else}text{/if}"
        id="mams_username"
        name="{$fldname_username}"
        value="{$username}"
        size="{$username_size}"
        maxlength="{$username_maxlength}"
        {if !$username_is_email}autocorrect="off" autocapitalize="off"{/if}
        required
      />
    </div>

    <div class="mams-field">
      <label for="mams_password">*{$prompt_password}:</label>
      <input
        type="password"
        id="mams_password"
        name="{$fldname_password}"
        value="{$password}"
        size="{$password_size}"
        maxlength="{$password_maxlength}"
        required
      />
    </div>
  </div>

  {if isset($captcha)}
    <div class="mams-fields">
      <div class="mams-field">
        <label>{$captcha_title}</label>
        <div>
          {$captcha}
          {if $need_captcha_input}
            <input type="text" name="{$actionid}mams_input_captcha" size="10"/>
          {/if}
        </div>
      </div>
    </div>
  {/if}

  {if isset($prompt_rememberme)}
    <div class="mams-remember">
      <label>
        <input type="checkbox" name="{$actionid}mams_rememberme" value="1" {if $rememberme==1}checked{/if}/>
        {$prompt_rememberme}
      </label>
    </div>
  {/if}

  <div>
    <button class="btn btn-active" name="{$actionid}mams_submit">
      {$MAMS->Lang('login')}
    </button>
  </div>

  {if isset($url_lostun) || isset($url_forgot)}
    <div class="mams-links">
      {if isset($url_forgot)}
        <a href="{$url_forgot}" title="{$MAMS->Lang('info_forgotpw')}">{$MAMS->Lang('forgotpw')}</a>
      {/if}
      {if isset($url_lostun)}
        | <a href="{$url_lostun}" title="{$MAMS->Lang('info_lostun')}">{$MAMS->Lang('lostusername')}</a>
      {/if}
    </div>
  {/if}

  {$endform}
</fieldset>