/* guest.css — modal ชวนเข้าสู่ระบบ (หัวกรวย)
   ยึด design system: เส้น 1px แทนเงา · radius card 8px / ปุ่ม 5px · แดง #E31837 เท่านั้น */

.zs-login{
  position:fixed;
  inset:0;
  z-index:var(--z-modal);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:var(--s4,16px);
  opacity:0;
  transition:opacity .18s ease;
}
.zs-login.on{opacity:1}
.zs-login[hidden]{display:none}

.zs-login-backdrop{
  position:absolute;
  inset:0;
  background:rgba(10,10,11,.45);
  backdrop-filter:blur(2px);
}

.zs-login-dialog{
  position:relative;
  width:100%;
  max-width:400px;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:8px;
  padding:28px 24px 20px;
  text-align:center;
  transform:translateY(8px) scale(.98);
  transition:transform .18s ease;
}
.zs-login.on .zs-login-dialog{transform:none}

.zs-login-close{
  position:absolute;
  top:10px;
  right:10px;
  width:32px;
  height:32px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid transparent;
  border-radius:5px;
  background:transparent;
  color:var(--ink-3);
  cursor:pointer;
}
.zs-login-close:hover{background:var(--panel-2);border-color:var(--line);color:var(--ink)}
/* tap target ≥44×44 บนอุปกรณ์สัมผัส — dialog มี padding 24px จึงขยายได้ไม่ล้น */
@media (pointer:coarse){
  .zs-login-close{width:44px;height:44px;top:6px;right:6px}
}

.zs-login-title{
  margin:8px 0 6px;
  font-size:19px;
  font-weight:700;
  color:var(--ink);
}
.zs-login-msg{
  margin:0 0 20px;
  font-size:13.5px;
  line-height:1.6;
  color:var(--ink-2);
}

/* ⚠️ เตือนเบราว์เซอร์ในแอป — Google OAuth ใช้ไม่ได้ที่นี่ */
.zs-login-warn{
  display:flex;
  gap:10px;
  text-align:left;
  padding:12px;
  margin-bottom:16px;
  border:1px solid var(--line-2);
  border-radius:5px;
  background:var(--panel-2);
}
.zs-login-warn > i{color:var(--amber);font-size:16px;line-height:1.4}
.zs-login-warn strong{display:block;font-size:13px;color:var(--ink);margin-bottom:2px}
.zs-login-warn p{margin:0 0 8px;font-size:12.5px;line-height:1.55;color:var(--ink-2)}

.zs-login-actions{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.zs-oauth{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  width:100%;
  min-height:46px;                 /* ≥44px ตามกฎ tap target */
  padding:0 16px;
  border:1px solid var(--line-2);
  border-radius:5px;
  background:var(--panel);
  color:var(--ink);
  font-family:inherit;
  font-size:14px;
  font-weight:500;
  cursor:pointer;
  transition:border-color .15s ease,background .15s ease;
}
.zs-oauth:hover{border-color:var(--ink);background:var(--panel-2)}
.zs-oauth:focus-visible{
  /* ❌ ไม่ใช้ outline — ธีมใช้ box-shadow ring */
  outline:none;
  border-color:var(--red);
  box-shadow:0 0 0 3px var(--red-soft);
}
.zs-oauth[disabled],.zs-oauth.is-loading{opacity:.65;cursor:wait;pointer-events:none}
.zs-oauth i{font-size:17px}

/* สีแบรนด์ใช้ที่ไอคอนเท่านั้น — ปุ่มยังเป็นโทนกลางตามธีม ไม่แย่งซีนสีแดงของแบรนด์ */
.zs-oauth-line i{color:#06C755}
.zs-oauth-google i{color:#4285F4}

/* ตัวคั่น "หรือใช้อีเมล" ระหว่างปุ่ม OAuth กับฟอร์ม (auth/login.php)
   เส้น 1px สองข้าง ไม่ใช้เงา */
.auth-or{
  display:flex;
  align-items:center;
  gap:12px;
  margin:18px 0;
  font-size:11.5px;
  color:var(--ink-3);
}
.auth-or::before,
.auth-or::after{content:"";flex:1;height:1px;background:var(--line)}

.zs-login-empty{
  margin:0;
  padding:16px;
  border:1px dashed var(--line-2);
  border-radius:5px;
  font-size:13px;
  color:var(--ink-3);
}

.zs-login-fine{
  margin:16px 0 0;
  font-size:11.5px;
  line-height:1.6;
  color:var(--ink-3);
}
.zs-login-fine a{color:var(--ink-2);text-decoration:underline}
.zs-login-fine a:hover{color:var(--red)}

@media (max-width:520px){
  .zs-login{align-items:flex-end;padding:0}
  .zs-login-dialog{
    max-width:none;
    border-radius:8px 8px 0 0;
    border-bottom:none;
    /* มือถือเลื่อนขึ้นจากล่างแทน scale */
    transform:translateY(16px);
    /* เผื่อ safe area ของ iPhone */
    padding-bottom:calc(20px + env(safe-area-inset-bottom));
  }
  .zs-login.on .zs-login-dialog{transform:none}
}

@media (prefers-reduced-motion:reduce){
  .zs-login,.zs-login-dialog{transition:none}
  .zs-login-dialog{transform:none}
}