/* Contact Bubble — contact-bubble.css */

.cb-bubble {
    position: fixed;
    bottom: 32px;
    right: 32px;
    z-index: 99999;

    width: 100px;
    height: 100px;
    border-radius: 50px;
    background: var(--cb-color, #b5975a);

    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    cursor: pointer;

    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.22);

    transition:
        width  0.4s cubic-bezier(0.4, 0, 0.2, 1),
        height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        border-radius 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Expanded state ─────────────────────────────── */
.cb-bubble.is-open {
    width: 290px;
    height: 250px;
    border-radius: 24px;
    cursor: default;
}

/* ── Collapsed label ────────────────────────────── */
.cb-collapsed {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    pointer-events: none;
    text-align: center;
    opacity: 1;
    transition: opacity 0.15s ease;
    white-space: nowrap;
}

.cb-bubble.is-open .cb-collapsed {
    opacity: 0;
}

.cb-icons {
    display: flex;
    gap: 6px;
    margin-bottom: 3px;
}

.cb-icons svg {
    width: 15px;
    height: 15px;
    fill: #fff;
    display: block;
}

.cb-label {
    font-size: 11.5px;
    font-weight: 600;
    color: #fff;
    line-height: 1.2;
}

.cb-sublabel {
    font-size: 9.5px;
    color: rgba(255, 255, 255, 0.8);
}

/* ── Expanded panel ─────────────────────────────── */
.cb-expanded {
    position: absolute;
    inset: 0;
    padding: 18px 18px 14px;
    display: flex;
    flex-direction: column;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease 0.22s;
}

.cb-bubble.is-open .cb-expanded {
    opacity: 1;
    pointer-events: all;
}

.cb-expanded__header {
    margin-bottom: 6px;
}

.cb-expanded__header strong {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
}

.cb-expanded__header span {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.75);
}

.cb-expanded p {
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.92);
    line-height: 1.5;
    margin: 8px 0 12px;
    flex: 1;
}

/* ── Buttons ────────────────────────────────────── */
.cb-btns {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.cb-btn {
    display: block;
    text-align: center;
    padding: 9px 12px;
    border-radius: 10px;
    font-size: 12.5px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    line-height: 1.2;
    box-sizing: border-box;
    border-style: solid;
    border-width: 1px;
    transition:
        background-color 0.18s ease,
        color            0.18s ease,
        border-color     0.18s ease;
}

.cb-btn:hover {
    text-decoration: none;
}

/* Button 1 — colours driven entirely by CSS custom properties */
.cb-btn--1 {
    background-color: var(--cb-btn1-bg,     #25D366);
    border-color:     var(--cb-btn1-border, #25D366);
    color:            var(--cb-btn1-text,   #ffffff);
}

.cb-btn--1:hover {
    background-color: var(--cb-btn1-hover-bg,   #1da851);
    border-color:     var(--cb-btn1-hover-bg,   #1da851);
    color:            var(--cb-btn1-hover-text, #ffffff);
}

/* Button 2 */
.cb-btn--2 {
    background-color: var(--cb-btn2-bg,     transparent);
    border-color:     var(--cb-btn2-border, #ffffff);
    color:            var(--cb-btn2-text,   #ffffff);
}

.cb-btn--2:hover {
    background-color: var(--cb-btn2-hover-bg,     #ffffff);
    border-color:     var(--cb-btn2-hover-border, #ffffff);
    color:            var(--cb-btn2-hover-text,   #333333);
}

/* ── Close button ───────────────────────────────── */
.cb-close {
    position: absolute;
    top: 10px;
    right: 11px;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.65);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    padding: 2px 4px;
    /* Hidden by default — no delay on fade-out so it disappears
       immediately when the bubble starts closing */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    /* Closing: instant visibility, quick opacity, no delay */
    transition: opacity 0.1s ease, visibility 0s linear, color 0.15s ease;
}

.cb-bubble.is-open .cb-close {
    opacity: 1;
    visibility: visible;
    pointer-events: all;
    /* Opening: fade in after the shape has expanded (0.3s delay) */
    transition: opacity 0.18s ease 0.3s, visibility 0s linear 0.3s, color 0.15s ease;
}

.cb-close:hover {
    color: #fff;
}

button#cbClose:focus {
    position: absolute;
}

/* ── Reduced motion ─────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .cb-bubble,
    .cb-collapsed,
    .cb-expanded,
    .cb-close,
    .cb-btn {
        transition: none;
    }
}

@media (max-width:600px) {
    .cb-bubble {
        display: none;
    }
}