/* =============================================================
   86Tools – Call Me Back Widget
   Two styles: tab (default) and bubble.
   ============================================================= */

:root {
    --cb-color:      #e8290b;
    --cb-panel-w:    340px;
    --cb-radius:     14px;
    --cb-shadow:     0 8px 40px rgba(0,0,0,.18), 0 2px 8px rgba(0,0,0,.10);
    --cb-z:          9998; /* below WhatsApp so they never clash */
    --cb-tab-w:      44px;
    --cb-tab-ease:   cubic-bezier(.4, 0, .2, 1);
}

/* Ensure hidden attribute works even if theme CSS overrides it */
.cb86 [hidden] { display: none !important; }

/* ── Shared base ────────────────────────────────────────────── */

.cb86 {
    position: fixed;
    z-index: var(--cb-z);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 14px;
    line-height: 1.45;
    box-sizing: border-box;
}

.cb86 *, .cb86 *::before, .cb86 *::after { box-sizing: inherit; }

@media (max-width: 767px) {
    .cb86--hide-mobile { display: none !important; }
}

/* ── Panel (shared) ─────────────────────────────────────────── */

.cb86__panel {
    background: #fff;
    box-shadow: var(--cb-shadow);
    width: var(--cb-panel-w);
    max-width: calc(100vw - 56px);
    overflow: hidden;
    position: absolute;
    transition: opacity .22s var(--cb-tab-ease), transform .22s var(--cb-tab-ease);
}

.cb86__panel-header {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 16px 16px 14px;
    background: var(--cb-color);
    color: #fff;
}

.cb86__header-icon { flex-shrink: 0; margin-top: 2px; opacity: .9; }

.cb86__header-text { flex: 1; min-width: 0; }

.cb86__header-title {
    display: block;
    font-weight: 700;
    font-size: 15px;
    line-height: 1.2;
}

.cb86__header-sub {
    display: block;
    font-size: 12px;
    opacity: .85;
    margin-top: 3px;
    line-height: 1.4;
}

.cb86__close {
    flex-shrink: 0;
    background: none;
    border: none;
    color: #fff;
    font-size: 22px;
    line-height: 1;
    padding: 0 0 0 4px;
    cursor: pointer;
    opacity: .7;
    transition: opacity .15s;
}
.cb86__close:hover { opacity: 1; }

/* ── intl-tel-input overrides ───────────────────────────────── */
.cb86 .iti { width: 100%; }
.cb86 .iti__flag-container { z-index: 10; }
.cb86 .iti__selected-flag  { background: transparent; border-radius: 7px 0 0 7px; }
.cb86 .iti--separate-dial-code input[type=tel] { padding-left: 90px !important; }

/* ── Form ───────────────────────────────────────────────────── */

.cb86__form {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.cb86__field { display: flex; flex-direction: column; gap: 4px; }

.cb86__label {
    font-size: 11px;
    font-weight: 700;
    color: #555;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.cb86__label span[aria-hidden] { color: var(--cb-color); margin-left: 2px; }
.cb86__optional { font-weight: 400; opacity: .6; text-transform: none; letter-spacing: 0; }

.cb86__input,
.cb86__select {
    width: 100%;
    padding: 9px 12px;
    border: 1.5px solid #ddd;
    border-radius: 7px;
    font-size: 14px;
    color: #222;
    background: #fafafa;
    transition: border-color .15s, box-shadow .15s;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
}

.cb86__input:focus,
.cb86__select:focus {
    border-color: var(--cb-color);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--cb-color) 15%, transparent);
    background: #fff;
}

.cb86__select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: calc(100% - 12px) center;
    padding-right: 32px;
    cursor: pointer;
}

.cb86__textarea { resize: vertical; min-height: 68px; }

.cb86__error {
    background: #fff0ee;
    border: 1px solid #ffc4bb;
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 12px;
    color: #c0392b;
}

.cb86__submit {
    width: 100%;
    padding: 11px 16px;
    background: var(--cb-color);
    color: #fff;
    border: none;
    border-radius: 7px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: filter .15s, transform .1s;
}
.cb86__submit:hover:not(:disabled) { filter: brightness(1.1); }
.cb86__submit:active:not(:disabled) { transform: scale(.98); }
.cb86__submit:disabled { opacity: .6; cursor: not-allowed; }

@keyframes cb86-spin { to { transform: rotate(360deg); } }
.cb86-spin { animation: cb86-spin .7s linear infinite; }

/* ── Success ────────────────────────────────────────────────── */

.cb86__success {
    padding: 32px 24px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}
.cb86__success-icon { color: #16a34a; }
.cb86__success-msg  { font-size: 15px; color: #333; font-weight: 500; margin: 0; }


/* =============================================================
   STYLE: TAB
   Slim vertical pill pinned flush to left or right edge.
   Panel slides out horizontally.
   ============================================================= */

.cb86--tab {
    top: 50%;
    transform: translateY(-50%);
}

.cb86--tab-left  { left: 0; }
.cb86--tab-right { right: 0; }

/* Tab trigger ------------------------------------------------- */

.cb86__tab-trigger {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--cb-color);
    color: #fff;
    border: none;
    cursor: pointer;
    padding: 18px 10px;
    width: var(--cb-tab-w);
    border-radius: 0;
    box-shadow: var(--cb-shadow);
    transition: filter .15s, width .15s var(--cb-tab-ease);
    position: relative;
    z-index: 2;
}

.cb86--tab-left  .cb86__tab-trigger { border-radius: 0 10px 10px 0; }
.cb86--tab-right .cb86__tab-trigger { border-radius: 10px 0 0 10px; }

.cb86__tab-trigger:hover { filter: brightness(1.1); }

.cb86__tab-icon { flex-shrink: 0; }

.cb86__tab-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    writing-mode: vertical-rl;
    /* Left tab: text reads bottom-to-top (natural for left edge) */
    transform: rotate(180deg);
    line-height: 1;
    white-space: nowrap;
}

.cb86--tab-right .cb86__tab-label {
    /* Right tab: text reads top-to-bottom */
    transform: none;
}

/* Panel: slides in from the edge ------------------------------ */

.cb86--tab .cb86__panel {
    top: 50%;
    border-radius: var(--cb-radius);
    opacity: 0;
    pointer-events: none;
}

/* Left tab: panel appears to the right of the tab */
.cb86--tab-left .cb86__panel {
    left: calc(var(--cb-tab-w) + 8px);
    transform: translateY(-50%) translateX(-12px);
}

/* Right tab: panel appears to the left of the tab */
.cb86--tab-right .cb86__panel {
    right: calc(var(--cb-tab-w) + 8px);
    left: auto;
    transform: translateY(-50%) translateX(12px);
}

/* Open state */
.cb86--tab.cb86--open .cb86__panel {
    opacity: 1;
    pointer-events: auto;
}

.cb86--tab-left.cb86--open  .cb86__panel { transform: translateY(-50%) translateX(0); }
.cb86--tab-right.cb86--open .cb86__panel { transform: translateY(-50%) translateX(0); }

/* Mobile: tab moves to bottom, panel goes above it */
@media (max-width: 767px) {
    .cb86--tab {
        top: auto;
        bottom: 80px;
        transform: none;
    }

    .cb86--tab-left  { left: 0; }
    .cb86--tab-right { right: 0; }

    .cb86--tab .cb86__tab-trigger {
        width: auto;
        flex-direction: row;
        padding: 12px 14px;
        border-radius: 0 10px 10px 0;
        writing-mode: horizontal-tb;
    }

    .cb86--tab-right .cb86__tab-trigger {
        border-radius: 10px 0 0 10px;
    }

    .cb86__tab-label {
        writing-mode: horizontal-tb;
        transform: none;
        font-size: 12px;
    }

    .cb86--tab .cb86__panel {
        bottom: calc(100% + 8px);
        top: auto;
        left: 0;
        right: auto;
        transform: translateY(8px);
        max-width: calc(100vw - 16px);
    }

    .cb86--tab-right .cb86__panel {
        left: auto;
        right: 0;
        transform: translateY(8px);
    }

    .cb86--tab.cb86--open .cb86__panel {
        transform: translateY(0);
    }
}


/* =============================================================
   STYLE: BUBBLE
   Floating pill button at a corner.
   ============================================================= */

.cb86--bubble {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
}

.cb86--bubble.cb86--bottom-right { bottom: 24px; right: 24px; align-items: flex-end; }
.cb86--bubble.cb86--bottom-left  { bottom: 24px; left: 24px;  align-items: flex-start; }

@media (max-width: 767px) {
    .cb86--bubble.cb86--bottom-right,
    .cb86--bubble.cb86--bottom-left { bottom: 16px; }
    .cb86--bubble.cb86--bottom-right { right: 12px; }
    .cb86--bubble.cb86--bottom-left  { left: 12px; }
}

/* Bubble panel ------------------------------------------------ */

.cb86--bubble .cb86__panel {
    position: relative;
    border-radius: var(--cb-radius);
    opacity: 0;
    transform: translateY(10px) scale(.97);
    pointer-events: none;
    width: var(--cb-panel-w);
    max-width: calc(100vw - 32px);
}

.cb86--bubble.cb86--open .cb86__panel {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

/* Bubble button ----------------------------------------------- */

.cb86__btn {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--cb-color);
    color: #fff;
    border: none;
    border-radius: 50px;
    padding: 13px 20px 13px 16px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: var(--cb-shadow);
    transition: filter .15s, transform .15s;
    white-space: nowrap;
}

.cb86__btn:hover  { filter: brightness(1.1); }
.cb86__btn:active { transform: scale(.96); }

/* Flip chevron when open */
.cb86--bubble.cb86--open .cb86__btn-icon svg {
    transform: scaleY(-1);
    transition: transform .2s;
}