/* ============================================================
   PDF-to-Image Converter — Shared Styles
   Shared by pdf-to-png / pdf-to-jpg / pdf-to-webp / pdf-to-tiff / pdf-to-avif
   ============================================================ */

/* Per-format accent colors. */
.pdf-page[data-format="png"]  { --pdf-accent: #2563eb; --pdf-accent-dark: #1d4ed8; }
.pdf-page[data-format="jpg"]  { --pdf-accent: #ea580c; --pdf-accent-dark: #c2410c; }
.pdf-page[data-format="webp"] { --pdf-accent: #16a34a; --pdf-accent-dark: #15803d; }
.pdf-page[data-format="tiff"] { --pdf-accent: #475569; --pdf-accent-dark: #334155; }
.pdf-page[data-format="avif"] { --pdf-accent: #7c3aed; --pdf-accent-dark: #6d28d9; }

/* Shared neutrals. */
.pdf-page {
    --pdf-border: #e5e7eb;
    --pdf-card-bg: #ffffff;
    --pdf-panel-bg: #f3f4f6;
    --pdf-input-bg: #ffffff;
    --pdf-input-border: #e5e7eb;
    --pdf-muted: #6b7280;
    --pdf-text: #111827;
    --pdf-success: #16a34a;
    --pdf-error: #dc2626;
}

/* Hero — plain, no card. */
.pdf-hero { padding: 48px 0 24px; }
.pdf-hero-inner { max-width: 760px; margin: 0 auto; text-align: center; }
.pdf-title { font-size: clamp(1.75rem, 4vw, 2.5rem); line-height: 1.2; margin: 0 0 12px; }
.pdf-subtitle { font-size: 1.05rem; color: var(--pdf-muted); margin: 0; }

/* Tool card — ONE card, white, soft. */
.pdf-tool-card {
    background: var(--pdf-card-bg);
    border: 1px solid #ddd;
    border-radius: 16px;
    padding: 28px;
    margin: 12px 0 24px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 6px 24px rgba(0,0,0,0.04);
}

/* Drop zone. */
.pdf-drop-zone {
    border: 2px dashed var(--pdf-input-border);
    border-radius: 12px;
    background: var(--pdf-panel-bg);
    padding: 40px 24px;
    text-align: center;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.pdf-drop-zone.is-hover { border-color: var(--pdf-accent); background: #fafbff; }
.pdf-drop-zone-icon { display: inline-flex; width: 48px; height: 48px; color: var(--pdf-accent); }
.pdf-drop-zone-text { margin: 12px 0 4px; font-size: 1rem; }
.pdf-drop-zone-formats { margin: 0; font-size: 0.85rem; color: var(--pdf-muted); }
.pdf-browse-btn {
    background: none; border: none; color: var(--pdf-accent);
    text-decoration: underline; cursor: pointer; font: inherit; padding: 0;
}
.pdf-browse-btn:focus-visible { outline: 2px solid var(--pdf-accent); outline-offset: 2px; }

/* Queue. */
.pdf-queue { margin-top: 16px; display: flex; flex-direction: column; gap: 10px; }
.pdf-queue-card {
    display: grid; grid-template-columns: 48px 1fr auto;
    gap: 12px; align-items: center;
    padding: 12px; background: var(--pdf-panel-bg);
    border: 1px solid var(--pdf-input-border); border-radius: 10px;
}
.pdf-queue-thumb {
    width: 48px; height: 60px;
    background: #fff; border: 1px solid var(--pdf-input-border); border-radius: 4px;
    display: flex; align-items: center; justify-content: center;
    color: var(--pdf-muted); font-size: 0.7rem;
}
.pdf-queue-meta { min-width: 0; }
.pdf-queue-name { font-size: 0.95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pdf-queue-info { font-size: 0.8rem; color: var(--pdf-muted); margin-top: 2px; }
.pdf-queue-remove {
    background: none; border: 1px solid var(--pdf-input-border);
    border-radius: 6px; width: 32px; height: 32px; cursor: pointer;
    color: var(--pdf-muted); display: flex; align-items: center; justify-content: center;
}
.pdf-queue-remove:hover { color: var(--pdf-error); border-color: var(--pdf-error); }

/* Per-card progress. */
.pdf-card-progress { grid-column: 1 / -1; margin-top: 8px; }
.pdf-progress-bar {
    height: 6px; border-radius: 3px; background: var(--pdf-input-border);
    overflow: hidden; position: relative;
}
.pdf-progress-fill {
    height: 100%; background: var(--pdf-accent);
    width: 0%; transition: width .15s ease-out;
}
.pdf-progress-fill.is-indeterminate {
    width: 30%; animation: pdf-progress-slide 1.2s infinite linear;
}
@keyframes pdf-progress-slide {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(400%); }
}
.pdf-progress-label {
    font-size: 0.8rem; color: var(--pdf-muted); margin-top: 4px;
}
.pdf-progress-label.is-error { color: var(--pdf-error); }

/* Settings panel. */
.pdf-settings {
    margin-top: 18px; padding: 18px; border-radius: 10px;
    background: var(--pdf-panel-bg);
    display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px;
}
.pdf-setting label { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 6px; }
.pdf-setting select,
.pdf-setting input[type="text"] {
    width: 100%; padding: 8px 10px;
    background: var(--pdf-input-bg);
    border: 1px solid var(--pdf-input-border); border-radius: 6px;
    font: inherit;
}
.pdf-setting input[type="range"] { width: 100%; accent-color: var(--pdf-accent); }
.pdf-setting-value { font-size: 0.85rem; color: var(--pdf-muted); margin-left: 6px; }
.pdf-setting-help { font-size: 0.78rem; color: var(--pdf-muted); margin-top: 4px; }
.pdf-setting-toggle { display: flex; align-items: center; gap: 8px; font-size: 0.9rem; }
.pdf-setting-toggle input { accent-color: var(--pdf-accent); }

/* Action buttons. */
.pdf-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.pdf-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 10px 18px; border-radius: 8px; border: 1px solid var(--pdf-input-border);
    background: #fff; color: var(--pdf-text); font: inherit; cursor: pointer;
    transition: background .15s, border-color .15s;
}
.pdf-btn:hover { border-color: var(--pdf-muted); }
.pdf-btn:focus-visible { outline: 2px solid var(--pdf-accent); outline-offset: 2px; }
.pdf-btn-primary { background: var(--pdf-accent); border-color: var(--pdf-accent); color: #fff; }
.pdf-btn-primary:hover { background: var(--pdf-accent-dark); border-color: var(--pdf-accent-dark); }
.pdf-btn[disabled] { opacity: 0.55; cursor: not-allowed; }

/* Output grid. */
.pdf-output-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px; margin-top: 18px;
}
.pdf-output-card {
    background: var(--pdf-panel-bg);
    border: 1px solid var(--pdf-input-border); border-radius: 8px;
    padding: 10px; display: flex; flex-direction: column; gap: 8px;
}
.pdf-output-thumb {
    aspect-ratio: 8.5 / 11; width: 100%;
    background: #fff; border: 1px solid var(--pdf-input-border); border-radius: 4px;
    object-fit: contain;
}
.pdf-output-meta { font-size: 0.78rem; color: var(--pdf-muted); }
.pdf-output-name { font-size: 0.85rem; }

/* Inline siblings strip — below the tool card, separator-style. */
.pdf-siblings {
    margin-top: 36px; padding-top: 36px;
    border-top: 1px solid var(--pdf-border);
}
.pdf-siblings-heading { font-size: 1.1rem; margin: 0 0 12px; }
.pdf-siblings-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 12px 24px;
}
.pdf-siblings-list li { margin: 0; }
.pdf-siblings-list a { color: var(--pdf-accent); text-decoration: none; }
.pdf-siblings-list a:hover { text-decoration: underline; }

/* SEO body & FAQ sections — separator-style, flat. */
.pdf-seo-content,
.pdf-faq {
    margin-top: 36px; padding-top: 36px;
    border-top: 1px solid var(--pdf-border);
}
.pdf-seo-content-inner { /* uses .entry-content from theme */ }
.pdf-faq-inner {
    padding: 0; background: none; border: none; box-shadow: none; border-radius: 0;
}
.pdf-faq-heading { font-size: 1.5rem; margin: 0 0 18px; }
.pdf-faq-item {
    padding: 18px 0;
    border-bottom: 1px solid var(--pdf-border);
}
.pdf-faq-item:last-child { border-bottom: none; }
.pdf-faq-q {
    font-size: 1.05rem; font-weight: 600; cursor: pointer;
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    list-style: none;
}
.pdf-faq-q::-webkit-details-marker { display: none; }
.pdf-faq-q::after {
    content: '+';
    flex: 0 0 auto;
    font-size: 1.4rem; font-weight: 400; line-height: 1;
    color: var(--pdf-muted);
    transition: transform .15s ease-out;
}
.pdf-faq-item[open] > .pdf-faq-q::after { content: '\2212'; }
.pdf-faq-a { margin-top: 10px; font-size: 0.95rem; color: var(--pdf-text); line-height: 1.6; }

/* Mobile tightening — do NOT override the flat .pdf-faq-inner rule. */
@media (max-width: 640px) {
    .pdf-tool-card { padding: 18px; border-radius: 12px; }
    .pdf-hero { padding: 32px 0 16px; }
}