#sbr-floating-btn,
.sbr-floating-btn {
--sbr-floating-size: var(--sdb-floating-action-size, 56px);
--sbr-floating-offset: var(--sdb-floating-action-offset, 24px);
position: fixed;
right: max(20px, env(safe-area-inset-right));
bottom: calc(var(--sbr-floating-offset) + env(safe-area-inset-bottom));
z-index: var(--sdb-floating-action-z-index, 9990);
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--sdb-space-sm, 0.75rem);
min-width: var(--sbr-floating-size);
min-height: var(--sbr-floating-size);
max-width: 220px;
padding: 0 var(--sdb-space-md, 1.25rem);
border: 1px solid var(--sdb-color-outline-variant, var(--sdb-color-border, #eef3f8));
border-radius: var(--sdb-shape-pill, var(--sdb-radius-pill, 999px));
background: var(--sdb-color-surface-lowest, var(--sdb-color-surface, #fff));
color: var(--sdb-color-on-surface-muted, var(--sdb-color-text, #6b7785));
box-shadow: var(--sdb-elevation-2, var(--sdb-shadow-element, 0 10px 24px rgba(31, 42, 54, 0.08)));
font-family: var(--sdb-font-body, inherit);
font-size: var(--sdb-type-label-md-size, 0.875rem);
font-weight: var(--sdb-font-weight-semibold, 600);
line-height: 1;
white-space: nowrap;
cursor: pointer;
transition:
transform var(--sdb-motion-duration-base, 180ms) var(--sdb-motion-easing-standard, ease),
background-color var(--sdb-motion-duration-base, 180ms) var(--sdb-motion-easing-standard, ease),
color var(--sdb-motion-duration-base, 180ms) var(--sdb-motion-easing-standard, ease),
right var(--sdb-motion-duration-base, 180ms) var(--sdb-motion-easing-standard, ease);
box-sizing: border-box;
}
#sbr-floating-btn:hover,
.sbr-floating-btn:hover {
background: var(--sdb-state-hover-bg, rgba(0, 88, 183, 0.06));
color: var(--sdb-color-primary, #0058b7);
transform: translateY(-2px);
}
#sbr-floating-btn:focus-visible,
.sbr-floating-btn:focus-visible {
outline: none;
box-shadow:
var(--sdb-state-focus-ring, 0 0 0 3px rgba(0, 155, 216, 0.22)),
var(--sdb-elevation-2, 0 10px 24px rgba(31, 42, 54, 0.08));
}
#sbr-floating-btn svg,
.sbr-floating-btn svg {
width: 20px;
height: 20px;
flex-shrink: 0;
}
#sbr-floating-btn.sbr-scrolled,
.sbr-floating-btn.sbr-scrolled {
right: max(80px, env(safe-area-inset-right));
width: var(--sbr-floating-size);
height: var(--sbr-floating-size);
padding: 0;
border-radius: 50%;
gap: 0;
}
#sbr-floating-btn.sbr-scrolled .sbr-text,
.sbr-floating-btn.sbr-scrolled .sbr-text {
display: none;
}
.sbr-hidden,
[hidden].sbr-modal-backdrop {
display: none !important;
}
#sbr-modal-overlay,
.sbr-modal-backdrop {
position: fixed;
inset: 0;
z-index: var(--sdb-modal-z-index, 10000);
display: flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 100%;
padding: var(--sdb-space-md, 1.25rem);
background: var(--sdb-modal-backdrop-bg, rgba(17, 24, 39, 0.56));
backdrop-filter: blur(2px);
box-sizing: border-box;
}
#sbr-modal,
.sbr-modal {
--sbr-modal-padding: var(--sdb-modal-padding, clamp(16px, 2.4vw, 24px));
width: min(100%, var(--sdb-modal-width-md, 640px));
max-width: 560px;
max-height: min(90vh, 720px);
overflow: auto;
border-radius: var(--sdb-shape-lg, var(--sdb-radius-lg, 20px));
background: var(--sdb-color-surface-lowest, var(--sdb-color-surface, #fff));
color: var(--sdb-color-on-surface-muted, var(--sdb-color-text, #6b7785));
box-shadow: var(--sdb-elevation-4, var(--sdb-modal-shadow, 0 24px 60px rgba(31, 42, 54, 0.18)));
animation: sbr-modal-in var(--sdb-motion-duration-enter, 180ms) var(--sdb-motion-easing-standard, ease);
}
@keyframes sbr-modal-in {
from {
opacity: 0;
transform: translateY(8px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.sbr-modal-content,
.sdb-modal__content.sbr-modal-content {
display: block;
}
.sbr-header,
.sdb-modal__header.sbr-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--sdb-space-sm, 0.75rem);
padding: var(--sbr-modal-padding) var(--sbr-modal-padding) 0;
border: 0;
background: transparent;
}
.sbr-header--clean,
.sdb-modal__header.sbr-header--clean {
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
.sbr-header h3,
.sdb-modal__title {
margin: 0;
color: var(--sdb-color-on-surface, var(--sdb-color-title, #364048));
font-family: var(--sdb-font-heading, inherit);
font-size: clamp(1.45rem, 2.1vw, 1.9rem);
font-weight: var(--sdb-font-weight-bold, 700);
line-height: 1.2;
}
#sbr-close-btn,
.sbr-close-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
margin: -4px -4px 0 0;
padding: 0;
border: 1px solid var(--sdb-color-outline-variant, var(--sdb-color-border, #eef3f8));
border-radius: var(--sdb-shape-pill, var(--sdb-radius-pill, 999px));
background: var(--sdb-color-surface-lowest, var(--sdb-color-surface, #fff));
color: var(--sdb-color-muted, #8e9aa7);
cursor: pointer;
box-shadow: none;
transition:
background-color var(--sdb-motion-duration-base, 180ms) var(--sdb-motion-easing-standard, ease),
border-color var(--sdb-motion-duration-base, 180ms) var(--sdb-motion-easing-standard, ease),
color var(--sdb-motion-duration-base, 180ms) var(--sdb-motion-easing-standard, ease),
transform var(--sdb-motion-duration-fast, 120ms) var(--sdb-motion-easing-standard, ease);
}
#sbr-close-btn:hover,
.sbr-close-btn:hover {
background: var(--sdb-state-hover-bg, rgba(0, 88, 183, 0.06));
border-color: var(--sdb-color-primary, #0058b7);
color: var(--sdb-color-primary, #0058b7);
}
#sbr-close-btn:focus-visible,
.sbr-close-btn:focus-visible {
outline: none;
box-shadow: var(--sdb-state-focus-ring, 0 0 0 3px rgba(0, 155, 216, 0.22));
}
#sbr-close-btn svg,
.sbr-close-btn svg {
width: 20px;
height: 20px;
}
.sbr-body,
.sdb-modal__body.sbr-body {
padding: calc(var(--sbr-modal-padding) * 0.75) var(--sbr-modal-padding) var(--sbr-modal-padding);
}
.sbr-desc {
margin: 0 0 var(--sdb-space-sm, 0.75rem);
color: var(--sdb-color-on-surface-muted, var(--sdb-color-text, #6b7785));
font-size: var(--sdb-type-body-sm-size, 0.925rem);
line-height: 1.5;
}
#sbr-form,
.sbr-form {
display: grid;
gap: var(--sdb-form-field-gap, 1rem);
}
.sbr-field,
.sdb-field.sbr-field {
display: grid;
gap: 0.45rem;
}
#sbr-form label,
.sbr-form .sdb-field__label {
color: var(--sdb-color-on-surface, var(--sdb-color-title, #364048));
font-size: var(--sdb-type-label-md-size, 0.875rem);
font-weight: var(--sdb-font-weight-semibold, 600);
line-height: 1.35;
}
#sbr-form input[type="url"],
#sbr-form textarea,
.sbr-form .sdb-field__control {
width: 100%;
min-height: 42px;
padding: 10px 12px;
border: 1px solid var(--sdb-comp-field-border, var(--sdb-field-border, var(--sdb-color-outline, #d6e0ea)));
border-radius: var(--sdb-shape-md, var(--sdb-radius-md, 12px));
background: var(--sdb-comp-field-bg, var(--sdb-field-bg, var(--sdb-color-surface-lowest, #fff)));
color: var(--sdb-color-on-surface-muted, var(--sdb-color-text, #6b7785));
font-family: var(--sdb-font-body, inherit);
font-size: var(--sdb-type-body-sm-size, 0.925rem);
line-height: 1.45;
box-sizing: border-box;
}
#sbr-form input[readonly] {
background: var(--sdb-color-surface-low, var(--sdb-color-background, #f5f8fb));
color: var(--sdb-color-muted, #8e9aa7);
}
#sbr-form textarea,
.sbr-form textarea.sdb-field__control {
min-height: 104px;
resize: vertical;
}
#sbr-form input[type="url"]:focus,
#sbr-form textarea:focus,
.sbr-form .sdb-field__control:focus-visible {
border-color: var(--sdb-field-focus-border, var(--sdb-color-primary, #0058b7));
outline: none;
box-shadow: var(--sdb-state-focus-ring, 0 0 0 3px rgba(0, 155, 216, 0.22));
}
.sbr-field-message,
.sdb-field-message.sbr-field-message {
margin: 0;
color: var(--sdb-color-muted, #8e9aa7);
font-size: 0.8125rem;
line-height: 1.45;
}
.sbr-verification,
.sdb-verification-block.sbr-verification {
display: flex;
align-items: center;
justify-content: flex-start;
min-height: 65px;
padding: 4px 0;
overflow-x: auto;
overflow-y: visible;
scrollbar-width: thin;
}
.sbr-verification .cf-turnstile {
min-width: 300px;
max-width: 100%;
}
#sbr-response-msg,
.sbr-status-message {
margin: 0;
padding: 10px 12px;
border-radius: var(--sdb-shape-md, var(--sdb-radius-md, 12px));
font-size: var(--sdb-type-body-sm-size, 0.925rem);
line-height: 1.4;
text-align: center;
}
#sbr-response-msg.sbr-success,
.sbr-status-message.sbr-success {
border: 1px solid var(--sdb-state-success-border, var(--sdb-color-success, #2f8f4e));
background: var(--sdb-sem-color-feedback-success-bg, var(--sdb-color-success-bg, #e9f6ee));
color: var(--sdb-color-success-text, #1e5f34);
}
#sbr-response-msg.sbr-error,
.sbr-status-message.sbr-error {
border: 1px solid var(--sdb-state-error-border, var(--sdb-color-error, #c53030));
background: var(--sdb-sem-color-feedback-error-bg, var(--sdb-color-error-bg, #fdecec));
color: var(--sdb-color-error-text, #7f1d1d);
}
.sbr-actions,
.sdb-modal__actions.sbr-actions {
display: flex;
justify-content: stretch;
}
#sbr-submit-btn,
.sbr-submit-btn {
width: 100%;
min-height: 44px;
padding: 10px 18px;
border: 0;
border-radius: var(--sdb-shape-md, var(--sdb-radius-md, 12px));
background: var(--sdb-sem-color-action-primary-bg, var(--sdb-color-primary, #0058b7));
color: var(--sdb-sem-color-action-primary-text, var(--sdb-color-on-primary, #fff));
font-family: var(--sdb-font-body, inherit);
font-size: var(--sdb-type-body-md-size, 1rem);
font-weight: var(--sdb-font-weight-semibold, 600);
line-height: 1.2;
cursor: pointer;
transition:
background-color var(--sdb-motion-duration-base, 180ms) var(--sdb-motion-easing-standard, ease),
opacity var(--sdb-motion-duration-fast, 120ms) var(--sdb-motion-easing-standard, ease);
}
#sbr-submit-btn:hover,
.sbr-submit-btn:hover {
background: var(--sdb-color-secondary, #009bd8);
}
#sbr-submit-btn:focus-visible,
.sbr-submit-btn:focus-visible {
outline: none;
box-shadow: var(--sdb-state-focus-ring, 0 0 0 3px rgba(0, 155, 216, 0.22));
}
#sbr-submit-btn:disabled,
.sbr-submit-btn:disabled {
opacity: var(--sdb-state-disabled-opacity, 0.56);
cursor: not-allowed;
}
@media (prefers-reduced-motion: reduce) {
#sbr-floating-btn,
.sbr-floating-btn,
#sbr-modal,
.sbr-modal,
#sbr-close-btn,
.sbr-close-btn,
#sbr-submit-btn,
.sbr-submit-btn {
animation: none;
transition: none;
}
}
@media (max-width: 600px) {
#sbr-floating-btn,
.sbr-floating-btn {
right: max(16px, env(safe-area-inset-right)) !important;
bottom: calc(20px + env(safe-area-inset-bottom)) !important;
width: var(--sbr-floating-size) !important;
height: var(--sbr-floating-size) !important;
padding: 0 !important;
border-radius: 50% !important;
gap: 0 !important;
}
#sbr-floating-btn .sbr-text,
.sbr-floating-btn .sbr-text {
display: none !important;
}
#sbr-floating-btn.sbr-scrolled,
.sbr-floating-btn.sbr-scrolled {
right: max(74px, env(safe-area-inset-right)) !important;
}
#sbr-modal-overlay,
.sbr-modal-backdrop {
align-items: flex-end;
padding: 12px;
}
#sbr-modal,
.sbr-modal {
--sbr-modal-padding: 20px;
width: 100%;
max-height: calc(100vh - 24px - env(safe-area-inset-bottom));
}
}
@media (max-width: 380px) {
#sbr-modal,
.sbr-modal {
--sbr-modal-padding: 14px;
}
}