/**
 * Contact Button — front-end styles.
 *
 * All classes are scoped under `.cb-` to avoid theme clashes.
 * Dynamic values (color, size, position, z-index, menu direction) are
 * injected inline by PHP via wp_add_inline_style().
 * CSS custom properties --cb-color and --cb-rgb are set on .cb-btn so
 * that animation effects use the user's chosen button color.
 */

/* ------------------------------------------------------------------ *
 * Wrapper + corner positioning
 * ------------------------------------------------------------------ */
.cb-wrap {
    position: fixed;
    z-index: 99999;
}

/* ------------------------------------------------------------------ *
 * Button
 * ------------------------------------------------------------------ */
.cb-btn,
button.cb-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: none !important;
    border-radius: 50%; /* default; overridden by shape classes below */
    cursor: pointer;
    padding: 0 !important;
    color: #fff !important;
    background: #0d4223 !important;
    /* Drop shadow straight down. */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3) !important;
    transition: transform 0.18s ease;
    -webkit-tap-highlight-color: transparent;
    outline: none;
    position: relative;
}

/* Shape classes — override border-radius. */
.cb-btn.cb-shape-circle  { border-radius: 50%; }
.cb-btn.cb-shape-square  { border-radius: 0; }
.cb-btn.cb-shape-rounded { border-radius: 14px; }

.cb-btn:hover,
.cb-btn:focus {
    transform: scale(1.06);
}

/* Prevent browser's default gray :active background. */
.cb-btn:active,
button.cb-btn:active {
    background: #0d4223 !important;
}

.cb-btn:focus-visible {
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.6), 0 4px 10px rgba(0, 0, 0, 0.3) !important;
}

/* ------------------------------------------------------------------ *
 * Button icons — main icon + close (X) icon swap
 * ------------------------------------------------------------------ */
.cb-icon {
    width: 65%;
    height: 65%;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    position: absolute;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.cb-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

.cb-icon-close {
    display: none;
    opacity: 0;
    transform: rotate(90deg) scale(0.5);
}

/* When menu is open, swap icons — both rotate the same way. */
.cb-wrap.is-open .cb-icon-main {
    opacity: 0;
    transform: rotate(90deg) scale(0.5);
}

.cb-wrap.is-open .cb-icon-close {
    display: flex;
    opacity: 1;
    transform: rotate(90deg) scale(1);
}

/* Sizes are driven by inline width/height set by PHP. */

/* ------------------------------------------------------------------ *
 * Menu
 * ------------------------------------------------------------------ */
.cb-menu {
    position: absolute;
    min-width: 240px;
    margin: 0;
    padding: 10px;
    list-style: none;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.22);
    box-sizing: border-box;
    z-index: 100000;
}

.cb-menu[hidden] {
    display: none !important;
}

.cb-menu-title {
    font-size: 13px;
    font-weight: 600;
    color: #666;
    padding: 8px 12px 10px;
    border-bottom: 1px solid #eee;
    margin-bottom: 6px;
    text-align: center;
}

/* ------------------------------------------------------------------ *
 * Menu items
 * ------------------------------------------------------------------ */
.cb-item {
    margin: 0;
}

.cb-item + .cb-item {
    margin-top: 2px;
}

.cb-link {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: #222;
    padding: 12px 14px;
    border-radius: 10px;
    transition: background 0.15s ease, color 0.15s ease;
}

.cb-link:hover,
.cb-link:focus {
    background: #f1f5f9;
    color: #1e88e5;
    outline: none;
}

/* Type icon on the left. */
.cb-link-icon {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1e88e5;
}

.cb-link-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* Text container. */
.cb-link-text {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.cb-label {
    font-size: 12px;
    color: #999;
    line-height: 1.3;
    margin-bottom: 2px;
}

.cb-number {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.3;
    direction: ltr;            /* Phone numbers always LTR. */
    unicode-bidi: embed;
}

/* Type-specific icon colors. */
.cb-type-whatsapp .cb-link-icon { color: #25d366; }
.cb-type-whatsapp .cb-link:hover,
.cb-type-whatsapp .cb-link:focus { color: #25d366; }

.cb-type-sms .cb-link-icon { color: #4caf50; }
.cb-type-sms .cb-link:hover,
.cb-type-sms .cb-link:focus { color: #4caf50; }

.cb-type-email .cb-link-icon { color: #ea4335; }
.cb-type-email .cb-link:hover,
.cb-type-email .cb-link:focus { color: #ea4335; }

/* ------------------------------------------------------------------ *
 * Menu open/close animations — slide only (direction-specific).
 *
 * The opening animation is applied via the menu-anim class.
 * The closing animation is applied via .is-closing on the menu, which
 * JS adds before hiding it. Both use the same keyframes but reversed.
 * ------------------------------------------------------------------ */
.cb-menu-dir-up.cb-menu-anim-slide    { animation: cb-slide-up-in 0.22s ease both; }
.cb-menu-dir-down.cb-menu-anim-slide  { animation: cb-slide-down-in 0.22s ease both; }
.cb-menu-dir-left.cb-menu-anim-slide  { animation: cb-slide-left-in 0.22s ease both; }
.cb-menu-dir-right.cb-menu-anim-slide { animation: cb-slide-right-in 0.22s ease both; }

/* Closing (outro) animations — reversed slide. */
.cb-menu.is-closing.cb-menu-dir-up.cb-menu-anim-slide    { animation: cb-slide-up-out 0.22s ease both; }
.cb-menu.is-closing.cb-menu-dir-down.cb-menu-anim-slide  { animation: cb-slide-down-out 0.22s ease both; }
.cb-menu.is-closing.cb-menu-dir-left.cb-menu-anim-slide  { animation: cb-slide-left-out 0.22s ease both; }
.cb-menu.is-closing.cb-menu-dir-right.cb-menu-anim-slide { animation: cb-slide-right-out 0.22s ease both; }

@keyframes cb-slide-up-in    { from { opacity: 0; transform: translateY(8px); }  to { opacity: 1; transform: translateY(0); } }
@keyframes cb-slide-up-out   { from { opacity: 1; transform: translateY(0); }    to { opacity: 0; transform: translateY(8px); } }

@keyframes cb-slide-down-in  { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes cb-slide-down-out { from { opacity: 1; transform: translateY(0); }    to { opacity: 0; transform: translateY(-8px); } }

@keyframes cb-slide-left-in  { from { opacity: 0; transform: translateX(8px); }  to { opacity: 1; transform: translateX(0); } }
@keyframes cb-slide-left-out { from { opacity: 1; transform: translateX(0); }    to { opacity: 0; transform: translateX(8px); } }

@keyframes cb-slide-right-in  { from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: translateX(0); } }
@keyframes cb-slide-right-out { from { opacity: 1; transform: translateX(0); }    to { opacity: 0; transform: translateX(-8px); } }

/* ------------------------------------------------------------------ *
 * Button attention effects
 *
 * All effects are periodic: the animation cycle runs for its duration,
 * then pauses for 3 seconds before repeating. This is achieved by
 * setting the total animation-duration to (effect_duration + 3s) and
 * keeping the keyframe at 100% in the resting state.
 *
 * These use var(--cb-rgb) which is set inline by PHP to the user's
 * chosen button color as "r, g, b", so the effect always matches.
 * ------------------------------------------------------------------ */

/* Water-drop ripple — glow spreads outward like a ripple, then pauses.
 * The button itself stays still; a colored ripple emanates outward.
 * Uses cubic-bezier for a smooth, natural water-drop spread. */
.cb-effect-ripple {
    position: relative;
}

.cb-effect-ripple::before,
.cb-effect-ripple::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 2px solid rgba(var(--cb-rgb, 13,66,35), 0.5);
    opacity: 0;
    pointer-events: none;
    /* 2s ripple + 3s pause = 5s total. */
    animation: cb-ripple 5s cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
}

.cb-effect-ripple::after {
    /* Second ripple, delayed by 0.8s for a layered water-drop feel. */
    animation-delay: 0.8s;
}

@keyframes cb-ripple {
    0%   { transform: scale(1);    opacity: 0.55; }
    3%   { opacity: 0.55; }
    35%  { transform: scale(2.2);  opacity: 0;    }
    100% { transform: scale(2.2);  opacity: 0;    }
}

/* Pulse glow — soft expanding halo, then 3s pause. */
.cb-effect-pulse-glow {
    animation: cb-pulse-glow 5s ease-in-out infinite !important;
}

@keyframes cb-pulse-glow {
    0%   { box-shadow: 0 4px 10px rgba(0,0,0,0.3), 0 0 0 0 rgba(var(--cb-rgb, 13,66,35), 0.55); }
    20%  { box-shadow: 0 4px 10px rgba(0,0,0,0.3), 0 0 0 16px rgba(var(--cb-rgb, 13,66,35), 0); }
    40%  { box-shadow: 0 4px 10px rgba(0,0,0,0.3), 0 0 0 0 rgba(var(--cb-rgb, 13,66,35), 0); }
    100% { box-shadow: 0 4px 10px rgba(0,0,0,0.3), 0 0 0 0 rgba(var(--cb-rgb, 13,66,35), 0); }
}

/* Vibrate / shake — quick shake, then 3s pause. */
.cb-effect-vibrate {
    animation: cb-vibrate 3.5s ease-in-out infinite;
}

@keyframes cb-vibrate {
    0%   { transform: translateX(0); }
    3%   { transform: translateX(-2px) rotate(-2deg); }
    6%   { transform: translateX(2px) rotate(2deg); }
    9%   { transform: translateX(-2px) rotate(-1deg); }
    12%  { transform: translateX(2px) rotate(1deg); }
    15%  { transform: translateX(0); }
    100% { transform: translateX(0); }
}

/* Bounce — single bounce, then 3s pause. */
.cb-effect-bounce {
    animation: cb-bounce 4.6s ease-in-out infinite;
}

@keyframes cb-bounce {
    0%   { transform: translateY(0); }
    8%   { transform: translateY(-8px); }
    16%  { transform: translateY(0); }
    100% { transform: translateY(0); }
}

/* Pulse + ring — expanding ring + slight scale, then 3s pause. */
.cb-effect-pulse-ring {
    position: relative;
    animation: cb-pulse-ring-scale 5s ease-in-out infinite;
}

.cb-effect-pulse-ring::before,
.cb-effect-pulse-ring::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 2px solid rgba(var(--cb-rgb, 13,66,35), 0.6);
    opacity: 0;
    animation: cb-ring 5s ease-out infinite;
    pointer-events: none;
}

.cb-effect-pulse-ring::after {
    animation-delay: 0.5s;
}

@keyframes cb-ring {
    0%   { transform: scale(1);   opacity: 0.6; }
    40%  { transform: scale(1.8); opacity: 0;   }
    100% { transform: scale(1.8); opacity: 0;   }
}

@keyframes cb-pulse-ring-scale {
    0%   { transform: scale(1); }
    20%  { transform: scale(1.04); }
    40%  { transform: scale(1); }
    100% { transform: scale(1); }
}

/* ------------------------------------------------------------------ *
 * RTL adjustments
 * ------------------------------------------------------------------ */
html[dir="rtl"] .cb-menu {
    text-align: right;
}

html[dir="rtl"] .cb-link {
    flex-direction: row-reverse;
    text-align: right;
}

/* ------------------------------------------------------------------ *
 * Reduced motion — respect user preference.
 * ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    .cb-effect-ripple,
    .cb-effect-ripple::before,
    .cb-effect-ripple::after,
    .cb-effect-pulse-glow,
    .cb-effect-vibrate,
    .cb-effect-bounce,
    .cb-effect-pulse-ring,
    .cb-effect-pulse-ring::before,
    .cb-effect-pulse-ring::after,
    .cb-menu,
    .cb-icon {
        animation: none !important;
        transition: none !important;
    }
}

/* ------------------------------------------------------------------ *
 * Small screens
 * ------------------------------------------------------------------ */
@media (max-width: 600px) {
    .cb-menu {
        min-width: 200px;
    }
}