/**
 * Atelier — Login (T21) / Register (T22) / Password Reset (T23).
 * Source: design/store-theme/01-atelier-fashion/pages/T21 Login.dc.html
 */

/* Suppress Magento's default core page-title H1 ("Customer Login",
 * "Create New Customer Account", "Forgot Your Password?") on the auth
 * pages. The design artboards (T21/T22/T23) render NO page-title-wrapper —
 * each auth card supplies its own heading via .atl-auth-title /
 * .atl-auth-panel-title. Without this the core H1 stacks visibly above our
 * card (confirmed on the live forgot-password + login pages). We can't
 * remove the pageMainTitle block in layout without risking the same
 * orphaned-reference 500 class we hit on forgotPassword, so hide via CSS.
 * Scoped to the auth body classes so no other page is affected. */
body.atl-page-login .page-main > .page-title-wrapper,
body.atl-page-register .page-main > .page-title-wrapper,
body.atl-page-password-reset .page-main > .page-title-wrapper { display: none; }

.atl-auth { max-width: 1060px; margin: 0 auto; padding: 48px 24px 0; }
.atl-auth-title { font-family: 'Cormorant Garamond', serif; font-weight: 400; line-height: 1.12; margin: 0; font-size: 36px; text-wrap: balance; text-align: center; }

.atl-auth-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 30px; }
.atl-auth-card {
  background: var(--atl-surface);
  border: 1px solid var(--atl-border);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.atl-auth-card--accent { background: color-mix(in oklab, var(--atl-accent) 6%, var(--atl-surface)); }
.atl-auth-card-title { font-family: 'Cormorant Garamond', serif; font-weight: 400; line-height: 1.12; margin: 0; font-size: 20px; text-wrap: balance; }
.atl-auth-card-body { font-size: 14px; color: var(--atl-text-muted); margin: 0; line-height: 1.6; }

/* Space the form's own children (fields / remember-row / submit). The card's
 * flex gap only separates the card title from the <form>; the form is a
 * separate flex context, so without this its stacked fields butt together and
 * the next field's label crowds the input above it. */
.atl-auth-card form { display: flex; flex-direction: column; gap: 18px; }

.atl-field { display: flex; flex-direction: column; gap: 9px; }
.atl-field-label { font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--atl-text-muted); }

.atl-auth-row { display: flex; justify-content: space-between; align-items: center; }
.atl-auth-remember { display: flex; gap: 10px; align-items: center; font-size: 13px; color: var(--atl-text-muted); }
.atl-auth-remember input { accent-color: var(--atl-accent); }
.atl-auth-forgot { font-size: 13px; color: var(--atl-accent); text-decoration: none; }

.atl-auth-benefits { display: flex; flex-direction: column; gap: 10px; }
.atl-auth-benefit { font-size: 13.5px; color: var(--atl-text-subtle); }

.atl-auth-states { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 18px; }
.atl-auth-state { border: 1px solid; padding: 13px 18px; font-size: 13px; }
.atl-auth-state--warning { border-color: var(--atl-warning); color: var(--atl-warning); }
.atl-auth-state--warning a { color: inherit; }
.atl-auth-state--success { border-color: var(--atl-accent); color: var(--atl-accent); }

/* T22 Register */
.atl-auth-narrow { max-width: 720px; }
.atl-auth-form {
  background: var(--atl-surface);
  border: 1px solid var(--atl-border);
  padding: 32px;
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.atl-auth-section-label { font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--atl-text-muted); }
.atl-auth-section-label--spaced { margin-top: 8px; }
.atl-auth-subscribe { display: flex; gap: 10px; align-items: center; font-size: 13.5px; color: var(--atl-text-muted); }
.atl-auth-subscribe input { accent-color: var(--atl-accent); }

.atl-auth-strength { display: flex; gap: 6px; align-items: center; }
.atl-auth-strength-track { flex: 1; height: 6px; border-radius: 99px; background: var(--atl-border); }
.atl-auth-strength-fill { height: 100%; border-radius: 99px; background: var(--atl-accent); transition: width .18s ease; } /* width driven live by the register-page strength script (T22 design-gap pass) */
.atl-auth-strength-label { font-size: 12px; color: var(--atl-text-muted); }

.atl-auth-signin-hint { font-size: 13px; color: var(--atl-text-muted); }
.atl-auth-signin-hint a { color: var(--atl-accent); }

.atl-auth-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

@media (max-width: 767px) {
  .atl-auth { padding: 32px 20px 0; }
  .atl-auth-title { font-size: 28px; }
  .atl-auth-grid, .atl-auth-states, .atl-auth-row-2 { grid-template-columns: 1fr; }
  .atl-auth-form { padding: 24px 20px; }
}

/* T23 Password Reset */
.atl-auth-narrowest { max-width: 480px; padding-top: 56px; display: flex; flex-direction: column; gap: 24px; }
.atl-auth-panel { background: var(--atl-surface); border: 1px solid var(--atl-border); padding: 32px; display: flex; flex-direction: column; gap: 14px; }
.atl-auth-panel-title { font-family: 'Cormorant Garamond', serif; font-weight: 400; line-height: 1.12; margin: 0; font-size: 24px; text-wrap: balance; }
.atl-auth-panel-title--sub { font-size: 20px; }
.atl-auth-panel-body { font-size: 13.5px; color: var(--atl-text-muted); margin: 0; line-height: 1.6; }
.atl-auth-back { font-size: 13px; color: var(--atl-accent); text-decoration: none; text-align: center; }

/* R6-04: captcha slot in the themed auth forms. Magento's captcha block renders
   its own image + input; constrain it to the panel width and match field rhythm.
   Collapses to nothing when captcha is disabled (block outputs empty). */
.atl-auth-captcha:empty { display: none; }
.atl-auth-captcha { display: flex; flex-direction: column; gap: 8px; }
.atl-auth-captcha img { max-width: 100%; height: auto; border: 1px solid var(--atl-border); }
.atl-auth-captcha input[type="text"] { width: 100%; box-sizing: border-box; }