/* =========================================================
   myApp.css — All-in-One (Login / Consent / Register / Profile / Index / Home)
   Theme: Green #03531e, Brand #ebbd34
   ========================================================= */
@import url("fontawesome.css");

/* ======================== Fonts ======================== */
@font-face{
  font-family:"Font Awesome 5 Free";
  font-style:normal; font-weight:900; font-display:block;
  src:url("../font/fa-solid-900.woff2") format("woff2"),
      url("../font/fa-solid-900.woff")  format("woff");
}
@font-face{
  font-family:"Font Awesome 5 Free";
  font-style:normal; font-weight:400; font-display:block;
  src:url("../font/fa-regular-400.woff2") format("woff2"),
      url("../font/fa-regular-400.woff")  format("woff");
}
@font-face{
  font-family:"Font Awesome 5 Brands";
  font-style:normal; font-weight:400; font-display:block;
  src:url("../font/fa-brands-400.woff2") format("woff2"),
      url("../font/fa-brands-400.woff")  format("woff");
}

/* ==================== Global / Tokens =================== */
html,body{ min-height:100svh; height:auto; overflow-y:auto; }
.z-window{ padding:0; overflow:visible; }
.z-window-content{ overflow:visible; }

:root{
  /* Base */
  --bg:#f5f7f6; --card:#ffffff; --text:#1f2937; --muted:#6b7280; --border:#e5e7eb;

  /* Brand */
  --green:#22c55e; --green-700:#15803d; --green-50:#f0fdf4;
  --purple:#a855f7;
  --gold:#ebbd34;

  /* Effects */
  --focus-ring:rgba(3,83,30,.24);
  --shadow-xs:0 1px 2px rgba(0,0,0,.06);
  --shadow:0 10px 30px rgba(0,0,0,.08);

  /* Layout / spacing */
  --shell-max: clamp(320px, 92vw, 760px);
  --radius:16px; --radius-lg:20px;
  --pad-x: clamp(14px, 4vw, 24px);
  --pad-t: clamp(10px, 3vh, 18px);
  --gap: clamp(8px, 2vw, 12px);
  --field-h: clamp(42px, 6.2vh, 52px);
  --btn-h: clamp(44px, 6.4vh, 56px);

  /* App shell */
  --header-h:60px;
  --menu-h:64px;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0f172a; --card:#0b1220; --text:#e5e7eb; --muted:#9aa1ac; --border:#23314a;
    --shadow:0 10px 30px rgba(0,0,0,.55);
    --focus-ring:rgba(34,197,94,.32);
  }
}

/* ===================== Base / Reset ===================== */
*,*::before,*::after{ box-sizing:border-box; }
body{
  margin:0; 
/*   background:var(--bg);  */
  color:var(--text);
  font: clamp(14px,3.5vw,16px)/1.56 system-ui,-apple-system,"Kanit","Noto Sans Thai","Noto Sans",Arial,sans-serif;
  -webkit-font-smoothing:antialiased; 
  -moz-osx-font-smoothing:grayscale;
}
img{ max-width:100%; height:auto; display:block; }
input,button,textarea,select{ font:inherit; color:inherit; }
::placeholder{ color: color-mix(in oklab, var(--muted) 78%, transparent); }
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
}

/* =================== Generic Containers ================= */
.login-root,.consent-root,.register-root,.profile-root{ background:var(--bg); min-height:100svh; }
.container{
  width:100%; max-width:var(--shell-max); margin-inline:auto;
  padding: var(--pad-t) var(--pad-x);
  display:flex; flex-direction:column; gap:var(--gap);
}
.card{
  background:var(--card); border:1px solid var(--border);
  border-radius: clamp(14px, 2.4vw, var(--radius-lg));
  box-shadow:var(--shadow);
  padding: clamp(18px, 4.8vw, 28px);
}
.global-mask{ position:fixed; inset:0; background:rgba(2,6,23,.45); backdrop-filter:blur(2px); z-index:20000; }

/* ============= TITLES / GROUPBOX (profile/register) ============= */
.title{ font-weight:900; font-size: clamp(18px, 3.4vw, 22px); color:#111827; margin-bottom:14px; }
.group{ margin:8px 0 14px; border:none; }
.group > .z-groupbox-hl, .group > .z-groupbox-hl .z-caption{ border:none; }
.group > .z-groupbox-hl .z-caption{ padding:0; margin:0 0 8px 0; }
.group-title{ display:block; font-weight:800; color:#047857; font-size:16px; margin-bottom:6px; }
.group .z-groupbox-cnt{ padding:0; }

/* Segmented control (referral) */
.seg{ display:grid; grid-template-columns:1fr 1fr; border:1.5px solid #297A34; border-radius:12px; overflow:hidden; }
.seg .z-button,.seg .btn{ display:flex; align-items:center; justify-content:center; height:42px; font-weight:800; }
.seg .active{ background:#297A34; color:#fff; }
.seg .inactive{ background:#fff; color:#065f46; }

/* Referral box */
.ref-box{ background:#f1f5f9; border:1px solid var(--border); border-radius:12px; padding:16px; text-align:center; font-weight:700; }

/* ========================= Buttons ========================= */
.btn,.z-button{
  border:none; border-radius: clamp(10px, 2vw, 14px);
  padding: clamp(10px, 1.6vh, 14px) clamp(14px, 2.2vw, 18px);
  cursor:pointer; font-weight:800; font-size: clamp(14px, 2.8vw, 16px);
  min-height:var(--btn-h); width:100%;
  transition: transform .06s ease, box-shadow .2s, background .2s, color .2s, border-color .2s;
}

/* Override for home page buttons */
.btn-primary, .btn-ghost {
  min-height: auto !important;
  line-height: 1 !important;
}
.btn-primary{
  background: linear-gradient(135deg, #22c55e 0%, #a855f7 100%);
  color:#fff;
  border:1px solid color-mix(in oklab, #22c55e 60%, black 10%);
  box-shadow:0 10px 22px rgba(34,197,94,.20), inset 0 -1px 0 rgba(0,0,0,.06);
}
.btn-primary:hover{ filter:brightness(1.04); }
.btn-primary:active{ transform:translateY(1px); }
.btn-outline{
  background:#fff; color:#15803d;
  border:1px solid color-mix(in oklab, #22c55e 28%, #cfe7d8);
}
.btn-outline:hover{
  background:#f0fdf4;
  border-color: color-mix(in oklab, #22c55e 45%, #cfe7d8);
}
.btn:focus-visible,.z-button:focus-visible{
  outline:none; box-shadow:0 0 0 3px var(--focus-ring), inset 0 0 0 1px #fff;
}
.btn-row{ display:flex; gap:var(--gap); flex-wrap:wrap; }
.btn-row .btn,.btn-row .z-button{ flex:1 1 100%; }

/* ===================== Inputs & Fields ===================== */
.form-row{ display:flex; flex-direction:column; gap:6px; margin-bottom:12px; }
.form-label{ font-size:13px; font-weight:700; color:var(--text); }

/* Text-like */
.zk-input,.z-textbox,.z-intbox,.z-decimalbox,.z-longbox,.z-doublebox{
  height:44px; border-radius:10px;
  border:1px solid #e6e7ea; padding:10px 12px; background:#fff; color:var(--text);
  transition:border-color .18s, box-shadow .18s, background .18s;
}
.zk-input:hover,.z-textbox:hover{ border-color:#d1d5db; }
.zk-input:focus-visible,.z-textbox:focus-visible{
  outline:none; border-color:#22c55e; box-shadow:0 0 0 3px var(--focus-ring);
}

/* Combobox & Datebox (DRY) */
.z-combobox,.z-datebox{
  display:inline-flex; align-items:stretch; height:44px;
  border-radius:10px; border:1px solid #e6e7ea; overflow:hidden; background:#fff;
}
.z-combobox-input,.z-datebox-input{
  border:none !important; height:100%; padding:10px 12px; background:transparent;
}
.z-combobox-button,.z-datebox-button{
  width:40px; border-left:1px solid #e6e7ea; background:#fff; display:grid; place-items:center;
}
.z-combobox:hover,.z-datebox:hover{ border-color:#d1d5db; }
.z-combobox:focus-within,.z-datebox:focus-within{ border-color:#22c55e; box-shadow:0 0 0 3px var(--focus-ring); }

/* Disabled */
[disabled].zk-input,[disabled].z-textbox,[disabled].z-datebox-input,[disabled].z-combobox-input{
  background:#f3f4f6; color:#000000; border-color:#e5e7eb;
}
.z-textbox[disabled], .z-decimalbox[disabled], .z-intbox[disabled], .z-longbox[disabled], .z-doublebox[disabled] {
    color: #000000 !important;
    background: #e5e7eb !important;
    cursor: default !important;
}

.z-combobox-disabled>input {
    color: rgba(0, 0, 0, 0.9) !important;
    background: #e5e7eb !important;
    cursor: default !important;
}
.z-datebox-disabled>input {
    color: rgba(0, 0, 0, 0.9) !important;
    background: #e5e7eb !important;
    cursor: default !important;
}

.z-textbox[readonly], .z-decimalbox[readonly], .z-intbox[readonly], .z-longbox[readonly], .z-doublebox[readonly] {
    color: rgba(0, 0, 0, 0.9);
    background: #e5e7eb;
}

.z-tab-text {
    font-style: normal;
    color: #22c55e;
    display: block;
    line-height: 24px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ===================== Brand (all pages) ===================== */
.brand-center{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap: clamp(10px, 2vw, 14px); margin-bottom: clamp(10px, 2.4vh, 16px); text-align:center;
}
.brand__logo-img{
  width: clamp(92px, 18vw, 140px); height: clamp(92px, 18vw, 140px);
  border-radius: clamp(14px, 2.4vw, 22px);
  object-fit:cover;
  box-shadow: 0 12px 24px rgba(34,197,94,.22);
  outline:2px solid color-mix(in oklab, var(--gold) 42%, transparent);
}
.brand-badge,.brand__name{
  display:inline-block; font-weight:950; font-size: clamp(22px, 4.2vw, 34px);
  line-height:1.06; color:var(--gold);
  background: linear-gradient(135deg, #22c55e 0%, #a855f7 100%);
  border:1px solid color-mix(in oklab, #22c55e 85%, black 15%);
  padding: clamp(6px, 1.2vh, 10px) clamp(12px, 2.2vw, 18px);
  border-radius: clamp(14px, 2.2vw, 20px);
  letter-spacing:.3px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(0,0,0,.08), 0 8px 20px rgba(34,197,94,.2);
}

/* ========================= Login ========================= */
.login-wrap{ min-height:100svh; display:flex; align-items:center; justify-content:center; }
.login-card{ max-width: clamp(480px, 88vw, 580px); margin-inline:auto; }
.login-title{ margin:12px 0 4px; font:800 clamp(18px, 3.4vw, 22px)/1.22 var(--font,inherit); }
.login-desc{ margin:0 0 14px; font-size: clamp(12.5px, 2.6vw, 14.5px); color:var(--muted); }
.login-line-btn{
  margin-top:6px;
  border:1px solid color-mix(in oklab, #22c55e 55%, black 10%);
  box-shadow:0 10px 22px rgba(34,197,94,.18), inset 0 -1px 0 rgba(0,0,0,.06);
}
.divider{
  display:flex; align-items:center; gap:10px; color:var(--muted);
  font-size: clamp(12px, 2.4vw, 13.5px); margin:14px 0;
}
.divider::before,.divider::after{
  content:""; height:1px; flex:1;
  background:linear-gradient(90deg, transparent, color-mix(in oklab, #a855f7 28%, var(--border)), transparent);
}
.login-note{
  font-size: clamp(12px, 2.4vw, 13.5px); color:var(--muted);
  background:#f0fdf4;
  border:1px solid color-mix(in oklab, #22c55e 18%, transparent);
  padding: clamp(10px, 1.6vh, 12px) clamp(12px, 2vw, 14px);
  border-radius:10px;
}
.login-footer{
  margin-top:10px; font-size: clamp(12px, 2.4vw, 13.5px); color:var(--muted);
  display:flex; flex-wrap:wrap; gap:6px; align-items:center; justify-content:center;
}
.muted-link{ color:#7c3aed; text-decoration:none; font-weight:800; border-bottom:1px dashed color-mix(in oklab, #7c3aed 40%, transparent); }
.muted-link:hover{ color:#a855f7; }

/* ========================= Consent ========================= */
.consent-card{ max-width: clamp(560px, 90vw, 760px); margin-inline:auto; }
.consent-title{ text-align:center; font-weight:800; font-size: clamp(18px, 3.4vw, 22px); margin:6px 0 4px; }
.consent-desc{ text-align:center; color:var(--muted); font-size: clamp(12.5px, 2.6vw, 14.5px); margin:0 0 12px; }
.terms{ margin:6px 0 12px; }
.terms__list{
  margin:0; padding-left:22px; max-height:38vh; overflow:auto;
  line-height:1.6; font-size: clamp(14px, 2.6vw, 15px);
}
.terms__list>li{ margin:6px 0; }
.terms__list>li::marker{ color:var(--gold); font-weight:800; }
.note{
  margin-top:10px; font-size: clamp(12.5px, 2.6vw, 14px); color:var(--muted);
  background:#f0fdf4;
  border:1px solid color-mix(in oklab, #22c55e 18%, transparent);
  padding: clamp(10px, 1.6vh, 12px) clamp(12px, 2vw, 14px);
  border-radius:10px;
}
/* Agree row */
.agree{ display:flex; align-items:center; gap: clamp(10px, 2vw, 14px); margin:10px 0 12px; }
.agree .z-checkbox{ display:flex; align-items:center; gap: clamp(8px, 2vw, 10px); }
.agree .z-checkbox input[type="checkbox"]{
  appearance:auto; inline-size: clamp(18px, 3.6vw, 22px); block-size: clamp(18px, 3.6vw, 22px);
  border-radius:6px; accent-color:#22c55e;
  border:1px solid color-mix(in oklab, #22c55e 45%, var(--border));
  outline-offset:2px;
}
.agree .z-checkbox input[type="checkbox"]:focus-visible{ outline:2px solid rgba(34,197,94,.6); }
.footer{ display:block; text-align:center; color:var(--muted); margin-top:10px; font-size: clamp(12px, 2.4vw, 13.5px); }

/* ====================== Index Shell ====================== */
/* Header styles moved to index.zul */
.header-title{
  font:900 18px/1.1 system-ui,-apple-system,"Kanit",sans-serif; letter-spacing:.2px;
  background: linear-gradient(180deg, #fff, #e7ffe7);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow: 0 1px 0 rgba(0,0,0,.06);
}
.lotto-date,.date-center{ display:block; text-align:center; font-weight:800; color:#334155; margin:8px 0 6px; }

/* Main area & Bottom menu (single source of truth) */
.main-area{
  width:min(100vw, var(--shell-max));
  margin:0 auto;
  /* padding:calc(var(--pad-t) + var(--header-h)) var(--pad-x) var(--pad-t); */
  padding: calc(var(--pad-t) + var(--header-h) - 24px) 0 0;
  background:#fff; color:var(--text);
  overflow:auto; overscroll-behavior:contain; box-sizing:border-box;
}
/* .mobile-menu{ */
/*   position:fixed; left:50%; transform:translateX(-50%); */
/*   bottom:max(env(safe-area-inset-bottom),0px); */
/*   width:min(100vw, var(--shell-max)); */
/*   height:calc(var(--menu-h) + max(env(safe-area-inset-bottom),0px)); */
/*   padding-bottom:max(env(safe-area-inset-bottom),0px); */
/*   background:var(--card); */
/*   border-top:1px solid var(--border); */
/*   box-shadow:0 -8px 24px rgba(0,0,0,.08); */
/*   z-index:1000; */
/*   border-radius:16px 16px 0 0; */
/* } */

/* /* ======================= Menu Toolbar ======================= */ */
/* .menu-toolbar{ display:flex !important; align-items:center; gap:10px; padding:0 10px; height:var(--menu-h); flex-wrap:nowrap; } */
/* .menu-toolbar .z-toolbarchildren{ display:flex; gap:10px; flex-wrap:nowrap; width:100%; } */
/* .menu-toolbar .z-toolbarbutton{ position:relative; flex:1 1 0; min-width:0; } anchor for status dot */
/* .menu-toolbar .z-toolbarbutton > .z-toolbarbutton-content{ */
/*   display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; */
/*   padding:8px 4px; border-radius:12px; width:100%; */
/*   color:#f8f9fb; font:700 11.5px/1.2 system-ui,-apple-system,"Kanit",sans-serif; */
/*   transition:transform .08s, background .2s, color .2s; */
/* } */
/* .menu-toolbar .z-toolbarbutton .z-icon{ font-size:19px; color:#94a3b8; transition:color .2s; } */
/* .menu-toolbar .z-toolbarbutton:hover > .z-toolbarbutton-content{ background: color-mix(in oklab, #059669 6%, transparent); color:#059669; } */
/* .menu-toolbar .z-toolbarbutton:hover .z-icon{ color:#059669; } */

/* /* ORDER TAB: newline label + counting state */ */
/* .menu-toolbar .z-toolbarbutton.order-tab .z-toolbarbutton-content .z-toolbarbutton-text{ */
/*   white-space:pre-line; display:block; line-height:1.1; text-align:center; font-weight:700; */
/* } */
/* /* counting mode */ */
/* .menu-toolbar .z-toolbarbutton.order-tab.counting > .z-toolbarbutton-content{ */
/*   background:#0ea5e9; color:#fff; box-shadow:0 2px 8px rgba(14,165,233,.35); */
/* } */
/* .menu-toolbar .z-toolbarbutton.order-tab.counting .z-icon{ color:inherit; } */
/* /* blinking status dot */ */
/* .menu-toolbar .z-toolbarbutton.order-tab.counting::after{ */
/*   content:""; position:absolute; right:8px; top:8px; */
/*   width:8px; height:8px; border-radius:999px; background:#fff; opacity:.95; */
/*   animation:pulse 1.2s infinite ease-in-out; */
/* } */
/* @keyframes pulse{ */
/*   0%{ transform:scale(1);   opacity:.95; } */
/*   50%{ transform:scale(1.6); opacity:.5; } */
/*   100%{ transform:scale(1);  opacity:.95; } */
/* } */
/* .active-tab > .z-toolbarbutton-content{ */
/*   color:#059669 !important; */
/*   background: color-mix(in oklab, var(--gold) 18%, #f8f9fb) !important; */
/*   box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--gold) 46%, transparent); */
/* } */
/* .active-tab .z-icon{ color:#059669 !important; } */
/* .fade-swipe{ animation:fadeSwipe .22s ease-out both; } */
/* @keyframes fadeSwipe{ from{ opacity:.0; transform:translateY(6px); } to{ opacity:1; transform:none; } } */

/* ==================== Home (Search & Cards) ==================== */
.search-card{
  position:sticky; top:0; z-index:10;
  background:#f9fffb; border:1px solid #e5f3e9; border-radius:14px;
  padding:12px; box-shadow:var(--shadow-xs);
}
.search-title{ font-weight:800; color:#15803d; margin-bottom:8px; }
.digits{ display:grid; grid-template-columns:repeat(6, minmax(36px, 1fr)); gap:8px; }
.textbox-digit{
  width:100%; height:32px; text-align:center; font-size:13px; font-weight:800;
  border:1px solid #e6e7ea; border-radius:8px; background:#fff; color:var(--text);
  box-shadow:var(--shadow-xs); transition:border-color .18s, box-shadow .18s;
  padding: 2px;
}
.textbox-digit:focus{ outline:none; border-color:#297A34; box-shadow:0 0 0 3px var(--focus-ring); }

/* =================== Grid (green+purple tone) =================== */
.z-grid-header{ width:100%; background: linear-gradient(90deg, #22c55e 0%, #a855f7 100%); position:relative; overflow:hidden; }
.z-grid .z-column{
  background: linear-gradient(90deg, #22c55e 0%, #a855f7 100%) !important; color:#fff !important; font-weight:700; text-align:center;
  border:none !important; border-radius:8px 8px 0 0;
}
.z-grid .z-row .z-label{ color:#064E3B; font-weight:600; }
.z-grid .z-row:nth-child(even){ background:#ECFDF5; }
.z-grid .z-row:nth-child(odd){ background:#fff; }
.z-grid{
  border:1px solid #D1FAE5; border-radius:12px; overflow:hidden; box-shadow:0 4px 12px rgba(0,0,0,.06);
}

/* Toolbar (ZK) */
.z-toolbar {
  border: 0;
  background: linear-gradient(180deg, #e5e7eb 0%, #ffffff 100%);
  position: relative;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.08), 0 1.5px 8px 0 rgba(0,0,0,0.06);
}

/* Groupbox content (ZK) */
.z-groupbox-content{
  font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size:16px; font-weight:normal; font-style:normal; color:rgba(0,0,0,.9);
  background:#FFFFFF; display:block; height:inherit;
  border:1px solid #D9D9D9; border-top:0;
  padding:5px; overflow:hidden; zoom:1;
}

.z-window-content {
    padding: 0px;
    background: #FFFFFF;
    color: rgba(0, 0, 0, 0.9);
    zoom: 1;
}

/* Sticky CTA */
.sticky-actions{
  position:fixed; left:0; right:0; bottom:0;
  background:var(--card); border-top:1px solid var(--border);
  box-shadow:0 -8px 24px rgba(0,0,0,.08);
  padding: clamp(10px, 1.6vh, 14px) var(--pad-x);
  z-index:1200;
}
.container.has-cta{ padding-bottom: clamp(96px, 13vh, 160px); }
@supports (height: 100dvh){
  .container.has-cta{ padding-bottom: clamp(96px, 13dvh, 160px); }
}


.z-listbox-header {
    width: 100%;
    background: linear-gradient(90deg, #22c55e 0%, #a855f7 100%);
    position: relative;
    /* overflow: hidden; */
}

.z-listheader {
    border-left: 1px solid #22c55e;
    border-bottom: 1px solid #22c55e;
    padding: 0;
    background: linear-gradient(90deg, #22c55e 0%, #a855f7 100%);
    position: relative;
    overflow: hidden;
    white-space: nowrap;
}

.z-button {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  font-weight: normal;
  font-style: normal;
  color: #FFFFFF;
  min-height: 24px;
  border: 2px solid transparent;
  border-radius: 4px;
  padding: 8px 16px;
  line-height: normal;
  background-color: #9639A8; /* ม่วงตัว */
  box-shadow: 0 2px 4px 0 rgba(0,0,0,0.16);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.18s;
}

.z-button:hover,
.z-button:focus {
  background: linear-gradient(135deg, #22c55e 0%, #a855f7 100%);
  color: #fff;
}

.z-button:active {
  color: #FFFFFF;
  border-color: transparent;
  background: linear-gradient(135deg, #16a34a 0%, #9333ea 100%);
}