/* MIO Pledge Counter — styles ported from makeitok.org */

.pxblock--pledge-counter {
        position: relative;
        padding-top: 2rem;
        padding-bottom: 2rem;
}

@media (min-width: 1024px) {
        .pxblock--pledge-counter {
                padding-top: 3rem;
                padding-bottom: 3rem;
        }
}

.pxblock--pledge-counter .pledge-counter-container {
        position: relative;
        width: 100%;
        max-width: 80rem;
        margin-left: auto;
        margin-right: auto;
        padding-left: 1rem;
        padding-right: 1rem;
        min-height: 240px;
}

@media (min-width: 1280px) {
        .pxblock--pledge-counter .pledge-counter-container {
                min-height: 360px;
        }
}

.pxblock--pledge-counter .pledge-counter-inner {
        max-width: 56rem;
        margin: 0 auto;
        position: relative;
        z-index: 1;
}

/* ---------- Digit row ---------- */
.pxblock--pledge-counter .pledge-counter-digits {
        display: flex !important;
        flex-direction: row !important;
        justify-content: center;
        align-items: flex-end;
        gap: 0.5rem;
        margin-bottom: 1.25rem;
        flex-wrap: nowrap;
}

@media (min-width: 1024px) {
        .pxblock--pledge-counter .pledge-counter-digits {
                gap: 1rem;
        }
}

/* Digit tiles — dark text on orange (matches makeitok.org) */
.pxblock--pledge-counter .pledge-counter-digits .pledge-counter-digit,
.elementor-widget-mio_pledge_counter .pxblock--pledge-counter .pledge-counter-digit {
        display: inline-block !important;
        background-color: #fda929 !important;
        background-image: none !important;
        color: #1f1f1f !important;
        border-radius: 0.5rem !important;
        padding: 1.5rem 1rem !important;
        font-size: 3.125rem !important;
        font-weight: 300 !important;
        line-height: 1 !important;
        text-align: center;
        font-family: inherit;
        min-width: 4rem;
        box-shadow: none !important;
        border: 0 !important;
        text-shadow: none !important;
        letter-spacing: 0 !important;
}

@media (min-width: 1024px) {
        .pxblock--pledge-counter .pledge-counter-digits .pledge-counter-digit,
        .elementor-widget-mio_pledge_counter .pxblock--pledge-counter .pledge-counter-digit {
                font-size: 4.5rem !important;
                padding: 2rem 1.25rem !important;
                min-width: 6rem;
        }
}

/* Comma */
.pxblock--pledge-counter .pledge-counter-digits .pledge-counter-comma,
.elementor-widget-mio_pledge_counter .pxblock--pledge-counter .pledge-counter-comma {
        display: inline-block !important;
        align-self: flex-end;
        color: #1f1f1f !important;
        background: transparent !important;
        font-weight: 400 !important;
        line-height: 1 !important;
        font-size: 3rem !important;
        padding: 0 0.25rem !important;
        border: 0 !important;
}

@media (min-width: 1024px) {
        .pxblock--pledge-counter .pledge-counter-digits .pledge-counter-comma,
        .elementor-widget-mio_pledge_counter .pxblock--pledge-counter .pledge-counter-comma {
                font-size: 4.5rem !important;
        }
}

/* Description */
.pxblock--pledge-counter .wysiwyg {
        text-align: center;
}

.pxblock--pledge-counter .wysiwyg p {
        margin: 0 0 1rem;
}

/* ---------- Bubbles ---------- */
.pxblock--pledge-counter .pledge-bubbles {
        display: none;
        position: absolute;
        inset: 0;
        pointer-events: none;
        z-index: 5;
}

@media (min-width: 1024px) {
        .pxblock--pledge-counter .pledge-bubbles {
                display: block;
        }
}

.pledge-chat-bubble {
        position: absolute !important;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        padding: 1.25rem 2.25rem !important;
        border-radius: 2rem !important;
        font-weight: 500 !important;
        font-size: 1.875rem !important;
        line-height: 1 !important;
        white-space: nowrap;
        color: #ffffff !important;
        opacity: 0;
        transform: translateY(8px) scale(0.96);
        transition: opacity 400ms ease, transform 400ms ease;
        min-width: 11rem;
        min-height: 4.25rem;
        box-sizing: border-box;
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
        border: 0 !important;
}

@media (min-width: 1280px) {
        .pledge-chat-bubble {
                font-size: 2.125rem !important;
                padding: 1.5rem 2.75rem !important;
                min-width: 13rem;
                min-height: 5rem;
        }
}

.pledge-chat-bubble.is-visible {
        opacity: 1;
        transform: translateY(0) scale(1);
}

/* Dark text variant (e.g. orange/yellow bubble) */
.pledge-chat-bubble.is-dark-text {
        color: #1f1f1f !important;
}

/* Inner text — hidden until typing dots finish */
.pledge-chat-bubble__text {
        position: relative;
        z-index: 2;
        display: inline-block !important;
        color: inherit !important;
        opacity: 0;
        transition: opacity 300ms ease;
}

.pledge-chat-bubble.is-revealed .pledge-chat-bubble__text {
        opacity: 1;
}

/* Typing dots — visible while waiting */
.pledge-chat-bubble__dots {
        position: absolute !important;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 3;
        display: flex !important;
        align-items: center;
        justify-content: center;
        gap: 0.45rem;
        opacity: 1;
        transition: opacity 250ms ease;
        pointer-events: none;
}

.pledge-chat-bubble.is-revealed .pledge-chat-bubble__dots {
        opacity: 0;
}

.pledge-chat-bubble__dots > span {
        display: block !important;
        width: 1rem !important;
        height: 1rem !important;
        border-radius: 9999px !important;
        background-color: rgba(255, 255, 255, 0.95) !important;
        animation: mio-blink 1.1s ease-in-out infinite both;
        flex: 0 0 auto;
}

@media (min-width: 1280px) {
        .pledge-chat-bubble__dots > span {
                width: 1.15rem !important;
                height: 1.15rem !important;
        }
}

.pledge-chat-bubble__dots > span:nth-child(2) {
        animation-delay: 0.15s;
        background-color: rgba(255, 229, 190, 0.95) !important;
}

.pledge-chat-bubble__dots > span:nth-child(3) {
        animation-delay: 0.3s;
        background-color: rgba(255, 200, 130, 0.95) !important;
}

@keyframes mio-blink {
        0%, 80%, 100% { opacity: 0.25; transform: translateY(0); }
        40%           { opacity: 1;    transform: translateY(-2px); }
}

/* Curved iMessage-style tail */
.pledge-chat-bubble__tail {
        position: absolute;
        bottom: 0px;
        width: 38px;
        height: auto;
        z-index: 1;
}

.pledge-chat-bubble.tail-right .pledge-chat-bubble__tail {
        right: -12px;
        margin-right: 0;
}

.pledge-chat-bubble.tail-left .pledge-chat-bubble__tail {
        left: -12px;
        margin-left: 0;
        transform: scaleX(-1);
}

/* ---------- Bubble positions ----------
   Reference image layout:
   - Light blue   → top-right
   - Orange       → bottom-right
   - Dark blue    → middle-left
   Positions use top% so they don't depend on container height being huge.
*/
.pledge-chat-bubble.pos-top-right {
        top: 0;
        right: -18%;
        left: auto;
        bottom: auto;
}

.pledge-chat-bubble.pos-bottom-right {
        top: auto;
        bottom: 0;
        right: -16%;
        left: auto;
}

.pledge-chat-bubble.pos-middle-left {
        top: 38%;
        left: -18%;
        right: auto;
        bottom: auto;
}

@media (min-width: 1536px) {
        .pledge-chat-bubble.pos-top-right    { right: -24%; }
        .pledge-chat-bubble.pos-bottom-right { right: -22%; }
        .pledge-chat-bubble.pos-middle-left  { left: -24%; }
}