/* CSS Document */



/* 
https://xd.adobe.com/view/5d0f5fe9-5f65-4573-9ad6-25a24cf7361d-085c/
*/


:root{

  --font-title: 'DM Serif Text', sans-serif;
  --font-text: 'DM Sans', sans-serif;

}


.section--force_login .container,
.article--force_login article{ position: relative; }

.section--force_login .divbtn-more{ display: none; }


.force_login--popup{ position: relative; margin: -150px auto 0; width: calc(100% - 30px); z-index: 998; }
.article--force_login .force_login--popup,
.postbag--force_login .force_login--popup{ width: 100%; }
.postbag--force_login .force_login--popup{ margin-top: -250px; }
.force_login--popup::before{
  content: '';
  background: linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 25%, rgba(255, 255, 255, 0.65) 50%, rgba(255, 255, 255, 0.75) 100%);
  content: "";
  display: block;
  height: 6rem;
  margin-top: -6rem;
  width: 100%; 
}

.force_login--container{ padding: 30px 20px; background-color: #C4C4C4; color: var(--black); transition: bottom 0.5s ease; }
.force_login--container h2{ font-family: var(--font-title); font-size: 22px; line-height: 1.3; font-weight: 400; color: var(--black); margin-bottom: 10px; text-align: center; }


.inputgroup--form{ max-width: 480px; margin: 0 auto; }
.inputgroup--col .form-control,
.inputgroup--col .btn-submit{ border-radius: 3px; font-family: var(--font-text); height: 40px; }
.inputgroup--col .btn-submit{ padding: 5px 20px; font-size: 1rem; }
label.form-check-label{ font-family: var(--font-text); font-size: 13px; }
.inputgroup--form .form-check{ margin-bottom: 0; }
.inputgroup--form .form-check .form-check-input{ margin-top: 0.1rem; }


.postbag--force_login .postbag-bar{ margin-top: 30px; }

@media (max-width: 991px){

  /* .postbag--force_login .force_login--popup{ margin-bottom: 40px; } */

}
@media (max-width: 576px){

  .force_login--container h2{ font-size: 18px; }
  .inputgroup--form .form-check .form-check-input{ margin-top: 0; }

}


/* .box-postbag--force_login{ max-height: 600px; overflow: hidden; position: relative; padding: 0 3px; }
.postbag--force_login .force_login--popup{ margin-top: 0; position: absolute; bottom: 0; left: 0; } */


/***********************************************************************************/
/***********************************************************************************/


/* สถานะปกติ */
.box-postbag--force_login {
    position: relative;
    max-height: 5000px; 
    overflow: hidden;
    transition: max-height 1.0s ease-in-out; /* ความนุ่มนวลในการหด */
    padding: 0 3px;
}

/* เมื่อโดนล็อค: จัดการเงาขาวให้สูงขึ้นและไล่สีให้นุ่มขึ้น */
.box-postbag--force_login.is-locked::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 350px; /* เพิ่มระยะเงาให้สูงขึ้น จะได้ไม่ดูตัดแปะ */
    background: linear-gradient(to bottom, 
        rgba(255,255,255,0) 0%, 
        rgba(255,255,255,0.8) 50%, 
        rgba(255,255,255,1) 100%);
    pointer-events: none;
    z-index: 10;
    opacity: 0;
    animation: fadeIn 1.2s ease-in-out forwards;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ปุ่ม Popup ต้องอยู่เหนือเงาขาวเสมอ */
.postbag--force_login .force_login--popup {
    position: absolute;
    bottom: 10px; /* เขยิบขึ้นมาจากขอบล่างนิดหน่อย */
    left: 0;
    width: 100%;
    z-index: 20;
}