﻿

.pdpa-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.6);
    z-index: 9998;
}


.pdpa-popup {
    z-index: 9999;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 420px;
    height: 650px;
    /* รูป 3 ชั้น */
    background: url('../images/popup-header.png') top center no-repeat, url('../images/popup-footer.png') bottom center no-repeat, url('../images/popup-center.png') center center repeat-y;
    background-size: 100% 180px, /* header สูง 180 */
    100% 90px, /* footer สูง 90 */
    100% auto; /* center ยืด */
    border-radius: 12px;
    overflow: hidden;
}
/* พื้นที่เนื้อหาอยู่ในกรอบพอดี */
.pdpa-contentfull {
    position: absolute;
    left: 20px;
    right: 20px;
    /* dynamic ตาม header/footer */
    top: var(--pdpa-header-h, 180px);
    bottom: var(--pdpa-footer-h, 90px);
    overflow-y: auto;
    padding: 20px;
    -pdpa-header-h: 180px;
    --pdpa-footer-h: 90px;
}


/* top: 180px; /* เท่าความสูง header bottom: 90px; /* เท่าความสูง footer  background: transparent; /* สำคัญ อย่าทับ center*/
 /*.pdpa-contentfull {
    position: absolute;
    top: 180px;
    left: 20px;
    right: 20px;
    bottom: 90px; 
    overflow-y: auto;
    overflow-x: hidden;
    padding: 20px;
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch;
    background: transparent; 
}*/


/* -------------------------
   HEADER
------------------------- */

.pdpa-header {
    flex: 0 0 180px;
    height: 180px;
    flex-shrink: 0;
    background: url('../images/popup-header.png') no-repeat center top;
    background-size: 100% 100%;
}


/* -------------------------
   CENTER (ยืดตามพื้นที่)
------------------------- */
.pdpa-content-wrap {
    position: relative;
    height: 260px;
    flex: 0 0 260px;
    margin: 0; /* เอา 20px ออก */
    width: 100%; /* ให้เต็มเท่าหัว-ท้าย */
    overflow: hidden;
    margin-bottom: -6px;
}
.pdpa-content-bg {
    position: absolute;
    inset: 0;
    background: url('../images/popup-center.png') no-repeat center top;
    background-size: 100% 100%;
    z-index: 1;
    pointer-events: none;
}

/* -------------------------
   FOOTER
------------------------- */

.pdpa-footer,
#pdpaAction {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 90px;
    display: flex !important;
    justify-content: center !important;
    align-items: flex-end !important;
    gap: 12px;
    padding-bottom: 12px;
    margin: 0 auto;
    box-sizing: border-box;
}


/* buttons */

.btn-accept {
    background: #8B6A2E;
    color: #fff;
    border: none;
    padding: 10px 22px;
    border-radius: 6px;
}

.btn-cancel {
    background: #999;
    color: #fff;
    border: none;
    padding: 10px 22px;
    border-radius: 6px;
}
/*=================*/
.pdpa-title {
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 24px;
}

.pdpa-heading {
    font-weight: 600;
    margin-top: 16px;
    margin-bottom: 12px;
}

.pdpa-textblock {
    margin: 0 0 18px 0;
    text-indent: 2em; /* ย่อหน้า */
}

.pdpa-indent {
    margin-left: 2em; /* ย่อ bullet-like */
}

.pdpa-contact-highlight {
    display: block;
    margin: 14px 0;
    padding: 12px 16px;
    color: #8B6A2E;
    font-weight: 600;
    background: #fff8e8;
    border-left: 4px solid #CFA459;
    border-radius: 8px;
}

.pdpa-list {
    margin: 12px 0 20px 35px;
    padding-left: 20px;
    line-height: 1.9;
}

    .pdpa-list li {
        margin-bottom: 8px;
    }

.pdpa-list-number {
    margin-left: 35px;
    line-height: 1.9;
}


/*Mobile*/ 
@media(max-width:768px) {
    .pdpa-popup {
        width: 95vw;
        height: 92vh;
    }

    .pdpa-header {
        height: 110px;
    }

    .pdpa-contentfull {
        padding: 18px;
        font-size: 14px;
    }

    .pdpa-footer {
        display: flex;
        justify-content: center;
        align-items: flex-end;
        gap: 10px;
    }

        .pdpa-footer button {
            width: auto; /* สำคัญ เอา 85% ออก */
            min-width: 120px;
        }



}
/*iPad Landscape*/
@media (orientation: landscape) {

    .pdpa-contentfull {
        background: #fefefe;
        border-radius: 8px;
    }
}

@media(max-width:1024px) and (orientation:landscape) {

    .pdpa-popup {
        width: 72vw;
        height: 88vh;
        --pdpa-header-h: 190px;
        --pdpa-footer-h: 70px;
    }

    .pdpa-header {
        height: 120px;
    }

    .pdpa-contentfull {
        padding: 22px;
    }

    .pdpa-footer {
        height: 70px;
    }
}
/*iPhone เตี้ยมาก*/
@media(max-height:500px) and (orientation:landscape) {
    .pdpa-popup {
        --pdpa-header-h:90px;
        --pdpa-footer-h: 60px;
    }

    .pdpa-header {
        height: 70px;
    }

    .pdpa-footer {
        height: 60px;
    }

    .pdpa-contentfull {
        font-size: 13px;
        padding: 15px;
    }
}