/* หน้าเข้าสู่ระบบ / สมัครสมาชิก — โทนเดียวกับหน้าแรก (แถบไล่สีเขียว + การ์ดขาวมุมโค้ง + ปุ่มเขียวเมนูเด็ด) */
.auth-page {
  --auth-green: #80bb01;
  --auth-green-dark: #5f8c00;
  position: relative;
  isolation: isolate;
  min-height: calc(100vh - 120px);
  background: #f3f6ee;
  padding: 40px 16px 72px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 32px;
}
.auth-page::before {
  content: '';
  position: absolute;
  z-index: -1;
  left: 0; right: 0; top: 0;
  height: 340px;
  background:
    radial-gradient(circle at 15% 20%, rgba(255, 255, 255, .14) 0, rgba(255, 255, 255, 0) 38%),
    radial-gradient(circle at 85% 0%, rgba(255, 230, 80, .18) 0, rgba(255, 230, 80, 0) 35%),
    linear-gradient(135deg, #8cc63f 0%, #5f9e0f 45%, #2f6b10 100%);
}
@media (min-width: 1024px) {
  .auth-page { flex-direction: row; align-items: flex-start; justify-content: center; gap: 48px; padding-top: 56px; }
  .auth-page::before { height: 380px; }
}

/* การ์ดฟอร์ม */
.auth-card {
  position: relative;
  width: 100%;
  max-width: 460px;
  background: #fff;
  border-radius: 28px;
  padding: 32px 28px;
  box-shadow: 0 24px 60px rgba(31, 58, 8, .16), 0 2px 6px rgba(31, 58, 8, .06);
}
@media (min-width: 640px) { .auth-card { padding: 36px 40px; } }
.auth-card > * + * { margin-top: 20px !important; }
.auth-eyebrow { display: flex; justify-content: center; }
.auth-eyebrow span {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 700; color: var(--auth-green-dark);
  background: #f2f8e6; border: 1px solid #e0edc6; border-radius: 999px; padding: 5px 12px;
}
.auth-card h2 { margin-top: 10px !important; font-size: 28px !important; letter-spacing: -.01em; }
.auth-card h2 + p { color: #6b7280 !important; }
.auth-card label { font-weight: 600 !important; color: #374151 !important; }

/* ช่องกรอก */
.auth-card input[type=text], .auth-card input[type=email], .auth-card input[type=password],
.auth-card input[type=tel], .auth-card input:not([type]) {
  height: 48px;
  border-radius: 14px !important;
  border: 1.5px solid #e2e8da !important;
  background: #fafcf7 !important;
  font-size: 15px !important;
  padding-left: 14px !important;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.auth-card input[type=text]:focus, .auth-card input[type=email]:focus, .auth-card input[type=password]:focus,
.auth-card input[type=tel]:focus, .auth-card input:not([type]):focus {
  outline: none !important;
  background: #fff !important;
  border-color: var(--auth-green) !important;
  box-shadow: 0 0 0 4px rgba(128, 187, 1, .18) !important;
}
.auth-card input[type=checkbox] { accent-color: var(--auth-green); width: 18px; height: 18px; }

/* ปุ่มหลัก (ปุ่มที่ใช้ได้ = เขียวเมนูเด็ด, ยังกดไม่ได้ = เทาตามเดิม) */
.auth-card button[type=submit] {
  height: 50px; border-radius: 14px !important; font-size: 16px !important; font-weight: 800 !important;
  align-items: center;
}
.auth-card button[type=submit]:not(:disabled) {
  background: var(--auth-green) !important;
  box-shadow: 0 10px 22px rgba(95, 140, 0, .28);
}
.auth-card button[type=submit]:not(:disabled):hover { background: var(--auth-green-dark) !important; }

/* ปุ่ม Google / Facebook */
.auth-card button[onclick^="loginWith"], .auth-card button[onclick^="registerWith"], .auth-card a[href*="google"], .auth-card a[href*="facebook"] {
  border-radius: 14px !important; min-height: 48px;
}
/* เส้นคั่น "หรือ…" บนพื้นขาว */
.auth-card .relative > .relative > span, .auth-card .relative span.bg-gradient-to-br {
  background: #fff !important;
}
.auth-card a.text-green-600, .auth-card a.font-medium { color: var(--auth-green-dark) !important; }

/* แบนเนอร์ข้างฟอร์ม */
.auth-page > a { position: relative; }

/* คลื่นเคลื่อนไหวที่ขอบล่างของแถบเขียว (2 ชั้น วิ่งสวนทางกัน) */
.auth-page::after {
  content: '';
  position: absolute;
  z-index: -1;
  left: 0; right: 0;
  top: 262px;
  height: 90px;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 90' preserveAspectRatio='none'><path d='M0 45 C 150 80 350 10 600 45 C 850 80 1050 10 1200 45 L1200 90 L0 90 Z' fill='rgba(243,246,238,0.45)'/></svg>"), url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 90' preserveAspectRatio='none'><path d='M0 45 C 150 80 350 10 600 45 C 850 80 1050 10 1200 45 L1200 90 L0 90 Z' fill='rgba(243,246,238,0.7)'/></svg>"), url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 90' preserveAspectRatio='none'><path d='M0 45 C 150 80 350 10 600 45 C 850 80 1050 10 1200 45 L1200 90 L0 90 Z' fill='rgb(243,246,238)'/></svg>");
  background-repeat: repeat-x;
  background-size: 1200px 90px, 900px 70px, 1500px 60px;
  background-position: 0 0, 0 20px, 0 30px;
  animation: auth-waves 22s linear infinite;
}
@media (min-width: 1024px) { .auth-page::after { top: 302px; } }
@keyframes auth-waves {
  from { background-position: 0 0, 0 20px, 0 30px; }
  to   { background-position: 1200px 0, -900px 20px, 1500px 30px; }
}
@media (prefers-reduced-motion: reduce) { .auth-page::after { animation: none; } }