/**
 * Halftone 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. Halftone SPECIFIC
 * ====================================================================== */

.convertor[data-tool-type="halftone"] .drop-area h2 { text-transform: none; }

.cd-ht-report {
    flex: 1 1 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: stretch;
    text-align: left;
    color: #fff;
}

/* Real white background, not the theme's blue: a halftone is ink on PAPER, and on blue the
   black dots do not read as print. */
.cd-ht-stage {
    display: flex;
    justify-content: center;
    padding: 16px;
    background: #ffffff;
    border-radius: 14px;
}

.cd-ht-canvas {
    display: block;
    max-width: 100%;
    height: auto;
    /* Sin suavizado al escalar: el punto es el grano, y el navegador lo difuminaria. */
    image-rendering: pixelated;
}

.cd-ht-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 12px;
    font-size: 14px;
}

.cd-ht-meta .file-name { font-weight: 600; word-break: break-all; }

.cd-ht-verdicts {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cd-ht-warning {
    margin: 0;
    padding: 12px 14px;
    border-radius: 10px;
    border-left: 3px solid transparent;
    background: rgba(255, 255, 255, 0.06);
    font-size: 14px;
    line-height: 1.5;
}

/* The three warning levels use the palette the theme already paints on this page:
   #4faffc for informational, #ff5050 -- its only alert colour -- for what the user should
   change. The amber previously used here is not in the Cloudinary palette; the theme's only
   oranges (#ff6900, #fcb900) are WordPress block presets. */
.cd-ht-warning.is-warn { border-left-color: #ff5050; }
.cd-ht-warning.is-pass { border-left-color: #37c98b; }
.cd-ht-warning.is-note { border-left-color: #4FAFFC; }

.cd-ht-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.cd-ht-download {
    border: 0;
    background: #4FAFFC;
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    border-radius: 2em;
    padding: 11px 22px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.cd-ht-download:hover { background: #3a9ae8; }

.cd-ht-note {
    margin: 0;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.55);
}

/* ====================================================================== *
 * 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-ht-report { gap: 12px; }
    .cd-ht-stage { padding: 8px; }
    .cd-ht-warning { font-size: 13px; }

    #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.
 * Repeating the same #hero in front wins it back; the class rules keep the
 * container so they sit at (1,4,0) and beat the base at (1,3,1).
 */

#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-ht-note { font-size: 13px; }

#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; }