/* SeekDigit Episodic Novels Premium UI CSS */

:root {
    /* Color Palette */
    --sd-primary-color: #3b82f6;
    /* Vibrant Blue */
    --sd-primary-hover: #2563eb;
    --sd-accent-color: #f59e0b;
    /* Amber */
    --sd-bg-color: #f8fafc;
    /* Slate 50 */
    --sd-card-bg: #ffffff;
    --sd-text-main: #1e293b;
    /* Slate 800 */
    --sd-text-muted: #64748b;
    /* Slate 500 */
    --sd-border-color: #e2e8f0;
    /* Slate 200 */

    /* Dark Mode Palette */
    --sd-dark-bg: #0f172a;
    /* Slate 900 */
    --sd-dark-card-bg: #1e293b;
    /* Slate 800 */
    --sd-dark-text-main: #f1f5f9;
    /* Slate 100 */
    --sd-dark-text-muted: #94a3b8;
    /* Slate 400 */
    --sd-dark-border: #334155;
    /* Slate 700 */

    /* Typography */
    --sd-font-family: 'Noto Nastaliq Urdu', serif;
    --sd-ui-font: 'Inter', system-ui, -apple-system, sans-serif;

    /* Effects */
    --sd-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --sd-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --sd-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --sd-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --sd-radius: 12px;
}

html {
    scroll-behavior: smooth;
}

/* =========================================================================
   THEME-AGNOSTIC FALLBACK LAYOUT
   These rules give .sd-container-wrapper real width/spacing/sidebar-grid
   behaviour on its own, for any theme that isn't Blocksy. Every selector
   here is guarded with :not(.ct-container) so that on an install where
   Blocksy IS active (which also adds the .ct-container / .ct-container-narrow
   class to the same element — see templates/single-*.php), Blocksy's own
   theme CSS keeps full, unmodified control of width/grid exactly as before.
   ========================================================================= */
.sd-container-wrapper:not(.ct-container):not(.ct-container-narrow) {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}

.sd-container-wrapper:not(.ct-container):not(.ct-container-narrow)[data-sidebar] {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 40px;
    align-items: start;
}

.sd-container-wrapper:not(.ct-container):not(.ct-container-narrow)[data-sidebar="left"] {
    grid-template-columns: 300px 1fr;
}

.sd-container-wrapper:not(.ct-container):not(.ct-container-narrow)[data-sidebar="left"] > .sd-sidebar {
    order: -1;
}

@media (max-width: 900px) {
    .sd-container-wrapper:not(.ct-container):not(.ct-container-narrow)[data-sidebar] {
        grid-template-columns: 1fr;
    }
    .sd-container-wrapper:not(.ct-container):not(.ct-container-narrow)[data-sidebar="left"] > .sd-sidebar {
        order: 0;
    }
}

/* Generic WP widget styling for the plugin's own registered sidebar
   (sd_episodic_novel_sidebar). Independent of .ct-sidebar .ct-widget below,
   which only ever matches widgets rendered through Blocksy's own 'sidebar-1'. */
.sd-sidebar-inner .widget {
    margin-bottom: 24px;
    padding: 20px;
    background: var(--sd-card-bg);
    border: 1px solid var(--sd-border-color);
    border-radius: var(--sd-radius);
    font-family: var(--sd-ui-font);
}

.sd-sidebar-inner .widget-title {
    margin: 0 0 12px;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--sd-text-main);
}

/* Deliberately no body.sd-dark-mode rule for .sd-sidebar-inner: dark mode is
   scoped to the novel/episode reading content only, not the sidebar. */

/* Typography floor: stops an arbitrary active theme's low-specificity global
   selectors (body, p, a, h1-h6, ul...) from bleeding into plugin markup.
   Scoped to the container level only (not p/a/h1-h3 descendants) — the
   plugin already has purpose-built, dark-mode-aware rules for its own
   sub-elements (.sd-author-bio-text, .sd-author-name, etc.) further down
   this file, and those rely on inheriting color from their own ancestor,
   not from a container-wide element selector. A rule that matches a
   paragraph/heading directly always wins over inherited color regardless
   of specificity, so reaching that far down here would silently override
   this plugin's own dark-mode text colors (this happened once already —
   don't reintroduce it). */
.sd-novel-container, .sd-episode-container {
    font-family: var(--sd-ui-font);
    color: var(--sd-text-main);
    box-sizing: border-box;
}

/* Removed global body dark mode styles to keep left/right margins light */

/* Containers */
.sd-novel-container,
.sd-episode-container {
    width: 100%;
    max-width: 100%;
    margin: 40px auto;
    padding: 0;
    direction: rtl;
    text-align: right;
    font-family: var(--sd-font-family);
    line-height: 1.6;
    /* border-radius: var(--sd-radius);
    border: 1px solid var(--sd-border-color); */

}

/* =========================================
   SINGLE NOVEL PAGE
========================================= */

.sd-novel-hero,
.sd-episode-hero {
    display: flex;
    flex-direction: row;
    gap: 25px;
    margin-bottom: 30px;
    background: var(--sd-card-bg);
    padding: 20px;
    border-radius: var(--sd-radius);
    box-shadow: var(--sd-shadow-md);
    border: 1px solid var(--sd-border-color);
}

body.sd-dark-mode .sd-novel-hero,
body.sd-dark-mode .sd-episode-hero {
    background: var(--sd-dark-card-bg);
    border-color: var(--sd-dark-border);
}

.sd-novel-cover-wrapper {
    flex-shrink: 0;
    width: 220px;
}

.sd-novel-cover-img {
    width: 100%;
    height: auto;
    border-radius: calc(var(--sd-radius) - 4px);
    box-shadow: var(--sd-shadow-lg);
    object-fit: cover;
    aspect-ratio: 2/3;
    transition: var(--sd-transition);
}

.sd-novel-cover-img:hover {
    transform: translateY(-5px);
}

.sd-novel-info {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.sd-novel-title {
    font-size: 2rem;
    font-weight: 700;
    margin: 0 0 10px 0;
    color: var(--sd-text-main);
    line-height: 1.3;
}

body.sd-dark-mode .sd-novel-title {
    color: var(--sd-dark-text-main);
}

.sd-novel-meta-author {
    display: flex;
    gap: 15px;
    font-family: var(--sd-ui-font);
    font-size: 16px;
    color: var(--sd-text-muted);
    margin-bottom: 15px;
    align-items: center;

}

body.sd-dark-mode .sd-novel-meta-author {
    color: var(--sd-dark-text-muted);
}

.sd-novel-meta-author i {
    font-size: 1rem;
    color: var(--sd-primary-color);
    align-items: center;
}

.sd-novel-taxonomies {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}

.sd-badge {
    padding: 5px 12px;
    border-radius: 30px;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    font-family: var(--sd-ui-font);
    display: inline-flex;
    align-items: center;
}

.sd-badge-genre {
    background: rgba(59, 130, 246, 0.14);
    color: var(--sd-primary-color);
    border: 1px solid rgba(59, 130, 246, 0.3);
}

.sd-badge-status {
    background: rgba(245, 158, 11, 0.14);
    color: var(--sd-accent-color);
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.sd-badge-language {
    background: rgba(16, 185, 129, 0.14);
    color: #059669;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.sd-badge-series {
    background: rgba(139, 92, 246, 0.14);
    color: #7c3aed;
    border: 1px solid rgba(139, 92, 246, 0.3);
}

.sd-badge-collection {
    background: rgba(236, 72, 153, 0.14);
    color: #db2777;
    border: 1px solid rgba(236, 72, 153, 0.3);
}

.sd-badge-tag {
    background: rgba(107, 114, 128, 0.14);
    color: #4b5563;
    border: 1px solid rgba(107, 114, 128, 0.3);
}

body.sd-dark-mode .sd-badge,
body.sd-dark-mode .sd-badge a {
    color: #ffffff !important;
}


.sd-novel-actions {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 15px;
}

.sd-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 18px;
    border-radius: 8px;
    font-family: var(--sd-ui-font);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--sd-transition);
    border: none;
    outline: none;
}

.sd-btn-primary {
    background: var(--sd-primary-color);
    color: #fff;
    box-shadow: var(--sd-shadow-sm);
}

.sd-btn-primary:hover {
    background: var(--sd-primary-hover);
    transform: translateY(-2px);
    box-shadow: var(--sd-shadow-md);
}

.sd-btn-read-now {
    background: #051b0e;
    color: #fff;
}

.sd-btn-read-now:hover {
    background: #031209;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: var(--sd-shadow-md);
}

.sd-btn-outline {
    background: transparent;
    color: var(--sd-primary-color);
    border: 2px solid var(--sd-primary-color);
}

.sd-btn-outline:hover {
    background: rgba(59, 130, 246, 0.05);
    transform: translateY(-2px);
    box-shadow: var(--sd-shadow-sm);
}

body.sd-dark-mode .sd-btn-outline {
    border-color: var(--sd-primary-color);
    color: var(--sd-primary-color);
}

/* PDF download timer: while counting down, the button is dimmed and
   inert-looking (real click-blocking happens in JS, this is just the
   visual). Once seekdigit-public.js removes aria-disabled, it falls back to
   the normal .sd-btn-outline hover/appearance automatically. */
.sd-pdf-timed-download[aria-disabled="true"] {
    opacity: 0.55;
    cursor: not-allowed;
    pointer-events: none;
}

/* Sections */
.sd-section-title {
    /* Same serif family already used for the author name/roman title
       elsewhere on these pages (already enqueued — no new font request),
       so section labels read as part of one consistent editorial voice
       instead of the generic UI sans-serif. */
    font-family: 'Playfair Display', 'Merriweather', 'Georgia', serif;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--sd-text-main);
    margin: 0 0 20px 0;
    padding-bottom: 12px;
    position: relative;
    border-bottom: 1px solid var(--sd-border-color);
}

/* Short accent bar over the full-width divider, anchored to the RTL reading
   start (right) so it doesn't need a dir-specific override. */
.sd-section-title::after {
    content: "";
    position: absolute;
    bottom: -1px;
    right: 0;
    width: 48px;
    height: 3px;
    background: var(--sd-primary-color);
    border-radius: 2px;
}

body.sd-dark-mode .sd-section-title {
    color: var(--sd-dark-text-main);
    border-color: var(--sd-dark-border);
}

.sd-novel-body,
.sd-episode-body {
    background: var(--sd-card-bg);
    padding: 15px;
    border-radius: var(--sd-radius);
    box-shadow: var(--sd-shadow-md);
    border: 1px solid var(--sd-border-color);
}

body.sd-dark-mode .sd-novel-body,
body.sd-dark-mode .sd-episode-body {
    background: var(--sd-dark-card-bg);
    border-color: var(--sd-dark-border);
}

.sd-novel-synopsis {
    margin-bottom: 30px;
}

/* Content Typography */
.sd-content-typography {
    font-size: 1.1rem;
    line-height: 2;
    color: var(--sd-text-main);
    /* Reading measure: caps line length for comfortable long-form reading
       regardless of how wide the surrounding card/container is. Centered so
       it doesn't visually hug either edge once it's narrower than its
       container. Only affects the two actual prose wrappers this class is
       used on (episode content, novel synopsis) — nothing else references
       .sd-content-typography. */
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    /* padding: 5px; */
}

body.sd-dark-mode .sd-content-typography {
    /* Scoped to the wrapper, not "*", and no !important: this is the DEFAULT
       dark-mode text color, meant to reach children by inheritance only. A
       per-block custom text color set via Gutenberg's Color support (an
       inline style on that block) directly matches the element and always
       wins over an inherited value — see inject_customization_css() for the
       same fix applied to font-family/size/line-height. */
    color: #ffffff;
}

/* Heading hierarchy for any heading an author adds inside the actual prose
   (via Gutenberg) — previously unstyled, so it fell back entirely to
   whatever the active theme's own heading defaults looked like. Font-family/
   size/weight/margin only, no color: color keeps inheriting from
   .sd-content-typography above (see the dark-mode note there — a rule
   naming these elements directly must never set color, light or dark mode,
   or it silently wins over inheritance and breaks dark mode again). */
.sd-content-typography h2,
.sd-content-typography h3,
.sd-content-typography h4 {
    font-family: var(--sd-ui-font);
    line-height: 1.4;
    margin: 1.6em 0 0.6em;
}

.sd-content-typography h2 {
    font-size: 1.6rem;
    font-weight: 700;
}

.sd-content-typography h3 {
    font-size: 1.3rem;
    font-weight: 700;
}

.sd-content-typography h4 {
    font-size: 1.1rem;
    font-weight: 600;
}

/* Reading progress bar + live percentage (episode and novel pages). Sticky,
   not fixed: sticking it to the viewport unconditionally risks overlapping
   an unknown active theme's own sticky header (this plugin now supports
   several — see Phase 3). Positioned in normal flow at the very top of
   .sd-episode-container / .sd-novel-container, it naturally sits just below
   wherever the theme's header ends instead. Bar + percent share one sticky
   wrapper so they stick together as a single unit. */
.sd-reading-progress-wrap {
    position: sticky;
    top: 0;
    z-index: 20;
    margin-bottom: 10px;
}

.sd-reading-progress {
    position: relative;
    height: 3px;
    background: transparent;
    overflow: visible;
}

.sd-reading-progress-fill {
    position: relative;
    height: 100%;
    width: 0%;
    background: var(--sd-primary-color);
    /* Same easing curve as --sd-transition (the site's standard) so the fill
       glides rather than snaps on every scroll-triggered update — a fast
       linear transition looked mechanical/jumpy under frequent updates. */
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Badge lives INSIDE the fill and is pinned to the fill's own leading edge
   (left:0 of the fill — since the fill is flush against the container's
   RTL start/right edge and grows leftward as it fills, its left edge is
   always the current "you are here" point). Because it's the fill's own
   child, it moves automatically as the fill's width changes — no separate
   JS positioning needed. This also keeps its footprint tied to the thin bar
   itself instead of a separate static pill sitting below it, which used to
   visually sit on top of whatever paragraph happened to be scrolling
   underneath a fixed spot — confusing to read past. */
.sd-reading-progress-percent {
    position: absolute;
    top: 100%;
    left: 0;
    transform: translateX(-50%);
    margin-top: 6px;
    padding: 3px 10px;
    border-radius: 12px;
    background: var(--sd-primary-color);
    color: #ffffff;
    font-weight: 700;
    font-size: 0.85rem;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
    border: 2px solid var(--sd-percentage-border, #ffffff);
    font-family: var(--sd-ui-font);
    white-space: nowrap;
    /* Hidden at 0% (before the reader has actually started scrolling into
       the content) and faded in automatically once there's real progress to
       show — see the .is-visible toggle in seekdigit-public.js. Opacity, not
       display:none, so the fade transition has something to animate. */
    opacity: 0;
    transition: opacity 0.25s ease, left 0.1s linear;
}

.sd-reading-progress-percent.is-visible {
    opacity: 1;
}

body.sd-dark-mode .sd-reading-progress-percent {
    background: var(--sd-primary-color);
    color: #ffffff;
    border-color: var(--sd-percentage-border, #ffffff);
}

/* Episode Grid */
.sd-episode-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 10px;
}

/* Tablet: a touch more breathing room than the phone tier below, still
   comfortably 3+ per row rather than jumping straight from auto-fill to a
   forced 2-column phone layout. */
@media (max-width: 900px) {
    .sd-episode-grid {
        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
        gap: 8px;
    }
}

@media (max-width: 768px) {
    .sd-episode-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .sd-episode-card {
        padding: 10px;
        flex-direction: column;
        text-align: center;
        align-items: center;
    }

    .sd-episode-card-number {
        margin-left: 0;
        margin-bottom: 6px;
        width: 24px;
        height: 24px;
        font-size: 0.75rem;
    }

    .sd-episode-card-content {
        margin-right: 0;
    }

    .sd-episode-card-title {
        font-size: 0.8rem;
    }
}

/* Small phones: slightly more compact paddings. */
@media (max-width: 380px) {
    .sd-episode-grid {
        gap: 6px;
    }

    .sd-episode-card {
        padding: 10px;
    }

    .sd-episode-card-number {
        width: 26px;
        height: 26px;
        font-size: 0.8rem;
        margin-left: 10px;
    }

    .sd-episode-card-title {
        font-size: 0.85rem;
    }
}

.sd-episode-card {
    display: flex;
    align-items: center;
    background: var(--sd-ep-card-bg, var(--sd-card-bg));
    border: 1px solid var(--sd-ep-card-border, var(--sd-border-color));
    border-radius: var(--sd-radius);
    padding: 8px;
    text-decoration: none;
    transition: var(--sd-transition);
    box-shadow: var(--sd-shadow-sm);
}



.sd-episode-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--sd-shadow-md);
    border-color: var(--sd-primary-color);
}

/* Marks the episode the reader is currently on within the grid — the class
   is already applied conditionally in single-episode.php, it just never had
   any styling attached to it. */
.sd-episode-card-active {
    border-width: 2px;
    border-color: var(--sd-primary-color);
    background: rgba(59, 130, 246, 0.06);
}

.sd-episode-card-active .sd-episode-card-number {
    background: var(--sd-primary-color);
    color: #ffffff;
}

/* Dark Mode styles for Episode Cards */
body.sd-dark-mode .sd-episode-card,
[data-theme="dark"] .sd-episode-card,
[data-skin="dark"] .sd-episode-card {
    background: var(--sd-dark-card-bg, #1e293b);
    border-color: var(--sd-dark-border, #334155);
}

body.sd-dark-mode .sd-episode-card .sd-episode-card-title,
[data-theme="dark"] .sd-episode-card .sd-episode-card-title,
[data-skin="dark"] .sd-episode-card .sd-episode-card-title {
    color: var(--sd-dark-text-main, #f1f5f9);
}

body.sd-dark-mode .sd-episode-card .sd-episode-card-read,
[data-theme="dark"] .sd-episode-card .sd-episode-card-read,
[data-skin="dark"] .sd-episode-card .sd-episode-card-read {
    color: #60a5fa;
}

body.sd-dark-mode .sd-episode-card .sd-episode-card-number,
[data-theme="dark"] .sd-episode-card .sd-episode-card-number,
[data-skin="dark"] .sd-episode-card .sd-episode-card-number {
    background: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
}

/* Active Episode Card in Dark Mode */
body.sd-dark-mode .sd-episode-card-active,
[data-theme="dark"] .sd-episode-card-active,
[data-skin="dark"] .sd-episode-card-active {
    background: rgba(59, 130, 246, 0.25);
    border-color: #60a5fa;
}

body.sd-dark-mode .sd-episode-card-active .sd-episode-card-title,
[data-theme="dark"] .sd-episode-card-active .sd-episode-card-title,
[data-skin="dark"] .sd-episode-card-active .sd-episode-card-title {
    color: #ffffff !important;
}

body.sd-dark-mode .sd-episode-card-active .sd-episode-card-read,
[data-theme="dark"] .sd-episode-card-active .sd-episode-card-read,
[data-skin="dark"] .sd-episode-card-active .sd-episode-card-read {
    color: #93c5fd !important;
}

body.sd-dark-mode .sd-episode-card-active .sd-episode-card-number,
[data-theme="dark"] .sd-episode-card-active .sd-episode-card-number,
[data-skin="dark"] .sd-episode-card-active .sd-episode-card-number {
    background: #3b82f6 !important;
    color: #ffffff !important;
}

.sd-episode-card-number {
    width: 28px;
    height: 28px;
    background: rgba(59, 130, 246, 0.1);
    color: var(--sd-primary-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: bold;
    font-family: var(--sd-ui-font);
    flex-shrink: 0;
    margin-left: 10px;
    transition: var(--sd-transition);
}

.sd-episode-card-content {
    flex-grow: 1;
    margin-right: 10px;
    text-align: center;
    min-width: 0;
}

.sd-episode-card-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--sd-ep-card-text-color, var(--sd-text-main));
    margin: 0 0 2px 0;
    /* Long episode titles stay contained instead of stretching/breaking the
       compact card layout — clips to 2 lines with an ellipsis. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}



.sd-episode-card-read {
    font-size: 0.7rem;
    font-family: var(--sd-ui-font);
    color: var(--sd-primary-color);
    font-weight: 500;
}

/* .sd-episode-card-read::before {
    /* content: "\2190\00a0"; */
    /* Left arrow and non-breaking space */
} */

/* =========================================
   SINGLE EPISODE PAGE
========================================= */

.sd-episode-single {
    /* Styles removed to match the novel page structure where the inner boxes handle backgrounds and borders */
}

body.sd-dark-mode .sd-episode-single {
    /* Styles removed */
}

.sd-episode-top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 15px;
}

.sd-back-to-novel {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: var(--sd-text-muted);
    font-family: var(--sd-ui-font);
    font-weight: 500;
    transition: var(--sd-transition);
}

.sd-back-to-novel:hover {
    color: var(--sd-primary-color);
}

body.sd-dark-mode .sd-back-to-novel {
    color: var(--sd-dark-text-muted);
}

body.sd-dark-mode .sd-back-to-novel:hover {
    color: var(--sd-primary-color);
}

.sd-top-page-indicator {
    font-family: var(--sd-ui-font);
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--sd-text-muted);
    background: rgba(0, 0, 0, 0.03);
    padding: 6px 16px;
    border-radius: 20px;
    direction: ltr;
    /* Keeps English text left-to-right */
}

body.sd-dark-mode .sd-top-page-indicator {
    color: var(--sd-dark-text-muted);
    background: rgba(255, 255, 255, 0.05);
}

.sd-reading-toolbar {
    display: flex;
    gap: 10px;
    background: rgba(0, 0, 0, 0.03);
    padding: 8px;
    border-radius: 30px;
    align-items: center;
}


body.sd-dark-mode .sd-reading-toolbar {
    background: rgba(255, 255, 255, 0.05);
}

.sd-tool-btn {
    background: var(--sd-card-bg);
    border: 1px solid var(--sd-border-color);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-family: var(--sd-ui-font);
    font-weight: 600;
    color: var(--sd-text-main);
    transition: var(--sd-transition);
    box-shadow: var(--sd-shadow-sm);
}

body.sd-dark-mode .sd-tool-btn {
    background: var(--sd-dark-card-bg);
    border-color: var(--sd-dark-border);
    color: var(--sd-dark-text-main);
}

.sd-tool-btn:hover {
    background: var(--sd-primary-color);
    color: #fff;
    border-color: var(--sd-primary-color);
}

body.sd-dark-mode .sd-icon-moon {
    display: none !important;
}

body.sd-dark-mode .sd-icon-sun {
    display: block !important;
}

.sd-episode-header {
    text-align: center;
    margin-bottom: 25px;
}

.sd-episode-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--sd-text-main);
    margin: 0;
}

body.sd-dark-mode .sd-episode-title {
    color: var(--sd-dark-text-main);
}

.sd-episode-meta-divider {
    width: 60px;
    height: 4px;
    background: var(--sd-primary-color);
    margin: 20px auto 0 auto;
    border-radius: 2px;
}

.sd-episode-pagination-wrapper {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid var(--sd-border-color);
    text-align: center;
}

body.sd-dark-mode .sd-episode-pagination-wrapper {
    border-color: var(--sd-dark-border);
}

.sd-pagination-label {
    font-family: var(--sd-ui-font);
    font-size: 1rem;
    font-weight: 600;
    color: var(--sd-text-muted);
    margin-bottom: 15px;
}

body.sd-dark-mode .sd-pagination-label {
    color: var(--sd-dark-text-muted);
}

.sd-episode-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    font-family: var(--sd-ui-font);
    font-size: 1rem;
    direction: ltr;
}

.sd-page-link {
    text-decoration: none;
    color: var(--sd-text-main);
    padding: 6px 10px;
    border-radius: 6px;
    transition: var(--sd-transition);
    font-weight: 500;
}

body.sd-dark-mode .sd-page-link {
    color: var(--sd-dark-text-main);
}

.sd-page-link:hover {
    color: var(--sd-primary-color);
    background: rgba(59, 130, 246, 0.1);
}

.sd-page-link.sd-active-ep {
    color: #fff;
    background: var(--sd-primary-color);
    font-weight: 700;
}

body.sd-dark-mode .sd-page-link.sd-active-ep {
    color: #fff;
}

.sd-page-sep {
    color: var(--sd-border-color);
}

body.sd-dark-mode .sd-page-sep {
    color: var(--sd-dark-border);
}

.sd-page-dots {
    color: var(--sd-text-muted);
    font-weight: bold;
    padding: 0 5px;
    font-family: var(--sd-ui-font);
}

body.sd-dark-mode .sd-page-dots {
    color: var(--sd-dark-text-muted);
}

/* =========================================
   RESPONSIVE DESIGN
========================================= */
@media (max-width: 768px) {

    .sd-novel-hero,
    .sd-episode-hero {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 20px;
    }

    .sd-novel-cover-wrapper {
        width: 200px;
    }

    .sd-novel-meta-author {
        justify-content: center;
    }

    .sd-novel-taxonomies {
        justify-content: center;
    }

    .sd-episode-single {
        padding: 20px;
    }

    .sd-episode-pagination {
        gap: 5px;
        font-size: 0.9rem;
    }

    .sd-page-link {
        padding: 4px 8px;
    }

    .sd-novel-actions {
        flex-direction: column;
        width: 100%;
    }

    .sd-novel-actions .sd-btn {
        width: 100%;
        justify-content: center;
        /* Comfortable tap target — the default 8px vertical padding plus
           text is under the ~44px minimum touch-target guideline. */
        padding-top: 13px;
        padding-bottom: 13px;
    }
}

/* =========================================
   SHORTCODES
========================================= */
.sd-novel-archive-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 30px;
    margin-top: 20px;
}

.sd-novel-card {
    background: var(--sd-card-bg);
    border: 1px solid var(--sd-border-color);
    border-radius: var(--sd-radius);
    padding: 15px;
    text-align: center;
    box-shadow: var(--sd-shadow-sm);
    transition: var(--sd-transition);
}



.sd-novel-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--sd-shadow-md);
}

.sd-novel-card img {
    width: 100%;
    height: auto;
    border-radius: calc(var(--sd-radius) - 4px);
    margin-bottom: 15px;
    object-fit: cover;
    aspect-ratio: 2/3;
}

.sd-novel-card h3 {
    font-size: 1.2rem;
    margin: 0;
}

.sd-novel-card a {
    text-decoration: none;
    color: var(--sd-text-main);
}



.sd-novel-card a:hover {
    color: var(--sd-primary-color);
}

.sd-episode-list {
    list-style: none;
    padding: 0;
    margin: 20px 0;
}

.sd-episode-list li {
    padding: 10px 15px;
    border-bottom: 1px solid var(--sd-border-color);
}



.sd-episode-list a {
    text-decoration: none;
    color: var(--sd-text-main);
    display: flex;
    justify-content: space-between;
    align-items: center;
}



.sd-episode-list a:hover {
    color: var(--sd-primary-color);
}

/* =========================================
   CONTENT PAGINATION
========================================= */

.sd-content-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    margin: 40px 0;
    padding-top: 30px;
    border-top: 1px dashed var(--sd-border-color);
    direction: ltr;
}

body.sd-dark-mode .sd-content-pagination {
    border-top-color: var(--sd-dark-border);
}

.sd-cp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 14px;
    border-radius: 6px;
    font-family: var(--sd-ui-font);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background: var(--sd-primary-color);
    border: none;
    color: #ffffff;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    min-width: 0;
}

body.sd-dark-mode .sd-cp-btn {
    background: var(--sd-primary-color);
    color: #ffffff;
}

.sd-cp-btn:hover:not(.sd-cp-disabled) {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    color: #ffffff;
}

.sd-cp-disabled {
    opacity: 0.6;
    cursor: not-allowed;
    background: #e5e7eb;
    color: #9ca3af;
    box-shadow: none;
}

body.sd-dark-mode .sd-cp-disabled {
    background: #374151;
    color: #6b7280;
}

.sd-internal-page-header {
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--sd-text-muted);
    display: inline-block;
    vertical-align: middle;
}

body.sd-dark-mode .sd-internal-page-header {
    color: var(--sd-dark-text-muted);
}

/* =========================================
   RESPONSIVENESS
========================================= */
@media (max-width: 768px) {
    .sd-novel-hero {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 40px 20px 20px 20px;
    }

    .sd-novel-hero-toolbar {
        top: 10px;
        left: 10px;
    }

    .sd-novel-cover-wrapper {
        width: 200px;
        margin: 0 auto;
    }

    .sd-novel-info {
        align-items: center;
    }

    .sd-novel-meta-author,
    .sd-novel-taxonomies,
    .sd-novel-actions {
        justify-content: center;
    }
}

/* =========================================
   ARCHIVE PAGE SPECIFIC STYLES
   (Isolated from Dark Mode to retain original design)
========================================= */
.sd-archive-container {
    width: 100%;
    max-width: 100%;
    margin: 40px auto;
    padding: 0;
    direction: rtl;
    text-align: right;
    font-family: var(--sd-font-family);
    line-height: 1.6;
}

.sd-archive-body {
    background: var(--sd-card-bg);
    padding: 40px;
    border-radius: var(--sd-radius);
    box-shadow: var(--sd-shadow-md);
    border: 1px solid var(--sd-border-color);
}

.sd-archive-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 25px;
    margin-top: 30px;
}

.sd-archive-card {
    display: flex;
    flex-direction: column;
    background: var(--sd-card-bg);
    border: 1px solid var(--sd-border-color);
    border-radius: var(--sd-radius);
    overflow: hidden;
    transition: var(--sd-transition);
    box-shadow: var(--sd-shadow-sm);

}

.sd-archive-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--sd-shadow-lg);
    border-color: var(--sd-primary-color);
}

.sd-archive-card-image {
    width: 100%;
    height: 300px;
    display: block;
    overflow: hidden;
    position: relative;
    background: rgba(59, 130, 246, 0.05);
}

.sd-archive-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--sd-transition);
}

.sd-archive-card:hover .sd-archive-card-image img {
    transform: scale(1.05);
}

.sd-archive-card-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sd-archive-card-placeholder i {
    font-size: 4rem;
    color: var(--sd-primary-color);
    opacity: 0.5;
}

.sd-archive-card-content {
    padding: 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.sd-archive-card-title {
    font-size: 1.4rem;
    font-weight: 700;
    margin: 0 0 10px 0;
    line-height: 1.4;
}

.sd-archive-card-title a {
    color: var(--sd-text-main);
    text-decoration: none;
    transition: var(--sd-transition);
}

.sd-archive-card-title a:hover {
    color: var(--sd-primary-color);
}

.sd-archive-card-author {
    margin-top: auto;
    font-family: var(--sd-ui-font);
    font-size: 0.95rem;
    color: var(--sd-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.sd-archive-card-author a {
    color: var(--sd-text-muted);
    text-decoration: none;
    transition: var(--sd-transition);
    font-weight: 500;
}

.sd-archive-card-author a:hover {
    color: var(--sd-primary-color);
}

.sd-archive-card-author i {
    color: var(--sd-primary-color);
    font-size: 1.1rem;
}

.sd-archive-pagination {
    margin-top: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.sd-archive-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 16px;
    border-radius: 8px;
    font-family: var(--sd-ui-font);
    font-size: 1rem;
    font-weight: 500;
    text-decoration: none;
    transition: var(--sd-transition);
    background: var(--sd-card-bg);
    border: 1px solid var(--sd-border-color);
    color: var(--sd-text-main);
}

.sd-archive-pagination .page-numbers:hover {
    background: rgba(59, 130, 246, 0.05);
    border-color: var(--sd-primary-color);
    color: var(--sd-primary-color);
}

.sd-archive-pagination .page-numbers.current {
    background: var(--sd-primary-color);
    color: #fff;
    border-color: var(--sd-primary-color);
    cursor: default;
}

.sd-archive-empty {
    text-align: center;
    padding: 40px;
    color: var(--sd-text-muted);
    font-size: 1.2rem;
    font-family: var(--sd-ui-font);
}

/* =========================================
   AUTHOR BIOGRAPHY BOX
========================================= */
.sd-author-bio-box {
    display: flex;
    background: #f7f2e7;
    /* soft beige from screenshot */
    border: none;
    border-radius: 12px;
    padding: 35px 40px;
    margin: 40px 0;
    align-items: center;
    gap: 35px;
}

body.sd-dark-mode .sd-author-bio-box {
    background: var(--sd-dark-card-bg);
}

.sd-author-bio-content {
    flex: 1;
}

.sd-author-name {
    /* font-size: 1.8rem; */
    font-size: 16px;
    font-weight: 600;
    color: #0b3954;
    /* Deep navy blue from screenshot */
    margin: 0 0 15px 0;
    font-family: 'Playfair Display', 'Merriweather', 'Georgia', serif;
}

body.sd-dark-mode .sd-author-name {
    color: var(--sd-dark-text-main);
}

.sd-author-bio-text {
    font-size: 1.05rem;
    line-height: 1.7;
    color: #4a5568;
    /* dark grey/slate */
    margin-bottom: 20px;
    font-family: 'Inter', 'Roboto', 'Helvetica Neue', sans-serif;
}

body.sd-dark-mode .sd-author-bio-text {
    color: var(--sd-text-muted);
}

.sd-author-social-links {
    display: flex;
    gap: 15px;
    align-items: center;
}

.sd-author-icon-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #cca45c;
    /* Gold color from screenshot */
    text-decoration: none;
    transition: var(--sd-transition);
}

.sd-author-icon-link i {
    font-size: 1.4rem;
    width: 24px;
    height: 24px;
}

.sd-author-icon-link:hover {
    color: #a88241;
}

.sd-author-bio-image {
    flex-shrink: 0;
}

.sd-author-avatar {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    /* perfect circle */
    object-fit: cover;
    border: none;
    padding: 0;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    /* slight soft shadow */
}

.sd-author-avatar-placeholder {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background: #e2e8f0;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

.sd-author-avatar-placeholder i {
    font-size: 3rem;
    color: #94a3b8;
}

@media (max-width: 768px) {
    .sd-author-bio-box {
        flex-direction: column;
        align-items: center;
        text-align: center !important;
        padding: 30px 20px;
        gap: 20px;
    }

    .sd-author-social-links {
        justify-content: center;
    }
}

/* =========================================
   RELATED NOVELS BY AUTHOR
========================================= */
.sd-related-novels {
    margin-top: 40px;
    padding-top: 25px;
    border-top: 1px solid var(--sd-border-color);
}

body.sd-dark-mode .sd-related-novels {
    border-color: var(--sd-dark-border);
}

.sd-related-novels .sd-section-title {
    font-size: 1.3rem;
    margin-bottom: 15px;
    text-align: center !important;
}

.sd-related-novels .sd-section-title::after {
    /* Base rule anchors the accent bar to the right for RTL section titles;
       this one is centered text, so the bar needs to be centered too. */
    right: 50%;
    transform: translateX(50%);
}

.sd-related-novels-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
}

.sd-related-novel-card {
    display: block;
    text-decoration: none;
    background: var(--sd-card-bg);
    border: 1px solid var(--sd-border-color);
    border-radius: var(--sd-radius);
    overflow: hidden;
    transition: var(--sd-transition);
    box-shadow: var(--sd-shadow-sm);
}

body.sd-dark-mode .sd-related-novel-card {
    background: var(--sd-dark-card-bg);
    border-color: var(--sd-dark-border);
}

.sd-related-novel-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--sd-shadow-md);
    border-color: var(--sd-primary-color);
}

.sd-related-novel-card-image {
    width: 100%;
    height: 180px;
    overflow: hidden;
    background: rgba(59, 130, 246, 0.05);
}

.sd-related-novel-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--sd-transition);
}

.sd-related-novel-card:hover .sd-related-novel-card-image img {
    transform: scale(1.05);
}

.sd-related-novel-card-image .sd-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sd-related-novel-card-image .sd-placeholder i {
    font-size: 2rem;
    color: var(--sd-primary-color);
    opacity: 0.4;
}

.sd-related-novel-card-body {
    padding: 10px 12px;
    text-align: center;
}

.sd-related-novel-card-body h4 {
    font-size: 0.9rem;
    font-weight: 600;
    margin: 0;
    color: var(--sd-text-main);
    line-height: 1.3;
}

body.sd-dark-mode .sd-related-novel-card-body h4 {
    color: var(--sd-dark-text-main);
}

@media (max-width: 1024px) {
    .sd-related-novels-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .sd-related-novels-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .sd-related-novel-card-image {
        height: 150px;
    }

    .sd-novel-hero {
        padding: 15px;
    }

    .sd-novel-body,
    .sd-episode-single {
        padding: 15px;
    }

    .sd-novel-cover-wrapper {
        width: 160px;
    }
}

/* =========================================
   SIDEBAR WIDGETS STYLING
========================================= */

/* Each widget card */
.ct-sidebar .ct-widget {
    background: var(--sd-card-bg);
    border-radius: var(--sd-radius);
    border: 1px solid var(--sd-border-color);
    box-shadow: var(--sd-shadow-sm);
    padding: 20px;
    margin-bottom: 20px;
    transition: var(--sd-transition);
}

.ct-sidebar .ct-widget:hover {
    box-shadow: var(--sd-shadow-md);
}

/* Widget titles */
.ct-sidebar .ct-widget .widget-title,
.ct-sidebar .ct-widget h2,
.ct-sidebar .ct-widget h3 {
    font-family: var(--sd-ui-font);
    font-size: 1rem;
    font-weight: 700;
    color: var(--sd-text-main);
    margin: 0 0 15px 0;
    padding-bottom: 10px;
    border-bottom: 2px solid rgba(59, 130, 246, 0.15);
}

/* Search widget */
.ct-sidebar .ct-widget .wp-block-search__inside-wrapper,
.ct-sidebar .ct-widget .search-form {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ct-sidebar .ct-widget input[type="search"],
.ct-sidebar .ct-widget input[type="text"],
.ct-sidebar .ct-widget .wp-block-search__input {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--sd-border-color);
    border-radius: 10px;
    font-family: var(--sd-ui-font);
    font-size: 0.9rem;
    color: var(--sd-text-main);
    background: #fff;
    outline: none;
    transition: var(--sd-transition);
}

.ct-sidebar .ct-widget input[type="search"]:focus,
.ct-sidebar .ct-widget input[type="text"]:focus,
.ct-sidebar .ct-widget .wp-block-search__input:focus {
    border-color: var(--sd-primary-color);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Search button */
.ct-sidebar .ct-widget .wp-block-search__button,
.ct-sidebar .ct-widget .search-submit {
    background: var(--sd-primary-color);
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: 10px 16px;
    font-family: var(--sd-ui-font);
    font-size: 0.9rem;
    cursor: pointer;
    transition: var(--sd-transition);
    flex-shrink: 0;
}

.ct-sidebar .ct-widget .wp-block-search__button:hover,
.ct-sidebar .ct-widget .search-submit:hover {
    background: var(--sd-primary-hover);
    transform: translateY(-1px);
}

/* Dropdowns / Select elements */
.ct-sidebar .ct-widget select,
.ct-sidebar .ct-widget .wp-block-categories-dropdown select {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--sd-border-color);
    border-radius: 10px;
    font-family: var(--sd-ui-font);
    font-size: 0.9rem;
    color: var(--sd-text-main);
    background: #fff;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23718096' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 14px center;
    padding-left: 36px;
    cursor: pointer;
    transition: var(--sd-transition);
}

.ct-sidebar .ct-widget select:focus {
    border-color: var(--sd-primary-color);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Lists inside widgets (e.g., categories, recent posts) */
.ct-sidebar .ct-widget ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.ct-sidebar .ct-widget ul li {
    padding: 8px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    font-family: var(--sd-ui-font);
    font-size: 0.9rem;
}

.ct-sidebar .ct-widget ul li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.ct-sidebar .ct-widget ul li a {
    color: var(--sd-text-main);
    text-decoration: none;
    transition: var(--sd-transition);
    font-weight: 500;
}

.ct-sidebar .ct-widget ul li a:hover {
    color: var(--sd-primary-color);
    padding-right: 5px;
}

/* =========================================
   AUTHOR PROFILE PAGE
   Matches the editorial design screenshot
========================================= */

/* ── Page wrapper ── */
.sd-ap {
    direction: ltr;
    text-align: left;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    color: #1a1a1a;
}

/* ── HERO ── */
.sd-ap-hero {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 50px;
    align-items: center;
    padding: 60px 0 80px;
    border-bottom: none;
    min-height: 420px;
}

.sd-ap-hero-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.sd-ap-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #c9a84c;
    margin-bottom: 15px;
    font-weight: 600;
}

.sd-ap-name {
    font-family: 'Playfair Display', 'Georgia', serif;
    font-size: 3.2rem;
    font-weight: 700;
    color: #011627;
    margin: 0 0 15px 0;
    line-height: 1.2;
    letter-spacing: -0.5px;
}

.sd-ap-tagline {
    font-family: 'Playfair Display', 'Georgia', serif;
    font-size: 1.15rem;
    font-style: italic;
    color: #555;
    line-height: 1.7;
    margin: 0 0 40px 0;
    max-width: 460px;
}

.sd-ap-hero-btns {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

.sd-ap-btn {
    display: inline-block;
    padding: 10px 24px;
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-decoration: none;
    border-radius: 6px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.sd-ap-btn-fill {
    background: #081d11;
    color: #c9a84c;
    border: 1px solid #081d11;
}

.sd-ap-btn-fill:hover {
    background: #c9a84c;
    border-color: #c9a84c;
    color: #081d11;
}

.sd-ap-btn-outline {
    background: transparent;
    color: #c9a84c;
    border: 1px solid #e1d3b0;
}

.sd-ap-btn-outline:hover {
    border-color: #c9a84c;
}

/* Photo */
.sd-ap-hero-photo {
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
}

.sd-ap-portrait {
    width: 100%;
    max-width: 440px;
    height: auto;
    max-height: 480px;
    object-fit: cover;
    display: block;
    border-radius: 12px;
}

.sd-ap-portrait-placeholder {
    width: 100%;
    max-width: 440px;
    height: 460px;
    background: #f0ece3;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
}

.sd-ap-portrait-placeholder i {
    font-size: 6rem;
    color: #ccc;
}

/* ── BIOGRAPHY ── */
.sd-ap-bio {
    padding: 80px 0;
    border-bottom: 1px solid #e5e2db;
}

.sd-ap-bio-body {
    max-width: 760px;
    margin: 0 auto;
}

.sd-ap-bio-text {
    font-family: 'Playfair Display', 'Georgia', serif;
    font-size: 1.15rem;
    line-height: 2;
    color: #333;
}

.sd-ap-bio-text p:first-of-type::first-letter {
    font-family: 'Playfair Display', 'Georgia', serif;
    font-size: 5rem;
    float: left;
    line-height: 0.8;
    margin: 8px 15px 0 0;
    color: #1a1a1a;
    font-weight: 700;
}

.sd-ap-bio-footer {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin-top: 50px;
    padding-top: 30px;
    border-top: 1px solid #e5e2db;
}

.sd-ap-signature {
    font-family: 'Dancing Script', cursive;
    font-size: 2.5rem;
    color: #1a1a1a;
    margin-bottom: 5px;
}

/* ── NOVELS & SERIALS ── */
.sd-ap-books {
    padding: 80px 0 60px;
}

.sd-ap-books-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 50px;
    padding-bottom: 25px;
    border-bottom: 1px solid #e5e2db;
}

.sd-ap-books-title {
    font-family: 'Playfair Display', 'Georgia', serif;
    font-size: 2.5rem;
    font-weight: 400;
    margin: 0 0 8px 0;
    color: #1a1a1a;
    font-style: italic;
}

.sd-ap-books-desc {
    font-size: 0.95rem;
    color: #888;
    margin: 0;
    max-width: 450px;
    line-height: 1.6;
}

.sd-ap-books-more {
    font-size: 0.85rem;
    color: #8a7d6b;
    text-decoration: none;
    font-weight: 500;
    letter-spacing: 0.5px;
    white-space: nowrap;
    transition: color 0.25s ease;
}

.sd-ap-books-more:hover {
    color: #1a1a1a;
}



/* ── RESPONSIVE ── */
@media (max-width: 992px) {
    .sd-ap-hero {
        grid-template-columns: 1fr;
        gap: 40px;
        padding: 50px 0 40px;
    }

    .sd-ap-name {
        font-size: 3rem;
    }

    .sd-ap-hero-photo {
        justify-content: center;
    }

    .sd-ap-portrait {
        max-width: 100%;
    }

    .sd-ap-books-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

    .sd-ap-books-title {
        font-size: 2rem;
    }
}

@media (max-width: 576px) {
    .sd-ap-name {
        font-size: 2.2rem;
    }

    .sd-ap-bio-text p:first-of-type::first-letter {
        font-size: 3.5rem;
    }

    .sd-ap-books-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .sd-ap-hero-btns {
        flex-direction: column;
    }

    .sd-ap-btn {
        text-align: center;
    }

    .sd-ap-signature {
        font-size: 1.8rem;
    }
}

.sd-novel-categories-select {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 10px 14px !important;
    border-radius: 8px !important;
    border: 1px solid var(--sd-border-color) !important;
    font-family: var(--sd-ui-font) !important;
    font-size: 0.95rem !important;
    color: var(--sd-text-main) !important;
    background-color: #fff !important;
    height: auto !important;
    line-height: 1.5 !important;
    max-width: 100% !important;
    display: block !important;
}

/* Taxonomy footer below content */
.sd-novel-taxonomy-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid var(--sd-border-color);
}

/* =========================================
   BREADCRUMB & TOP LINKS STYLES
   ========================================= */
.sd-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-family: var(--sd-ui-font);
    font-size: 0.82rem;
    color: var(--sd-text-muted);
    margin-bottom: 10px;
    direction: ltr;
}

.sd-breadcrumb a {
    color: var(--sd-primary-color);
    text-decoration: none;
    transition: color 0.2s ease;
}

.sd-breadcrumb a:hover {
    color: var(--sd-primary-hover);
    text-decoration: underline;
}

.sd-breadcrumb-sep {
    color: var(--sd-text-muted);
    opacity: 0.6;
    font-size: 0.75rem;
}

.sd-all-episodes-link {
    font-family: 'Yeseva One', serif;
    transition: color 0.2s ease, opacity 0.2s ease;
    text-decoration: underline !important;
}

.sd-all-episodes-link:hover {
    color: var(--sd-primary-color) !important;
    text-decoration: underline !important;
}

@media (max-width: 768px) {
    .sd-all-episodes-link {
        width: 100%;
        text-align: center;
        margin-left: 0 !important;
        display: block;
        margin-top: 5px;
    }
}

.sd-breadcrumb-current {
    color: var(--sd-text-muted);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 300px;
}

body.sd-dark-mode .sd-breadcrumb {
    color: var(--sd-dark-text-muted);
}

body.sd-dark-mode .sd-breadcrumb a {
    color: var(--sd-primary-color);
}

body.sd-dark-mode .sd-breadcrumb-current {
    color: var(--sd-dark-text-muted);
}

@media (max-width: 768px) {
    .sd-breadcrumb {
        font-size: 0.75rem;
    }

    .sd-breadcrumb-current {
        max-width: 160px;
    }
}