/* MacSoft Profile Gate — frontend styles.
   z-index, badge side, popup origin and per-profile colors are added inline
   from PHP (see MPG_Frontend::enqueue). */

/* Early guard — keep the page locked until a profile is known */
html.mpg-profile-required body{overflow:hidden!important}
/* Profile-scoped blocks stay hidden until the active profile is known. */
.mpg-for{display:none}

/* ===== MPG Frontend — design from MacSoft Chat Widget ===== */

/* prefers-reduced-motion — identical rule to chat widget */
@media(prefers-reduced-motion:reduce){
    #mpg-overlay,#mpg-popup,#mpg-gate,#mpg-badge,.mpg-pbtn,.mpg-btn-change,.mpg-btn-back{
        animation:none!important;transition:none!important;
    }
    .mpg-pbtn:hover,.mpg-btn-change:hover,.mpg-btn-back:hover,#mpg-badge:hover{transform:none!important}
}

/* Overlay — topmost layer so profile gate wins over other popups */
#mpg-overlay{
    position:fixed;inset:0;background:rgba(10,10,20,.62);
    display:none;align-items:center;justify-content:center;padding:20px;
    backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
#mpg-overlay.mpg-show{display:flex;animation:mpgFI .3s ease;}
#mpg-overlay.mpg-top{align-items:flex-start;padding-top:60px;}
@keyframes mpgFI{from{opacity:0}to{opacity:1}}

/* Popup card — spring cubic-bezier identical to chat widget window */
#mpg-popup{
    background:white;border-radius:20px;overflow:hidden;
    box-shadow:0 16px 60px rgba(0,0,0,.2);
    animation:mpgSU .38s cubic-bezier(.34,1.56,.64,1);
    font-family:'Segoe UI',system-ui,sans-serif;
    width:100%;
}
@keyframes mpgSU{from{transform:translateY(32px) scale(.93);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}

#mpg-popup-img{width:100%;height:auto;display:block;object-fit:contain;}
#mpg-popup-body{padding:28px 28px 20px;}
#mpg-popup-title{font-size:20px;font-weight:800;color:#1a1a2e;margin:0 0 10px;line-height:1.3;}
#mpg-popup-desc{font-size:14px;color:#666;margin:0 0 22px;line-height:1.65;}

/* Profile buttons — use CSS vars set by JS (cache-immune, same pattern as chat widget) */
.mpg-pbtn{
    display:flex;align-items:center;justify-content:center;gap:10px;
    width:100%;padding:14px 20px;border:none;border-radius:14px;
    color:white;font-size:15px;font-weight:800;
    cursor:pointer;transition:all .22s;font-family:inherit;margin-bottom:10px;
}
.mpg-pbtn:last-of-type{margin-bottom:0;}
.mpg-pbtn:hover{transform:translateY(-2px);}
.mpg-pbtn-icon{font-size:20px;line-height:1;}

/* Restricted gate — frosted overlay so page content stays visible behind */
#mpg-gate{
    position:fixed;inset:0;background:rgba(10,10,20,.52);
    display:none;align-items:center;justify-content:center;
    padding:32px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
    font-family:'Segoe UI',system-ui,sans-serif;
}
#mpg-gate.mpg-show{display:flex;animation:mpgFI .25s ease;}
#mpg-gate-box{
    max-width:460px;text-align:center;
    background:rgba(255,255,255,.88);border-radius:20px;padding:36px 32px 32px;
    box-shadow:0 16px 48px rgba(0,0,0,.18);
    border:1px solid rgba(255,255,255,.6);
}
#mpg-gate-icon{font-size:52px;margin-bottom:16px;line-height:1;}
#mpg-gate-msg{font-size:17px;color:#333;line-height:1.65;margin-bottom:26px;}
#mpg-gate-msg strong{color:#f15a28;}
.mpg-gate-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;align-items:center;}
.mpg-btn-change,.mpg-btn-back{
    padding:13px 30px;border-radius:50px;font-size:15px;font-weight:800;cursor:pointer;
    transition:all .22s;font-family:inherit;
}
.mpg-btn-change{
    background:#f15a28;color:white;border:none;
    box-shadow:0 4px 14px rgba(241,90,40,.32);
}
.mpg-btn-change:hover{background:#d04010;transform:translateY(-2px);box-shadow:0 6px 20px rgba(241,90,40,.4);}
.mpg-btn-back{
    background:white;color:#555;border:1.5px solid #ddd;
    box-shadow:0 2px 8px rgba(0,0,0,.06);
}
.mpg-btn-back:hover{border-color:#f15a28;color:#f15a28;transform:translateY(-2px);box-shadow:0 4px 14px rgba(241,90,40,.15);}

/* Profile badge — same pill style as chat widget #mcw-btn (z-index matches mcw-btn) */
#mpg-badge{
    position:fixed;bottom:22px;z-index:9998;
    display:none;align-items:center;gap:8px;
    width:max-content;max-width:calc(100vw - 32px);
    background:white;border:1.5px solid #e0e0e0;border-radius:50px;
    padding:10px 18px 10px 13px;
    font-size:13px;font-weight:700;color:#555;
    cursor:pointer;user-select:none;
    box-shadow:0 4px 16px rgba(0,0,0,.1);
    transition:all .22s;
    font-family:'Segoe UI',system-ui,sans-serif;
}
#mpg-badge:hover{
    border-color:#f15a28;color:#f15a28;
    transform:translateY(-2px);
    box-shadow:0 6px 20px rgba(241,90,40,.18);
}
#mpg-badge-dot{width:9px;height:9px;border-radius:50%;flex-shrink:0;}
#mpg-badge-lbl{white-space:nowrap;min-width:0;}
#mpg-badge-edit{font-size:12px;color:#ccc;flex-shrink:0;}

/* Stack above MacSoft Chat #mcw-btn (bottom:20px) when both are on the page */
body:has(#mcw-btn) #mpg-badge{bottom:76px;}
@media(max-width:480px){
    #mpg-popup-body{padding:22px 18px 18px;}
    #mpg-popup-title{font-size:18px;}
    #mpg-badge{bottom:16px;}
    body:has(#mcw-btn) #mpg-badge{bottom:66px;}
}