/* ======================================================= */
/* SINGLE POST LAYOUT STYLING (UXT PRO Premium) */
/* ======================================================= */

.single-post-main {
    padding: 0 0 var(--space-xl) 0 !important;
    min-height: 100vh;
}

/* Infinite Loader */
.uxt-infinite-spinner {
    display: flex;
    justify-content: center;
    padding: 40px 0;
}

.uxt-infinite-spinner .spinner-icon {
    width: 40px;
    height: 40px;
    border: 4px solid var(--surface-2);
    border-top: 4px solid var(--accent);
    border-radius: 50%;
    animation: uxt-spin 1s linear infinite;
}

@keyframes uxt-spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.single-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: var(--space-lg);
    align-items: start;
    position: relative;
    width: 100%;
    max-width: 100%;
}

.single-content-column {
    min-width: 0;
    max-width: 100%;
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Glass Hero Header */
.page-header-glass {
    --hero-crumb-display: flex !important;
    /* Force show breadcrumbs */

    /* Alignment with Sidebar & Header Clearance */
    margin-top: 30px !important;
    /* visual --space-lg */
    padding-top: 40px !important;
    /* Restore standard padding */
    border-radius: var(--radius-xl) !important;
    z-index: 10;
    will-change: transform;
    /* Hardware acceleration */
}

@media (max-width: 768px) {
    .page-header-glass {
        margin-top: 15px !important;
        /* Reduced for mobile */
        padding-top: 30px !important;
    }
}

.entry-header.glass-hero {
    background: color-mix(in oklab, var(--surface-1) 40%, transparent);
    background-image: linear-gradient(135deg, color-mix(in oklab, var(--bg-grad-2) 15%, transparent), color-mix(in oklab, var(--bg-grad-1) 15%, transparent));
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border-radius: var(--radius-xl);
    padding: 40px;
    margin-bottom: var(--space-md);
    box-shadow: 0 20px 50px -15px rgba(0, 0, 0, 0.3);
    border: none;
    position: relative;
    overflow: hidden;
}

.page-header-glass .entry-title,
.entry-header .entry-title,
.entry-title {
    margin: 0;
    color: var(--text-headings);
    line-height: 1.2;
    word-wrap: break-word;
    /* Legacy support */
    overflow-wrap: break-word;
    /* Modern wrapping */
    hyphens: auto;
    /* Optional */
    max-width: 100%;
    /* Ensure it respects container width */
}

/* Featured Image */
.custom-featured-area {
    position: relative;
    width: 100%;
    margin-top: 0 !important;
}

.custom-featured-image {
    margin-top: var(--space-md);
    margin-bottom: var(--space-md);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
    position: relative;
}

.custom-featured-image img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.6s var(--ease);
}

.custom-featured-image:hover img {
    transform: scale(1.02);
}

/* Post Meta Bar (Special handling for photo-attached) */
.custom-post-meta-bar.photo-attached-meta {
    background: color-mix(in oklab, var(--surface-1) 30%, transparent);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    margin: 10px;
    padding: 15px 25px;
    border-radius: var(--radius-lg);
    border: 1px solid color-mix(in oklab, var(--border) 10%, transparent);
    position: absolute;
    bottom: var(--space-md);
    left: 0;
    right: 0;
    z-index: 5;
    pointer-events: auto;
}

.custom-post-meta-bar.standard-meta {
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-md);
    border-bottom: none;
    /* Removed global bottom border */
}

.custom-post-meta-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-md);
    margin-bottom: 12px;
    /* Force tight spacing */
    margin-top: 0;
    color: var(--text-secondary);
    font-size: var(--fs-small);
    font-weight: 500;
}

/* Ensure no top margin on first content element */
.entry-content>*:first-child {
    margin-top: 0 !important;
}

.meta-author-date {
    display: flex;
    align-items: center;
    gap: 12px;
}

@media (max-width: 768px) {
    .meta-author-date {
        flex-wrap: wrap;
        gap: 8px;
    }

    .meta-cats-wrapper {
        width: 100%;
        /* Force new line */
        margin-top: 4px;
        order: 3;
        /* Ensure it comes last */
    }
}

.meta-cats-wrapper {
    display: inline-flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    /* Allow wrapping */
}

.meta-cats-wrapper .meta-cat-badge {
    display: inline-flex;
    align-items: center;
    background: color-mix(in oklab, var(--accent) 15%, transparent);
    color: var(--accent);
    padding: 7px 18px;
    border-radius: 99px;
    text-decoration: none;
    font-weight: 700;
    transition: all 0.3s var(--ease);
    font-size: 0.85rem;
    letter-spacing: 0.02em;
    line-height: 1;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    border: none;
    white-space: nowrap;
    /* Prevent text breaking */
}

.meta-cats-wrapper .meta-cat-badge:hover {
    background: var(--accent);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 179, 204, 0.3);
}

.meta-author,
.meta-date,
.meta-views,
.meta-comments {
    display: flex;
    align-items: center;
    gap: 6px;
}

.meta-author a,
.meta-comments {
    color: inherit;
    text-decoration: none;
    transition: color 0.3s var(--ease);
}

.meta-author a:hover,
.meta-comments:hover {
    color: var(--accent);
}

.meta-sep {
    opacity: 0.3;
}


.meta-right-group {
    margin-left: auto;
    display: flex;
    gap: var(--space-md);
}

/* Article Content */
.post-text-glass-card {
    padding: 50px;
    border-radius: var(--radius-xl);
    background: color-mix(in oklab, var(--surface-1) 25%, transparent);
    backdrop-filter: blur(8px);
    border: 1px solid color-mix(in oklab, var(--border) 10%, transparent);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    margin-bottom: var(--space-xl);
}

@media (max-width: 992px) {
    .post-text-glass-card {
        padding: 30px 20px;
        border-radius: var(--radius-lg);
    }
}

.entry-content {
    color: var(--text-primary);
    line-height: 1.8;
    font-size: 1.1rem;
}

.entry-content p {
    margin-bottom: 1.5em;
}

.entry-content h2,
.entry-content h3,
.entry-content h4 {
    margin: 1.5em 0 0.8em;
    color: var(--text-headings);
}

.entry-content a {
    color: var(--accent);
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s var(--ease);
}

.entry-content a:hover {
    color: var(--accent);
    opacity: 0.7;
}

/* Виключення для Змісту (TOC) */
.uxt-toc-wrapper a {
    color: inherit !important;
    opacity: 1 !important;
}

.uxt-toc-wrapper a:hover {
    color: var(--accent) !important;
    opacity: 1 !important;
}

/* Sidebar */
.single-sidebar {
    position: sticky;
    top: 100px;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    min-width: 380px;
    z-index: 100;
}

/* Internal Components (Tags, Share, Nav, Related) */
.custom-post-tags {
    margin: var(--space-xl) 0 var(--space-md);
    padding-top: var(--space-md);
    border-top: 1px solid var(--border);
}

.tags-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.post-tag-pill {
    padding: 6px 14px;
    background: color-mix(in oklab, var(--surface-1) 50%, transparent);
    border: 1px solid var(--border);
    border-radius: 99px;
    color: var(--text-secondary);
    font-size: 13px;
    text-decoration: none;
    transition: all 0.3s var(--ease);
    backdrop-filter: blur(4px);
}

.post-tag-pill:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 179, 204, 0.3);
}

/* Share Buttons */
.share-heading {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--accent);
    font-weight: 800;
    margin: var(--space-md) 0 15px;
}

.post-share-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.share-btn {
    width: 44px;
    height: 44px;
    border-radius: 22px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0;
    overflow: hidden;
    /* Clips the absolute label when not hovered */
    background: color-mix(in oklab, var(--surface-1) 60%, transparent) !important;
    border: 1px solid transparent !important;
    /* Reserve border space */
    color: var(--text-secondary) !important;
    transition: width 0.8s cubic-bezier(0.2, 0.8, 0.2, 1), background-color 0.3s ease, box-shadow 0.3s ease;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
    text-decoration: none;
    cursor: pointer;
    font-family: inherit;
    position: relative;
    /* Context for absolute label */
    box-sizing: border-box;
}

.share-btn svg {
    margin-left: 12px;
    flex-shrink: 0;
    z-index: 2;
    /* Keep icon above */
}

.share-label {
    opacity: 0;
    position: absolute;
    left: 44px;
    /* Start after icon */
    white-space: nowrap;
    transition: opacity 0.4s ease 0.1s;
    /* Slight delay */
    font-weight: 700;
    font-size: 0.85rem;
    color: inherit !important;
    pointer-events: none;
}

/* On hover, EXPAND width (this WILL shift siblings if valid flow, 
   BUT user wants old effect. If user says 'it jerks', maybe we need 
   to make the expansion absolute?
   Strategy: Make the button occupy fixed space in flow, but visually expand absolutely?
   OR: Accept flow shift if that's what user wants "restore old buttons".
   Wait, user said "content moves".
   If I restore width expansion, content WILL move.
   Unless I make them `position: absolute` wrapper? Too complex.
   Maybe the previous movement was caused by something else?
   User said "first I didn't ask to change buttons, second it still jerks".
   This implies the previous fix (removing width) didn't fix the jerk AND ruined the button style.
   So the jerk might NOT be the width expansion?
   Let's look at the screenshot again... the arrow points to the buttons.
   Maybe the hover effect triggers a border or padding change that shifts layout?
   Ah, `border: 1px solid ... !important` inside hover might add 2px to dimensions if box-sizing isn't border-box or if border wasn't there before?
   The base class has `border: none !important`.
   Hover adds `border: 1px solid`.
   THIS ADDS 2px to width/height, causing layout shift!
   Fix: Add transparent border to base state so hover doesn't add pixels.
*/

/* Restore width expansion as requested */
.share-btn:hover {
    width: 145px;
    background: var(--hover-color) !important;
    color: #fff !important;
    border: 1px solid transparent !important;
    box-shadow:
        0 10px 25px -5px rgba(0, 0, 0, 0.3),
        0 0 20px var(--glow-color, color-mix(in srgb, var(--hover-color), transparent 40%)) !important;
}

.share-btn:hover svg,
.share-btn:hover .share-label {
    color: #fff !important;
    fill: #fff !important;
}

.share-btn:hover .share-label {
    opacity: 1;
    /* Label position handled by flow in expansion */
}

/* Author Box */
.custom-author-box {
    margin: var(--space-xl) 0;
    padding: 30px;
    border-radius: var(--radius-xl);
    background: color-mix(in oklab, var(--surface-1) 25%, transparent);
    backdrop-filter: blur(8px);
    border: 1px solid color-mix(in oklab, var(--border) 10%, transparent);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    display: flex;
    gap: 25px;
    transition: all 0.4s var(--ease);
    text-decoration: none !important;
    color: inherit !important;
}

.custom-author-box:hover {
    background: color-mix(in oklab, var(--surface-1) 35%, transparent);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}

.custom-author-box:hover .btn-link {
    color: #fff;
}

.light-theme .custom-author-box:hover .btn-link {
    color: var(--text-primary);
}

.custom-author-box:hover .btn-link svg {
    transform: translateX(10px);
}

.author-avatar-img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 3px solid var(--border);
}

.author-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--accent);
    font-weight: 700;
}

.author-name {
    margin: 5px 0 10px;
}

.author-name a {
    color: var(--text-headings);
    text-decoration: none;
}

.author-bio {
    color: var(--text-secondary);
    font-size: 0.95rem;
    margin-bottom: 12px;
}

.author-link {
    margin-top: 5px;
}

.author-link .btn-link {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* Post Navigation */
.custom-post-navigation {
    margin: var(--space-xl) 0;
    padding-top: var(--space-md);
    border-top: 1px solid var(--border);
}

.custom-post-navigation .nav-links {
    display: flex;
    gap: 20px;
}

.nav-post {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 20px;
    border-radius: var(--radius-lg);
    background: color-mix(in oklab, var(--surface-1) 20%, transparent);
    text-decoration: none;
    transition: all 0.4s var(--ease);
    color: var(--text-primary);
    border: 1px solid color-mix(in oklab, var(--border) 10%, transparent);
}

.nav-post:hover {
    background: color-mix(in oklab, var(--surface-1) 35%, transparent);
    transform: translateY(-4px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.nav-post .nav-label svg {
    width: 16px;
    height: 16px;
    stroke-width: 3;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.nav-post:hover .nav-label svg {
    transform: translateX(8px);
}

.nav-previous:hover .nav-label svg {
    transform: translateX(-8px);
}

.nav-data {
    flex: 1;
    min-width: 0;
}

.nav-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--accent);
    margin-bottom: 6px;
    font-weight: 700;
}

.nav-title {
    display: block;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--text-headings);
    transition: color 0.3s var(--ease);
}

/* color: var(--accent); NO CHANGE ON HOVER */

.nav-post:hover {
    background: color-mix(in oklab, var(--surface-1) 70%, transparent);
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.nav-attachment {
    width: 60px;
    height: 60px;
    border-radius: var(--radius-md);
    overflow: hidden;
    flex-shrink: 0;
}

.nav-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s var(--ease);
}

@media (max-width: 768px) {
    .custom-post-navigation .nav-links {
        flex-direction: column;
    }
}

.nav-post:hover .nav-thumb {
    transform: scale(1.1);
}

/* Related Posts */
.related-posts-section {
    margin-top: var(--space-xl);
    padding-top: var(--space-md);
    border-top: 1px solid var(--border);
}

.related-heading {
    margin-bottom: var(--space-md);
    color: var(--text-headings);
}

.related-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.related-card {
    border-radius: var(--radius-lg);
    background: color-mix(in oklab, var(--surface-1) 30%, transparent);
    overflow: hidden;
    transition: all 0.3s var(--ease);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.related-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
}

.related-thumb {
    height: 160px;
    overflow: hidden;
}

.related-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s var(--ease);
}

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

.related-content {
    padding: 16px;
}

.related-link {
    text-decoration: none;
    color: inherit;
    display: block;
    height: 100%;
}

.related-title {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--text-headings);
    transition: color 0.3s var(--ease);
    line-height: 1.4;
}

/* .related-card:hover .related-title {
    color: var(--accent);
} REMOVED BY USER REQUEST */

.related-card:hover .related-title {
    color: var(--text-headings) !important;
}

.related-date {
    display: block;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

/* Responsive */
@media (max-width: 1024px) {
    .single-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .related-grid {
        grid-template-columns: 1fr;
    }

    .custom-post-meta-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .meta-left-content {
        display: flex;
        flex-direction: column;
        gap: 12px;
        width: 100%;
    }

    .meta-author-date {
        width: 100%;
        justify-content: flex-start;
    }

    .meta-cats-wrapper {
        width: 100%;
    }

    .meta-right-group {
        margin-left: 0;
        width: 100%;
        padding-top: 12px;
        border-top: 1px solid rgba(255, 255, 255, 0.05);
        /* Very light separator */
    }

    body.theme-light .meta-right-group {
        border-top: 1px solid rgba(0, 0, 0, 0.05);
    }
}

/* Comments Section */
.comments-area {
    margin-top: var(--space-xl);
    padding-top: var(--space-md);
    border-top: 1px solid var(--border);
    overflow: hidden;
    width: 100%;
    max-width: 100%;
    clear: both;
}

/* UXT Smart Comments Bridge */
:root {
    --uxt-sc-bg: var(--panel);
    --uxt-sc-bg-alt: var(--surface-1);
    --uxt-sc-text: var(--text-primary);
    --uxt-sc-text-light: var(--text-secondary);
    --uxt-sc-accent: var(--accent);
    --uxt-sc-border: var(--border);
    --uxt-sc-radius: var(--radius-xl);
    --uxt-sc-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.3);
}

body.light-theme {
    --uxt-sc-bg: #ffffff;
    --uxt-sc-bg-alt: #f1f5f9;
    --uxt-sc-text: #1e293b;
    --uxt-sc-text-light: #64748b;
    --uxt-sc-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.uxt-smart-comments-wrapper {
    margin: 30px 0 !important;
    max-width: 100% !important;
    font-family: inherit !important;
}

.uxt-sc-content {
    border: 1px solid var(--border) !important;
}


.comments-header-row {
    margin-bottom: var(--space-md);
}

.comment-form-flex-wrapper {
    display: flex;
    gap: 16px;
    margin-top: var(--space-lg);
}

.c-avatar-wrapper {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}

.c-form-wrapper {
    flex: 1;
}

.comment-form-comment {
    position: relative;
    border-bottom: 1px solid var(--border);
}

.comment-form-comment::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--accent);
    transform: scaleX(0);
    transition: transform 0.3s var(--ease);
}

.comment-form-comment:focus-within::after {
    transform: scaleX(1);
}

.comment-form textarea {
    width: 100% !important;
    background: transparent !important;
    border: none !important;
    color: var(--text-primary) !important;
    padding: 10px 0 !important;
    font-size: 1rem !important;
    resize: none !important;
    outline: none !important;
}

.form-submit {
    display: flex;
    justify-content: flex-end;
    margin-top: 15px;
}

.submit.c-btn {
    background: var(--accent) !important;
    color: #fff !important;
    padding: 8px 24px !important;
    border-radius: 99px !important;
    font-weight: 700 !important;
    border: none !important;
    cursor: pointer !important;
    transition: all 0.3s var(--ease) !important;
}

.submit.c-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 179, 204, 0.4);
}

.ast-comment-list {
    list-style: none;
    padding: 0;
    margin: var(--space-lg) 0;
}

.comment-item {
    display: block;
    margin-bottom: var(--space-lg, 30px);
    padding: 14px;
}

.comment-body {
    flex: 1;
}

.c-meta {
    font-size: 0.9rem;
    margin-bottom: 5px;
}

.c-author {
    font-weight: 700;
    color: var(--text-headings);
}

.c-time {
    color: var(--text-secondary);
    margin-left: 10px;
    font-size: 0.8rem;
}

.c-text {
    color: var(--text-primary);
    line-height: 1.5;
}

.c-actions {
    margin-top: 8px;
}

.comment-reply-link {
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.3s var(--ease);
}

.comment-reply-link:hover {
    color: var(--accent);
}

.children {
    list-style: none;
    margin-left: 56px;
}

/* Responsive */
@media (max-width: 768px) {
    .children {
        margin-left: 20px;
    }
}

/* ============================================
   UXT SMART COMMENTS STYLES
   ============================================ */

/* Variables Bridge */
.uxt-smart-comments-wrapper {
    --uxt-sc-bg: var(--panel);
    --uxt-sc-bg-alt: var(--surface-1);
    --uxt-sc-text: var(--text-primary);
    --uxt-sc-text-sec: var(--text-secondary);
    --uxt-sc-accent: var(--accent);
    --uxt-sc-border: var(--border);
    margin: 30px 0;
    font-family: inherit;
}

/* Comments Header */
.comments-header-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.comments-count-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-headings);
    margin: 0;
    line-height: 1.3;
}

/* Sort Dropdown */
.uxt-smart-comments-wrapper .dropdown {
    position: relative;
}

.uxt-smart-comments-wrapper .sort-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    transition: all 0.3s var(--ease);
    font-weight: 600;
}

.uxt-smart-comments-wrapper .sort-btn:hover {
    color: var(--accent);
    background: color-mix(in oklab, var(--accent) 10%, transparent);
}

.uxt-smart-comments-wrapper .dd-menu {
    position: absolute;
    top: 100%;
    right: 0;
    min-width: auto;
    /* Allow shrinking */
    width: max-content;
    /* Fit content exactly */
    white-space: nowrap;
    /* Prevent wrapping */
    background: color-mix(in oklab, var(--panel) 95%, transparent);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    border-radius: var(--radius-md);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s var(--ease);
    z-index: 100;
    padding: 8px 0;
}

.uxt-smart-comments-wrapper .dd-menu.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.uxt-smart-comments-wrapper .dd-item {
    display: block;
    width: 100%;
    padding: 10px 16px;
    background: none;
    border: none;
    color: var(--text-primary);
    text-align: left;
    cursor: pointer;
    transition: all 0.2s var(--ease);
    font-size: 0.9rem;
}

.uxt-smart-comments-wrapper .dd-item:hover {
    background: color-mix(in oklab, var(--accent) 15%, transparent);
    color: var(--accent);
}

/* Comment Form */
.comment-form-flex-wrapper {
    display: flex;
    gap: 16px;
    margin-bottom: 40px;
}

.c-avatar-wrapper {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}

.c-avatar-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.c-form-wrapper {
    flex: 1;
}

.uxt-smart-comments-wrapper .comment-respond {
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
}

/* Form Fields Layout */
.uxt-smart-comments-wrapper .comment-form {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.uxt-smart-comments-wrapper .comment-form-comment {
    order: 1;
}

.uxt-smart-comments-wrapper .comment-form-author,
.uxt-smart-comments-wrapper .comment-form-email,
.uxt-smart-comments-wrapper .comment-form-url {
    order: 2;
    max-width: 400px;
}

.uxt-smart-comments-wrapper .comment-form-cookies-consent {
    order: 3;
    margin: 8px 0;
}

.uxt-smart-comments-wrapper .form-submit {
    order: 4;
}

/* === COMMENT FORM INPUT STYLES === */
/* Glass Input Style */
.comment-form .input-wrapper {
    position: relative;
}

/* CSS for Smart Comments is handled by UI Kit global styles */
/* We only keep specific error message positioning here */

/* Error States */
.comment-form .input-wrapper.has-error .input-glass {
    box-shadow: 0 0 20px rgba(239, 68, 68, 0.2), 0 0 0 1px var(--danger) !important;
}

.comment-form .has-error .floating-label {
    color: var(--danger) !important;
}

/* Error Message Below Field */
.comment-form .error-message {
    display: none;
    color: var(--danger);
    font-size: 0.8rem;
    margin-top: 6px;
    padding-left: 4px;
    font-weight: 500;
}

.comment-form .input-wrapper.has-error+.error-message {
    display: block;
}

/* === CHECKBOX STYLES (from UI Kit spec) === */
.comment-form .choice-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    color: var(--text-primary);
    font-weight: 500;
}

.comment-form .choice-wrapper input {
    display: none;
}

.comment-form .choice-visual {
    width: 22px;
    height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.5s var(--ease);
    flex-shrink: 0;
    background-color: color-mix(in oklab, var(--surface-1) 30%, transparent);
    background-image: linear-gradient(135deg, color-mix(in oklab, var(--bg-grad-2) 15%, transparent), color-mix(in oklab, var(--bg-grad-1) 15%, transparent));
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    border: none;
}

.comment-form .checkbox-visual {
    border-radius: 6px;
}

.comment-form .choice-wrapper:hover .choice-visual {
    box-shadow: 0 0 15px 2px color-mix(in oklab, var(--accent) 40%, transparent);
}

.comment-form .checkbox-visual svg {
    width: 16px;
    height: 16px;
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.3s var(--ease);
    stroke-width: 3.5;
}

.comment-form .choice-wrapper input:checked+.checkbox-visual {
    background-color: transparent;
    box-shadow: 0 0 15px 2px color-mix(in oklab, var(--accent) 40%, transparent);
}

.comment-form .choice-wrapper input:checked+.checkbox-visual svg {
    color: var(--accent);
    opacity: 1;
    transform: scale(1);
}

.comment-form .choice-label {
    color: var(--text-primary);
    font-weight: 500;
    font-size: 0.9rem;
    opacity: 0.8;
}

/* Comments List */
.uxt-sc-list {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.uxt-smart-comments-wrapper .comment-item {
    display: block;
    animation: commentFadeIn 0.4s var(--ease) backwards;
}

/* Vertical spacing between ALL sibling comments (nested or root) */
.uxt-smart-comments-wrapper .children>div[id^="comment-"]+div[id^="comment-"],
.uxt-smart-comments-wrapper .comment-item+.comment-item,
.uxt-smart-comments-wrapper div[id^="comment-"]+div[id^="comment-"] {
    margin-top: 28px !important;
    padding-top: 24px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* Reset depth margins on desktop - .children already handles indentation */
.uxt-smart-comments-wrapper .comment-item.depth-2,
.uxt-smart-comments-wrapper .comment-item.depth-3,
.uxt-smart-comments-wrapper .comment-item.depth-4,
.uxt-smart-comments-wrapper .comment-item.depth-5 {
    margin-left: 0 !important;
}

@keyframes commentFadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Error Popup */
#uikit-popup-error {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
}

#uikit-popup-error .uikit-popup-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
}

#uikit-popup-error .uikit-popup-inner {
    position: relative;
    z-index: 1;
    background: var(--panel);
    border-radius: var(--radius-lg);
    padding: 30px;
    max-width: 400px;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
}

/* Responsive */
@media (max-width: 768px) {

    /* Reset depth margins on mobile - .children already handles indentation */
    .uxt-smart-comments-wrapper .comment-item.depth-2,
    .uxt-smart-comments-wrapper .comment-item.depth-3,
    .uxt-smart-comments-wrapper .comment-item.depth-4,
    .uxt-smart-comments-wrapper .comment-item.depth-5 {
        margin-left: 0 !important;
    }

    /* Prevent any overflow */
    .uxt-smart-comments-wrapper,
    .uxt-sc-list,
    .uxt-sc-list .children {
        max-width: 100% !important;
        overflow-x: hidden;
    }

    .comments-header-row {
        gap: 16px;
    }
}

/* Like Button Styles */
.uxt-sc-like-btn {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: var(--radius-sm, 8px);
    transition: all 0.3s var(--ease);
    font-size: 0.9rem;
    font-family: inherit;
}

.uxt-sc-like-btn:hover {
    background: color-mix(in srgb, var(--surface-1) 80%, transparent);
    color: var(--text-primary);
}

.uxt-sc-like-btn.liked {
    color: var(--accent);
}

.uxt-sc-like-btn svg {
    stroke-width: 2px;
    transition: transform 0.3s var(--ease);
}

.uxt-sc-like-btn:active svg {
    transform: scale(1.2);
}

/* ============================================================ */
/* SERVICE (APP) SINGLE PAGE — Clean Layout, No Sidebar          */
/* ============================================================ */

.service-single-container {
    max-width: 100%;
    width: 100%;
    overflow: hidden;
}

.service-content-inner {
    /* No extra max-width or padding needed — parent .container already provides both */
    width: 100%;
}

.service-single-container .page-header-glass {
    margin-top: 30px !important;
    padding-top: 40px !important;
    margin-bottom: var(--space-lg);
}

.service-single-container .page-header-glass.has-bg-image {
    --text-h1: #ffffff !important;
    --text-secondary: rgba(255, 255, 255, 0.7) !important;
}

.service-single-container .page-header-glass.has-bg-image .breadcrumb-link {
    color: rgba(255, 255, 255, 0.8) !important;
}

.service-single-container .page-header-glass.has-bg-image .breadcrumb-link:hover {
    color: var(--accent) !important;
}

.service-single-container .page-header-glass.has-bg-image .breadcrumb-item {
    color: rgba(255, 255, 255, 0.7) !important;
}

.service-single-container .page-header-glass.has-bg-image .breadcrumb-separator {
    color: rgba(255, 255, 255, 0.5) !important;
    opacity: 0.5 !important;
}

.service-single-container .page-header-glass.has-bg-image .breadcrumb-current {
    color: rgba(255, 255, 255, 0.9) !important;
    opacity: 0.9 !important;
}

.service-single-container .page-header-glass.has-bg-image h1 {
    color: #ffffff !important;
}

.service-single-container .page-header-glass.has-bg-image .subtitle {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* App content — full width, no extra wrapping */
.service-entry-content {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    box-sizing: border-box;
}

/* App iframe wrapper — MUST stay inside container, override breakout rules */
.service-entry-content .uxt-app-outer-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    left: auto !important;
    right: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;
    transform: none !important;
    position: relative !important;
}

/* FAQ & SEO blocks below the app — add top spacing */
.service-entry-content .uxt-sync-block-wrapper {
    margin-top: var(--space-xl);
    width: 100%;
    display: block;
    clear: both;
}

/* Service page — ensure FAQ section header matches global rhythm */
.service-entry-content .faq-section-header,
.service-entry-content .seo-section-header {
    margin-bottom: var(--space-lg) !important;
    border-left: 4px solid var(--accent) !important;
    padding-left: 20px !important;
    display: flex !important;
    align-items: flex-end !important;
}

/* Service page — ensure panels match theme styling */
.service-entry-content .faq-panel {
    border-radius: var(--radius-lg);
    width: 100%;
    box-sizing: border-box;
}

.service-entry-content .seo-panel {
    background: var(--surface-1);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    width: 100%;
    box-sizing: border-box;
}

/* FAQ & SEO containers — explicitly full width */
.service-entry-content .faq-container,
.service-entry-content .seo-block,
.service-entry-content .seo-content-body {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Comments on service pages - Full width like other blocks */
.service-single-container .comments-area {
    width: 100% !important;
    max-width: 100% !important;
    margin-top: var(--space-xl);
    padding-top: var(--space-md);
    border-top: 1px solid var(--border);
}

/* Revert SEO and FAQ blocks to full width (respecting parent container) */
.service-entry-content .uxt-sync-block-wrapper,
.service-entry-content .seo-panel,
.service-entry-content .faq-panel {
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Ensure no negative margins from parent blocks */
.service-single-container .comments-area * {
    max-width: 100%;
}

@media (max-width: 768px) {
    .service-single-container .page-header-glass {
        margin-top: 15px !important;
        padding-top: 30px !important;
    }

    .service-entry-content .seo-panel {
        padding: 30px !important;
    }
}