/* =========================================================
   CUSTOMER INDEX — MOBILE / IPAD RESPONSIVE FINAL
   ปรับเฉพาะขนาดและสัดส่วนหน้าจอ ไม่แตะ login logic
========================================================= */
@media (max-width: 700px){
  html, body{
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    zoom:1 !important;
  }

  body{
    min-height:100svh !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
    padding:18px 0 !important;
    align-items:center !important;
  }

  .container{
    width:92vw !important;
    max-width:430px !important;
    min-width:0 !important;
    padding:0 !important;
    margin:auto !important;
    transform:none !important;
  }

  .card{
    width:100% !important;
    max-width:none !important;
    min-width:0 !important;
    border-radius:25px !important;
    transform:none !important;
  }

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

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

  .awning{
    height:49px !important;
  }

  .brand-area{
    padding:22px 18px 0 !important;
  }

  .brand{
    font-size:26px !important;
    line-height:1.12 !important;
  }

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

  .welcome-area{
    padding:26px 21px 28px !important;
  }

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

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

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

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

  .button-icon{
    width:32px !important;
    height:32px !important;
    flex-basis:32px !important;
  }

  .footer{
    padding:0 14px 18px !important;
    font-size:9px !important;
  }

  /* login modal */
  .modal{
    padding:12px !important;
  }

  .modal-box{
    width:92vw !important;
    max-width:430px !important;
    padding:23px 20px !important;
    border-radius:22px !important;
  }

  .modal-header{
    margin-bottom:16px !important;
  }

  .modal-title{
    font-size:20px !important;
  }

  .close{
    width:38px !important;
    height:38px !important;
    font-size:22px !important;
  }

  .notice,
  .consignor-notice{
    padding:12px 13px !important;
    font-size:13px !important;
    line-height:1.5 !important;
  }

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

  .input-group input{
    min-height:48px !important;
    padding:12px 13px !important;
    font-size:16px !important;
  }

  .modal-btn,
  .register-btn{
    min-height:50px !important;
    font-size:15px !important;
  }

  .small-note{
    font-size:11px !important;
  }

  /* custom success / warning popup */
  .baac-popup-backdrop{
    padding:12px !important;
  }

  .baac-popup-card{
    width:92vw !important;
    max-width:400px !important;
    border-radius:22px !important;
  }

  .baac-popup-body{
    padding:23px 20px 18px !important;
  }

  .baac-popup-icon{
    width:58px !important;
    height:58px !important;
    margin-bottom:12px !important;
    font-size:29px !important;
  }

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

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

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

  .baac-popup-btn{
    min-width:120px !important;
    min-height:46px !important;
    padding:10px 17px !important;
    font-size:15px !important;
  }
}

@media (min-width:701px) and (max-width:1024px){
  .container{
    width:min(72vw,570px) !important;
  }

  .modal-box{
    width:min(82vw,500px) !important;
  }
}