/* --- BASE STYLES --- */
#stoc-wrapper { position: relative; }
.stoc-container { width: 100%; margin-bottom: 2rem; }
.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; }

/* --- 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; font-weight: 500; }
.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-false .stoc-list { list-style-type: none; padding-left: 0; margin-left: 12px; }

/* --- MOBILE RESPONSIVE STYLES --- */
@media (max-width: 768px) {
    /* Add space at the bottom of the page */
    body.stoc-mobile-active { padding-bottom: 80px !important; }

    /* Override all desktop positioning and transform into a bottom bar */
    .stoc-container { position: fixed !important; bottom: 0; left: 0; right: 0; z-index: 10000; margin-bottom: 0 !important; border-radius: 0.75rem 0.75rem 0 0 !important; box-shadow: 0 -5px 15px rgba(0,0,0,0.1) !important; display: flex !important; flex-direction: column-reverse; /* THIS MAKES IT OPEN UPWARDS */ }
    
    /* Make both styles collapsible and initially closed on mobile */
    .stoc-toggle { cursor: pointer; }
    .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 { display: block !important; transform: rotate(0deg) !important; }
    .stoc-toggle.is-open .stoc-chevron { transform: rotate(180deg) !important; }
    
    /* Set a max-height for the list when it opens upwards */
    .stoc-list-container { max-height: 50vh; }
    .stoc-style-opt-1 .stoc-toggle, .stoc-style-opt-2 .stoc-toggle { border-bottom: none; border-top: 1px solid #F1F5F9; }
}