/* --- BASE STYLES --- */
#stoc-wrapper { position: relative; }
.stoc-container { width: 100%; margin-bottom: 2rem; /* Remove transition for now to prevent jitters with position switching */ }
/* --- NEW STICKY STATE CLASSES --- */
.stoc-is-fixed { position: fixed !important; z-index: 999 !important; margin-bottom: 0 !important; }
.stoc-is-absolute-bottom { position: absolute !important; bottom: 0 !important; top: auto !important; margin-bottom: 0 !important; }

/* --- STYLE OPTION 1 (Amber) --- */
.stoc-style-opt-1 { background-color: rgba(255, 255, 255, 0.9); backdrop-filter: blur(4px); border: 1px solid #fde68a; border-radius: 0.75rem; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); }
.stoc-style-opt-1 .stoc-toggle { cursor: pointer; display: flex; align-items: center; justify-content: space-between; padding: 1rem; }
.stoc-style-opt-1 .stoc-title { font-weight: 600; color: #1f2735; margin: 0; font-size: 1em; }
.stoc-style-opt-1 .stoc-chevron { width: 1.25rem; height: 1.25rem; transition: transform 0.2s; }
.stoc-style-opt-1 .stoc-list-container { display: none; padding: 0 1rem 1rem 1rem; border-top: 1px solid #fef3c7; max-height: 500px; overflow-y: auto; }
.stoc-style-opt-1.stoc-state-open .stoc-list-container { display: block; }
.stoc-style-opt-1.stoc-state-open .stoc-chevron { transform: rotate(180deg); }
.stoc-style-opt-1 .stoc-list li a { display: flex; align-items: flex-start; padding: 0.5rem 0.25rem; color: #374151; text-decoration: none; border-radius: 4px; transition: color 0.2s, background-color 0.2s; }
.stoc-style-opt-1 .stoc-list li a:hover { color: #d97706; background-color: #fffbeb; }

/* --- STYLE OPTION 2 (Blue) --- */
.stoc-style-opt-2 { background-color: #FFFFFF; border: 1px solid #E2E8F0; border-radius: 0.75rem; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); }
.stoc-style-opt-2 .stoc-toggle { display: flex; align-items: center; padding: 1rem 1.25rem; border-bottom: 1px solid #F1F5F9; }
.stoc-style-opt-2 .stoc-header-icon { color: #64748B; margin-right: 0.75rem; }
.stoc-style-opt-2 .stoc-title { font-weight: 600; color: #1E293B; margin: 0; font-size: 1.1em; flex-grow: 1; }
.stoc-style-opt-2 .stoc-chevron { display: none; }
.stoc-style-opt-2 .stoc-list-container { display: block; padding: 0.5rem; max-height: 500px; overflow-y: auto; }
.stoc-style-opt-2 .stoc-list li a { position: relative; display: flex; align-items: flex-start; padding: 0.75rem 1rem; color: #475569; text-decoration: none; border-radius: 0.5rem; transition: all 0.2s; font-weight: 500; }
.stoc-style-opt-2 .stoc-list li a:hover { background-color: #F1F5F9; }
.stoc-style-opt-2 .stoc-list li a::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 4px; height: 0; background-color: #3B82F6; border-radius: 0 4px 4px 0; transition: height 0.2s ease-out; }
.stoc-style-opt-2 .stoc-list li a.stoc-active-link { background-color: #EFF6FF; color: #2563EB; font-weight: 600; }
.stoc-style-opt-2 .stoc-list li a.stoc-active-link::before { height: 60%; }

/* --- LIST NUMBER TOGGLE --- */
.stoc-numbers-true .stoc-list { counter-reset: toc-counter; }
.stoc-numbers-true .stoc-list li { counter-increment: toc-counter; }
.stoc-numbers-true.stoc-style-opt-1 .stoc-list li a::before { content: counter(toc-counter) "."; font-weight: 600; color: #d97706; min-width: 2em; padding-right: 0.5em; text-align: right; }
.stoc-numbers-true.stoc-style-opt-2 .stoc-list li a::before { content: counter(toc-counter) "."; font-weight: 600; min-width: 2em; padding-right: 0.5em; text-align: right; color: #94A3B8; }
.stoc-numbers-true.stoc-style-opt-2 .stoc-list li a.stoc-active-link::before { color: #2563EB !important; }
/* --- THIS IS THE FIX --- */
/* Rule to hide default browser OL numbering when show_list_number="false" */
.stoc-numbers-false .stoc-list {
    list-style-type: none;
    padding-left: 0;
    margin-left: 12px;
}

/* --- MOBILE RESPONSIVE STYLES --- */
@media (max-width: 768px) {
    #stoc-wrapper { height: auto !important; }
    .stoc-is-fixed, .stoc-is-absolute-bottom { position: static !important; transform: none !important; opacity: 1 !important; box-shadow: none !important; }
    .stoc-style-opt-1 .stoc-list-container, .stoc-style-opt-2 .stoc-list-container { display: none; }
    .stoc-style-opt-1 .stoc-chevron, .stoc-style-opt-2 .stoc-chevron { transform: rotate(0deg) !important; }
    .stoc-style-opt-1.stoc-state-open .stoc-chevron, .stoc-style-opt-2 .stoc-toggle.is-open .stoc-chevron { transform: rotate(180deg) !important; }
    .stoc-style-opt-2 .stoc-toggle { cursor: pointer; }
    .stoc-style-opt-2 .stoc-chevron { display: block; }
}