/* =====================================================================================================
   Popup / modal pattern of the front site (Ohm 2026-11-09, from the quotation form on /th/corporate):
   green header (#3b7169) with the title on the left and a white X on the right, white body, 16px corners.
   Floating box on every screen size (also on mobile).

   Use it for content / form popups:
     Magnific (inline) dialog
       <div id="..." class="zoom-anim-dialog mfp-hide col-xl-3 col-lg-6 col-md-7 col-11 mx-auto bg-white nkt-pop">
           <div class="nkt-pop-head">
               <span class="nkt-pop-title">Title</span>
               <button type="button" class="nkt-pop-close popup-modal-dismiss" aria-label="ปิด">&times;</button>
           </div>
           ... body ...
       </div>
       (popup-modal-dismiss = the theme's close handler in main.js; Magnific's own X is hidden inside .nkt-pop)
     Bootstrap modal: plain .modal-header / .modal-title / .btn-close markup is styled below for every modal,
       including modals pasted into article / static page HTML.
     Own overlay: put .nkt-pop-head / .nkt-pop-title / .nkt-pop-close at the top of the white box.
   Not for alerts (SweetAlert), video / image lightboxes or loading spinners.
   ===================================================================================================== */
:root {
    --nkt-pop-green: #3b7169;
    --nkt-pop-radius: 16px;
    --nkt-pop-x: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
}

/* ---- the box (Magnific dialogs: the padding classes pt-60px ... were replaced by this) ---- */
.nkt-pop {
    position: relative;
    background: #fff;
    border-radius: var(--nkt-pop-radius) !important;
    overflow: hidden;
    padding: 0 28px 28px !important;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .18);
}

/* ---- green header, full width of the box ---- */
.nkt-pop-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 -28px 24px;
    padding: 14px 14px 14px 24px;
    min-height: 58px;
    background: var(--nkt-pop-green);
    color: #fff;
    text-align: left;
}

.nkt-pop-title {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0 !important;
    color: #fff !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    line-height: 1.45 !important;
    overflow-wrap: anywhere;
}

.nkt-pop-close,
.modal .modal-header .btn-close,
.modal .modal-header .close {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    margin: -4px 0 -4px auto;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent var(--nkt-pop-x) center / 14px auto no-repeat;
    color: transparent;
    font-size: 0;
    line-height: 0;
    text-shadow: none;
    opacity: .92;
    cursor: pointer;
    filter: none !important;   /* page CSS like #regis-form .btn-close { filter: invert(1) } would turn the white X black */
    box-shadow: none;
    transition: background-color .15s, opacity .15s;
}

.nkt-pop-close > *,
.modal .modal-header .close > * {
    display: none;   /* the &times; / <span> inside stays for screen readers only via aria-label */
}

.nkt-pop-close:hover,
.modal .modal-header .btn-close:hover,
.modal .modal-header .close:hover {
    opacity: 1;
    background-color: rgba(255, 255, 255, .16);
}

.nkt-pop-close:focus-visible,
.modal .modal-header .btn-close:focus-visible,
.modal .modal-header .close:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 1px;
    box-shadow: none;
}

/* Magnific adds its own X inside the box (closeBtnInside) - the header has one already */
.nkt-pop > .mfp-close,
.nkt-pop > button.mfp-close {
    display: none !important;
}

/* ---- Bootstrap modals (site pages + modals pasted into article / static page HTML) ---- */
.modal .modal-content {
    border: 0;
    border-radius: var(--nkt-pop-radius) !important;
    overflow: hidden;
    background: #fff;
}

.modal .modal-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 14px 14px 24px;
    min-height: 58px;
    border: 0;
    border-radius: 0;
    background: var(--nkt-pop-green);
    color: #fff;
}

.modal .modal-header .modal-title,
.modal .modal-header h1, .modal .modal-header h2, .modal .modal-header h3,
.modal .modal-header h4, .modal .modal-header h5, .modal .modal-header h6 {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.45;
}

.modal .modal-footer {
    border-top: 1px solid #edf2f1;
}

/* ---- cookie settings dialog (rendered by Class/SiteTracking.cs; styled here so this look needs no rebuild) ---- */
#nkt-cookie-settings .nkt-ck-dialog {
    border-radius: var(--nkt-pop-radius);
}

#nkt-cookie-settings .nkt-ck-head {
    padding: 14px 14px 14px 24px;
    min-height: 58px;
    border-bottom: 0;
    background: var(--nkt-pop-green);
}

#nkt-cookie-settings .nkt-ck-head h3 {
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.45;
}

#nkt-cookie-settings .nkt-ck-close {
    width: 36px;
    height: 36px;
    padding: 0;
    border-radius: 50%;
    background: transparent var(--nkt-pop-x) center / 14px auto no-repeat;
    color: transparent;
    font-size: 0;
    opacity: .92;
}

#nkt-cookie-settings .nkt-ck-close:hover {
    opacity: 1;
    background-color: rgba(255, 255, 255, .16);
}

#nkt-cookie-settings .nkt-ck-close:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 1px;
}

@media (max-width: 575px) {
    .nkt-pop {
        padding: 0 18px 22px !important;
    }

    .nkt-pop-head {
        margin: 0 -18px 18px;
        padding: 12px 10px 12px 18px;
        min-height: 52px;
    }

    .nkt-pop-title,
    .modal .modal-header .modal-title {
        font-size: 17px !important;
    }

    .modal .modal-header {
        padding: 12px 10px 12px 18px;
        min-height: 52px;
    }
}