/* ARAYA auth shell — world-class rewrite (founder 2026-07-17): maroon hero band + gold ornament
   above the cream UM card (um.css skins the UM form itself; this file is the ARAYA shell around
   it). New file — NOT merged into front.css/inner.css/um.css. Mobile-first, ≤150 lines. */

/* dark section: declare light text at the container per CONVENTIONS.md #1.3 */
.an-auth-hero {
  background-color: var(--an-maroon); /* solid fallback so computed background-color is non-transparent
                                          (tools/color-audit.mjs walks backgroundColor, not gradients) */
  background-image: linear-gradient(135deg, var(--an-maroon) 0%, var(--an-maroon-deep) 100%);
  color: var(--an-cream);
  text-align: center;
  padding: clamp(34px, 6vw, 56px) 20px clamp(28px, 5vw, 44px);
  position: relative;
  overflow: hidden;
}
/* gold ornament — thin arc, inline SVG data-uri per CONVENTIONS.md #1.1 hex exception */
.an-auth-hero::before {
  content: '';
  position: absolute;
  top: -60px; left: 50%; transform: translateX(-50%);
  width: 260px; height: 260px;
  background: radial-gradient(circle, rgba(198, 161, 91, .22) 0%, transparent 68%);
  pointer-events: none;
}
.an-auth-hero-in { position: relative; max-width: 560px; margin: 0 auto; }
.an-auth-hero-kicker {
  font-size: var(--an-kicker); letter-spacing: .16em; text-transform: uppercase;
  color: var(--an-gold-bright); margin: 0 0 8px;
}
.an-auth-hero h1 {
  font-family: var(--an-font-display); font-size: var(--an-h2); color: var(--an-cream);
  margin: 0 0 10px;
}
.an-auth-hero-sub { color: var(--an-sand); font-size: 15px; margin: 0 0 14px; }
.an-auth-trust {
  color: var(--an-sand); font-size: 13px; line-height: 1.6; margin: 14px auto 0;
  border-top: 1px solid rgba(250, 246, 241, .18); padding-top: 14px; max-width: 460px;
  text-align: center; /* legacy Custom-CSS justifies <p>; pin the hero trust line centered */
}

/* ---- standard card anatomy (founder 2026-07-17: "ยังไม่เหมือนระบบทั่วไป แก้ไขระดับโลก") ----
   One centered card: compact title → full-width social buttons → thin-line OR divider →
   labeled fields → remember-me + forgot on one row → full-width gold primary → cross-link. */
.an-auth-card-title {
  font-family: var(--an-font-display); font-size: var(--an-h4); color: var(--an-maroon);
  text-align: center; margin: 0 0 20px;
}
/* Gutenberg group wrapper centers-and-shrinks its children (is-content-justification-center)
   — that's what truncated the social labels. Stretch everything full width instead. */
.an-auth-card .wp-block-group { display: block; }
.an-auth-card .nsl-container-buttons { display: flex; flex-direction: column; gap: 10px; width: 100%; padding: 0; }
.an-auth-card .nsl-container-buttons a { width: 100%; display: block; max-width: none; }
.an-auth-card .nsl-button {
  width: 100% !important; display: flex !important; align-items: center; justify-content: center;
  min-height: 46px; border-radius: 10px; box-shadow: none; cursor: pointer;
}
.an-auth-card .nsl-button-label-container { white-space: nowrap; margin: 0 12px 0 4px; font-size: 15px; }
.an-auth-card .nsl-button-google { border: 1px solid rgba(0, 0, 0, .16); }
/* founder 2026-07-17: "เอาปุ่มสมัครด้วย facebook ออกก่อน" — FB signup OFF for now, Google stays.
   Reversible: delete this one rule to re-enable (plugin/extension untouched). */
.an-auth-card .nsl-container-buttons a[data-provider="facebook"] { display: none !important; }

/* page-content "OR" button block -> standard thin-line divider with centered text
   (text itself is localized server-side in render-auth.php via strings.php authOr) */
.an-auth-card .wp-block-buttons { display: flex; align-items: center; gap: 16px; width: 100%; margin: 26px 0; }
.an-auth-card .wp-block-buttons::before, .an-auth-card .wp-block-buttons::after {
  content: ''; flex: 1; height: 1px; background: rgba(94, 27, 38, .18);
}
.an-auth-card .wp-block-button { flex: 0 0 auto; margin: 0; }
.an-auth-card .wp-block-button__link {
  background: transparent !important; color: var(--an-taupe) !important;
  padding: 0 !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important;
  font-size: 13.5px !important; font-weight: 500; letter-spacing: .1em; min-height: 0; line-height: 1;
}

/* one primary action per card: hide UM's duplicate secondary button + honeypot row */
.an-auth-card .um-half.um-right, .an-auth-card .um_request_name { display: none !important; }
.an-auth-card .um-left.um-half { float: none; width: 100%; margin: 0; }
.an-auth-card .um input[type=submit] {
  width: 100%; min-height: 48px; font-size: 16px !important;
  background: var(--an-gold) !important; color: var(--an-maroon-ink) !important;
}
.an-auth-card .um input[type=submit]:hover { background: var(--an-gold-strong) !important; }
.an-auth-card .um input:not([type=submit]):not([type=checkbox]), .an-auth-card .um select { min-height: 46px; }
.an-auth-card .um input:focus { box-shadow: 0 0 0 3px rgba(198, 161, 91, .28) !important; }

/* login form: grid so remember-me (left) + forgot-password (right) share ONE row above the button */
.an-auth-card .um-login form { display: grid; grid-template-columns: 1fr auto; align-items: center; row-gap: 16px; column-gap: 10px; }
.an-auth-card .um-login form > .um-row { grid-row: 1; grid-column: 1 / -1; margin: 0 !important; }
.an-auth-card .um-login .um-col-alt { display: contents; }
.an-auth-card .um-login .um-col-alt .um-clear, .an-auth-card .um-login form > .um-clear { display: none; }
.an-auth-card .um-login .um-field-c { grid-row: 2; grid-column: 1; margin: 0; padding: 0; }
.an-auth-card .um-login .um-col-alt-b { grid-row: 2; grid-column: 2; justify-self: end; margin: 0; text-align: right; }
.an-auth-card .um-login .um-left.um-half { grid-row: 3; grid-column: 1 / -1; }
.an-auth-card .um-link-alt { color: var(--an-gold-strong); font-size: 14px; text-decoration: none; }
.an-auth-card .um-link-alt:hover { text-decoration: underline; }

/* cross-link now INSIDE the card, centered under the primary action, subtle divider above */
.an-auth-cross {
  text-align: center; font-size: 14px; color: var(--an-ink-muted);
  margin: 22px 0 0; padding-top: 18px; border-top: 1px solid rgba(94, 27, 38, .12);
}
.an-auth-cross a { color: var(--an-gold-strong); font-weight: 600; margin-left: 4px; }

.an-auth-wrap-courses { padding-top: 0; }
.an-auth-card-wide { max-width: 760px; }
.an-account-courses h2 {
  font-family: var(--an-font-display); font-size: var(--an-h4); color: var(--an-maroon);
  margin: 0 0 16px;
}
.an-account-courses-empty { color: var(--an-ink-muted); margin: 0 0 14px; }
.an-account-courses-browse {
  display: inline-block; background: var(--an-maroon); color: var(--an-cream);
  border-radius: var(--an-radius-pill); padding: var(--an-btn-pad); font-weight: 600;
  font-size: var(--an-btn-font); text-decoration: none;
}
.an-account-courses-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px;
}
.an-account-course-card {
  display: flex; flex-direction: column; gap: 8px; text-decoration: none;
  background: var(--an-cream-tint); border-radius: 14px; padding: 14px; border: 1px solid rgba(94, 27, 38, .1);
}
.an-account-course-thumb {
  height: 110px; border-radius: 10px; background-size: cover; background-position: center;
  background-color: var(--an-sand);
}
.an-account-course-title { font-weight: 600; color: var(--an-ink); font-size: 15px; line-height: 1.35; }
.an-account-course-bar {
  display: block; height: 6px; border-radius: 999px; background: rgba(94, 27, 38, .12); overflow: hidden;
}
.an-account-course-bar span { display: block; height: 100%; background: var(--an-gold-strong); }
.an-account-course-status { font-size: 12.5px; color: var(--an-ink-muted); }

/* mobile-first: card + hero already fluid via clamp()/max-width; tighten spacing < 480px */
@media (max-width: 479.98px) {
  .an-auth-hero { padding: 28px 16px 22px; }
  .an-auth-wrap { padding-left: 14px !important; padding-right: 14px !important; }
  .an-account-courses-grid { grid-template-columns: 1fr; }
}