/*! Built: 2026-01-03 07:54:36 | Source: C:\laragon\www\camunite\css\v5/src/pages/blog.css */
/**
 * CSS-V5 BLOG PAGES
 * Page-only imports (core excluded). Build will inline, not minify.
 */
/* === Inlined from: ../../../03-components/blog.css === */
/* ===================================================================
   BLOG - CSS-v2
   ===================================================================
   Styles for blog index and article pages
   
   REUSE STRATEGY:
   - Uses universal classes: .page-hero, .content-box, .sidebar, .pagination
   - Blog-specific classes only for unique blog elements
   - All values use CSS tokens from tokens.css
   - Preserves admin-managed sidebar functionality
   
   CREATED: November 12, 2025
   =================================================================== */

/* ===== PAGE-LEVEL STYLES ===== */

body.blog-page {
	background: var(--bg-primary);
	color: var(--text-primary);
}

/* Blog Hero - Full Width (no stats column) */
body.blog-page .page-hero__inner {
	display: block;
}

body.blog-page .page-hero__copy {
	max-width: 100%;
}

body.blog-page a {
	color: var(--index-accent);
	transition: color 0.2s ease;
}

body.blog-page a:hover,
body.blog-page a:focus {
	color: var(--index-accent-strong);
}

[data-theme="dark"] body.blog-page {
	background: var(--dark-bg-primary);
}

/* ===== BLOG EMPTY STATE ===== */

.blog-empty-state {
	text-align: center;
	padding: clamp(2rem, 4vw, 3rem) var(--spacing-lg);
}

.blog-empty-state h2 {
	margin: 0 0 var(--spacing-md);
	font-size: clamp(1.35rem, 2.5vw, 1.8rem);
	color: var(--index-accent);
}

.blog-empty-state p {
	margin: 0;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--text-secondary);
}

/* ===== BLOG CARD (Index Page) ===== */

.blog-card {
	display: flex;
	gap: clamp(1rem, 2vw, 1.5rem);
	align-items: flex-start;
	padding: clamp(1rem, 2vw, 1.5rem);
}

@media (max-width: 768px) {
	.blog-card {
		flex-direction: column;
	}
}

.blog-card__thumbnail {
	flex: 0 0 clamp(180px, 25vw, 240px);
	aspect-ratio: 4 / 3;
	border-radius: var(--radius-md);
	overflow: hidden;
	display: block;
	background: var(--bg-secondary);
	box-shadow: var(--shadow-md);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

@media (max-width: 768px) {
	.blog-card__thumbnail {
		flex: 1 1 auto;
		width: 100%;
		max-height: 280px;
	}
}

.blog-card__thumbnail:hover,
.blog-card__thumbnail:focus {
	transform: translateY(-2px);
	box-shadow: var(--shadow-lg);
}

.blog-card__thumbnail img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.blog-card__content {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: var(--spacing-md);
}

.blog-card__title {
	margin: 0;
	font-size: clamp(1.25rem, 2.2vw, 1.5rem);
	font-weight: 700;
	line-height: 1.3;
	text-transform: none;
}

.blog-card__title a {
	color: var(--text-primary);
	text-decoration: none;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.blog-card__title a:hover,
.blog-card__title a:focus {
	color: var(--index-accent);
}

.blog-card__excerpt {
	margin: 0;
	font-size: 1rem;
	line-height: 1.7;
	color: var(--text-secondary);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.blog-card__link {
	display: inline-flex;
	align-items: center;
	gap: var(--spacing-xs);
	font-weight: 600;
	font-size: 0.95rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	text-decoration: none;
	color: var(--index-accent);
	margin-top: auto;
}

.blog-card__link:hover,
.blog-card__link:focus {
	color: var(--index-accent-strong);
}

/* ===== BLOG ARTICLE (Single Post) ===== */

.blog-article {
	padding: clamp(1.5rem, 3vw, 2.5rem);
}

.blog-article__header {
	margin-bottom: clamp(1.5rem, 3vw, 2rem);
}

.blog-article__title {
	margin: 0 0 var(--spacing-md);
	font-size: clamp(1.75rem, 4vw, 2.5rem);
	font-weight: 700;
	line-height: 1.2;
	color: var(--text-primary);
}

.blog-article__excerpt {
	margin: 0;
	font-size: clamp(1rem, 1.8vw, 1.15rem);
	line-height: 1.7;
	color: var(--text-secondary);
}

.blog-article__cover {
	margin: 0 0 clamp(1.5rem, 3vw, 2rem);
	border-radius: var(--radius-lg);
	overflow: hidden;
	box-shadow: var(--shadow-lg);
}

.blog-article__cover img {
	width: 100%;
	height: auto;
	display: block;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.blog-article__body {
	font-size: 1.05rem;
	line-height: 1.8;
	color: var(--text-primary);
}

.blog-article__body h2,
.blog-article__body h3,
.blog-article__body h4 {
	margin: clamp(1.5rem, 3vw, 2rem) 0 var(--spacing-md);
	font-weight: 700;
	line-height: 1.3;
	color: var(--text-primary);
}

.blog-article__body h2 {
	font-size: clamp(1.5rem, 3vw, 2rem);
	color: var(--index-accent);
}

.blog-article__body h3 {
	font-size: clamp(1.25rem, 2.5vw, 1.65rem);
}

.blog-article__body h4 {
	font-size: clamp(1.1rem, 2vw, 1.35rem);
}

.blog-article__body p {
	margin: 0 0 var(--spacing-lg);
	line-height: inherit;
}

.blog-article__body ul,
.blog-article__body ol {
	margin: 0 0 var(--spacing-lg);
	padding-left: clamp(1.5rem, 3vw, 2rem);
}

.blog-article__body li {
	margin-bottom: var(--spacing-sm);
	line-height: inherit;
}

.blog-article__body img {
	max-width: 100%;
	height: auto;
	border-radius: var(--radius-md);
	margin: var(--spacing-lg) 0;
}

.blog-article__body a {
	color: var(--index-accent);
	text-decoration: underline;
}

.blog-article__body a:hover,
.blog-article__body a:focus {
	color: var(--index-accent-strong);
}

.blog-article__body blockquote {
	margin: var(--spacing-lg) 0;
	padding: var(--spacing-lg);
	border-left: 4px solid var(--index-accent);
	background: var(--bg-secondary);
	border-radius: var(--radius-md);
	font-style: italic;
	color: var(--text-secondary);
}

.blog-article__body code {
	padding: 0.2em 0.4em;
	background: var(--bg-secondary);
	border-radius: var(--radius-sm);
	font-size: 0.9em;
	font-family: 'Courier New', monospace;
}

.blog-article__body pre {
	margin: var(--spacing-lg) 0;
	padding: var(--spacing-lg);
	background: var(--bg-secondary);
	border-radius: var(--radius-md);
	overflow-x: auto;
}

.blog-article__body pre code {
	padding: 0;
	background: none;
}

.blog-article__footer {
	margin-top: clamp(1.5rem, 3vw, 2rem);
	padding-top: var(--spacing-lg);
	border-top: 1px solid var(--border-default);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--spacing-sm);
	font-size: 0.875rem;
	color: var(--text-tertiary);
}

.blog-article__meta {
	color: var(--text-secondary);
	font-weight: 500;
}

.blog-article__separator {
	color: var(--text-tertiary);
}

/* ===== BLOG SIDEBAR ===== */

/* Blog pages now use standard .sidebar from sidebar.css (CSS-v2 migration) */
/* Legacy .blog-sidebar and .blog-widget classes kept for backward compatibility */

.blog-sidebar {
	background: var(--bg-primary);
	border: 1px solid var(--border-default);
	border-radius: var(--radius-lg);
	padding: clamp(1.25rem, 2.5vw, 1.75rem);
	box-shadow: var(--shadow-sm);
}

[data-theme="dark"] .blog-sidebar {
	background: var(--overlay-light);
	border-color: var(--border-subtle);
}

.blog-widget {
	padding: var(--spacing-lg) 0;
	border-bottom: 1px solid var(--border-subtle);
}

.blog-widget:first-child {
	padding-top: 0;
}

.blog-widget:last-child {
	padding-bottom: 0;
	border-bottom: none;
}

/* Widget Heading */
.blog-widget h3 {
	margin: 0 0 var(--spacing-md);
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--text-primary);
	text-transform: none;
}

.blog-widget h3 a {
	color: inherit;
	text-decoration: none;
}

.blog-widget h3 a:hover {
	color: var(--index-accent);
}

/* Widget Lists */
.blog-widget ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--spacing-sm);
}

.blog-widget li {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.blog-widget li a {
	color: var(--text-primary);
	text-decoration: none;
	font-weight: 500;
	line-height: 1.4;
}

.blog-widget li a:hover {
	color: var(--index-accent);
}

.blog-widget li small {
	font-size: 0.8rem;
	color: var(--text-tertiary);
}

/* Blog Widget Image */
.blog-widget-image {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--radius-md);
	display: block;
	background: var(--bg-secondary);
	box-shadow: var(--shadow-md);
	margin-bottom: var(--spacing-md);
}

/* Blog Tag Cloud (Admin Widget) */
.blog-tag-cloud {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spacing-xs);
	padding: 0;
	margin: var(--spacing-md) 0 0;
	list-style: none;
}

.blog-tag-cloud li {
	flex: 0 0 auto;
}

.blog-tag-cloud li a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.35rem 0.75rem;
	border-radius: var(--radius-full);
	background: var(--bg-secondary);
	color: var(--text-primary);
	text-decoration: none;
	font-weight: 600;
	font-size: 0.875rem;
	white-space: nowrap;
	transition: all 0.2s ease;
}

.blog-tag-cloud li a:hover,
.blog-tag-cloud li a:focus {
	background: var(--index-accent);
	color: var(--text-on-accent);
	transform: translateY(-1px);
	box-shadow: var(--shadow-sm);
}

[data-theme="dark"] .blog-tag-cloud li a {
	background: var(--overlay-medium);
}

[data-theme="dark"] .blog-tag-cloud li a:hover {
	background: var(--index-accent);
}

/* Sidebar HTML Content */
.sidebar-html {
	margin-top: var(--spacing-md);
	font-size: 0.95rem;
	line-height: 1.6;
	color: var(--text-secondary);
}

.sidebar-html p {
	margin: 0 0 var(--spacing-sm);
}

.sidebar-html a {
	color: var(--index-accent);
	text-decoration: none;
}

.sidebar-html a:hover {
	text-decoration: underline;
}

/* Text Muted (for empty widgets) */
.text-muted {
	color: var(--text-tertiary);
	font-style: italic;
	font-size: 0.9rem;
}

/* ===== DARK THEME ADJUSTMENTS ===== */

[data-theme="dark"] .blog-card__title a {
	color: var(--text-primary);
}

[data-theme="dark"] .blog-article__title {
	color: var(--text-primary);
}

[data-theme="dark"] .blog-article__body blockquote {
	background: var(--overlay-light);
	border-color: var(--index-accent);
}

[data-theme="dark"] .blog-article__body code {
	background: var(--overlay-light);
}

[data-theme="dark"] .blog-article__body pre {
	background: var(--overlay-light);
}

/* ===== RESPONSIVE ADJUSTMENTS ===== */

@media (max-width: 1023px) {
	.blog-sidebar {
		margin-top: var(--spacing-xl);
	}
}

@media (max-width: 575px) {
	.blog-card {
		padding: var(--spacing-md);
	}

	.blog-article {
		padding: var(--spacing-md);
	}

	.blog-article__body {
		font-size: 1rem;
	}
}



/* === Inlined from: ../../../03-components/content-box.css === */
/**
 * CONTENT-BOX
 * 
 * Universal content container for text, SEO content, etc.
 * Replaces: .index-home-seo, .text-box, .seo-text, etc.
 */

.content-box {
    background: var(--surface-secondary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-xl);
    padding: clamp(1.5rem, 3vw, 2rem);
    /* margin-bottom removed - spacing handled by .content-main gap */
    color: var(--text-primary);
    line-height: 1.7;
  }

  [data-theme="dark"] .content-box {
    background: var(--surface-secondary);
    border: 1px solid var(--border-default);
  }

  .content-box__inner {
    /* For nested content structure */
  }

  /* Text alignment modifiers */
  .content-box--justify {
    text-align: justify;
  }

  .content-box--center {
    text-align: center;
  }

  .content-box--center .action-buttons {
    justify-content: center;
  }

  /* Compact center box - smaller padding and heading */
  .content-box--center h2 {
    font-size: clamp(0.9rem, 1.5vw, 1.1rem);
    margin-bottom: 0.5rem;
  }

  /* Compact action box for country hub and tag pages */
  body.country-hub-page .content-box--center,
  body.index-page .content-box--center {
    padding: 0.75rem 1rem;
  }

  body.country-hub-page .content-box--center h2,
  body.index-page .content-box--center h2 {
    font-size: 0.85rem;
    margin-bottom: 0.4rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
  }

  body.country-hub-page .content-box--center .action-buttons,
  body.index-page .content-box--center .action-buttons {
    gap: 0.5rem;
  }

  /* Padding modifiers */
  .content-box--pad-sm {
    padding: var(--spacing-sm);
  }

  .content-box--pad-lg {
    padding: var(--spacing-xl);
  }

  /* Spacing modifiers */
  .content-box--no-margin {
    margin-bottom: 0;
  }

  /* Nested headings */
  .content-box h2 {
    font-size: var(--font-size-xl);
    margin-bottom: var(--spacing-sm);
    color: var(--text-primary);
  }

  .content-box h3 {
    font-size: var(--font-size-lg);
    margin-bottom: var(--spacing-xs);
    color: var(--text-primary);
  }

  /* Nested paragraphs */
  .content-box p {
    margin-bottom: var(--spacing-sm);
  }

  .content-box p:last-child {
    margin-bottom: 0;
  }

  /* Nested links */
  .content-box a {
    color: var(--link-color);
    text-decoration: underline;
  }

.content-box a:hover {
  color: var(--link-color-hover);
}

/* ============================================
   COLLAPSIBLE SEO TEXT - "Read More" Pattern
   SEO-safe: content stays in DOM, only visual truncation
   Supports both inline text AND multi-paragraph content
   ============================================ */

.content-box--collapsible {
  position: relative;
}

.content-box--collapsible .content-box__text {
  /* Fixed height for consistent truncation across pages */
  /* Desktop: ~8-10 lines visible */
  max-height: 12rem;
  overflow: hidden;
  position: relative;
  transition: max-height 0.4s ease;
}

/* Fade overlay for smooth truncation effect */
.content-box--collapsible .content-box__text::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2.5em;
  background: linear-gradient(to bottom, transparent, var(--surface-secondary));
  pointer-events: none;
  transition: opacity 0.3s ease;
}

/* Expanded state */
.content-box--collapsible.is-expanded .content-box__text {
  max-height: 5000px; /* Large enough for any content */
}

.content-box--collapsible.is-expanded .content-box__text::after {
  opacity: 0;
}

/* Read More toggle */
.content-box__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.75rem;
  padding: 0;
  background: none;
  border: none;
  color: var(--accent-primary);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: color 0.2s ease;
}

.content-box__toggle:hover {
  color: var(--accent-hover, var(--accent-primary));
  text-decoration: underline;
}

/* Dark theme - ensure toggle visibility */
[data-theme="dark"] .content-box__toggle {
  color: var(--link-color, var(--accent-primary));
}

[data-theme="dark"] .content-box__toggle:hover {
  color: var(--link-color-hover, var(--accent-hover));
}

.content-box__toggle i {
  font-size: 0.75rem;
  transition: transform 0.3s ease;
}

.content-box--collapsible.is-expanded .content-box__toggle i {
  transform: rotate(180deg);
}

/* Hide toggle when expanded (optional - or change text) */
.content-box--collapsible.is-expanded .content-box__toggle-more {
  display: none;
}

.content-box__toggle-less {
  display: none;
}

.content-box--collapsible.is-expanded .content-box__toggle-less {
  display: inline;
}

/* ===== MOBILE: Even shorter snippet ===== */
@media (max-width: 768px) {
  .content-box--collapsible .content-box__text {
    max-height: 5rem; /* Shorter on mobile */
  }
  
  .content-box--collapsible .content-box__text::after {
    height: 2rem;
  }
}

/* ============================================
   FILTER RELATED - Tag+Attribute Cross-links
   ============================================ */

.filter-related {
  margin-top: var(--section-gap);
}

.filter-related__title {
  margin: 0 0 var(--spacing-sm) 0;
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 500;
}

.filter-related__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
  align-items: center;
}

.filter-related__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2xs);
  padding: var(--spacing-xs) var(--spacing-sm);
  background: var(--surface-tertiary, var(--surface-secondary));
  border: 1px solid var(--border-default);
  border-radius: var(--radius-full, 20px);
  color: var(--text-primary);
  text-decoration: none;
  font-size: var(--font-size-sm);
  font-weight: 500;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.filter-related__btn:hover,
.filter-related__btn:focus {
  background: var(--accent-primary);
  border-color: var(--accent-primary);
  color: var(--text-on-accent, #fff);
  text-decoration: none;
}

.filter-related__count {
  font-size: var(--font-size-xs);
  opacity: 0.7;
}



/* === Inlined from: ../../../03-components/comments-and-voting.css === */
/* ===================================================================
   COMMENTS & VOTING SYSTEM - CSS-v2
   Extracted from legacy style.css + thumbsup/styles.css
   =================================================================== */

/* ===== UTILITY: HIDE ELEMENTS ===== */
/* Standard hidden class (for optional fields like email) */
.dn {
    display: none !important;
}

/* Honeypot anti-spam field (complete invisibility) */
.honeypot {
    display: none !important;
    visibility: hidden !important;
    position: absolute !important;
    left: -9999px !important;
    width: 0 !important;
    height: 0 !important;
    opacity: 0 !important;
}

/* ===== THUMBSUP VOTING SYSTEM ===== */
/* Import from thumbsup/styles.css with CSS-v2 tokens */
/* TODO: missing import: ../../../thumbsup/styles.css */


/* ===== STAR RATING SYSTEM (NEW DESIGN FOR CSS-V2) ===== */
/* Custom star rating design for model pages */
.vote.with-rating {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--bg-primary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    min-width: 180px;
}

.vote.with-rating .totalrate {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 6px;
}

.vote.with-rating .totalrate i,
.vote.with-rating .totalrate span {
    color: var(--text-secondary);
    font-weight: 500;
    font-style: normal;
}

.vote.with-rating .stars {
    position: relative;
    width: 110px; /* Fixed width for 5 stars */
    height: 24px;
    display: block;
    margin: 0 auto;
}

/* Star background (empty stars) */
.vote.with-rating .stars::before {
    content: '★★★★★';
    font-size: 20px;
    letter-spacing: 2px;
    line-height: 24px;
    color: var(--border-default);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    text-align: left; /* Align left to match overlay */
}

/* Filled stars overlay */
.vote.with-rating .stars .star_n {
    position: absolute;
    left: 0;
    top: 0;
    height: 24px;
    overflow: hidden;
    transition: width 0.3s ease;
    pointer-events: none; /* Allow clicks to pass through */
}

.vote.with-rating .stars .star_n::before {
    content: '★★★★★';
    font-size: 20px;
    letter-spacing: 2px;
    line-height: 24px;
    color: #fbbf24; /* Yellow stars */
    position: absolute;
    left: 0;
    top: 0;
    white-space: nowrap;
    text-align: left; /* Align left to match background */
}

/* Interactive rating layer (when not yet voted) */
.vote.with-rating .stars .rating {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 24px;
    display: flex;
    z-index: 2;
}

.vote.with-rating .stars .rating span {
    width: 20%; /* 5 stars = 20% each (100% / 5) */
    height: 100%;
    cursor: pointer;
    position: relative;
    z-index: 3;
}

/* Votes count */
.vote.with-rating em {
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-style: normal;
    font-weight: 500;
}

/* Thank you message after voting */
.vote.with-rating .thank {
    font-size: 0.9375rem;
    font-weight: 600;
    color: #10b981;
    padding: var(--spacing-xs) 0;
    text-align: center;
}

/* Hover state */
.vote.with-rating .stars .rating span:hover ~ .star_n,
.vote.with-rating .stars .rating span:hover {
    opacity: 1;
}

/* Dark theme adjustments */
[data-theme="dark"] .vote.with-rating {
    background: var(--bg-secondary);
}

[data-theme="dark"] .vote.with-rating .stars::before {
    color: #374151;
}

[data-theme="dark"] .vote.with-rating .stars .star_n::before {
    color: #fbbf24;
}

/* Responsive adjustments */
@media (max-width: 640px) {
    .vote.with-rating {
        min-width: 140px;
        padding: 10px 12px;
    }
    
    .vote.with-rating .stars {
        width: 100px; /* 5 stars smaller on mobile */
    }
    
    .vote.with-rating .stars::before,
    .vote.with-rating .stars .star_n::before {
        font-size: 18px;
        letter-spacing: 1px;
    }
}

/* ===== COMMENTS SYSTEM (ENHANCED) ===== */
.emComments {
    margin: 10px auto;
    text-align: left;
    border-radius: var(--radius-md);
    overflow: visible;
    margin-top: 20px;
}

.emComments .user {
    font: .95rem fontawesome;
}

.emAddComment {
    clear: left;
    float: none;
    overflow: hidden;
    display: block;
    padding-top: 10px;
    margin-top: 20px;
}

.emComment,
.emInfoMessage {
    font-size: .9rem;
    background: linear-gradient(145deg,
            rgba(255, 255, 255, 0.98) 0%,
            rgba(249, 250, 252, 0.95) 100%);
    border: 1px solid rgba(226, 232, 240, 0.6);
    border-radius: var(--radius-md);
    clear: left;
    float: none;
    margin-bottom: 12px;
    overflow: hidden;
    padding: 15px;
    display: block;
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.05),
        0 0 15px rgba(139, 92, 246, 0.03);
    transition: all 0.2s ease;
}

.emComment:hover {
    background: rgba(255, 255, 255, 1);
    border-color: rgba(203, 213, 225, 0.8);
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.08),
        0 0 25px rgba(139, 92, 246, 0.08);
    transform: translateY(-1px);
}

[data-theme="dark"] .emComment {
    background: linear-gradient(145deg,
            var(--bg-secondary) 0%,
            rgba(35, 41, 55, 0.95) 100%);
    border-color: var(--border-default);
    color: #cbd5e1;
}

[data-theme="dark"] .emComment:hover {
    background: var(--bg-tertiary);
    border-color: #4a5568;
}

.emInfoMessage {
    text-align: center;
    font-weight: 600;
}

.emCommentImage {
    color: #35ab35;
    float: left;
    padding-left: .7rem;
    padding-top: 3px;
}

.emCommentText {
    padding-left: 2rem;
}

.emCommentInto .reply::before,
.emCommentInto .dislike::before,
.emCommentInto .like::before {
    font-size: .9rem;
    margin-right: 4px;
}

.emCommentInto .like {
    color: #35ab35;
}

.emCommentInto em {
    font-weight: 600;
}

.emCommentInto a:hover {
    color: var(--link-hover);
}

.emCommentInto {
    padding: 10px 0 0 .7rem;
    font-size: .83rem;
    border-top: 1px solid rgba(226, 232, 240, 0.4);
    margin-top: 10px;
    padding-top: 10px;
}

[data-theme="dark"] .emCommentInto {
    border-top-color: var(--border-default);
}

.emdate {
    display: block;
    padding-bottom: 7px;
    font-size: .75rem;
    color: #64748b;
    opacity: 0.8;
}

[data-theme="dark"] .emdate {
    color: #94a3b8;
}

.reply {
    padding-top: 5px;
}

.emShowAllComments,
.emHideAllComments {
    background: linear-gradient(145deg,
            rgba(255, 255, 255, 0.98) 0%,
            rgba(249, 250, 252, 0.95) 100%);
    border: 1px solid rgba(203, 213, 225, 0.6);
    border-radius: var(--radius-sm);
    clear: left;
    float: none;
    margin-bottom: 15px;
    padding: 12px 20px;
    display: block;
    font-size: .95rem;
    overflow: hidden;
    transition: all 0.2s ease;
    cursor: pointer;
}

.emShowAllComments:hover,
.emHideAllComments:hover {
    background: rgba(255, 255, 255, 1);
    border-color: var(--link);
    transform: translateX(5px);
}

[data-theme="dark"] .emShowAllComments,
[data-theme="dark"] .emHideAllComments {
    background: linear-gradient(145deg,
            var(--bg-secondary) 0%,
            rgba(35, 41, 55, 0.95) 100%);
    border-color: var(--border-default);
    color: var(--text-primary);
}

[data-theme="dark"] .emShowAllComments:hover,
[data-theme="dark"] .emHideAllComments:hover {
    background: var(--bg-tertiary);
    border-color: var(--link);
}

#emContent,
.emContent {
    font-size: .9rem;
}

.emSenderName {
    font-weight: 700;
    font-size: 1rem;
    color: #35ab35;
    background: linear-gradient(135deg, #10b981, #059669);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

[data-theme="dark"] .emSenderName {
    background: linear-gradient(135deg, #fb923c, #f97316);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.emAddComment input.button {
    margin-bottom: 10px;
}

/* Comments rules link - simple text */
.emAddComment a.next-button[href*="comments-rules"] {
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
    margin-left: 20px;
    color: #64748b;
    text-decoration: underline;
    font-size: 0.9rem;
    font-weight: normal;
    display: inline;
    transition: color 0.2s ease;
}

.emAddComment a.next-button[href*="comments-rules"]:hover {
    color: var(--link);
    text-decoration: underline;
    transform: none;
}

[data-theme="dark"] .emAddComment a.next-button[href*="comments-rules"] {
    color: #94a3b8;
}

[data-theme="dark"] .emAddComment a.next-button[href*="comments-rules"]:hover {
    color: var(--link);
}

/* ===== EMOJI MODAL (FIXED) ===== */
.em-emoji-modal {
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 0 16px;
    display: none; /* Hidden by default - opens only on button click */
    align-items: center;
    justify-content: center;
}

.em-emoji-modal.active {
    display: flex;
}

.em-emoji-modal-content {
    background-color: var(--bg-primary);
    border: 1px solid var(--border-default);
    max-width: 420px;
    width: 100%;
    border-radius: var(--radius-lg);
    position: relative;
    max-height: 480px;
    overflow: hidden;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.em-emoji-header {
    padding: var(--spacing-md) 20px;
    position: sticky;
    width: 100%;
    top: 0;
    left: 0;
    background: var(--bg-primary);
    border-bottom: 1px solid var(--border-default);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 600;
    font-size: 1rem;
    color: var(--text-primary);
}

.em-emoji-close {
    color: var(--text-secondary);
    font-size: 24px;
    font-weight: bold;
    cursor: pointer;
    border: none;
    background: none;
    padding: var(--spacing-2xs) var(--spacing-xs);
    line-height: 1;
    transition: color 0.2s ease;
}

.em-emoji-close:hover {
    color: var(--text-primary);
}

.emoji-category {
    border-bottom: 1px solid var(--border-default);
    padding: var(--spacing-md);
}

.emoji-category:last-child {
    border-bottom: none;
}

.emoji-categories-wrapper {
    max-height: 360px;
    overflow-y: auto;
}

.emoji-category h5 {
    padding-left: 0;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 12px;
}

.emoji-group {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: var(--spacing-xs);
}

.em-emoji-btn {
    font-size: 1.5rem;
    border: none;
    background: none;
    cursor: pointer;
    padding: var(--spacing-xs);
    transition: all 0.2s ease;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
}

.em-emoji-btn:hover {
    transform: scale(1.2);
    background: var(--bg-secondary);
}

.em-emoji-trigger {
    position: absolute;
    right: 12px;
    bottom: 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-default);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    font-size: 1.25rem;
    cursor: pointer;
    z-index: 10;
    color: var(--text-secondary);
    padding: var(--spacing-xs) 10px;
    border-radius: var(--radius-md);
    transition: all 0.2s ease;
    line-height: 1;
}

.em-emoji-trigger:hover {
    color: var(--text-primary);
    background: var(--bg-primary);
    transform: scale(1.05);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* Textarea wrapper for positioning emoji trigger */
.textarea-wrapper {
    position: relative;
    margin-bottom: 16px;
    display: block;
}

.emAddComment .textarea-wrapper {
    margin-bottom: 0;
}

/* ===== MODERN COMMENT FORM DESIGN ===== */
.emAddComment {
    /* NO background/border - inherits from parent section */
    margin-top: 24px;
    clear: both;
}

.emAddComment h3 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 20px;
}

.emAddComment .form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-md);
    margin-bottom: 16px;
}

.emAddComment .form-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.emAddComment label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary);
    display: block;
}

/* Input groups with icons */
.emAddComment .input-group {
    position: relative;
    margin-bottom: 16px;
}

.emAddComment .input-group-icon {
    position: relative;
}

.emAddComment .input-group-icon .input-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-secondary);
    font-size: 1rem;
    pointer-events: none;
    z-index: 2;
}

.emAddComment .input-group-icon input[type="text"],
.emAddComment .input-group-icon input[type="email"] {
    width: 100%;
    padding: 10px 14px 10px 44px; /* Left padding for icon */
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 0.9375rem;
    font-family: inherit;
    transition: all 0.2s ease;
}

.emAddComment .input-group-icon input[type="text"]:focus,
.emAddComment .input-group-icon input[type="email"]:focus {
    outline: none;
    border-color: var(--link);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Textarea (no icon) */
.emAddComment textarea {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: 0.9375rem;
    font-family: inherit;
    transition: all 0.2s ease;
}

.emAddComment textarea:focus {
    outline: none;
    border-color: var(--link);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.emAddComment textarea {
    min-height: 120px;
    resize: vertical;
    padding-right: 50px; /* Space for emoji button */
}

.emAddComment .textarea-wrapper textarea {
    padding-right: 50px; /* Ensure space for emoji button */
}

.emAddComment .button-group {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
    margin-top: 16px;
}

.emAddComment input.button,
.emAddComment button[type="submit"] {
    background: var(--link);
    color: #ffffff;
    border: none;
    border-radius: var(--radius-md);
    padding: var(--spacing-sm) var(--spacing-lg);
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.emAddComment input.button:hover,
.emAddComment button[type="submit"]:hover {
    background: var(--link-hover);
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
    transform: translateY(-1px);
}

.emAddComment input.button:active,
.emAddComment button[type="submit"]:active {
    transform: translateY(0);
}

/* Comments rules link - modern style */
.emAddComment a[href*="comments-rules"] {
    font-size: 0.875rem;
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.emAddComment a[href*="comments-rules"]:hover {
    color: var(--link);
}

.emAddComment a[href*="comments-rules"]::before {
    content: "📋";
    font-size: 1rem;
}

/* Responsive adjustments */
@media (max-width: 640px) {
    .emAddComment .form-row {
        grid-template-columns: 1fr;
    }
    
    .emoji-group {
        grid-template-columns: repeat(6, 1fr);
    }
    
    .emAddComment .button-group {
        flex-direction: column-reverse;
        align-items: stretch;
    }
    
    .emAddComment input.button,
    .emAddComment button[type="submit"] {
        width: 100%;
    }
}

/* ===== COLLAPSIBLE REVIEW FORM ===== */
.em-review-container {
    margin-top: var(--spacing-lg);
}

/* Write a Review Button - Primary CTA */
.em-write-review-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.65rem 1.25rem;
    background: var(--accent-primary);
    color: var(--text-on-accent);
    border: none;
    border-radius: var(--radius-lg);
    font-size: 0.95rem;
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: all var(--transition-fast);
    box-shadow: var(--inset-button), var(--shadow-card);
}

.em-write-review-btn:hover {
    background: var(--accent-secondary);
    box-shadow: var(--inset-button-hover), var(--shadow-card-hover);
    transform: translateY(-1px);
}

.em-write-review-btn:active {
    transform: translateY(0);
    box-shadow: var(--inset-button-active);
}

.em-write-review-btn[aria-expanded="true"] {
    background: var(--text-tertiary);
}

.em-write-review-btn i {
    font-size: 1rem;
}

/* Collapsible Form Container */
.emAddComment.em-form-collapsed {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    margin-top: 0;
    padding: 0;
    transition: max-height 0.35s ease, opacity 0.25s ease, margin-top 0.25s ease;
}

.emAddComment.em-form-expanded {
    max-height: 600px;
    overflow: visible;
    opacity: 1;
    margin-top: var(--spacing-lg);
    transition: max-height 0.4s ease, opacity 0.3s ease 0.1s, margin-top 0.25s ease;
}

/* Inner form wrapper for padding */
.em-form-inner {
    background: var(--surface-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    box-shadow: var(--shadow-card);
}

/* Form Actions Row */
.em-form-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
    margin-top: var(--spacing-md);
    flex-wrap: wrap;
}

/* Submit Button Styling */
.em-submit-btn {
    flex-shrink: 0;
}

/* Rules Link */
.em-rules-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    color: var(--text-tertiary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.em-rules-link:hover {
    color: var(--accent-primary);
}

.em-rules-link i {
    font-size: 0.9rem;
}

/* Override old comment rules link styling */
.em-form-inner a.next-button[href*="comments-rules"] {
    display: none !important; /* Hide old style link, we have new one */
}

/* Mobile Responsive */
@media (max-width: 640px) {
    .em-write-review-btn {
        width: 100%;
        justify-content: center;
    }
    
    .em-form-inner {
        padding: var(--spacing-md);
    }
    
    .em-form-actions {
        flex-direction: column;
        align-items: stretch;
    }
    
    .em-submit-btn {
        width: 100%;
    }
    
    .em-rules-link {
        justify-content: center;
        margin-top: var(--spacing-xs);
    }
}




/* Page-specific overrides */
body.blog-page {
    background: var(--bg-primary);
}

/* Blog Index: Two-column layout with sidebar */
body.blog-page .content-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) clamp(280px, 25vw, 340px);
    gap: var(--content-gap, 1.5rem);
}

body.blog-page .sidebar {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Mobile: Single column */
@media (max-width: 1023px) {
    body.blog-page .content-layout {
        grid-template-columns: 1fr;
    }
    
    body.blog-page .sidebar {
        order: 2;
    }
}

/* Blog listing grid */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: clamp(1.5rem, 3vw, 2rem);
}

/* Single blog post - no sidebar */
body.blog-post-page .content-layout {
    display: block;
    max-width: var(--max-width-narrow, 900px);
    margin: 0 auto;
}

body.blog-post-page .sidebar {
    display: none;
}

/* ===== MODEL CARD (Inside Ranking Articles) ===== */
/* Editorial layout: Name top, then avatar + description side by side */

.model-card {
    display: grid;
    grid-template-columns: 120px 1fr;
    grid-template-rows: auto auto auto;
    gap: 0.25rem 1.25rem;
    margin: 0 0 2rem;
}

/* Flatten content div - children participate in parent grid */
.model-card__content {
    display: contents;
}

/* Model name - full width, ROW 1 */
.model-card__name {
    grid-column: 1 / -1;
    grid-row: 1;
    margin: 0 0 0.15rem 0;
    padding: 0;
    font-size: clamp(1.2rem, 2.2vw, 1.4rem);
    font-weight: 700;
    line-height: 1.3;
}

.model-card__name a {
    color: var(--index-accent, #0C6A93);
    text-decoration: none;
    transition: color 0.2s ease;
}

.model-card__name a:hover {
    color: var(--index-accent-strong, #0A5575);
    text-decoration: underline;
}

/* Avatar - left column, ROW 2, aligned TOP */
.model-card__avatar {
    grid-column: 1;
    grid-row: 2;
    align-self: start;
    margin: 0;
    padding: 0;
    width: 120px;
    height: auto;
    aspect-ratio: 4 / 3;
    border-radius: var(--radius-md, 8px);
    object-fit: cover;
    box-shadow: var(--shadow-sm, 0 2px 4px rgba(0,0,0,0.1));
    background: var(--bg-tertiary, #eee);
    display: block;
}

/* Description - right column, ROW 2, aligned TOP with avatar */
.model-card__description {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    margin: 0;
    padding: 0;
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--text-secondary, #666);
}

/* Stats - full width, ROW 3 */
.model-card__stats {
    grid-column: 1 / -1;
    grid-row: 3;
    font-size: 0.85rem;
    color: var(--text-tertiary, #999);
}

/* Dark theme adjustments */
[data-theme="dark"] .model-card__avatar {
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

[data-theme="dark"] .model-card__name a {
    color: var(--index-accent, #0C6A93);
}

/* Mobile responsive - stack vertically */
@media (max-width: 575px) {
    .model-card {
        grid-template-columns: 1fr;
    }
    
    .model-card__name {
        grid-column: 1;
        grid-row: 1;
    }
    
    .model-card__avatar {
        grid-column: 1;
        grid-row: 2;
        width: 100%;
        max-width: 180px;
    }
    
    .model-card__description {
        grid-column: 1;
        grid-row: 3;
    }
    
    .model-card__stats {
        grid-column: 1;
        grid-row: 4;
    }
}

/* Models Grid Container */
.models-grid {
    margin-top: 1.5rem;
}