/* JeepDTC Layout Fix Plugin CSS */

*, *::before, *::after { box-sizing: border-box; }

.jdtc-page { font-family: 'Outfit', sans-serif; color: #0f172a; }

.jdtc-wrap { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

/* ── Breadcrumb ── */
.jdtc-crumb { display:flex; align-items:center; gap:6px; font-size:0.8125rem; color:#64748b; flex-wrap:wrap; }
.jdtc-crumb a { color:#64748b; text-decoration:none; }
.jdtc-crumb a:hover { color:#0f172a; }
.jdtc-crumb span { color:#94a3b8; }

/* ── Hero ── */
.jdtc-hero { background:#f8fafc; border-bottom:1px solid #e2e8f0; padding:40px 0 48px; }
.jdtc-hero h1 { font-size:clamp(1.75rem,4vw,2.5rem); font-weight:800; letter-spacing:-0.02em; margin:12px 0 0; }
.jdtc-hero-desc { font-size:1rem; color:#475569; margin-top:10px; max-width:600px; line-height:1.7; }
.jdtc-hero-desc strong { color:#0f172a; }

.jdtc-hero-head { display:flex; align-items:center; gap:14px; margin-top:16px; flex-wrap:wrap; }
.jdtc-cat-badge { display:inline-flex; align-items:center; padding:5px 14px; border-radius:999px; border:1.5px solid; font-size:0.8125rem; font-weight:700; letter-spacing:0.04em; }

/* ── Filter Pills ── */
.jdtc-pills { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:20px; }
.jdtc-pill { padding:6px 16px; border-radius:999px; border:1.5px solid #d1d5db; background:#fff; font-size:0.875rem; font-weight:600; color:#374151; text-decoration:none; font-family:'Outfit',sans-serif; transition:all .15s; }
.jdtc-pill:hover { background:#f1f5f9; border-color:#94a3b8; color:#0f172a; }
.jdtc-pill.active { background:#0f172a; color:#fff; border-color:#0f172a; }

/* ── Count text ── */
.jdtc-count { font-size:0.875rem; color:#475569; margin-bottom:20px; }
.jdtc-count strong { color:#0f172a; }

/* ── Code Grid ── */
.jdtc-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px,1fr)); gap:16px; }
.jdtc-empty { color:#475569; padding:32px 0; grid-column:1/-1; }

/* ── Code Card ── */
.jdtc-card { background:#fff; border:1.5px solid #e2e8f0; border-radius:14px; padding:20px; display:flex; flex-direction:column; gap:10px; text-decoration:none; color:inherit; transition:all .2s; }
.jdtc-card:hover { border-color:#0f172a; box-shadow:0 8px 24px rgba(0,0,0,.08); transform:translateY(-2px); }
.jdtc-card-top { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
.jdtc-code-num { font-size:1.375rem; font-weight:800; color:#0f172a; letter-spacing:-0.01em; }
.jdtc-code-sys { font-size:0.75rem; color:#64748b; margin-top:2px; }
.jdtc-card-desc { font-size:0.875rem; color:#374151; line-height:1.6; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; flex:1; }
.jdtc-card-link { font-size:0.8125rem; font-weight:700; color:#0f172a; }

/* ── Badges ── */
.jdtc-badge { display:inline-flex; align-items:center; padding:3px 10px; border-radius:999px; font-size:0.75rem; font-weight:700; white-space:nowrap; }
.badge-critical { background:#dc2626; color:#fff; }
.badge-high     { background:#ea580c; color:#fff; }
.badge-warning  { background:#d97706; color:#fff; }
.badge-moderate { background:#d97706; color:#fff; }
.badge-safe     { background:#16a34a; color:#fff; }
.badge-info     { background:#2563eb; color:#fff; }

/* ── Pagination ── */
.jdtc-pager { display:flex; flex-wrap:wrap; justify-content:center; gap:4px; margin-top:40px; }
.jdtc-pager a, .jdtc-pager span { display:inline-flex; align-items:center; justify-content:center; min-width:36px; height:36px; padding:0 10px; border-radius:8px; border:1.5px solid #e2e8f0; background:#fff; font-size:0.8125rem; font-weight:600; font-family:'Outfit',sans-serif; color:#374151; text-decoration:none; transition:all .15s; }
.jdtc-pager a:hover { background:#f1f5f9; border-color:#94a3b8; color:#0f172a; }
.jdtc-pager .current { background:#0f172a; color:#fff; border-color:#0f172a; }
.jdtc-pager .dots { background:transparent; border-color:transparent; color:#94a3b8; }
.jdtc-pager .prev, .jdtc-pager .next { padding:0 14px; }
.jdtc-page-info { text-align:center; font-size:0.8125rem; color:#64748b; margin-top:10px; }

/* ── Single Code Detail ── */
.jdtc-code-header { display:flex; align-items:center; gap:14px; margin-top:16px; flex-wrap:wrap; }
.jdtc-code-big { font-size:clamp(2.5rem,7vw,4rem); font-weight:800; letter-spacing:-0.03em; color:#0f172a; line-height:1; }
.jdtc-code-title { font-size:clamp(1.1rem,3vw,1.5rem); font-weight:700; margin-top:10px; max-width:700px; line-height:1.35; color:#0f172a; }

.jdtc-chips { display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.jdtc-chip { display:inline-flex; align-items:center; gap:6px; padding:5px 12px; background:#f8fafc; border:1px solid #cbd5e1; border-radius:8px; font-size:0.8125rem; font-weight:600; color:#1e293b; }
.chip-danger { background:#fef2f2; border-color:#fca5a5; color:#991b1b; }
.chip-safe   { background:#f0fdf4; border-color:#86efac; color:#166534; }

/* ── Detail Layout ── */
.jdtc-detail-layout { display:grid; grid-template-columns:1fr 300px; gap:32px; padding:40px 0 72px; }
@media(max-width:900px){ .jdtc-detail-layout { grid-template-columns:1fr; } }

.jdtc-content-box { background:#fff; border:1.5px solid #e2e8f0; border-radius:14px; padding:28px 32px; font-size:0.9375rem; color:#1e293b; line-height:1.8; }
.jdtc-content-box h2,.jdtc-content-box h3 { color:#0f172a; margin:20px 0 10px; font-weight:700; }
.jdtc-content-box ul,.jdtc-content-box ol { padding-left:20px; margin:8px 0; }
.jdtc-content-box li { margin-bottom:5px; }
.jdtc-content-box table { width:100%; border-collapse:collapse; font-size:0.875rem; margin:12px 0; }
.jdtc-content-box table th { background:#f1f5f9; padding:10px 14px; text-align:left; font-weight:700; border:1px solid #e2e8f0; color:#0f172a; }
.jdtc-content-box table td { padding:10px 14px; border:1px solid #e2e8f0; color:#374151; }

/* ── Prev / Next ── */
.jdtc-nav-btns { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:28px; }
@media(max-width:480px){ .jdtc-nav-btns { grid-template-columns:1fr; } }

.jdtc-nav-btn { display:flex; align-items:center; gap:12px; padding:14px 18px; background:#fff; border:1.5px solid #e2e8f0; border-radius:10px; text-decoration:none; color:inherit; transition:all .18s; }
.jdtc-nav-btn:hover { border-color:#0f172a; background:#f8fafc; box-shadow:0 4px 12px rgba(0,0,0,.07); }
.jdtc-nav-next { justify-content:flex-end; }

.nav-arrow { width:34px; height:34px; border-radius:8px; background:#f1f5f9; display:flex; align-items:center; justify-content:center; font-size:1rem; font-weight:700; color:#0f172a; flex-shrink:0; transition:all .18s; }
.jdtc-nav-btn:hover .nav-arrow { background:#0f172a; color:#fff; }

.nav-info { display:flex; flex-direction:column; gap:2px; min-width:0; }
.nav-info.right { text-align:right; }
.nav-info small { font-size:0.7rem; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:#64748b; }
.nav-info strong { font-size:0.9375rem; font-weight:800; color:#0f172a; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; }

/* ── Sidebar Boxes ── */
.jdtc-detail-sidebar { display:flex; flex-direction:column; gap:16px; }
.jdtc-sbox { background:#fff; border:1.5px solid #e2e8f0; border-radius:12px; padding:18px 20px; }
.jdtc-sbox h3 { font-size:0.875rem; font-weight:700; color:#0f172a; margin-bottom:12px; }

.jdtc-sbox-green { background:#f0fdf4; border-color:#bbf7d0; }
.jdtc-sbox-green h3 { color:#15803d; }
.jdtc-sbox-green ul { list-style:none; display:flex; flex-direction:column; gap:6px; padding:0; }
.jdtc-sbox-green li { font-size:0.8125rem; color:#166534; font-weight:500; }
.jdtc-sbox-green li::before { content:'✓ '; font-weight:800; color:#16a34a; }

.jdtc-related { list-style:none; padding:0; display:flex; flex-direction:column; gap:6px; }
.jdtc-related a { display:flex; align-items:center; justify-content:space-between; padding:8px 12px; background:#f8fafc; border:1px solid #e2e8f0; border-radius:7px; font-size:0.875rem; font-weight:700; color:#0f172a; text-decoration:none; transition:all .15s; }
.jdtc-related a:hover { background:#0f172a; color:#fff; }

.jdtc-sbox-dark { background:linear-gradient(135deg,#0f172a,#1e293b); border-color:#0f172a; text-align:center; }
.jdtc-sbox-dark h3 { color:#fff; }
.jdtc-sbox-dark p { font-size:0.8125rem; color:rgba(255,255,255,.7); line-height:1.6; margin-bottom:14px; }
.jdtc-sbox-dark a { display:block; background:#fff; color:#0f172a; font-weight:700; font-size:0.875rem; padding:9px 18px; border-radius:8px; text-decoration:none; font-family:'Outfit',sans-serif; transition:background .15s; }
.jdtc-sbox-dark a:hover { background:#f1f5f9; }