:root {  --quick-call-button-color: #61ce70;
--quick-call-button-shadow: #aaa;
--quick-call-button-inset: #57b964;
--quick-call-button-glow: rgba(87, 185, 100, 0.25); --quick-call-close-button: #353D63; --quick-call-tab-bg: transparent;
--quick-call-tab-text: #666;
--quick-call-tab-border: #e0e0e0;
--quick-call-tab-hover: transparent; --quick-call-form-text: #000;
--quick-call-form-border: var(--quick-call-primary-color);
} .phone-btn {
position: fixed;
bottom: 70px;
right: 30px;
width: 70px;
height: 70px;
display: flex;
justify-content: center;
align-items: center;
z-index: 3;
border-radius: 50%;
border: 0;
box-shadow: 0 0.125em 0.5em var(--quick-call-button-shadow), inset 0 0 0 3em var(--quick-call-button-inset), 0 0 0 0 var(--quick-call-button-glow);
background-color: var(--quick-call-button-color);
animation: scaleUp 2s infinite, borderScale 2s infinite;
outline: 0;
}
.phone-btn:focus {
outline: 0;
background-color: var(--quick-call-button-color);
}
.phone-btn > svg {
width: 32px;
height: 32px;
fill: #fff;
animation: shake 2s cubic-bezier(0.43, 0, 0.6, 0.4) infinite;
} .quick-call-tooltip {
position: fixed;
right: 20px;
bottom: 160px;
max-width: 160px;
background: #ffffff;
color: #000000;
border-radius: 14px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
padding: 12px 16px 12px 16px;
z-index: 4;
}
.quick-call-tooltip::after {
content: '';
position: absolute;
right: 40px;
bottom: -5px;
width: 16px;
height: 16px;
background: #ffffff;
transform: rotate(45deg);
box-shadow: 3px 3px 10px rgba(0,0,0,0.05);
}
.quick-call-tooltip-text {
font-size: 12px;
line-height: 1.35;
}
.quick-call-tooltip-actions {
margin-top: 8px;
text-align: center;
}
.quick-call-tooltip-yes {
font-size: 12px;
line-height: 1.1;
padding: 8px 14px;
border: none;
border-radius: 6px;
background: var(--quick-call-primary-color);
color: #ffffff;
cursor: pointer;
&:hover {
background: var(--quick-call-primary-color);
}
}
.quick-call-tooltip-close {
position: absolute;
top: -6px;
right: -6px;
width: 18px;
height: 18px;
display: inline-flex;
align-items: center; 
justify-content: center;
background: #fff;
border: none;
color: var(--quick-call-close-button);
font-size: 18px;
line-height: 1;
cursor: pointer;
padding: 0;
border-radius: 50%;
box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.05);
}
@media(hover:hover) {
.phone-btn:hover {
background-color: var(--quick-call-button-color);
}
} .quick-call-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1000000;
display: none;
}
.quick-call-modal-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
}
.quick-call-modal-content {
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 550px;
width: 90%;
max-height: 90vh;
min-height: 300px;
overflow-y: hidden;
background: #fff;
border-radius: 26px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
padding: 25px 40px;
transition: transform 300ms ease-out;
@media (max-width: 575px) {
width: 98%;
padding: 25px 24px 40px;
}
} .quick-call-modal-content.slide-up {
transform: translate(-50%, -50%) translateY(200px);
}
.quick-call-modal-content.slide-down {
transform: translate(-50%, -50%) translateY(200px);
}
.quick-call-modal-content.slide-in {
transform: translate(-50%, -50%) translateY(0);
}
.quick-call-modal-close {
position: absolute;
top: 13px;
right: 13px;
background: none;
border: none;
font-size: 24px;
line-height: 1;
color: var(--quick-call-close-button);
cursor: pointer;
z-index: 10;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
padding: 0;
background-color: transparent;
box-shadow: none;
&::before {
content: '';
width: 24px;
height: 24px;
border-radius: 50%;
position: absolute;
top: -1px;
background-color: var(--quick-call-button-color);
opacity: 0;
transition: opacity 0.3s ease;
z-index: -1;
}
}
.quick-call-modal-close:hover,
.quick-call-modal-close:focus {
color: var(--quick-call-submit-text);
background: transparent;
&::before {
opacity: 1;
}
} .quick-call-form-wrapper {
border-radius: 26px;
padding: 0 40px;  width: 100%;
height: fit-content;
justify-content: center;
.wpcf7-form {
.wpcf7-response-output {
display: none;
border-radius: 0;
font-size: 12px;
margin: 1rem 0 0;
text-align: center;
}
&.invalid {
.wpcf7-response-output {
color: #721c24;
background-color: #f8d7da;
border-color: #f5c6cb;
}
}
}
@media (max-width: 575px) {
padding: 0 16px;
}
p {
font-size: 11px;
line-height: 1.25;
color: rgb(149, 152, 154);
text-align: center;
margin: 12px auto 0;
.quick-call-count {
color: var(--quick-call-form-text);
font-weight: bold;
}
}
}
.quick-call-form-title-wrapper {
padding: 16px 0;
h3 {
font-weight: 600;
text-align: center;
font-size: 18px;
color: var(--quick-call-form-text);
line-height: 1.25;
margin-top: 0;
margin-bottom: 0;
}
@media (max-width: 575px) {
padding: 16px 0;
h3 {
font-size: 1rem;
}
}
} body.quick-call-modal-open {
overflow: hidden;
} .quick-call-tabs {
display: flex;
margin-bottom: 0;
background: transparent;
border-radius: 0 !important;
overflow: hidden;
@media (max-width: 575px) {
flex-wrap: nowrap;
}
}
.quick-call-tab {
flex: 1;
padding: 8px 10px;
background: var(--quick-call-tab-bg);
border: none;
cursor: pointer;
font-size: 11px;
line-height: 1.1;
color: var(--quick-call-tab-text);
text-align: center;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
text-overflow: ellipsis;
border-radius: 0 !important;
border-right: 1px solid var(--quick-call-tab-border);
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
gap: 4px;
box-shadow: none;
&:last-child {
border-right: none;
}
& > span {
font-size: 16px;
}
svg {
height: 24px;
}
@media (max-width: 575px) {
font-size: 9px;
}
}
.quick-call-tab:hover {
background: var(--quick-call-tab-hover);
color: var(--quick-call-tab-text-active);
box-shadow: none;
}
.quick-call-tab.active {
background: var(--quick-call-tab-bg);
color: var(--quick-call-tab-text-active);
border-bottom: none;
box-shadow: none;
} .quick-call-tab-content {
position: relative;
}
.quick-call-form-inner-wrapper  {
display: grid;
grid-template-columns: 1fr 150px;
gap: 8px;
width: 100%;
.quick-call-form-row-wrapper {
width: 100%;
.wpcf7-form-control-wrap {
width: 100%;
display: flex;
.bootstrap-select {
width: 100%;
button.btn {
box-shadow: unset;
border: 1px solid var(--quick-call-tab-border);
min-height: 46px;
display: flex;
align-items: center;
box-shadow: unset;
.filter-option {
font-size: 13px;
vertical-align: middle;
line-height: 1;
height: auto !important;
padding: 0 8px;
}
}
&.open div.dropdown-menu {
overflow-y: auto !important;
height: 155px !important;
li > a {
line-height: 1.1 !important;
}
}
}
}
input,
textarea,
select {
width: 100%;
border-radius: 0 !important;
font-size: 13px;
line-height: 1;
border: 1px solid var(--quick-call-tab-border);
&:focus {
border-color: var(--quick-call-form-border);
}
}
input {
min-height: 46px;
&.wpcf7-not-valid {
border-color: #ff0000;
}
}
textarea {
height: 88px;
resize: none;
&.wpcf7-not-valid {
border-color: #ff0000;
}
}
.wpcf7-submit  {
font-size: 13px;
text-wrap-mode: wrap;
line-height: 1.15;
border-radius: unset;
border: 0;
background: var(--quick-call-primary-color) !important;
color: var(--quick-call-submit-text) !important;
}    
}
.quick-call-form-button-wrapper {
position: relative;
.wpcf7-spinner {
position: absolute;
margin: 0;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}
.wpcf7-not-valid-tip {
display: none !important;
}
&.form-later {
grid-template-columns: 1fr 1fr;
.quick-call-form-row-wrapper {
input,
select {
min-height: 46px;
}
}
}
&.form-message {
grid-template-columns: 1fr 1fr;
.quick-call-form-row-wrapper {
input {
min-height: 40px;
}
}
.quick-call-form-col-wrapper {
display: flex;
flex-direction: column;
gap: 8px;
}
}
@media (max-width: 575px) {
padding: 0;
grid-template-columns: 1fr;
max-width: 375px;
width: 100%;
margin: 0 auto;
&.form-message {
grid-template-columns: 1fr;
.quick-call-form-row-wrapper {
textarea {
height: 60px;
}
}
}
}
}
.quick-call-adminstrative-info-wrapper {
margin-top: 24px;
p {
font-size: 9.5px;
line-height: 1.25;
color: rgb(149, 152, 154);
text-align: center;
padding: 0 10px;
margin: 0;
}
} .quick-call-countdown {
display: none;
padding: 24px 0 8px;
text-align: center;
}
.quick-call-countdown-svg {
width: 96px;
height: 96px;
margin: 0 auto 12px;
position: relative;
}
.quick-call-countdown-svg svg {
display: block;
}
.quick-call-countdown-svg .ring-bg {
fill: none;
stroke: rgba(0,0,0,0.15);
stroke-width: 10;
}
.quick-call-countdown-svg .ring-progress {
fill: none;
stroke: var(--quick-call-button-color);
stroke-width: 10;
stroke-linecap: round;
transform: rotate(-90deg);
transform-origin: 50% 50%;
}
.quick-call-countdown-svg .ring-number {
fill: var(--quick-call-form-text);
font-size: 28px;
font-weight: 700;
dominant-baseline: middle;
} .quick-call-checkmark {
position: absolute !important;
top: 50% !important;
left: 50% !important;
z-index: 10 !important;
display: none !important;
transform: translate(calc(-50% + 4px), calc(-50% - 7px)) rotate(45deg) !important;
height: 48px !important;
width: 24px !important;
border-bottom: 5px solid #ffffff !important;
border-right: 5px solid #ffffff !important;
transition: all .2s ease-in-out !important;
}
.quick-call-checkmark.is-visible {
display: inline-block !important;
}
.quick-call-countdown-text {
margin: 0;
font-size: 14px;
color: #000;
}
.quick-call-custom-message {
display: none;
padding: 16px 0 8px;
text-align: center;
color: #000;
}
@keyframes borderScale {
0% {
box-shadow: 0 0.125em 0.5em var(--quick-call-button-shadow), inset 0 0 0 3em var(--quick-call-button-inset), 0 0 0 0 var(--quick-call-button-glow);
}
50% {
box-shadow: 0 0.125em 0.5em var(--quick-call-button-shadow), inset 0 0 0 0.5em var(--quick-call-button-inset), 0 0 0 0 var(--quick-call-button-glow);
}
100% {
box-shadow: 0 0.125em 0.5em var(--quick-call-button-shadow), inset 0 0 0 3em var(--quick-call-button-inset), 0 0 0 3em rgba(87, 185, 100, 0);
}
}
@keyframes scaleUp {
0% {
transform: scale(1);
}
50% {
transform: scale(1.125);
}
60% {
transform: scale(1);
}
}
@keyframes shake {
0% {
transform: translate(0, 0);
}
1.25% {
transform: translate(-2.5%, 0);
}
2.5% {
transform: translate(0, 0);
}
3.75% {
transform: translate(2.5%, 0);
}
5% {
transform: translate(0, 0);
}
6.25% {
transform: translate(-5%, 0);
}
7.5% {
transform: translate(0, 0);
}
8.75% {
transform: translate(5%, 0);
}
10% {
transform: translate(0, 0);
}
11.25% {
transform: translate(-5%, 0);
}
12.5% {
transform: translate(0, 0);
}
13.75% {
transform: translate(5%, 0);
}
15% {
transform: translate(0, 0);
}
16.25% {
transform: translate(-7.5%, 0);
}
17.5% {
transform: translate(0, 0);
}
18.75% {
transform: translate(7.5%, 0);
}
20% {
transform: translate(0, 0);
}
21.25% {
transform: translate(-7.5%, 0);
}
22.5% {
transform: translate(0, 0);
}
23.75% {
transform: translate(7.5%, 0);
}
25% {
transform: translate(0, 0);
}
26.25% {
transform: translate(-7.5%, 0);
}
27.5% {
transform: translate(0, 0);
}
28.75% {
transform: translate(7.5%, 0);
}
30% {
transform: translate(0, 0);
}
31.25% {
transform: translate(-7.5%, 0);
}
32.5% {
transform: translate(0, 0);
}
33.75% {
transform: translate(7.5%, 0);
}
35% {
transform: translate(0, 0);
}
36.25% {
transform: translate(-7.5%, 0);
}
37.5% {
transform: translate(0, 0);
}
38.75% {
transform: translate(7.5%, 0);
}
40% {
transform: translate(0, 0);
}
41.25% {
transform: translate(-7.5%, 0);
}
42.5% {
transform: translate(0, 0);
}
43.75% {
transform: translate(7.5%, 0);
}
45% {
transform: translate(0, 0);
}
46.25% {
transform: translate(-7.5%, 0);
}
47.5% {
transform: translate(0, 0);
}
48.75% {
transform: translate(7.5%, 0);
}
50% {
transform: translate(0, 0);
}
}