.terminfix-mailto-is-open {
overflow: hidden;
}
.terminfix-mailto-overlay {
align-items: center;
background: rgba(20, 24, 28, 0.58);
box-sizing: border-box;
display: none;
inset: 0;
justify-content: center;
padding: 18px;
position: fixed;
z-index: 999999;
}
.terminfix-mailto-overlay.is-open {
display: flex;
}
html[data-terminfix-embed="iframe"][data-terminfix-viewport-synced="true"] .terminfix-mailto-overlay {
bottom: auto;
height: var(--terminfix-visible-height, 100vh);
inset: auto 0 auto 0;
min-height: 320px;
position: absolute;
top: var(--terminfix-visible-top, 0);
}
.terminfix-mailto-panel {
background: #ffffff;
border: 1px solid rgba(23, 31, 38, 0.1);
border-radius: 8px;
box-shadow: 0 24px 80px rgba(12, 18, 24, 0.28);
box-sizing: border-box;
color: #1f2933;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
max-height: min(92vh, 760px);
max-width: 560px;
overflow-y: auto;
padding: 22px;
width: min(100%, 560px);
}
.terminfix-mailto-header {
align-items: center;
display: flex;
gap: 16px;
justify-content: space-between;
margin-bottom: 18px;
}
.terminfix-mailto-title {
color: #1f2933;
font-size: 22px;
font-weight: 700;
line-height: 1.2;
margin: 0;
}
.terminfix-mailto-icon-button {
align-items: center;
appearance: none;
background: #f3f5f7;
border: 1px solid #e2e7eb;
border-radius: 8px;
color: #51606d;
cursor: pointer;
display: inline-flex;
font-size: 24px;
height: 38px;
justify-content: center;
line-height: 1;
padding: 0;
width: 38px;
}
.terminfix-mailto-icon-button:hover,
.terminfix-mailto-icon-button:focus-visible {
background: #e8edf1;
color: #1f2933;
}
.terminfix-mailto-form {
display: grid;
gap: 14px;
}
.terminfix-mailto-field {
display: grid;
gap: 6px;
margin: 0;
}
.terminfix-mailto-label {
color: #51606d;
font-size: 13px;
font-weight: 700;
}
.terminfix-mailto-input {
appearance: none;
background: #ffffff;
border: 1px solid #cfd8df;
border-radius: 8px;
box-sizing: border-box;
color: #1f2933;
font: inherit;
line-height: 1.45;
min-height: 44px;
padding: 10px 12px;
width: 100%;
}
textarea.terminfix-mailto-input {
min-height: 150px;
resize: vertical;
}
.terminfix-mailto-input:focus {
border-color: #637d2b;
box-shadow: 0 0 0 3px rgba(99, 125, 43, 0.16);
outline: none;
}
.terminfix-mailto-honeypot {
height: 1px;
left: -9999px;
overflow: hidden;
position: absolute;
top: auto;
width: 1px;
}
.terminfix-mailto-status {
border-radius: 8px;
box-sizing: border-box;
color: #51606d;
display: none;
font-size: 14px;
line-height: 1.4;
padding: 10px 12px;
}
.terminfix-mailto-status.is-success,
.terminfix-mailto-status.is-error {
display: block;
}
.terminfix-mailto-status.is-success {
background: #edf7ed;
color: #236326;
}
.terminfix-mailto-status.is-error {
background: #fff0f0;
color: #a12222;
}
.terminfix-mailto-actions {
display: flex;
gap: 10px;
justify-content: flex-end;
margin-top: 4px;
}
.terminfix-mailto-button {
appearance: none;
border: 1px solid transparent;
border-radius: 8px;
cursor: pointer;
font: inherit;
font-weight: 700;
min-height: 44px;
padding: 10px 16px;
}
.terminfix-mailto-button:disabled {
cursor: wait;
opacity: 0.7;
}
.terminfix-mailto-button-primary {
background: #637d2b;
color: #ffffff;
}
.terminfix-mailto-button-primary:hover,
.terminfix-mailto-button-primary:focus-visible {
background: #526923;
}
.terminfix-mailto-button-secondary {
background: #ffffff;
border-color: #cfd8df;
color: #354250;
}
.terminfix-mailto-button-secondary:hover,
.terminfix-mailto-button-secondary:focus-visible {
background: #f3f5f7;
}
@media (max-width: 520px) {
.terminfix-mailto-panel {
padding: 18px;
}
.terminfix-mailto-actions {
display: grid;
}
.terminfix-mailto-button {
width: 100%;
}
}