/* ============================================================================
   Hayaanshufiya — מסכי הכניסה
   ============================================================================

   הפריסה של לוחות "כניסה" מהקנבס: Auth, AuthDark, AuthMobile, AuthRegister.
   הרכיבים עצמם — ‎.field, .field-group, .field-label, .field-wrap, .field-icon,
   ‎.field-action, .field-note, .btn, .link-touch, .icon-tile, .auth-brand —
   כבר יושבים ב‑components.css. כאן רק מה שמחזיק אותם במקום.

   קובץ ולא ‎<style> מוטבע כי שני שורטקודים חולקים את הפריסה הזאת, ההתחברות
   וההרשמה. זה בדיוק המצב שבו ‎pricing-page.php ו‑guide-page.php נפרדו זה
   מזה עד שנולד ‎page.css.

   תלוי ב‑tokens.css וב‑components.css. תחום ל‑.hay כמוהם.
   ========================================================================= */

.hay.auth-shell {
  display: flex;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
}

.hay.auth-shell .auth-pane {
  flex: 1; min-width: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 48px 24px;
}

.hay.auth-shell .auth-col {
  width: 100%; max-width: 420px;
  display: flex; flex-direction: column; gap: 20px;
}

.hay.auth-shell .auth-lead { display: flex; flex-direction: column; gap: 10px; }
.hay.auth-shell .auth-mark { width: 44px; height: 44px; border-radius: 14px; }
.hay.auth-shell .auth-lead h1 { font-size: 28px; font-weight: 700; line-height: 1.25; margin: 0; }
.hay.auth-shell .auth-lead p  { font-size: 14px; color: var(--muted); line-height: 1.6; margin: 0; }

.hay.auth-shell form { display: flex; flex-direction: column; gap: 20px; }
/* ההרשמה צפופה יותר — שישה שדות באותו גובה מסך. */
.hay.auth-shell form.auth-form--dense { gap: 16px; }
.hay.auth-shell .auth-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.hay.auth-shell .auth-row { display: flex; justify-content: flex-start; }
.hay.auth-shell .auth-submit { width: 100%; }
.hay.auth-shell .auth-alt { font-size: 14px; color: var(--muted); text-align: center; margin: 0; }

.hay.auth-shell .auth-social { width: 100%; }
.hay.auth-shell .auth-social .nsl-container-buttons { width: 100%; }
.hay.auth-shell .auth-social a { min-height: 44px; }
.hay.auth-shell .auth-social a:focus-visible { outline: 2px solid var(--text); outline-offset: 4px; }
.hay.auth-shell .auth-divider { display: flex; align-items: center; gap: 12px; margin-top: 16px; color: var(--muted); font-size: 14px; }
.hay.auth-shell .auth-divider::before,
.hay.auth-shell .auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--line); }

/* ── פאנל המותג ────────────────────────────────────────────────────────
   ‎.auth-brand עצמו מוגדר ב‑components.css: לוח כתום עם ‎--on-hero, כלומר
   דיו כהה. הרוחב והתוכן שלו הם עניין של המסך הזה. */
.hay.auth-shell .auth-brand { width: 520px; }
.hay.auth-shell .auth-brand-mark {
  width: 120px; height: 120px;
  filter: drop-shadow(0 16px 22px var(--shadow-cast));
}
.hay.auth-shell .auth-brand-title { font-size: 28px; font-weight: 800; line-height: 1.25; text-align: center; }
.hay.auth-shell .auth-brand-sub {
  font-size: 15px; font-weight: 500; color: var(--hero-quiet);
  line-height: 1.6; text-align: center; max-width: 300px; margin: 0;
}

/* ── ההודעות ────────────────────────────────────────────────────────────
   ‎login.js ו‑registration.js מדליקים אותן ב‑css('display','flex') ומכבים
   ב‑'none', ולכן ברירת המחדל חייבת להיות ‎none ולא ‎flex — אחרת שתי תיבות
   ריקות יושבות מעל הטופס בכל טעינה. */
.hay.auth-shell .error-message,
.hay.auth-shell .success-message {
  display: none;
  align-items: flex-start; justify-content: space-between; gap: 10px;
  padding: 12px 14px; border-radius: 14px; font-size: 14px; line-height: 1.5;
}
.hay.auth-shell .error-message   { background: var(--danger-bg);  color: var(--danger-ink); }
.hay.auth-shell .success-message { background: var(--success-bg); color: var(--success-ink); }
.hay.auth-shell .error-message p,
.hay.auth-shell .success-message p { margin: 0; }

/* מטרת מגע: הכפתור הזה היה ‎<span>x</span> בגובה הטבעי של הטקסט. */
.hay.auth-shell .close-message-btn {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 8px; cursor: pointer;
  font-size: 18px; line-height: 1; color: inherit; position: relative;
}
.hay.auth-shell .close-message-btn::after {
  content: ""; position: absolute; inset: -10px;
}

/* שגיאות לשדה בודד. ה‑JS מדליק אותן ב‑display:block, ולכן ברירת המחדל
   ‎none — וכשהן דלוקות הן ‎block ולא ‎flex, כך ש‑.field-note--error
   ממשיך לתת את הצבע בלי לתת את הפריסה. */
.hay.auth-shell .error-messages { display: none; }
.hay.auth-shell .error-messages:not(:empty) { margin-top: 2px; }

/* ── הנייד ───────────────────────────────────────────────────────────────
   לוח AuthMobile מפיל את פאנל המותג לגמרי ולא מכווץ אותו: ב‑390px הוא
   היה גוזל חצי מסך מטופס שממילא צריך את כולו. */
@media (max-width: 900px) {
  .hay.auth-shell .auth-brand { display: none; }
  .hay.auth-shell .auth-pane  { padding: 32px 20px; }
}
@media (max-width: 560px) {
  .hay.auth-shell .auth-pair  { grid-template-columns: 1fr; }
  .hay.auth-shell .auth-lead h1 { font-size: 24px; }
}