/**
 * Word Bubble Tool Styles
 * Follows Cloudinary design system
 *
 * Section 1 is the shared tool shell (drop area, stock strip, preview list,
 * loader, header bar). Do not edit it while building a tool: keep tool styles
 * in section 2 so the shell stays diffable against _tool-base.
 * The upload icons are inlined as data URIs on purpose: the ../img/upload.svg
 * that the older tools reference does not exist in any tool folder.
 */

/* ====================================================================== *
 * 1. SHARED TOOL SHELL
 * ====================================================================== */

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

.hidden { display: none !important; }
.invisible { opacity: 0 !important; }

/* Upload Button */
.upload-button {
    border: 0;
    background-color: #4FAFFC;
    color: #fff;
    text-transform: uppercase;
    font-weight: 700;
    border-radius: 2em;
    padding: 0.7em 1.2em 0.7em 3.6em;
    font-size: 1em;
    position: relative;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.upload-button:hover {
    background-color: #3a9ae8;
}

.upload-button:before {
    display: flex;
    align-items: center;
    justify-content: center;
    content: "↑";
    font-size: 1.6em;
    font-weight: 700;
    background-color: #fff;
    color: #4FAFFC;
    border: 1px solid currentColor;
    position: absolute;
    border-radius: 50%;
    width: 1.7em;
    height: 1.7em;
    left: 3px;
    top: 0;
    bottom: 0;
    margin: auto;
    box-shadow: 0 0 0 3px #fff;
}

/* Content Grid Mode */
#hero.content-grid-mod .converter-wrapper {
    background-color: #23436A;
    padding: 88px;
    border-radius: 24px;
    margin-top: 76px;
}

/* single-tools.php inlines this exact selector (and its ::before) in a <style> block that
   loads AFTER this sheet. At equal specificity the last declaration wins, so the theme's
   remote upload.svg painted over the data URI below and it never showed. Measured with
   getComputedStyle(n, '::before').backgroundImage across the 36 registered tools: all 36
   served the theme file. Scoping to .convertor[data-tool-type] wins it back. Second rule of
   this family; the other is .cd-mini-upload-area. */
#hero.content-grid-mod .converter-wrapper .convertor[data-tool-type] .drop-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #355A90;
    border-radius: 16px;
    padding: 50px 60px;
    margin: 0 auto 40px;
    border: 2px solid transparent;
    transition: all 0.3s ease;
}

#hero.content-grid-mod .converter-wrapper .convertor[data-tool-type] .drop-area.highlight {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    border: 2px solid #4FAFFC;
}

#hero.content-grid-mod .converter-wrapper .convertor[data-tool-type] .drop-area h2 {
    font-weight: 300;
    font-size: 47px;
    color: #fff;
    margin-bottom: 42px;
    line-height: 1.2;
}

#hero.content-grid-mod .converter-wrapper .convertor[data-tool-type] .drop-area p {
    font-size: 16px;
    color: #fff;
    line-height: 1.5;
    margin: 16px auto;
}

#hero.content-grid-mod .converter-wrapper .convertor[data-tool-type] .drop-area::before {
    content: "";
    display: flex;
    height: 100px;
    width: 100px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 42v8a4 4 0 0 0 4 4h32a4 4 0 0 0 4-4v-8'/%3E%3Cpath d='M32 40V10'/%3E%3Cpath d='M20 22 32 10l12 12'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

#hero.content-grid-mod .upload-button::before {
    display: none;
}

#hero.content-grid-mod .upload-button {
    padding: 10px 32px;
    font-family: "Inter", sans-serif;
}

/* Stock Assets */
#hero.content-grid-mod .converter-wrapper .cd-stock-assets {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

#hero.content-grid-mod .converter-wrapper .cd-stock-assets .info {
    text-align: left;
}

#hero.content-grid-mod .converter-wrapper .cd-stock-assets .info h4 {
    font-size: 22px;
    font-weight: 500;
    color: #fff;
    line-height: 1.2;
    margin-bottom: 0;
}

#hero.content-grid-mod .converter-wrapper .cd-stock-assets .cd-stock-assets-items {
    display: flex;
    gap: 20px;
}

#hero.content-grid-mod .converter-wrapper .cd-stock-assets .cd-stock-assets-item {
    position: relative;
}

#hero.content-grid-mod .converter-wrapper .cd-stock-assets .cd-stock-assets-item img {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 12px;
    border: 3px solid #fff;
    cursor: pointer;
    transition: transform 0.2s ease;
    display: block;
}

#hero.content-grid-mod .converter-wrapper .cd-stock-assets .cd-stock-assets-item img:hover {
    transform: scale(1.05);
}

/* Same collision as .drop-area: single-tools.php inlines this selector character for
   character in a later <style> block, so its upload_area.svg -- which reads "Upload Image"
   -- painted over the icon below, the wrong noun on any non-image tool. Scoping to
   .convertor[data-tool-type] raises this to (1,5,1) and wins. Confirmed with
   getComputedStyle().backgroundImage, the only thing that distinguishes the two icons. */
#hero.content-grid-mod .converter-wrapper .convertor[data-tool-type] .cd-stock-assets .cd-mini-upload-area {
    width: 100px;
    height: 100px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none'%3E%3Crect x='4' y='4' width='92' height='92' rx='10' stroke='%234FAFFC' stroke-width='3' stroke-dasharray='8 6'/%3E%3Cpath d='M50 32v36M32 50h36' stroke='%234FAFFC' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E");
    background-size: cover;
    background-repeat: no-repeat;
    display: none;
    border-radius: 8px;
    background-color: #23436a;
    cursor: pointer;
}

/* Preview Active State */
.preview-active#hero.content-grid-mod .converter-wrapper .convertor[data-tool-type] .cd-stock-assets .cd-mini-upload-area {
    display: unset;
}

.preview-active#hero.content-grid-mod .converter-wrapper .cd-stock-assets {
    justify-content: left;
}

.preview-active#hero.content-grid-mod .convertor {
    max-width: 100%;
}

.preview-active#hero.content-grid-mod .cd-tool-file-preview-wrapper {
    padding: 30px 0;
}

/* Preview Wrapper */
.cd-tool-file-preview-wrapper {
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 30px;
    padding: 30px;
    border-radius: 30px;
    display: none;
}

.cd-tool-file-preview-wrapper.active {
    display: flex;
}

/* Preview List Item */
.cd-tool-file-preview-list-item {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    padding: 20px;
    gap: 20px;
}

.cd-tool-file-preview-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0;
}

.cd-tool-file-preview-item .media-status-label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    color: #4FAFFC;
    letter-spacing: 0.5px;
}

.cd-tool-file-preview-item .media-container {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cd-tool-file-preview-item .media-container img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.cd-tool-file-preview-item .file-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cd-tool-file-preview-item .file-content-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}

.cd-tool-file-preview-item .file-name {
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}

.cd-tool-file-preview-item .file-meta {
    display: flex;
    align-items: center;
    gap: 8px;
}

.cd-tool-file-preview-item .extension {
    display: inline-block;
    background: #4FAFFC;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 4px;
}

.cd-tool-file-preview-item .file-size {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
}

/* Download Button */
.file-download-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #4FAFFC;
    color: #fff;
    padding: 10px 20px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    transition: background-color 0.2s ease;
}

.file-download-btn:hover {
    background: #3a9ae8;
    color: #fff;
}

.file-download-btn svg {
    width: 18px;
    height: 18px;
}

/* Download All Button */
.cd-tools-download-all {
    display: flex;
    justify-content: center;
    margin-top: 30px;
}

.cd-tools-download-all-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #3F5FFF;
    color: #fff;
    padding: 14px 32px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.2s ease;
    border: none;
}

.cd-tools-download-all-btn:hover {
    background: #3350e0;
}

/* Loader */
.cd-tool-preview-loader {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 40px;
    color: #fff;
}

.cd-tool-preview-loader img {
    width: 48px;
    height: 48px;
    animation: spin 1s infinite linear;
}

.cd-tool-preview-loader span {
    font-size: 16px;
    font-weight: 500;
}

.cd-tool-file-preview-wrapper .cd-tool-preview-loader {
    order: 999;
}

/* Arrow Separator */
.cd-tool-file-preview-list-item .arrow-separator {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    color: #4FAFFC;
    flex: 0 0 auto;
}

.cd-tool-file-preview-list-item .arrow-separator svg {
    width: 32px;
    height: 32px;
}

/* Header Top Bar */
.cd_header_top_bar {
    background: linear-gradient(90deg, #0065AD 0%, #3F5FFF 100%);
    padding: 12px 20px;
    text-align: center;
}

.cd_header_top_bar_content {
    color: #fff;
    font-size: 14px;
}

.cd_header_top_bar_content a {
    color: #fff;
    text-decoration: underline;
    font-weight: 600;
}

/* ====================================================================== *
 * 2. Word Bubble SPECIFIC
 * ====================================================================== */

.cd-bubble-controls {
    text-align: center;
}

.cd-bubble-swatch {
    display: inline-block;
    flex: 0 0 auto;
    width: 13px;
    height: 13px;
    border-radius: 3px;
    border: 1px solid rgba(255, 255, 255, 0.4);
}

/* A position a full-width bar cannot use is DISABLED, not hidden: the user should
   see the corners exist and learn why they are unavailable for a bar. */
.cd-tool-seg-btn.is-unavailable {
    opacity: 0.35;
    cursor: not-allowed;
    text-decoration: line-through;
    text-decoration-thickness: 1px;
}

.cd-tool-seg-btn.is-unavailable:hover { background: transparent; }

/* The caption input sits below the bar rather than inside it: a textarea in a
   pill track looks like a mistake, and this field is the tool's main input. */
.cd-bubble-input {
    position: relative;
    width: fit-content;
    max-width: 100%;
    margin: 0 auto 22px;
    padding: 14px 18px;
    background: rgba(0, 0, 0, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 14px;
    text-align: left;
}

.cd-bubble-input label {
    display: block;
    margin-bottom: 8px;
    font-size: 11px
    ;font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    color: rgba(255, 255, 255, 0.55);
}

.cd-bubble-input textarea {
    display: block;
    width: 440px;
    max-width: 100%;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 8px;
    color: #fff;
    font-size: 15px;
    line-height: 1.45;
    resize: vertical;
}

.cd-bubble-input textarea:focus-visible {
    outline: 2px solid #4FAFFC;
    outline-offset: 1px;
}

/* A maxlength with no counter is a field that stops accepting keystrokes for no
   visible reason. */
.cd-bubble-counter {
    position: absolute;
    right: 22px;
    bottom: 20px;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    color: rgba(255, 255, 255, 0.45);
    pointer-events: none;
}

.cd-bubble-counter.is-full { color: #ffd48a; }

.cd-tool-file-preview-wrapper.active {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.cd-bubble-item {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
}

.cd-bubble-stage {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.25);
}

.cd-bubble-image {
    display: block;
    max-width: 100%;
    max-height: 520px;
    width: auto;
    height: auto;
}

/* With no caption there is nothing to add, so the untouched photo is shown with
   an instruction rather than a URL carrying an empty layer -- which would deliver
   the same photo and read as a silent failure. */
.cd-bubble-hint {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    padding: 10px 18px;
    background: rgba(10, 20, 35, 0.84);
    border: 1px solid rgba(79, 175, 252, 0.5);
    border-radius: 999px;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    pointer-events: none;
}

/* The theme centres text inside #hero. Any data-dense block must opt out. */
.cd-bubble-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
    text-align: left;
}

.cd-tool-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}


/* ====================================================================== *
 * 2b. SHARED CONTROL BAR (segmented control)
 * ====================================================================== *
 * One compact bar instead of a tall card: the label sits inline as an
 * eyebrow and the options become a segmented pill track, so several groups
 * fit on one line and the tool's actual output stays above the fold.
 *
 * It declares every property the older per-tool rules set (padding,
 * min-width, flex-direction, font-size...) because those classes are still
 * on the same elements as test hooks — being declared later and at equal
 * specificity is what makes this win.
 */

.cd-tool-controls {
    /* fit-content + auto margins: the bar centres as a whole, but its groups
       share one left edge when they wrap — centring each row instead leaves
       the second group visibly misaligned under the first. */
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    width: fit-content;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    gap: 10px 24px;
    background: rgba(0, 0, 0, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 14px;
    padding: 10px 16px;
    margin-bottom: 20px;
    text-align: left;
}

.cd-tool-controls-group {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.cd-tool-controls-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    color: rgba(255, 255, 255, 0.55);
    margin: 0;
    white-space: nowrap;
}

/* The track groups the options so they read as one control, not N buttons. */
.cd-tool-seg {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: flex-start;
    gap: 2px;
    margin: 0;
    padding: 3px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 999px;
}

.cd-tool-seg-btn {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-width: 0;
    min-height: 0;
    padding: 7px 14px;
    background: transparent;
    border: none;
    border-radius: 999px;
    color: rgba(255, 255, 255, 0.78);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.cd-tool-seg-btn:hover {
    background: rgba(255, 255, 255, 0.10);
    border-color: transparent;
    color: #fff;
}

.cd-tool-seg-btn.active {
    background: #4FAFFC;
    border-color: transparent;
    color: #fff;
}

/* Icons ride inline with the label, with an explicit box so they can't stretch. */
.cd-tool-seg-btn svg {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
}

.cd-tool-seg-btn span {
    font-size: 13px;
    font-weight: 600;
}

/* A secondary value inside a pill (ratio, dpi): visible, not competing. */
.cd-tool-seg-btn .cd-tool-seg-meta {
    font-size: 11px;
    font-weight: 600;
    opacity: 0.6;
}

@media (max-width: 768px) {
    .cd-tool-controls {
        gap: 10px 14px;
        padding: 10px 12px;
    }

    .cd-tool-controls-group {
        flex: 1 1 100%;
        flex-wrap: wrap;
    }

    .cd-tool-seg-btn {
        padding: 7px 11px;
        font-size: 12px;
    }
}

/* ====================================================================== *
 * 3. RESPONSIVE
 * ====================================================================== */

@media (max-width: 768px) {
    .cd-bubble-controls { padding: 16px; }
    .cd-bubble-buttons { gap: 8px; }
    .cd-bubble-btn { padding: 12px 16px; min-width: 80px; }
    .cd-bubble-btn svg { width: 24px; height: 24px; }
    .cd-bubble-btn span { font-size: 12px; }

    #hero.content-grid-mod .converter-wrapper {
        padding: 20px;
        margin-top: 40px;
        border-radius: 12px;
    }

    #hero.content-grid-mod .converter-wrapper .convertor[data-tool-type] .drop-area { padding: 20px; }

    #hero.content-grid-mod .converter-wrapper .convertor[data-tool-type] .drop-area h2 {
        font-size: 22px;
        margin-bottom: 17px;
    }

    #hero.content-grid-mod .converter-wrapper .convertor[data-tool-type] .drop-area::before {
        height: 60px;
        width: 60px;
    }

    .cd-tool-file-preview-list-item { flex-direction: column; }

    .cd-tool-file-preview-list-item .arrow-separator {
        transform: rotate(90deg);
        padding: 10px 0;
    }

    #hero.content-grid-mod .converter-wrapper .cd-stock-assets {
        flex-direction: column;
        align-items: flex-start;
    }

    #hero.content-grid-mod .converter-wrapper .cd-stock-assets .cd-stock-assets-item img {
        width: 60px;
        height: 60px;
    }
}

/* ---------------------------------------------------------------------- *
 * SPECIFICITY VS THEME
 * ---------------------------------------------------------------------- *
 * The theme declares `#hero.content-grid-mod .intro p { font-size: 22px }`.
 * That is (1,2,1) -- it carries an ID -- and no class-only selector beats it,
 * so every report paragraph rendered at 22px instead of the 12-14px declared
 * here. Measured across four tools.
 *
 * Repeating the same #hero in front wins the specificity back. The order of
 * the two layers below is decided by specificity, not source position:
 *
 *   base     ...intro .cd-tool-file-preview-wrapper p   -> (1,3,1)
 *   by class ...intro .cd-tool-file-preview-wrapper .x  -> (1,4,0)
 *
 * Four classes beat three classes plus an element, so the class rules win.
 * They must keep the container: without it they sit at (1,3,0) and the base
 * overrides all of them.
 */

#hero.content-grid-mod .intro .cd-tool-file-preview-wrapper p,
#hero.content-grid-mod .intro .cd-tool-file-preview-wrapper li,
#hero.content-grid-mod .intro .cd-tool-file-preview-wrapper td { font-size: 14px; }

#hero.content-grid-mod .intro .cd-tool-file-preview-wrapper .cd-tools-download-all-btn { font-size: 16px; }

#hero.content-grid-mod .intro .cd-tool-file-preview-wrapper .cd-bubble-counter { font-size: 11px; }

#hero.content-grid-mod .intro .cd-tool-file-preview-wrapper .cd-tool-badge { font-size: 12px; }

#hero.content-grid-mod .intro .cd-tool-file-preview-wrapper .cd-tool-controls-label { font-size: 11px; }

#hero.content-grid-mod .intro .cd-tool-file-preview-wrapper .cd-tool-seg-btn { font-size: 13px; }