/** * Register form v2 — สไตล์รวมไฟล์เดียว (เดิม: typography / otp-and-phone / modal-shell / modal-form-submit) * * Scoping — ประกอบกับธีม/หน้าเว็บอื่นแล้วไม่ชนกับคลาสเดียวกัน: * - เพิ่ม class=`pp-nsc-pre-register` ที่ root แต่ละโมดัลของ pre-register (ตัวแปรฟอนต์ + ฟอนต์ภายใน subtree) * - ทางเลือกสำหรับหน้าเดโม่เท่านั้น: ใส่ class เดียวกันกับองค์ประกอบ landing (เช่น wrapper ครอป hero + ปุ่มเปิดโมดัล) เพื่อให้ข้อความนอกโมดัลใช้ฟอนต์ตามภาษา * - ชื่อคลาสประกอบฟอร์มใช้ prefix `pp-nsc-pre-*` * - `:lang(...)` อ้างจากบริบทภาษาเอกสาร — ควรให้ ถูกต้องเมื่อใช้ร่วม WordPress/Polylang */ /* ===================================================================== Typography + ฟอนต์ตาม lang ===================================================================== */ .pp-nsc-pre-register { --pp-nsc-pre-font-serif: system-ui, sans-serif; --pp-nsc-pre-font-display: system-ui, sans-serif; font-family: var(--pp-nsc-pre-font-serif), system-ui, sans-serif; } /* Eng — ฟอนต์ fallback เดิม en-sea และมาตรฐาน eng-sea */ .pp-nsc-pre-register:lang(en-sea), .pp-nsc-pre-register:lang(eng-sea), .pp-nsc-pre-register:lang(en) { --pp-nsc-pre-font-serif: 'Cinzel', serif; --pp-nsc-pre-font-display: 'Rowdies', sans-serif; } /* ไทย — Anuphan อย่างเดียว (fallback เป็น system-ui เมื่อโหลดฟอนต์ไม่สำเร็จ) */ .pp-nsc-pre-register:lang(th-th), .pp-nsc-pre-register:lang(th) { --pp-nsc-pre-font-serif: 'Anuphan', system-ui, sans-serif; --pp-nsc-pre-font-display: 'Anuphan', system-ui, sans-serif; } /* Bahasa Indonesia */ .pp-nsc-pre-register:lang(id-id), .pp-nsc-pre-register:lang(id) { --pp-nsc-pre-font-serif: 'Cinzel', serif; --pp-nsc-pre-font-display: 'Rowdies', sans-serif; } /* 简体中文 — Noto Serif SC อย่างเดียว (fallback เมื่อโหลดฟอนต์ไม่สำเร็จ) */ .pp-nsc-pre-register:lang(zh-cn), .pp-nsc-pre-register:lang(zh-CN), .pp-nsc-pre-register:lang(zh-hans-cn), .pp-nsc-pre-register:lang(zh) { --pp-nsc-pre-font-serif: 'Noto Serif SC', system-ui, serif; --pp-nsc-pre-font-display: 'Noto Serif SC', system-ui, serif; } .pp-nsc-pre-register .display-5, .pp-nsc-pre-register .display-6, .pp-nsc-pre-register h1, .pp-nsc-pre-register h2, .pp-nsc-pre-register h3, .pp-nsc-pre-register h4, .pp-nsc-pre-register h5, .pp-nsc-pre-register h6, .pp-nsc-pre-register .modal-title { font-family: var(--pp-nsc-pre-font-serif), sans-serif; } /* คำบรรยายใต้หัวใน Modal ลงทะเบียน — en-sea ใช้ Rowdies (โดยปกติ

สืบ Cinzel จาก root) */ #registerModal.pp-nsc-pre-register:lang(en-sea) .pp-nsc-pre-reg-subtitle, #registerModal.pp-nsc-pre-register:lang(eng-sea) .pp-nsc-pre-reg-subtitle { font-family: var(--pp-nsc-pre-font-display), sans-serif; } /* ฟอร์มลงทะเบียน — en-sea ใช้ Rowdies (หัว/บอดี้ภายในโมดัลยังเป็น Cinzel) */ #registerModal.pp-nsc-pre-register:lang(en-sea) #registerForm, #registerModal.pp-nsc-pre-register:lang(eng-sea) #registerForm { font-family: var(--pp-nsc-pre-font-display), sans-serif; } #registerModal.pp-nsc-pre-register:lang(en-sea) #registerForm *, #registerModal.pp-nsc-pre-register:lang(eng-sea) #registerForm * { font-family: inherit; } /* Modal OTP — en-sea ใช้ Rowdies ใต้หัว + ทั้ง body (ข้อความ / ช่อง OTP / ปุ่ม) */ #otpModal.pp-nsc-pre-register:lang(en-sea) .pp-nsc-pre-otp-subtitle, #otpModal.pp-nsc-pre-register:lang(eng-sea) .pp-nsc-pre-otp-subtitle { font-family: var(--pp-nsc-pre-font-display), sans-serif; } #otpModal.pp-nsc-pre-register:lang(en-sea) .modal-body, #otpModal.pp-nsc-pre-register:lang(eng-sea) .modal-body { font-family: var(--pp-nsc-pre-font-display), sans-serif; } #otpModal.pp-nsc-pre-register:lang(en-sea) .modal-body *, #otpModal.pp-nsc-pre-register:lang(eng-sea) .modal-body * { font-family: inherit; } /* Success Modal — ข้อความกลาง body ใช้ Rowdies เมื่อ lang en-sea */ #successModal.pp-nsc-pre-register:lang(en-sea) #successMessage, #successModal.pp-nsc-pre-register:lang(eng-sea) #successMessage, #successModal.pp-nsc-pre-register:lang(en-sea) p[data-i18n="success_modal_follow_hint"], #successModal.pp-nsc-pre-register:lang(eng-sea) p[data-i18n="success_modal_follow_hint"] { font-family: var(--pp-nsc-pre-font-display), sans-serif; } /* #registerForm — น้ำหนักตัวอักษร 300 ทุกภาษา (ทับ Bootstrap fw-semibold / fw-bold) */ #registerModal.pp-nsc-pre-register #registerForm, #registerModal.pp-nsc-pre-register #registerForm * { font-weight: 300 !important; } /* ===================================================================== OTP + phone row ===================================================================== */ /* ช่อง OTP หนึ่งหลัก — ขนาดพอดี ไม่เทียบเท่า form-control-lg */ .pp-nsc-pre-otp-row { flex-wrap: wrap; row-gap: 0.375rem; justify-content: center; overflow: visible; padding-bottom: 0; } .pp-nsc-pre-otp-digit { flex: 0 0 auto; width: clamp(1.75rem, 7.5vw, 2.5rem); min-width: clamp(1.75rem, 7.5vw, 2.5rem); max-width: 2.5rem; height: 2.875rem; padding: 0 0.25rem; font-size: 1.125rem; font-weight: 700; text-align: center; line-height: 2.875rem; } @media (max-width: 576px) { .pp-nsc-pre-otp-digit { width: clamp(1.625rem, 6.5vw, 2.375rem); min-width: clamp(1.625rem, 6.5vw, 2.375rem); max-width: 2.375rem; height: 2.625rem; line-height: 2.625rem; font-size: 1rem; } } /* โทรศัพท์: select ความกว้างคงที่ + ให้ feedback ลงบรรทัดใหม่ */ .pp-nsc-pre-phone-row { flex-wrap: wrap; align-items: stretch; } .pp-nsc-pre-phone-row > .pp-nsc-pre-phone-cc { flex: 0 0 auto; /* แคบกว่าช่องเบอร์ — ตัวเลือกเป็นรูปแบบ CC +XX */ width: 5.25rem; min-width: 5.25rem; max-width: 5.25rem; } .pp-nsc-pre-phone-row > #phone { flex: 1 1 0; min-width: 0; } .pp-nsc-pre-phone-row > .invalid-feedback { flex: 0 0 100%; width: 100%; } /* ===================================================================== Modal shell (กรอบ frame-register) ===================================================================== */ /* frame-register.png 482×742 — ทุก device: กล่องสูงสุดกว้าง 526px แต่ไม่เกินความกว้าง/สูงจอ (เลื่อนภายใน modal-body เมื่อเนื้อหายาว) */ /* เฉพาะเมื่อมีโมดัลของเราเปิด — ไม่พึ่ง class ที่ ; ไม่บังขณะธีมอื่นเปิด Bootstrap modal */ body.modal-open:has(.modal.pp-nsc-pre-register.show) { overflow: hidden; padding-inline-end: 0 !important; } .modal.pp-nsc-pre-modal-shell { --pp-vm: clamp(0.25rem, 1.5vmin, 0.75rem); --pp-frame-max-display-w: min( 526px, calc(100vw - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px) - max(12px, 1rem)) ); --pp-max-w: var(--pp-frame-max-display-w); overflow-x: hidden; overflow-y: hidden; overscroll-behavior: contain; } /* กึ่งกลางทั้งแนวตั้งและแนวนอน Bootstrap ลบ .show ตอนเริ่มปิดแต่ยังคง inline display:block จน transition จบ — ถ้าโยง flex แค่ .show โมดัลจะหลุดเป็น block ชั่วขณะแล้วกระโดดขอบจอ */ .modal.pp-nsc-pre-modal-shell:is( .show, [style*="display: block"], [style*="display:block"] ) { display: flex !important; flex-direction: column; align-items: center; justify-content: center; padding: var(--pp-vm); box-sizing: border-box; } .modal.pp-nsc-pre-modal-shell .modal-dialog.pp-nsc-pre-modal-dialog.modal-dialog-centered { min-height: 0; display: flex; align-items: center; justify-content: center; } .modal.pp-nsc-pre-modal-shell .modal-dialog.pp-nsc-pre-modal-dialog { margin: 0; flex-shrink: 0; padding: 0; --pp-available-h: calc( 100vh - 2 * var(--pp-vm) - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) ); --pp-w: var(--pp-max-w); /* มือถือ override --pp-ar-factor เพื่อสัดส่วนใกล้เฟรมบนจอแคบ */ --pp-natural-h: calc(var(--pp-w) * 742 / 482 * var(--pp-ar-factor, 1)); width: min(var(--pp-w), calc(var(--pp-available-h) * 482 / (742 * var(--pp-ar-factor, 1)))); height: min(var(--pp-natural-h), var(--pp-available-h)); max-width: var(--pp-max-w) !important; max-height: var(--pp-available-h); } .modal.pp-nsc-pre-modal-shell .modal-dialog.pp-nsc-pre-modal-dialog .modal-content { border: none; box-shadow: none; box-sizing: border-box; width: 100%; height: 100%; max-height: 100%; margin: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: center; min-height: 0; background-color: transparent; /* background-image: url('https://norsesaga.playpark.com/nsc-official/sections/global/img/frame-register.png'); */ background-image: url('https://norsesaga.playpark.com/nsc-official/sections/global/img/cbt2-frame-register.png'); background-repeat: no-repeat; background-position: center center; /* เต็มกล่อง — ขนาดตาม dialog ที่ฟิต viewport แล้ว */ background-size: 100% 100%; padding-top: 10rem; padding-inline: clamp(0.65rem, 15.25%, 4.625rem); padding-bottom: clamp(0.45rem, 4.2%, 2rem); } .modal.pp-nsc-pre-modal-shell .modal-dialog.pp-nsc-pre-modal-dialog .modal-content > * { position: relative; z-index: 1; min-height: 0; } .modal.pp-nsc-pre-modal-shell .modal-content > button.btn-close.position-absolute { z-index: 1080 !important; top: 90px !important; margin-top: 0 !important; /* เทียบเท่า .btn-close-white — ให้เห็นชัดบนพื้นหลังเฟรมเข้ม */ filter: invert(1) grayscale(100%) brightness(200%); } /* * ปุ่มปิดภายในแถบแจ้งเตือน — ไม่ใช้ .alert-dismissible ของ Bootstrap เพื่อไม่ให้ถูก * เขียนทับ/ชนกับกฎจากธีมหรือเลเยอร์ CSS อื่นที่อ้างชื่อเดียวกัน */ .pp-nsc-pre-alert-dismissible { padding-right: 3rem; } .pp-nsc-pre-alert-dismissible > .btn-close { position: absolute; top: 0; right: 0; z-index: 2; padding: 1.25rem 1rem; } #registerModal #alertContainer, #otpModal #otpAlertContainer { position: absolute; top: 50%; left: 0; right: 0; z-index: 1090 !important; transform: translateY(-50%); pointer-events: none; } #registerModal #alertContainer:not(:empty), #otpModal #otpAlertContainer:not(:empty) { pointer-events: auto; } #registerModal #alertContainer .alert, #otpModal #otpAlertContainer .alert { margin-bottom: 0; } #registerModal { /* ขนาดฟอนต์ต่ำสุดเมื่อฟิตข้อความหนึ่งบรรทัดผ่าน RegFormUi.fitRegisterModalKickerFont */ --register-kicker-fs-min: 0.55rem; /* หัวข้อหลัก (registerModalLabel) — ฟิตหนึ่งบรรทัดผ่าน RegFormUi.fitRegisterModalHeadlineFont */ --register-headline-fs-min: 0.68rem; } #registerModal .modal-header { min-width: 0; } #registerModal .modal-header > .w-100 { min-width: 0; } /* หัวโมดอลลงทะเบียน — สามแถบชิดกันขึ้น */ #registerModal .pp-nsc-pre-reg-intro { display: flex; flex-direction: column; align-items: center; gap: 0.18rem; row-gap: 0.18rem; } #registerModal .pp-nsc-pre-reg-intro #registerModalLabel { margin-top: 0; line-height: 1.06; align-self: stretch; } #registerModal .pp-nsc-pre-reg-intro .pp-nsc-pre-reg-kicker { line-height: 1.22; } #registerModal .pp-nsc-pre-reg-intro .pp-nsc-pre-reg-subtitle { line-height: 1.32; margin-top: 0; } #registerModal .pp-nsc-pre-reg-kicker { font-size: 1.1rem; font-weight: 600; color: #000E2C !important; max-width: 100%; white-space: nowrap; overflow: hidden; } #registerModal #registerModalLabel { font-size: 2.6rem; font-weight: 700; white-space: nowrap; overflow: visible; max-width: 100%; padding-inline: 0.125rem; box-sizing: border-box; } /* OTP modal — หัวข้อฟิตหนึ่งบรรทัดด้วย JS (เหมือน kicker register) */ #otpModal { --otp-title-fs-min: 0.58rem; } #otpModal .modal-header > .w-100 { min-width: 0; max-width: 100%; } #otpModal #otpModalLabel { font-size: 2rem; font-weight: 700; line-height: 1.06; margin-top: 0; white-space: nowrap; overflow: visible; max-width: 100%; padding-inline: 0.125rem; box-sizing: border-box; } .modal.pp-nsc-pre-modal-shell .modal-dialog.pp-nsc-pre-modal-dialog .modal-content > .modal-header { flex-shrink: 0; } .modal.pp-nsc-pre-modal-shell .modal-dialog.pp-nsc-pre-modal-dialog .modal-body { overflow-x: hidden; overflow-y: auto; /* ไม่ยืดเต็มส่วนสูงเพื่อให้โหนด column อยู่กึ่งแนวตั้งเมื่อความสูงไม่เกินจอ — เกินจอก็ยังเลื่อนภายใน */ flex: 0 1 auto; min-height: 0; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } /* เส้นตกแต่งระหว่าง modal-header กับ modal-body — จัดกึ่งกลาง */ .modal.pp-nsc-pre-modal-shell .pp-nsc-pre-modal-rule { flex-shrink: 0; display: flex; justify-content: center; align-items: center; width: 100%; padding-inline: 0.25rem; margin-block: 0.15rem 0.45rem; line-height: 0; } .modal.pp-nsc-pre-modal-shell .pp-nsc-pre-modal-rule-img { display: block; max-width: min(100%, 22rem); width: 100%; height: auto; margin-inline: auto; } @media (max-width: 575.98px) { .modal.pp-nsc-pre-modal-shell { --pp-vm: clamp(0.15rem, 1.2vmin, 0.4rem); } .modal.pp-nsc-pre-modal-shell .modal-dialog.pp-nsc-pre-modal-dialog { --pp-ar-factor: 1.085; } /* หัว Modal ลงทะเบียน — ฟอนต์เล็กลงแบบสเกลกับความกว้างจอ (เทียบจากเดสก์ท็อป ~1.1 / 2.6 / .small) */ #registerModal .pp-nsc-pre-reg-kicker { font-size: clamp(0.72rem, 2.65vw + 0.52rem, 0.92rem); } #registerModal #registerModalLabel { font-size: clamp(1.22rem, 5.85vw + 0.62rem, 1.72rem); } #registerModal .pp-nsc-pre-reg-subtitle { font-size: clamp(0.62rem, 2.05vw + 0.42rem, 0.76rem) !important; } /* OTP modal — หัวเล็กลงเล็กน้อยบนมือถือ (เทียบกับเดสก์ท็อป 2rem) */ #otpModal #otpModalLabel { font-size: clamp(1.28rem, 3.85vw + 0.52rem, 1.68rem); } } @supports (height: 100dvh) { .modal.pp-nsc-pre-modal-shell .modal-dialog.pp-nsc-pre-modal-dialog { --pp-available-h: calc( 100dvh - 2 * var(--pp-vm) - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) ); } } /* ===================================================================== Modal ฟอร์ม / OTP / Success / ปุ่มส่ง ===================================================================== */ .modal.pp-nsc-pre-modal-shell .modal-content .form-label { margin-bottom: 0.125rem; font-size: clamp(0.7rem, 2.2vw + 0.52rem, 0.875rem); } .modal.pp-nsc-pre-modal-shell .modal-content .form-check-label { font-size: clamp(0.68rem, 2vw + 0.48rem, 0.8125rem); } /* ข้อความ error ใต้ฟิลด์ / โน้ตเล็กใน body โมดัล — เล็กกว่าร่างปกติ */ .modal.pp-nsc-pre-modal-shell .modal-content .invalid-feedback, .modal.pp-nsc-pre-modal-shell .modal-content .modal-body .small.text-danger { font-size: clamp(0.56rem, 1.45vw + 0.34rem, 0.65rem); line-height: 1.26; margin-top: 0.08rem; } .modal.pp-nsc-pre-modal-shell .modal-content .form-control, .modal.pp-nsc-pre-modal-shell .modal-content .form-select { padding-block: clamp(0.28rem, 1.2vmin, 0.5rem); font-size: clamp(0.8125rem, 2.2vw + 0.65rem, 1rem); border-radius: 25px; } /* ฟอร์มลงทะเบียน — ช่องกรอก/เลเบลเล็กลงเล็กน้อยจากค่ามาตรฐานโมดอลอื่น */ #registerModal #registerForm .form-label { font-size: clamp(0.66rem, 2vw + 0.46rem, 0.8rem); margin-bottom: 0.09rem; line-height: 1.25; } #registerModal #registerForm .form-control, #registerModal #registerForm .form-select { font-size: clamp(0.765rem, 2vw + 0.52rem, 0.92rem); padding-block: clamp(0.22rem, 1vmin, 0.42rem); padding-inline: clamp(0.38rem, 2vw + 0.28rem, 0.72rem); line-height: 1.32; } #registerModal #registerForm .pp-nsc-pre-phone-row > select.pp-nsc-pre-phone-cc { font-size: clamp(0.62rem, 1.62vw + 0.46rem, 0.72rem); line-height: 1.26; } #registerModal #registerForm .form-check-label { font-size: clamp(0.615rem, 1.82vw + 0.4rem, 0.75rem); line-height: 1.32; } #registerModal #registerForm .form-control::placeholder { font-size: 0.76em; } #registerModal #registerForm .form-control::-webkit-input-placeholder { font-size: 0.76em; } #registerModal #registerForm .form-control::-moz-placeholder { font-size: 0.76em; } /* เบอร์โทร: โค้งซ้าย-ขวากลุ่ม input */ .modal.pp-nsc-pre-modal-shell .modal-content .pp-nsc-pre-phone-row > .pp-nsc-pre-phone-cc:first-child { border-radius: 25px 0 0 25px; } .modal.pp-nsc-pre-modal-shell .modal-content .pp-nsc-pre-phone-row > select.pp-nsc-pre-phone-cc + .form-control { border-radius: 0 25px 25px 0; } .modal.pp-nsc-pre-modal-shell .modal-content .pp-nsc-pre-phone-row > select.pp-nsc-pre-phone-cc { font-size: clamp(0.68rem, 1.75vw + 0.52rem, 0.78rem); line-height: 1.28; padding-inline: 0.28rem 0.35rem; } .modal.pp-nsc-pre-modal-shell .modal-content .form-control::placeholder { font-size: 0.78em; color: #c0c0c0; opacity: 1; } .modal.pp-nsc-pre-modal-shell .modal-content .form-control::-webkit-input-placeholder { font-size: 0.78em; color: #c0c0c0; } .modal.pp-nsc-pre-modal-shell .modal-content .form-control::-moz-placeholder { font-size: 0.78em; color: #c0c0c0; opacity: 1; } @media (max-width: 575.98px) { .modal.pp-nsc-pre-modal-shell .modal-content .form-label { font-size: 0.66rem !important; margin-bottom: 0.05rem !important; line-height: 1.2; } .modal.pp-nsc-pre-modal-shell .modal-content .form-control, .modal.pp-nsc-pre-modal-shell .modal-content .form-select { font-size: 0.8rem !important; padding: 0.2rem 0.5rem !important; line-height: 1.3 !important; border-radius: 25px !important; } .modal.pp-nsc-pre-modal-shell .modal-content .form-control::placeholder, .modal.pp-nsc-pre-modal-shell .modal-content .form-control::-webkit-input-placeholder, .modal.pp-nsc-pre-modal-shell .modal-content .form-control::-moz-placeholder { font-size: 0.72em !important; color: #c0c0c0 !important; opacity: 1 !important; } .modal.pp-nsc-pre-modal-shell .modal-content textarea.form-control { min-height: 2.35rem !important; } .modal.pp-nsc-pre-modal-shell .modal-content .invalid-feedback, .modal.pp-nsc-pre-modal-shell .modal-content .modal-body .small.text-danger { font-size: 0.6rem !important; line-height: 1.28 !important; margin-top: 0.06rem !important; } .modal.pp-nsc-pre-modal-shell .modal-content .form-check { padding-left: 1.65em !important; min-height: 0 !important; } .modal.pp-nsc-pre-modal-shell .modal-content .form-check-input { width: 0.88rem !important; height: 0.88rem !important; margin-top: 0.08em !important; margin-left: -1.65em !important; } .modal.pp-nsc-pre-modal-shell .modal-content .form-check-label { font-size: 0.62rem !important; line-height: 1.35 !important; } /* ฟอร์มลงทะเบียน — เล็กลงจากค่ากลางโมดอลเล็กน้อยบนมือถือ */ #registerModal #registerForm .form-label { font-size: 0.61rem !important; margin-bottom: 0.04rem !important; line-height: 1.18 !important; } #registerModal #registerForm .form-control, #registerModal #registerForm .form-select { font-size: 0.72rem !important; padding: 0.17rem 0.42rem !important; line-height: 1.26 !important; } #registerModal #registerForm .pp-nsc-pre-phone-row > .pp-nsc-pre-phone-cc { font-size: 0.585rem !important; padding: 0.16rem 0.22rem !important; width: 4.375rem !important; min-width: 4.375rem !important; max-width: 4.375rem !important; flex-basis: 4.375rem !important; line-height: 1.25 !important; } #registerModal #registerForm .form-check-label { font-size: 0.585rem !important; line-height: 1.32 !important; } #registerModal #registerForm .form-control::placeholder, #registerModal #registerForm .form-control::-webkit-input-placeholder, #registerModal #registerForm .form-control::-moz-placeholder { font-size: 0.7em !important; } .modal.pp-nsc-pre-modal-shell .modal-content #registerForm .row { --bs-gutter-x: 0.4rem; --bs-gutter-y: 0.35rem; } .modal.pp-nsc-pre-modal-shell .pp-nsc-pre-phone-row > .pp-nsc-pre-phone-cc { width: 4.375rem !important; min-width: 4.375rem !important; max-width: 4.375rem !important; flex-basis: 4.375rem !important; font-size: 0.63rem !important; padding: 0.2rem 0.22rem !important; } .modal.pp-nsc-pre-modal-shell .modal-content .pp-nsc-pre-phone-row > .pp-nsc-pre-phone-cc:first-child { border-radius: 25px 0 0 25px !important; } .modal.pp-nsc-pre-modal-shell .modal-content .pp-nsc-pre-phone-row > select.pp-nsc-pre-phone-cc + .form-control { border-radius: 0 25px 25px 0 !important; } .modal.pp-nsc-pre-modal-shell .pp-nsc-pre-otp-digit { box-sizing: border-box; width: clamp(2rem, 10.5vw, 2.75rem) !important; min-width: clamp(2rem, 10.5vw, 2.75rem) !important; max-width: 2.75rem !important; height: 3rem !important; min-height: 3rem !important; line-height: 3rem !important; padding: 0 0.1875rem !important; font-size: 1.25rem !important; font-weight: 700 !important; } } /* OTP Modal — 6 ช่องเรียงแถวเดียวทุก viewport (แบ่งความกว้างเมื่อจอแคบ) */ #otpModal .pp-nsc-pre-otp-row { flex-wrap: nowrap !important; justify-content: center !important; gap: clamp(0.188rem, 1.35vw, 0.375rem) !important; row-gap: 0 !important; } /* OTP — flex ในแถวเดียว (มือถือปรับขนาดช่อง/ฟอนต์ด้านล่าง) */ #otpModal.modal.pp-nsc-pre-modal-shell .pp-nsc-pre-otp-row .pp-nsc-pre-otp-digit, #otpModal .pp-nsc-pre-otp-row .pp-nsc-pre-otp-digit { flex: 1 1 0 !important; flex-shrink: 1 !important; min-width: 0 !important; width: auto !important; max-width: 2.75rem !important; box-sizing: border-box !important; } @media (max-width: 575.98px) { #otpModal.modal.pp-nsc-pre-modal-shell .pp-nsc-pre-otp-row .pp-nsc-pre-otp-digit, #otpModal .pp-nsc-pre-otp-row .pp-nsc-pre-otp-digit { font-size: 1.1875rem !important; height: 3rem !important; min-height: 3rem !important; line-height: 3rem !important; padding: 0 0.0625rem !important; max-width: none !important; } } .pp-nsc-pre-submit-register-btn:focus-visible { outline: 2px solid var(--bs-danger); outline-offset: 2px; } .pp-nsc-pre-submit-register-btn .btn-load-label { display: block; flex: 1 1 auto; min-width: 0; width: 100%; } .pp-nsc-pre-submit-register-btn .btn-label-idle { display: block; width: 100%; } .pp-nsc-pre-submit-register-img { display: block; width: 100%; max-width: 100%; height: auto; object-fit: contain; } /* Success Modal — หัวแบบ UNLOCK MORE / REWARDS! + subtitile */ #successModal .pp-nsc-pre-success-banner-kicker { font-size: clamp(0.82rem, 2.8vw + 0.55rem, 1.05rem); font-weight: 700; letter-spacing: 0.14em; color: #000e2c; text-transform: uppercase; } #successModal .pp-nsc-pre-success-banner-headline { font-size: clamp(2.05rem, 7.5vw + 0.85rem, 2.65rem); font-weight: 700; line-height: 1.05; text-transform: uppercase; letter-spacing: 0.03em; color: #000e2c; } #successModal .pp-nsc-pre-success-banner-sub { font-size: clamp(0.8125rem, 2.3vw + 0.52rem, 0.975rem); line-height: 1.45; color: #000e2c; font-weight: 400; margin-inline: auto; max-width: 22rem; } #successModal.pp-nsc-pre-register:lang(en-sea) .pp-nsc-pre-success-banner-sub, #successModal.pp-nsc-pre-register:lang(eng-sea) .pp-nsc-pre-success-banner-sub { font-family: 'Plus Jakarta Sans', var(--bs-font-sans-serif), system-ui, sans-serif; } @media (max-width: 575.98px) { #successModal .pp-nsc-pre-success-banner-headline { font-size: clamp(1.28rem, 5.5vw + 0.52rem, 1.92rem); line-height: 1.06; } #successModal .pp-nsc-pre-success-banner-sub { font-size: clamp(0.65rem, 1.75vw + 0.38rem, 0.78rem); line-height: 1.38; } } #successModal .pp-nsc-pre-success-store-row { width: 100%; max-width: 24rem; margin-inline: auto; } #successModal .pp-nsc-pre-success-store-link { display: block; flex: 1 1 0; min-width: 0; max-width: 11.5rem; line-height: 0; text-decoration: none; } #successModal .pp-nsc-pre-success-store-link:focus-visible { outline: 2px solid var(--bs-danger); outline-offset: 3px; border-radius: 0.25rem; } #successModal .pp-nsc-pre-success-store-img { display: block; width: 100%; height: auto; object-fit: contain; } #successModal .pp-nsc-pre-success-facebook-link { display: block; width: 100%; max-width: 100%; line-height: 0; text-decoration: none; } #successModal .pp-nsc-pre-success-facebook-link:focus-visible { outline: 2px solid var(--bs-danger); outline-offset: 3px; border-radius: 0.25rem; } #successModal .pp-nsc-pre-success-facebook-img { display: block; width: 100%; height: auto; object-fit: contain; } @media (max-height: 700px), (max-width: 420px) { .modal.pp-nsc-pre-modal-shell .modal-content .mb-2 { margin-bottom: 0.375rem !important; } .modal.pp-nsc-pre-modal-shell .modal-content .mb-3 { margin-bottom: 0.5rem !important; } .modal.pp-nsc-pre-modal-shell .modal-content .modal-header { margin-bottom: 0.5rem !important; } #successModal.pp-nsc-pre-modal-shell .modal-content .pp-nsc-pre-success-banner-headline { font-size: clamp(1.15rem, 4.8vw + 0.45rem, 1.72rem) !important; line-height: 1.07 !important; } #successModal.pp-nsc-pre-modal-shell .modal-content .pp-nsc-pre-success-modal-icon { font-size: clamp(2.75rem, 12vw + 1rem, 5em); } #successModal.pp-nsc-pre-modal-shell .modal-content .mb-5 { margin-bottom: 1rem !important; } } /* ===================================================================== Tooltip — validation ชื่อ/นามสกุล (ปุ่ม #nameError) ===================================================================== */ .tooltip.pp-nsc-pre-name-field-tooltip .tooltip-inner { max-width: min(280px, 85vw); text-align: start; font-size: 0.625rem; line-height: 1.32; }