/* หน้า LIFF ของ termkub — โทนเดียวกับ Flex ของบอท: พื้นขาว + gradient teal
   (#01F2D5 → #086268 ชุดเดียวกับปุ่มหลักของเว็บ)

   จงใจไม่ใช้ Tailwind/บิลด์: หน้านี้เปิดใน webview บนเน็ตมือถือ ทุก KB คือ
   เวลารอของลูกค้าที่กำลังจะจ่ายเงิน และไฟล์ไม่กี่ไฟล์เอาไปวางที่ static host
   ไหนก็ได้โดยไม่ต้องมี pipeline */

/* LINE Seed Sans TH — ฟอนต์เดียวกับเว็บหลัก (termkub-frontend/src/app.css)
   และเป็นฟอนต์ของ LINE เอง จึงกลืนกับ UI ของแอปที่หน้านี้เปิดอยู่ข้างใน

   ลงเฉพาะน้ำหนักที่หน้านี้ใช้จริง (400 กับ 700) — เว็บหลักลง 5 น้ำหนักเพราะมี
   หน้าเยอะกว่า แต่ที่นี่มีแค่ฟอร์มเดียว ลงครบ 5 = เสียเปล่า 90KB บนเน็ตมือถือ

   font-display: swap = โชว์ฟอนต์ระบบก่อน แล้วสลับเมื่อโหลดเสร็จ — ลูกค้าอ่าน
   ฟอร์มได้ทันทีไม่ต้องรอ (FOIT คือหน้าว่างเปล่า ซึ่งแย่กว่าฟอนต์สลับ) */
@font-face {
    font-family: 'LINE Seed Sans TH';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('./fonts/LINESeedSansTH_W_Rg.woff2') format('woff2');
}

@font-face {
    font-family: 'LINE Seed Sans TH';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('./fonts/LINESeedSansTH_W_Bd.woff2') format('woff2');
}

:root {
    --ink: #0f172a;
    --dim: #64748b;
    --faint: #94a3b8;
    --line: #e2e8f0;
    --brand-a: #01f2d5;
    --brand-b: #086268;
    --btn-a: #0d9488;
    --btn-b: #086268;
    --tint: #f0fdfa;
    --tint-line: #ccfbf1;
    --danger: #dc2626;
    --radius: 12px;
    font-size: 16px;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    background: #ffffff;
    color: var(--ink);
    /* fallback ต้องมีฟอนต์ไทยจริงทุกแพลตฟอร์ม ไม่งั้นระหว่างรอ swap ตัวไทย
       จะไปตกที่ฟอนต์ default ที่รูปทรงห่างจาก LINE Seed มาก แล้วหน้ากระตุก
       (iOS = Thonburi, Android = Noto Sans Thai) */
    font-family: 'LINE Seed Sans TH', -apple-system, BlinkMacSystemFont,
        'Noto Sans Thai', 'Thonburi', 'Helvetica Neue', sans-serif;
    line-height: 1.6;
    -webkit-text-size-adjust: 100%;
}

.wrap {
    max-width: 480px;
    margin: 0 auto;
    padding: 20px 20px calc(20px + env(safe-area-inset-bottom));
}

.hidden { display: none !important; }

/* ===== หัวใบ ===== */
.head {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 14px;
    border-radius: var(--radius);
    background: linear-gradient(160deg, var(--brand-a), var(--brand-b));
    margin-bottom: 18px;
}
.head-text { min-width: 0; }
.game-img {
    width: 52px;
    height: 52px;
    border-radius: 10px;
    object-fit: cover;
    flex: 0 0 auto;
    background: rgba(255, 255, 255, 0.25);
}
.eyebrow {
    margin: 0;
    font-size: 0.75rem;
    color: #cff9f2;
}
.head h1 {
    margin: 1px 0 2px;
    font-size: 1.125rem;
    font-weight: 700;
    color: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pkg {
    margin: 0;
    font-size: 0.8125rem;
    color: #cff9f2;
}
.pkg b {
    color: #fff;
    font-variant-numeric: tabular-nums;
}

/* ===== ฟอร์ม ===== */
.fields {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.field label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 700;
    margin-bottom: 6px;
}
.field input,
.field select {
    width: 100%;
    padding: 12px 13px;
    font-size: 1rem; /* ≥16px กัน iOS ซูมเข้าอัตโนมัติตอนโฟกัส */
    font-family: inherit;
    color: var(--ink);
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    -webkit-appearance: none;
    appearance: none;
}
.field select {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1l5 5 5-5' stroke='%2364748b' stroke-width='2' fill='none' stroke-linecap='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 13px center;
    padding-right: 34px;
}
.field input:focus,
.field select:focus {
    outline: 2px solid var(--btn-a);
    outline-offset: 1px;
    border-color: transparent;
}
.field.invalid input,
.field.invalid select { border-color: var(--danger); }
.field .hint {
    margin: 5px 0 0;
    font-size: 0.75rem;
    color: var(--faint);
}
.field .hint.err { color: var(--danger); }

.note {
    margin: 16px 0 0;
    padding: 12px;
    font-size: 0.75rem;
    color: var(--dim);
    background: var(--tint);
    border: 1px solid var(--tint-line);
    border-radius: 8px;
}

.form-error {
    margin-top: 14px;
    padding: 11px 12px;
    font-size: 0.8125rem;
    color: var(--danger);
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
}

/* ===== ปุ่ม ===== */
.actions {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin-top: 20px;
}
.btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    min-height: 48px; /* เป้าแตะขั้นต่ำบนมือถือ */
    padding: 13px 16px;
    font: inherit;
    font-weight: 700;
    border-radius: var(--radius);
    border: 1px solid transparent;
    cursor: pointer;
}
.btn.primary {
    background: linear-gradient(160deg, var(--btn-a), var(--btn-b));
    color: #fff;
}
.btn.ghost {
    background: #fff;
    border-color: #cbd5e1;
    color: var(--ink);
}
.btn:disabled { opacity: 0.55; cursor: not-allowed; }
.btn:focus-visible { outline: 2px solid var(--btn-a); outline-offset: 2px; }

.btn-spin {
    width: 15px;
    height: 15px;
    border: 2px solid rgba(255, 255, 255, 0.45);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
}

/* ===== สถานะเต็มหน้า ===== */
.state {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    padding: 48px 0;
}
.state h1 { margin: 0; font-size: 1.125rem; }
.state p { margin: 0; font-size: 0.875rem; color: var(--dim); }
.state .btn { margin-top: 12px; }
.state-icon {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 1.375rem;
    font-weight: 700;
    color: #fff;
}
.state-icon.ok { background: linear-gradient(160deg, var(--btn-a), var(--btn-b)); }
.state-icon.err { background: var(--danger); }

.spinner {
    width: 26px;
    height: 26px;
    border: 3px solid var(--line);
    border-top-color: var(--btn-a);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
    .spinner, .btn-spin { animation-duration: 2.4s; }
}