/* ==================================================================
   หน้าเข้าสู่ระบบ / สมัครสมาชิก (customer auth)
   - ฟอนต์ Google โหลดผ่าน <link> ใน <head> ของแต่ละหน้า (ไม่ @import ที่นี่ จะได้ไม่โหลดเป็นทอด)
   - สีทั้งหมดดึงจากตัวแปรธีม (--main, --bg-main, --text, ...) ผ่าน color-mix
     จึงเปลี่ยนตาม theme_1..5 ทั้งธีมเข้มและธีมสว่าง
   - ต้องโหลดหลัง theme_x.css · หน้าสมัครโหลด register-v2.css ต่อจากไฟล์นี้
================================================================== */

/* LINE Seed Sans TH (ฟอนต์สำรอง โหลดเมื่อจำเป็นเท่านั้น) */
@font-face {
    font-family: "LINE Seed Sans TH";
    src: url("../fonts/line-seed/LINESeedSansTH_W_Rg.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "LINE Seed Sans TH";
    src: url("../fonts/line-seed/LINESeedSansTH_W_Bd.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    --font-primary: "IBM Plex Sans Thai", "LINE Seed Sans TH", sans-serif;
    --font-heading: "Kanit", "IBM Plex Sans Thai", sans-serif;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-family: var(--font-heading); color: var(--text); }
p { margin: 0; }
a { color: var(--main); text-decoration: none; font-weight: 500; transition: color 0.2s ease; }
input, button { font: inherit; }
button { font-weight: 600; }

body.auth-auth {
    min-height: 100vh;
    min-height: 100dvh;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px 18px calc(24px + env(safe-area-inset-bottom));
    overflow-x: hidden;
    font-family: var(--font-primary);
    font-weight: 400;
    line-height: 1.6;
    color: var(--text);
    background-color: var(--bg-main);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body.auth-auth {
    --lg-card:   color-mix(in srgb, var(--bg-main) 92%, var(--text));
    --lg-field:  color-mix(in srgb, var(--bg-main) 80%, var(--text));
    --lg-line:   color-mix(in srgb, var(--text) 14%, transparent);
    --lg-accent: color-mix(in srgb, var(--main) 45%, transparent);
    --lg-on:     var(--on-brand, #fff);
}

/* :where() = specificity 0 ให้รูปพื้นหลังจากตั้งค่า (.auth-auth { background-image }) ทับได้ */
:where(body.auth-auth) {
    background-image:
        radial-gradient(120% 55% at 50% 0%, color-mix(in srgb, var(--main) 22%, transparent) 0%, transparent 70%);
    background-repeat: no-repeat;
}

.lg-shell {
    width: 100%;
    max-width: 392px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ---------- การ์ดหลัก ---------- */
.lg-card {
    background: var(--lg-card);
    border: 1px solid var(--lg-line);
    border-top: 3px solid var(--main);
    border-radius: 20px;
    padding: 24px 22px 22px;
    box-shadow: var(--shadow, 0 18px 44px rgba(0, 0, 0, 0.35));
}

.lg-brand {
    display: flex;
    justify-content: center;
    margin-bottom: 18px;
}
.lg-brand img {
    width: auto;
    height: auto;
    display: block;
    max-width: 190px;
    max-height: 64px;
    object-fit: contain;
}

/* ---------- ข้อความหัวข้อ ---------- */
.lg-title {
    margin: 0 0 4px;
    text-align: center;
    font-size: 1.6rem;
    font-weight: 600;
    letter-spacing: 0;
}
.lg-sub {
    margin: 0 0 20px;
    text-align: center;
    font-size: 0.95rem;
    color: var(--text-muted);
}

/* ---------- แจ้งเตือน ---------- */
.lg-alert {
    border-radius: 12px;
    padding: 10px 14px;
    margin-bottom: 14px;
    font-size: 0.88rem;
    text-align: center;
    border: 1px solid transparent;
}
.lg-alert.ok {
    background: color-mix(in srgb, var(--success, #2fb872) 14%, transparent);
    border-color: color-mix(in srgb, var(--success, #2fb872) 45%, transparent);
    color: var(--success, #2fb872);
}
.lg-alert.err {
    background: color-mix(in srgb, var(--danger, #e5484d) 14%, transparent);
    border-color: color-mix(in srgb, var(--danger, #e5484d) 50%, transparent);
    color: var(--danger, #e5484d);
}

/* ---------- ช่องกรอก ---------- */
.lg-field { margin-bottom: 14px; }
.lg-field label {
    display: block;
    margin: 0 0 6px 2px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-muted);
}
.lg-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.lg-input-wrap > i {
    position: absolute;
    left: 15px;
    font-size: 1rem;
    color: var(--text-dim);
    pointer-events: none;
    transition: color 0.2s;
}
.lg-input {
    width: 100%;
    height: 50px;
    padding: 0 14px 0 44px;
    border-radius: 12px;
    border: 1px solid var(--lg-line);
    background: var(--lg-field);
    color: var(--text);
    font-size: 1.05rem;
    outline: none;
    transition: border-color 0.2s, background 0.2s;
}
.lg-input::placeholder { color: var(--text-dim); }
.lg-input:focus {
    border-color: var(--main);
    background: var(--bg-main);
}
.lg-input:focus-visible { outline: 2px solid var(--lg-accent); outline-offset: 2px; }
.lg-input-wrap:focus-within > i { color: var(--main); }
.lg-input-wrap:has(.lg-eye) .lg-input { padding-right: 50px; }
.lg-input.pin { letter-spacing: 0.18em; }
.lg-input.pin::placeholder { letter-spacing: 0.3em; }

.lg-eye {
    position: absolute;
    right: 5px;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--text-dim);
    cursor: pointer;
    transition: color 0.2s;
}
.lg-eye:hover { color: var(--text); }
.lg-eye:focus-visible { outline: 2px solid var(--main); }

/* ---------- จดจำการเข้าสู่ระบบ ---------- */
.lg-remember {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 2px 2px 16px;
    font-size: 0.9rem;
    color: var(--text-muted);
}
.lg-switch {
    position: relative;
    display: inline-block;
    width: 46px;
    height: 26px;
    flex: none;
    cursor: pointer;
}
.lg-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.lg-switch .track {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: var(--lg-field);
    border: 1px solid var(--lg-line);
    transition: background 0.25s, border-color 0.25s;
}
.lg-switch .track::before {
    content: "";
    position: absolute;
    left: 3px;
    top: 50%;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--text-dim);
    transform: translateY(-50%);
    transition: transform 0.25s, background 0.25s;
}
.lg-switch input:checked + .track { background: var(--main); border-color: var(--main); }
.lg-switch input:checked + .track::before {
    background: var(--lg-on);
    transform: translateY(-50%) translateX(20px);
}
.lg-switch input:focus-visible + .track { outline: 2px solid var(--main); outline-offset: 2px; }

/* ---------- ปุ่ม ---------- */
.lg-btn {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 0;
    border-radius: 14px;
    background: var(--main);
    color: var(--lg-on);
    font-family: var(--font-heading, inherit);
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, transform 0.12s;
}
.lg-btn:hover { background: var(--hover, var(--main)); }
.lg-btn:active { transform: scale(0.98); }
.lg-btn:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; }

.lg-register {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--lg-line);
    text-align: center;
    font-size: 0.92rem;
    color: var(--text-muted);
}
.lg-register a { color: var(--main); font-weight: 700; }
.lg-register a:hover { text-decoration: underline; }

/* ---------- ฝ่ายบริการลูกค้า ---------- */
.lg-support {
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid var(--lg-line);
    background: var(--lg-card);
    text-align: center;
}
.lg-support p {
    margin: 0 0 10px;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--text-muted);
}
.lg-support .lines { display: flex; gap: 10px; }
.lg-line-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 42px;
    padding: 8px;
    border-radius: 12px;
    border: 1px solid var(--lg-line);
    background: var(--lg-field);
    color: var(--text);
    font-size: 0.88rem;
    font-weight: 600;
}
.lg-line-btn:hover { border-color: var(--main); color: var(--text); }
.lg-line-btn i { color: var(--main); font-size: 1.1rem; }

@media (max-width: 380px) {
    .lg-card { padding: 22px 16px 18px; }
}

/* ---------- ค่ายเกม (ด้านล่าง เน้นมือถือ: 4 คอลัมน์) ---------- */
.lg-providers { padding: 4px 2px 0; }
.lg-providers h2 {
    margin: 0 0 10px;
    text-align: center;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text-muted);
}
.lg-providers ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}
.lg-providers li {
    min-width: 0;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    display: grid;
    place-items: center;
    padding: 8px;
    border-radius: 12px;
    border: 1px solid var(--lg-line);
    background: var(--lg-card);
}
.lg-providers img {
    width: 100%;
    height: 100%;
    display: block;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}
@media (max-width: 340px) {
    .lg-providers ul { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.lg-shell > * { min-width: 0; max-width: 100%; }

/* ==================================================================
   เอฟเฟกต์ (เบา ๆ): เข้าฉากครั้งเดียว + แสงหายใจพื้นหลัง + ประกายที่ปุ่ม
================================================================== */

/* แสงสีธีมด้านหลังการ์ด ขยับช้ามาก */
body.auth-auth::before {
    content: "";
    position: fixed;
    left: 50%;
    top: 18%;
    width: 520px;
    height: 520px;
    max-width: 130vw;
    translate: -50% 0;
    border-radius: 50%;
    background: radial-gradient(circle, color-mix(in srgb, var(--main) 30%, transparent) 0%, transparent 65%);
    filter: blur(20px);
    pointer-events: none;
    z-index: 0;
    animation: lg-breathe 7s ease-in-out infinite;
}
.lg-shell { position: relative; z-index: 1; }

@keyframes lg-breathe {
    0%, 100% { opacity: 0.55; scale: 0.94; }
    50%      { opacity: 1;    scale: 1.08; }
}

/* ลำดับเข้าฉาก: การ์ด → ฝ่ายบริการ → ค่ายเกมทีละโลโก้ */
@keyframes lg-rise {
    from { opacity: 0; transform: translateY(18px); }
    to   { opacity: 1; transform: none; }
}
@keyframes lg-pop {
    from { opacity: 0; transform: scale(0.82); }
    to   { opacity: 1; transform: none; }
}
.lg-card    { animation: lg-rise 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.lg-support { animation: lg-rise 0.6s 0.15s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.lg-providers h2 { animation: lg-rise 0.5s 0.3s ease-out both; }
.lg-providers li {
    animation: lg-pop 0.45s cubic-bezier(0.3, 1.3, 0.5, 1) both;
    animation-delay: calc(0.35s + var(--i, 0) * 55ms);
    transition: transform 0.2s, border-color 0.2s;
}
.lg-providers li:nth-child(1)  { --i: 0; }
.lg-providers li:nth-child(2)  { --i: 1; }
.lg-providers li:nth-child(3)  { --i: 2; }
.lg-providers li:nth-child(4)  { --i: 3; }
.lg-providers li:nth-child(5)  { --i: 4; }
.lg-providers li:nth-child(6)  { --i: 5; }
.lg-providers li:nth-child(7)  { --i: 6; }
.lg-providers li:nth-child(8)  { --i: 7; }
.lg-providers li:nth-child(9)  { --i: 8; }
.lg-providers li:nth-child(10) { --i: 9; }
.lg-providers li:nth-child(11) { --i: 10; }
.lg-providers li:nth-child(12) { --i: 11; }
.lg-providers li:hover,
.lg-providers li:active { transform: translateY(-3px); border-color: var(--main); }

/* ประกายวิ่งผ่านปุ่มเข้าสู่ระบบทุก ๆ ไม่กี่วินาที */
.lg-btn::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -40%;
    width: 30%;
    background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.35), transparent);
    transform: skewX(-18deg);
    pointer-events: none;
    animation: lg-sheen 4.5s 1.5s ease-in-out infinite;
}
@keyframes lg-sheen {
    0%       { left: -40%; }
    35%,100% { left: 130%; }
}

@media (prefers-reduced-motion: reduce) {
    body.auth-auth::before { animation: none; opacity: 0.7; }
    .lg-card, .lg-support, .lg-providers h2, .lg-providers li { animation: none; }
    .lg-btn::after { display: none; }
}