/* ─────────────────────────────────────────────────────────────────────────────
 * AixKit Premium Tool UI — scss/aix-premium-tools.css
 * ALL rules scoped under .aix-premium-page; zero impact on non-premium pages.
 * Brand: primary #dc2626 | dark #111827 | muted #64748b | bg #f8fafc | border #e5e7eb
 * ─────────────────────────────────────────────────────────────────────────── */

/* ── Hero ─────────────────────────────────────────────────────────────────── */
.aix-premium-page .aix-p2-hero {
    background: #fff;
    border-bottom: 1px solid #e5e7eb;
    padding: 44px 0 32px;
}
.aix-premium-page .aix-p2-hero h1 {
    color: #111827;
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -.02em;
}
.aix-premium-page .aix-p2-trust { color: #374151; }
.aix-premium-page .aix-p2-micro { color: #6b7280; }

/* Trust pills inside dual-converter-hero */
.aix-premium-page .aix-p2-pill,
.aix-premium-page .aix-hero-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #f0fdf4;
    border: 1px solid #86efac;
    color: #166534;
    border-radius: 20px;
    padding: 3px 12px;
    font-size: .78rem;
    font-weight: 600;
}

/* ── WRAPPER BORDER NULLIFICATION ────────────────────────────────────────────
   Root cause of box-in-box and blue/dotted vertical guide lines:
   css/1.css sets:
     .toolarea-pdf  { border: 1px solid #4d90fe }   ← blue vertical line
     .toolarea-pdfave { border: 2px dashed #ddd }   ← dotted wrapper
   Nullify both inside premium pages only — global css/1.css untouched.
   ────────────────────────────────────────────────────────────────────────── */
.aix-premium-page .toolarea-pdf,
.aix-premium-page .toolarea {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 0 !important;
}
.aix-premium-page .toolarea-pdfave {
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
}

/* ── Converter section wrapper ───────────────────────────────────────────── */
.aix-premium-page .aix-converter-section {
    max-width: 980px;
    margin: 32px auto 56px;
    padding: 0 16px;
}

/* ── Single unified conversion card ──────────────────────────────────────── */
.aix-premium-page .aix-convert-card {
    border: none !important;
    outline: none !important;
    box-shadow: 0 18px 50px rgba(15,23,42,.10);
    border-radius: 20px;
    padding: 44px 56px 48px;
    background: #fff !important;
    text-align: center;
    overflow: visible;
}

/* Warning strip: PHP guard (json mode) + CSS belt-and-suspenders */
.aix-premium-page .aix-notice,
.aix-premium-page .tool-warning,
.aix-premium-page .upload-warning { display: none !important; }

/* Drop zone: dashed area inside the card
   Covers: .aix-upload-zone (p2w), .aix-drop-zone (p2x), #dropZone (p2x/generic) */
.aix-premium-page .aix-upload-zone,
.aix-premium-page .aix-drop-zone,
.aix-premium-page #dropZone {
    border: 2px dashed rgba(220,38,38,.55) !important;
    background: #fffafa !important;
    border-radius: 16px !important;
    padding: 50px 30px !important;
    margin-bottom: 28px !important;
    min-height: 220px;
    transition: background .18s, border-color .18s;
}
.aix-premium-page .aix-upload-zone:hover,
.aix-premium-page .aix-drop-zone:hover,
.aix-premium-page #dropZone:hover,
.aix-premium-page .aix-upload-zone.dragover,
.aix-premium-page .aix-drop-zone.dragover,
.aix-premium-page #dropZone.dragover {
    background: #fff0f0 !important;
    border-color: rgba(220,38,38,.8) !important;
}

/* .aix-tool-box neutralisation — box is visually absorbed by .aix-convert-card */
.aix-premium-page .aix-convert-card .aix-tool-box {
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
}
.aix-premium-page .aix-select-btn {
    background: #dc2626;
    border-radius: 8px;
    font-weight: 600;
}
.aix-premium-page .aix-select-btn:hover { background: #b91c1c; }
.aix-premium-page .aix-chosen { color: #dc2626; }

.aix-premium-page .aix-trust-line {
    margin-top: 10px;
    font-size: .8rem;
    color: #64748b;
}

.aix-premium-page #actionBtn {
    background: #dc2626;
    border-radius: 10px;
    font-size: 1.05rem;
    letter-spacing: .01em;
    padding: 16px 28px;
    min-width: 220px;
    box-shadow: 0 2px 12px rgba(220,38,38,.25);
    transition: background .18s, box-shadow .18s;
}
.aix-premium-page #actionBtn:disabled {
    background: #fca5a5;
    box-shadow: none;
}
.aix-premium-page #actionBtn:hover:not(:disabled) {
    background: #b91c1c;
    box-shadow: 0 4px 18px rgba(185,28,28,.30);
}
.aix-premium-page .aix-progress {
    color: #dc2626;
    background: #fff5f5;
    border-radius: 8px;
}
.aix-premium-page .aix-result {
    background: #f0fdf4;
    border: 1px solid #86efac;
    border-radius: 10px;
}
.aix-premium-page .aix-dl-btn {
    background: #16a34a;
    border-radius: 10px;
    font-weight: 700;
    padding: 13px 44px;
}
.aix-premium-page .aix-dl-btn:hover { background: #15803d; }

/* ── Feature strip section wrapper ──────────────────────────────────────── */
.aix-premium-page .aix-feature-strip-section {
    max-width: 1200px;
    margin: 0 auto 64px;
    padding: 0 16px;
}

/* ── Feature strip (trust/benefit row below upload) ──────────────────────── */
.aix-feature-strip {
    background: #f8fafc;
    border-top: 1px solid #e5e7eb;
    border-bottom: 1px solid #e5e7eb;
    margin-top: 0;
}
.aix-premium-page .aix-feature-strip-section .aix-feature-strip {
    border-radius: 16px;
    border: 1px solid #e5e7eb;
    overflow: hidden;
}
.aix-feature-strip .container {
    display: flex;
    flex-wrap: wrap;
    padding-left: 0;
    padding-right: 0;
}
.aix-feature-item {
    flex: 1 1 160px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 18px 22px;
    border-right: 1px solid #e5e7eb;
}
.aix-feature-item:last-child { border-right: none; }
.aix-feature-icon {
    font-size: 1rem;
    color: #16a34a;
    flex-shrink: 0;
    margin-top: 2px;
}
.aix-feature-title {
    font-size: .83rem;
    font-weight: 600;
    color: #111827;
    line-height: 1.3;
}
.aix-feature-desc {
    font-size: .75rem;
    color: #64748b;
    line-height: 1.45;
    margin-top: 2px;
}

/* ── Sections & headings ─────────────────────────────────────────────────── */
.aix-premium-page .aix-p2-section { padding: 44px 0; }
.aix-premium-page .aix-p2-section-alt { background: #f8fafc; }
.aix-premium-page .aix-p2-h2 {
    font-size: 1.45rem;
    font-weight: 800;
    color: #111827;
    letter-spacing: -.02em;
    margin-bottom: 28px;
}

/* ── Steps (How-to) ──────────────────────────────────────────────────────── */
.aix-premium-page .aix-steps-ol {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    list-style: none;
    padding: 0;
    margin: 0 auto;
    max-width: 860px;
}
.aix-premium-page .aix-steps-ol li {
    flex: 1 1 180px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
    padding: 24px 16px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 1px 4px rgba(0,0,0,.05);
}
.aix-premium-page .aix-step-num {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #dc2626;
    color: #fff;
    font-size: .85rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.aix-premium-page .aix-step-text {
    font-size: .88rem;
    color: #374151;
    line-height: 1.55;
}

/* ── Feature cards (Key Features grid — non-JSON fallback) ──────────────── */
.aix-premium-page .aix-feat-card {
    border: 1px solid #e5e7eb;
    border-top: 3px solid #dc2626;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,.05);
    transition: box-shadow .18s;
}
.aix-premium-page .aix-feat-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.10); }
.aix-premium-page .aix-feat-icon { color: #dc2626; }
.aix-premium-page .aix-feat-title { color: #111827; }

/* ── Tips block — informational panel, not an alert ─────────────────────── */
.aix-premium-page .aix-tip-block {
    border-left: 4px solid #dc2626 !important;
    background: #f8fafc !important;
    color: #334155 !important;
    border-radius: 0 8px 8px 0 !important;
}
.aix-premium-page .aix-tip-block strong {
    color: #111827 !important;
    font-weight: 700 !important;
    display: block !important;
    margin-bottom: 4px !important;
}
.aix-premium-page .aix-tip-block li { margin-bottom: 4px; }
.aix-premium-page .aix-tip-block a { color: #dc2626; }

/* ── Related tools — balanced rectangular pills ──────────────────────────── */
.aix-premium-page .aix-related {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    justify-content: center !important;
    max-width: 860px !important;
    margin: 0 auto !important;
}
.aix-premium-page .aix-related a {
    display: inline-block;
    padding: 9px 20px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: .85rem;
    font-weight: 500;
    color: #374151;
    text-decoration: none;
    transition: background .18s, color .18s, border-color .18s, box-shadow .18s;
    white-space: nowrap;
}
.aix-premium-page .aix-related a:hover {
    background: #dc2626;
    color: #fff;
    border-color: #dc2626;
    box-shadow: 0 2px 8px rgba(220,38,38,.20);
}

/* ── Premium FAQ accordion ───────────────────────────────────────────────── */
.aix-premium-faq {
    max-width: 820px;
    margin: 0 auto;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
}
.aix-premium-faq details { border-bottom: 1px solid #f3f4f6; }
.aix-premium-faq details:last-child { border-bottom: none; }
.aix-premium-faq summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    font-size: .92rem;
    font-weight: 600;
    color: #111827;
    cursor: pointer;
    list-style: none;
    gap: 12px;
    user-select: none;
    transition: color .15s;
}
.aix-premium-faq summary::-webkit-details-marker { display: none; }
.aix-premium-faq summary::after {
    content: '+';
    font-size: 1.2rem;
    font-weight: 400;
    color: #dc2626;
    flex-shrink: 0;
    line-height: 1;
}
.aix-premium-faq details[open] > summary {
    border-bottom: 1px solid #f3f4f6;
    color: #dc2626;
}
.aix-premium-faq details[open] > summary::after { content: '\2212'; }
.aix-premium-faq .faq-ans {
    padding: 14px 20px 16px;
    font-size: .88rem;
    color: #4b5563;
    line-height: 1.65;
    margin: 0;
}

/* ── Security trust card ─────────────────────────────────────────────────── */
.aix-security-card {
    max-width: 820px;
    margin: 20px auto 0;
    background: #f0fdf4;
    border: 1px solid #86efac;
    border-radius: 10px;
    padding: 14px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: .85rem;
    color: #166534;
    line-height: 1.5;
}
.aix-security-card i { font-size: 1.1rem; flex-shrink: 0; }

/* ── Trust badge pills ───────────────────────────────────────────────────── */
.aix-trust-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin: 12px 0 0;
}
.aix-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: .79rem;
    font-weight: 600;
}
.aix-badge-green { background:#f0fdf4; border:1px solid #86efac; color:#166534; }
.aix-badge-blue  { background:#eff6ff; border:1px solid #bfdbfe; color:#1d4ed8; }
.aix-badge-gray  { background:#f9fafb; border:1px solid #e5e7eb; color:#374151; }

/* ── Mobile polish ───────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .aix-premium-page .aix-tool-box { padding: 24px 20px; }
    .aix-premium-page .aix-p2-hero h1 { font-size: 1.5rem; }
    .aix-premium-page #actionBtn { width: 100%; padding: 14px 20px; }
    .aix-feature-item {
        flex: 1 1 45%;
        border-right: none;
        border-bottom: 1px solid #e5e7eb;
    }
    .aix-feature-item:nth-last-child(-n+2):nth-child(2n+1),
    .aix-feature-item:last-child { border-bottom: none; }
    .aix-premium-page .aix-steps-ol { flex-direction: column; gap: 12px; }
    .aix-premium-page .aix-steps-ol li {
        flex-direction: row;
        text-align: left;
        align-items: flex-start;
    }
    .aix-premium-page .aix-related { gap: 8px !important; }
    .aix-premium-page .aix-related a { font-size: .8rem; padding: 8px 14px; }
    .aix-premium-page .aix-tip-block { margin-left: 0 !important; margin-right: 0 !important; }
}
@media (max-width: 480px) {
    .aix-feature-item { flex: 1 1 100%; border-bottom: 1px solid #e5e7eb; }
    .aix-feature-item:last-child { border-bottom: none; }
    .aix-premium-page .aix-related a { width: 100%; text-align: center; white-space: normal; }
}