.yoo-phone {
position: fixed;
z-index: 99990;
display: flex;
align-items: flex-end;
gap: 0;
margin: 0;
padding: 0;
font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
box-sizing: border-box;
}
.yoo-phone *,
.yoo-phone *::before,
.yoo-phone *::after {
box-sizing: border-box;
}
.yoo-phone--bottom-right {
right: 16px;
bottom: 16px;
flex-direction: row;
}
.yoo-phone--bottom-left {
left: 16px;
bottom: 16px;
flex-direction: row-reverse;
}
.yoo-phone--top-right {
right: 16px;
top: 16px;
flex-direction: row;
align-items: flex-start;
}
.yoo-phone--top-left {
left: 16px;
top: 16px;
flex-direction: row-reverse;
align-items: flex-start;
}
.yoo-phone__wrapper {
position: relative;
display: inline-flex;
align-items: center;
gap: 8px;
flex-wrap: nowrap;
}
.yoo-phone__link {
text-decoration: none;
color: inherit;
display: inline-block;
max-width: min(90vw, 420px);
transition: none;
}
.yoo-phone__number {
display: inline-block;
text-align: center;
font-size: clamp(16px, 3.5vw, 21px);
font-weight: 400;
line-height: 1.2;
padding: 14px 22px;
cursor: pointer;
color: var(--yoo-phone-color, #fff);
background-color: var(--yoo-phone-bg, #fdb92a);
border: var(--yoo-phone-border-w, 3px) solid var(--yoo-phone-border, #fff);
border-radius: 50px;
text-transform: uppercase;
letter-spacing: 0.02em;
transition: transform 0.45s ease, filter 0.45s ease;
will-change: transform;
}
.yoo-phone--hover-none .yoo-phone__number {
transition: none;
}
.yoo-phone--hover-scale .yoo-phone__number:hover {
transform: scale(1.07);
}
.yoo-phone--hover-darken .yoo-phone__number:hover {
filter: brightness(0.88);
}
.yoo-phone--hover-scale_darken .yoo-phone__number:hover {
transform: scale(1.07);
filter: brightness(0.88);
}
.yoo-phone__toggle {
appearance: none;
border: 0;
margin: 0;
padding: 8px;
border-radius: 50px;
cursor: pointer;
background-color: var(--yoo-phone-toggle-bg, #e6eaf2);
color: var(--yoo-phone-toggle-color, #000);
line-height: 0;
display: inline-flex;
align-items: center;
justify-content: center;
transition: none;
}
.yoo-phone__toggle:hover {
filter: brightness(0.95);
}
.yoo-phone__toggle:focus-visible {
outline: 2px solid var(--yoo-phone-toggle-color, #000);
outline-offset: 2px;
}
.yoo-phone__toggle-icon {
display: flex;
align-items: center;
justify-content: center;
} .yoo-phone--collapsed .yoo-phone__link {
max-width: 0;
margin: 0;
padding: 0;
opacity: 0;
overflow: hidden;
pointer-events: none;
transition: none;
}
.yoo-phone--collapsed .yoo-phone__number {
padding: 0;
border-width: 0;
transition: none;
} .yoo-phone__dismiss {
position: absolute;
left: -6px;
right: auto;
top: 50%;
transform: translateY(-50%);
width: 18px;
height: 18px;
border: 1px solid #dde2ea;
border-radius: 50%;
padding: 0;
line-height: 1;
font-size: 11px;
font-weight: 600;
cursor: pointer;
background: #f4f6fa;
color: #5a6478;
display: flex;
align-items: center;
justify-content: center;
z-index: 3;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.yoo-phone__dismiss:hover {
background: #eef1f6;
color: #2c3340;
}
@media (min-width: 782px) {
.yoo-phone--bottom-right {
right: 24px;
bottom: 24px;
}
.yoo-phone--bottom-left {
left: 24px;
bottom: 24px;
}
.yoo-phone--top-right {
right: 24px;
top: 24px;
}
.yoo-phone--top-left {
left: 24px;
top: 24px;
}
}