/* PriyoBlog TOC Pro - Public Styles */

/* ===== BASE STYLES ===== */
.pbtoc-wrap {
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    margin: 24px 0;
    background: #fff;
    overflow: hidden;
    font-family: 'Segoe UI', -apple-system, sans-serif;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    transition: box-shadow 0.3s;
    clear: both;
}
.pbtoc-wrap:hover { box-shadow: 0 4px 20px rgba(0,0,0,0.1); }

.pbtoc-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    cursor: pointer;
    user-select: none;
}
.pbtoc-icon { font-size: 18px; }
.pbtoc-title { flex: 1; font-size: 15px; font-weight: 700; }
.pbtoc-toggle {
    background: none; border: none; cursor: pointer; padding: 4px 8px;
    font-size: 12px; border-radius: 4px; transition: background 0.2s;
    pointer-events: auto; z-index: 10; position: relative;
}
.pbtoc-toggle:hover { background: rgba(0,0,0,0.08); }
.pbtoc-header { pointer-events: none; }
.pbtoc-toggle, .pbtoc-link { pointer-events: auto; }

.pbtoc-list-wrap { padding: 4px 18px 14px; }
.pbtoc-list { margin: 8px 0 0; padding: 0 0 0 20px; }
.pbtoc-list.pbtoc-no-numbers { list-style: none; padding-left: 4px; }
.pbtoc-item { margin: 6px 0; line-height: 1.6; }
.pbtoc-sub { margin-top: 4px; padding-left: 20px; }
.pbtoc-link {
    text-decoration: none;
    display: inline-block;
    transition: color 0.2s, padding-left 0.2s;
    border-radius: 3px;
}
.pbtoc-link:hover { padding-left: 4px; }
.pbtoc-num { font-weight: 600; margin-right: 3px; }
.pbtoc-link.pbtoc-active { font-weight: 700; }

.pbtoc-footer {
    border-top: 1px solid rgba(0,0,0,0.06);
    padding: 8px 18px;
    text-align: right;
    font-size: 11px;
}
.pbtoc-footer a { text-decoration: none; opacity: 0.6; transition: opacity 0.2s; }
.pbtoc-footer a:hover { opacity: 1; }

/* ===== THEME: PRIYOBLOG (default) ===== */
.pbtoc-theme-priyoblog {
    border-color: #f97316;
    background: linear-gradient(135deg, #fff8f0 0%, #fffdf9 100%);
}
.pbtoc-theme-priyoblog .pbtoc-header { background: linear-gradient(135deg, #f97316, #fb923c); }
.pbtoc-theme-priyoblog .pbtoc-title, .pbtoc-theme-priyoblog .pbtoc-icon, .pbtoc-theme-priyoblog .pbtoc-toggle { color: #fff; }
.pbtoc-theme-priyoblog .pbtoc-link { color: #c2410c; }
.pbtoc-theme-priyoblog .pbtoc-link:hover, .pbtoc-theme-priyoblog .pbtoc-link.pbtoc-active { color: #f97316; }
.pbtoc-theme-priyoblog .pbtoc-footer { color: #f97316; }
.pbtoc-theme-priyoblog .pbtoc-footer a { color: #f97316; }

/* ===== THEME: BLUE ===== */
.pbtoc-theme-blue { border-color: #0077b6; background: #f0f7ff; }
.pbtoc-theme-blue .pbtoc-header { background: linear-gradient(135deg, #0077b6, #00a8e8); }
.pbtoc-theme-blue .pbtoc-title, .pbtoc-theme-blue .pbtoc-icon, .pbtoc-theme-blue .pbtoc-toggle { color: #fff; }
.pbtoc-theme-blue .pbtoc-link { color: #005f8a; }
.pbtoc-theme-blue .pbtoc-link:hover, .pbtoc-theme-blue .pbtoc-link.pbtoc-active { color: #0077b6; }
.pbtoc-theme-blue .pbtoc-footer a { color: #0077b6; }

/* ===== THEME: GREEN ===== */
.pbtoc-theme-green { border-color: #2d6a4f; background: #f0faf4; }
.pbtoc-theme-green .pbtoc-header { background: linear-gradient(135deg, #2d6a4f, #40916c); }
.pbtoc-theme-green .pbtoc-title, .pbtoc-theme-green .pbtoc-icon, .pbtoc-theme-green .pbtoc-toggle { color: #fff; }
.pbtoc-theme-green .pbtoc-link { color: #1b4332; }
.pbtoc-theme-green .pbtoc-link:hover, .pbtoc-theme-green .pbtoc-link.pbtoc-active { color: #40916c; }
.pbtoc-theme-green .pbtoc-footer a { color: #2d6a4f; }

/* ===== THEME: DARK ===== */
.pbtoc-theme-dark { border-color: #374151; background: #111827; }
.pbtoc-theme-dark .pbtoc-header { background: linear-gradient(135deg, #1a1a2e, #16213e); }
.pbtoc-theme-dark .pbtoc-title { color: #f3f4f6; }
.pbtoc-theme-dark .pbtoc-icon, .pbtoc-theme-dark .pbtoc-toggle { color: #f97316; }
.pbtoc-theme-dark .pbtoc-list-wrap { background: #1f2937; }
.pbtoc-theme-dark .pbtoc-link { color: #9ca3af; }
.pbtoc-theme-dark .pbtoc-link:hover, .pbtoc-theme-dark .pbtoc-link.pbtoc-active { color: #f97316; }
.pbtoc-theme-dark .pbtoc-footer { background: #111827; border-color: #374151; }
.pbtoc-theme-dark .pbtoc-footer a { color: #6b7280; }

/* ===== THEME: MINIMAL ===== */
.pbtoc-theme-minimal { border-color: #e5e7eb; background: #fff; box-shadow: none; }
.pbtoc-theme-minimal .pbtoc-header { background: #f9fafb; border-bottom: 1px solid #e5e7eb; }
.pbtoc-theme-minimal .pbtoc-title { color: #111827; }
.pbtoc-theme-minimal .pbtoc-icon { color: #6b7280; }
.pbtoc-theme-minimal .pbtoc-toggle { color: #6b7280; }
.pbtoc-theme-minimal .pbtoc-link { color: #374151; }
.pbtoc-theme-minimal .pbtoc-link:hover, .pbtoc-theme-minimal .pbtoc-link.pbtoc-active { color: #111827; text-decoration: underline; }
.pbtoc-theme-minimal .pbtoc-footer a { color: #9ca3af; }

/* ===== THEME: GRADIENT ===== */
.pbtoc-theme-gradient { border: none; background: linear-gradient(135deg, #fff 60%, #fdf4ff); box-shadow: 0 4px 24px rgba(123,47,247,0.12); }
.pbtoc-theme-gradient .pbtoc-header { background: linear-gradient(135deg, #7b2ff7, #f97316); }
.pbtoc-theme-gradient .pbtoc-title, .pbtoc-theme-gradient .pbtoc-icon, .pbtoc-theme-gradient .pbtoc-toggle { color: #fff; }
.pbtoc-theme-gradient .pbtoc-link { color: #7b2ff7; }
.pbtoc-theme-gradient .pbtoc-link:hover, .pbtoc-theme-gradient .pbtoc-link.pbtoc-active { color: #f97316; }
.pbtoc-theme-gradient .pbtoc-footer a { color: #7b2ff7; }

/* ===== THEME: CUSTOM (uses CSS variables set by JS) ===== */
.pbtoc-theme-custom { border-color: var(--pbtoc-border, #f97316); background: var(--pbtoc-bg, #fff8f0); }
.pbtoc-theme-custom .pbtoc-header { background: var(--pbtoc-border, #f97316); }
.pbtoc-theme-custom .pbtoc-title, .pbtoc-theme-custom .pbtoc-icon, .pbtoc-theme-custom .pbtoc-toggle { color: #fff; }
.pbtoc-theme-custom .pbtoc-link { color: var(--pbtoc-link, #c2410c); }
.pbtoc-theme-custom .pbtoc-link:hover, .pbtoc-theme-custom .pbtoc-link.pbtoc-active { color: var(--pbtoc-hover, #f97316); }

/* ===== STICKY ===== */
.pbtoc-sticky {
    position: sticky;
    top: 80px;
    max-height: 80vh;
    overflow-y: auto;
}
.pbtoc-sticky::-webkit-scrollbar { width: 4px; }
.pbtoc-sticky::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 4px; }

/* ===== PROGRESS BAR ===== */
.pbtoc-progress-bar {
    position: fixed; top: 0; left: 0; right: 0;
    height: 3px; z-index: 99999; background: rgba(0,0,0,0.05);
}
.pbtoc-progress-fill {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, #f97316, #fb923c);
    transition: width 0.1s linear;
}

/* ===== BACK TO TOP ===== */
.pbtoc-back-top {
    position: fixed; bottom: 28px; right: 28px;
    width: 44px; height: 44px;
    background: linear-gradient(135deg, #f97316, #ea580c);
    color: #fff; border: none; border-radius: 50%;
    font-size: 18px; cursor: pointer;
    box-shadow: 0 4px 16px rgba(249,115,22,0.4);
    display: none; z-index: 9999;
    transition: all 0.3s;
    align-items: center; justify-content: center;
}
.pbtoc-back-top:hover { transform: translateY(-3px) scale(1.05); }
.pbtoc-back-top.visible { display: flex; }

/* ===== RESPONSIVE ===== */
@media (max-width: 640px) {
    .pbtoc-wrap { margin: 16px 0; }
    .pbtoc-header { padding: 10px 14px; }
    .pbtoc-list-wrap { padding: 4px 14px 12px; }
    .pbtoc-title { font-size: 14px; }
    .pbtoc-back-top { bottom: 16px; right: 16px; width: 40px; height: 40px; }
}

/* ===== PRINT ===== */
@media print {
    .pbtoc-back-top, .pbtoc-progress-bar { display: none !important; }
}