/*
 * image-to-text.css
 * NEW styles for the image-to-text redesign (Figma 3-frame target).
 * Agent E — created as a standalone file; style.css is READ-ONLY.
 *
 * Tokens mirrored from style.css:
 *   --action_color : #623cea (purple)
 *   off-whites     : #fafafa / #f9f9f9
 *   borders        : #dbdbdb / #ccc / #969696 / #e6e6e6
 *   text           : #000 / #767676 / #a9a9a9
 *   font           : "Plus Jakarta Sans", sans-serif
 *   radii          : cards 10-15px, buttons 8-10px
 *   breakpoint     : 992px  (Bootstrap lg)
 */

/* ============================================================
   1. UTILITY
   ============================================================ */
.d_none {
    display: none !important;
}


/* ============================================================
   2. FRAME 1 — First-screen Figma deltas
   (Most base classes already live in style.css — only deltas here.)
   ============================================================ */

/* Ensure upload-box content is vertically centred (delta if needed) */
.main_tool_inner.image_to_text {
    justify-content: center;
    align-items: center;
    text-align: center;
}

/* Bold heading ~20px */
.drag_drop.image_to_text {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-weight: 600;
    font-size: 20px;
    line-height: 28px;
    color: #000;
    margin-bottom: 0;
}

/* Supported formats muted line — 12px / 400 (overrides style.css !important 16px) */
.files_supported.image_to_text {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 16px !important;
    font-weight: 400;
    line-height: 18px;
    color: #767676;
    margin-bottom: 0;
}

/* Upload row inline on desktop */
.upload_row.image_to_text {
    align-items: center;
}

/* Keep the QR-scan / camera / URL icons vertically centered in line with the
   "Upload File" button (they were sitting slightly off because the option row
   had no cross-axis alignment of its own). */
.upload_row.image_to_text .other_option_main {
    align-items: center;
}

/* Dedicated class for the image-to-text upload option buttons (QR scan / camera / URL)
   — replaces the shared .more_options (base styling, since style.css only styles .more_options) */
.image-to-text-options {
    height: 62px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: none;
    background: transparent;
    cursor: pointer;
}


/* ============================================================
   3. OCR METHOD TOGGLE  (Figma Frame 1 — pill below upload row)
   ============================================================ */

.ocr_method_toggle {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 12px;
    flex-wrap: wrap;
    background: #F3F3F3;
    min-height: 50px;
    border-radius: 5px;
    min-width: min(320px, 100%);   /* never wider than the container — was 320px, which overflowed the dashed box on <360px phones */
}

.ocr_method_option {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 8px;
    border: none;
    background-color:transparent;
    color: #000;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 17px;
    font-weight: 400;
    line-height: 20px;
    cursor: pointer;
    user-select: none;
    height: 40px;
    min-width: 150px;
    /* text-align: center; */
    justify-content: center;
    /* transition: background 0.15s, border-color 0.15s, color 0.15s; */
}

/* .ocr_method_option:hover {
    border-color: #969696;
    color: #000;
} */

/* Active state: purple tint */
.ocr_method_option.active {
    /* background-color: #623cea1a; */
    /* border-color: var(--action_color, #623cea); */
    background-color: #FFFFFF;
    color: var(--action_color, #623cea);
    border-radius: 5px;
    font-weight: 500;
}
.ocr_method_option.active .ocr_method_label{
font-weight: 500;
}
.ocr_method_option.active .ocr_method_info path{
    fill: var(--action_color, #623cea);
    stroke: var(--action_color, #623cea);
    /* filter: invert(31%) sepia(94%) saturate(2367%) hue-rotate(246deg) brightness(95%) contrast(95%); */
}

.ocr_method_label {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    pointer-events: none;
}

.ocr_method_info {
    width: 14px;
    height: 14px;
    pointer-events: auto;
    cursor: default;
}

/* Hover tooltip on the Simple / Formatted OCR info icons */
.ocr_method_tip {
    position: relative;
    display: inline-flex;
    align-items: center;
    line-height: 0;
}

.ocr_method_tip::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    width: max-content;
    max-width: 220px;
    background: #1f1f1f;
    color: #fff;
    text-align: center;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    padding: 6px 10px;
    border-radius: 6px;
    white-space: normal;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease;
    z-index: 20;
    pointer-events: none;
}

/* little arrow */
.ocr_method_tip::before {
    content: "";
    position: absolute;
    bottom: calc(100% + 3px);
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #1f1f1f;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease;
    z-index: 20;
    pointer-events: none;
}

.ocr_method_tip:hover::after,
.ocr_method_tip:hover::before {
    opacity: 1;
    visibility: visible;
}




/* ============================================================
   4. FRAME 3 — Last-screen / Result container
   ============================================================ */

/* Outer wrapper card (combines with .conversion_container class) */
.itt_result_container {
    background-color: #ffffff;
    border: 1px solid #e6e6e6;
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.08);
    border-radius: 10px;
    overflow: visible;            /* allow per-card Export-as dropdown to escape the container */
}

/* Top bar: reuses .output_stage; add padding + bottom border */
.itt_result_topbar {
    /* right inset = result-card padding (20px) + card-body padding (16px) so the topbar's
       Export/Download line up with the per-card action buttons; left stays 20px to align
       with the card's left edge */
    padding: 14px 36px 14px 20px;
    /* border-bottom: 1px solid #e6e6e6; */
    align-items: center;         /* override .output_stage align-items:flex-start */
    height: auto !important;     /* override .output_stage fixed height */
    gap: 12px;
    flex-wrap: wrap;
    justify-content: flex-start;
}

/* Desktop order: Start Over (left) · Export · Download (grouped on the right) */
.itt_result_topbar .startover { order: 1; }
.itt_topbar_actions {
    order: 2;
    margin-left: auto;       /* push Export + Download to the right; Start Over stays left */
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.itt_result_topbar .download_all { order: 3; }

/* Export dropdown menu — styled to match the old-image-to-text dropdown */
.itt_export_menu {
    min-width: 240px;
    height: auto !important;        /* override .export_menu fixed height */
    max-height: none !important;
    padding: 8px 12px;
    border: 1px solid #e6e6e6;
    border-radius: 14px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
    background: #fff;
}

.itt_export_menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 14px;
    font-weight: 500;
    padding: 9px 6px;
    color: #000;
    border-bottom: 1px solid #ededed;
    border-radius: 0;
    white-space: normal;
}

.itt_export_menu li:last-child .dropdown-item {
    border-bottom: none;
}

.itt_export_menu .dropdown-item img {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.itt_export_menu .dropdown-item:hover {
    background-color: #623cea1a;
    color: var(--action_color, #623cea);
}


/* ============================================================
   5. RESULTS LIST
   ============================================================ */

.itt_results_list {
    display: flex;
    flex-direction: column;
    gap: 0;
}


/* ============================================================
   6. RESULT CARD
   ============================================================ */

.itt_result_card {
    position: relative;
    padding: 12px 20px;          /* outer spacing around each shadowed inner card */
}

/* Inner flex row (thumb left, body right) */
.itt_card_inner {
    display: flex;
    flex-direction: row;
    gap: 0;                                 /* gray thumb panel sits flush against the body */
    align-items: stretch;                   /* thumb + body share equal height */
    background-color: #fafafa;
    border-radius: 10px;
    overflow: visible;                      /* allow Export-as dropdown to overflow (children round their own corners) */
    box-shadow: 0px 0px 4px 0px #00000033;
    /* padding-left: 20px;/ */
}


/* ============================================================
   7. THUMBNAIL COLUMN
   ============================================================ */

.itt_card_thumb {
    display: flex;
    flex-direction: row;        /* #N sits BESIDE the thumbnail (Figma frame 3) */
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-shrink: 0;
    padding: 14px 16px;
    background: #FAFAFA;        /* gray thumbnail panel (full height via parent stretch) */
    border-radius: 10px 0 0 10px;   /* round left corners (replaces parent overflow:hidden) */
}

/* Card number label (#1, #2 …) */
.itt_card_num {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 20px;
    font-weight: 400;
    color: #000;
    line-height: 1;
    flex-shrink: 0;
    
}

/* Source image thumbnail */
.srcImage {
    width: 130px;
    height: 106px;
    object-fit: contain;
    border-radius: 8px;
    border: 1px solid #dbdbdb;
    background-color: #f9f9f9;
    cursor: pointer;
    transition: box-shadow 0.15s;
}

.srcImage:hover {
    box-shadow: 0 0 0 2px var(--action_color, #623cea);
}


/* ============================================================
   8. CARD BODY
   ============================================================ */

.itt_card_body {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
        "pills     pills"
        "text      text"
        "translate actions";
    align-items: center;
    gap: 8px;
    min-width: 0; /* prevent flex overflow */
    padding: 14px 16px;
    background-color: #fff;
    border-radius: 0 10px 10px 0;   /* round right corners (replaces parent overflow:hidden) */
}

/* Desktop placement: pills/text span full width; Translate (left) + actions (right) share one row */
.itt_card_body > .itt_card_meta { display: none; }
.itt_card_body > .translate_pills { grid-area: pills; justify-self: start; }
.itt_card_body > .tab-content { grid-area: text; }
.itt_card_body > .itt_card_actions { grid-area: actions; justify-self: end; margin: 0; }
.itt_card_body > .translate,
.itt_card_body > .select2,
.itt_card_body > .select2-container { grid-area: translate; justify-self: start; }
.select2-container--default .select2-selection--single{
    border: none !important;
    box-shadow: 0px 0px 2px 0px #00000033;

}
.select2-container--default .select2-selection--single .select2-selection__arrow b{
    border-color: #000 transparent transparent transparent !important;
}
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b{
    border-color: transparent transparent #000 transparent !important;
}

@media screen and (min-width:991px) {
.itt_card_body > .select2-container { grid-area: translate; justify-self: end; }
    
}


/* ============================================================
   9. TRANSLATE PILLS NAV
   ============================================================ */

.translate_pills {
    gap: 4px;
}

.translate_pills .nav-link {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 13px;
    padding: 4px 12px;
    border-radius: 6px;
    color: #767676;
    border: 1px solid #e6e6e6;
    background: transparent;
}

.translate_pills .nav-link.active {
    background-color: var(--action_color, #623cea);
    border-color: var(--action_color, #623cea);
    color: #fff;
}


/* ============================================================
   10. RESULT TEXTAREA
   ============================================================ */

/* Clean borderless text block (Figma frame 3 — reads as plain text, not a form field) */
.result_txt {
    width: 100%;
    min-height: 64px;
    max-height: 120px;                  /* compact collapsed preview (was 360px) */
    padding: 0;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 15px;
    line-height: 1.75;
    color: #000;
    background-color: transparent;
    border: none;
    border-radius: 0;
    resize: none;
    outline: none;
    box-shadow: none;
    box-sizing: border-box;
    overflow-y: auto;
    transition: max-height 0.35s ease, min-height 0.35s ease;   /* smooth expand/collapse */
}

.result_txt:focus {
    border: none;
    background-color: transparent;
    outline: none;
}

/* Expanded state — taller (finite max-height so the change animates) */
.result_txt.itt_expanded {
    max-height: 520px;
    min-height: 200px;
}

/* QR action toggle feedback */
.itt_action.active {
    color: var(--action_color, #623cea);
    background-color: #623cea1a;
}

/* Per-result QR <img> is just a hidden data holder now (QR shown in #ittQrModal) */

/* Icon-only action buttons (QR, Export-as) */
.itt_action.itt_icon_only {
    padding: 6px;
    gap: 0;
}
.itt_action.itt_icon_only img {
    width: 16px;
    height: 16px;
}
/* Single-file (per-card) Export-as toggle gets an outlined border */
.itt_action.itt_export_toggle {
    /* border: 1px solid #969696; */
    box-shadow: 0px 0px 2px 0px #00000033;

}

/* Primary (purple) per-card Download button */
.itt_action.itt_dl_primary {
    background-color: var(--action_color, #623cea);
    color: #fff;
    border: none;
    min-width: 102px;
    justify-content: center;
    font-weight: 600;
}
.itt_compare_download{
    font-size: 21px !important;
    font-weight: 500 !important;
}
.itt_compare_copy,.itt_compare_back,.itt_compare_download,.itt_compare_export .itt_action{
    height: 36px !important;
}
.itt_compare_export .itt_action{
    min-width: 42px;
    display: flex;
    justify-content: center;
    align-items: center;
    /* padding: 10px; */
}
.itt_action.itt_dl_primary:hover {
    background-color: #5633D1;
    color: #fff;
}
.itt_action.itt_dl_primary img {
    filter: brightness(0) invert(1);   /* force white download icon on purple */
    opacity: 1;
}
/* Per-card Download follows the card's expand state:
   action color when expanded, light gray (#E9E9E9) when collapsed */

/* .itt_result_card:not(.itt_card_expanded) .itt_action.itt_dl_primary:hover {
    background-color: #dedede;
    color: #000;
} */

/* QR code modal */
.itt_qr_modal_img {
    width: 240px;
    max-width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: contain;
    border: 1px solid #e6e6e6;
    border-radius: 8px;
    padding: 8px;
    background: #fff;
}
.itt_qr_modal_caption {
    margin-top: 12px;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 13px;
    color: #767676;
}


/* ============================================================
   11. CARD ACTIONS ROW
   ============================================================ */

.itt_card_actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
    margin-top: 4px;
}

/* Generic small action button */
/* Lighter, text-like action buttons (Figma frame 3 — no heavy pill border) */
.itt_action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    background-color: transparent;
    border: none;
    border-radius: 5px;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 16px;
    font-weight: 400;
    color: #000;
    cursor: pointer;
    /* transition: background 0.15s, color 0.15s; */
    white-space: nowrap;
}

.itt_action:hover {
    color: var(--action_color, #623cea);
    background-color: #623cea1a;
}

.itt_action img {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    /* opacity: 0.75; */
}

.itt_action:hover img {
    opacity: 1;
}

/* Translate select — styled to match .itt_action */
/* Translate control — light/text-like to match the action buttons */
.itt_translate,
.translate {
    display: inline-flex;
    align-items: center;
    padding: 5px 24px 5px 10px;
    width: 125px;
    background-color: #FFFFFF;
    box-shadow: 0px 0px 2px 0px #00000033;
    border: none;
    border-radius: 6px;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: #555;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    height: 28px;
    box-sizing: border-box;
    outline: none;
    /* hide native arrow in some browsers */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23555555' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
}

.itt_translate:focus,
.translate:focus {
    color: var(--action_color, #623cea);
}

.itt_translate:hover,
.translate:hover {
    color: var(--action_color, #623cea);
    background-color: #623cea1a;
}

/* When select2 enhances the translate select: 125px wide, white, subtle shadow, 28px tall */
.itt_card_actions .select2-container {
    width: 125px !important;
}
.itt_card_actions .select2-container--default .select2-selection--single {
    border: none;
    background-color: #FFFFFF;
    box-shadow: 0px 0px 2px 0px #00000033;
    width: 125px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    border-radius: 6px;
    box-sizing: border-box;
}
.itt_card_actions .select2-container--default .select2-selection--single:hover {
    background-color: #623cea1a;
}
.itt_card_actions .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #555;
    font-size: 13px;
    font-weight: 500;
    padding-left: 8px;
    padding-right: 22px;
    line-height: 26px;
}
.itt_card_actions .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 26px;
}

/* Uniform 28px height for every control in the actions row */
.itt_card_actions .itt_action,
.itt_card_actions .itt_export_single {
    height: 28px;
    box-sizing: border-box;
    box-shadow: 0px 0px 2px 0px #00000033;

}


/* ============================================================
   12. CARD LOADER OVERLAY
   ============================================================ */

.itt_card_loader {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background-color: rgba(255, 255, 255, 0.88);
    border-radius: 10px;
    z-index: 10;
}

/* Purple ring spinner (local keyframes — does NOT rely on style.css @keyframes rotation) */
.itt_spinner {
    width: 48px;
    height: 48px;
    border: 4px solid #623cea;
    border-bottom-color: #623cea33;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: itt_rotation 1s linear infinite;
}

@keyframes itt_rotation {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.converting_text {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: var(--action_color, #623cea);
    line-height: 1.4;
}


/* ============================================================
   13. COMPARE MODAL ADDITIONS
   ============================================================ */

.compareModal .modal-dialog {
    max-width: 900px;
}

/* Side-by-side layout: image left, extracted text right */
.compareModal .modal-body {
    display: flex;
    flex-direction: row;
    gap: 16px;
    align-items: flex-start;
}

.compareModal .imgCompare {
    flex: 0 0 auto;
    max-width: 45%;
    width: 45%;
    border-radius: 8px;
    border: 1px solid #dbdbdb;
    object-fit: contain;
}

.compare_text {
    flex: 1;
    width: 100%;
    min-height: 360px;
    padding: 10px 12px;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 14px;
    line-height: 1.6;
    color: #000;
    background-color: #fafafa;
    border: 1px solid #dbdbdb;
    border-radius: 8px;
    resize: vertical;
    outline: none;
    box-sizing: border-box;
}

.compare_text:focus {
    border-color: var(--action_color, #623cea);
    background-color: #fff;
}


/* ============================================================
   14. DESKTOP — min-width: 992px
   ============================================================ */

@media (min-width: 992px) {
    /* Thumbnail desktop size */
    .srcImage {
        width: 130px;
        height: 106px;
    }

    /* Card inner: explicit row */
    .itt_card_inner {
        flex-direction: row;
    }

    /* Actions: end-aligned on desktop */
    .itt_card_actions {
        justify-content: flex-end;
    }

    /* Collapsed desktop height kept compact (expanded state overrides via higher specificity) */
    .result_txt {
        min-height: 100px;
    }
}


/* ============================================================
   15. MOBILE — max-width: 991px
   ============================================================ */

@media (max-width: 991px) {

    /* Stack card inner to column on mobile */
    .itt_card_inner {
        flex-direction: column;
        gap: 12px;
    }

    /* Thumbnail: full width, shorter height on mobile */
    .itt_card_thumb {
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
        gap: 10px;
        width: 100%;
    }

    .srcImage {
        width: 80px;
        height: 66px;
    }

    /* Textarea: full width (already width:100%, this is a safety) */
    .result_txt {
        width: 100%;
        min-height: 120px;
    }

    /* Actions: wrap and space-between on mobile */
    .itt_card_actions {
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 6px;
    }

    /* Top-bar: stack on very narrow */
    .itt_result_topbar {
        flex-wrap: wrap;
        padding: 12px 14px;
        gap: 8px;
    }

    /* Compare modal: stack to column on mobile */
    .compareModal .modal-body {
        flex-direction: column;
    }

    .compareModal .imgCompare {
        max-width: 100%;
        width: 100%;
    }

    .compare_text {
        min-height: 200px;
    }

    /* OCR toggle: compact + language-robust — sized to its content and
       centered (NOT stretched full-width), capped at the container so it can
       never overflow, and long labels wrap instead of being clipped. */
    .ocr_method_toggle {
        gap: 6px;
        margin-top: 10px;
        max-width: 100%;                /* never wider than the upload box */
        min-width: 0 !important;        /* was 320/261 — don't force a full-width floor */
        padding: 0px 5px;
    }
    .ocr_method_option{
        min-width: 120px !important;    /* equal, tappable pills; grow for longer text */
        height: auto !important;        /* was fixed 40px — let wrapped text grow the pill */
        min-height: 40px;
        padding: 6px 8px;
        font-size: 14px !important;
        line-height: 1.2;
        white-space: normal;            /* wrap long labels as a fallback */
        text-align: center;
    }
    .itt_compare_download{
    font-size: 16px !important;
    font-weight: 500 !important;
}
.itt_compare_copy, .itt_compare_back, .itt_compare_download, .itt_compare_export {
    height: 30px !important;
}
.itt_compare_export .itt_action{
    min-width: 30px;
    height: 30px !important;
 
}
.urlbtnimg.imgototext{
    height: 16px;
    width: 16px;
}
}


/* ============================================================
   16. INLINE COMPARE VIEW (replaces the result list on Compare)
   ============================================================ */

.itt_compare_view {
    padding: 16px 20px;
}

.itt_compare_inner {
    display: flex;
    flex-direction: row;
    gap: 20px;
    align-items: stretch;
}

/* Left column: original image + zoom */
.itt_compare_left {
    flex: 0 0 42%;
    max-width: 42%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.itt_compare_img_wrap {
    border: 1px solid #e6e6e6;
    border-radius: 8px;
    background: #fff;
    overflow: auto;
    max-height: 520px;
    padding: 8px;
    text-align: center;
}
.itt_compare_img {
    width: 100%;
    height: auto;
    display: inline-block;
    border-radius: 4px;
}
.itt_compare_zoom {
    display: flex;
    align-items: center;
    gap: 12px;
}
.itt_zoom_btn {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: 50%;
    border: 1px solid #ccc;
    background: #fff;
    color: #555;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.itt_zoom_btn:hover {
    border-color: var(--action_color, #623cea);
    color: var(--action_color, #623cea);
}
.itt_zoom_range {
    flex: 1;
    accent-color: var(--action_color, #623cea);
    cursor: pointer;
}

/* Right column: controls + extracted text */
.itt_compare_right {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.itt_compare_topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}
.itt_compare_actions {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
/* Outlined look for Back / Copy / Export (not the purple Download) */
.itt_compare_topbar .itt_action:not(.itt_dl_primary) {
    border: 1px solid #dbdbdb;
}
.itt_compare_heading {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-weight: 700;
    font-size: 20px;
    color: #000;
    margin: 0;
}
.itt_compare_text {
    width: 100%;
    flex: 1;
    min-height: 360px;
    max-height: 540px;
    overflow-y: auto;
    border: none;
    outline: none;
    background: transparent;
    resize: none;
    box-sizing: border-box;
    padding: 0;
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 15px;
    line-height: 1.75;
    color: #000;
}

@media (max-width: 991px) {
    .itt_compare_view {
        padding: 12px 14px;
    }
    .itt_compare_inner {
        flex-direction: column;
    }
    .itt_compare_left {
        flex: none;
        max-width: 100%;
    }
    .itt_compare_text {
        min-height: 240px;
    }
}


/* ============================================================
   17. FIRST-SCREEN MOBILE (image-to-text) — match the mobile mockup
   ============================================================ */
@media (max-width: 991px) {
    /* No big cloud icon on mobile (per mockup) */
    .main_tool_inner.image_to_text .main_icon {
        display: none !important;
    }

    /* Upload File + camera + URL icons inline & centered (not stacked) */
    .upload_row.image_to_text {
        flex-direction: row !important;
        flex-wrap: wrap;
        align-items: center !important;
        justify-content: center !important;
        gap: 12px;
        order: 1;
    }
    .upload_row.image_to_text .other_option_main {
        width: auto !important;
    }
    /* QR "scan from mobile" box isn't used on mobile */
    .upload_row.image_to_text .qr_code {
        display: none !important;
    }

    /* Camera + URL are icon-only (labels hidden) on the right of the upload button */
    .upload_row.image_to_text .camera_upload span,
    .upload_row.image_to_text .url_option .url_text {
        display: none !important;
    }
    .image-to-text.upload_button{
        min-width: 190px !important;
    }

    /* Camera/URL icon buttons forced to a 36x36 square on mobile */
    .image-to-text-options {
        width: auto !important;
        height: 36px !important;
        min-width: 20px !important;
        gap: 1px;
        /* background-color: #f4f4f4; */
        /* border: 1px solid #969696; */
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .other_option_between{
        height: 22px !important;
        margin-top: 7px;
    }
    .image-to-text-option{
        gap: 8px !important;
    }
    /* Order: upload controls → OCR toggle → supported-formats line (per mockup) */
    .main_tool_inner.image_to_text .ocr_method_toggle {
        order: 2;
        /* min-width: */
    }
    .files_supported.image_to_text {
        order: 3;
        margin-top: 6px;
        font-size: 12px !important;
    }
}
@media (max-width:389px){
    .ocr_method_toggle{
        margin-left: auto;
        margin-right: auto;
    }
    .ocr_method_option{
        font-size:12px !important;
        min-width: 100px !important;
        padding: 6px 10px !important;
    }
}

/* ============================================================
   18. RESULT SCREEN MOBILE — controls (Start Over / Export as / Download)
   move to the bottom, like the jpg-to-excel mobile result screen
   ============================================================ */
@media (max-width: 991px) {
    /* Stack: results list, then the control bar at the bottom (like jpg-to-excel mobile) */
    .itt_result_container {
        display: flex;
        flex-direction: column;
    }
    .itt_compare_view { order: 0; }      /* compare view stays on top when shown */
    .itt_results_list { order: 1;
    max-height: 75vh;
    overflow-y: auto;
    }
    .itt_result_topbar {
        order: 2;                         /* control bar below the results */
        margin-top: auto;                 /* pin to the bottom of the result card */
        border-top: 1px solid #e6e6e6;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px;
        padding: 14px;
        flex-direction: row;
    }

    /* Row 1: Download All (wide, purple) + Start Over (small square icon) */
    .itt_result_topbar .download_all {
        order: 1;
        flex: 1 1 auto;
        min-width: 0;
        height: 48px;
        margin: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .itt_result_topbar .startover {
        order: 2;
        flex: 0 0 auto;
        width: 48px;
        min-width: 48px;
        height: 48px;
        padding: 0;
        gap: 0;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .itt_result_topbar .startover span {
        display: none;                    /* icon-only Start Over */
    }

    /* Row 2: Export as — full width (the dropdown wrapper drops to its own line) */
    .itt_result_topbar .itt_topbar_actions {
        order: 3;
        flex: 1 1 100%;
        width: 100%;
        margin-left: 0;                   /* reset the desktop auto-margin */
    }
    .itt_result_topbar .export_all {
        width: 100%;
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
    }
    .itt_result_topbar .export_all.dropdown-toggle::after {
        display: none;                    /* hide caret on mobile (matches mockup) */
    }
}


/* ============================================================
   19. RESULT CARD MOBILE — compact item layout
   (small 56x56 image, no #N, file meta beside image, actions top-right)
   ============================================================ */

/* File meta (filename / size / converted) — shown on mobile only */
.itt_card_meta {
    display: none;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.itt_card_filename {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #000;
    line-height: 18px;
    word-break: break-word;
}
.itt_card_size {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 12px;
    color: #a9a9a9;
    line-height: 16px;
}
.itt_card_status {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 10px;
    font-weight: 500;
    color: var(--action_color, #623cea);
    line-height: 16px;
}

/* Success = green, error/no-text = danger red */
.itt_card_status.itt_status_success {
    color: #41CB69;
}

.itt_card_status.itt_status_error {
    color: #dc3545;
}

/* Per-card Download icon: hidden on desktop (text only), shown on mobile (icon only) */
.itt_card_actions .itt_dl_primary img {
    display: none;
}

@media (max-width: 991px) {
    .itt_result_card { padding: 8px 12px; }

    /* Hide #N */
    .itt_card_num { display: none !important; }

    /* Small 56x56 thumbnail */
    .srcImage {
        width: 42px !important;
        height: 42px !important;
        box-sizing: border-box;
    }

    /* Flatten the body so the card reads:
       [ img | meta | actions ]  →  divider  →  full-width text  →  translate  */
    .itt_card_inner {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        grid-template-areas:
            "img   meta   actions"
            "pills pills  pills"
            "text  text   text"
            "trans trans  trans";
        gap: 4px 10px;
        align-items: start;
        background: #fff;
        padding: 10px;
    }
    .itt_card_body { display: contents; }

    .itt_card_thumb {
        grid-area: img;
        padding: 0;
        background: transparent;
        border-radius: 0;
        width: auto;
    }
    .itt_card_body > .itt_card_meta {
        display: flex;
        grid-area: meta;
    }
    .itt_card_body > .itt_card_actions {
        grid-area: actions;
        justify-content: flex-end;
        align-content: flex-start;
        flex-wrap: wrap;
        gap: 8px;
        margin: 0;
    }
    .itt_card_body > .translate_pills { grid-area: pills; }
    .itt_card_body > .tab-content {
        grid-area: text;
        border-top: 1px solid #e6e6e6;          /* divider under the header */
        padding-top: 12px;
        margin-top: 4px;
    }
    .itt_card_body > .translate,
    .itt_card_body > .select2,
    .itt_card_body > .select2-container { grid-area: trans; }

    /* Action icons → outlined squares, icon-only */
    .itt_card_actions .itt_action,
    .itt_card_actions .itt_export_toggle {
        width: 30px;
        height: 30px;
        min-width: 30px;
        padding: 0;
        gap: 0;
        border: transparent;
        border-radius: 5px;
        background: #fff;
        justify-content: center;
    }
    .itt_card_actions .itt_action span { display: none; }
    .itt_card_actions .itt_action img { opacity: 1; }

    /* Order: expand · compare · copy · download · export */
    .itt_card_actions .expand_btn { order: 1; }
    .itt_card_actions .compare_btn { order: 2; }
    .itt_card_actions .copyData,
    .itt_card_actions .copyFormatted { order: 3; }
    .itt_card_actions .itt_dl_primary { order: 4; }
    .itt_card_actions .itt_export_single { order: 5; }

    /* QR not shown on mobile */
    .itt_card_actions .qr_result_btn { display: none !important; }

    /* Download = plain outlined icon (not purple/gray) */
    .itt_card_actions .itt_dl_primary {
        background: #fff !important;
        color: #000 !important;
        border: 1px solid #dbdbdb !important;
    }
    .itt_card_actions .itt_dl_primary span { display: none; }
    .itt_card_actions .itt_dl_primary img {
        display: inline-block;
        filter: none !important;
    }

    /* Translate → outlined dropdown at the bottom */
    .itt_card_inner .select2-container { width: 160px !important; }
    .itt_card_inner .select2-container--default .select2-selection--single {
        border: none;
        box-shadow: 0px 0px 2px 0px #00000033;

        border-radius: 5px;
        height: 30px;
        background: #fff;
        display: flex;
        align-items: center;
    }
    .itt_card_inner .select2-container--default .select2-selection--single .select2-selection__rendered {
        color: #555;
        padding-left: 12px;
        line-height: 30px;
        font-size: 14px !important;
        font-weight: 400 !important;
    }
    .itt_card_body > .translate {
        width: 120px;
        height: 30px;
        border: 1px solid #dbdbdb;
        border-radius: 8px;
        background: #fff;
        box-shadow: none;
    }
}


/* ============================================================
   20. EXTRA-SMALL PHONES — below 400px width
   Every font-size shrunk by 2px from the value that renders at
   this viewport. Where the size comes from the max-width:991px
   blocks above (with !important), we mirror that !important so
   this override actually wins.
   ============================================================ */
@media (max-width: 399.98px) {
    /* Frame 1 — upload screen */
    .drag_drop.image_to_text          { font-size: 18px; }            /* was 20px */
    .files_supported.image_to_text    { font-size: 10px !important; } /* 12px at <=991px */

    /* OCR method toggle */
    .ocr_method_option                { font-size: 12px !important; } /* 14px at <=991px */
    .ocr_method_label                 { font-size: 12px; }            /* was 14px */
    .ocr_method_tip::after            { font-size: 10px; }            /* was 12px */

    /* Export dropdown */
    .itt_export_menu .dropdown-item   { font-size: 12px; }            /* was 14px */

    /* Result card */
    .itt_card_num                     { font-size: 18px; }            /* was 20px */
    .translate_pills .nav-link        { font-size: 11px; }            /* was 13px */
    .result_txt                       { font-size: 13px; }            /* was 15px */
    .itt_qr_modal_caption             { font-size: 11px; }            /* was 13px */
    .converting_text                  { font-size: 11px; }            /* was 13px */

    /* Action buttons + translate control */
    .itt_action                       { font-size: 14px; }            /* was 16px */
    .itt_translate,
    .translate                        { font-size: 11px; }            /* was 13px */

    /* Card meta (mobile) */
    .itt_card_filename                { font-size: 12px; }            /* was 14px */
    .itt_card_size                    { font-size: 10px; }            /* was 12px */
    .itt_card_status                  { font-size: 8px; }             /* was 10px */

    /* Compare views */
    .compare_text                     { font-size: 12px; }            /* was 14px */
    .itt_zoom_btn                     { font-size: 16px; }            /* was 18px */
    .itt_compare_heading              { font-size: 18px; }            /* was 20px */
    .itt_compare_text                 { font-size: 13px; }            /* was 15px */
    .itt_compare_download             { font-size: 14px !important; } /* 16px at <=991px */

    /* Mobile translate select2 rendered text (14px !important at <=991px) */
    .itt_card_inner .select2-container--default .select2-selection--single .select2-selection__rendered {
        font-size: 12px !important;
    }
}


/* ============================================================
   21. LANGUAGE-ROBUST "Add URL" ROW (mobile)
   Translated "Add URL" / "Enter URL" labels are longer than the
   English originals, but style.css splits the row with fixed
   70%/30% (first screen) and 80%/20% (second screen) widths and no
   shrink control — so the button text clips or the row overflows
   the screen. Instead: let the input flex and the button size to
   its own label. Scoped to image-to-text.css (this page only).
   ============================================================ */
@media (max-width: 991px) {
    /* First-screen URL bar (.urlArea — desktop + mobile variants share .urlbtn) */
    .urlinput {
        flex: 1 1 auto;
        min-width: 0 !important;     /* was 70% / 328px — shrink to share the row */
        width: auto;
    }
    .urlbtn {
        flex: 0 0 auto;
        width: auto !important;
        min-width: 64px !important;  /* was 30% — only as wide as the label needs */
        padding: 0 16px;
        white-space: nowrap;         /* keep the label on one line */
    }

    /* Second-screen "Add More" URL bar (.more_url_div) */
    .more_url_input {
        flex: 1 1 auto;
        min-width: 0 !important;     /* was 80% / 70% */
        width: auto;
    }
    .more_add_url {
        flex: 0 0 auto;
        width: auto !important;
        min-width: 64px !important;  /* was 20% / 30% */
        padding: 0 28px 0 16px;      /* extra right room for the absolute close (X) icon */
        white-space: nowrap;
    }
}