.member-actions { justify-self: end; display: flex; align-items: center; gap: 10px; }
.member-button { min-height: 50px; padding: 0 24px; display: inline-flex; align-items: center; justify-content: center; position: relative; overflow: hidden; color: #e6c66f; background: linear-gradient(145deg, #11100d, #050505); border: 1px solid #d9b65d; font-size: .92rem; font-weight: 500; box-shadow: inset 0 0 14px #d9b65d0d, 0 8px 22px #0006; transition: .3s ease; }
.member-button::before { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 25%, #f8df8d24 50%, transparent 75%); transform: translateX(-120%); transition: transform .55s ease; }
.member-button:hover { color: #080706; background: linear-gradient(110deg, #b78931, #efd47d); transform: translateY(-2px); box-shadow: 0 12px 28px #d9b65d22; }
.member-button:hover::before { transform: translateX(120%); }
.member-button span { position: relative; font-family: Manrope, sans-serif; }
.login-button { border-color: #9c7b38; color: #c9ad68; }
.mobile-member-actions { display: none; }
@media(max-width:1200px){.member-button{min-height:46px;padding:0 17px;font-size:.82rem}.member-actions{gap:7px}}
@media(max-width:1000px){
  .member-actions{display:none}
  body { padding-bottom: 78px; }
  .mobile-member-actions {
    position: fixed;
    z-index: 30;
    left: 0;
    right: 0;
    bottom: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 11px max(5vw, env(safe-area-inset-left)) calc(11px + env(safe-area-inset-bottom)) max(5vw, env(safe-area-inset-right));
    border-top: 1px solid rgba(217,182,93,.28);
    background: rgba(4,4,4,.94);
    box-shadow: 0 -12px 35px rgba(0,0,0,.65), 0 -1px 18px rgba(217,182,93,.08);
    backdrop-filter: blur(14px);
  }
  .mobile-member-actions .member-button {
    width: 100%;
    min-width: 0;
    min-height: 52px;
    padding: 0 10px;
    border-radius: 4px;
    font-size: .94rem;
    font-weight: 600;
    letter-spacing: .15px;
    white-space: nowrap;
    box-shadow: inset 0 0 18px rgba(255,226,137,.08), 0 5px 20px rgba(0,0,0,.58);
  }
  .mobile-member-actions .register-button,
  .mobile-member-actions .login-button {
    color: #090704;
    border-color: #f3d77e;
    background: linear-gradient(115deg, #a87520 0%, #e7c45f 32%, #ffe695 52%, #c79331 100%);
    text-shadow: 0 1px 0 rgba(255,255,255,.3);
    box-shadow: 0 0 0 1px rgba(255,222,123,.18), 0 0 22px rgba(219,173,62,.36), 0 7px 24px rgba(0,0,0,.62);
    animation: mobile-cta-glow 2.2s ease-in-out infinite;
  }
  .mobile-member-actions .member-button::before {
    background: linear-gradient(110deg, transparent 25%, rgba(255,250,215,.48) 50%, transparent 75%);
    animation: mobile-cta-shine 3.2s ease-in-out infinite;
  }
}
@keyframes mobile-cta-shine {
  0%, 48% { transform: translateX(-130%); }
  72%, 100% { transform: translateX(130%); }
}
@keyframes mobile-cta-glow {
  0%, 100% { box-shadow: 0 0 0 1px rgba(255,222,123,.16), 0 0 17px rgba(219,173,62,.25), 0 7px 24px rgba(0,0,0,.62); }
  50% { box-shadow: 0 0 0 1px rgba(255,229,145,.28), 0 0 29px rgba(237,192,76,.48), 0 7px 24px rgba(0,0,0,.62); }
}
@media (prefers-reduced-motion: reduce) {
  .mobile-member-actions .member-button,
  .mobile-member-actions .member-button::before { animation: none; }
}
@media(max-width:380px){
  .mobile-member-actions { gap: 7px; }
  .mobile-member-actions .member-button { font-size: .8rem; }
}


/* Member access modal */
body.member-modal-open { overflow: hidden; }
.member-modal { position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center; padding: 20px; visibility: hidden; opacity: 0; transition: opacity .22s ease, visibility .22s ease; }
.member-modal.is-open { visibility: visible; opacity: 1; }
.member-modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.82); backdrop-filter: blur(9px); }
.member-modal-panel { position: relative; width: min(100%, 470px); max-height: calc(100vh - 36px); overflow-y: auto; padding: 38px; border: 1px solid rgba(221,179,79,.42); border-radius: 22px; background: radial-gradient(circle at 85% 0, rgba(221,179,79,.15), transparent 34%), linear-gradient(145deg,#17140f,#080706 72%); box-shadow: 0 30px 90px rgba(0,0,0,.72), inset 0 1px rgba(255,255,255,.05); transform: translateY(18px) scale(.98); transition: transform .22s ease; }
.member-modal.is-open .member-modal-panel { transform: translateY(0) scale(1); }
.member-modal-close { position: absolute; top: 15px; right: 16px; width: 36px; height: 36px; border: 1px solid rgba(221,179,79,.25); border-radius: 50%; background: rgba(255,255,255,.04); color: #d8cfbf; font-size: 1.45rem; line-height: 1; cursor: pointer; }
.member-modal-eyebrow { margin: 0 0 14px; color: #d9b65d; font: 800 .62rem Manrope,sans-serif; letter-spacing: 2.5px; }
.member-modal-panel h2 { margin: 0; color: #f5f1e7; font-size: clamp(2rem,5vw,3.1rem); line-height: 1; letter-spacing: -1.5px; }
.member-modal-panel h2 em { color: #d9b65d; font-style: normal; }
.member-modal-description { margin: 16px 0 25px; color: #aaa297; font-size: .9rem; line-height: 1.65; }
.member-modal-form { display: block; max-width: none; margin: 0; }
.member-modal-form label { display: block; margin-bottom: 8px; color: #ddd4c5; font-size: .78rem; }
.member-phone-field { display: flex; align-items: center; border: 1px solid rgba(221,179,79,.3); border-radius: 10px; background: #080706; transition: border-color .18s, box-shadow .18s; }
.member-phone-field:focus-within { border-color: #d9b65d; box-shadow: 0 0 0 3px rgba(217,182,93,.12); }
.member-phone-field span { padding: 0 13px; color: #d9b65d; border-right: 1px solid rgba(221,179,79,.2); font: 700 .85rem Manrope,sans-serif; }
.member-phone-field input { min-width: 0; width: 100%; padding: 15px 13px; border: 0; outline: 0; background: transparent; color: #fff; font-size: 1rem; }
.member-phone-field input::placeholder { color: #625d54; }
.member-modal-feedback { min-height: 20px; margin: 7px 0 5px; color: #e2c16a; font-size: .72rem; }
.member-login-submit,.member-register-action { width: 100%; min-height: 50px; border-radius: 9px; cursor: pointer; font-weight: 600; }
.member-login-submit { border: 0; background: linear-gradient(110deg,#f0d47d,#c89532); color: #100d08; }
.member-register-action { border: 1px solid #d9b65d; background: transparent; color: #e7c76d; }
.member-modal-divider { display: flex; align-items: center; gap: 12px; margin: 17px 0; color: #756e63; font-size: .7rem; }
.member-modal-divider::before,.member-modal-divider::after { content: ''; flex: 1; height: 1px; background: rgba(221,179,79,.16); }
.member-line-action { display: flex; align-items: center; justify-content: center; gap: 11px; min-height: 50px; margin-top: 11px; border-radius: 9px; background: #06c755; color: #fff; }
.member-line-action span { font: 800 .72rem Manrope,sans-serif; padding: 5px; border: 1px solid rgba(255,255,255,.8); border-radius: 5px; }
.member-line-action strong { font-size: .9rem; }
.member-modal-note { display: block; margin-top: 17px; color: #756e63; text-align: center; font-size: .65rem; }
@media(max-width:700px){.member-modal{padding:12px}.member-modal-panel{padding:31px 21px 24px;border-radius:17px}.member-modal-panel h2{font-size:2rem}.member-modal-description{font-size:.8rem;margin-bottom:19px}}


/* ยอดเครดิตบนหัวเว็บ — header เป็น grid ต้องระบุคอลัมน์ให้ชัด ไม่งั้นตกไปขึ้นแถวสอง
   เดสก์ท็อป: ชิดขวาสุด · มือถือ: อยู่ก่อนปุ่ม ☰ */
#memberSlot { display: inline-flex; align-items: center; grid-row: 1; grid-column: 3; justify-self: end; }
@media(max-width:1000px){
  header { grid-template-columns: 1fr auto auto; }
  header > .logo { grid-column: 1; }
  #memberSlot { grid-column: 2; margin-right: 10px; }
  header .menu { grid-column: 3; }
  #memberSlot .ufa-pill { padding: 4px 8px 4px 5px; font-size: .9rem; }
}

/* หัวเว็บเป็น position:fixed สูง 82px — หน้าสมาชิกต้องเว้นที่ ไม่งั้นเนื้อหาโดนทับ */
.member-page { padding-top: 100px; }
@media(max-width:1000px){ .member-page { padding-top: 92px; } }


/* ── ufacom-no-flash ──────────────────────────────────────────
   ล็อกอินอยู่แล้ว: ซ่อนปุ่มสมัคร/เข้าสู่ระบบตั้งแต่ก่อนวาดหน้า (คลาสมาจากสคริปต์ใน <head>)
   แล้วโชว์โครงร่างชิปไว้กันหัวเว็บกระโดดตอนชิปจริงมา */
html.is-member .member-actions,
html.is-member .mobile-member-actions,
html.is-member header [data-member-access="register"],
html.is-member header [data-member-access="login"] { display: none !important; }

html.is-member #memberSlot:empty::after,
html.is-member .member-actions-slot:empty::after {
  content: ""; display: block; width: 132px; height: 38px; border-radius: 999px;
  background: rgba(218, 174, 72, .18); animation: memberSkel 1.1s ease-in-out infinite;
}
@keyframes memberSkel { 0%, 100% { opacity: .45 } 50% { opacity: .9 } }

/* หน้าสมาชิก (กระเป๋าเงิน/บัญชี/เปลี่ยน PIN) ระหว่างรอ member.js วาด */
[data-ufa-page]:empty { display: block; min-height: 320px; border-radius: 16px;
  background: linear-gradient(100deg, rgba(255,255,255,.03) 30%, rgba(218,174,72,.10) 50%, rgba(255,255,255,.03) 70%);
  background-size: 220% 100%; animation: pageSkel 1.4s ease-in-out infinite; }
@keyframes pageSkel { 0% { background-position: 120% 0 } 100% { background-position: -20% 0 } }