.f4y-ks-widget {
position: fixed;
bottom: 20px;
z-index: 999999;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.f4y-ks-widget.f4y-ks-pos-right { right: 20px; }
.f4y-ks-widget.f4y-ks-pos-left  { left: 20px; } .f4y-ks-toggle {
width: 60px;
height: 60px;
border-radius: 50%;
background: var(--f4y-ks-primary, #25D366);
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
transition: transform 0.3s ease, box-shadow 0.3s ease;
position: absolute;
bottom: 0;
}
.f4y-ks-widget.f4y-ks-pos-right .f4y-ks-toggle { right: 0; }
.f4y-ks-widget.f4y-ks-pos-left  .f4y-ks-toggle { left: 0; }
.f4y-ks-toggle:hover {
transform: scale(1.08);
box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
}
.f4y-ks-toggle svg {
width: 28px;
height: 28px;
transition: opacity 0.2s ease, transform 0.2s ease;
}
.f4y-ks-icon-close {
position: absolute;
opacity: 0;
transform: rotate(-90deg);
}
.f4y-ks-widget.open .f4y-ks-icon-chat {
opacity: 0;
transform: rotate(90deg);
}
.f4y-ks-widget.open .f4y-ks-icon-close {
opacity: 1;
transform: rotate(0);
} .f4y-ks-window {
position: absolute;
bottom: 75px;
width: 370px;
max-height: 520px;
background: #fff;
border-radius: 16px;
box-shadow: 0 8px 40px rgba(0, 0, 0, 0.15);
overflow: hidden;
opacity: 0;
transform: translateY(20px) scale(0.95);
pointer-events: none;
transition: opacity 0.3s ease, transform 0.3s ease;
display: flex;
flex-direction: column;
}
.f4y-ks-widget.f4y-ks-pos-right .f4y-ks-window { right: 0; }
.f4y-ks-widget.f4y-ks-pos-left  .f4y-ks-window { left: 0; }
.f4y-ks-widget.open .f4y-ks-window {
opacity: 1;
transform: translateY(0) scale(1);
pointer-events: all;
} .f4y-ks-header {
background: var(--f4y-ks-primary, #25D366);
color: #fff;
padding: 18px 20px;
display: flex;
align-items: center;
justify-content: space-between;
}
.f4y-ks-header-text {
display: flex;
flex-direction: column;
gap: 2px;
}
.f4y-ks-header-text strong {
font-size: 16px;
font-weight: 600;
}
.f4y-ks-header-text span {
font-size: 13px;
opacity: 0.9;
}
.f4y-ks-close-btn {
background: none;
border: none;
color: #fff;
cursor: pointer;
padding: 4px;
opacity: 0.8;
transition: opacity 0.2s;
}
.f4y-ks-close-btn:hover {
opacity: 1;
}
.f4y-ks-close-btn svg {
width: 20px;
height: 20px;
} .f4y-ks-tabs {
display: flex;
border-bottom: 1px solid #e8e8e8;
background: #fafafa;
}
.f4y-ks-tab {
flex: 1;
padding: 12px 8px;
border: none;
background: none;
cursor: pointer;
font-size: 13px;
font-weight: 500;
color: #888;
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
transition: color 0.2s, border-color 0.2s;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
}
.f4y-ks-tab:hover {
color: #555;
}
.f4y-ks-tab.active {
color: var(--f4y-ks-primary, #25D366);
border-bottom-color: var(--f4y-ks-primary, #25D366);
}
.f4y-ks-tab svg {
width: 18px;
height: 18px;
flex-shrink: 0;
} .f4y-ks-content {
flex: 1;
overflow-y: auto;
max-height: 360px;
}
.f4y-ks-panel {
display: none;
}
.f4y-ks-panel.active {
display: block;
}
.f4y-ks-panel-inner {
padding: 20px;
} .f4y-ks-message-bubble {
background: #f0f2f5;
border-radius: 12px 12px 12px 4px;
padding: 14px 16px;
margin-bottom: 20px;
font-size: 14px;
line-height: 1.5;
color: #333;
}
.f4y-ks-message-bubble p {
margin: 0;
} .f4y-ks-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
width: 100%;
padding: 14px 20px;
border-radius: 12px;
font-size: 15px;
font-weight: 600;
text-decoration: none;
transition: transform 0.2s, box-shadow 0.2s;
cursor: pointer;
border: none;
}
.f4y-ks-btn:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.f4y-ks-btn svg {
flex-shrink: 0;
}
.f4y-ks-btn-whatsapp {
background: #25D366;
color: #fff;
}
.f4y-ks-btn-whatsapp:hover {
color: #fff;
}
.f4y-ks-btn-telegram {
background: #0088cc;
color: #fff;
}
.f4y-ks-btn-telegram:hover {
color: #fff;
}
.f4y-ks-btn-mailto {
background: var(--f4y-ks-primary, #25D366);
color: #fff;
}
.f4y-ks-btn-mailto:hover {
color: #fff;
} .f4y-ks-panel-form {
padding: 16px;
}
.f4y-ks-panel-form .wpcf7 {
margin: 0;
}
.f4y-ks-panel-form .wpcf7-form p {
margin: 0 0 12px;
}
.f4y-ks-panel-form .wpcf7-form label {
font-size: 13px;
font-weight: 500;
color: #555;
margin-bottom: 4px;
display: block;
}
.f4y-ks-panel-form input[type="text"],
.f4y-ks-panel-form input[type="email"],
.f4y-ks-panel-form input[type="tel"],
.f4y-ks-panel-form textarea,
.f4y-ks-panel-form select {
width: 100%;
padding: 10px 12px;
border: 1px solid #ddd;
border-radius: 8px;
font-size: 14px;
transition: border-color 0.2s;
box-sizing: border-box;
}
.f4y-ks-panel-form input:focus,
.f4y-ks-panel-form textarea:focus,
.f4y-ks-panel-form select:focus {
border-color: var(--f4y-ks-primary, #25D366);
outline: none;
}
.f4y-ks-panel-form textarea {
min-height: 80px;
resize: vertical;
}
.f4y-ks-panel-form input[type="submit"],
.f4y-ks-panel-form .wpcf7-submit {
width: 100%;
padding: 12px;
background: var(--f4y-ks-primary, #25D366);
color: #fff;
border: none;
border-radius: 8px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: opacity 0.2s;
}
.f4y-ks-panel-form input[type="submit"]:hover,
.f4y-ks-panel-form .wpcf7-submit:hover {
opacity: 0.9;
} @media (max-width: 480px) {
.f4y-ks-window {
width: calc(100vw - 24px);
bottom: 70px;
max-height: 70vh;
}
.f4y-ks-widget.f4y-ks-pos-right .f4y-ks-window { right: -8px; left: auto; }
.f4y-ks-widget.f4y-ks-pos-left  .f4y-ks-window { left: -8px; right: auto; }
.f4y-ks-widget {
bottom: 12px;
}
.f4y-ks-widget.f4y-ks-pos-right { right: 12px; left: auto; }
.f4y-ks-widget.f4y-ks-pos-left  { left: 12px; right: auto; }
.f4y-ks-toggle {
width: 54px;
height: 54px;
}
} @keyframes f4y-pulse {
0% { box-shadow: 0 4px 16px rgba(0,0,0,0.2), 0 0 0 0 rgba(37,211,102,0.4); }
70% { box-shadow: 0 4px 16px rgba(0,0,0,0.2), 0 0 0 12px rgba(37,211,102,0); }
100% { box-shadow: 0 4px 16px rgba(0,0,0,0.2), 0 0 0 0 rgba(37,211,102,0); }
}
.f4y-ks-toggle:not(.f4y-ks-widget.open .f4y-ks-toggle) {
animation: f4y-pulse 2s ease-in-out infinite;
}
.f4y-ks-widget.open .f4y-ks-toggle {
animation: none;
} .f4y-ks-bubble {
position: absolute;
bottom: 70px;
background: #fff;
padding: 12px 36px 12px 16px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
font-size: 14px;
line-height: 1.4;
color: #333;
cursor: pointer;
opacity: 0;
transform: translateY(10px) scale(0.95);
transition: opacity 0.3s ease, transform 0.3s ease;
width: max-content;
max-width: 260px;
}
.f4y-ks-widget.f4y-ks-pos-right .f4y-ks-bubble {
right: 0;
border-radius: 12px 12px 4px 12px;
}
.f4y-ks-widget.f4y-ks-pos-left .f4y-ks-bubble {
left: 0;
border-radius: 12px 12px 12px 4px;
padding: 12px 16px 12px 36px;
}
.f4y-ks-bubble.visible {
opacity: 1;
transform: translateY(0) scale(1);
}
.f4y-ks-bubble::after {
content: '';
position: absolute;
bottom: -6px;
width: 12px;
height: 12px;
background: #fff;
transform: rotate(45deg);
box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.05);
}
.f4y-ks-widget.f4y-ks-pos-right .f4y-ks-bubble::after { right: 24px; }
.f4y-ks-widget.f4y-ks-pos-left  .f4y-ks-bubble::after { left: 24px; }
.f4y-ks-bubble-close {
position: absolute;
top: 4px;
background: none;
border: none;
font-size: 18px;
color: #999;
cursor: pointer;
padding: 2px 4px;
line-height: 1;
}
.f4y-ks-widget.f4y-ks-pos-right .f4y-ks-bubble-close { right: 8px; }
.f4y-ks-widget.f4y-ks-pos-left  .f4y-ks-bubble-close { left: 8px; }
.f4y-ks-bubble-close:hover {
color: #555;
}
.f4y-ks-widget.open .f4y-ks-bubble {
display: none !important;
}
@keyframes f4y-bubble-bounce {
0%, 100% { transform: translateY(0) scale(1); }
50% { transform: translateY(-4px) scale(1.02); }
}
.f4y-ks-bubble.visible {
animation: f4y-bubble-bounce 2s ease-in-out 1s 2;
}
@media (max-width: 480px) {
.f4y-ks-bubble {
bottom: 64px;
max-width: 240px;
font-size: 13px;
}
.f4y-ks-widget.f4y-ks-pos-right .f4y-ks-bubble { right: 0; left: auto; }
.f4y-ks-widget.f4y-ks-pos-left  .f4y-ks-bubble { left: 0; right: auto; }
}