/* ============================================
   Luxury Blog Show Page - Premium Design
   ============================================ */

/* Luxury Header with Space Background */
.blog-luxury-header {
    position: relative;
    width: 100%;
    min-height: 500px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6rem 2rem;
    overflow: hidden;
    background: linear-gradient(135deg, #0a0e27 0%, #1a1f3a 50%, #0f1419 100%);
}

.blog-luxury-header-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    z-index: 1;
}

/* Animated Stars Background */
.blog-luxury-stars {
    position: absolute;
    width: 2px;
    height: 2px;
    background: white;
    border-radius: 50%;
    animation: twinkle 3s infinite;
}

.blog-luxury-stars:nth-child(1) {
    top: 20%;
    left: 10%;
    animation-delay: 0s;
    box-shadow: 
        100px 200px white,
        300px 100px white,
        500px 300px white,
        700px 150px white,
        900px 250px white,
        1100px 50px white,
        200px 400px white,
        400px 350px white,
        600px 450px white,
        800px 380px white,
        1000px 420px white,
        1200px 300px white;
}

.blog-luxury-stars:nth-child(2) {
    top: 40%;
    left: 20%;
    animation-delay: 1s;
    box-shadow: 
        150px 100px white,
        350px 250px white,
        550px 150px white,
        750px 300px white,
        950px 200px white,
        1150px 350px white,
        250px 300px white,
        450px 200px white,
        650px 400px white,
        850px 250px white,
        1050px 150px white,
        1250px 400px white;
}

.blog-luxury-stars:nth-child(3) {
    top: 60%;
    left: 30%;
    animation-delay: 2s;
    box-shadow: 
        200px 150px white,
        400px 300px white,
        600px 200px white,
        800px 350px white,
        1000px 250px white,
        1200px 400px white,
        300px 250px white,
        500px 150px white,
        700px 300px white,
        900px 200px white,
        1100px 350px white,
        1300px 250px white;
}

@keyframes twinkle {
    0%, 100% {
        opacity: 0.3;
        transform: scale(1);
    }
    50% {
        opacity: 1;
        transform: scale(1.2);
    }
}

.blog-luxury-header-content {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 1200px;
    width: 100%;
}

.blog-luxury-title {
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    font-weight: 900;
    color: #ffffff;
    margin-bottom: 2rem;
    line-height: 1.2;
    text-shadow: 
        0 0 20px rgba(255, 255, 255, 0.5),
        0 0 40px rgba(102, 126, 234, 0.3),
        0 0 60px rgba(102, 126, 234, 0.2);
    letter-spacing: -0.02em;
}

.blog-luxury-tags {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 3rem;
}

.blog-luxury-tag {
    display: inline-flex;
    align-items: center;
    padding: 0.625rem 1.25rem;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 30px;
    color: #ffffff;
    text-decoration: none;
    font-size: 0.9375rem;
    font-weight: 600;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.blog-luxury-tag:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-3px);
    box-shadow: 0 6px 25px rgba(102, 126, 234, 0.4);
    border-color: rgba(102, 126, 234, 0.5);
}

.blog-luxury-meta {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2.5rem;
    flex-wrap: wrap;
    color: rgba(255, 255, 255, 0.9);
    font-size: 1rem;
}

.blog-luxury-author,
.blog-luxury-date,
.blog-luxury-views {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.75rem 1.5rem;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border-radius: 25px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.blog-luxury-author i,
.blog-luxury-date i,
.blog-luxury-views i {
    font-size: 1.125rem;
    color: #667eea;
}

/* Reading Progress Bar */
.blog-reading-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: rgba(0, 0, 0, 0.1);
    z-index: 9999;
}

.blog-reading-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
    width: 0%;
    transition: width 0.1s ease;
    box-shadow: 0 0 10px rgba(102, 126, 234, 0.5);
}

/* Full Width Content Body - Professional UI/UX */
.blog-luxury-content {
    width: 100%;
    padding: 3rem 2rem;
    background: var(--bg-primary, #ffffff);
    position: relative;
    overflow: hidden;
}

/* Summary Box */
.blog-luxury-summary-box {
    max-width: 100%;
    margin: 0 auto 3rem;
    padding: 2.5rem 1rem;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--border-color, #e5e7eb);
}

.blog-luxury-summary-text {
    font-size: 1.25rem;
    line-height: 2;
    color: var(--text-primary, #374151);
    font-weight: 400;
    text-align: justify;
    margin: 0;
}

/* Content Container with optimal reading width */
.blog-luxury-content-inner {
    width: 100%;
    max-width: 100%;
    margin: 0 auto;
    padding: 3rem 1rem;
    font-family: 'Vazir', 'IranYekanX', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 1.1875rem;
    line-height: 2;
    color: var(--text-primary, #1f2937);
    position: relative;
    background: var(--bg-primary, #ffffff);
    border-radius: 16px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--border-color, #e5e7eb);
}

/* First paragraph - larger and emphasized */
.blog-luxury-content-inner > p:first-of-type {
    font-size: 1.375rem;
    line-height: 2.2;
    color: var(--text-primary, #111827);
    margin-bottom: 2.5rem;
    padding-bottom: 2rem;
    border-bottom: 2px solid var(--border-color, #e5e7eb);
    font-weight: 400;
    text-align: justify;
    letter-spacing: 0.01em;
}

/* Regular paragraphs */
.blog-luxury-content-inner p {
    margin-bottom: 2rem;
    text-align: justify;
    color: var(--text-primary, #374151);
    font-weight: 300;
    letter-spacing: 0.01em;
    word-spacing: 0.1em;
}

/* Headings with luxury styling */
.blog-luxury-content-inner h2 {
    font-size: 2.75rem;
    font-weight: 900;
    margin-top: 4.5rem;
    margin-bottom: 2rem;
    color: var(--text-primary, #111827);
    line-height: 1.3;
    padding: 1.5rem 0;
    padding-right: 1.5rem;
    position: relative;
    border-bottom: none;
}

.blog-luxury-content-inner h2::before {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
    border-radius: 3px;
}

.blog-luxury-content-inner h2:first-of-type {
    margin-top: 0;
}

.blog-luxury-content-inner h3 {
    font-size: 2rem;
    font-weight: 700;
    margin-top: 3.5rem;
    margin-bottom: 1.5rem;
    color: var(--text-primary, #111827);
    line-height: 1.4;
    padding-right: 1.25rem;
    position: relative;
}

.blog-luxury-content-inner h3::before {
    content: '▸';
    position: absolute;
    right: 0;
    color: #667eea;
    font-size: 1.5rem;
    font-weight: bold;
}

.blog-luxury-content-inner h4 {
    font-size: 1.625rem;
    font-weight: 600;
    margin-top: 3rem;
    margin-bottom: 1.25rem;
    color: var(--text-primary, #111827);
    line-height: 1.5;
}

/* Lists with luxury styling */
.blog-luxury-content-inner ul,
.blog-luxury-content-inner ol {
    margin: 2.5rem 0;
    padding-right: 3rem;
    line-height: 2.2;
}

.blog-luxury-content-inner ul li {
    list-style: none;
    position: relative;
    padding-right: 2rem;
    margin-bottom: 1.25rem;
    color: var(--text-primary, #374151);
    font-weight: 300;
}

.blog-luxury-content-inner ul li::before {
    content: '';
    position: absolute;
    right: 0;
    top: 0.75rem;
    width: 10px;
    height: 10px;
    border: 2px solid #667eea;
    border-radius: 50%;
    background: transparent;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.blog-luxury-content-inner ol {
    counter-reset: list-counter;
}

.blog-luxury-content-inner ol li {
    counter-increment: list-counter;
    list-style: none;
    position: relative;
    padding-right: 3.5rem;
    margin-bottom: 1.25rem;
    color: var(--text-primary, #374151);
    font-weight: 300;
}

.blog-luxury-content-inner ol li::before {
    content: counter(list-counter);
    position: absolute;
    right: 0;
    top: 0;
    width: 32px;
    height: 32px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

/* Blockquote with luxury design */
.blog-luxury-content-inner blockquote {
    border-right: 6px solid #667eea;
    padding: 2rem 2.5rem;
    margin: 3.5rem 0;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-radius: 16px;
    font-style: italic;
    color: var(--text-secondary, #6b7280);
    font-size: 1.25rem;
    line-height: 2;
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.08);
    position: relative;
    font-weight: 400;
}

.blog-luxury-content-inner blockquote::before {
    content: '"';
    position: absolute;
    top: -10px;
    right: 20px;
    font-size: 5rem;
    color: #667eea;
    opacity: 0.2;
    font-family: Georgia, serif;
}

/* Code blocks with luxury styling */
.blog-luxury-content-inner code {
    background: linear-gradient(135deg, #0d1117 0%, #161b22 100%);
    padding: 0.375rem 0.75rem;
    border-radius: 8px;
    font-size: 0.875em;
    color: #58a6ff;
    font-family: 'JetBrains Mono', 'Fira Code', 'Courier New', monospace;
    font-weight: 500;
    border: 1px solid rgba(88, 166, 255, 0.2);
}

.blog-luxury-content-inner pre {
    background: linear-gradient(135deg, #0d1117 0%, #161b22 100%);
    padding: 2rem;
    border-radius: 16px;
    overflow-x: auto;
    margin: 3.5rem 0;
    border: 1px solid #21262d;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
    position: relative;
}

.blog-luxury-content-inner pre::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 3px;
    background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
    border-radius: 16px 16px 0 0;
}

.blog-luxury-content-inner pre code {
    background: transparent;
    padding: 0;
    color: #c9d1d9;
    font-size: 0.9375rem;
    line-height: 1.8;
    border: none;
}

/* Tables with luxury design */
.blog-luxury-content-inner table {
    width: 100%;
    border-collapse: collapse;
    margin: 3.5rem 0;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.1);
    background: var(--bg-card, #ffffff);
}

.blog-luxury-content-inner table th,
.blog-luxury-content-inner table td {
    padding: 1.25rem 1.5rem;
    text-align: right;
    border-bottom: 1px solid var(--border-color, #e5e7eb);
}

.blog-luxury-content-inner table th {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    font-weight: 700;
    color: #ffffff;
    font-size: 1.0625rem;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.blog-luxury-content-inner table tr {
    transition: all 0.2s;
}

.blog-luxury-content-inner table tr:hover {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    transform: scale(1.01);
}

.blog-luxury-content-inner table tr:last-child td {
    border-bottom: none;
}

/* ===== CSS مربوط به عکس‌ها - کامنت شده برای تست ===== */
/* 
.blog-luxury-content-inner img {
    max-width: 400px;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    border-radius: 20px;
    margin: 2rem auto;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
    transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease;
    display: block;
}

.blog-luxury-content-inner img:hover {
    transform: scale(1.02);
    box-shadow: 0 16px 50px rgba(0, 0, 0, 0.2);
}

/* Fix broken images */
.blog-luxury-content-inner img[src=""],
.blog-luxury-content-inner img:not([src]),
.blog-luxury-content-inner img[src^="about:"] {
    display: none !important;
}

/* Loading state for images */
.blog-luxury-content-inner img:not([src]):not([src=""]) {
    background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
}

.blog-luxury-content-inner img[src]:not([src=""]) {
    background: transparent;
}

/* Center aligned images */
.blog-luxury-content-inner p[style*="text-align: center"] img,
.blog-luxury-content-inner p[style*="text-align:center"] img,
.blog-luxury-content-inner div[style*="text-align: center"] img,
.blog-luxury-content-inner div[style*="text-align:center"] img {
    margin: 2rem auto;
    display: block;
    max-width: 400px;
    aspect-ratio: 3 / 4;
    object-fit: cover;
}

/* Images inside paragraphs */
.blog-luxury-content-inner p img {
    margin: 2rem auto;
    display: block;
    max-width: 400px;
    aspect-ratio: 3 / 4;
    object-fit: cover;
}

/* Images inside divs */
.blog-luxury-content-inner div img {
    margin: 2rem auto;
    display: block;
    max-width: 400px;
    aspect-ratio: 3 / 4;
    object-fit: cover;
}
*/

/* Links with luxury styling - no box, just elegant underline */
.blog-luxury-content-inner a {
    color: #667eea;
    text-decoration: none;
    background: linear-gradient(180deg, transparent 0%, transparent 90%, rgba(102, 126, 234, 0.2) 90%, rgba(102, 126, 234, 0.2) 100%);
    background-size: 100% 2px;
    background-repeat: no-repeat;
    background-position: bottom;
    transition: all 0.3s ease;
    font-weight: 500;
    padding-bottom: 2px;
    position: relative;
}

.blog-luxury-content-inner a:hover {
    color: #764ba2;
    background: linear-gradient(180deg, transparent 0%, transparent 85%, rgba(118, 75, 162, 0.3) 85%, rgba(118, 75, 162, 0.3) 100%);
    background-size: 100% 3px;
    transform: translateY(-1px);
}

.blog-luxury-content-inner a::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
    transition: width 0.3s ease;
}

.blog-luxury-content-inner a:hover::after {
    width: 100%;
}

/* Broken link styling */
.blog-broken-link {
    color: #ef4444;
    text-decoration: line-through;
    opacity: 0.7;
}

/* Image error placeholder */
.blog-image-error {
    padding: 2rem;
    text-align: center;
    color: #9ca3af;
    background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
    border-radius: 12px;
    margin: 2rem 0;
    font-size: 0.875rem;
}

.blog-image-error i {
    font-size: 2rem;
    display: block;
    margin-bottom: 0.5rem;
    opacity: 0.5;
}

/* Internal Links Section */
.blog-internal-links {
    margin-top: 4rem;
    padding-top: 3rem;
    border-top: 2px solid var(--border-color, #e5e7eb);
}

.blog-internal-links-title {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: var(--text-primary, #111827);
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.blog-internal-links-title i {
    color: #667eea;
}

.blog-internal-links-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.blog-internal-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    color: #667eea;
    text-decoration: none;
    border-radius: 12px;
    font-weight: 600;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.blog-internal-link:hover {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
    border-color: #667eea;
}

.blog-internal-link i {
    transition: transform 0.3s;
}

.blog-internal-link:hover i {
    transform: translateX(-3px);
}

/* Horizontal rule */
.blog-luxury-content-inner hr {
    border: none;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, #667eea 50%, transparent 100%);
    margin: 4rem 0;
    border-radius: 2px;
}

/* Strong and emphasis - fix for center alignment */
.blog-luxury-content-inner strong {
    font-weight: 700;
    color: var(--text-primary, #111827);
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    padding: 2px 6px;
    border-radius: 4px;
    text-decoration: none !important;
    border-bottom: none !important;
}

/* Center alignment with bold support */
.blog-luxury-content-inner p[style*="text-align: center"],
.blog-luxury-content-inner p[style*="text-align:center"],
.blog-luxury-content-inner p[style*="text-align:center;"],
.blog-luxury-content-inner p[style*="text-align: center;"] {
    text-align: center !important;
    display: block;
    width: 100%;
}

.blog-luxury-content-inner p[style*="text-align: center"] strong,
.blog-luxury-content-inner p[style*="text-align:center"] strong,
.blog-luxury-content-inner p[style*="text-align:center;"] strong,
.blog-luxury-content-inner p[style*="text-align: center;"] strong {
    display: inline;
    font-weight: 700 !important;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    padding: 2px 6px;
    border-radius: 4px;
}

/* Support for div with center alignment */
.blog-luxury-content-inner div[style*="text-align: center"],
.blog-luxury-content-inner div[style*="text-align:center"] {
    text-align: center !important;
    display: block;
    width: 100%;
}

.blog-luxury-content-inner div[style*="text-align: center"] strong,
.blog-luxury-content-inner div[style*="text-align:center"] strong {
    display: inline;
    font-weight: 700 !important;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    padding: 2px 6px;
    border-radius: 4px;
}

.blog-luxury-content-inner em {
    font-style: italic;
    color: var(--text-secondary, #6b7280);
}

/* Related Posts Cards */
.blog-luxury-related {
    width: 100%;
    padding: 5rem 2rem;
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
}

.blog-luxury-related-container {
    max-width: 1400px;
    margin: 0 auto;
}

.blog-luxury-related-title {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 3rem;
    color: var(--text-primary, #111827);
    text-align: center;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.blog-luxury-related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 2rem;
}

.blog-luxury-related-card {
    background: var(--bg-card, #ffffff);
    border-radius: 20px;
    padding: 2rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 1px solid var(--border-color, #e5e7eb);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.blog-luxury-related-card::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    transition: width 0.3s ease;
}

.blog-luxury-related-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 30px rgba(102, 126, 234, 0.2);
    border-color: #667eea;
}

.blog-luxury-related-card:hover::before {
    width: 100%;
    opacity: 0.05;
}

.blog-luxury-related-card-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 1.5rem;
    color: var(--text-primary, #111827);
    line-height: 1.5;
    position: relative;
    z-index: 1;
}

.blog-luxury-related-card-title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.3s;
}

.blog-luxury-related-card:hover .blog-luxury-related-card-title a {
    color: #667eea;
}

.blog-luxury-related-card-views {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-secondary, #6b7280);
    font-size: 0.9375rem;
    position: relative;
    z-index: 1;
}

.blog-luxury-related-card-views i {
    color: #667eea;
}

/* Full Width Comments Section */
.blog-luxury-comments {
    width: 100%;
    padding: 5rem 2rem;
    background: var(--bg-primary, #ffffff);
}

.blog-luxury-comments-container {
    max-width: 1400px;
    margin: 0 auto;
}

.blog-luxury-comments-title {
    font-size: 2.5rem;
    font-weight: 800;
    margin-bottom: 3rem;
    color: var(--text-primary, #111827);
    text-align: center;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.blog-luxury-alert {
    padding: 1rem 1.5rem;
    border-radius: 12px;
    margin-bottom: 2rem;
    font-weight: 600;
}

.blog-luxury-alert.success {
    background: #d1fae5;
    color: #065f46;
    border: 1px solid #6ee7b7;
}

.blog-luxury-comment-form {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    padding: 2.5rem;
    border-radius: 20px;
    margin-bottom: 3rem;
    border: 1px solid var(--border-color, #e5e7eb);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

.blog-luxury-comment-label {
    display: block;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--text-primary, #111827);
    font-size: 1.125rem;
}

.blog-luxury-comment-form textarea {
    width: 100%;
    padding: 1.25rem;
    border: 2px solid var(--border-color, #e5e7eb);
    border-radius: 12px;
    font-size: 1rem;
    font-family: inherit;
    resize: vertical;
    min-height: 150px;
    background: var(--bg-card, #ffffff);
    color: var(--text-primary, #111827);
    transition: all 0.3s;
}

.blog-luxury-comment-form textarea:focus {
    outline: none;
    border-color: #667eea;
    box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
}

.blog-luxury-error {
    color: #dc2626;
    font-size: 0.875rem;
    margin-top: 0.5rem;
}

.blog-luxury-comment-submit {
    margin-top: 1.5rem;
    padding: 1rem 2.5rem;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 12px;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

.blog-luxury-comment-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 25px rgba(102, 126, 234, 0.4);
}

.blog-luxury-comment-login {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    padding: 2rem;
    border-radius: 12px;
    text-align: center;
    margin-bottom: 2rem;
    color: var(--text-secondary, #6b7280);
    border: 1px solid var(--border-color, #e5e7eb);
}

.blog-luxury-comment-login a {
    color: #667eea;
    text-decoration: none;
    font-weight: 700;
}

.blog-luxury-comment-login a:hover {
    text-decoration: underline;
}

.blog-luxury-comments-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.blog-luxury-comment-item {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    padding: 2rem;
    border-radius: 16px;
    border: 1px solid var(--border-color, #e5e7eb);
    transition: all 0.3s;
    position: relative;
    overflow: hidden;
}

.blog-luxury-comment-item::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 4px;
    height: 100%;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.blog-luxury-comment-item:hover {
    transform: translateX(-5px);
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.1);
}

.blog-luxury-comment-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.blog-luxury-comment-author {
    font-weight: 700;
    color: var(--text-primary, #111827);
    font-size: 1.125rem;
}

.blog-luxury-comment-date {
    font-size: 0.875rem;
    color: var(--text-secondary, #6b7280);
}

.blog-luxury-comment-text {
    color: var(--text-primary, #1f2937);
    line-height: 1.8;
    font-size: 1rem;
    margin: 0;
}

.blog-luxury-empty {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--text-secondary, #6b7280);
}

.blog-luxury-empty p {
    font-size: 1.125rem;
}

/* Dark Mode */
[data-theme="dark"] .blog-luxury-content {
    background: #0f172a;
}

[data-theme="dark"] .blog-luxury-content-inner {
    color: #e2e8f0;
}

[data-theme="dark"] .blog-luxury-content-inner > p:first-of-type {
    color: #f8fafc;
    border-bottom-color: #374151;
}

[data-theme="dark"] .blog-luxury-content-inner p {
    color: #e2e8f0;
}

[data-theme="dark"] .blog-luxury-content-inner h2,
[data-theme="dark"] .blog-luxury-content-inner h3,
[data-theme="dark"] .blog-luxury-content-inner h4 {
    color: #f8fafc;
}

[data-theme="dark"] .blog-luxury-content-inner h2::before {
    background: linear-gradient(180deg, #60a5fa 0%, #a78bfa 100%);
}

[data-theme="dark"] .blog-luxury-content-inner h3::before {
    color: #60a5fa;
}

[data-theme="dark"] .blog-luxury-content-inner ul li::before {
    border-color: #60a5fa;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.1);
}

[data-theme="dark"] .blog-luxury-content-inner ol li::before {
    background: linear-gradient(135deg, #60a5fa 0%, #a78bfa 100%);
    box-shadow: 0 4px 12px rgba(96, 165, 250, 0.3);
}

[data-theme="dark"] .blog-luxury-content-inner ul li,
[data-theme="dark"] .blog-luxury-content-inner ol li {
    color: #e2e8f0;
}

[data-theme="dark"] .blog-luxury-content-inner blockquote {
    background: linear-gradient(135deg, #1f2937 0%, #374151 100%);
    color: #cbd5e1;
    border-right-color: #60a5fa;
}

[data-theme="dark"] .blog-luxury-content-inner blockquote::before {
    color: #60a5fa;
}

[data-theme="dark"] .blog-luxury-content-inner code {
    background: linear-gradient(135deg, #0d1117 0%, #161b22 100%);
    border-color: rgba(88, 166, 255, 0.3);
}

[data-theme="dark"] .blog-luxury-content-inner pre {
    background: linear-gradient(135deg, #0d1117 0%, #161b22 100%);
    border-color: #21262d;
}

[data-theme="dark"] .blog-luxury-content-inner pre::before {
    background: linear-gradient(90deg, #60a5fa 0%, #a78bfa 100%);
}

[data-theme="dark"] .blog-luxury-content-inner table {
    background: #1f2937;
}

[data-theme="dark"] .blog-luxury-content-inner table th {
    background: linear-gradient(135deg, #60a5fa 0%, #a78bfa 100%);
}

[data-theme="dark"] .blog-luxury-content-inner table tr:hover {
    background: linear-gradient(135deg, #374151 0%, #4b5563 100%);
}

[data-theme="dark"] .blog-luxury-content-inner a {
    color: #60a5fa;
}

[data-theme="dark"] .blog-luxury-content-inner a:hover {
    color: #93c5fd;
    background: linear-gradient(180deg, transparent 0%, transparent 85%, rgba(96, 165, 250, 0.3) 85%, rgba(96, 165, 250, 0.3) 100%);
    background-size: 100% 3px;
}

[data-theme="dark"] .blog-luxury-summary-box {
    background: linear-gradient(135deg, #1f2937 0%, #374151 100%);
    border-color: #4b5563;
}

[data-theme="dark"] .blog-luxury-summary-text {
    color: #f3f4f6;
}

[data-theme="dark"] .blog-luxury-content-inner {
    background: #1f2937;
    border-color: #4b5563;
}

[data-theme="dark"] .blog-internal-links {
    border-color: #4b5563;
}

[data-theme="dark"] .blog-internal-links-title {
    color: #f3f4f6;
}

[data-theme="dark"] .blog-internal-link {
    background: linear-gradient(135deg, #1f2937 0%, #374151 100%);
    border-color: #4b5563;
    color: #60a5fa;
}

[data-theme="dark"] .blog-internal-link:hover {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

[data-theme="dark"] .blog-reading-progress {
    background: rgba(255, 255, 255, 0.1);
}

/* Responsive Design */
@media (max-width: 768px) {
    .blog-luxury-content {
        padding: 2rem 0.5rem;
    }
    
    .blog-luxury-summary-box {
        padding: 2rem 1rem;
        margin-bottom: 2rem;
    }
    
    .blog-luxury-content-inner {
        padding: 2rem 1rem;
        font-size: 1rem;
        line-height: 1.8;
    }
    
    .blog-luxury-content-inner h2 {
        font-size: 2rem;
        margin-top: 3rem;
        margin-bottom: 1.5rem;
    }
    
    .blog-luxury-content-inner h3 {
        font-size: 1.5rem;
        margin-top: 2.5rem;
        margin-bottom: 1rem;
    }
    
    /* CSS مربوط به عکس - کامنت شده برای تست
    .blog-luxury-content-inner img {
        margin: 2rem auto;
        border-radius: 12px;
    }
    */
    
    .blog-internal-links {
        margin-top: 3rem;
        padding-top: 2rem;
    }
    
    .blog-internal-links-grid {
        flex-direction: column;
    }
    
    .blog-internal-link {
        width: 100%;
        justify-content: center;
    }
}

[data-theme="dark"] .blog-luxury-content-inner strong {
    color: #f8fafc;
    background: linear-gradient(135deg, rgba(96, 165, 250, 0.15) 0%, rgba(167, 139, 250, 0.15) 100%);
    text-decoration: none !important;
    border-bottom: none !important;
}

[data-theme="dark"] .blog-luxury-content-inner hr {
    background: linear-gradient(90deg, transparent 0%, #60a5fa 50%, transparent 100%);
}

[data-theme="dark"] .blog-luxury-related {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

[data-theme="dark"] .blog-luxury-related-title {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

[data-theme="dark"] .blog-luxury-related-card {
    background: #1f2937;
    border-color: #374151;
}

[data-theme="dark"] .blog-luxury-related-card-title {
    color: #f8fafc;
}

[data-theme="dark"] .blog-luxury-comments {
    background: #0f172a;
}

[data-theme="dark"] .blog-luxury-comments-title {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

[data-theme="dark"] .blog-luxury-comment-form {
    background: linear-gradient(135deg, #1f2937 0%, #374151 100%);
    border-color: #4b5563;
}

[data-theme="dark"] .blog-luxury-comment-form textarea {
    background: #0f172a;
    border-color: #4b5563;
    color: #e2e8f0;
}

[data-theme="dark"] .blog-luxury-comment-item {
    background: linear-gradient(135deg, #1f2937 0%, #374151 100%);
    border-color: #4b5563;
}

[data-theme="dark"] .blog-luxury-comment-author {
    color: #f8fafc;
}

[data-theme="dark"] .blog-luxury-comment-text {
    color: #e2e8f0;
}

/* Responsive */
@media (max-width: 1024px) {
    .blog-luxury-content-inner {
        padding: 4rem 3rem;
    }
}

@media (max-width: 768px) {
    .blog-luxury-header {
        min-height: 400px;
        padding: 4rem 1.5rem;
    }

    .blog-luxury-title {
        font-size: 2rem;
    }

    .blog-luxury-meta {
        gap: 1rem;
        font-size: 0.875rem;
    }

    .blog-luxury-content-inner {
        padding: 3rem 1.5rem;
        font-size: 1.0625rem;
        line-height: 1.9;
    }

    .blog-luxury-content-inner > p:first-of-type {
        font-size: 1.25rem;
        line-height: 2;
        padding-bottom: 1.5rem;
        margin-bottom: 2rem;
    }

    .blog-luxury-content-inner h2 {
        font-size: 2rem;
        margin-top: 3rem;
        padding-right: 1rem;
    }

    .blog-luxury-content-inner h2::before {
        width: 4px;
    }

    .blog-luxury-content-inner h3 {
        font-size: 1.625rem;
        margin-top: 2.5rem;
        padding-right: 1rem;
    }

    .blog-luxury-content-inner h4 {
        font-size: 1.375rem;
        margin-top: 2rem;
    }

    .blog-luxury-content-inner ul,
    .blog-luxury-content-inner ol {
        padding-right: 2rem;
    }

    .blog-luxury-content-inner ul li {
        padding-right: 1.5rem;
    }

    .blog-luxury-content-inner ol li {
        padding-right: 3rem;
    }

    .blog-luxury-content-inner blockquote {
        padding: 1.5rem 1.75rem;
        font-size: 1.125rem;
    }

    .blog-luxury-content-inner pre {
        padding: 1.5rem;
    }

    .blog-luxury-content-inner table {
        font-size: 0.9375rem;
    }

    .blog-luxury-content-inner table th,
    .blog-luxury-content-inner table td {
        padding: 0.875rem 1rem;
    }

    .blog-luxury-related {
        padding: 3rem 1rem;
    }

    .blog-luxury-related-title {
        font-size: 2rem;
    }

    .blog-luxury-related-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .blog-luxury-comments {
        padding: 3rem 1rem;
    }

    .blog-luxury-comments-title {
        font-size: 2rem;
    }

    .blog-luxury-comment-form {
        padding: 1.5rem;
    }
}
.blog-luxury-content,
.blog-luxury-content-inner {
    overflow: hidden;          /* این خط جادویی همه چیز رو درست می‌کنه */
    border-radius: 16px;       /* اختیاری: گوشه‌های گرد حفظ بشه */
}

/* اگر نمی‌خوای overflow: hidden باشه (چون سایه عکس رو قطع می‌کنه)، این روش بهتره: */
.blog-luxury-content-inner {
    overflow-x: auto;          /* فقط افقی اسکرول بده اگر عکس خیلی بزرگ باشه */
    overflow-y: visible;
    -webkit-overflow-scrolling: touch; /* برای اسکرول نرم در موبایل */
}