/* =========================================================
   BAAC SMART OUTLET CUSTOMER — MOBILE PORTRAIT FINAL
   ใช้ layout โทรศัพท์แนวตั้งกับหน้าฝั่ง CUSTOMER
========================================================= */
html,
body{
  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;
  overflow-x:hidden !important;
  -webkit-text-size-adjust:100% !important;
  text-size-adjust:100% !important;
}

/* ครอบคลุม iPhone และกรณี Apps Script/Safari รายงาน viewport กว้างกว่าปกติ */
@media (max-width:1100px){
  body{
    min-height:100svh !important;
    padding:12px 0 !important;
    align-items:center !important;
    justify-content:center !important;
    overflow-x:hidden !important;
  }

  .container{
    width:calc(100vw - 24px) !important;
    max-width:480px !important;
    min-width:0 !important;
    margin:auto !important;
    padding:0 !important;
    transform:none !important;
  }

  /* รูปที่ 1 — ขยายหน้าหลักให้กินพื้นที่จอมือถือมากขึ้น */
  .card{
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    min-height:min(76svh,720px) !important;
    display:flex !important;
    flex-direction:column !important;
    border-radius:26px !important;
  }

  .storefront{
    flex:0 0 auto !important;
    padding:20px 18px 0 !important;
  }

  .store-sign{
    height:68px !important;
  }

  .awning{
    height:50px !important;
  }

  .brand-area{
    flex:0 0 auto !important;
    padding:23px 18px 0 !important;
  }

  .brand{
    font-size:27px !important;
    line-height:1.1 !important;
  }

  .subtitle{
    margin-top:6px !important;
    font-size:13px !important;
  }

  .welcome-area{
    flex:1 1 auto !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;
    padding:24px 22px 26px !important;
  }

  .welcome{
    font-size:23px !important;
  }

  .welcome-text{
    margin-bottom:20px !important;
    font-size:13px !important;
  }

  .login-buttons{
    width:100% !important;
    gap:13px !important;
  }

  .login-btn{
    width:100% !important;
    min-height:58px !important;
    padding:10px 15px !important;
    font-size:16px !important;
  }

  .footer{
    flex:0 0 auto !important;
    padding:0 14px 18px !important;
  }

  /* รูปที่ 2/3 — login modal ทั้งลูกค้าและผู้ฝากขาย */
  .modal{
    padding:16px !important;
    align-items:center !important;
    justify-content:center !important;
    overflow:hidden !important;
  }

  #customerModal .modal-box,
  #consignorModal .modal-box{
    width:calc(100vw - 32px) !important;
    max-width:460px !important;
    min-width:0 !important;
    min-height:min(56svh,560px) !important;
    max-height:calc(100dvh - 64px) !important;
    margin:auto !important;
    padding:24px 22px !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;
    overflow-y:auto !important;
    border-radius:24px !important;
  }

  /* สมัครสมาชิกยังคงรูปแบบเดิม แต่ต้องไม่ล้นจอมือถือ */
  #customerRegisterModal .modal-box{
    width:calc(100vw - 32px) !important;
    max-width:460px !important;
    max-height:calc(100dvh - 48px) !important;
    overflow-y:auto !important;
    margin:auto !important;
  }

  .modal-header{
    width:100% !important;
  }

  .modal-title{
    font-size:22px !important;
    line-height:1.2 !important;
  }

  .notice,
  .consignor-notice{
    width:100% !important;
    padding:13px 14px !important;
    font-size:14px !important;
    line-height:1.45 !important;
  }

  .input-group{
    width:100% !important;
  }

  .input-group label{
    font-size:14px !important;
  }

  /* 16px สำคัญสำหรับ iPhone: ไม่ให้ Safari ซูมหน้าเมื่อ focus input */
  .input-group input{
    width:100% !important;
    min-height:52px !important;
    padding:12px 14px !important;
    font-size:16px !important;
  }

  .modal-btn,
  .register-btn{
    width:100% !important;
    min-height:52px !important;
    font-size:16px !important;
  }

  .small-note{
    font-size:12px !important;
    line-height:1.4 !important;
  }

  /* ป๊อปอัพแจ้งเข้าสู่ระบบสำเร็จ / แจ้งเตือน ให้พอดีกับจอ */
  .baac-popup-backdrop{
    padding:16px !important;
    align-items:center !important;
    justify-content:center !important;
  }

  .baac-popup-card{
    width:calc(100vw - 32px) !important;
    max-width:440px !important;
    min-width:0 !important;
    max-height:calc(100dvh - 64px) !important;
    margin:auto !important;
    overflow:hidden !important;
    border-radius:24px !important;
  }

  .baac-popup-body{
    padding:24px 22px 17px !important;
    overflow-y:auto !important;
  }

  .baac-popup-title{
    font-size:22px !important;
  }

  .baac-popup-message{
    font-size:15px !important;
    line-height:1.45 !important;
  }

  .baac-popup-actions{
    padding:0 22px 22px !important;
  }

  .baac-popup-btn{
    min-height:48px !important;
    font-size:16px !important;
  }
}

/* ตอนคีย์บอร์ด iPhone เปิด ให้ modal หดตามพื้นที่จริง ไม่เกิดการซูมหรือหลุดจอ */
@media (max-width:1100px) and (max-height:650px){
  #customerModal .modal-box,
  #consignorModal .modal-box{
    min-height:0 !important;
    max-height:calc(100dvh - 24px) !important;
    padding-top:18px !important;
    padding-bottom:18px !important;
  }

  .modal{
    padding:8px !important;
  }
}