/* ============================================
   Call Button Pro — Front-end Styles
   ============================================ */

/* ---- Wrapper ---- */
#cbp-wrapper {
    position: fixed;
    z-index: 99999;
    transition: opacity .4s ease, transform .4s ease;
}

/* ---- Positions ---- */
#cbp-wrapper.cbp-pos-bottom-right  { bottom: 24px; right: 24px; }
#cbp-wrapper.cbp-pos-bottom-left   { bottom: 24px; left: 24px;  }
#cbp-wrapper.cbp-pos-bottom-center { bottom: 24px; left: 50%; transform: translateX(-50%); }
#cbp-wrapper.cbp-pos-top-right     { top: 24px; right: 24px; }
#cbp-wrapper.cbp-pos-top-left      { top: 24px; left: 24px; }

/* ---- Sticky scroll (hidden by default) ---- */
#cbp-wrapper.cbp-sticky         { opacity: 0; pointer-events: none; }
#cbp-wrapper.cbp-sticky.cbp-visible { opacity: 1; pointer-events: all; }

/* ---- Button base ---- */
.cbp-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--cbp-bg, #25D366);
    color: var(--cbp-color, #fff);
    text-decoration: none;
    cursor: pointer;
    border: none;
    outline: none;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-weight: 600;
    white-space: nowrap;
    transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.cbp-btn:hover { filter: brightness(1.1); transform: scale(1.05); color: var(--cbp-color, #fff); }

/* ---- Sizes ---- */
.cbp-size-small  .cbp-btn { font-size: 13px; padding: 10px 16px; }
.cbp-size-medium .cbp-btn { font-size: 15px; padding: 14px 20px; }
.cbp-size-large  .cbp-btn { font-size: 17px; padding: 18px 26px; }

.cbp-size-small  .cbp-icon { width: 18px; height: 18px; }
.cbp-size-medium .cbp-icon { width: 22px; height: 22px; }
.cbp-size-large  .cbp-icon { width: 26px; height: 26px; }

/* ---- Styles ---- */
.cbp-style-circle .cbp-btn {
    border-radius: 50px;
}
.cbp-style-pill .cbp-btn {
    border-radius: 999px;
}
.cbp-style-square .cbp-btn {
    border-radius: 8px;
}
.cbp-style-icon-only .cbp-btn {
    border-radius: 50%;
    padding: 0;
    width: 56px;
    height: 56px;
    justify-content: center;
}
.cbp-size-small .cbp-style-icon-only  .cbp-btn,
.cbp-style-icon-only.cbp-size-small   .cbp-btn { width: 44px; height: 44px; }
.cbp-size-large .cbp-style-icon-only  .cbp-btn,
.cbp-style-icon-only.cbp-size-large   .cbp-btn { width: 68px; height: 68px; }

/* ---- Shadow ---- */
.cbp-shadow { box-shadow: 0 6px 24px rgba(0,0,0,.28), 0 2px 8px rgba(0,0,0,.18); }

/* ---- Animations ---- */
@keyframes cbp-pulse {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--cbp-bg) 60%, transparent); }
    60%       { box-shadow: 0 0 0 14px transparent; }
}
@keyframes cbp-bounce {
    0%, 100% { transform: translateY(0) scale(1); }
    50%       { transform: translateY(-8px) scale(1.05); }
}
@keyframes cbp-shake {
    0%, 100% { transform: rotate(0deg); }
    20%       { transform: rotate(-8deg); }
    40%       { transform: rotate(8deg); }
    60%       { transform: rotate(-5deg); }
    80%       { transform: rotate(5deg); }
}
@keyframes cbp-ring {
    0%, 100% { transform: rotate(0deg) scale(1); }
    10%       { transform: rotate(-10deg) scale(1.05); }
    20%       { transform: rotate(10deg) scale(1.05); }
    30%       { transform: rotate(-8deg); }
    40%       { transform: rotate(8deg); }
    50%       { transform: rotate(0deg); }
}

.cbp-anim-pulse  { animation: cbp-pulse 2s ease-in-out infinite; }
.cbp-anim-bounce { animation: cbp-bounce 1.8s ease-in-out infinite; }
.cbp-anim-shake  { animation: cbp-shake 2s ease-in-out infinite; }
.cbp-anim-ring   { animation: cbp-ring  2.5s ease-in-out infinite; }
.cbp-anim-none   { animation: none; }

/* ---- Entry animations ---- */
@keyframes cbp-entry-slide { from { transform: translateY(60px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes cbp-entry-fade  { from { opacity: 0; } to { opacity: 1; } }
@keyframes cbp-entry-zoom  { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.cbp-entry-slide-up .cbp-btn { animation: cbp-entry-slide .5s cubic-bezier(.22,.9,.45,1) both; }
.cbp-entry-fade-in  .cbp-btn { animation: cbp-entry-fade  .5s ease both; }
.cbp-entry-zoom-in  .cbp-btn { animation: cbp-entry-zoom  .4s cubic-bezier(.34,1.56,.64,1) both; }

/* ---- Tooltip ---- */
.cbp-tooltip {
    position: absolute;
    bottom: calc(100% + 10px);
    right: 0;
    background: rgba(0,0,0,.78);
    color: #fff;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 12px;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity .2s, transform .2s;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.cbp-tooltip::after {
    content: '';
    position: absolute;
    top: 100%; right: 18px;
    border: 5px solid transparent;
    border-top-color: rgba(0,0,0,.78);
}
#cbp-wrapper:hover .cbp-tooltip { opacity: 1; transform: translateY(0); }

/* ---- Badge ---- */
.cbp-badge {
    position: absolute;
    top: -6px; right: -6px;
    background: var(--cbp-badge, #e74c3c);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 20px;
    font-family: -apple-system, sans-serif;
    line-height: 1.4;
    box-shadow: 0 2px 6px rgba(0,0,0,.25);
    pointer-events: none;
}

/* ---- Offline message ---- */
.cbp-offline-msg {
    background: #555;
    color: #fff;
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 6px;
    margin-top: 6px;
    text-align: center;
    font-family: -apple-system, sans-serif;
}

/* ---- Inline shortcode button ---- */
.cbp-inline-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 10px 18px;
    border-radius: 50px;
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    transition: filter .2s, transform .2s;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.cbp-inline-btn:hover { filter: brightness(1.1); transform: scale(1.03); }
.cbp-inline-btn .cbp-icon { width: 18px; height: 18px; }

/* ---- Icon ---- */
.cbp-icon { flex-shrink: 0; }
.cbp-custom-icon { width: 22px; height: 22px; object-fit: contain; }