/**
 * WooForm 2.2 — floating WhatsApp + back-to-top cluster.
 * Logical properties: "end" is the right edge in LTR and the left in RTL.
 */

.codwo-fab {
    --codwo-fab-size: 56px;
    --codwo-fab-gap: 12px;
    --codwo-fab-edge: 16px;
    position: fixed;
    inset-block-end: calc(var(--codwo-fab-edge) + var(--codwo-fab-lift, 0px) + env(safe-area-inset-bottom, 0px));
    z-index: 9989;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--codwo-fab-gap);
    pointer-events: none;
    opacity: 0;
    transform: translateY(16px) scale(0.92);
    transition: opacity 0.25s ease, transform 0.25s ease, inset-block-end 0.25s ease;
}

.codwo-fab--end { inset-inline-end: var(--codwo-fab-edge); align-items: flex-end; }
.codwo-fab--start { inset-inline-start: var(--codwo-fab-edge); align-items: flex-start; }

.codwo-fab[hidden] { display: none; }

.codwo-fab.is-in {
    opacity: 1;
    transform: none;
}

/* Steps aside while the shopper types in the order form or the keyboard is open. */
.codwo-fab.is-in.is-away {
    opacity: 0;
    transform: translateY(24px) scale(0.9);
}

.codwo-fab.is-in:not(.is-away) > * {
    pointer-events: auto;
}

.codwo-fab [hidden] { display: none !important; }

/* ---------- WhatsApp ---------- */

.codwo-fab__wa {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--codwo-fab-size);
    height: var(--codwo-fab-size);
    border-radius: 50%;
    background: #25d366;
    color: #fff;
    text-decoration: none;
    box-shadow: 0 10px 24px -8px rgba(18, 140, 126, 0.65), 0 2px 6px rgba(0, 0, 0, 0.12);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.codwo-fab__wa:hover,
.codwo-fab__wa:focus-visible {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 14px 28px -8px rgba(18, 140, 126, 0.75), 0 2px 6px rgba(0, 0, 0, 0.12);
}

.codwo-fab__wa:focus-visible,
.codwo-fab__top:focus-visible,
.codwo-fab__bubble-close:focus-visible {
    outline: 3px solid #111827;
    outline-offset: 3px;
}

.codwo-fab__wa svg {
    width: 30px;
    height: 30px;
}

/* Gentle attention ring, a few times only. */
.codwo-fab__wa::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid #25d366;
    opacity: 0;
    animation: codwo-fab-ring 2.4s ease-out 3s 3;
    pointer-events: none;
}

@keyframes codwo-fab-ring {
    0% { transform: scale(1); opacity: 0.7; }
    100% { transform: scale(1.6); opacity: 0; }
}

.codwo-fab__dot {
    position: absolute;
    inset-block-start: 3px;
    inset-inline-end: 3px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid #fff;
    background: #9ca3af;
}

.codwo-fab.is-open .codwo-fab__dot { background: #22c55e; }
.codwo-fab.is-closed .codwo-fab__dot { background: #f59e0b; }

/* Label beside the button on wide screens, hidden on phones (the dot says it). */
.codwo-fab__label {
    position: absolute;
    inset-inline-end: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%);
    padding: 6px 12px;
    border-radius: 999px;
    background: #fff;
    color: #111827;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
    white-space: nowrap;
    box-shadow: 0 6px 18px -6px rgba(16, 24, 40, 0.35);
    opacity: 0;
    transition: opacity 0.15s ease;
    pointer-events: none;
}

.codwo-fab--start .codwo-fab__label {
    inset-inline-end: auto;
    inset-inline-start: calc(100% + 10px);
}

@media (hover: hover) and (min-width: 768px) {
    .codwo-fab__wa:hover .codwo-fab__label,
    .codwo-fab__wa:focus-visible .codwo-fab__label {
        opacity: 1;
    }
}

/* ---------- Back to top with reading progress ---------- */

.codwo-fab__top {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin-inline: 5px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #fff;
    color: #111827;
    cursor: pointer;
    box-shadow: 0 8px 20px -8px rgba(16, 24, 40, 0.45), 0 1px 3px rgba(0, 0, 0, 0.1);
}

.codwo-fab__ring {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.codwo-fab__ring-bg,
.codwo-fab__ring-fg {
    fill: none;
    stroke-width: 3;
}

.codwo-fab__ring-bg { stroke: #e5e7eb; }

.codwo-fab__ring-fg {
    stroke: #25d366;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.1s linear;
}

.codwo-fab__arrow {
    position: relative;
    flex: none;
    width: 20px !important;
    height: 20px !important;
    max-width: none;
}

/* ---------- Greeting bubble ---------- */

.codwo-fab__bubble {
    position: relative;
    max-width: min(260px, calc(100vw - 32px));
    margin-block-end: 2px;
    padding: 12px 34px 12px 14px;
    padding-inline: 14px 34px;
    border-radius: 16px;
    background: #fff;
    color: #111827;
    font-size: 14px;
    line-height: 1.5;
    box-shadow: 0 12px 30px -10px rgba(16, 24, 40, 0.45);
    animation: codwo-fab-bubble 0.3s ease-out;
}

.codwo-fab__bubble p {
    margin: 0;
}

.codwo-fab__bubble-close {
    position: absolute;
    inset-block-start: 4px;
    inset-inline-end: 4px;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #6b7280;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

@keyframes codwo-fab-bubble {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}

@media (max-width: 480px) {
    .codwo-fab { --codwo-fab-size: 52px; --codwo-fab-edge: 12px; }
}

@media (prefers-reduced-motion: reduce) {
    .codwo-fab,
    .codwo-fab *,
    .codwo-fab *::after {
        animation: none !important;
        transition: none !important;
    }
}