/* สไตล์สำหรับ container โดยรวม */
.toggle-switch-container {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    gap: 10px; /* ระยะห่างระหว่างสวิตช์กับข้อความ */
}

/* ซ่อน checkbox เริ่มต้น */
.toggle-switch-container input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

/* สไตล์สำหรับปุ่ม switch (ตัว label) */
.switch {
    position: relative;
    display: inline-block;
    width: 50px; /* ความกว้างของสวิตช์ */
    height: 28px; /* ความสูงของสวิตช์ */
    background-color: #ccc; /* สีพื้นหลังเมื่อปิด */
    border-radius: 28px; /* ทำให้มีมุมโค้งมน */
    cursor: pointer;
    transition: background-color 0.3s;
}

/* สไตล์สำหรับวงกลม (slider) */
.slider {
    position: absolute;
    content: "";
    height: 20px; /* ขนาดของวงกลม */
    width: 20px; /* ขนาดของวงกลม */
    left: 4px; /* ตำแหน่งเริ่มต้นของวงกลม */
    bottom: 4px;
    background-color: white; /* สีของวงกลม */
    border-radius: 50%; /* ทำให้เป็นวงกลม */
    transition: transform 0.3s;
}

/* เมื่อ checkbox ถูกเลือก (สวิตช์เปิด) */
.toggle-switch-container input:checked + .switch {
    background-color: #007bff; /* สีพื้นหลังเมื่อเปิด */
}

/* เลื่อนวงกลมไปทางขวาเมื่อสวิตช์เปิด */
.toggle-switch-container input:checked + .switch .slider {
    transform: translateX(22px); /* ระยะที่เลื่อนไปทางขวา (ความกว้างสวิตช์ - ขนาดวงกลม - padding ซ้ายขวา) */
}

/* เพิ่มสไตล์สำหรับข้อความ "Remember Me" */
.label-text {
    font-size: 16px;
    color: #333;
    user-select: none;
}

/* สไตล์เมื่อเมาส์วางเหนือสวิตช์ */
.switch:hover {
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5); /* เพิ่มเงาเมื่อ hover */
}

/* ****************************************************** */
        /* CSS สำหรับปรับแต่ง Validation Message (ทำได้จำกัด) */
        /* ****************************************************** */
        input:invalid {
            border-color: red; /* เพื่อให้เห็นว่า input ไม่ถูกต้อง */
        }

        /* พยายามซ่อน default popup และแสดงข้อความแบบที่เราควบคุมเอง */
        /* แต่ส่วนใหญ่แล้ว Browser's default validation UI จะปรากฏอยู่ดี
           และเราไม่สามารถควบคุมมันผ่าน CSS โดยตรงได้มากนัก */
        /* ตัวนี้คือการควบคุมผ่าน JS เป็นหลัก */

        .password-container {
            position: relative; /* สำคัญสำหรับการวางปุ่ม eye icon */
            width: 300px;
            margin-bottom: 20px;
        }
        input[type="password"],
        input[type="text"] { /* เพิ่ม type="text" เพื่อรองรับการเปลี่ยนประเภท */
            width: 100%;
            padding: 10px;
            padding-right: 40px; /* เว้นที่ว่างสำหรับปุ่ม eye icon */
            border: 1px solid #ddd;
            border-radius: 4px;
            box-sizing: border-box; /* ให้ padding ไม่เพิ่มความกว้างรวม */
            font-size: 16px;
        }
        .toggle-password {
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%); /* จัดกึ่งกลางแนวตั้ง */
            cursor: pointer;
            color: #888;
            font-size: 20px; /* ปรับขนาด icon */
            user-select: none; /* ป้องกันการเลือกข้อความ icon */
        }
        .toggle-password:hover {
            color: #333;
        }