/* -----------------------------------------------------------------------------
Engine:      Gametize
Author:      Gametize Pte Ltd
Description: Shared presentation polish for player-facing account forms —
             reset password, resend activation, settings, registration, and
             team pages. Mirrors the login-revalidation page look: label
             spacing, teal focus states, inline error summary, and full-width
             submit buttons on phones.

Notes:
- Presentation only. No JS selector, form field, action, or parameter contract
  depends on these rules.
- Opt-in: field/button rules apply only inside a .player-form container (added
  by the pages that link this file). .form-error-alert is a standalone summary
  style, also used by the login-revalidation page.
- Verification-code (segmented) styles live in verificationcode.css — this file
  does not depend on it, and it is not needed by the pages here.
----------------------------------------------------------------------------- */

/* ---------- FIELDS ---------- */

/* Consistent label treatment for simple field wraps */
.player-form .field-wrap > label { display : block; margin-bottom : 6px }

/* Labels outside a field wrap (e.g. team pages) keep the same spacing */
.player-form > div > label { display : block; margin-bottom : 6px }

/* Brand-consistent focus states for text inputs */
.player-form input[type=text]:focus,
.player-form input[type=password]:focus,
.player-form input[type=email]:focus,
.player-form input[type=tel]:focus,
.player-form input[type=number]:focus,
.player-form textarea:focus,
.player-form select:focus {
  border-color : #1BABAB;
  box-shadow : 0 0 0 3px rgba(27, 171, 171, 0.15);
  outline : none;
}

/* ---------- INLINE SERVER ERROR SUMMARY ---------- */

/* Persistent inline validation summary (survives the auto-fading toast) */
.form-error-alert {
  display : block;
  margin : 0 0 20px;
  padding : 12px 14px;
  font-size : 0.9375em;
  line-height : 1.5;
  color : #8a1c19;
  background : #fbeceb;
  border : 1px solid #f0c2c0;
  border-radius : 8px;
}

  .form-error-alert .fa { color : #D11B18; margin-right : 4px }

/* ---------- RESPONSIVE ---------- */

/* Phones — submit buttons go full-width; keep right-aligned hierarchy above
   (buttons.css lifts the halfwidth cap at this breakpoint) */
@media screen and (max-width : 480px) {
  .player-form button[type=submit] { display : block; float : none; width : 100% }
  .player-form button[type=submit] .button { width : 100% }
}