/* =============================================================================
 * BASELINE — 14-signin.css
 * =============================================================================
 *
 * File: /css/14-signin.css
 * Module: KMA CSS MODULE 14 — TML SIGN IN FORM
 * Version: 1.0
 * Last Updated: 2026-03-22
 *
 * PURPOSE
 * -------
 * Styles the Theme My Login (TML) Sign In form to match the Registration
 * experience with a clean, centered, and consistent UI.
 *
 * DESIGN GOALS
 * ------------
 * - Centered, professional layout
 * - Strong label hierarchy
 * - Clean input styling
 * - Inline "Remember Me" alignment
 * - Centered action buttons (Sign In + Cancel)
 * - Clean link presentation (Register / Forgot Password)
 *
 * SCOPE
 * -----
 * Targets TML login form elements only (.tml namespace)
 *
 * NOTES
 * -----
 * - Heavy use of !important to override TML defaults
 * - Multiple redundancy blocks intentionally retained to defeat plugin CSS
 * - Layout relies on flex + grid hybrid approach
 *
 * =============================================================================
 */


/* ============================================================================
   01 — GLOBAL CLEANUP
   ============================================================================ */

/* Hide any TML indicator blocks if present */
.tml .tml-indicator-wrap { display: none !important; }


/* ============================================================================
   02 — FORM LAYOUT (CENTERED GRID)
   ============================================================================ */

.tml form {
  display: grid;
  grid-template-columns: 1fr;
  row-gap: 12px;
  align-items: start;

  width: 100%;
  max-width: 560px;
  margin: 0 auto;
}


/* ============================================================================
   03 — LABELS
   ============================================================================ */

.tml label {
  font-weight: 700;
  display: inline-block;
  margin-bottom: 6px;
}


/* ============================================================================
   04 — INPUT FIELDS
   ============================================================================ */

.tml input[type="text"],
.tml input[type="email"],
.tml input[type="password"] {
  width: 100%;
  padding: 12px 12px;
  border: 1px solid #cfcfcf;
  border-radius: 6px;
  box-sizing: border-box;
}


/* ============================================================================
   05 — REMEMBER ME (PRIMARY ALIGNMENT BLOCK)
   ============================================================================ */

.tml-rememberme-wrap label {
  font-weight: 600;
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.tml-rememberme-wrap input[type="checkbox"] {
  transform: translateY(1px);
}


/* ============================================================================
   06 — SUBMIT / ACTION BUTTONS
   ============================================================================ */

.tml-submit-wrap {
  display: flex;
  justify-content: center;
  gap: 14px;
  align-items: center;
  text-align: center;
  margin-top: 6px;
}

.tml input[type="submit"] {
  padding: 12px 28px;
  border-radius: 6px;
  font-weight: 700;
}


/* Secondary "Cancel" button */
.tml-cancel-button {
  display: inline-block;
  padding: 12px 28px;
  border-radius: 6px;
  font-weight: 700;
  text-decoration: none;
  border: 1px solid #cfcfcf;
  background: #f5f5f5;
  color: #333;
}

.tml-cancel-button:hover {
  background: #e9e9e9;
}


/* ============================================================================
   07 — LINKS (REGISTER / FORGOT PASSWORD)
   ============================================================================ */

.tml .tml-links-wrap {
  text-align: center;
  margin-top: 6px;
}

.tml .tml-links-wrap a {
  font-weight: 600;
}

.tml .tml-links-wrap a + a {
  margin-left: 14px;
}


/* ============================================================================
   08 — BUTTON SPACING OVERRIDE
   ============================================================================ */

form[name="login"] .tml-submit-wrap {
  display: inline-flex;
  justify-content: center;
  gap: 26px;
}


/* ============================================================================
   09 — REMEMBER ME (SECONDARY HARD ALIGNMENT OVERRIDE)
   ============================================================================ */

.tml-field-wrap.tml-rememberme-wrap{
  display:flex !important;
  align-items:center !important;
  gap:8px;
}

.tml-field-wrap.tml-rememberme-wrap input#rememberme.tml-checkbox{
  margin:0 !important;
  vertical-align:middle;
  flex:0 0 auto;
}

.tml-field-wrap.tml-rememberme-wrap label.tml-label{
  margin:0 !important;
  line-height:1.2 !important;
  display:inline-block !important;
}

.tml-field-wrap.tml-rememberme-wrap{
  width:100% !important;
}


/* ============================================================================
   10 — RESPONSIVE (TABLET / DESKTOP WIDTH CONTROL)
   ============================================================================ */

@media (min-width: 768px) {
  .tml,
  .tml .tml-form,
  .tml form {
    width: 100% !important;
    max-width: 640px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}


/* ============================================================================
   11 — FINAL FORCE ALIGNMENT (KILL FLOATS / LINE BREAKS)
   ============================================================================ */

.tml .tml-field-wrap.tml-rememberme-wrap{
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:10px !important;

  float:none !important;
  clear:none !important;
  text-align:left !important;
}

.tml .tml-field-wrap.tml-rememberme-wrap > input,
.tml .tml-field-wrap.tml-rememberme-wrap > label{
  display:inline-block !important;
  float:none !important;
  clear:none !important;
  width:auto !important;
  max-width:none !important;
  margin:0 !important;
}

.tml .tml-field-wrap.tml-rememberme-wrap > input#rememberme{
  flex:0 0 auto !important;
  position:static !important;
}

.tml .tml-field-wrap.tml-rememberme-wrap > label{
  font-weight:600;
  margin-bottom:0 !important;
}