@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"); #whp-popup {
position: fixed;
inset: 0;
z-index: 99999;
display: flex;
align-items: center;
justify-content: center;
font-family: 'Inter', sans-serif;
}
#whp-popup.whp-hidden {
display: none;
}
.whp-popup-background {
position: absolute;
inset: 0;
background: rgba(15, 23, 42, 0.6);
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
} #whp-popup .center {
position: relative;
z-index: 1;
width: 100% !important;
max-width: 500px !important;
padding: 16px !important;
margin: 0 auto !important;
box-sizing: border-box !important;
text-align: initial !important;
} #whp-popup .center.whp-form-mode {
max-width: 500px !important;
}
#whp-popup .whp-form-mode .modal-box {
max-height: 96vh;
overflow-y: auto;
text-align: left;
} #whp-popup .modal-box {
position: relative;
width: 100% !important;
max-width: 100% !important;
background: #ffffff !important;
border-radius: 16px !important;
padding: 40px 36px 36px !important;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18), 0 4px 16px rgba(0, 0, 0, 0.08) !important;
opacity: 0;
visibility: hidden;
transform: translateY(16px) scale(0.97);
transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
text-align: center;
box-sizing: border-box !important;
}
#whp-popup .modal-box.show-modal {
opacity: 1;
visibility: visible;
transform: translateY(0) scale(1);
} #whp-popup .icon-close {
position: absolute;
top: 14px;
right: 14px;
width: 32px;
height: 32px;
border-radius: 8px;
background: #f1f5f9;
color: #64748b;
font-size: 20px;
line-height: 32px;
text-align: center;
cursor: pointer;
transition: background 0.2s, color 0.2s;
user-select: none;
}
#whp-popup .icon-close:hover {
background: #e2e8f0;
color: #1e293b;
} #whp-popup .icon-letter-1 {
width: 64px;
height: 64px;
border-radius: 16px;
background: linear-gradient(135deg, #6366f1 0%, #0ea5e9 100%);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 20px;
box-shadow: 0 8px 20px rgba(99, 102, 241, 0.3);
}
#whp-popup .icon-letter-1 .fas {
font-size: 26px !important;
color: #fff !important;
} #whp-popup .modal-box header {
font-size: 22px;
font-weight: 700;
color: #0f172a;
margin-bottom: 8px;
line-height: 1.3;
font-family: 'Inter', sans-serif;
}
#whp-popup .modal-box > p {
font-size: 14px;
color: #64748b;
line-height: 1.6;
margin-bottom: 20px;
} #whp-form {
display: flex;
flex-direction: column;
gap: 10px;
}
#whp-form input[type="email"] {
height: 48px;
width: 100%;
padding: 0 16px;
border: 1.5px solid #e2e8f0;
border-radius: 10px;
font-size: 15px;
font-family: 'Inter', sans-serif;
color: #1e293b;
outline: none;
transition: border-color 0.2s, box-shadow 0.2s;
background: #f8fafc;
}
#whp-form input[type="email"]::placeholder {
color: #94a3b8;
}
#whp-form input[type="email"]:focus {
border-color: #6366f1;
background: #fff;
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
}
#whp-button-popup {
height: 48px;
width: 100%;
border: none;
border-radius: 10px;
background: linear-gradient(135deg, #6366f1 0%, #0ea5e9 100%);
color: #fff;
font-size: 15px;
font-weight: 600;
font-family: 'Inter', sans-serif;
letter-spacing: 0.3px;
cursor: pointer;
transition: opacity 0.2s, transform 0.15s;
}
#whp-button-popup:hover {
opacity: 0.92;
transform: translateY(-1px);
}
#whp-button-popup:active {
transform: translateY(0);
opacity: 1;
} #whp-popup .modal-box .icons {
display: flex;
justify-content: center;
gap: 14px;
margin-top: 20px;
padding-top: 16px;
border-top: 1px solid #f1f5f9;
}
#whp-popup .icons a {
width: 38px;
height: 38px;
border-radius: 10px;
background: #f8fafc;
border: 1px solid #e2e8f0;
display: flex;
align-items: center;
justify-content: center;
color: #475569;
text-decoration: none;
transition: background 0.2s, color 0.2s, transform 0.15s;
}
#whp-popup .icons a:hover {
background: #6366f1;
border-color: #6366f1;
color: #fff;
transform: translateY(-2px);
}
#whp-popup .icons i {
font-size: 16px;
} #whp-popup .whp-popup-header {
display: flex;
align-items: flex-start;
gap: 14px;
margin-bottom: 24px;
text-align: left;
}
#whp-popup .whp-popup-header-icon {
width: 52px;
height: 52px;
border-radius: 14px;
background: linear-gradient(135deg, #6366f1 0%, #818cf8 100%);
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
box-shadow: 0 6px 16px rgba(99, 102, 241, 0.28);
}
#whp-popup .whp-popup-header-icon .fas {
font-size: 22px !important;
color: #fff !important;
}
#whp-popup .whp-popup-header-body {
flex: 1;
min-width: 0;
}
#whp-popup .whp-popup-header-body h2 {
font-size: 19px;
font-weight: 700;
color: #0f172a;
margin: 0 0 5px;
line-height: 1.3;
font-family: 'Inter', sans-serif;
}
#whp-popup .whp-popup-header-body p {
font-size: 13.5px;
color: #64748b;
margin: 0;
line-height: 1.55;
} #whp-popup .modal-box .whp-embedded-form {
text-align: left;
}  .whp-embedded-form fieldset {
border: none !important;
margin: 0 !important;
padding: 0 !important;
}
.whp-embedded-form fieldset.hidden-fields-container {
display: none !important;
}
.whp-embedded-form p {
margin: 0 0 14px !important;
} .whp-embedded-form p:last-child,
.whp-embedded-form p:last-of-type {
margin-bottom: 0 !important;
} .whp-embedded-form .wpcf7-form > p:last-of-type {
margin-bottom: 0 !important;
} .whp-embedded-form .wpcf7-spinner {
display: none !important;
}
.whp-embedded-form .wpcf7,
.whp-embedded-form .wpcf7-form {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
} .whp-embedded-form .wpcf7-response-output {
margin: 8px 0 0 !important;
padding: 8px 12px !important;
border-radius: 6px !important;
}
.whp-embedded-form .wpcf7-response-output[aria-hidden="true"],
.whp-embedded-form .wpcf7-response-output:empty {
display: none !important;
margin: 0 !important;
padding: 0 !important;
}
.whp-embedded-form label {
display: block !important;
font-size: 13px !important;
font-weight: 600 !important;
color: #374151 !important;
margin-bottom: 0 !important;
font-family: 'Inter', sans-serif !important;
}
.whp-embedded-form input[type="text"],
.whp-embedded-form input[type="email"],
.whp-embedded-form input[type="tel"],
.whp-embedded-form input[type="url"],
.whp-embedded-form input[type="number"],
.whp-embedded-form select,
.whp-embedded-form textarea {
width: 100% !important;
padding: 11px 14px !important;
border: 1.5px solid #e2e8f0 !important;
border-radius: 10px !important;
font-size: 14px !important;
font-family: 'Inter', sans-serif !important;
color: #1e293b !important;
background: #f8fafc !important;
outline: none !important;
box-sizing: border-box !important;
transition: border-color 0.2s, box-shadow 0.2s, background 0.2s !important;
box-shadow: none !important;
}
.whp-embedded-form input[type="text"]:focus,
.whp-embedded-form input[type="email"]:focus,
.whp-embedded-form input[type="tel"]:focus,
.whp-embedded-form input[type="url"]:focus,
.whp-embedded-form input[type="number"]:focus,
.whp-embedded-form select:focus,
.whp-embedded-form textarea:focus {
border-color: #6366f1 !important;
background: #fff !important;
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1) !important;
}
.whp-embedded-form textarea {
height: 80px !important;
min-height: unset !important;
resize: vertical !important;
}
.whp-embedded-form input[type="submit"],
.whp-embedded-form button[type="submit"] {
width: 100% !important;
padding: 12px !important;
background: linear-gradient(135deg, #3858e9, #2563eb) !important;
border: none !important;
border-radius: 8px !important;
color: #fff !important;
font-size: 14px !important;
font-weight: 700 !important;
font-family: 'Inter', sans-serif !important;
letter-spacing: 0.2px !important;
cursor: pointer !important;
margin-top: 4px !important;
transition: opacity 0.2s, transform 0.15s !important;
box-shadow: 0 4px 14px rgba(56, 88, 233, 0.3) !important;
}
.whp-embedded-form input[type="submit"]:hover,
.whp-embedded-form button[type="submit"]:hover {
opacity: 0.92 !important;
transform: translateY(-1px) !important;
} .whp-embedded-form .wpcf7-form-control-wrap {
display: block !important;
}
.whp-embedded-form .wpcf7-not-valid-tip {
font-size: 12px !important;
color: #ef4444 !important;
margin-top: 4px !important;
display: block !important;
}
.whp-embedded-form .wpcf7-response-output {
border-radius: 8px !important;
padding: 10px 14px !important;
font-size: 13px !important;
margin: 10px 0 0 !important;
} .whp-result-msg {
display: none;
margin-top: 14px;
padding: 12px 16px;
border-radius: 10px;
font-size: 14px;
font-weight: 500;
text-align: center;
line-height: 1.55;
}
.whp-result-success {
background: #f0fdf4;
color: #16a34a;
border: 1px solid #bbf7d0;
}
.whp-result-error {
background: #fef2f2;
color: #dc2626;
border: 1px solid #fecaca;
} #whp-popup .wpcf7-response-output,
.whp-embedded-form .wpcf7-response-output {
border-radius: 8px !important;
font-size: 13px !important;
line-height: 1.5 !important;
transition: all 0.2s !important;
min-height: 0 !important;
height: auto !important;
} #whp-popup .wpcf7-response-output[aria-hidden="true"],
.whp-embedded-form .wpcf7-response-output[aria-hidden="true"] {
display: none !important;
padding: 0 !important;
margin: 0 !important;
border: none !important;
} #whp-popup .wpcf7-response-output:empty,
.whp-embedded-form .wpcf7-response-output:empty {
display: none !important;
} #whp-popup .wpcf7-mail-sent-ok,
.whp-embedded-form .wpcf7-mail-sent-ok {
display: block !important;
background: #f0fdf4 !important;
border: 1px solid #bbf7d0 !important;
color: #16a34a !important;
padding: 10px 14px !important;
margin: 10px 0 0 !important;
} #whp-popup .wpcf7-validation-errors,
#whp-popup .wpcf7-mail-sent-ng,
#whp-popup .wpcf7-spam-blocked,
#whp-popup .wpcf7-acceptance-missing,
.whp-embedded-form .wpcf7-validation-errors,
.whp-embedded-form .wpcf7-mail-sent-ng,
.whp-embedded-form .wpcf7-spam-blocked {
display: block !important;
background: #fef2f2 !important;
border: 1px solid #fecaca !important;
color: #dc2626 !important;
padding: 10px 14px !important;
margin: 10px 0 0 !important;
} @media (max-width: 480px) {
#whp-popup .center {
padding: 12px;
}
#whp-popup .modal-box {
padding: 32px 24px 28px;
border-radius: 14px;
}
#whp-popup .modal-box header {
font-size: 20px;
}
}