/*
 * OVJ Contact Buttons – Stylesheet
 * All colours and sizes are CSS custom properties so a child-theme or
 * site-level CSS block can override them in one place.
 *
 * Sections:
 *   1. CSS Custom Properties (design tokens)
 *   2. Left WhatsApp Button
 *   3. Right Widget wrapper
 *   4. FAB (floating action button)
 *   5. Shared popup shell
 *   6. Menu popup
 *   7. Callback popup
 *   8. Responsive (mobile)
 */

/* ── 1. Design tokens ────────────────────────────────────────────────────── */
:root {
    --ovj-color-primary:     #1a8a45;
    --ovj-color-primary-dk:  #136b35;
    --ovj-color-teal:        #3bbea0;
    --ovj-color-phone-green: #25d366;
    --ovj-color-white:       #ffffff;
    --ovj-color-text:        #222222;
    --ovj-color-text-muted:  #bbbbbb;
    --ovj-color-divider:     #f0f0f0;
    --ovj-color-error:       #c0392b;
    --ovj-color-bg-hover:    #f7f7f7;

    --ovj-fab-size:          64px;
    --ovj-left-btn-size:     76px;
    --ovj-popup-width:       280px;
    --ovj-radius-pill:       50%;
    --ovj-radius-popup:      16px;
    --ovj-radius-input:      8px;

    --ovj-shadow-fab:        0 4px 16px rgba(0, 0, 0, 0.22);
    --ovj-shadow-fab-hover:  0 6px 22px rgba(0, 0, 0, 0.30);
    --ovj-shadow-popup:      0 8px 32px rgba(0, 0, 0, 0.14);

    --ovj-z-index:           9999;
    --ovj-bottom-offset:     30px;
    --ovj-side-offset:       20px;

    --ovj-font:              -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --ovj-transition-speed:  0.2s;
}

/* ── Icon sizing – SVGs have no hard-coded width/height; CSS rules here    ── */
/* ── ensure they fill their container correctly in every context.          ── */

/* Generic reset: let the icon fill the space given by its parent */
.ovj-icon {
    display: block;
    width:  100%;
    height: 100%;
}

/* Left button: fixed pixel size */
#ovj-left-wa-btn .ovj-icon {
    width:  28px;
    height: 28px;
    flex-shrink: 0;
}

/* FAB: scale to ~60% of the button */
.ovj-fab-icon .ovj-icon {
    width:  28px;
    height: 28px;
}

/* Callback close button */
.ovj-cb-close .ovj-icon {
    width:  14px;
    height: 14px;
}

/* Menu option icons – fill the 46×46 circle container */
.ovj-option-icon .ovj-icon {
    width:  22px;
    height: 22px;
}

/* ── 2. Left WhatsApp Button ─────────────────────────────────────────────── */
#ovj-left-wa-btn {
    position: fixed;
    left: var(--ovj-side-offset);
    bottom: var(--ovj-bottom-offset);
    z-index: var(--ovj-z-index);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;

    width:  var(--ovj-left-btn-size);
    height: var(--ovj-left-btn-size);
    padding: 8px 4px 10px;

    background: var(--ovj-color-primary);
    color: var(--ovj-color-white);
    border-radius: var(--ovj-radius-pill);
    text-decoration: none;
    box-shadow: var(--ovj-shadow-fab);

    font-family: var(--ovj-font);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.02em;
    text-align: center;

    transition:
        transform var(--ovj-transition-speed) ease,
        box-shadow var(--ovj-transition-speed) ease;
}

#ovj-left-wa-btn svg { flex-shrink: 0; }

#ovj-left-wa-btn:hover,
#ovj-left-wa-btn:focus-visible {
    transform: scale(1.07);
    box-shadow: var(--ovj-shadow-fab-hover);
    color: var(--ovj-color-white);
    text-decoration: none;
    outline: none;
}

.ovj-btn-label { display: block; }

/* ── 3. Right Widget wrapper ─────────────────────────────────────────────── */
#ovj-right-widget {
    position: fixed;
    right: var(--ovj-side-offset);
    bottom: var(--ovj-bottom-offset);
    z-index: var(--ovj-z-index);

    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;

    font-family: var(--ovj-font);
}

/* ── 4. FAB ──────────────────────────────────────────────────────────────── */
.ovj-fab {
    position: relative;
    width:  var(--ovj-fab-size);
    height: var(--ovj-fab-size);
    border-radius: var(--ovj-radius-pill);
    background: var(--ovj-color-primary);
    color: var(--ovj-color-white);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--ovj-shadow-fab);
    flex-shrink: 0;

    transition:
        transform var(--ovj-transition-speed) ease,
        box-shadow var(--ovj-transition-speed) ease;
}

.ovj-fab:hover,
.ovj-fab:focus-visible {
    transform: scale(1.07);
    box-shadow: var(--ovj-shadow-fab-hover);
    outline: none;
}

/* Icon swap via opacity + scale */
.ovj-fab-icon {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    transition:
        opacity var(--ovj-transition-speed) ease,
        transform var(--ovj-transition-speed) ease;
}

.ovj-fab-icon--wa    { opacity: 1; transform: scale(1);   }
.ovj-fab-icon--close { opacity: 0; transform: scale(0.6); }

/* Open states */
.ovj-fab.is-open .ovj-fab-icon--wa,
.ovj-fab.is-callback .ovj-fab-icon--wa {
    opacity: 0;
    transform: scale(0.6);
}
.ovj-fab.is-open .ovj-fab-icon--close,
.ovj-fab.is-callback .ovj-fab-icon--close {
    opacity: 1;
    transform: scale(1);
}

/* ── 5. Shared popup shell ───────────────────────────────────────────────── */
.ovj-popup {
    background: var(--ovj-color-white);
    border-radius: var(--ovj-radius-popup);
    box-shadow: var(--ovj-shadow-popup);
    padding: 18px 20px;
    width: var(--ovj-popup-width);
    position: relative;
    animation: ovj-slide-up 0.22s ease;
    transform-origin: bottom right;
}

.ovj-popup[hidden] { display: none !important; }

@keyframes ovj-slide-up {
    from { opacity: 0; transform: translateY(12px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0)    scale(1);    }
}

/* Speech-bubble tail */
.ovj-popup::after {
    content: '';
    position: absolute;
    bottom: -10px;
    right: 22px;
    border-left:  10px solid transparent;
    border-right: 10px solid transparent;
    border-top:   11px solid var(--ovj-color-white);
    filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.06));
}

/* ── 6. Menu popup ───────────────────────────────────────────────────────── */
.ovj-popup-option {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    padding: 10px 4px;
    background: none;
    border: none;
    cursor: pointer;
    border-radius: 10px;
    text-align: left;
    transition: background var(--ovj-transition-speed);
}

.ovj-popup-option + .ovj-popup-option {
    border-top: 1px solid var(--ovj-color-divider);
}

.ovj-popup-option:hover,
.ovj-popup-option:focus-visible {
    background: var(--ovj-color-bg-hover);
    outline: none;
}

/* Circular icon wrapper */
.ovj-option-icon {
    width: 46px;
    height: 46px;
    border-radius: var(--ovj-radius-pill);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ovj-color-white);
    flex-shrink: 0;
}

.ovj-option-icon--teal  { background: var(--ovj-color-teal); }
.ovj-option-icon--green { background: var(--ovj-color-phone-green); }

.ovj-option-label {
    font-size: 16px;
    font-weight: 500;
    color: var(--ovj-color-text);
}

/* ── 7. Callback popup ───────────────────────────────────────────────────── */

/* Close × button */
.ovj-cb-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 28px;
    height: 28px;
    border-radius: var(--ovj-radius-pill);
    background: var(--ovj-color-primary);
    color: var(--ovj-color-white);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background var(--ovj-transition-speed);
}
.ovj-cb-close:hover { background: var(--ovj-color-primary-dk); }
.ovj-cb-close svg   { display: block; }

/* Heading */
.ovj-cb-heading {
    margin: 0 32px 14px 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--ovj-color-primary);
    text-align: center;
    line-height: 1.5;
}

/* Phone input */
.ovj-cb-input {
    display: block;
    width: 100%;
    padding: 11px 14px;
    border: 1.5px solid #d8d8d8;
    border-radius: var(--ovj-radius-input);
    font-family: var(--ovj-font);
    font-size: 14px;
    color: var(--ovj-color-text);
    box-sizing: border-box;
    margin-bottom: 10px;
    outline: none;
    transition: border-color var(--ovj-transition-speed);
}
.ovj-cb-input:focus        { border-color: var(--ovj-color-primary); }
.ovj-cb-input::placeholder { color: var(--ovj-color-text-muted); }

/* Status message */
.ovj-cb-message {
    font-size: 13px;
    text-align: center;
    color: var(--ovj-color-primary);
    font-weight: 500;
    margin: 0 0 8px;
    padding: 4px 0;
}
.ovj-cb-message[hidden] { display: none; }
.ovj-cb-message--error  { color: var(--ovj-color-error); }

/* Submit button */
.ovj-cb-submit {
    display: block;
    width: 100%;
    padding: 13px;
    background: var(--ovj-color-primary);
    color: var(--ovj-color-white);
    font-family: var(--ovj-font);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    border: none;
    border-radius: var(--ovj-radius-input);
    cursor: pointer;
    transition: background var(--ovj-transition-speed);
}
.ovj-cb-submit:hover               { background: var(--ovj-color-primary-dk); }
.ovj-cb-submit:disabled            { opacity: 0.65; cursor: not-allowed; }

/* ── 8. Mobile ───────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
    :root {
        --ovj-left-btn-size:  60px;
        --ovj-fab-size:       54px;
        --ovj-side-offset:    12px;
        --ovj-bottom-offset:  18px;
    }

    #ovj-left-wa-btn { font-size: 10px; }

    .ovj-popup {
        width: calc(100vw - 32px);
        max-width: 300px;
    }
}