/*
 * id-card-ocr — page styles (was inline <style> in id-card-ocr.blade.php).
 * Loaded only by that view, right after new-theme/style.css, so rules here
 * affect this tool only.
 */
/* ===================== 1. PDF To Word ===================== */
.ptw_conversion_container {
    min-height: auto !important;
    display: flex;
    flex-wrap: wrap;
}

/* Desktop: Download All sits on the same line as Start Over instead of a
separate row under the results list. .ptw_results_header and .ptw_bottom_bar
are reordered onto the container's first flex line (space-between pushes
Start Over left / Download All right); #results_row is forced onto its own
line below via flex-basis:100%. */
@media (min-width: 992px) {
    .ptw_conversion_container {
        align-items: center;
        justify-content: space-between;
    }

    .ptw_results_header {
        order: 1;
    }

    .ptw_bottom_bar {
        order: 2;
        padding: 12px 16px;
    }

    .ptw_status_text,
    .ptw_bottom_reset {
        display: none;
    }

    .ptw_bottom_bar .download_all {
        min-width: 180px;
    }

    #results_row {
        order: 3;
        flex: 1 1 100%;
    }
}

/* Mobile only: full viewport height, file list at the top, Download All
pinned to the bottom (margin-top:auto on .ptw_bottom_bar below) — matches
the screen transition from the upload screen without touching desktop,
which stays sized to its own content (flex row, reordered above).
.last_screen is prefixed (instead of bare .ptw_conversion_container) to
out-specificity the unrelated .conversion_container mobile reset further
down this file (the id-card-ocr leftover, see its own comment) rather than
fight it on source order. */
@media (max-width: 991px) {
    .last_screen .ptw_conversion_container {
        flex-direction: column;
        min-height: 75vh !important;
    }

}

/* #after_tool_ad (shared ads.after_tool include) is a bare Bootstrap .row,
whose default -12px side margins have nothing to cancel them out here (its
parent carries no matching gutter padding) — it bleeds 12px past the
viewport's right edge and is the page's actual horizontal-scroll source on
mobile-width screens, confirmed by measuring document.documentElement
scrollWidth vs clientWidth with/without it. Scoped to this page only since
ads/after_tool.blade.php is shared sitewide. */
@media (max-width: 991px) {
    #after_tool_ad.row {
        margin-left: 0;
        margin-right: 0;
    }
}

/* Deliberately NOT .conversion_inner_container — that shared class
    carries height:100%/align-items:stretch meant for the files_list +
    display_preview two-pane layout, which stretched this simple header
    row to fill the full (previously 525px) box, shoving the result
    cards down below a huge empty gap. */
.ptw_results_header {
    border-bottom: 1px solid #eee;
}

.result_card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 10px;
    box-shadow: 0px 0px 4px 0px #00000014;
}

.result_card_info {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.result_icon {
    flex-shrink: 0;
}

.result_name {
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.result_meta {
    color: #767676;
    text-transform: uppercase;
    font-size: 12px;
}

.result_status {
    color: var(--action_color);
    font-size: 12px;
}

/* Failed conversions stay danger red, not the theme colour */
.result_status.result_status_error {
    color: #dc3545;
}

.ptw_download_btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 20px;
    border: 1px solid #cccccc;
    border-radius: 8px;
    background: #fff;
    color: #000;
    font-weight: 500;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

/* Hover fills with the brand color (same as .convert_button/.download_all);
   active goes one shade darker — same #5633D1 those buttons use on hover,
   since the bordered Download button only reaches that intensity on press. */
.ptw_download_btn:hover {
    background: var(--action_color);
    border-color: var(--action_color);
    color: #fff;
}

.ptw_download_btn:active {
    background: #5633D1;
    border-color: #5633D1;
    color: #fff;
}

.ptw_download_btn.disabled {
    pointer-events: none;
    opacity: 0.5;
}

/* ============================================================
Bottom status bar (Figma results frame, node 10765:9749): status
text + "Download All" + a reset icon. Desktop: just the Download All
button, reordered onto the same line as Start Over by the
.ptw_conversion_container flex rules above (status text/reset icon
hidden there — .startover in the header already covers "go back").
Mobile: stays in normal document flow right after the results list,
matching the first screen's .convert_bottom (border-top divider, not
pinned to the viewport) rather than id-card-ocr's fixed
.idco-mobile-status-bar.
============================================================ */
.ptw_bottom_bar {
    display: flex;
    align-items: center;
    gap: 10px;
}

@media (max-width: 991px) {
    .ptw_bottom_bar {
        display: none;
        flex-wrap: wrap;
        gap: 10px 12px;
        padding: 16px;
        border-top: 1px solid #00000033;
        margin-top: auto;
    }

    .ptw_bottom_bar.ptw_visible {
        display: flex;
    }

    .ptw_status_text {
        flex: 0 0 100%;
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 17px;
        font-weight: 700;
        color: #1A1A1A;
    }

    .ptw_bottom_bar .download_all {
        flex: 1;
        min-width: 0 !important;
        height: 50px !important;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 10px;
        border: none;
        border-radius: 8px !important;
        font-size: 18px !important;
    }

    .ptw_bottom_reset {
        flex-shrink: 0;
        width: 50px;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid #CFCFCF;
        border-radius: 8px;
        background: #fff;
    }

    .ptw_bottom_reset img {
        width: 18px;
        height: 18px;
    }
}

/* ============================================================
Pre-convert staging grid (#uploaded_row): "Add More Files" (#more_uploads)
should sit first on desktop, last on mobile — same as jpg-to-pdf's
jtp_file_area. The script inserts newly uploaded items with insertBefore
(#more_uploads), so DOM order alone always puts it first; `order` forces
it first on desktop regardless (belt-and-braces) and pushes it after the
uploaded files on mobile, matching the Figma.
============================================================ */
@media (min-width: 992px) {
    #uploaded_row #more_uploads {
        order: -1;
    }
}

@media (max-width: 991px) {
    #uploaded_row #more_uploads {
        order: 1;
    }
}

/* ============================================================
    Upload-box heading/subtext + Layout/OCR pill toggle — copied
    from png-to-word's own first-screen box (its .pngtoword_heading
    sizing + .ocr_method_toggle component, itself copied there from
    public/assets/new-theme/image-to-text.css, a dedicated stylesheet
    not loaded on this page). Same copy-paste approach, scoped to
    this page's own customstyle so nothing shared is touched.
    ============================================================ */
.drag_drop.pdftoword_heading {
    font-size: 20px;
    font-weight: 600;
}

.files_supported.pdftoword_heading {
    font-size: 16px !important;
}

.first_screen .upload_row {
    align-items: center;
}

.first_screen .upload_row .other_option_main {
    align-items: center;
}

/* new-theme/style.css pins .upload_row to a fixed 391x177 box (with
    matching left offsets on the icon/heading/subtext) at >=1440px,
    tuned for a narrower icon+button-only layout than this one
    (button+QR+link inline, icon/heading centered separately above
    it). Reset back to auto/centered, scoped to this page only. */
@media screen and (min-width: 1440px) {
    .first_screen .upload_row {
        width: auto;
        height: auto;
        margin-left: 0;
    }

    .first_screen .drag_drop,
    .first_screen .files_supported,
    .first_screen .main_icon {
        margin-left: 0;
    }
}

.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%);
}

.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;
    justify-content: center;
}

.ocr_method_option.active {
    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);
}

.ocr_method_label {
    min-width: 75px;
    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;
}

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

.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;
}
.upload_button {
    min-width: 233px;
}
@media (max-width: 991px) {
    .ocr_method_option:first-child .ocr_method_tip::after {
        left: 0;
        right: auto;
        transform: none;
    }

    .ocr_method_option:last-child .ocr_method_tip::after {
        left: auto;
        right: 0;
        transform: none;
    }

    .first_screen {
        overflow-x: clip;
        overflow-y: visible;
    }

    /* png-to-word's reference labels ("OCR"/"Non OCR") are short enough
        that a 120px min-width per button never wraps the toggle to two
        rows. This page's labels ("Layout Mode"/"OCR Mode") are longer,
        so that same floor pushed the pair past the available width on
        phones and wrapped them into a stacked, non-pill look. Force
        nowrap and split the row 50/50 instead, so the two buttons
        always stay side by side regardless of label length — only the
        label text itself may wrap within its half. */
    .ocr_method_toggle {
        flex-wrap: nowrap;
        gap: 6px;
        margin-top: 10px;
        max-width: 100%;
        min-width: 0 !important;
        padding: 0px 5px;
    }

    .ocr_method_option {
        flex: 1 1 0;
        min-width: 0;
        height: auto !important;
        min-height: 40px;
        padding: 6px 8px;
        font-size: 14px !important;
        line-height: 1.2;
        white-space: normal;
        text-align: center;
    }
}

@media (max-width: 389px) {
    .ocr_method_toggle {
        margin-left: auto;
        margin-right: auto;
    }

    .ocr_method_option {
        padding: 6px 6px !important;
    }
}

/* Landing screen, mobile — the icon moves out of .upload_row's button
    column (now a standalone block above the heading/subtext), so it's
    hidden here instead; the Upload File/QR/link row wraps inline, and
    the mode toggle + "Supported formats" line reorder to sit after it.
    Mirrors png-to-word's own first-screen mobile block. */
@media (max-width: 991px) {
    .who_can_section_main>.col-md-4>.card>.card-body {
        padding: 20px;
    }
    .first_screen .main_icon {
        display: none !important;
    }

    .first_screen .upload_row {
        flex-direction: row !important;
        flex-wrap: wrap;
        align-items: center !important;
        justify-content: center !important;
        gap: 12px;
        order: 1;
    }

    .first_screen .upload_row .other_option_main {
        width: auto !important;
    }

    .first_screen .upload_row .qr_code {
        display: none !important;
    }

    .first_screen .upload_button {
        min-width: 190px !important;
    }

    .first_screen .other_option_main .more_options {
        width: auto !important;
        height: 36px !important;
        min-width: 20px !important;
        gap: 1px;
        border-radius: 8px;
        background: transparent !important;
        border: none !important;
        padding: 0 !important;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .first_screen .other_option_between {
        height: 22px !important;
        margin-top: 7px;
    }

    .first_screen .other_option_main {
        gap: 8px !important;
    }

    /* No camera option on this page, so the divider stays desktop-only (its
       d-none d-lg-flex) — forcing it visible left it dangling after Upload. */

    .first_screen .main_tool_inner .ocr_method_toggle {
        order: 2;
    }

    .first_screen .files_supported.pdftoword_heading {
        order: 3;
        margin-top: 6px;
        font-size: 12px !important;
    }
}


/* Format table mobile type size — copied from invoice-ocr.css (also
    on the plain v1 .formats_table this page uses, not just the _v2
    variant). Its th rule (20px/600) duplicates new-theme/style.css's
    own .formats_table th default exactly, so only the td override —
    smaller than style.css's 16px default — is worth copying here.
    invoice-ocr has no overflow-x fix for this table either, so the
    block above stays. */
@media (max-width: 500px) {
    .formats_table td {
        font-size: 14px !important;
        font-weight: 400;
    }
}

/* Footer's ANDROID/IOS buttons (new-theme/includes/footer.blade.php,
    shared sitewide) stay side-by-side (flex-row) until the lg
    breakpoint, each with a fixed min-width:115px — together they don't
    fit their column's width on phones and push the whole page into
    horizontal scroll. Pre-existing sitewide footer issue (not
    pdf-to-word-specific — the shared file isn't touched), but scoping
    the fix to this page's own customstyle, unprefixed, still only
    loads here and resolves the scrollbar the user is seeing on this
    page without risking any other tool's layout. */
@media (max-width: 991px) {
    .footer_btn {
        min-width: 0;
    }
}


/* how_to polish — copied verbatim from invoice-ocr.css's own "How to
    use" block (desktop + mobile). invoice-ocr never fixes the row
    overflow above (its own how_to can still bleed past .col-lg-7 the
    same way — just not enough with its own image/step-text to force
    a visible scrollbar), so that part stays mine; everything below is
    the reference's. */
.text-center > p:has(+ .col-lg-7 .how_to_steps_main) {
    margin-bottom: 40px !important;
}
.how_to_steps .step_content div:has(> br:only-child),
.how_to_steps .step_content p:empty {
    display: none;
}
.how_to_steps .step_content p {
    margin-bottom: 0;
}
@media (min-width: 768px) {
    .row:has(> .how_to_steps_main) > .col-md-6:first-child {
        padding-right: 8px;
    }
    .row:has(> .how_to_steps_main) > .how_to_steps_main {
        padding-left: 8px;
    }
}
@media (max-width: 767.98px) {
    .row:has(> .how_to_steps_main) > .col-md-6:first-child {
        margin-top: 20px;
        margin-bottom: 20px !important;
    }
    .how_to_steps_main {
        margin-top: 0 !important;
    }
    .how_to_steps .step_content {
        max-width: 100%;
        font-size: 14px !important;
        font-weight: 400;
    }
    .how_to_steps .how_to_step_heading {
        font-size: 14px !important;
        font-weight: 600;
    }
    .text-center > p:has(+ .col-lg-7 .how_to_steps_main) {
        margin-bottom: 0 !important;
    }
    .how_to_steps .step_number {
        flex-shrink: 0;
        width: 30px;
        height: 30px;
        font-size: 16px;
    }
    .how_to_steps:has(+ .how_to_steps)::after {
        top: 30px;
        left: 15px;
    }
}
@media (max-width: 550px) {
    .container_fluid.bg_secondary.py-5 {
        padding: 0 10px;
    }
}

/* "What Types of PDFs Can We Convert?" now renders through
    extract_fields.blade.php instead of types_list.blade.php, reusing
    $types_list's own heading/content/items (aliased to $extract_fields
    just before the include). extract_fields ships with no CSS of its
    own by design — every tool that uses it (id-card-ocr, invoice-ocr,
    passport-ocr) styles its .idco-extract-fields-list/-chip classes in
    that tool's own dedicated stylesheet. Ported verbatim from
    public/assets/new-theme/id-card-ocr.css here, scoped to this page's
    own customstyle push, so it styles pdf-to-word only — the other
    tools' own CSS files (and their rendering) are untouched. */
.idco-extract-fields-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 28px;
}

.idco-extract-field-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 18px;
    font-weight: 600;
}
.container-fluid.my-5.who-can-use-container.py-5 {
    margin: 0px!important;
}
@media screen and (max-width: 991px) {
    .idco-extract-fields-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px 24px;
        max-width: 420px;
        margin: 0 auto;
        text-align: left;
    }

    .idco-extract-field-chip {
        align-items: flex-start;
        line-height: 1.3;
    }

    .idco-extract-field-chip svg {
        flex-shrink: 0;
        margin-top: 2px;
    }
}

@media (max-width: 767.98px) {
    .idco-extract-fields > .col-lg-9 {
        margin-left: 16px !important;
        margin-right: 16px !important;
    }
}
.ptw-sections>div {
    padding-top: 70px !important;
    padding-bottom: 70px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.ptw-sections>.container_fluid {
    padding-left: calc(var(--bs-gutter-x, 1.5rem) * .5);
    padding-right: calc(var(--bs-gutter-x, 1.5rem) * .5);
}

.ptw-sections>div:has(.why_our_section_main) {
    background-color: #fafafa;
}

@media screen and (max-width: 767px) {
    .ptw-sections>div {
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }

    .mg-sm-bottom-20 {
        margin-bottom: 20px !important;
    }

}

.px-xxl-4_5 {
    padding: 40px;
}

.output_file_parent {
    display: flex;
    justify-content: center;
}

.idco-extract-fields-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px 28px;
}

.idco-extract-field-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 500;
}

/* Chips flow as inline text with balanced line wrapping, so the last row
is never a lone orphan (flex-wrap left "Signature" alone on row 2).
The mobile/tablet media query below still switches to a 2-col grid. */
.idco-how-it-works-row {
    margin-top: 24px;
}

.idco-how-it-works-col {
    padding: 20px 18px;
    position: relative;
}

.idco-how-it-works-col+.idco-how-it-works-col::before {
    content: '';
    position: absolute;
    top: 20px;
    bottom: 20px;
    left: 0;
    width: 1px;
    background: #C9C9C9;
}

.idco-how-it-works-col img {
    width: 100%;
    max-width: 70px;
    height: 100%;
    max-height: 70px;
    margin-bottom: 10px !important;
}

.idco-how-it-works-col h3 {
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 14px;
}

.idco-how-it-works-text,
.idco-how-it-works-text p {
    font-size: 18px;
    font-weight: 400;
    color: #000000;
    margin-bottom: 0;
}

/* Mobile + tablet: fields become a left-aligned 2-column grid, and the
how-it-works steps stack in one column with horizontal dividers. */
@media screen and (max-width: 991px) {
    .idco-extract-fields-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px 24px;
        max-width: 420px;
        margin: 0 auto;
        text-align: left;
    }

    .idco-extract-field-chip {
        align-items: flex-start;
        line-height: 1.3;
    }

    .idco-extract-field-chip svg {
        flex-shrink: 0;
        margin-top: 2px;
    }

    .idco-how-it-works-row>.idco-how-it-works-col {
        flex: 0 0 100%;
        max-width: 480px;
        width: 100%;
        margin: 0 auto;
        padding: 24px 10px;
    }

    .idco-how-it-works-col+.idco-how-it-works-col::before {
        top: 0;
        bottom: auto;
        left: 0;
        right: 0;
        width: auto;
        height: 1px;
        background: #E4E4E4;
    }

    .idco-how-it-works-col h3 {
        font-size: 18px;
        margin-bottom: 10px;
    }

    .idco-how-it-works-text,
    .idco-how-it-works-text p {
        font-size: 15px;
    }

}

.process_step_v2_group {
    position: relative;
    max-width: 808px;
    margin: 24px auto 0;
}

.process_step_v2_group::before {
    content: '';
    position: absolute;
    top: 35px;
    bottom: 35px;
    left: 30px;
    width: 0;
    border-left: 1.5px dashed var(--action_color);
}

.process_step_v2_card {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 15px;
    background: #fff;
    border-radius: 10px;
    padding: 20px 15px;
    box-shadow: 0px 0px 4px 0px #00000026;
}

.process_step_v2_card+.process_step_v2_card {
    margin-top: 30px;
}

.process_step_v2_number {
    width: 30px;
    height: 30px;
    border: 0.3px solid var(--action_color);
    border-radius: 4.66px;
    background: #F3EFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
    color: var(--action_color);
    flex-shrink: 0;
}

.process_step_v2_content {
    display: flex;
    flex-direction: column;
    gap: 7px;
    text-align: left;
}

.process_step_v2_content p {
    display: block;
    margin: 0;
    font-size: 18px;
    font-weight: 400;
    line-height: 25px;
}

.process_step_v2_title {
    display: block;
    font-size: 20px;
    font-weight: 600;
    line-height: 100%;
}

.formats_table_v2 {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
    margin-bottom: 20px;
}

.formats_table_v2 th,
.formats_table_v2 td {
    border-bottom: 1px solid #cecece;
    border-right: 1px solid #cecece;
    padding: 10px 30px;
    height: 67px;
    text-align: center;
    vertical-align: middle;
}

.formats_table_v2 th {
    border-top: 1px solid #cecece;
    font-weight: 700;
    font-size: 18px;
}

.formats_table_v2 td {
    font-weight: 400;
    font-size: 16px;
}

.formats_table_v2 th:first-child,
.formats_table_v2 td:first-child {
    border-left: 1px solid #cecece;
}

.formats_table_v2_mobile {
    display: none;
}

@media screen and (max-width: 575px) {
    .formats_table_v2_desktop {
        display: none;
    }

    .formats_table_v2_mobile {
        display: block;
    }

    .formats_table_v2 {
        table-layout: fixed;
    }

    .formats_table_v2 th,
    .formats_table_v2 td {
        padding: 12px 15px;
        height: auto;
    }

    .formats_table_v2 th {
        font-size: 18px !important;
        font-weight: 600 !important;
        height: 52px;
    }

    .formats_table_v2 td {
        font-size: 15px;
    }

    .idco-how-it-works-row>.idco-how-it-works-col {
        padding: 24px;
    }
    .ptw_download_btn { 
        padding: 5px 10px;
    }
}

.input_vs_output_v2_card {
    position: relative;
    margin: 0 20px;
}

.input_vs_output_v2_card .card-body {
    padding: 30px 20px;
}

.input_vs_output_v2_card::after {
    content: "";
    position: absolute;
    width: 1px;
    height: 100%;
    background-color: #c3bebe;
    top: 0;
    left: 32%;
}

/* Passport-only: the shared fixed `left: 32%` line cut through the wide
(landscape) passport "Before" image, so the divider is the Before
column's own right border instead — it always sits after its content. */
@media screen and (min-width: 768px) {
    /* Vertical padding moves from card-body to the columns so the
    border runs the card's full height, like the Figma divider. */
}

@media screen and (max-width: 800px) {
    .input_vs_output_v2_card img {
        width: 100%;
    }

    .input_vs_output_v2_card::after {
        display: none;
    }

}

@media screen and (max-width: 500px) {
    .input_vs_output_v2_card {
        background-color: transparent !important;
        border: none !important;
    }

    .input_vs_output_v2_card::after {
        content: none;
    }

}

/* ============================================================
Results field list (Figma "ID Card OCR Done development" →
results frame, node 1984078543): a plain label/value field
list, not invoice-ocr's spreadsheet grid — see generateTable()
override + idCardOcrJsonToDataArray() comments in this page's
script block. kv_label mirrors .preview_table th's bold/muted
look; kv_value is the editable field.
============================================================ */
/* ============================================================
Results field list (same as id-card-ocr's results frame): a plain label/value field
list, not invoice-ocr's spreadsheet grid — see generateTable()
override + passportOcrJsonToDataArray() comments in this page's
script block. kv_label mirrors .preview_table th's bold/muted
look; kv_value is the editable field.
============================================================ */
.kv_table {
    margin-bottom: 0;
}

/* Grow with the field list instead of the shared fixed-height,
scrolling .preview-body box. */
.idco-result-card {
    height: auto !important;
}

.kv_table .kv_label {
    width: 45%;
    color: #1A1A1A;
    font-weight: 500 !important;
}

.kv_table .kv_label,
.kv_table .kv_value {
    padding: 18px 16px 18px 0 !important;
    font-size: 16px;
    border: none;
}

.kv_table .kv_value {
    color: #555;
    word-break: break-word;
}

/* One continuous underline per label+value pair: it sits on the
<tr>, not the cells, so it never breaks between the two. */
.kv_table tr {
    border-bottom: 1px solid #E9E9E9;
}

.kv_table tr:last-child,
.kv_table .kv_spacer,
.kv_table tr:has(.kv_card_heading) {
    border-bottom: none;
}

.kv_table .kv_card_heading {
    color: var(--action_color, #623CEA);
}

.kv_table .kv_spacer td {
    padding: 0 !important;
    height: 8px;
    border: none !important;
}

/* Desktop pairs two fields per row (Name | Date Of Birth, ...) with a
vertical rule between the columns. generateTable() still emits one
<tr> per field so copy/export keep reading "one <tr> = one field";
the tbody becomes a 2-column grid of <tr>s instead. Card headings
and spacers span both columns so each card starts on a fresh row. */
@media screen and (min-width: 992px) {
    .kv_table tbody {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        column-gap: 70px;
    }

    .kv_table tr {
        display: flex;
        align-items: center;
        position: relative;
    }

    /* Last pair of the list has no underline either. */
    .kv_table tr.kv_left:nth-last-child(2) {
        border-bottom: none;
    }

    .kv_table tr.kv_right::before {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        left: -35px;
        width: 1px;
        background: #E9E9E9;
    }

    .kv_table .kv_label {
        width: auto;
        flex: 0 0 55%;
    }

    .kv_table .kv_value {
        flex: 1 1 auto;
    }

}

@media screen and (min-width: 992px) and (max-width: 1500px) {
    .kv_table tbody {
        column-gap: 48px;
    }

    .kv_table tr.kv_right::before {
        left: -24px;
    }

    .kv_table .kv_label {
        flex-basis: 50%;
    }

    .kv_table .kv_label,
    .kv_table .kv_value {
        font-size: 15px;
    }

    .idco-result-card {
        padding: 14px 24px !important;
    }

}

@media screen and (min-width: 992px) {

    .kv_table tr.kv_spacer,
    .kv_table tr:has(.kv_card_heading) {
        grid-column: 1 / -1;
        display: block;
    }

    .kv_table .kv_card_heading,
    .kv_table .kv_spacer td {
        display: block;
    }

}

@media screen and (max-width: 991px) {

    .kv_table .kv_label,
    .kv_table .kv_value {
        padding: 14px 12px 14px 0 !important;
        font-size: 14px;
    }

    .kv_table .kv_value {
        color: #333;
    }

}

/* ============================================================
Results header (Figma results frame): Start Over / QR / Copy /
single "Download" dropdown, instead of the shared "Export As"
+ "Download All" pair. Scoped to .idco-output-stage so
invoice-ocr/passport-ocr/bank-statement-converter, which reuse
the same .output_stage/.export_all/.download_all classes from
the shared new-theme stylesheet, keep their own layout —
desktop only (>=992px), matching the Figma frame supplied.
============================================================ */
/* One height/font for every results action button (header and files
panel), so they always line up. The shared stylesheet forces some
of them (.startover/.export_all/.download_all) to 42px/16px with
!important at <=1500px but not the others — hence !important below. */
.conversion_container {
    --idco-btn-h: 50px;
    --idco-btn-fs: 18px;
}

@media screen and (max-width: 1500px) {
    .conversion_container {
        --idco-btn-h: 44px;
        --idco-btn-fs: 16px;
    }

}

@media screen and (min-width: 992px) {
    .idco-output-stage {
        display: flex;
        align-items: center;
        gap: 14px;
        height: auto;
        padding-bottom: 30px;
        margin-bottom: 20px;
        border-bottom: 1px solid #E9E9E9;
    }

    .idco-output-stage .startover,
    .idco-output-stage .idco-header-icon-btn,
    .idco-output-stage .idco-header-copy-btn,
    .idco-output-stage .idco-download-btn {
        height: var(--idco-btn-h) !important;
        border-radius: 8px;
        font-size: var(--idco-btn-fs) !important;
        font-weight: 500;
    }

    .idco-output-stage .startover {
        min-width: 150px !important;
        padding: 0 22px;
        gap: 10px;
        background: #fff;
        border: 1px solid #CFCFCF;
    }

    .idco-output-stage .startover img {
        height: 16px;
        width: 16px;
    }

    /* new-qr.png is itself the bordered 50x50 button face. */
    .idco-output-stage .idco-header-icon-btn {
        width: var(--idco-btn-h);
        align-items: center;
        justify-content: center;
        background: transparent;
        border: none;
        padding: 0;
    }

    .idco-output-stage .idco-header-qr-btn {
        margin-left: auto;
    }

    .idco-header-qr-btn img,
    .idco-files-qr-btn img {
        width: var(--idco-btn-h);
        height: var(--idco-btn-h);
    }

    .idco-output-stage .idco-header-copy-btn {
        align-items: center;
        gap: 10px;
        padding: 0 22px;
        background: #fff;
        color: #000;
        border: 1px solid #E4E4E4;
    }

    .idco-output-stage .idco-download-btn {
        min-width: 160px !important;
        gap: 10px;
        background: var(--action_color, #623CEA) !important;
        color: #fff !important;
        border: none;
        padding: 0 22px;
    }

    /* .export_all::after draws its caret via `content: url(...)` sized
    off Bootstrap's border-triangle box model; a real <img> in the
    markup (idco-download-arrow) is simpler to size and colour. */
    .idco-output-stage .idco-download-btn.disabled {
        opacity: .5;
    }

    .idco-output-stage .idco-download-btn::after,
    .idco-output-stage .idco-download-btn.show::after {
        content: none !important;
    }

    .idco-output-stage .idco-download-arrow {
        width: 12px;
        height: 12px;
    }

    /* The header's own bottom border is the divider here. */
    .idco-output-stage~#previewmain {
        border-top: none;
        padding-top: 0;
    }

    .idco-result-card {
        border: 1px solid #EEEEEE;
        border-radius: 12px;
        padding: 22px 40px;
        background: #fff;
    }

}

/* ============================================================
Action tooltips (data-idco-tip="..."): CSS-only, so they also
cover buttons created later in JS. Shown on hover/keyboard focus
on pointer devices only — a tap on touch screens would leave a
hover tooltip stuck — plus whenever JS adds .idco-tip-show (Copy's
"Copied!" feedback, which is how touch users see it).
data-idco-tip-align="start|end" pins the bubble to that edge of
the button so it can't run off-screen at either side.
============================================================ */
[data-idco-tip] {
    position: relative;
}

[data-idco-tip]::before,
[data-idco-tip]::after {
    position: absolute;
    left: 50%;
    z-index: 1060;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity .15s ease, transform .15s ease, visibility .15s;
}

[data-idco-tip]::after {
    --idco-tip-x: -50%;
    content: attr(data-idco-tip);
    bottom: calc(100% + 10px);
    transform: translate(var(--idco-tip-x), 4px);
    width: max-content;
    max-width: 260px;
    padding: 6px 10px;
    border-radius: 6px;
    background: #1A1A1A;
    color: #fff;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.35;
    text-align: center;
    white-space: normal;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
}

[data-idco-tip]::before {
    content: '';
    bottom: calc(100% + 4px);
    transform: translate(-50%, 4px);
    border-style: solid;
    border-width: 6px 6px 0;
    border-color: #1A1A1A transparent transparent;
}

[data-idco-tip-align="start"]::after {
    --idco-tip-x: 0;
    left: 0;
}

[data-idco-tip-align="end"]::after {
    --idco-tip-x: 0;
    left: auto;
    right: 0;
}

@media (hover: hover) {

    [data-idco-tip]:hover::before,
    [data-idco-tip]:hover::after {
        opacity: 1;
        visibility: visible;
        transition-delay: .25s;
    }

}

[data-idco-tip]:focus-visible::before,
[data-idco-tip]:focus-visible::after,
[data-idco-tip]:has(> :focus-visible)::before,
[data-idco-tip]:has(> :focus-visible)::after,
.idco-tip-show[data-idco-tip]::before,
.idco-tip-show[data-idco-tip]::after {
    opacity: 1;
    visibility: visible;
}

@media (hover: hover) {
    [data-idco-tip]:hover::before {
        transform: translate(-50%, 0);
    }

    [data-idco-tip]:hover::after {
        transform: translate(var(--idco-tip-x), 0);
    }

}

[data-idco-tip]:focus-visible::before,
[data-idco-tip]:has(> :focus-visible)::before,
.idco-tip-show[data-idco-tip]::before {
    transform: translate(-50%, 0);
}

[data-idco-tip]:focus-visible::after,
[data-idco-tip]:has(> :focus-visible)::after,
.idco-tip-show[data-idco-tip]::after {
    transform: translate(var(--idco-tip-x), 0);
}

/* Not while its dropdown is open, or before the action is ready. */
[data-idco-tip]:has(> .show)::before,
[data-idco-tip]:has(> .show)::after,
[data-idco-tip]:has(> .disabled)::before,
[data-idco-tip]:has(> .disabled)::after,
[data-idco-tip].disabled::before,
[data-idco-tip].disabled::after {
    display: none;
}

@media screen and (max-width: 575px) {
    [data-idco-tip]::after {
        max-width: 160px;
        padding: 5px 8px;
        font-size: 11px;
    }

}

/* ============================================================
Download dropdown (header + mobile file cards): a floating white
card with roomy rows, instead of the shared .export_menu's fixed
107px purple-bordered box with an <hr> between items.
============================================================ */
.idco-dl-menu,
#all_export_dropdown.idco-dl-menu {
    height: auto !important;
    min-width: 210px;
    margin-top: 8px !important;
    padding: 6px;
    border: 1px solid #ECEAF5;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 12px 32px rgba(26, 18, 64, .14);
}

.idco-dl-menu li+li {
    margin-top: 2px;
}

.idco-dl-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 8px;
    font-size: 15px;
    color: #1A1A1A;
    transition: background-color .15s ease;
}

.idco-dl-item:hover,
.idco-dl-item:focus-visible {
    background: #F4F1FF;
    color: #1A1A1A;
}

.idco-dl-item:active {
    background: #EAE4FF;
    color: #1A1A1A;
}

.idco-dl-item img {
    flex-shrink: 0;
    width: 18px;
    height: 22px;
    object-fit: contain;
}

.idco-dl-ext {
    font-weight: 700;
}

.idco-dl-desc {
    margin-left: auto;
    padding-left: 16px;
    font-size: 13px;
    color: #8A8799;
}

@media screen and (max-width: 991px) {
    .idco-dl-menu {
        min-width: 180px;
    }

    .idco-dl-item {
        padding: 10px;
        font-size: 14px;
    }

}

/* ============================================================
Download QR popup: title, caption, QR in a soft-bordered box,
then a full-width .xlsx / .csv segmented toggle.
============================================================ */
.idco-qr-dialog {
    max-width: 400px;
    padding: 0 16px;
    margin-left: auto;
    margin-right: auto;
}

.idco-qr-modal-content {
    position: relative;
    align-items: center;
    padding: 32px 28px 28px;
    border: none;
    border-radius: 20px;
    text-align: center;
    box-shadow: 0 20px 60px rgba(26, 18, 64, .25);
}

.idco-qr-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 1;
}

.idco-qr-title {
    margin: 0 0 8px;
    font-size: 28px;
    font-weight: 700;
    color: #1A1A2E;
}

.idco-qr-caption {
    max-width: 300px;
    margin: 0 auto 20px;
    font-size: 16px;
    line-height: 1.5;
    color: #7A7A8C;
}

.idco-qr-box {
    width: 100%;
    max-width: 300px;
    padding: 22px;
    border: 1px solid #E6E0FF;
    border-radius: 20px;
    background: #fff;
}

.idco-qr-box .idco-qr-modal-body {
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
}

.idco-qr-box .idco-qr-modal-body svg {
    display: block;
    width: 100%;
    height: auto;
}

.idco-qr-format {
    display: flex;
    width: 100%;
    max-width: 300px;
    margin-top: 20px;
    padding: 4px;
    gap: 4px;
    border-radius: 10px;
    background: #F4F4F6;
}

.idco-qr-format-btn {
    flex: 1;
    height: 38px;
    border: none;
    border-radius: 8px;
    background: transparent;
    font-size: 15px;
    font-weight: 600;
    color: #555;
    transition: background-color .15s ease, color .15s ease;
}

.idco-qr-format-btn:hover {
    color: #1A1A1A;
}

.idco-qr-format-btn.active {
    background: var(--action_color, #623CEA);
    color: #fff;
    box-shadow: 0 2px 6px rgba(98, 60, 234, .3);
}

@media screen and (max-width: 575px) {
    .idco-qr-modal-content {
        padding: 28px 20px 20px;
    }

    .idco-qr-title {
        font-size: 22px;
    }

    .idco-qr-caption {
        font-size: 14px;
    }

}

/* ============================================================
Files panel (Figma results frame): a stack of plain image
thumbnails (no filename/size text once a file has moved into
the results list) with a "Download All" button pinned under
them. Scoped to .idco-files-list/.files_list .output_file so
the pre-convert staging grid (#uploaded_row, which still wants
filename/size/status text) and every other tool sharing
.files_list/.output_file are unaffected.
============================================================ */
@media screen and (min-width: 992px) {
    .idco-files-list {
        display: flex;
        flex-direction: column;
    }

    .idco-single .idco-files-list {
        display: none !important;
    }

    .idco-files-list .files_list_row {
        flex: 1;
        overflow-y: auto;
    }

    .idco-files-list .output_file {
        position: relative;
        display: block;
        width: 245px;
        height: auto;
        max-width: 100%;
        object-fit: fill;
        min-width: 0;
        padding: 9px !important;
        border: 1px solid #fff !important;
        border-radius: 9px;
        overflow: hidden;
        background: #fff;
        box-shadow: 0px 0px 1.81px 0px #00000033;
    }

    .idco-files-list .output_file.active {
        /* !important needed to win over the base rule's
        border: 1px solid #fff !important above — without it,
        clicking a thumbnail added the .active class correctly
        but the border stayed white. */
        border-color: #623CEA !important;
    }

    .idco-files-list .output_file .image_icon {
        width: 100%;
        height: 100%;
        object-fit: contain;
        border-radius: 8px;
    }

    .idco-files-list .output_file .file_name,
    .idco-files-list .output_file .file_size,
    .idco-files-list .output_file .success {
        display: none !important;
    }

    /* Error state: dimmed/blurred thumbnail + warning icon overlay,
    instead of the plain "Error" text this span shows elsewhere.
    Base stays hidden (matches the shared .d-none default); JS
    already does single_item.querySelector('.error')
    .classList.remove('d-none') on failure — this just restyles
    what appears once that happens. */
    .idco-files-list .output_file .error {
        display: none;
        position: absolute;
        inset: 0;
        z-index: 2;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 6px;
        text-align: center;
        padding: 10px;
        background: rgba(255, 255, 255, .6);
        backdrop-filter: blur(2px);
    }

    .idco-files-list .output_file .error:not(.d-none) {
        display: flex;
    }

    .idco-files-list .output_file .error .idco-error-text {
        font-size: 12px;
        font-weight: 600;
        color: #D92D20;
    }

    /* Per-file conversion progress as a dark overlay on the thumbnail
    itself, instead of the progress bar/% rendering as its own row
    below the (now full-width) image — the .jpgtoexceluploadloader
    element is already toggled d-none on/off by the existing
    convertBtn handler (JS untouched), this just repositions and
    restyles it in this panel; every other tool sharing that class
    keeps its inline bar-next-to-filename layout. */
    .idco-files-list .output_file .jpgtoexceluploadloader {
        position: absolute;
        inset: 0;
        z-index: 2;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 8px;
        background: rgba(0, 0, 0, .45);
        border-radius: 8px;
    }

    .idco-files-list .output_file .jpgtoexceluploadloader::before {
        content: '';
        width: 28px;
        height: 28px;
        border: 3px solid #fff;
        border-bottom-color: transparent;
        border-radius: 50%;
        animation: rotation 1s linear infinite;
    }

    .idco-files-list .output_file .jpgtoexceluploadloader .track {
        display: none;
    }

    .idco-files-list .output_file .jpgtoexceluploadloader .pct {
        display: none;
    }

    .idco-files-list .output_file .jpgtoexceluploadloader .converting_text {
        color: #fff;
        font-size: 13px;
        font-weight: 600;
    }

    /* No per-file edit/copy/export hover icons on the thumbnails —
    those actions live in the results header (Copy/Download) for
    the currently active file, or in the QR modal's This File
    format toggle; a hover-icon row on every thumbnail duplicated
    that and wasn't wanted here. */
    .idco-files-list .output_stage_btns {
        display: none !important;
    }

    /* Visible divider between the files panel and the results
    panel (Figma results frame shows a clear vertical line
    between the two, not just whitespace). */
    .idco-files-list {
        border-right: 1px solid #E9E9E9;
        padding-right: 16px;
    }

    .idco-mobile-status-bar {
        margin-top: 12px;
        display: flex;
        align-items: stretch;
        gap: 8px;
    }

    .idco-mobile-status-bar .idco-mobile-reset,
    .idco-mobile-status-bar .idco-status-text {
        display: none;
    }

    .idco-mobile-status-bar .download_all {
        display: flex;
        flex: 1;
        min-width: 0 !important;
        height: var(--idco-btn-h) !important;
        border: none;
        border-radius: 8px;
        justify-content: center;
        align-items: center;
        font-size: var(--idco-btn-fs) !important;
    }

    /* new-qr.png is itself the bordered 50x50 button face. */
    .idco-files-qr-btn {
        flex-shrink: 0;
        width: var(--idco-btn-h);
        height: var(--idco-btn-h);
        padding: 0;
        border: none;
        background: transparent;
        align-items: center;
        justify-content: center;
    }

}

/* Mobile/tablet (Figma mobile results frame): every file is a card —
thumbnail, name/size/status and Copy + Download on top, its field
list underneath once expanded — and the files-panel footer becomes
a sticky bottom bar ("✓ Your File is Converted" / Download All (N) /
start over). The desktop results header isn't used here, except as
the way out when every file failed (.idco-failed). */
@media screen and (max-width: 991px) {
    .idco-output-stage:not(.idco-failed) {
        display: none !important;
    }

    .conversion_container {
        height: auto !important;
        min-height: 0 !important;
    }

    /* Keep the page end reachable above the fixed bottom bar. */
    body:has(.idco-mobile-status-bar.idco-visible) {
        padding-bottom: 130px;
    }

    .idco-files-list {
        width: 100% !important;
    }

    .idco-files-list .files_list_row {
        max-height: none !important;
        overflow: visible !important;
    }

    .idco-files-list .output_file_parent,
    .idco-files-list .output_file_parent.active {
        display: block;
        background: #fff;
        border: 1px solid #EEEEEE !important;
        border-radius: 10px;
        box-shadow: none;
        padding: 12px !important;
        margin-bottom: 4px;
    }

    .idco-files-list .output_file,
    .idco-files-list .output_file_parent.active .uploaded_item {
        height: auto !important;
        min-height: 0;
        padding: 0 !important;
        border: none !important;
        box-shadow: none !important;
        background: transparent;
        align-items: center;
        gap: 12px;
        /* Shared rule makes this inline-flex, which sizes to its
        content and pushed the buttons past the card edge. */
        display: flex !important;
        width: 100%;
    }

    .idco-files-list .output_file .image_icon {
        display: block !important;
        width: 62px;
        height: 62px;
        flex-shrink: 0;
        object-fit: cover;
        padding: 3px;
        border: 1px solid #D9D0FF;
        border-radius: 6px;
    }

    .idco-files-list .output_file>.text-start {
        flex: 1 1 auto;
        min-width: 0;
    }

    .idco-files-list .output_file .file_name {
        font-size: 15px !important;
        color: #333;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .idco-files-list .output_file .file_size {
        font-size: 13px;
        color: #A9A9A9;
        line-height: 18px;
    }

    .idco-files-list .output_file .success {
        font-size: 13px;
        white-space: nowrap;
        color: var(--action_color, #623CEA);
    }

    .idco-card-actions {
        display: flex;
        align-items: center;
        gap: 6px;
        margin-left: auto;
        flex-shrink: 0;
    }

    .idco-card-icon-btn,
    .idco-card-download-btn {
        height: 32px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: #fff !important;
        border: 1px solid #E4E4E4 !important;
        border-radius: 6px !important;
        color: #1A1A1A;
    }

    .idco-card-icon-btn {
        width: 32px;
        padding: 0;
    }

    .idco-card-download-btn {
        gap: 6px;
        padding: 0 10px;
        font-size: 14px;
    }

    .idco-files-list .output_file_parent.active .table_previews {
        border-top: none;
        padding-top: 12px;
    }

    .idco-result-card {
        border: 1px solid #EEEEEE;
        border-radius: 8px;
        padding: 2px 12px;
        background: #fff;
    }

    .idco-mobile-status-bar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1030;
        display: none;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px 12px;
        padding: 12px 16px 16px;
        background: #fff;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, .08);
    }

    .idco-mobile-status-bar.idco-visible {
        display: flex;
    }

    .idco-mobile-status-bar .idco-status-text {
        flex: 0 0 100%;
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 17px;
        font-weight: 700;
        color: #1A1A1A;
    }

    .idco-mobile-status-bar .download_all {
        flex: 1;
        min-width: 0 !important;
        height: 50px !important;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 10px;
        border: none;
        border-radius: 8px !important;
        font-size: 18px !important;
    }

    .idco-mobile-status-bar .idco-mobile-reset {
        flex-shrink: 0;
        width: 50px;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid #CFCFCF;
        border-radius: 8px;
        background: #fff;
    }

    .idco-mobile-status-bar .idco-mobile-reset img {
        width: 18px;
        height: 18px;
        filter: none;
    }

}

/* ===================== 2. Invoice ===================== */
/* ============================================================
Vertical rhythm (Figma: every static content section's Layout
panel shows 70px top/bottom padding). The shared includes use
Bootstrap's my-5 (48px margin) instead, and how_to/faq wrap in
".container_fluid" (underscore, not a real Bootstrap class, no
side padding) while the rest use ".container-fluid"/".container"
(hyphen, ~12px side padding) — misaligning their headings.
Scoped under .ioc-sections and kept inline on this page only, so
the shared includes and every other tool keep their own design.
Same fix pattern as vcf-to-excel/pdf-to-excel earlier this session.
============================================================ */
/* key_features renders transparent (shows the page's white
background) by default; Figma specifies #FAFAFA for this
section on this page. */
/* ============================================================
Process Steps v2 — invoice-ocr's own variant of the shared
process_steps component (new-theme.includes.process_steps_v2),
matched exactly against the Figma "How Does This Invoice
Scanner Work?" frame: dashed connector line, light-purple
(#F3EFFF) badge fill, stacked title/body (not inline). Kept
on this page only, under its own process_step_v2_* classes,
so the shared process_steps component (and any other tool
that adopts it later) keeps its own plain default styling —
same convention as vcf-to-excel's who_can_use_v2.
============================================================ */
/* ===================== 3. CS-7868 design-QA fixes ===================== */
/* ---------- Hero feature chips ---------- */
.feature_box_row .feature_box img[src*="batch_processing"] {
    width: 20px;
    height: 20px;
}

/* ---------- How to use ---------- */
/* Subtitle → illustration gap is 40px in Figma (an override elsewhere
dropped the mg-lg-bottom-40 utility to 16px). */
.text-center>p:has(+ .col-lg-7 .how_to_steps_main) {
    margin-bottom: 40px !important;
}

/* Editor leftovers (a lone <br> line / empty <p>) made one step taller than
the others, so the step gaps looked unequal. */
.how_to_steps .step_content div:has(> br:only-child),
.how_to_steps .step_content p:empty {
    display: none;
}

.how_to_steps .step_content p {
    margin-bottom: 0;
}

/* Illustration sits closer to the steps, like the Figma frame. */
@media (min-width: 768px) {
    .row:has(> .how_to_steps_main)>.col-md-6:first-child {
        padding-right: 8px;
    }

    .row:has(> .how_to_steps_main)>.how_to_steps_main {
        padding-left: 8px;
    }

}

/* ---------- Key features cards ---------- */
.why_our_section_main .card h3 {
    font-weight: 600;
}

/* ---------- Extracted fields chips ---------- */
.idco-extract-field-chip {
    display: flex;
    align-items: center;
    font-size: 18px;
    font-weight: 600;
}

/* ---------- Checklist with image ---------- */
.checklist_image_items li {
    font-size: 18px;
    font-weight: 600;
}

/* ---------- Who can use cards ---------- */
.who-can-use-container .card h3 {
    font-weight: 600;
    line-height: 25px;
}

/* ---------- Input / output format tables ---------- */
.formats_table_v2 th,
.formats_table th {
    font-size: 20px;
    font-weight: 600;
}

/* ---------- Your image vs output ---------- */
.container-fluid:has(> .col-xl-8 .input_vs_output_v2_card)>.text-center>p {
    font-size: 16px;
    font-weight: 400;
}

.input_vs_output_v2_card h3 {
    font-size: 18px;
    font-weight: 700;
}

/* ---------- Results header ---------- */
.output_stage .startover,
.idco-output-stage .startover {
    border-radius: 10px !important;
}

/* ================= Mobile (Figma 360 frame) ================= */
@media (max-width: 767.98px) {

    /* How to use: 20px above and below the illustration, 14px steps. */
    .row:has(> .how_to_steps_main)>.col-md-6:first-child {
        margin-top: 20px;
        margin-bottom: 20px !important;
    }

    .how_to_steps_main {
        margin-top: 0 !important;
    }

    .how_to_steps .step_content {
        max-width: 100%;
        font-size: 14px !important;
        font-weight: 400;
    }

    .how_to_steps .how_to_step_heading {
        font-size: 14px !important;
        font-weight: 600;
    }

    .text-center>p:has(+ .col-lg-7 .how_to_steps_main) {
        margin-bottom: 0 !important;
    }

    /* 30px number circles for the 14px steps (same as png-to-word), with
    the connector line re-anchored to them. */
    .how_to_steps .step_number {
        flex-shrink: 0;
        width: 30px;
        height: 30px;
        font-size: 16px;
    }

    .how_to_steps:has(+ .how_to_steps)::after {
        top: 30px;
        left: 15px;
    }

    /* Key features: cards use the full width, icon closer to title,
    14px description. */
    .why_our_section_main {
        --bs-gutter-x: 0;
    }

    .why_our_section_main .card-body>.d-flex {
        gap: 10px !important;
    }

    .why_our_section_main .card-body {
        font-size: 14px;
    }

    .why_our_section_main .card-body p {
        font-size: 14px;
    }

    /* Extracted fields: less side padding so the heading fits in 2 lines. */
    .idco-extract-fields>.col-lg-9 {
        margin-left: 16px !important;
        margin-right: 16px !important;
    }

    /* Checklist with image: 23px side padding. */
    .checklist_image_section>.col-xl-8 {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 23px;
        padding-right: 23px;
    }

    /* Who can use: tighter title line height. */
    .who-can-use-container .card h3 {
        line-height: 25px;
    }

    .checklist_image_items li {
        font-size: 16px;
        font-weight: 400;
    }

    /* Format tables: 400/16px cells, less space around "Output Formats". */
    .formats_table_v2 td,
    .formats_table td {
        font-size: 14px !important;
        font-weight: 400;
    }

    .formats_table_v2_mobile~h2,
    .container:has(.formats_table_v2) h2 {
        margin-top: 20px !important;
        margin-bottom: 16px !important;
    }

    /* Your image vs output: no gap under the subtitle, image edge-to-edge. */
    .container-fluid:has(> .col-xl-8 .input_vs_output_v2_card)>.text-center>p {
        margin-bottom: 0 !important;
    }

    .input_vs_output_v2_card {
        margin: 0 !important;
    }

    /* Was 20px card margin + 20px body padding per side; Figma keeps 16px. */
    .input_vs_output_v2_card .card-body {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    /* People also ask: less side padding, 600 questions. */
    .faq-column {
        padding-left: 0;
        padding-right: 0;
    }

    .faq_header .accordion-button {
        font-weight: 600 !important;
        padding-left: 0;
        padding-right: 0;
    }

    .faq-column .accordion-body {
        padding-left: 0;
        padding-right: 0;
    }

}

/* ===================== 4. Pro banner / sidebar ===================== */
.pro-bg {
    background-image: url("../minified/bg-black.png");
    background-size: cover;
    background-position: top;
    background-repeat: no-repeat;
}

.upgrade_banner {
    background-image: url("../imgs/upgrade-banner.png");
    background-size: cover;
    padding: 24px 34px;
    line-height: 30px;
}

.item .data_img {
    padding: 0;
}

.bg_crop {
    background: #5994D9CC;
}

.crop_btn {
    position: absolute;
    display: flex;
    background: #5994D9CC;
    border-radius: 50px;
    cursor: pointer;
    padding: 5px;
    top: 5px;
    left: 5px;
    z-index: 1;
}

.cancelBtn {
    display: flex;
    background: #fff;
    border-radius: 50px;
    cursor: pointer;
    padding: 6px;
    top: 7px;
}

.crossBtn {
    display: flex;
    background: #fff;
    border-radius: 50px;
    cursor: pointer;
    padding: 6px;
    position: absolute;
    top: 15px;
    right: 15px
}

.preview_table_btn {
    background: #fff !important;
    display: flex;
    align-items: center;
    width: 36px;
    height: 26px;
    padding: 0 !important;
    justify-content: center;
    border-radius: 6px;
}

.resultBar.active {
    background: #30619A1A !important;
    border: 1px solid #30619A;
}

.download_btn {
    width: 36px;
    height: 26px;
    padding: 0 !important;
    justify-content: center;
    border-radius: 6px;
}

.download_more {
    padding: 5px 8px !important;
    border-radius: 0 6px 6px 0;
    box-shadow: none;
}

.form-switch .form-check-input {
    width: 2.2em;
    height: 20px;
}

.height_500 {
    height: 500px !important;
}

#how-to-section .how_to_section_img_container{
    display: flex;
    justify-content: center;
    align-items: flex-start;
}

#how-to-section .how_to_steps_main{
    gap: 12px !important;
}
#how-to-section .how_to_section_img_container img{
    width: 100%;
}
.step_content {
    max-width: 90%!important;
}

.formats_table td {
    font-size: 18px;
}

@media (max-width: 991px) {
    .crop_btn {
        background: #00000066;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 18px;
        color: #fff;
        border-radius: 0 0 8px 8px;
        padding: 4px 0px;
        top: auto;
        bottom: 0;
        left: 0;
    }

}

@media (max-width: 430px) {
    .download_more+.choose_dropdown {
        width: 335% !important;
        right: 0;
    }

    .convert_files {
        min-width: 120px;
        text-align: center;
        padding: 0;
    }

}

/* During upload, show only the progress bar — no "NN%" text beside it. */
.jpgtoexceluploadloader .pct {
    display: none;
}