/* ==========================================================================
   Newsletter Email Popup (v2 — Ultra) · montech.sk
   Extrahované 1:1 z inline <style> v class-module-email-popup.php (print_styles)
   kvôli page-weight — obsah nemeniť bez synchronizácie s modulom.
   Enqueue: EmailPopup::enqueue_assets() (handle montech-email-popup).
   ========================================================================== */

@keyframes mep-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes mep-spin{to{transform:rotate(360deg)}}
@keyframes mep-fadeUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
@keyframes mep-slideUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
@keyframes mep-scaleIn{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}
@keyframes mep-shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}50%{transform:translateX(6px)}75%{transform:translateX(-4px)}}
@keyframes mep-pulse{0%,100%{opacity:1}50%{opacity:.4}}

/* Brand v2 tokens — sale=#FB2056 (accent), brand=#0066CC, action=#00A376 */
/* DEFENSIVE: prevent horizontal page overflow from breaking fixed-position popup on iOS Safari.
   Some product descriptions ship oversized <img width="1254"> from the content agent and Tailwind
   classes copy-pasted from Claude.ai UI; without these guards, html scrollWidth > viewport, and
   position:fixed elements (overlay/modal) get placed off-screen. */
html{overflow-x:clip;max-width:100vw;}
body{overflow-x:clip;max-width:100vw;}
#tab-description img,.woocommerce-Tabs-panel--description img,.woocommerce-product-details__short-description img,.entry-content img{max-width:100%!important;height:auto!important;}
#tab-description,.woocommerce-Tabs-panel--description,.woocommerce-product-details__short-description{max-width:100%;overflow-wrap:break-word;word-wrap:break-word;}
.mep-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;height:100dvh;z-index:999999;display:flex;align-items:center;justify-content:center;font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;}
.mep-backdrop{position:absolute;inset:0;background:rgba(15,23,42,.72);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);cursor:pointer;animation:mep-fadeUp .3s ease;}
.mep-close{position:absolute;top:14px;right:16px;z-index:10;background:rgba(255,255,255,.92);border:none;font-size:24px;color:#0F172A;cursor:pointer;line-height:1;width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;transition:all .2s;box-shadow:0 2px 8px rgba(15,23,42,.12);}
.mep-close:hover{background:#fff;color:#FB2056;transform:rotate(90deg);}
.mep-close:focus-visible{outline:2px solid #FB2056;outline-offset:2px;}

/* ===== Desktop modal ===== */
/* Radius max 16px (brand) a tiene z neutrálnej slate škály — farebné „glow" tiene
   (rgba(251,32,86,…), rgba(0,163,118,…)) v TOKENS neexistujú. */
.mep-modal--desktop{position:relative;display:flex;width:780px;max-width:94vw;max-height:92vh;border-radius:16px;overflow:hidden;box-shadow:0 30px 80px rgba(15,23,42,.18),0 12px 32px rgba(15,23,42,.28);animation:mep-scaleIn .4s cubic-bezier(.16,1,.3,1);z-index:1;}
.mep-left{flex:0 0 320px;background:linear-gradient(155deg,#FB2056 0%,#D81446 55%,#970C31 100%);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 28px;text-align:center;position:relative;overflow:hidden;}
.mep-left::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 25% 30%,rgba(255,255,255,.18),transparent 55%),radial-gradient(circle at 80% 80%,rgba(255,255,255,.10),transparent 50%);pointer-events:none;}

.mep-urgency{position:absolute;top:16px;left:16px;right:16px;display:flex;align-items:center;justify-content:center;gap:6px;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.35);color:#fff;font-size:11px;font-weight:700;padding:5px 12px;border-radius:999px;letter-spacing:.4px;z-index:2;backdrop-filter:blur(4px);}
.mep-urgency-dot{width:7px;height:7px;border-radius:50%;background:#fff;box-shadow:0 0 0 0 rgba(255,255,255,.7);animation:mep-pulse 1.4s ease-in-out infinite;}

.mep-coupon-card{position:relative;animation:mep-float 3s ease-in-out infinite;}
.mep-coupon-glow{position:absolute;inset:-24px;background:radial-gradient(circle,rgba(255,255,255,.45),transparent 70%);border-radius:50%;filter:blur(24px);}
.mep-coupon-inner{position:relative;background:#fff;border-radius:16px;padding:26px 36px;box-shadow:0 12px 36px rgba(15,23,42,.18),inset 0 -3px 0 rgba(15,23,42,.05);text-align:center;}
.mep-coupon-inner::after{content:'';position:absolute;top:6px;left:18%;width:64%;height:30%;background:linear-gradient(180deg,rgba(255,255,255,.85),transparent);border-radius:50%;pointer-events:none;}
.mep-coupon-amount{display:block;font-size:64px;font-weight:900;color:#FB2056;line-height:1;font-family:'Inter Tight',Inter,sans-serif;letter-spacing:-.04em;}
.mep-coupon-amount sup{font-size:28px;vertical-align:super;color:#D81446;}
.mep-coupon-label{display:block;font-size:13px;font-weight:800;letter-spacing:3px;color:#0F172A;margin-top:6px;text-transform:uppercase;}
.mep-logo{margin-top:28px;position:relative;opacity:.95;height:auto;max-width:160px;filter:brightness(0) invert(1);}

.mep-right{flex:1;background:#fff;padding:48px 44px;display:flex;flex-direction:column;justify-content:center;min-height:460px;}
.mep-badge{display:inline-block;background:rgba(251,32,86,.1);color:#FB2056;font-size:11px;font-weight:800;letter-spacing:1.4px;padding:5px 12px;border-radius:6px;margin-bottom:14px;text-transform:uppercase;}
.mep-title{font-size:30px;font-weight:800;color:#0F172A;margin:0 0 10px;line-height:1.15;letter-spacing:-.025em;font-family:'Inter Tight',Inter,sans-serif;}
.mep-highlight{color:#FB2056;position:relative;display:inline-block;}
.mep-highlight::after{content:'';position:absolute;bottom:-2px;left:0;width:100%;height:8px;background:#FB2056;border-radius:8px;opacity:.18;z-index:-1;}
.mep-subtitle{font-size:15px;color:#475569;margin:0 0 22px;line-height:1.55;}

.mep-bullets{list-style:none;padding:0;margin:0 0 22px;font-size:14px;color:#0F172A;}
.mep-bullets li{display:flex;align-items:center;gap:10px;padding:5px 0;font-weight:500;}
.mep-check{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;background:#00A376;color:#fff;border-radius:50%;font-size:12px;font-weight:800;flex-shrink:0;box-shadow:0 2px 6px rgba(15,23,42,.12);}

.mep-form{display:flex;flex-direction:column;gap:12px;}
.mep-input-wrap{position:relative;}
.mep-input{width:100%;padding:15px 16px;border:2px solid #E2E8F0;border-radius:10px;font-size:15px;outline:none;transition:border-color .2s,background .2s,box-shadow .2s;box-sizing:border-box;background:#FAFAF7;font-family:inherit;color:#0F172A;}
.mep-input::placeholder{color:#94A3B8;}
.mep-input:focus{border-color:#FB2056;background:#fff;box-shadow:0 0 0 4px rgba(251,32,86,.14);}
.mep-input.mep-input--error{border-color:#FB2056;animation:mep-shake .4s;background:#FFF1F4;}
.mep-typo-suggest{margin:6px 2px 0;font-size:12px;color:#64748B;}
.mep-typo-suggest button{background:none;border:none;color:#0066CC;font-weight:700;cursor:pointer;padding:0;font:inherit;text-decoration:underline;}
.mep-typo-suggest button:hover{color:#003D7A;}

.mep-btn{padding:16px 24px;border:none;border-radius:12px;font-size:16px;font-weight:800;cursor:pointer;transition:transform .15s,box-shadow .2s,background .2s;display:inline-flex;align-items:center;justify-content:center;gap:8px;background:#FB2056;color:#fff;box-shadow:0 6px 18px rgba(15,23,42,.16);text-decoration:none;font-family:inherit;width:100%;box-sizing:border-box;letter-spacing:.2px;}
.mep-btn:hover{transform:translateY(-1px);background:#D81446;box-shadow:0 10px 28px rgba(15,23,42,.20);}
.mep-btn:active{transform:translateY(0);}
.mep-btn:focus-visible{outline:3px solid #FB2056;outline-offset:3px;}
.mep-btn:disabled{opacity:.7;cursor:wait;transform:none;}
.mep-btn--outline{background:transparent;color:#64748B;border:1px solid #E2E8F0;box-shadow:none;margin-top:6px;font-weight:600;}
.mep-btn--outline:hover{border-color:#CBD5E1;background:#FAFAF7;transform:none;box-shadow:none;color:#0F172A;}
.mep-btn-loader .mep-spin{animation:mep-spin .8s linear infinite;}

.mep-consent{font-size:11px;color:#94A3B8;margin:4px 0 0;line-height:1.5;}
.mep-consent a{color:#0066CC;text-decoration:underline;}
.mep-error-msg{color:#FB2056;font-size:13px;margin:4px 0 0;line-height:1.4;font-weight:600;animation:mep-fadeUp .3s ease;}

/* Honeypot — must be invisible but not display:none (bots detect that) */
.mep-honey{position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;opacity:0;pointer-events:none;}

/* Success — e-mail-first: kód sa zobrazuje výhradne v e-maile (brand ink + action-600) */
.mep-step--success{text-align:center;animation:mep-fadeUp .5s ease;}
.mep-mail-icon{display:inline-flex;align-items:center;justify-content:center;width:64px;height:64px;border-radius:50%;background:rgba(0,134,97,.12);color:#008661;margin:0 auto 16px;}
.mep-step--success .mep-subtitle,.mep-step--success-mobile .mep-subtitle{margin-bottom:10px;}
.mep-sent-email{color:#0F172A;font-weight:700;word-break:break-all;}
.mep-success-tip{font-size:12px;color:#64748B;margin:0 0 22px;line-height:1.5;}
.mep-btn--success{background:#008661;box-shadow:0 6px 18px rgba(15,23,42,.16);}
.mep-btn--success:hover{background:#00684C;box-shadow:0 10px 28px rgba(15,23,42,.20);}

/* ===== Mobile ===== */
.mep-modal--mobile{display:none;}
@media(max-width:640px){
	.mep-modal--desktop{display:none;}
	.mep-overlay{touch-action:none;overscroll-behavior:contain;}
	.mep-modal--mobile{display:flex;flex-direction:column;position:fixed;bottom:0;left:0;width:100vw;max-width:100vw;z-index:1;background:#fff;border-radius:16px 16px 0 0;padding:8px 20px 28px;max-height:92vh;max-height:92dvh;overflow-y:auto;touch-action:pan-y;overscroll-behavior:contain;animation:mep-slideUp .4s cubic-bezier(.16,1,.3,1);box-shadow:0 -16px 50px rgba(15,23,42,.18),0 -4px 16px rgba(15,23,42,.18);-webkit-overflow-scrolling:touch;border-top:4px solid #FB2056;box-sizing:border-box;}
	.mep-drag-handle{display:block;width:44px;height:5px;background:#CBD5E1;border-radius:3px;margin:8px auto 18px;}
	.mep-mobile-header{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:14px;}
	.mep-gift-icon{font-size:36px;animation:mep-float 2.5s ease-in-out infinite;}
	.mep-mobile-badge{background:#FB2056;color:#fff;font-size:20px;font-weight:900;padding:8px 18px;border-radius:12px;letter-spacing:1px;box-shadow:0 6px 18px rgba(15,23,42,.16);font-family:'Inter Tight',Inter,sans-serif;letter-spacing:-.01em;}
	.mep-urgency--mobile{display:flex;align-items:center;justify-content:center;gap:6px;margin:0 0 16px;font-size:12px;color:#FB2056;font-weight:700;}
	.mep-modal--mobile .mep-title{font-size:24px;text-align:center;margin-bottom:12px;}
	.mep-modal--mobile .mep-subtitle{text-align:center;}
	.mep-modal--mobile .mep-bullets{margin-bottom:18px;}
	.mep-modal--mobile .mep-close{top:8px;right:12px;}
	.mep-modal--mobile .mep-step--success-mobile{text-align:center;animation:mep-fadeUp .5s ease;}
}

/* Tidio chat hiding while popup is open */
body.mep-popup-open #tidio-chat-iframe,
body.mep-popup-open #tidio-chat{display:none!important;visibility:hidden!important;opacity:0!important;}

/* Respect reduced motion */
@media(prefers-reduced-motion:reduce){
	.mep-modal--desktop,.mep-modal--mobile,.mep-coupon-card,.mep-gift-icon,.mep-urgency-dot,.mep-backdrop{animation:none!important;}
}