.tio-reader-state,
.tio-reader {
    width: 100%;
}
.tio-reader-state {
    padding: 1rem;
    border: 1px solid currentColor;
    border-radius: 8px;
}


/* v0.3.7 Reader note save status. Elementor controls typography/spacing;
   these rules only provide clear state semantics. */
.tio-note-status[data-state="success"] {
    opacity: 1;
}

.tio-note-status[data-state="error"] {
    opacity: 1;
}

.tio-note-status[data-state="saving"] {
    opacity: 0.75;
}


/* v0.6.0 — popup form success messages are intentionally silent.
   Validation/error messages remain visible. */
.tio-bookmark-edit-form .jet-form-builder-message--success,
.tio-bookmark-edit-form .jet-form-builder__message--success,
.tio-bookmark-edit-form .jet-form-builder-message.success,
.tio-bookmark-delete-form .jet-form-builder-message--success,
.tio-bookmark-delete-form .jet-form-builder__message--success,
.tio-bookmark-delete-form .jet-form-builder-message.success {
    display: none !important;
}


.tio-note-edit-form .jet-form-builder-message--success,
.tio-note-edit-form .jet-form-builder__message--success,
.tio-note-edit-form .jet-form-builder-message.success {
    display: none !important;
}


.tio-note-delete-form .jet-form-builder-message--success,
.tio-note-delete-form .jet-form-builder__message--success,
.tio-note-delete-form .jet-form-builder-message.success {
    display: none !important;
}


/* v0.10.6 — Reader bottom bar presentation and navigation lock. */
#tio-reader-page-counter,
#tio-reader-page-counter .elementor-heading-title {
    color: #fff !important;
}

#tio-reader-progress .elementor-progress-wrapper {
    display: block !important;
    min-height: 6px;
    overflow: hidden;
}

#tio-reader-progress .elementor-progress-bar,
#tio-reader-progress [role="progressbar"] {
    display: flex !important;
    min-height: 6px;
    align-items: center;
    transition: width 0.2s ease;
}

#tio-reader-prev.is-navigating,
#tio-reader-next.is-navigating {
    pointer-events: none !important;
    opacity: 0.55;
}


/* v0.10.11 — Reader progress track/fill only.
 * Do not size or reflow Elementor parent containers: the bottom-bar layout
 * remains controlled by Elementor. The wrapper is the permanent track and
 * only the inner .elementor-progress-bar receives the live percentage width. */
.tio-reader-progress-bar .elementor-progress-wrapper,
#tio-reader-progress .elementor-progress-wrapper {
    display: block !important;
    position: relative !important;
    box-sizing: border-box !important;
    width: 280px !important;
    max-width: 100% !important;
    height: 14px !important;
    min-height: 14px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    overflow: hidden !important;
    background: rgba(255,255,255,0.32) !important;
    border-radius: 999px !important;
}

.tio-reader-progress-bar .elementor-progress-bar,
.tio-reader-progress-bar .elementor-progress-wrapper > [role="progressbar"],
#tio-reader-progress .elementor-progress-bar,
#tio-reader-progress .elementor-progress-wrapper > [role="progressbar"] {
    display: block !important;
    position: relative !important;
    box-sizing: border-box !important;
    height: 14px !important;
    min-height: 14px !important;
    max-width: 100% !important;
    background: #FFD400 !important;
    border-radius: 999px !important;
    transition: width 0.2s ease !important;
    overflow: visible !important;
}

/* Elementor places the percentage inside the changing fill. Give that label
 * the full track width so it stays centred instead of moving with the fill. */
.tio-reader-progress-bar .elementor-progress-percentage,
#tio-reader-progress .elementor-progress-percentage {
    display: flex !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 280px !important;
    max-width: none !important;
    height: 14px !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
    color: #fff !important;
    font-size: 11px !important;
    line-height: 14px !important;
    white-space: nowrap !important;
    pointer-events: none !important;
}

/* v0.10.13 — JetElements Progress Bar support.
 * JetElements markup: wrapper = track, status-bar = live fill,
 * percent-value = number, percent-suffix = "%". */
.tio-reader-progress-bar .jet-progress-bar__wrapper,
.jet-progress-bar .jet-progress-bar__wrapper {
    display: block !important;
    position: relative !important;
    box-sizing: border-box !important;
    width: 280px !important;
    max-width: 100% !important;
    height: 14px !important;
    min-height: 14px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    overflow: hidden !important;
    background: rgba(255,255,255,0.32) !important;
    border-radius: 999px !important;
}

.tio-reader-progress-bar .jet-progress-bar__status-bar,
.jet-progress-bar .jet-progress-bar__status-bar {
    display: block !important;
    position: relative !important;
    box-sizing: border-box !important;
    height: 14px !important;
    min-height: 14px !important;
    max-width: 100% !important;
    background: #FFD400 !important;
    border-radius: 999px !important;
    transition: width 0.2s ease !important;
}

.tio-reader-progress-bar .jet-progress-bar__percent,
.jet-progress-bar .jet-progress-bar__percent {
    color: #fff !important;
    font-size: 11px !important;
    line-height: 14px !important;
}

/* v0.10.20 — Measured responsive viewer, outer shell only.
 * Keep the v0.10.19 measured Elementor workspace height, but apply it only
 * to the shortcode shell and the PDF Embedder iframe. PDF Embedder's own
 * internal viewer/page wrappers retain their native sizing and scrolling. */
.elementor-widget-shortcode:has(.tio-reader) {
    align-self: stretch !important;
    width: 100% !important;
    height: var(--tio-reader-viewer-height, auto) !important;
    min-height: 0 !important;
}

.elementor-widget-shortcode:has(.tio-reader) > .elementor-widget-container,
.tio-reader {
    box-sizing: border-box !important;
    width: 100% !important;
    height: var(--tio-reader-viewer-height, auto) !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
}

.tio-reader {
    overflow: hidden;
}

/* Do not size .pdfemb-viewer, .pdfemb-inner-div, canvas, pages, or other
 * PDF.js internals here. The iframe receives the definite viewport height;
 * PDF Embedder then controls page layout/scrolling inside that viewport. */
.tio-reader iframe.pdfembed-iframe,
.tio-reader iframe[class*="pdfembed-iframe"],
.tio-reader iframe[data-pdf-id] {
    display: block !important;
    box-sizing: border-box !important;
    width: 100% !important;
    height: var(--tio-reader-viewer-height, auto) !important;
    min-height: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    border: 0 !important;
}