/**
 * Shared styles for Login, Register, Resend, Reset, Request pages
 * ใช้ร่วมกันทั้ง 5 หน้า: login, register, resend, reset, request
 */
body { margin: 0; }

/* reCAPTCHA v3: badge ของ Google เป็น position:fixed — ยก z-index ไม่ให้ถูกบังโดยเลย์เอาต์ split */
body.lp-auth-page .grecaptcha-badge {
  z-index: 2147483647 !important;
  visibility: visible !important;
}

.lp-recaptcha-v3-note {
  font-size: 0.72rem;
  color: #94a3b8;
  line-height: 1.5;
  text-align: center;
  margin: 20px 0 0;
  padding: 0 4px;
  max-width: 100%;
  box-sizing: border-box;
}
.lp-recaptcha-v3-note strong { color: #64748b; font-weight: 600; }
.lp-recaptcha-v3-note a {
  color: #64748b;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.lp-recaptcha-v3-note a:hover { color: #3b82f6; }
.lp-root {
  min-height: 100vh;
  display: flex;
  font-family: 'Sarabun', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: #0f172a;
  color: #fff;
  height: 100dvh;
}
.lp-split { display: flex; width: 100%; min-height: 100vh; }
.lp-left {
  flex: 0 0 600px;
  width: 600px;
  min-width: 600px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  min-height: 100dvh;
  height: 100dvh;
  z-index: 1;
}
.lp-slider-wrap { position: absolute; inset: 0; width: 100%; height: 100%; }
/* เดสก์ท็อป: สไลด์มือถือ (login_slider_m) ซ่อน — ใช้เฉพาะจอ ≤900px */
.lp-slider-wrap.lp-slider-mobile { display: none; }
.lp-slider { position: relative; width: 100%; height: 100%; overflow: hidden; }
.lp-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 0.6s ease; z-index: 0; }
.lp-slide.active { opacity: 1; z-index: 1; }
.lp-slide img, .lp-slide a { display: block; width: 100%; height: 100%; }
.lp-slide img { object-fit: cover; }
.lp-slide-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(0, 0, 0, .12) 0%, rgba(0, 0, 0, .12) 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 40px 48px;
}
.lp-slide-text { font-size: 1.5rem; font-weight: 600; color: #fff; line-height: 1.4; text-shadow: 0 2px 8px rgba(0,0,0,0.5); }
.lp-slider-dots { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); display: flex; gap: 10px; z-index: 2; }
.lp-slider-dots span { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,0.5); cursor: pointer; transition: background 0.3s; }
.lp-slider-dots span.active { background: #fff; }
.lp-logo-overlay { position: absolute; top: 32px; left: 48px; z-index: 3; }
.lp-logo-overlay img { max-width: 160px; height: auto; filter: drop-shadow(0 2px 8px rgba(0,0,0,0.3)); }
.lp-right {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 48px;
  background: #fff;
  border-radius: 30px 0 0 30px;
  margin-left: -30px;
  position: relative;
  z-index: 2;
}
/* หน้า auth split (body.lp-auth-page): ไล่สีฟ้า·พีช + เครือข่ายจุด (nodes.js) */
body.lp-auth-page .lp-right {
  background: #e8f2ff;
  overflow: hidden;
  isolation: isolate;
}
body.lp-auth-page .lp-right::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  background:
    radial-gradient(ellipse 95% 75% at 8% 12%, rgba(120, 185, 255, 0.5) 0%, transparent 55%),
    radial-gradient(ellipse 85% 70% at 92% 78%, rgba(255, 195, 140, 0.48) 0%, transparent 52%),
    radial-gradient(ellipse 65% 55% at 82% 6%, rgba(255, 165, 155, 0.38) 0%, transparent 48%),
    radial-gradient(ellipse 55% 45% at 45% 95%, rgba(255, 210, 170, 0.35) 0%, transparent 45%),
    linear-gradient(168deg,
      #d9ecff 0%,
      #eef6ff 22%,
      #fff5eb 48%,
      #ffe8ec 72%,
      #e3f0ff 100%);
}
body.lp-auth-page .lp-right-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  border-radius: inherit;
  overflow: hidden;
}
body.lp-auth-page .lp-right-bg canvas {
  display: block;
  width: 100%;
  height: 100%;
}
body.lp-auth-page .lp-right .lp-form-wrap {
  position: relative;
  z-index: 2;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: 22px;
  box-shadow: 0 22px 48px rgba(15, 23, 42, 0.08);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: 2rem 1.75rem;
  box-sizing: border-box;
}
body.lp-auth-page .lp-right .lp-form-wrap.lp-form-wrap-register {
  padding: 8px 1rem 1rem;
}
/* clamp(min, preferred, max) - มาตรฐานสากล: ปรับตาม viewport อัตโนมัติ */
.lp-form-wrap { width: 100%; max-width: clamp(17.5rem, 90vw, 25rem); box-sizing: border-box; overflow-x: visible; }
.lp-form-wrap .lp-form { width: 100%; box-sizing: border-box; }
.lp-title { font-size: 1.75rem; font-weight: 700; color: #0f172a; margin-bottom: 8px; }
.lp-subtitle { font-size: 0.95rem; color: #64748b; margin-bottom: 24px; }
.lp-form .form-group { margin-bottom: 16px; width: 100%; max-width: 100%; box-sizing: border-box; }
.lp-form label { display: block; font-size: 0.9rem; font-weight: 600; color: #334155; margin-bottom: 6px; }
.lp-form input[type="text"],
.lp-form input[type="email"],
.lp-form input[type="password"] {
  width: 100%;
  max-width: 100%;
  padding: 14px 18px;
  font-size: 1rem;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #f8fafc;
  transition: border-color 0.2s, background 0.2s;
  box-sizing: border-box;
}
.lp-form input:focus {
  outline: none;
  border-color: #3b82f6;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
}
.lp-form .help-block { font-size: 0.85rem; color: #64748b; margin-top: 6px; }
.lp-form .help-block a { color: #3b82f6; text-decoration: none; }
.lp-form .help-block a:hover { text-decoration: underline; }
.lp-form .lp-form-section { margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid #e2e8f0; width: 100%; max-width: 100%; box-sizing: border-box; }
.lp-form .lp-form-section:last-of-type { border-bottom: none; }
.lp-form .lp-form-section-title { font-size: 0.9rem; font-weight: 600; color: #475569; margin-bottom: 8px; }
.lp-form .lp-form-row-2 { display: flex; gap: 10px; }
.lp-form .lp-form-row-2 .form-group { flex: 1; min-width: 0; }
.lp-remember { margin-bottom: 20px; width: 100%; display: block; }
.lp-remember label { font-weight: 500; color: #475569; cursor: pointer; font-size: 0.9rem; }
.lp-recaptcha { margin: 16px 0; width: 100%; max-width: 100%; box-sizing: border-box; overflow: visible; }
.lp-recaptcha .form-group { width: 100%; max-width: 100%; }
.lp-recaptcha > div { width: 100%; max-width: 100%; }
.lp-agreed { margin: 10px 0; padding: 10px; background: #f8fafc; border-radius: 8px; width: 100%; max-width: 100%; box-sizing: border-box; display: block; }
.lp-agreed label { font-weight: 500; color: #475569; cursor: pointer; font-size: 0.85rem; display: block; width: 100%; }
.lp-agreed a { color: #3b82f6; text-decoration: none; }
.lp-agreed a:hover { text-decoration: underline; }
.lp-btn,
.lp-form .lp-btn,
button.lp-btn {
  display: block;
  width: 100%;
  max-width: 100%;
  padding: 16px 24px;
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  border: none;
  border-radius: 12px;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  box-sizing: border-box;
}
.lp-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(59, 130, 246, 0.4); }

/* ปุ่มปรับขนาด: ใช้เฉพาะเจาะจงแทน !important เพื่อไม่ให้ทับซ้อน */
.lp-btn.btn-sm, .lp-social a.btn-sm { padding: 10px 18px; font-size: 0.875rem; min-height: 20px; border-radius: 10px; }
.lp-btn.btn-md, .lp-social a.btn-md { padding: 14px 22px; font-size: 0.95rem; min-height: 46px; border-radius: 11px; }
.lp-btn.btn-lg, .lp-social a.btn-lg { padding: 18px 28px; font-size: 1.0625rem; min-height: 52px; border-radius: 12px; }

.lp-footer { margin-top: 24px; padding-top: 20px; border-top: 1px solid #f1f5f9; text-align: center; }
.lp-footer a { color: #64748b; font-size: 0.9rem; text-decoration: none; }
.lp-footer a:hover { color: #3b82f6; }
.lp-footer .lp-register {
  display: block;
  width: 100%;
  margin-top: 16px;
  padding: 14px 24px;
  background: #0f172a;
  color: #fff;
  font-weight: 600;
  border-radius: 12px;
  transition: background 0.2s;
  text-align: center;
  box-sizing: border-box;
}
.lp-footer .lp-register:hover { background: #1e293b; color: #fff; }
.lp-footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 12px; width: 100%; }
.lp-footer-links a { display: flex; align-items: center; justify-content: center; flex: 1; min-width: 0; padding: 12px 20px; border-radius: 10px; font-weight: 500; box-sizing: border-box; text-decoration: none; color: inherit; }
.lp-footer-links .lp-btn-login { background: #0f172a; color: #fff; }
.lp-footer-links .lp-btn-login:hover { background: #1e293b; color: #fff; }
.lp-footer-links .lp-btn-register { background: #f59e0b; color: #fff; }
.lp-footer-links .lp-btn-register:hover { background: #d97706; color: #fff; }
.lp-alert { padding: 14px 18px; border-radius: 12px; margin-bottom: 16px; font-size: 0.9rem; }
.lp-alert-error { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
.lp-alert-success { background: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0; }
.lp-social { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
.lp-social a {
  flex: 1;
  min-width: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  border-radius: 12px;
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  color: #fff;
  transition: transform 0.2s, box-shadow 0.2s;
}
.lp-social a:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,0.15); }
.lp-social .lp-google { background: #4285f4; }
.lp-social .lp-fb { background: #1877f2; }
.lp-social .lp-line { background: #06c755; }
.lp-social .lp-tiktok { background: #000; }
.lp-divider { display: flex; align-items: center; gap: 16px; margin: 20px 0; }
.lp-divider span { flex: 1; height: 1px; background: #e2e8f0; }
.lp-divider b { font-size: 0.8rem; color: #94a3b8; font-weight: 600; }
.lp-copy { text-align: center; margin-top: 24px; font-size: 0.8rem; color: #64748b; }

/* Register: form-wrap กว้างขึ้นเล็กน้อย (28rem = 448px) */
.lp-form-wrap.lp-form-wrap-register { max-width: clamp(17.5rem, 90vw, 28rem); max-height: 100vh; overflow-y: auto; padding: 8px 0; }
.lp-form-wrap.lp-form-wrap-register .lp-form .form-group { margin-bottom: 10px; }
.lp-form-wrap.lp-form-wrap-register .lp-form label { font-size: 0.85rem; margin-bottom: 4px; }
.lp-form-wrap.lp-form-wrap-register .lp-form input { padding: 10px 12px; font-size: 0.95rem; border-radius: 10px; }
.lp-form-wrap.lp-form-wrap-register .lp-form .help-block { font-size: 0.75rem; color: #dc2626; }
.lp-form-wrap.lp-form-wrap-register .lp-btn { padding: 12px 20px; font-size: 0.95rem; margin-top: 6px; border-radius: 10px; }
.lp-form-wrap.lp-form-wrap-register .lp-title { font-size: 1.5rem; margin-bottom: 2px; }
.lp-form-wrap.lp-form-wrap-register .lp-subtitle { font-size: 0.875rem; margin-bottom: 12px; }
.lp-form-wrap.lp-form-wrap-register .lp-footer { margin-top: 12px; padding-top: 10px; }
.lp-form-wrap.lp-form-wrap-register .lp-divider { margin: 12px 0; gap: 12px; }
.lp-form-wrap.lp-form-wrap-register .lp-social a { padding: 10px 12px; font-size: 0.85rem; border-radius: 10px; }
.lp-form-wrap.lp-form-wrap-register .lp-alert { padding: 10px 12px; border-radius: 10px; margin-bottom: 10px; font-size: 0.85rem; }

/* Login: form-wrap max-width 360, lp-footer .lp-register */
.lp-form-wrap.lp-form-wrap-login .lp-title { margin-bottom: 8px; }
.lp-form-wrap.lp-form-wrap-login .lp-subtitle { margin-bottom: 32px; }
.lp-form-wrap.lp-form-wrap-login .lp-form .form-group { margin-bottom: 20px; }
.lp-form-wrap.lp-form-wrap-login .lp-remember { margin-bottom: 20px; }
.lp-form-wrap.lp-form-wrap-login .lp-recaptcha { margin-bottom: 24px; }
.lp-form-wrap.lp-form-wrap-login .lp-footer { margin-top: 28px; padding-top: 24px; }
.lp-form-wrap.lp-form-wrap-login .lp-social { margin-bottom: 28px; }
.lp-form-wrap.lp-form-wrap-login .lp-divider { margin: 28px 0; }
.lp-form-wrap.lp-form-wrap-login .lp-copy { margin-top: 32px; }

/* Mobile/Tablet */
@media (max-width: 900px) {
  .lp-slider-wrap.lp-slider-desktop { display: none !important; }
  .lp-slider-wrap.lp-slider-mobile { display: block; }
  .lp-root { min-height: 100vh; height: auto; overflow-x: hidden; }
  .lp-split { flex-direction: column; min-height: 100vh; }
  .lp-left {
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
    height: 42vh;
    min-height: 240px;
    max-height: 380px;
    order: 1;
    position: relative;
  }
  .lp-slider-wrap { position: absolute; inset: 0; }
  .lp-slide-overlay { padding: 20px 20px 28px; }
  .lp-slide-text { font-size: 1.1rem; }
  .lp-logo-overlay { top: 16px; left: 20px; }
  .lp-logo-overlay img { max-width: 110px; }
  .lp-slider-dots { bottom: 12px; }
  .lp-slider-dots span { width: 8px; height: 8px; }
  .lp-right {
    flex: 1 1 auto;
    margin-left: 0;
    /* ดึงการ์ดฟอร์มขึ้นทับแบนเนอร์ — มุมโค้งด้านบนเห็นพื้นหลังจากภาพ/สไลด์ */
    margin-top: -28px;
    border-radius: 28px 28px 0 0;
    padding: 32px 24px 32px;
    order: 2;
    min-height: 0;
    align-items: center;
    justify-content: flex-start;
    position: relative;
    z-index: 4;
    overflow-x: visible;
    box-shadow: 0 -12px 40px rgba(15, 23, 42, 0.12);
  }
  .lp-left { z-index: 1; }
  .lp-form-wrap { margin: 0 auto; overflow-x: visible; width: 100%; }
  .lp-form-wrap.lp-form-wrap-register { max-height: none; }
  .lp-title { font-size: 1.5rem; margin-bottom: 4px; }
  .lp-subtitle { font-size: 0.9rem; margin-bottom: 24px; }
  .lp-form input[type="text"],
  .lp-form input[type="email"],
  .lp-form input[type="password"] { padding: 14px 16px; min-height: 48px; }
  .lp-btn { padding: 16px 24px; min-height: 48px; }
  .lp-social a { padding: 14px 12px; min-height: 48px; }
  .lp-social a.btn-sm { padding: 10px 18px; font-size: 0.875rem; min-height: 40px; }
  .lp-social a.btn-md { padding: 14px 22px; font-size: 0.95rem; min-height: 46px; }
  .lp-social a.btn-lg { padding: 18px 28px; font-size: 1.0625rem; min-height: 52px; }
  .lp-footer .lp-register { width: 100%; padding: 14px 24px; min-height: 48px; display: flex; align-items: center; justify-content: center; }
  .lp-footer-links a { padding: 12px 20px; min-height: 48px; }
  .lp-copy { margin-top: 24px; font-size: 0.75rem; }
  .lp-form-wrap.lp-form-wrap-register .lp-form .lp-form-section-title { font-size: 0.9rem; }
}
@media (max-width: 576px) {
  .lp-left { height: 36vh; min-height: 200px; max-height: 320px; }
  .lp-right {
    margin-top: -22px;
    padding: 28px 20px 28px;
    border-radius: 24px 24px 0 0;
    box-shadow: 0 -10px 36px rgba(15, 23, 42, 0.1);
  }
  .lp-title { font-size: 1.35rem; }
  .lp-subtitle { font-size: 0.85rem; margin-bottom: 20px; }
  .lp-social { flex-direction: column; gap: 10px; }
  .lp-social a { min-width: 0; }
  .lp-social a.btn-sm { padding: 10px 18px; font-size: 0.875rem; min-height: 20px; }
  .lp-social a.btn-md { padding: 14px 22px; font-size: 0.95rem; min-height: 46px; }
  .lp-social a.btn-lg { padding: 18px 28px; font-size: 1.0625rem; min-height: 52px; }
  .lp-divider { margin: 20px 0; }
  .lp-form .form-group { margin-bottom: 16px; }
  .lp-remember { margin-bottom: 16px; }
  .lp-recaptcha { margin-bottom: 20px; }
  .lp-form .lp-form-row-2 { flex-direction: column; gap: 0; }
  .lp-logo-overlay img { max-width: 90px; }
  .lp-slide-text { font-size: 1rem; }
  .lp-footer-links { flex-direction: column; gap: 10px; }
  .lp-footer-links a { width: 100%; justify-content: center; }
}
@media (max-width: 400px) {
  .lp-recaptcha .form-group { transform: scale(0.88); transform-origin: left top; }
}

/* OAuth connect — ปุ่มเขียว + บล็อกโปรไฟล์ */
body.lp-auth-connect .lp-connect-profile {
  text-align: center;
  margin-bottom: 28px;
}
body.lp-auth-connect .lp-connect-avatar {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #e2e8f0;
  margin-bottom: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
body.lp-auth-connect .lp-connect-avatar-placeholder {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: linear-gradient(135deg, #06c755 0%, #00b900 100%);
  margin: 0 auto 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 2rem;
  border: 3px solid #e2e8f0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
body.lp-auth-connect .lp-connect-name {
  font-size: 1.25rem;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 4px;
}
body.lp-auth-connect .lp-connect-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
  color: #fff;
}
body.lp-auth-connect .lp-connect-badge.line { background: #06c755; }
body.lp-auth-connect .lp-connect-badge.google { background: #4285f4; }
body.lp-auth-connect .lp-connect-badge.facebook { background: #1877f2; }
body.lp-auth-connect .lp-connect-badge.tiktok { background: #000; }
body.lp-auth-connect .lp-form-wrap .lp-title {
  font-size: 1.5rem;
  margin-bottom: 6px;
}
body.lp-auth-connect .lp-form-wrap .lp-btn {
  background: linear-gradient(135deg, #06c755 0%, #00b900 100%);
}
body.lp-auth-connect .lp-form-wrap .lp-btn:hover {
  box-shadow: 0 8px 24px rgba(6, 199, 85, 0.4);
}
body.lp-auth-connect .lp-form-wrap .lp-btn[disabled],
body.lp-auth-connect .lp-form-wrap .lp-btn:disabled {
  background: #94a3b8 !important;
  color: #cbd5e1 !important;
  cursor: not-allowed;
  pointer-events: none;
  transform: none;
  opacity: 1;
  box-shadow: none;
}

/* pcoded override (login only) */
body.fix-menu #pcoded .pcoded-content-wrap {
  margin-left: 0px !important;
  margin-right: 0 !important;
  width: calc(100% - 272px) !important;
  max-width: none !important;
}