/* =========================================
   Browser Fixes
========================================= */

input::-ms-reveal,
input::-ms-clear {
    display: none;
}

input[type="password"]::-webkit-credentials-auto-fill-button {
    visibility: hidden;
    pointer-events: none;
}

select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
}

    select::-ms-expand {
        display: none;
    }

/* =====================================================
   REGISTER PAGE
===================================================== */

.register-page {
    width: 100%; /* กำหนดความกว้างเต็มจอ */
    max-width: 810px; /* จำกัดความกว้างเท่า artwork */
    min-height: 100vh; /* ให้ความสูงอย่างน้อยเต็มจอ */
    margin: 0 auto; /* จัดหน้าให้อยู่ตรงกลาง */
    padding: 38px 0 120px 0; /* เว้นบน/ล่าง เผื่อ footer */
    position: relative; /* ใช้อ้างอิงตำแหน่งภายใน */
    background: url('/images/background.jpg') top center no-repeat; /* ใช้ background สำหรับหน้ารอง */
    background-size: 100% auto; /* ให้ background ยึดกว้างเต็ม ไม่ crop */
    overflow-x: hidden; /* กันล้นแนวนอน */
}

/* =====================================================
   CAMPAIGN HEADER
===================================================== */

.register-campaign-header {
    text-align: center; /* จัด header ให้อยู่กลาง */
    margin-bottom: 22px; /* เว้นระยะก่อนเข้า card */
}

    .register-campaign-header img {
        width: 41%; /* ขนาดรูป campaign header */
        max-width: 560px; /* จำกัดขนาดสูงสุด */
        display: block; /* ลบช่องว่างใต้รูป */
        margin: 0 auto; /* จัดรูปให้อยู่กลาง */
        margin-top: -30px
    }

/* =====================================================
   REGISTER CARD
===================================================== */

.register-card {
    width: 88%; /* ความกว้างกล่อง form */
    max-width: 680px; /* จำกัดขนาดกล่อง form */
    margin: 0 auto; /* จัดกล่องให้อยู่กลาง */
    padding: 30px 34px 34px 34px; /* ระยะในกล่อง */
    background: rgba(254, 244, 250, 0.90); /* พื้นหลังขาว opacity 90% */
    border-radius: 36px; /* ขอบมนใหญ่ */
    box-shadow: 0 8px 28px rgba(220, 80, 150, 0.22); /* เงากล่องนุ่ม */
}

.register-success-card {
    width: 60%; /* ความกว้างกล่อง form */
    max-width: 680px; /* จำกัดขนาดกล่อง form */
    margin: 0 auto; /* จัดกล่องให้อยู่กลาง */
    padding: 30px 34px 34px 34px; /* ระยะในกล่อง */
    background: rgba(254, 244, 250, 0.90); /* พื้นหลังขาว opacity 90% */
    border-radius: 36px; /* ขอบมนใหญ่ */
    box-shadow: 0 8px 28px rgba(220, 80, 150, 0.22); /* เงากล่องนุ่ม */
}

.register-receiptsuccess-banner {
    width: 100%; /* ความกว้างกล่อง form */
    max-width: 800px; /* จำกัดขนาดกล่อง form */
    margin: 0 auto; /* จัดกล่องให้อยู่กลาง */
    padding: 30px 34px 34px 34px; /* ระยะในกล่อง */
    background: rgba(254, 244, 250, 0.90); /* พื้นหลังขาว opacity 90% */
    /*border-radius: 36px; /* ขอบมนใหญ่ */
    /*box-shadow: 0 8px 28px rgba(220, 80, 150, 0.22); /* เงากล่องนุ่ม */
}
/* =====================================================
   REGISTER BANNER
===================================================== */

.register-banner {
    width: 65%; /* ขนาด banner */
    max-width: 360px; /* จำกัดขนาดสูงสุด */
    display: block; /* ให้ margin auto ทำงาน */
    margin: 0 auto 24px auto; /* จัดกลางและเว้นด้านล่าง */
}

/* =====================================================
   FORM STRUCTURE
===================================================== */

.register-form {
    width: 100%; /* form กว้างเต็ม card */
}

.form-row {
    display: grid; /* แบ่ง label กับ input เป็น column */
    grid-template-columns: 110px 1fr; /* ลดความกว้างฝั่ง label เพื่อให้ textbox มีพื้นที่มากขึ้น */
    align-items: center; /* จัดกลางแนวตั้ง */
    column-gap: 10px; /* ลดช่องว่างระหว่าง label กับ textbox */
    margin-bottom: 10px; /* ระยะแต่ละบรรทัด */
}

.form-label {
    color: #FE418D; /* สี label */
    font-size: 14px; /* ขนาด label */
    font-weight: 500; /* น้ำหนัก label */
    text-align: right; /* label ชิดขวา */
    white-space: nowrap; /* ไม่ให้ label ตัดบรรทัด */

    transform: translateY(6px); /* ปรับ label ลงมา 3px ให้ตรงกับ textbox */
}

/* =====================================================
   INPUT / SELECT / TEXTAREA
===================================================== */

.register-input {
    width: 92%; /* input กว้างเต็ม column *** อยาลืมปรับใน password wrap ด้วย*/
    height: 34px; /* ความสูง textbox */
    padding: 0 14px; /* ระยะซ้ายขวาใน textbox */
    border: 1px solid #FE418D; /* เส้นกรอบบางสีชมพู */
    border-radius: 999px; /* ขอบมน */
    background: rgba(255, 255, 255, 0.94); /* พื้นหลัง textbox */
    color: #000000; /* สีข้อความใน textbox */
    font-family: 'Prompt', 'Noto Sans SC', sans-serif; /* font หลัก */
    font-size: 14px; /* ขนาดข้อความ */
    font-weight: 420; /* น้ำหนักข้อความเท่า label */
    outline: none; /* เอา outline default ออก */
    box-shadow: 0 2px 5px rgba(254, 65, 141, 0.16); /* drop shadow เบา */
}

    .register-input:focus {
        border-color: #FE418D; /* สีกรอบเวลา focus */
        box-shadow: 0 2px 7px rgba(254, 65, 141, 0.26); /* เงาเพิ่มนิดเวลา focus */
    }

.register-textarea {
    height: 62px; /* ความสูงช่องที่อยู่ */
    padding-top: 8px; /* ระยะบนใน textarea */
    border-radius: 18px; /* ขอบมน textarea */
    resize: none; /* ไม่ให้ลากขยาย */
}

select.register-input {
    appearance: auto; /* ให้ dropdown แสดงตาม browser */

}

.register-select {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-color: rgba(255, 255, 255, 0.94);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23FE418D' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: calc(100% - 10px) center !important;
    background-size: 18px !important;
    padding-right: 45px !important;
}

/* =====================================================
   GENDER RADIO
===================================================== */

.gender-options {
    display: flex; /* เรียงตัวเลือกเพศแนวนอน */
    align-items: center; /* จัดกลางแนวตั้ง */
    gap: 22px; /* ระยะห่างแต่ละตัวเลือก */
    color: #FE418D; /* สีข้อความตัวเลือก */
    font-size: 14px; /* ขนาดข้อความ */
    font-weight: 500; /* น้ำหนักข้อความ */
}

    .gender-options label {
        display: flex; /* จัด checkbox กับ text แถวเดียว */
        align-items: center; /* จัดกลางแนวตั้ง */
        gap: 5px; /* ระยะ checkbox กับ text */
        margin: 0; /* กัน margin default */
    }

    .gender-options input[type="radio"] {
        appearance: none; /* ซ่อน radio default */
        -webkit-appearance: none; /* ซ่อน radio default บน webkit */
        width: 13px; /* ขนาดกล่อง radio */
        height: 13px; /* ขนาดกล่อง radio */
        border: 1px solid #FE418D; /* กรอบกล่อง radio */
        border-radius: 3px; /* มุมโค้งเล็กน้อย */
        background: #ffffff; /* พื้นหลัง radio */
        box-shadow: 0 1px 3px rgba(254, 65, 141, 0.20); /* เงา radio */
        cursor: pointer; /* cursor มือ */
    }

        .gender-options input[type="radio"]:checked {
            background: #FE418D; /* สีเมื่อเลือก */
            box-shadow: inset 0 0 0 3px #ffffff, 0 1px 3px rgba(254, 65, 141, 0.25); /* ทำจุดเลือกแบบเหลี่ยม */
        }

/* =====================================================
   PASSWORD EYE
===================================================== */

.password-wrap {
    position: relative; /* เพื่อวางปุ่มลูกตาใน input */
    width: 92%; /* กว้างเต็ม column */
}

.password-input {
    width: 100%;
    padding-right: 42px; /* เผื่อพื้นที่ปุ่มลูกตา */
}

.password-eye {
    position: absolute; /* วางบน textbox */
    right: 14px; /* ระยะจากขวา */
    top: 50%; /* จัดกลางแนวตั้ง */
    transform: translateY(-50%); /* ดึงกลับให้กลางจริง */
    width: 26px; /* ขนาดปุ่ม */
    height: 26px; /* ขนาดปุ่ม */
    border: 0; /* ไม่มีเส้นขอบ */
    background: transparent; /* พื้นหลังใส */
    color: #FE418D; /* สีไอคอน */
    font-size: 14px; /* ขนาดไอคอน */
    line-height: 1; /* จัดบรรทัด */
    cursor: pointer; /* cursor มือ */
    opacity: 0.75; /* ความเข้มปุ่ม */
    max-width: 25px;
}
    .password-eye img {
        width: 22px;
        height: 20px;
        display: block;
    }

    .password-eye.show {
        opacity: 1; /* เมื่อตอน show password ให้ชัดขึ้น */
    }

/* =====================================================
   TERMS
===================================================== */

.terms-row {
    display: flex; /* checkbox กับข้อความอยู่แถวเดียว */
    justify-content: center; /* จัดกลาง */
    align-items: flex-start; /* จัดต้นบรรทัด */
    gap: 8px; /* ระยะ checkbox กับข้อความ */
    margin: 12px 0 18px 0; /* ระยะบนล่าง */
    color: #000000; /* สีข้อความ */
    font-size: 12px; /* ขนาดข้อความ */
    font-weight: 500; /* น้ำหนักข้อความ */
    line-height: 1.4; /* ระยะบรรทัด */
}

/* =====================================================
   SUBMIT BUTTON
===================================================== */

.register-submit {
    width: 72%; /* ขนาดปุ่มสมัคร */
    display: block; /* จัดกลางได้ */
    margin: 0 auto; /* จัดปุ่มกลาง */
    padding: 0; /* เอา padding default ออก */
    border: 0; /* เอา border default ออก */
    background: none; /* เอา bg default ออก */
    cursor: pointer; /* cursor มือ */
}

    .register-submit img {
        width: 100%; /* รูปเต็มปุ่ม */
        display: block; /* ลบช่องว่างใต้รูป */
    }



.register-error {
    min-height: 18px;
    margin: 8px 0 8px 0;
    color: #E82270;
    font-size: 18px;
    font-weight: 500;
    text-align: center;
    
}

.register-submit:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    filter: grayscale(20%);
}

/* =====================================================
   Terms Popup
===================================================== */
.terms-popup {
    position: fixed; /* ให้ popup ลอยทับทั้งหน้าจอ */
    inset: 0; /* ครอบเต็มจอ */
    background: rgba(0, 0, 0, 0.35); /* ฉากหลังมืดนิด ๆ */
    z-index: 10000; /* ให้อยู่เหนือ footer */
    display: none; /* เริ่มต้นซ่อนไว้ */
    align-items: center; /* จัดกลางแนวตั้ง */
    justify-content: center; /* จัดกลางแนวนอน */
    padding: 18px; /* กันชิดขอบจอ */
}

    .terms-popup.show {
        display: flex; /* แสดง popup */
    }

.terms-popup-card {
    width: 85%; /* ความกว้าง popup ตามที่ต้องการ */
    max-width: 680px; /* จำกัดขนาดบน PC */
    max-height: 86vh; /* ไม่ให้สูงเกินจอ */
    background: rgba(255, 255, 255, 0.94); /* พื้นหลังขาว opacity ใกล้ form */
    border-radius: 36px; /* ขอบมนเหมือน form */
    box-shadow: 0 8px 28px rgba(220, 80, 150, 0.25); /* เงานุ่ม */
    padding: 24px 24px 88px 24px; /* เผื่อพื้นที่ปุ่ม fixed ด้านล่าง */
    position: relative; /* ให้ปุ่มด้านล่างอ้างอิงกับ card */
    overflow: hidden; /* กันส่วนเกินล้นขอบมน */
}

.terms-scroll {
    max-height: calc(86vh - 130px); /* พื้นที่ scroll ของเนื้อหา */
    overflow-y: auto; /* ให้ scroll เนื้อหา terms ได้ */
    padding-right: 8px; /* เว้นที่ให้ scrollbar */
}

    .terms-scroll::-webkit-scrollbar {
        width: 8px; /* ความกว้าง scrollbar */
    }

    .terms-scroll::-webkit-scrollbar-track {
        background: rgba(240, 73, 133, 0.15); /* สีราง scrollbar */
        border-radius: 999px; /* ขอบมนราง */
    }

    .terms-scroll::-webkit-scrollbar-thumb {
        background: #F04985; /* สี scrollbar */
        border-radius: 999px; /* ขอบมน scrollbar */
    }

.terms-scroll {
    scrollbar-color: #F04985 rgba(240, 73, 133, 0.15); /* สี scrollbar บน Firefox */
    scrollbar-width: thin; /* ความหนา scrollbar บน Firefox */
}

.terms-img {
    width: 100%; /* ให้รูป terms กว้างเต็ม popup */
    display: block; /* ลบช่องว่างใต้รูป */
    margin-bottom: 12px; /* เว้นระหว่างรูป */
    border-radius: 18px; /* มุมรูปโค้งนิด ๆ */
}

.terms-popup-buttons {
    position: absolute; /* fix ปุ่มไว้ด้านล่าง card */
    left: 0; /* ชิดซ้าย card */
    right: 0; /* ชิดขวา card */
    bottom: 18px; /* ระยะจากขอบล่าง card */
    display: flex; /* วางปุ่มคู่กัน */
    justify-content: center; /* จัดกลาง */
    gap: 18px; /* ระยะห่างปุ่ม */
    padding: 0 20px; /* กันปุ่มชิดขอบ */
    display: flex;
}

.terms-btn {
    width: 38%; /* ความกว้างปุ่ม cancel/accept */
    max-width: 210px; /* จำกัดปุ่มบน PC */
    border: 0; /* เอาขอบ default ออก */
    background: none; /* เอาพื้นหลัง default ออก */
    padding: 0; /* เอา padding default ออก */
    cursor: pointer; /* cursor มือ */
}

    .terms-btn img {
        width: 100%; /* รูปปุ่มเต็ม button */
        display: block; /* ลบช่องว่างใต้รูป */
    }

.terms-row input[type="checkbox"] {
    cursor: pointer; /* ให้ checkbox ดูกดได้ */
}


/* หน้า Register Success */
.success-button-row {
    display: flex; /* วางปุ่มแนวนอน */
    justify-content: center; /* จัดกลาง */
    align-items: center;
    gap: 18px; /* ระยะห่างระหว่างปุ่ม */
    margin-top: 18px; /* ห่างจาก banner */
}

.success-btn {
    display: block;
    width: 220px; /* ปรับขนาดปุ่มได้ */
}

    .success-btn img {
        width: 100%;
        display: block;
    }



/* =====================================================
   LOGIN PAGE
===================================================== */

.login-card {
    max-width: 520px; /* ลดขนาด card ให้ใกล้ PDF หน้า Login */
    padding-top: 28px; /* ระยะบนใน card */
}

.login-banner {
    width: 80%; /* ขนาด banner login */
    max-width: 450px; /* จำกัดขนาด banner */
    margin-bottom: 22px; /* ระยะใต้ banner */
}

.login-form {
    width: 82%; /* ความกว้าง form login */
    margin: 0 auto; /* จัด form กลาง */
}

.login-field {
    margin-bottom: 14px; /* ระยะห่างแต่ละ field */
}

.login-label {
    display: block; /* ให้ label อยู่บน input */
    color: #000000; /* label สีดำตาม ref */
    font-size: 14px; /* ขนาด label */
    font-weight: 450; /* น้ำหนัก label */
    margin-bottom: 5px; /* ระยะ label กับ input */
}

.login-input {
    width: 100%; /* input login กว้างเต็ม */
    font-weight: 450; /* น้ำหนัก label */
}

.login-password-wrap {
    width: 100%; /* password wrapper กว้างเต็ม */
}

.forgot-link {
    display: block; /* ให้ link เป็นบรรทัด */
    text-align: right; /* ชิดขวา */
    margin-top: 4px; /* ระยะจากช่อง password */
    color: #FE418D; /* สีชมพู */
    font-size: 13px; /* ขนาด link */
    font-weight: 500; /* น้ำหนัก link */
    text-decoration: none; /* ไม่ขีดเส้นใต้ */
}

    .forgot-link:hover {
        text-decoration: underline; /* hover แล้วขีดเส้นใต้ */
    }

.login-button-column {
    display: flex; /* ใช้ flex */
    flex-direction: column; /* เรียงปุ่มแนวตั้ง */
    align-items: center; /* จัดกลาง */
    gap: 0px; /* ระยะห่างระหว่างปุ่ม */
    margin-top: 18px; /* ระยะจาก form */
}

.login-img-btn {
    width: 78%; /* ความกว้างปุ่ม */
    max-width: 310px; /* จำกัดปุ่ม */
    display: block; /* ให้จัดกลางได้ */
    border: 0; /* ลบ border button */
    background: none; /* ลบ background button */
    padding: 0; /* ลบ padding button */
    cursor: pointer; /* cursor มือ */
    text-decoration: none; /* ลบ underline ของ a */
    
}

    .login-img-btn img {
        width: 100%; /* รูปปุ่มเต็ม */
        display: block; /* ลบช่องว่างใต้รูป */
    }

.login-error {
    min-height: 18px;
    margin: 8px 0 8px 0;
    color: #E82270;
    font-size: 18px;
    font-weight: 500;
    text-align: center;
}
/* =====================================================
   MOBILE
===================================================== */
    @media (max-width: 810px) {
        .register-page {
            max-width: 100%; /* ให้กว้างเต็มมือถือ */
            padding-top: 6vw; /* ระยะบน responsive */
            padding-bottom: 110px; /* เผื่อ footer */
            background-position: top center; /* background ยึดบนกลาง */
            background-size: 100% auto; /* background ไม่ crop */
        }

        .register-campaign-header img {
            width: 49%; /* ขยาย header บนมือถือ */
        }

        .register-card {
            width: 90%; /* กล่อง form กว้างขึ้นบนมือถือ */
            padding: 24px 18px 30px 18px; /* ลด padding บนมือถือ */
            border-radius: 28px; /* ลดขอบมนบนมือถือ */
        }
        
        .register-receiptsuccess-banner {
            width: 120%; /* กล่อง form กว้างขึ้นบนมือถือ */
            padding: 24px 50px 10px 18px; /* ลด padding บนมือถือ */
            border-radius: 28px; /* ลดขอบมนบนมือถือ */
        }

        .register-banner {
            width: 70%; /* banner ใหญ่ขึ้นบนมือถือ */
            margin-bottom: 20px; /* ระยะใต้ banner บนมือถือ */
        }

        .form-row {
            grid-template-columns: 92px 1fr; /* label แคบลงบนมือถือ */
            column-gap: 8px; /* ลดระยะ label/input */
            margin-bottom: 9px; /* ลดระยะบรรทัด */
        }

        .form-label {
            font-size: 12px; /* label เล็กลงบนมือถือ */
        }

        .register-input {
            height: 32px; /* input เตี้ยลงบนมือถือ */
            font-size: 12px; /* font input เล็กลงบนมือถือ */
            padding: 0 12px; /* ลด padding input */
        }

        .register-textarea {
            height: 58px; /* textarea เตี้ยลงบนมือถือ */
        }

        .gender-options {
            gap: 10px; /* ลดระยะ gender */
            font-size: 12px; /* ลด font gender */
            flex-wrap: wrap; /* จอแคบให้ขึ้นบรรทัดใหม่ */
        }

        .register-submit {
            width: 86%; /* ปุ่มสมัครใหญ่ขึ้นบนมือถือ */
        }
        /* Terms Popup*/

        .terms-popup-card {
            width: 92%; /* popup กว้างขึ้นบนมือถือ */
            border-radius: 28px; /* ลดขอบมนบนมือถือ */
            padding: 18px 16px 78px 16px; /* ลด padding บนมือถือ */
        }

        .terms-popup-card {
            width: 92%;
            border-radius: 28px;
            padding: 18px 16px 150px 16px;
        }

        .terms-scroll {
            max-height: calc(86vh - 185px);
        }

        .terms-popup-buttons {
            display: flex !important;
            flex-direction: column !important;
            align-items: center;
            justify-content: center;
            bottom: 14px;
            gap: 10px;
        }

        .terms-btn {
            width: 50%;
            max-width: 320px;
            gap: 10px;
        }

            .terms-btn img {
                width: 100%;
                display: block;
            }
        /* หน้า Register Success */
        .success-button-row {
            flex-direction: column; /* mobile เรียงบน-ล่าง */
            gap: 10px;
            margin-top: 12px;
        }

        .success-btn-link {
            width: 46%;
            max-width: none;
        }
    }
    /*----- Login Page -----*/
    @media (max-width: 810px) {
        .login-card {
            max-width: 90%; /* card บนมือถือ */
        }

        .login-form {
            width: 88%; /* form บนมือถือ */
        }

        .login-img-btn {
            width: 86%; /* ปุ่มบนมือถือ */
        }
        /*----- Receipt Register Success ให้ปุ่มวางบนล่างแทน -----*/
        .success-button-row {
            flex-direction: column; /* เปลี่ยนเป็นเรียงลง */
            gap: 10px; /* ระยะห่างระหว่างปุ่ม */
            align-items: center;
        }

        .success-btn {
            width: 65%; /* ปุ่มกว้างเกือบเต็มจอ */
            max-width: 320px; /* แต่ไม่ใหญ่เกินบน tablet */
        }

            .success-btn img {
                width: 100%;
                display: block;
            }
    }
    

    @media (max-width: 480px) {
        .form-row {
            grid-template-columns: 82px 1fr; /* label แคบลงบนจอเล็ก */
        }

        .form-label {
            font-size: 11px; /* label เล็กลงบนจอเล็ก */
        }

        .gender-options {
            gap: 8px; /* ลดระยะ gender บนจอเล็ก */
        }

        .terms-row {
            font-size: 11px; /* ลดขนาดข้อความเงื่อนไข */
        }
    }