/* assets/css/auth/register.css
   กล่องสมัครสมาชิกแบบสองคอลัมน์

   ⚠ แยกออกมาจาก assets/css/auth.css ที่ยาว 593 บรรทัด (17 ส.ค. 2569)
      เพิ่มสไตล์ใหม่ให้ใส่ไฟล์ที่ตรงเรื่องที่สุด ห้ามกองท้ายไฟล์เดียว
      ⚠ เพิ่มไฟล์ใหม่ในโฟลเดอร์นี้ต้องเพิ่ม <link> ใน index.php ด้วย
*/
/* ═══ กล่องสมัครสมาชิก: กว้างแนวนอน สองคอลัมน์ ═════════════════════════════
   ⚠️⚠️ **ฟอร์มสมัครมี 8 ช่อง — กล่องกว้าง 26rem เท่ากล่องล็อกอินไม่พอ**
      เรียงลงมาแถวเดียวจนล้นจอ เด็กต้องเลื่อนระหว่างกรอกและไม่เห็นปุ่มสมัคร
      จนกว่าจะกรอกจบ ซึ่งเป็นจังหวะที่คนเลิกกรอกกลางทางมากที่สุด

   ⚠️ **ต้องขยาย .container ด้วย ไม่ใช่แค่ฟอร์ม** ตัวครอบจำกัดไว้ 26rem
      ถ้าขยายแต่ฟอร์ม ช่องจะถูกบีบให้แคบลงครึ่งหนึ่งแล้วยิ่งอึดอัดกว่าเดิม
      (เคยพลาดมาแล้วรอบหนึ่ง — กางเป็นสองคอลัมน์ในกล่องแคบเท่าเดิม)

   ⚠️ ใช้เฉพาะกล่องสมัคร กล่องล็อกอินมีสองช่อง ต้องแคบเหมือนเดิม
   ⚠️ ต่ำกว่า 760px กลับเป็นคอลัมน์เดียวเต็มความกว้าง (มือถือกรอกทีละช่อง)
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 760px) {
    /* ⚠️ ตัวครอบของหน้านี้คือ .container — ต้องปลดความกว้างที่นี่ก่อนเสมอ */
    .container:has(#register-panel:not(.hidden)),
    body:has(#register-panel:not(.hidden)) .container {
        max-width: 48rem;
    }
    #register-panel {
        max-width: 48rem;
        width: 100%;
        padding: 2rem 2.4rem 1.8rem;
    }
    #register-form {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 1.6rem;
        row-gap: 0.2rem;
        align-items: start;
    }
    /* .form-row เดิมเป็น flex สองช่องต่อบรรทัด — ในกริดให้ลูกไหลเป็นช่องปกติ */
    #register-form .form-row { display: contents; }
    /* ปุ่มกับข้อความท้ายฟอร์มพาดเต็มสองคอลัมน์ */
    #register-form > button,
    #register-form > .btn,
    #register-form > .toggle-text { grid-column: 1 / -1; }
    #register-form > button { margin-top: 0.8rem; }
    /* ⚠️ ป้ายชื่อช่องต้องสูงเท่ากันทุกใบ ไม่งั้นช่องที่ป้ายยาวสองบรรทัด
          จะเตี้ยกว่าเพื่อนแล้วแถวเบี้ยวทั้งแถว */
    #register-form label { min-height: 2.2em; display: block; }
}

/* มือถือ: คอลัมน์เดียว เต็มความกว้าง ช่องสูงพอให้นิ้วกดโดน */
@media (max-width: 759px) {
    #register-panel { width: 100%; max-width: 26rem; }
    #register-form .form-row { flex-direction: column; gap: 0; }
    #register-form .form-control { min-height: 44px; }
}