/**
 * pdfwin-overrides.css
 * Loaded via admin/abovefooter.php — LAST in the CSS cascade on every page.
 * Unifies all 100+ tool pages without editing individual files.
 */

/* ═══════════════════════════════════════════════════════════════════════════
   0. GLOBAL LAYOUT — override old style.css constraints
   ═══════════════════════════════════════════════════════════════════════════ */
html, body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden;
    /* Override old style.css grey background */
    background: #fff !important;
    font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
}
/* Override the 84% bootstrap-style .container from old style.css */
.container {
    max-width: 100% !important;
    width: 100% !important;
    padding-right: 2rem !important;
    padding-left: 2rem !important;
}
/* Ensure main content areas can stretch */
main, .main, #main, .site-content, .page-wrap, .wrap { max-width: 100% !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   1. HERO / bg-tool — consistent page header across all tool pages
   ═══════════════════════════════════════════════════════════════════════════ */

/* The subtitle on most pages uses <strong> instead of .bg-tool__lead */
.bg-tool strong,
.bg-tool > p:not(.bg-tool__lead),
.bg-tool > p {
    display: block !important;
    font-size: clamp(.95rem, 2vw, 1.05rem) !important;
    font-weight: 400 !important;
    color: #6b7280 !important;
    line-height: 1.6 !important;
    max-width: 540px !important;
    margin: .5rem auto 0 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   2. TOOL AREA WRAPPERS — consistent card/stage look
   ═══════════════════════════════════════════════════════════════════════════ */

.toolarea-pdf1 {
    background: linear-gradient(180deg, #f3f4f6 0%, #e9eaee 100%) !important;
    padding: clamp(1.5rem, 4vw, 3rem) clamp(1rem, 3vw, 2rem) !important;
}

.toolarea-pdf,
.toolarea-pdf-gradio,
.toolarea {
    max-width: min(96%, 720px) !important;
    margin: 0 auto 2.5rem !important;
    padding: 0 1.5rem 2rem !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    text-align: center !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   3. DRAG-DROP ZONES — invisible by default (cloud picker handles select UI)
   ═══════════════════════════════════════════════════════════════════════════ */

.drag-drop,
#drag-drop-area,
#dragDropArea {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 auto !important;
    cursor: default !important;
}
/* Show border only while dragging */
body.pw-dragging .drag-drop,
body.pw-dragging #drag-drop-area,
body.pw-dragging #dragDropArea,
.drag-drop.dragover, #drag-drop-area.dragover, #dragDropArea.dragover,
#drag-drop-area.active {
    border: 2.5px dashed #E5322D !important;
    border-radius: 18px !important;
    background: #fff8f8 !important;
    padding: 2rem 1.5rem !important;
}
/* Hide legacy upload icons and drag-drop text — replaced by cloud picker */
.drag-drop .upload-icon, .drag-drop i.upload-icon,
#drag-drop-area > i:first-child, #drag-drop-area > i.fa-upload,
#drag-drop-area > i.fa-file-pdf,
.drag-drop > p:first-of-type, #drag-drop-area > p:first-of-type,
.drag-drop > label, #drag-drop-area > label {
    display: none !important;
}
/* Keep actual file inputs accessible but visually hidden */
.drag-drop input[type="file"],
#drag-drop-area input[type="file"],
.toolarea-pdf input[type="file"],
.toolarea input[type="file"] {
    position: absolute !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    pointer-events: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   4. BUTTONS — all tool page action buttons → red brand color
   ═══════════════════════════════════════════════════════════════════════════ */

/* IDs used across tool pages */
#convert-btn, #convertBtn, #convertButton, #convert-pdf-button,
#download-btn, #downloadBtn, #downloadButton, #download-pdf-button,
#download-pdf-btn, #download-button, #download-link, #downloadLink,
#download-html-button, #download-btn-html, #download-btn-txt,
#start-btn, #copy-btn, #splitButton, #downloadPdf,
#convert-another-btn,
.convert-btn, .download-btn,
/* Bootstrap-style .btn class used on many pages */
.toolarea-pdf .btn,
.toolarea .btn,
.toolarea-pdf-gradio .btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: linear-gradient(180deg,#ef4137 0%,#E5322D 45%,#c42a24 100%) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 50px !important;
    padding: 13px 32px !important;
    font-size: .9375rem !important;
    font-weight: 700 !important;
    letter-spacing: .01em !important;
    box-shadow: 0 4px 18px rgba(229,50,45,.38) !important;
    cursor: pointer !important;
    transition: filter .15s, box-shadow .15s, transform .1s !important;
    text-decoration: none !important;
    font-family: 'Inter', system-ui, sans-serif !important;
    min-height: 48px !important;
}
#convert-btn:hover, #convertBtn:hover, #convertButton:hover,
#convert-pdf-button:hover, #download-btn:hover, #downloadBtn:hover,
#downloadButton:hover, #start-btn:hover, #splitButton:hover,
.convert-btn:hover, .download-btn:hover,
.toolarea-pdf .btn:hover, .toolarea .btn:hover {
    filter: brightness(1.07) !important;
    box-shadow: 0 6px 24px rgba(229,50,45,.5) !important;
    transform: translateY(-1px) !important;
}
#convert-btn:active, #convertButton:active,
.toolarea-pdf .btn:active { transform: translateY(0) !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   5. INPUTS / TEXTAREAS — consistent styling
   ═══════════════════════════════════════════════════════════════════════════ */

textarea,
#base64Input,
.toolarea-pdf textarea,
.toolarea textarea {
    border: 1.5px solid #d1d5db !important;
    border-radius: 12px !important;
    background: #f9fafb !important;
    font-family: 'Inter', monospace !important;
    font-size: .9rem !important;
    color: #374151 !important;
    padding: .9rem 1rem !important;
    resize: vertical !important;
    transition: border-color .2s, box-shadow .2s !important;
}
textarea:focus, #base64Input:focus {
    border-color: #E5322D !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(229,50,45,.12) !important;
    background: #fff !important;
}

input[type="text"],
input[type="url"],
input[type="number"],
#url-input {
    border-color: #d1d5db !important;
    border-radius: 10px !important;
}
input[type="text"]:focus,
input[type="url"]:focus,
input[type="number"]:focus,
#url-input:focus {
    border-color: #E5322D !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(229,50,45,.12) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   6. PDF PREVIEW / OUTPUT AREAS
   ═══════════════════════════════════════════════════════════════════════════ */

#pdfViewer,
#pdfViewer canvas,
#image-container,
#convertedImage,
#preview-image,
#image-canvas {
    border-color: #e5e7eb !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 12px rgba(0,0,0,.08) !important;
}

#pdfViewer {
    background: #f9fafb !important;
}

pre, #result, output, #output, .output, #output-text, #speechOutput {
    border-color: #e5e7eb !important;
    border-radius: 12px !important;
    background: #f9fafb !important;
    color: #374151 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   7. CONTENT / DESCRIPTION SECTIONS
   ═══════════════════════════════════════════════════════════════════════════ */

.text-section {
    max-width: 860px !important;
    margin: 2.5rem auto !important;
    padding: 2rem 2.25rem !important;
    background: #f9fafb !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 16px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.05) !important;
    color: #374151 !important;
    line-height: 1.7 !important;
}
@media (max-width: 600px) {
    .text-section { padding: 1.25rem 1rem !important; }
}

.section-heading, h2.section-heading, .text-section h2 {
    font-family: 'Poppins', system-ui, sans-serif !important;
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    color: #111827 !important;
    margin: 1.75rem 0 .65rem !important;
    padding-bottom: .4rem !important;
    border-bottom: 2px solid #e5e7eb !important;
    background: none !important;
    text-align: left !important;
}
.text-section h2:first-child,
.section-heading:first-child { margin-top: 0 !important; }

.section-subheading, h3.section-subheading, .text-section h3 {
    font-family: 'Poppins', system-ui, sans-serif !important;
    font-size: .975rem !important;
    font-weight: 600 !important;
    color: #E5322D !important;
    margin: 1rem 0 .4rem !important;
}

.section-description, p.section-description, .text-section p {
    font-size: .93rem !important;
    line-height: 1.7 !important;
    color: #4b5563 !important;
    margin-bottom: .85rem !important;
}

.benefits-list, ul.benefits-list, .text-section ul {
    padding-left: 1.4rem !important;
    margin: .5rem 0 1rem !important;
}
.benefits-list li, .text-section ul li {
    font-size: .92rem !important;
    color: #4b5563 !important;
    line-height: 1.7 !important;
    margin-bottom: .45rem !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   8. PROGRESS / STATUS
   ═══════════════════════════════════════════════════════════════════════════ */

#progressBar, #progress-bar { text-align: center !important; }
#progressText, #progress-text {
    color: #E5322D !important;
    font-weight: 600 !important;
    font-size: .95rem !important;
}
#progress-fill {
    background: linear-gradient(90deg,#c42a24,#E5322D) !important;
    border-radius: 50px !important;
}
#conversion-progress::-webkit-progress-value,
#conversion-progress::-moz-progress-bar { background: #E5322D !important; }

#success-message  { color: #059669 !important; font-weight: 700 !important; }
#conversion-message { color: #374151 !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   9. FILE INFO / NAME DISPLAYS
   ═══════════════════════════════════════════════════════════════════════════ */

#fileNameDisplay, #fileName, #fileInfo, #file-info {
    border: 1.5px dashed #d1d5db !important;
    border-radius: 10px !important;
    color: #374151 !important;
    background: #fff !important;
    font-size: .9rem !important;
    max-width: 90% !important;
    margin: 1rem auto !important;
    padding: .75rem 1rem !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   10. OLD COLORED CONTAINERS
   ═══════════════════════════════════════════════════════════════════════════ */

.container2, .container3, .container4, .container5, .container6 {
    background: #f9fafb !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 16px !important;
}
.page-container {
    border: 1.5px solid #e5e7eb !important;
    border-radius: 10px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.07) !important;
}
#imgsec { border-color: #e5e7eb !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   11. BLUE COLOR OVERRIDES — kill all blue from inline styles
   ═══════════════════════════════════════════════════════════════════════════ */

/* Inline style blue overrides (high specificity trick) */
[style*="color: #007bff"], [style*="color:#007bff"],
[style*="color: #0044cc"], [style*="color:#0044cc"],
[style*="color: #0056b3"], [style*="color:#0056b3"],
[style*="color: #0066ff"], [style*="color:#0066ff"],
[style*="color: #1A8FE3"], [style*="color:#1A8FE3"],
[style*="color: blue"],    [style*="color:blue"] {
    color: #E5322D !important;
}
[style*="background-color: #007bff"], [style*="background:#007bff"],
[style*="background-color:#1A8FE3"],  [style*="background:#1A8FE3"] {
    background-color: #E5322D !important;
}
[style*="border-color: #007bff"], [style*="border-color:#007bff"],
[style*="border: 2px dashed gold"], [style*="border:2px dashed gold"] {
    border-color: #e5e7eb !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   12. INPUT-DIV / FORM WRAPPERS
   ═══════════════════════════════════════════════════════════════════════════ */

.input-div {
    text-align: center !important;
    margin: 0 auto 1.25rem !important;
    max-width: 100% !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   13. RESPONSIVE — ensure tool pages don't overflow on mobile
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 600px) {
    .toolarea-pdf, .toolarea, .toolarea-pdf-gradio {
        margin: 1rem .75rem !important;
        padding: 1.25rem 1rem !important;
        border-radius: 14px !important;
    }
    #pdfViewer canvas { width: calc(50% - 12px) !important; }
    .bg-tool strong, .bg-tool > p {
        font-size: .9rem !important;
        padding: 0 1rem !important;
    }
    #convert-btn, #convertButton, #convertBtn,
    .toolarea-pdf .btn, .toolarea .btn {
        width: 100% !important;
        padding: 14px 20px !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   14. BACK-TO-TOP BUTTON — global clean style overrides all inline <style>
   ═══════════════════════════════════════════════════════════════════════════ */

#backToTopBtn {
    position: fixed !important;
    bottom: 24px !important;
    right: 24px !important;
    z-index: 9999 !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    background: #E5322D !important;
    background-color: #E5322D !important;
    color: #fff !important;
    border: none !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 14px rgba(229,50,45,.4) !important;
    font-size: 1.25rem !important;
    line-height: 1 !important;
    padding: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity .25s, visibility .25s, transform .2s !important;
    transform: none !important;
}
#backToTopBtn.show {
    opacity: 1 !important;
    visibility: visible !important;
}
#backToTopBtn:hover {
    transform: translateY(-3px) !important;
    background: #c42a24 !important;
    background-color: #c42a24 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   15. REMOVE OLD BROKEN PLACEHOLDER SCRIPTS (empty src="")
   ═══════════════════════════════════════════════════════════════════════════ */

/* No CSS fix possible for empty script tags — handled in PHP templates */

/* ═══════════════════════════════════════════════════════════════════════════
   16. LINK COLORS — ensure all links use brand red not default blue
   ═══════════════════════════════════════════════════════════════════════════ */

.text-section a:not([class]),
.toolarea-pdf a:not([class]),
.toolarea a:not([class]) {
    color: #E5322D;
}
.text-section a:not([class]):hover,
.toolarea-pdf a:not([class]):hover,
.toolarea a:not([class]):hover {
    color: #c42a24;
}

/* ═══════════════════════════════════════════════════════════════════════════
   17. GOLD BORDER / INLINE STYLE OVERRIDES — kill gold/yellow borders everywhere
   ═══════════════════════════════════════════════════════════════════════════ */

/* Override inline style="border: 2px dashed gold" and similar yellow/gold */
[style*="dashed gold"], [style*="dashed Gold"],
[style*="border-color: gold"], [style*="border-color:gold"] {
    border-color: #d1d5db !important;
}
/* page-container inside drag-zone area */
.page-container {
    border: 1.5px solid #e5e7eb !important;
    border-radius: 12px !important;
    box-shadow: 0 2px 12px rgba(0,0,0,.08) !important;
    background: #fff !important;
}
.page-container .pageNumber {
    font-size: .75rem !important;
    font-weight: 600 !important;
    color: #6b7280 !important;
    text-align: center !important;
    padding: .3rem 0 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   18. FONT AWESOME ICON CONTAINERS — tighten spacing, remove CDN dependency visuals
   ═══════════════════════════════════════════════════════════════════════════ */

/* When FA icons are used in drag zones, normalize them */
.drag-drop .fa, #drag-drop-area .fa,
.drag-drop [class^="fa-"], #drag-drop-area [class^="fa-"] {
    font-size: 2.5rem !important;
    color: #9ca3af !important;
    display: block !important;
    margin: 0 auto .75rem !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   19. TOOLPAGE BUTTON OVERRIDES — broad catch for any button inside tool areas
   ═══════════════════════════════════════════════════════════════════════════ */

/* Any <button> or <a class="btn"> directly inside a tool area that isn't already styled */
.toolarea-pdf > button:not([class*="pdfwin"]),
.toolarea > button:not([class*="pdfwin"]),
#drag-drop-area + div button,
#options button,
#options a.btn,
#upload-button, .upload-button,
#uploadBtn {
    background: linear-gradient(180deg,#ef4137 0%,#E5322D 45%,#c42a24 100%) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 50px !important;
    padding: 13px 32px !important;
    font-size: .9375rem !important;
    font-weight: 700 !important;
    box-shadow: 0 4px 18px rgba(229,50,45,.38) !important;
    cursor: pointer !important;
    text-transform: none !important;
    letter-spacing: .01em !important;
    min-height: 48px !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   20. FILE INPUT BUTTON — modernize native file selector buttons
   ═══════════════════════════════════════════════════════════════════════════ */

input[type=file]::file-selector-button {
    background: #f3f4f6 !important;
    color: #374151 !important;
    border: 1.5px solid #d1d5db !important;
    border-radius: 8px !important;
    padding: 8px 18px !important;
    font-size: .875rem !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: background .15s !important;
    margin-right: 1rem !important;
    width: auto !important;
    font-family: 'Inter', system-ui, sans-serif !important;
}
input[type=file]::file-selector-button:hover {
    background: #e5e7eb !important;
    color: #111827 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   21. CANVAS / IMAGE OUTPUT — consistent sizing across all tool pages
   ═══════════════════════════════════════════════════════════════════════════ */

/* Convert output canvases — display nicely */
#pages {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: .75rem !important;
    justify-content: center !important;
    padding: 1rem 0 !important;
}
#pages .page-container {
    width: calc(50% - .75rem) !important;
    max-width: 340px !important;
    margin: 0 !important;
}
#pages .page {
    width: 100% !important;
    height: auto !important;
    display: block !important;
}
@media (max-width: 600px) {
    #pages .page-container { width: 100% !important; max-width: 100% !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   22. HEADER — enforce sticky position and correct z-index over toolpage.css
   ═══════════════════════════════════════════════════════════════════════════ */

.header {
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   23. UNIFIED TOOL PAGE THEME — !important overrides for all tool pages
       These crush any inline <style> blocks, page-specific CSS, or old theme
   ═══════════════════════════════════════════════════════════════════════════ */

/* bg-tool hero — always white, always clean */
.bg-tool,
.bg-tool * { box-sizing: border-box; }
.bg-tool {
    background: #fff !important;
    background-image: none !important;
    color: #111827 !important;
    padding-top: 3.5rem !important;
    padding-bottom: 0 !important;
    text-align: center !important;
    position: relative !important;
    border-bottom: none !important;
    box-shadow: none !important;
}
.bg-tool::before, .bg-tool::after { display: none !important; }

/* h1 on tool pages — ALWAYS dark, never red */
.bg-tool h1 {
    color: #111827 !important;
    font-family: 'Poppins', system-ui, sans-serif !important;
    font-size: clamp(1.75rem, 4.5vw, 2.75rem) !important;
    font-weight: 800 !important;
    letter-spacing: -.035em !important;
    line-height: 1.12 !important;
    margin: .75rem auto .5rem !important;
    background: none !important;
    -webkit-text-fill-color: #111827 !important;
}
.bg-tool__lead,
.bg-tool > p, .bg-tool > strong {
    color: #6b7280 !important;
    font-size: clamp(.9rem, 2vw, 1.05rem) !important;
    font-weight: 400 !important;
    margin: 0 auto 1.75rem !important;
    max-width: 32rem !important;
    line-height: 1.65 !important;
}

/* Tool area — always transparent, no card */
.toolarea-pdf, .toolarea, .toolarea-pdf-gradio {
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 1.5rem 2rem !important;
    margin: 0 auto 2rem !important;
    max-width: 720px !important;
}

/* Kill ALL inline <style> effects on drag-drop zones */
#dragDropArea, #drag-drop-area, .drag-drop {
    border: none !important;
    background: transparent !important;
    background-image: none !important;
    padding: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
}
body.pw-dragging #dragDropArea,
body.pw-dragging #drag-drop-area,
body.pw-dragging .drag-drop,
#dragDropArea.dragover, #drag-drop-area.dragover, .drag-drop.dragover {
    border: 2.5px dashed #E5322D !important;
    border-radius: 18px !important;
    background: #fff8f8 !important;
    padding: 2rem 1.5rem !important;
}

/* Kill ALL inline emoji upload icons */
.upload-icon, i.upload-icon,
#dragDropArea > i, #drag-drop-area > i,
.drag-drop > i { display: none !important; }

/* Kill inline button overrides on upload buttons */
#uploadBtn, #upload-button, .upload-button {
    background: linear-gradient(180deg,#ef4137 0%,#E5322D 50%,#c42a24 100%) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 50px !important;
}

/* Normalize all page backgrounds */
body { background: #fff !important; }
.toolarea-pdf1, .toolarea-pdf1 * {
    background: transparent !important;
    background-image: none !important;
}

/* Collapse any visible card containers */
#fileInfo, #file-info {
    border: 1.5px dashed #d1d5db !important;
    border-radius: 10px !important;
    background: #fff !important;
    margin: .5rem auto !important;
    padding: .6rem 1rem !important;
    max-width: 90% !important;
}

/* Kill green progress bars — use red brand */
#progressBar { background-color: #E5322D !important; }
#progressBarContainer {
    border-color: #e5e7eb !important;
    border-radius: 50px !important;
    overflow: hidden !important;
    width: 90% !important;
    max-width: 480px !important;
    margin: 1rem auto !important;
    height: 10px !important;
}

/* Section headings — NO blue */
h2, h3, .section-heading, .section-subheading {
    color: inherit;
}
.bg-tool h2, .bg-tool h3 { color: #111827 !important; }
.text-section h2 { color: #111827 !important; }
.text-section h3, .section-subheading { color: #E5322D !important; }

/* Remove box shadows on legacy containers */
.container2, .container3, .container4, .container5, .container6,
.tabbed-menu {
    box-shadow: 0 4px 20px rgba(0,0,0,.07) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   24. COMPREHENSIVE MOBILE IMPROVEMENTS
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── General touch improvements ─────────────────────────────────────────── */
@media (max-width: 900px) {
    /* Hide search bar on mobile — saves space */
    .header-search { display: none !important; }
    /* Keep only logo + hamburger */
    .header-nav-bar { padding: 0 1rem; }
    /* Actions: show only support button + hamburger */
    .header .actions .btn--header { padding: .45rem .9rem; font-size: .82rem; }
}

/* ── Tool page mobile hero ───────────────────────────────────────────────── */
@media (max-width: 640px) {
    .bg-tool { padding: 2rem 1rem 0 !important; }
    .bg-tool h1 { font-size: clamp(1.4rem, 7vw, 1.9rem) !important; margin: .5rem auto .35rem !important; }
    .bg-tool__lead, .bg-tool > p, .bg-tool > strong {
        font-size: .875rem !important;
        margin: 0 auto 1.25rem !important;
        max-width: 100% !important;
        padding: 0 .5rem !important;
    }
    .format-badges { gap: .5rem !important; }
    .format-badge__icon { width: 40px !important; height: 48px !important; }

    /* Tool area — full width on mobile */
    .toolarea-pdf, .toolarea, .toolarea-pdf-gradio {
        padding: 0 .75rem 1.5rem !important;
        max-width: 100% !important;
    }

    /* Buttons — bigger tap targets */
    .pw-btn-primary, #convert-btn, .btn-convert, button[id*="convert"],
    button[id*="split"], button[id*="merge"], button[id*="compress"] {
        min-height: 52px !important;
        padding: 14px 28px !important;
        font-size: .95rem !important;
        width: 100% !important;
        max-width: 320px !important;
    }

    /* Cloud picker — full width */
    .pw-cp { padding: 1.5rem .75rem 1.75rem !important; }
    .pw-cp__select { width: 100% !important; max-width: 280px !important; padding: 14px 24px !important; }
    .pw-cp__cloud { width: 44px !important; height: 44px !important; }
}

/* ── Homepage tool grid ──────────────────────────────────────────────────── */
@media (max-width: 500px) {
    .ht-grid { grid-template-columns: repeat(2, 1fr) !important; gap: .65rem !important; }
    .ht-tool { padding: .9rem .6rem 1rem !important; }
    .ht-tool__icon { width: 48px !important; height: 48px !important; margin-bottom: .6rem !important; }
    .ht-tool__name { font-size: .78rem !important; }
    .ht-tool__desc { display: none !important; } /* hide desc on very small screens */
}
@media (min-width: 501px) and (max-width: 767px) {
    .ht-grid { grid-template-columns: repeat(3, 1fr) !important; }
}
@media (min-width: 768px) and (max-width: 1023px) {
    .ht-grid { grid-template-columns: repeat(4, 1fr) !important; }
}

/* ── Footer mobile ───────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .footer-inner { grid-template-columns: 1fr !important; gap: 2rem !important; }
    .footer-brand__img { height: 32px !important; }
    .footer-main { padding: 2.5rem 1.25rem 1.5rem !important; }
}

/* ── Split/Merge page mobile ─────────────────────────────────────────────── */
@media (max-width: 540px) {
    .sp-options__grid { grid-template-columns: 1fr !important; }
    .sp-file-card { flex-wrap: wrap; }
    .sp-file-card__change { margin-top: .25rem; }
    .mg-upload-zone { padding: 1.75rem 1rem 1.5rem !important; }
    .mg-file-item { gap: .5rem; }
    .mg-file-item__size { display: none; } /* hide size on mobile */
}

/* ── Progress bars — wider on mobile ────────────────────────────────────── */
@media (max-width: 480px) {
    .sp-progress-wrap { max-width: 100% !important; }
    #progressBarContainer { max-width: 100% !important; width: 100% !important; }
}

/* ── Tap target improvements (all buttons) ───────────────────────────────── */
@media (max-width: 768px) {
    button, [role="button"], a.btn--header, .pw-btn-primary, .pw-btn-secondary {
        -webkit-tap-highlight-color: rgba(229,50,45,.15);
        touch-action: manipulation;
    }
    /* Prevent zoom on input focus on iOS */
    input[type="text"],
    input[type="search"],
    input[type="email"],
    select,
    textarea {
        font-size: 16px !important;
    }
}

/* ── Compress PDF card — full width mobile ───────────────────────────────── */
@media (max-width: 640px) {
    .compress-card { padding: 0 .75rem 2rem !important; margin: 1.25rem auto !important; }
    .drop-zone { padding: 2rem .75rem !important; }
}

/* ── Text sections — tighter mobile ─────────────────────────────────────── */
@media (max-width: 480px) {
    .text-section { padding: 1.25rem 1rem !important; margin: 1rem .5rem !important; }
    .text-section h2 { font-size: 1.2rem !important; }
    .faq-section summary { padding: .75rem 1rem !important; font-size: .88rem !important; }
    .benefits-list li { font-size: .88rem !important; }
    ol li { font-size: .88rem !important; }
}