/**
 * ZiPi TTS v2.4.11
 *  - Lang + play breathing space (~6px) at every breakpoint, so the
 *    flag/lang badge stays inline with the play button instead of wrapping.
 *  - User-controls dropdown is now two UNIFIED groups:
 *      [🔊][──slider──][80%]   [⚡][──slider──][1.0x]
 *    Icon + slider + value never separate. Slider is the only flexible
 *    element inside each group. Groups sit side-by-side when there's
 *    room and stack vertically when narrow.
 *
 * DOM order (v2.4.11):
 *   lang → play → progress → prev → next → user-controls → settings-toggle
 */

/* ======================================================================
   1. WIDGET CONTAINER
   ====================================================================== */

.zipi-tts-widget {
    margin: 20px auto;
    width: 70%;
    max-width: 800px;
    background: #667eea;
    border-radius: 6px;
    padding: 6px 12px;
    box-shadow: 0 2px 12px rgba(102, 126, 234, 0.2);
    display: flex;
    flex-wrap: nowrap; /* v2.4.10: main row never wraps — lang/play/progress stay on one line */
    align-items: center;
    gap: 8px;
    height: 32px;
    position: relative; /* anchor for the user-controls dropdown */
    box-sizing: border-box;
    overflow: visible; /* let dropdown escape below; horizontal stays contained by nowrap */
}

/* Every direct child must respect flex sizing — no element escapes the widget */
.zipi-tts-widget > * {
    box-sizing: border-box;
}

.zipi-tts-widget.theme-green {
    background: #20C063;
    box-shadow: 0 2px 12px rgba(32, 192, 99, 0.2);
}

/* ======================================================================
   2. PLAY BUTTON
   ====================================================================== */

.zipi-tts-play-btn {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    max-width: 28px !important;
    max-height: 28px !important;
    background: rgba(255, 255, 255, 0.25) !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    border-radius: 50% !important;
    cursor: pointer;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease;
    flex-shrink: 0;
    outline: none;
    position: relative;
    padding: 0 !important;
    line-height: 1 !important;
}

.zipi-tts-play-btn:hover {
    background: rgba(255, 255, 255, 0.35);
    transform: scale(1.05);
}

.zipi-tts-play-btn:focus {
    outline: none;
    border: 1px solid rgba(255, 255, 255, 0.8);
}

.zipi-tts-play-btn .zipi-tts-icon {
    font-size: 14px;
    color: white;
}

/* Loading spinner */
.zipi-tts-play-btn.loading {
    border: 2px solid transparent;
}

.zipi-tts-play-btn.loading::after {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border-radius: 50%;
    border: 2px solid transparent;
    border-top-color: white;
    border-right-color: white;
    animation: zipi-spin 0.8s linear infinite;
}

.zipi-tts-play-btn.loading .zipi-tts-icon {
    display: inline-block;
    animation: zipi-spin 1s linear infinite;
}

@keyframes zipi-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ======================================================================
   3. PREV / NEXT BUTTONS  (side-by-side, right of progress bar)
   ====================================================================== */

.zipi-tts-prev-btn,
.zipi-tts-next-btn {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    border-radius: 50% !important;
    border: none !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    padding: 0 !important;
    opacity: 0.85 !important;
    transition: opacity 0.2s !important;
    margin: 0 !important;
}

/* Tight pairing: prev sits flush, next gets 2px breathing room from prev */
.zipi-tts-progress-bar + .zipi-tts-prev-btn {
    margin-left: 4px !important;
}
.zipi-tts-prev-btn + .zipi-tts-next-btn {
    margin-left: 2px !important;
}

.zipi-tts-prev-btn:hover,
.zipi-tts-next-btn:hover {
    opacity: 1 !important;
}

/* ======================================================================
   4. PROGRESS BAR
   ====================================================================== */

.zipi-tts-progress-bar {
    flex: 1 1 0 !important;       /* basis 0 so it never reserves intrinsic width */
    background: rgba(255, 255, 255, 0.25);
    height: 6px;
    border-radius: 3px;
    overflow: hidden;
    min-width: 24px !important;   /* lowered so settings never overflows in narrow widgets */
    max-width: none !important;
    cursor: pointer;
}

.zipi-tts-progress-fill {
    background: white;
    height: 100%;
    width: 0%;
    transition: width 0.3s ease;
    border-radius: 3px;
}

/* ======================================================================
   5. LANGUAGE BADGE
   ====================================================================== */

.zipi-tts-lang {
    font-size: 11px;
    color: white;
    font-weight: 600;
    opacity: 0.9;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    /* lang is now FIRST element (left of play button) — no margin/padding,
       parent gap handles spacing */
    margin: 0 !important;
    padding: 0 !important;
}

/* v2.4.11: Give the lang badge real breathing space before the play
   button. Previous versions used a negative margin to pull them together,
   which made small widgets too tight and caused the lang to wrap below
   the play button in some layouts. Now we let the widget's flex gap (8px)
   stand on its own, and add a small explicit margin to guarantee the
   visual breathing room Mike asked for at every breakpoint. */
.zipi-tts-lang + .zipi-tts-play-btn {
    margin-left: 2px !important;  /* parent gap=8px + 2px = ~10px breathing space */
}

/* Empty lang badge (no language detected yet) should be invisible spacer */
.zipi-tts-lang:empty {
    margin: 0 !important;
    padding: 0 !important;
    min-width: 0;
}
.zipi-tts-lang:empty + .zipi-tts-play-btn {
    margin-left: 0 !important; /* no extra breathing room when lang is empty */
}

/* ======================================================================
   6. SETTINGS TOGGLE BUTTON
   ====================================================================== */

.zipi-tts-settings-toggle {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    max-width: 24px !important;
    max-height: 24px !important;
    background: rgba(255, 255, 255, 0.2) !important;
    border: 1px solid rgba(255, 255, 255, 0.5) !important;
    border-radius: 50% !important;
    color: white !important;
    cursor: pointer;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease;
    flex-shrink: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    margin-left: auto !important; /* push to right edge of widget */
    margin-right: 0 !important;   /* but stay INSIDE the widget */
    position: relative;            /* keep in flow, no escape */
}

.zipi-tts-settings-toggle:hover {
    background: rgba(255, 255, 255, 0.3);
}

.zipi-tts-settings-toggle .icon {
    font-size: 10px;
    transition: transform 0.3s ease;
}

/* ======================================================================
   7. USER CONTROLS PANEL (volume / speed)
   v2.4.10: ALWAYS a dropdown when expanded — at every breakpoint.
   This solves both small-widget wrap and medium-widget overflow:
   the controls leave the flex row entirely when open, so the main
   row (lang→play→progress→prev→next→settings) never re-flows.

   Default: collapsed and occupying zero horizontal space.
   ====================================================================== */

.zipi-tts-user-controls {
    /* default (collapsed) state — takes no horizontal slack from the main row */
    display: flex;
    align-items: center;
    gap: 8px;
    overflow: hidden;
    white-space: nowrap;
    font-size: 11px;
    width: 0;
    max-width: 0;
    opacity: 0;
    padding: 0;
    margin: 0;
    pointer-events: none;
    flex: 0 0 0;
    transition: opacity 0.2s ease;
}

/* When expanded: lift out of the flex row and dock beneath the widget. */
.zipi-tts-user-controls.expanded,
.zipi-tts-user-controls[aria-hidden="false"] {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: auto;
    max-width: 100%;
    margin-top: 4px;
    padding: 8px 12px;
    background: inherit;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    opacity: 1;
    pointer-events: auto;
    z-index: 9999;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap; /* groups stack vertically when widget is narrow */
    align-items: center;
    gap: 12px;
    /* still 0 in the parent's flex row — only absolute matters now */
    flex: 0 0 0;
}

/* v2.4.11: each group (volume / speed) is a self-contained unit.
   Icon + slider + value travel together — slider is the only flex item
   inside the group. Groups themselves flex 1 1 200px so two groups
   share width evenly when room permits, and stack when room runs out. */
.zipi-tts-control-group {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1 1 200px;
    min-width: 0;
}

.zipi-tts-user-controls.expanded .zipi-tts-control-group,
.zipi-tts-user-controls[aria-hidden="false"] .zipi-tts-control-group {
    flex: 1 1 200px;
    min-width: 0;
}

.zipi-tts-control-icon {
    font-size: 12px;
    color: white;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.zipi-tts-control-icon svg {
    display: block;
    /* fill inherits via PHP inline styles (icon_color) */
}

.zipi-tts-control-slider {
    flex: 1 1 0 !important;  /* slider is the only flexible element inside the group */
    width: auto;
    min-width: 40px;
    height: 3px;
    border-radius: 3px;
    --slider-fill: 80%;
    background: linear-gradient(to right,
        #4CAF50 var(--slider-fill),
        rgba(255, 255, 255, 0.3) var(--slider-fill));
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}

.zipi-tts-user-controls.expanded .zipi-tts-control-slider,
.zipi-tts-user-controls[aria-hidden="false"] .zipi-tts-control-slider {
    flex: 1 1 0 !important;
    min-width: 40px;
}

.zipi-tts-volume {
    --slider-fill: 80%;
}

.zipi-tts-speed {
    --slider-fill: 50%; /* 100 out of 50-200 range = 50% */
}

.zipi-tts-control-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: white;
    cursor: pointer;
}

.zipi-tts-control-slider::-moz-range-thumb {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: white;
    cursor: pointer;
    border: none;
}

.zipi-tts-control-value {
    font-size: 11px;
    font-weight: 600;
    color: white;
    min-width: 28px;
    text-align: right;
    flex-shrink: 0 !important;
    white-space: nowrap !important;
}

.zipi-tts-control-separator {
    color: rgba(255, 255, 255, 0.4);
    font-size: 12px;
}

/* ======================================================================
   8. WIDGET-STYLE VARIANTS (static / floating)
   Layout/colour overrides for shape come from PHP inline CSS.
   This block defines only structural defaults.
   ====================================================================== */

.zipi-tts-widget.widget-style-static {
    position: relative !important;
    top: auto !important;
}

.zipi-tts-widget.widget-style-floating {
    position: sticky !important;
    z-index: 99999 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
    display: flex !important;
    align-items: center !important;
}

/* Keep core controls visible in floating mode regardless of theme */
.zipi-tts-widget.widget-style-floating .zipi-tts-play-btn,
.zipi-tts-widget.widget-style-floating .zipi-tts-prev-btn,
.zipi-tts-widget.widget-style-floating .zipi-tts-next-btn,
.zipi-tts-widget.widget-style-floating .zipi-tts-progress-bar,
.zipi-tts-widget.widget-style-floating .zipi-tts-lang,
.zipi-tts-widget.widget-style-floating .zipi-tts-settings-toggle {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* ======================================================================
   9. RESPONSIVE — MOBILE (≤ 600px)
   Single canonical block. Replaces the two conflicting copies from v2.4.7.
   ====================================================================== */

@media (max-width: 600px) {
    .zipi-tts-widget {
        width: 95%;
        gap: 5px;
        padding: 6px 10px;
        height: auto;
        min-height: 32px;
        /* flex-wrap: nowrap inherited from base — main row stays tight */
    }

    /* Don't let the lang badge swallow precious space on mobile */
    .zipi-tts-lang {
        font-size: 10px;
        max-width: 38px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* v2.4.11: keep the lang-to-play breathing room on mobile too */
    .zipi-tts-lang + .zipi-tts-play-btn {
        margin-left: 2px !important;
    }

    /* v2.4.11: on mobile, force each group to a full row so volume and
       speed groups stack vertically. Slider still flexes inside each group. */
    .zipi-tts-user-controls.expanded .zipi-tts-control-group,
    .zipi-tts-user-controls[aria-hidden="false"] .zipi-tts-control-group {
        flex: 1 1 100%;
        min-width: 0;
    }

    .zipi-tts-user-controls.expanded .zipi-tts-control-slider,
    .zipi-tts-user-controls[aria-hidden="false"] .zipi-tts-control-slider {
        flex: 1 1 0 !important;
        min-width: 40px;
    }

    /* Legacy separator (removed from HTML in v2.4.11) — hidden defensively */
    .zipi-tts-control-separator {
        display: none !important;
    }

    /* Ensure core row buttons stay visible */
    .zipi-tts-play-btn,
    .zipi-tts-prev-btn,
    .zipi-tts-next-btn,
    .zipi-tts-settings-toggle {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Settings toggle stays glued to the right edge but always inside the widget */
    .zipi-tts-settings-toggle {
        margin-left: auto !important;
        margin-right: 0 !important;
    }
}

/* Tighter still on phones */
@media (max-width: 480px) {
    .zipi-tts-widget {
        width: 100%;
        gap: 3px;
        padding: 6px 6px;
    }

    .zipi-tts-lang {
        max-width: 32px;
        font-size: 9px;
    }

    /* Slightly smaller prev/next on tiny screens */
    .zipi-tts-prev-btn,
    .zipi-tts-next-btn {
        width: 22px !important;
        height: 22px !important;
        min-width: 22px !important;
    }

    .zipi-tts-progress-bar + .zipi-tts-prev-btn {
        margin-left: 2px !important;
    }
}

/* ======================================================================
   10. SHARED ICON UTILITIES
   ====================================================================== */

.zipi-tts-icon {
    display: block !important;
    flex-shrink: 0 !important;
}