@keyframes wmdmPopupFadeIn {
from {
opacity: 0;
transform: translateY(-24px) scale(0.97);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
}
}
@keyframes wmdmExitPopupSlideUp {
0% {
opacity: 0;
transform: translateY(48px) scale(0.96);
}
70% {
opacity: 1;
transform: translateY(-4px) scale(1.005);
}
100% {
opacity: 1;
transform: translateY(0) scale(1);
}
}
@keyframes wmdmOverlayFadeIn {
from { opacity: 0; }
to   { opacity: 1; }
}
.wmdm-popup-overlay {
--popup-bg: var(--bg-card, #ffffff);
--popup-text: var(--text, #111827);
--popup-text-secondary: var(--text-40, #6b7280);
--popup-label-color: var(--text-80, #374151);
--popup-accent: var(--primary, #FF6B35);
--popup-accent-glow: var(--primary-glow, rgba(255, 107, 53, 0.35));
--popup-btn-bg: linear-gradient(135deg, var(--primary, #FF6B35), var(--primary-dark, #e85c28));
--popup-btn-hover-bg: linear-gradient(135deg, var(--primary-dark, #e85c28), var(--primary, #FF6B35));
--popup-btn-text: #ffffff;
--popup-btn-disabled-bg: var(--text-20, #fdba9a);
--popup-input-bg: var(--bg-elevated, #f9fafb);
--popup-input-border: var(--border, #e5e7eb);
--popup-input-text: var(--text, #111827);
--popup-input-placeholder: var(--text-40, #9ca3af);
--popup-input-focus-border: var(--primary, #FF6B35);
--popup-input-focus-ring: var(--primary-glow, rgba(255, 107, 53, 0.15));
--popup-close-color: var(--text-40, #9ca3af);
--popup-close-hover-bg: var(--bg-hover, #f3f4f6);
--popup-close-hover-color: var(--text, #111827);
--popup-discount-bg: var(--primary-glow, #fff7f4);
--popup-discount-border: var(--primary, #FF6B35);
--popup-discount-code-color: var(--primary, #FF6B35);
--popup-success-bg: #ecfdf5;
--popup-success-border: #6ee7b7;
--popup-success-text: #065f46;
--popup-error-bg: #fef2f2;
--popup-error-border: #fca5a5;
--popup-error-text: #991b1b;
--popup-radius: var(--radius, 20px);
--popup-shadow: var(--shadow-lg, 0 24px 64px rgba(0, 0, 0, 0.35)), 0 4px 12px var(--primary-glow, rgba(0, 0, 0, 0.18));
--popup-backdrop-filter: blur(20px) saturate(180%);
--popup-bar-gradient: linear-gradient(90deg, var(--primary, #FF6B35), var(--primary-dark, #ff9a6c));
--popup-bar-height: 6px;
--popup-exit-accent: #E53E3E;
--popup-exit-glow: rgba(229, 62, 62, 0.35);
--popup-exit-btn-bg: linear-gradient(135deg, #E53E3E, #C53030);
--popup-exit-btn-hover-bg: linear-gradient(135deg, #C53030, #E53E3E);
--popup-exit-btn-disabled-bg: rgba(229, 62, 62, 0.35);
--popup-exit-bar-gradient: linear-gradient(90deg, #E53E3E, #C53030);
--popup-exit-discount-bg: rgba(229, 62, 62, 0.10);
--popup-exit-discount-border: #E53E3E;
--popup-exit-discount-code-color: #E53E3E;
--popup-exit-input-focus-border: #E53E3E;
--popup-exit-input-focus-ring: rgba(229, 62, 62, 0.20);
--popup-privacy-color: var(--text-40, #9ca3af);
--popup-required-color: var(--popup-accent);
--popup-exit-required-color: var(--popup-exit-accent);
}
@supports (background: color-mix(in srgb, red 50%, transparent)) {
.wmdm-popup-overlay {
--popup-bg: color-mix(in srgb, var(--bg-card) 92%, transparent);
}
}
.wmdm-popup-overlay {
display: none;
position: fixed;
inset: 0;
z-index: 9999;
background-color: rgba(0, 0, 0, 0.72);
align-items: center;
justify-content: center;
padding: 16px;
box-sizing: border-box;
}
.wmdm-popup-overlay.active {
display: flex;
animation: wmdmOverlayFadeIn 0.25s ease forwards;
}
.wmdm-popup-modal {
position: relative;
background: var(--popup-bg);
max-width: 480px;
width: 100%;
border-radius: var(--popup-radius);
overflow: hidden;
padding: 44px 40px 36px;
box-sizing: border-box;
box-shadow: var(--popup-shadow);
outline: none;
-webkit-backdrop-filter: var(--popup-backdrop-filter);
backdrop-filter: var(--popup-backdrop-filter);
}
.wmdm-popup-overlay.active .wmdm-popup-modal {
animation: wmdmPopupFadeIn 0.3s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.wmdm-popup-overlay.active .wmdm-popup-modal--exit {
animation: wmdmExitPopupSlideUp 0.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.wmdm-popup-modal::before {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
right: 0;
height: var(--popup-bar-height);
background: var(--popup-bar-gradient);
border-radius: var(--popup-radius) var(--popup-radius) 0 0;
}
.wmdm-popup-modal--exit::before {
background: var(--popup-exit-bar-gradient);
}
.wmdm-popup-close {
position: absolute;
top: 14px;
right: 16px;
background: none;
border: none;
padding: 6px 8px;
font-size: 26px;
line-height: 1;
color: var(--popup-close-color);
cursor: pointer;
border-radius: 6px;
transition: color 0.15s ease, background-color 0.15s ease;
}
.wmdm-popup-close:hover,
.wmdm-popup-close:focus {
color: var(--popup-close-hover-color);
background-color: var(--popup-close-hover-bg);
outline: none;
}
.wmdm-popup-content {
text-align: center;
}
.wmdm-popup-heading {
margin: 0 0 12px;
font-size: 26px;
font-weight: 700;
line-height: 1.2;
color: var(--popup-text);
letter-spacing: -0.3px;
font-family: var(--font-display, inherit);
}
.wmdm-popup-description {
margin: 0 0 24px;
font-size: 15px;
line-height: 1.6;
color: var(--popup-text-secondary);
}
.wmdm-popup-form {
margin: 0;
}
.wmdm-popup-field {
margin-bottom: 14px;
text-align: left;
}
.wmdm-popup-label {
display: block;
margin-bottom: 6px;
font-size: 13px;
font-weight: 600;
color: var(--popup-label-color);
letter-spacing: 0.2px;
}
.wmdm-popup-required {
color: var(--popup-required-color);
margin-left: 2px;
}
.wmdm-popup-modal--exit .wmdm-popup-required {
color: var(--popup-exit-required-color);
}
.wmdm-popup-overlay .wmdm-popup-input {
display: block;
width: 100%;
padding: 13px 16px;
font-size: 15px;
color: var(--popup-input-text);
background-color: var(--popup-input-bg);
border: 1.5px solid var(--popup-input-border);
border-radius: var(--radius-sm, 8px);
box-sizing: border-box;
transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
-webkit-appearance: none;
appearance: none;
}
.wmdm-popup-overlay .wmdm-popup-input::placeholder {
color: var(--popup-input-placeholder);
}
.wmdm-popup-overlay .wmdm-popup-input:focus {
outline: none;
border-color: var(--popup-input-focus-border);
background-color: var(--popup-input-bg);
box-shadow: 0 0 0 3px var(--popup-input-focus-ring);
}
.wmdm-popup-modal--exit .wmdm-popup-input:focus {
border-color: var(--popup-exit-input-focus-border);
box-shadow: 0 0 0 3px var(--popup-exit-input-focus-ring);
}
.wmdm-popup-submit {
display: block;
width: 100%;
margin-top: 6px;
padding: 15px 24px;
font-size: 16px;
font-weight: 700;
letter-spacing: 0.3px;
font-family: var(--font-display, inherit);
color: var(--popup-btn-text);
background: var(--popup-btn-bg);
border: none;
border-radius: var(--radius-sm, 8px);
cursor: pointer;
transition: background 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease;
box-shadow: 0 4px 14px var(--popup-accent-glow);
}
.wmdm-popup-submit:hover {
background: var(--popup-btn-hover-bg);
box-shadow: 0 6px 18px var(--popup-accent-glow);
}
.wmdm-popup-submit:active {
transform: translateY(1px);
box-shadow: 0 2px 8px var(--popup-accent-glow);
}
.wmdm-popup-submit:disabled {
background: var(--popup-btn-disabled-bg);
box-shadow: none;
cursor: not-allowed;
transform: none;
}
.wmdm-popup-modal--exit .wmdm-popup-submit {
background: var(--popup-exit-btn-bg);
box-shadow: 0 4px 14px var(--popup-exit-glow);
}
.wmdm-popup-modal--exit .wmdm-popup-submit:hover {
background: var(--popup-exit-btn-hover-bg);
box-shadow: 0 6px 18px var(--popup-exit-glow);
}
.wmdm-popup-modal--exit .wmdm-popup-submit:active {
box-shadow: 0 2px 8px var(--popup-exit-glow);
}
.wmdm-popup-modal--exit .wmdm-popup-submit:disabled {
background: var(--popup-exit-btn-disabled-bg);
}
.wmdm-popup-discount {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
margin: 20px 0 0;
padding: 12px 16px;
background-color: var(--popup-discount-bg);
border: 1.5px dashed var(--popup-discount-border);
border-radius: 8px;
font-size: 14px;
}
.wmdm-popup-discount-label {
color: var(--popup-text-secondary);
}
.wmdm-popup-discount-code {
font-weight: 700;
font-size: 15px;
color: var(--popup-discount-code-color);
letter-spacing: 1px;
font-family: var(--font-mono, 'Courier New', Courier, monospace);
}
.wmdm-popup-modal--exit .wmdm-popup-discount {
background-color: var(--popup-exit-discount-bg);
border-color: var(--popup-exit-discount-border);
}
.wmdm-popup-modal--exit .wmdm-popup-discount-code {
color: var(--popup-exit-discount-code-color);
}
.wmdm-popup-success,
.wmdm-popup-error {
margin-top: 16px;
padding: 12px 16px;
border-radius: 8px;
font-size: 14px;
font-weight: 500;
text-align: center;
}
.wmdm-popup-success {
background-color: var(--popup-success-bg);
border: 1px solid var(--popup-success-border);
color: var(--popup-success-text);
}
.wmdm-popup-error {
background-color: var(--popup-error-bg);
border: 1px solid var(--popup-error-border);
color: var(--popup-error-text);
}
.wmdm-popup-privacy {
margin: 16px 0 0;
font-size: 12px;
color: var(--popup-privacy-color);
text-align: center;
}
@media (max-width: 540px) {
.wmdm-popup-modal {
padding: 36px 24px 28px;
}
.wmdm-popup-heading {
font-size: 22px;
}
.wmdm-popup-description {
font-size: 14px;
margin-bottom: 20px;
}
.wmdm-popup-submit {
font-size: 15px;
padding: 14px 20px;
}
.wmdm-popup-close {
font-size: 22px;
top: 10px;
right: 12px;
}
}
@media (max-width: 360px) {
.wmdm-popup-modal {
padding: 32px 18px 24px;
}
.wmdm-popup-heading {
font-size: 20px;
}
}