/* ═══════════════════════════════════════════
   Dombelo Contact Widget  v2.0.0
   widget.css
═══════════════════════════════════════════ */

:root {
    --dcw-orange:    #FF6B00;
    --dcw-green:     #25D366;
    --dcw-fab-bg:    #C8603A;
    --dcw-fab:       64px;   /* bigger — matches old Amara size */
    --dcw-icon:      52px;
    --dcw-radius:    999px;
    --dcw-shadow:    0 4px 20px rgba(0,0,0,0.18);
}

/* ── Wrapper ─────────────────────────────── */
.dcw-widget {
    position: fixed;
    right: 20px;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
    pointer-events: none;
    /* bottom is set inline from PHP setting */
}

.dcw-widget.dcw-bottom-left  { right: auto; left: 20px; align-items: flex-start; }
.dcw-widget.dcw-bottom-right { right: 20px; }

/* ── Tray ────────────────────────────────── */
.dcw-tray {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    opacity: 0;
    pointer-events: none;
    transform: translateY(12px) scale(0.95);
    transition: opacity .25s cubic-bezier(.4,0,.2,1),
                transform .25s cubic-bezier(.4,0,.2,1);
}
.dcw-bottom-left .dcw-tray { align-items: flex-start; }
.dcw-tray.dcw-open {
    opacity: 1;
    pointer-events: all;
    transform: translateY(0) scale(1);
}

/* Ensure individual actions are also blocked when tray is closed */
.dcw-tray:not(.dcw-open) .dcw-action {
    pointer-events: none !important;
    visibility: hidden;
}

/* stagger in */
.dcw-tray.dcw-open .dcw-action:nth-child(1) { transition-delay: .00s; }
.dcw-tray.dcw-open .dcw-action:nth-child(2) { transition-delay: .06s; }
/* stagger out */
.dcw-tray:not(.dcw-open) .dcw-action:nth-child(1) { transition-delay: .06s; }
.dcw-tray:not(.dcw-open) .dcw-action:nth-child(2) { transition-delay: .00s; }

/* ── Action row ──────────────────────────── */
.dcw-action {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    pointer-events: all;
}
.dcw-bottom-left .dcw-action { flex-direction: row-reverse; }

.dcw-action-label {
    background: #fff;
    color: #111;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 13px;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: var(--dcw-radius);
    box-shadow: var(--dcw-shadow);
    white-space: nowrap;
    transition: box-shadow .18s, transform .18s;
    pointer-events: none;
}
.dcw-action:hover .dcw-action-label {
    box-shadow: 0 6px 24px rgba(0,0,0,.22);
    transform: translateX(-3px);
}
.dcw-bottom-left .dcw-action:hover .dcw-action-label { transform: translateX(3px); }

.dcw-action-icon {
    width: var(--dcw-icon);
    height: var(--dcw-icon);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    box-shadow: var(--dcw-shadow);
    transition: transform .18s, box-shadow .18s;
    pointer-events: none;
}
.dcw-action:hover .dcw-action-icon { transform: scale(1.1); box-shadow: 0 6px 24px rgba(0,0,0,.22); }
.dcw-action-icon svg { width: 24px; height: 24px; display: block; }

.dcw-action--wa   .dcw-action-icon { background: var(--dcw-green); }
.dcw-action--call .dcw-action-icon { background: var(--dcw-orange); }

/* ── FAB ─────────────────────────────────── */
.dcw-fab {
    pointer-events: all;
    width:  var(--dcw-fab);
    height: var(--dcw-fab);
    border-radius: 50%;
    background: #C8603A !important;
    border: none;
    outline: none;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    position: relative;
    box-shadow: 0 5px 22px rgba(200,96,58,.5);
    transition: transform .22s cubic-bezier(.4,0,.2,1), box-shadow .22s;
    -webkit-tap-highlight-color: transparent;
}
.dcw-fab:hover  { transform: scale(1.08); box-shadow: 0 7px 28px rgba(200,96,58,.65); }
.dcw-fab:active { transform: scale(0.96); }

/* Pulse ring */
.dcw-fab::before {
    content: '';
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    background: rgba(200,96,58,.22);
    animation: dcw-pulse 2.6s ease-out infinite;
    pointer-events: none;
}
.dcw-fab.dcw-open::before { animation: none; opacity: 0; }

@keyframes dcw-pulse {
    0%   { transform: scale(1);    opacity: 1; }
    70%  { transform: scale(1.5);  opacity: 0; }
    100% { transform: scale(1.5);  opacity: 0; }
}

/* Icon swap */
.dcw-fab-icon {
    position: absolute;
    display: flex; align-items: center; justify-content: center;
    transition: opacity .2s, transform .25s cubic-bezier(.4,0,.2,1);
}
.dcw-fab-icon--default { opacity: 1; transform: scale(1)   rotate(0deg);   }
.dcw-fab-icon--close   { opacity: 0; transform: scale(0.4) rotate(-90deg); }
.dcw-fab.dcw-open .dcw-fab-icon--default { opacity: 0; transform: scale(0.4) rotate(90deg); }
.dcw-fab.dcw-open .dcw-fab-icon--close   { opacity: 1; transform: scale(1)   rotate(0deg);  }

/* ── Pop-up nudge — slim text bubble ─────── */
.dcw-popup {
    position: absolute;
    bottom: calc(var(--dcw-fab) + 16px);
    right: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    background: #1a1a1a;
    color: #fff;
    border-radius: 24px;
    padding: 10px 14px 10px 18px;
    white-space: nowrap;
    box-shadow: 0 6px 24px rgba(0,0,0,.22);
    pointer-events: none;

    opacity: 0;
    transform: translateY(8px) scale(0.95);
    transition: opacity .3s cubic-bezier(.4,0,.2,1),
                transform .3s cubic-bezier(.4,0,.2,1);
}
.dcw-popup.dcw-popup-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: all;
}
.dcw-bottom-left .dcw-popup { right: auto; left: 0; }

/* little downward caret */
.dcw-popup-tail {
    position: absolute;
    bottom: -6px;
    right: 26px;
    width: 12px;
    height: 12px;
    background: #1a1a1a;
    transform: rotate(45deg);
    border-radius: 2px;
}
.dcw-bottom-left .dcw-popup-tail { right: auto; left: 26px; }

.dcw-popup-msg {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    color: #fff;
}

.dcw-popup-close {
    background: rgba(255,255,255,.15);
    border: none;
    color: #fff;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 0;
    transition: background .15s;
}
.dcw-popup-close:hover { background: rgba(255,255,255,.28); }

/* ── Mobile ──────────────────────────────── */
@media (max-width: 480px) {
    .dcw-widget { right: 14px; }
    .dcw-widget.dcw-bottom-left { right: auto; left: 14px; }
    .dcw-popup { width: 210px; }
}