/*
Theme Name: blog
Theme URI: https://www.linkedin.com/in/m-gakhramanian/
Author: Mehdi Ghahramanian
Description: Super Fast Dynamic Pro Theme
Version: 3.2
License: GNU General Public License v2
Tags: blog, right-sidebar, rtl
Text Domain: Linkedin
*/

/* 1. FONT DEFINITION */
@font-face {
    font-family: 'IRANYekanX';
    src: url('assets/fonts/IRANYekanX-Regular.woff2') format('woff2'),
         url('assets/fonts/IRANYekanX-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* 2. VARIABLES */
:root {
    --color-primary: #00A88E;
    --bg-body: #cafff6;
    --bg-card: #FFFFFF;
    --color-text: #2C2C2C;
    --color-meta: #8A8A9F;
    --color-border: #EAEAEA;
    --gradient-cta: linear-gradient(135deg, #9155FD 0%, #C549B2 100%);
    --shadow-card: 0 8px 24px rgba(0, 0, 0, 0.04);
    --radius-xl: 20px;
    --radius-md: 12px;
    --container: 1240px;
}

/* 3. RESET & TYPOGRAPHY */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #1D1D1B; }
::-webkit-scrollbar-thumb { background: #29CCB1; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #00A88E; }
html { scrollbar-color: #29CCB1 #1D1D1B; scrollbar-width: thin; }

body {
    background-color: #cafff6;
    font-family: 'IRANYekanX', system-ui, -apple-system, sans-serif;
    color: var(--color-text);
    line-height: 1.8;
    direction: rtl;
    text-align: right;
    font-size: 16px;
    overflow-x: hidden;
}

a { text-decoration: none; color: inherit; transition: 0.2s; }
ul { list-style: none; }
img { max-width: 100%; height: auto; display: block; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 20px; }

/* 4. HEADER */
.site-header {
    background: var(--bg-card);
    height: 65px;
    display: flex;
    align-items: center;
    box-shadow: 0 2px 10px rgba(0,0,0,0.03);
    position: sticky;
    top: 0;
    z-index: 100;
}

.header-wrap { display: flex; justify-content: space-between; align-items: center; width: 100%; }
.custom-logo { height: 35px; width: auto; padding-right: 15px; }
.nav-links, .nav-links ul { display: flex; gap: 30px; font-size: 14px; font-weight: 500; color: #555; list-style: none !important; padding: 0; margin: 0; }
.nav-links li { list-style: none !important; }
.nav-links a:hover { color: var(--color-primary); }
.btn-app { border: 1px solid #ddd; padding: 8px 16px; border-radius: 8px; font-size: 13px; color: var(--color-primary); font-weight: 600; }

/* 5. MAIN LAYOUT */
.main-layout { 
    display: grid; 
    grid-template-columns: 1fr 340px; 
    gap: 30px; 
    margin-top: 30px; 
    margin-bottom: 60px; 
    align-items: start; 
}
.content-column { 
	min-width: 0; 
	width: 100%; 
    background-color: #fff;
    border-radius: 15px;
    padding: 20px;
}

/* 6. SINGLE POST */

/* Blue Breadcrumbs */
.breadcrumbs {
    margin: 20px 0;
    font-size: 12px;
    color: var(--color-meta);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    padding-right: 10px;
}
.breadcrumbs a { color: #00A88E; transition: 0.2s; border-bottom: 1px solid transparent; }
.breadcrumbs a:hover { color: #004499; border-bottom: 1px solid #004499; }
.breadcrumbs .sep { margin: 0 2px; color: #ccc; }
.breadcrumbs .current { font-weight: normal; color: #000; }

.post-meta-header { margin-bottom: 25px; }
.post-title { font-size: 28px; font-weight: 800; margin-bottom: 25px; line-height: 1.4; }

/* =========================================
   NEW PROFILE META STYLES (DESIGN MATCH)
   ========================================= */
.meta-container {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* ROW 1: People (Author & Reviewer) */
.post-people-row {
    display: flex;
    align-items: center;
    gap: 20px;
}

.profile-compact {
    display: flex;
    align-items: center;
    gap: 10px;
}

.profile-avatar-wrap {
    flex-shrink: 0;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    overflow: hidden;
    background: #eee;
    border: 3px solid #e0e0e0;
}

.profile-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.profile-role {
    font-size: 12px;
    color: #000; /* Lighter gray for role */
    margin-bottom: 2px;
}

.profile-name {
    font-size: 12px;
    color: #1d315a; /* Bluer color matching screenshot */
    line-height: 1.2;
}

.profile-name:hover {
    color: var(--color-primary);
}

.profile-sep {
    width: 1px;
    height: 40px;
    background-color: #ddd; /* Vertical Divider Line */
}

/* ROW 2: Dates */
.post-meta-dates {
    display: flex;
    gap: 20px;
    font-size: 13px;
    color: #000;
    align-items: center;
    flex-wrap: wrap;
    padding-top: 10px;
    border-top: 1px dashed #eee; /* Subtle separation */
}

.meta-item { display: flex; align-items: center; gap: 6px; }

/* Mobile Profile Layout (Force 1 Row) */
@media (max-width: 576px) {
    .post-people-row {
        width: 100%;
        gap: 10px;
    }
    
    .profile-avatar-wrap {
        width: 35px; /* Slightly smaller on mobile */
        height: 35px;
    }
    
    .profile-role {
        font-size: 11px;
    }
    
    .profile-name {
        font-size: 12px;
    }
    
    .profile-sep {
        height: 30px;
        background: #eee;
        flex-shrink: 0;
    }
    
    /* Dates move to next row naturally via HTML structure, just spacing fix */
    .post-meta-dates {
        font-size: 12px;
        gap: 15px;
    }
}

/* =========================================
   END NEW PROFILE STYLES
   ========================================= */

.author-img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }

/* Featured Snippet Box (Light Blue) */
.featured-snippet-box {
  background-color: #EFF6FB;
  border-right: 5px solid #2191F3;
  border-radius: 12px;
  padding: 20px 25px;
  margin-bottom: 30px;
  color: #002F77;
  font-size: 16px;
  line-height: 1.7;
  font-weight: 500;
  box-shadow: 0 4px 15px rgba(33, 150, 243, 0.1);
}

.featured-wrapper { 
    border-radius: var(--radius-xl); 
    overflow: hidden; 
    box-shadow: var(--shadow-card); 
    margin-bottom: 30px; 
    background-color: #eee; 
    aspect-ratio: 16 / 9; 
    width: 100%; 
    position: relative; 
}
.featured-wrapper img { width: 100%; height: 100%; object-fit: cover; }

/* Content Text & Blue Links */
.entry-content p { margin-bottom: 24px; text-align: justify; color: #444; }
.entry-content h2 { color: #222; margin: 40px 0 20px; font-weight: 700; font-size: 22px; }

/* Blue Links Inside Post Content */
.entry-content p a, .entry-content li a { 
    color: #00A88E; 
    font-weight: 500; 
    transition: all 0.2s ease; 
}
.entry-content p a:hover, .entry-content li a:hover { 
    color: #004499; 
    background-color: rgba(0, 102, 204, 0.05); 
    border-bottom-color: #004499; 
}
/* Exclude CTA button from being blue */
.entry-content a.btn-cta-action { color: #fff; border-bottom: none; background-color: #FF4D80; }

/* 7. SIDEBAR */
.sidebar { width: 100%; }
.widget-card { background: #fff; padding: 24px; border-radius: var(--radius-md); margin-bottom: 24px; box-shadow: var(--shadow-card); }
.widget-title { font-size: 15px; font-weight: 700; margin-bottom: 15px; padding-bottom: 10px; border-bottom: 2px solid #f5f5f5; }
.side-list li { display: flex; gap: 12px; margin-bottom: 15px; align-items: center; }
.side-thumb { width: 60px; height: 60px; border-radius: 10px; object-fit: cover; background: #eee; }
.side-link { font-size: 13px; line-height: 1.5; font-weight: 500; color: #333; }

/* 8. CTA */
.cta-card {
    background: var(--gradient-cta);
    border-radius: var(--radius-xl);
    padding: 30px;
    color: white;
    position: relative;
    margin: 40px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    overflow: hidden;
}
.cta-text h3 { font-size: 22px; margin-bottom: 8px; }
.btn-cta-action { background: #FF4D80; color: #fff; padding: 10px 25px; border-radius: 50px; font-weight: bold; display: inline-block; margin-top: 10px; box-shadow: 0 5px 15px rgba(0,0,0,0.2); }

/* 9. TABLE STYLES */
.entry-content table, .wp-block-table table {
    width: 100%; border-collapse: separate; border-spacing: 0; margin: 30px 0; background: #fff;
    border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-card); font-size: 14px; border: 1px solid var(--color-border);
}
.entry-content thead th, .wp-block-table thead th {
    background-color: var(--color-primary); color: #fff; font-weight: 700; text-align: right; padding: 18px 15px; border-bottom: none; white-space: nowrap;
}
.entry-content td, .wp-block-table td {
    padding: 15px; text-align: right; color: #444; border-bottom: 1px solid #f0f0f0; line-height: 1.6; vertical-align: middle;
}
.entry-content tbody tr:nth-child(even), .wp-block-table tbody tr:nth-child(even) { background-color: #F9F8FD; }
.entry-content tbody tr:hover, .wp-block-table tbody tr:hover { background-color: #F0EBFA; transition: background 0.2s ease; }
.entry-content tbody tr:last-child td { border-bottom: none; }
.wp-block-table, .table-responsive { overflow-x: auto; width: 100%; display: block; -webkit-overflow-scrolling: touch; }
@media (max-width: 768px) { .entry-content table { display: block; width: 100%; overflow-x: auto; white-space: nowrap; } }




/* =========================================
   SPECIAL POST CONTENT STYLES
   ========================================= */

/* 1. MINIMAL QUOTE (With Big Background Icon) */
.entry-content blockquote {
    position: relative; /* Needed for icon positioning */
    background: #FAFAFA; /* Very subtle gray background */
    border-right: 4px solid var(--color-primary);
    border-radius: 12px;
    margin: 35px 0;
    padding: 30px 40px 30px 20px; /* Extra right padding for the icon */
    font-size: 16px;
    font-style: italic;
    color: #555;
    line-height: 1.8;
    z-index: 1;
    overflow: hidden; /* Clips the big icon */
}

/* The Big Transparent Icon */
.entry-content blockquote::before {
    content: '”';
    position: absolute;
    top: -10px;
    right: 10px; /* Top Right corner */
    font-size: 140px;
    line-height: 1;
    font-family: "Times New Roman", serif;
    color: var(--color-primary);
    opacity: 0.08; /* 8% Opacity */
    z-index: -1; /* Behind text */
    pointer-events: none;
}

.entry-content blockquote cite {
    display: block;
    margin-top: 15px;
    font-size: 13px;
    font-weight: 700;
    color: #999;
    font-style: normal;
    letter-spacing: 0.5px;
}


/* 2. MINIMAL NOTE (Clean Warning) */
.pro-note {
    background-color: #FFFCF2; /* Very Pale Cream/Yellow */
    border: 1px solid #F0E6D2; /* Subtle Border */
    border-right: 4px solid #FFC107; /* Gold Accent Line */
    border-radius: 8px;
    padding: 16px 20px;
    margin: 25px 0;
    color: #444;
    font-size: 15px;
    line-height: 1.7;
}

.pro-note strong {
    color: #333;
    font-weight: 700;
}


/* 3. MINIMAL "READ ALSO" LINK */
.pro-read-more {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Text right, Arrow left */
    background: #e7f8ff;
    border: 2px dashed #005382; /* Very Light Border */
    border-radius: 12px;
    padding: 12px 20px;
    margin: 25px 0;
    color: #333 !important; /* Dark Text initially */
    font-size: 15px;
    font-weight: 500;
    transition: all 0.2s ease;
    text-decoration: none !important;
}

/* Hover Effect */
.pro-read-more:hover {
    border-color: var(--color-primary);
    color: var(--color-primary) !important;
    background: #FDFBFF;
}

/* Minimal Arrow Icon */
.pro-read-more::after {
    content: '←'; /* Simple Arrow */
    font-size: 18px;
    color: var(--color-primary);
    transition: transform 0.2s;
}

.pro-read-more:hover::after {
    transform: translateX(-5px); /* Moves arrow slightly on hover */
}


/* =========================================
   FAQ ACCORDION STYLES
   ========================================= */
.faq-section {
    padding-top: 30px;
}

.faq-section h2 {
    font-size: 22px;
    font-weight: 800;
    margin-bottom: 20px;
    color: #333;
}

.faq-item {
    background: #fff;
    border: 1px solid #c9c9c9;
    border-radius: 12px;
    margin-bottom: 15px;
    overflow: hidden;
    transition: 0.3s;
}

.faq-question {
    font-size: 16px;
    font-weight: 700;
    margin: 0;
    padding: 18px 20px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #444;
    transition: 0.2s;
    user-select: none;
}

.faq-question:hover {
    color: var(--color-primary);
    background: #F3F8FD;
}

.faq-icon {
    font-size: 20px;
    color: var(--color-primary);
    font-weight: 300;
    line-height: 1;
    padding: 5px;
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
    background: #F9F9F9;
}

.faq-answer p {
    padding: 20px;
    margin: 0;
    font-size: 15px;
    color: #666;
    line-height: 1.7;
}

/* Active State */
.faq-item.active .faq-question {
    background: #cafff6;; /* Light Purple */
    color: #000;
}

.faq-item.active .faq-icon {
    transform: rotate(45deg); /* Turns + into x */
    transition: 0.2s;
}


/* 10. COMMENTS */
.comments-wrap { background: #fff; padding: 30px; border-radius: var(--radius-xl); margin-top: 40px; box-shadow: var(--shadow-card); }
.comment-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 15px; }
.c-input { width: 100%; padding: 14px; background: #F8F9FA; border: 1px solid #eee; border-radius: 10px; font-family: inherit; box-sizing: border-box; }
.btn-submit { background: #00A88E; color: #fff; border: none; padding: 12px 40px; border-radius: 30px; cursor: pointer; font-weight: bold; font-size: 16px; }

/* 11. RESPONSIVE */
@media (max-width: 992px) {
    .main-layout { grid-template-columns: 1fr; }
    .sidebar { order: 2; }
    .nav-links { display: none; }
    .author-box { flex-direction: column; text-align: center; }
    .cta-card { flex-direction: column; text-align: center; }
    .comment-inputs { grid-template-columns: 1fr; }
    .container { padding: 0 15px; }
    .featured-snippet-box { padding: 15px; font-size: 15px; }
}

/* =========================================
   ARCHIVE GRID STYLES (Screenshot Match)
   ========================================= */

/* 1. The Grid Container */
.post-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 Columns Desktop */
    gap: 24px;
    margin-bottom: 50px;
}

/* 2. The Card */
.grid-card {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.04); /* Soft Shadow */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    border: 1px solid #f0f0f0;
}

.grid-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

/* 3. Image */
.grid-image-wrap {
    position: relative;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10; /* Rectangle ratio */
    overflow: hidden;
    display: contents;
}

.grid-thumb {
    width: 100%;
    height: auto;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.grid-card:hover .grid-thumb {
    transform: scale(1.05); /* Subtle zoom on hover */
}

.grid-thumb-placeholder {
    width: 100%;
    height: 100%;
    background: #eee;
}

/* 4. Card Body */
.grid-body {
    padding: 18px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

/* 5. Meta Info (Date) */
.grid-meta {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: #999;
    margin-bottom: 12px;
}

/* 6. Title */
.grid-title {
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 10px 0;
    line-height: 1.5;
}

.grid-title a {
    color: #2c2c2c;
    text-decoration: none;
    transition: color 0.2s;
}

.grid-title a:hover {
    color: var(--color-primary);
}

/* 7. Excerpt */
.grid-excerpt {
    font-size: 13px;
    color: #666;
    line-height: 1.8;
    margin-bottom: 20px;
    flex-grow: 1; /* Pushes button to bottom */
}

/* 8. Read More Button (Purple Arrow) */
.grid-footer {
    display: flex;
    justify-content: flex-end; /* Align left (RTL) */
}

.btn-read-more {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-primary); /* Purple */
    transition: 0.2s;
}

.btn-read-more .arrow {
    font-size: 16px;
    transition: transform 0.2s;
}

.btn-read-more:hover {
    color: #4a2c8a; /* Darker Purple */
}

.btn-read-more:hover .arrow {
    transform: translateX(-5px); /* Move arrow left */
}

/* 9. PAGINATION */
.pagination-wrap {
    text-align: center;
    margin-top: 40px;
}
.pagination-wrap ul {
    display: inline-flex;
    gap: 10px;
    padding: 0;
}
.pagination-wrap li {
    list-style: none;
}
.pagination-wrap a, .pagination-wrap span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: #fff;
    color: #555;
    font-weight: bold;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    transition: 0.2s;
}
.pagination-wrap a:hover, .pagination-wrap span.current {
    background: var(--color-primary);
    color: #fff;
}



/* =========================================
   NEW FOOTER STYLES (Screenshot Match)
   ========================================= */
.site-footer {
    background-color: #fff;
    border-top: 1px solid #eaeaea;
    padding-top: 40px;
    margin-top: 80px;
    font-size: 14px;
    padding-right: 15px;
    padding-left: 15px;
}

/* --- TOP SECTION --- */
.footer-top {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr; /* Info is wide, links are narrow */
    gap: 40px;
    padding-bottom: 40px;
    border-bottom: 1px solid #f0f0f0;
    align-items: start;
}

/* Info Column */
.footer-logo { margin-bottom: 20px; }
.footer-desc {
    color: #444;
    line-height: 1.8;
    margin-bottom: 20px;
    font-size: 13px;
}
.footer-desc a { color: #0050ab; } /* Blue links in desc */

.footer-certs {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
}
.footer-certs img {
    height: 60px; /* Fixed height for logos */
    width: auto;
    object-fit: contain;
}

/* Links Columns */
.footer-links-col ul { padding: 0; margin: 0; }
.footer-links-col li { list-style: none; margin-bottom: 12px; }
.footer-links-col a {
    color: #333;
    font-weight: 500;
    transition: 0.2s;
}
.footer-links-col a:hover { color: var(--color-primary); }


/* --- BOTTOM SECTION --- */
.footer-bottom {
    display: grid;
    grid-template-columns: 2.5fr 1fr 1fr 1fr; /* Address wider */
    gap: 20px;
    padding: 40px 0;
}

.fb-item h4 {
    font-size: 14px;
    font-weight: 800;
    color: #000;
    margin-bottom: 15px;
}

.fb-item p {
    color: #444;
    line-height: 1.8;
    margin: 0;
    font-size: 13px;
}

/* Social Icons */
.social-icons {
    display: flex;
    gap: 10px;
}
.social-icons a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: #0F1435; /* Dark Navy */
    border-radius: 50%;
    transition: 0.2s;
}
.social-icons svg {
    width: 16px;
    height: 16px;
    fill: #fff;
}
.social-icons a:hover {
    background: var(--color-primary);
    transform: translateY(-2px);
}

/* --- RESPONSIVE FOOTER --- */
@media (max-width: 992px) {
    .footer-top {
        grid-template-columns: 1fr; /* Stack everything */
        text-align: center;
    }
    .footer-certs {
        justify-content: center;
    }
    .footer-logo {
        display: flex;
        justify-content: center;
    }
    
    .footer-bottom {
        grid-template-columns: 1fr; /* Stack everything */
        text-align: center;
        gap: 30px;
    }
    .social-icons {
        justify-content: center;
    }
}

/* =========================================
   RESPONSIVE RULES (Grid Layout)
   ========================================= */

/* Tablet Landscape (3 Columns) */
@media (max-width: 1100px) {
    .post-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Tablet Portrait (2 Columns) */
@media (max-width: 768px) {
    .post-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
}

/* Mobile (1 Column) */
@media (max-width: 480px) {
    .post-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================
   11. RESPONSIVE RULES (MOBILE FOOTER MATCH)
   ========================================= */
@media (max-width: 992px) {
    
    /* --- MAIN LAYOUT --- */
    .main-layout { grid-template-columns: 1fr; }
    .sidebar { order: 2; }
    .nav-links { display: none; }
    .cta-card { flex-direction: column; text-align: center; }
    .container { padding: 0 0px; }

    /* --- FOOTER TOP SECTION (Logo & Links) --- */
    .footer-top {
        grid-template-columns: 1fr 1fr; /* 2 Columns for links */
        gap: 30px 15px;
        text-align: center;
    }

    /* Logo & Description span full width at the top */
    .footer-info-col {
        grid-column: 1 / -1; /* Span across both columns */
        border-bottom: 1px solid #f5f5f5;
        padding-bottom: 20px;
        margin-bottom: 10px;
    }

    .footer-logo {
        display: flex;
        justify-content: center;
    }

    .footer-certs {
        justify-content: center;
        margin-top: 20px;
    }

    /* Link Lists Styling */
    .footer-links-col {
        text-align: right; /* Keep list alignment natural */
    }
    
    /* Ensure the second list aligns correctly in its column */
    .footer-links-col:last-child {
        text-align: right; 
    }

    /* --- FOOTER BOTTOM SECTION (Contact) --- */
    .footer-bottom {
        grid-template-columns: 1fr 1fr; /* 2 Columns for Email/Phone */
        gap: 30px 15px;
        text-align: right;
    }

    /* 1. Address: Full Width at Top */
    .address-box {
        grid-column: 1 / -1; /* Span full width */
        order: -1; /* Force to top */
    }

    /* 2. Socials: Full Width at Bottom */
    .social-box {
        grid-column: 1 / -1; /* Span full width */
        order: 10; /* Force to bottom */
    }

    /* 3. Email & Phone: Side-by-Side (1fr 1fr) */
    /* They naturally fill the middle grid cells */

    /* Text Alignment Fixes */
    .fb-item {
        text-align: right;
    }
    
    .fb-item h4 {
        font-size: 15px;
        margin-bottom: 10px;
    }

    .social-icons {
        justify-content: center;
        margin-top: 10px;
    }
    
    /* Make icons slightly bigger on mobile for touch */
    .social-icons a {
        width: 40px;
        height: 40px;
    }
}

/* =========================================
   HOME HERO SECTION (Screenshot Match)
   ========================================= */
.hero-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr; /* Big card gets more space */
    gap: 24px;
    margin-bottom: 40px;
    align-items: stretch;
}

/* --- 1. Big Purple Card --- */
.hero-big-card {
    background: linear-gradient(135deg, #4A148C 0%, #7B1FA2 100%); /* Deep Purple Gradient */
    border-radius: 24px;
    overflow: hidden;
    height: 100%;
    position: relative;
    color: #fff;
    box-shadow: 0 10px 30px rgba(74, 20, 140, 0.2);
}

.hero-big-link {
    display: flex;
    flex-direction: column;
    height: 100%;
    text-decoration: none;
    color: #fff;
}

.hero-big-image {
    flex-grow: 1;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-top: 20px;
}

.hero-img-responsive {
    max-width: 80%;
    height: auto;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.hero-big-card:hover .hero-img-responsive {
    transform: scale(1.05) translateY(-10px);
}

.hero-big-content {
    padding: 30px 30px 10px 30px;
    z-index: 2;
}

.hero-big-title {
    font-size: 24px;
    font-weight: 800;
    margin-bottom: 10px;
    line-height: 1.4;
    color: #fff; /* Force White */
}

.hero-big-excerpt {
    font-size: 14px;
    opacity: 0.9;
    margin-bottom: 15px;
    line-height: 1.6;
    color: #e1bee7; /* Light purple text */
}

.hero-big-meta {
    font-size: 12px;
    opacity: 0.8;
    display: flex;
    gap: 15px;
}

/* --- 2. Side Small Cards --- */
.hero-side {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.hero-small-card {
    background: #fff; /* Light Blue/Purple Tint */
    border: 1px solid #F3E5F5;
    border-radius: 20px;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    transition: 0.3s;
}

.hero-small-card:hover {
    box-shadow: 0 8px 20px rgba(0,0,0,0.05);
    transform: translateY(-3px);
}

.hero-small-body {
    flex: 1;
    padding-left: 15px;
}

.hero-small-title {
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 8px;
    line-height: 1.5;
}
.hero-small-title a { color: #333; text-decoration: none; }
.hero-small-title a:hover { color: var(--color-primary); }

.hero-small-meta {
    font-size: 11px;
    color: #888;
    margin-bottom: 15px;
}

.hero-small-image-wrap {
    width: 120px;
    height: 90px;
    flex-shrink: 0;
    border-radius: 12px;
    overflow: hidden;
}

.hero-small-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.btn-read-more-small {
    font-size: 12px;
    font-weight: bold;
    color: var(--color-primary);
    display: flex;
    align-items: center;
    gap: 5px;
}

/* =========================================
   SORT BAR
   ========================================= */
.sort-bar {
    background: #F0F2F5;
    border-radius: 50px;
    padding: 10px 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
}

.sort-count {
    font-size: 13px;
    color: #555;
}

.btn-sort {
    background: #fff;
    border: none;
    border-radius: 20px;
    padding: 6px 15px;
    font-size: 12px;
    color: #333;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

/* =========================================
   RESPONSIVE HOME RULES
   ========================================= */

/* Tablet (Stack Hero Side-by-Side to Vertical) */
@media (max-width: 992px) {
    .hero-grid {
        grid-template-columns: 1fr; /* Stack vertically */
    }
    
    .hero-big-card {
        min-height: 300px; /* Force height on tablet */
    }
    
    .hero-side {
        flex-direction: row; /* Put small cards side-by-side on tablet */
    }
    
    .hero-small-card {
        flex: 1;
    }
}

/* Mobile (Everything Stacked) */
@media (max-width: 600px) {
    .hero-side {
        flex-direction: column; /* Stack small cards vertically */
    }
    
    .hero-big-content {
        text-align: center;
    }
    
    .hero-big-meta {
        justify-content: center;
    }
    
    .post-grid {
        grid-template-columns: 1fr; /* 1 Column Grid */
    }
    
    .sort-bar {
        flex-direction: column;
        gap: 10px;
        border-radius: 12px;
        align-items: flex-start;
    }
}


/* AUTHOR BOX */
.author-profile-box { 
    display: flex; 
    gap: 20px; 
    padding: 25px; 
    border-radius: var(--radius-md); 
    margin-top: 30px; 
    background-color: #f3f8fd;
}
.ap-avatar { 
    flex-shrink: 0; 
}
.ap-avatar-img { 
    width: 100px; 
    height: 100px; 
    border-radius: 50%; 
    object-fit: cover; 
    border: 5px #fff solid;
}
.ap-name { 
    font-size: 18px; 
    font-weight: 800; 
    margin-bottom: 5px; 
}
.ap-bio { 
    font-size: 14px; 
    color: #555; 
    line-height: 1.6; 
    margin-bottom: 10px; 
}
.ap-social-links a { 
    display: inline-block; 
    margin-left: 10px; 
    font-size: 13px; 
    color: var(--color-primary); 
    font-weight: 600; 
}

/* responsive adjustments for mobile */
@media (max-width: 576px) {
    .author-profile-box { 
        flex-direction: column; 
        text-align: center; 
        align-items: center; 
        background-color: #cafff6;
    }
    .ap-social-links a { 
        margin: 0 5px; 
    }
}

/* --- BOTTOM SECTION --- */
.footer-bottom {
    display: grid;
    grid-template-columns: 2.5fr 1fr 1fr 1fr; /* Address wider */
    gap: 20px;
    padding: 40px 0;
}

/* Updated Selector: Target the class .fb-title instead of h4 tag */
.fb-item .fb-title {
    font-size: 14px;
    font-weight: 800;
    color: #000;
    margin-bottom: 15px;
}

.fb-item p {
    color: #444;
    line-height: 1.8;
    margin: 0;
    font-size: 13px;
}


/* =========================================
   SIDEBAR MODERN DESIGN (IMAGE RIGHT)
   ========================================= */

.widget-card-modern {
    background: transparent;
    border-radius: 24px;
    margin-bottom: 24px;
    overflow: hidden;
}

/* Header (Light Purple) */
.widget-header-modern {
    background-color: #00A88E;
    padding: 15px 20px;
    border-top-right-radius: 15px;
    border-top-left-radius: 15px;
    position: relative;
    z-index: 1;
}

.widget-title-modern {
    font-size: 18px;
    font-weight: 800;
    margin: 0;
    color: #fff;
    text-align: right;
    background-color: #1D1D1B;
    padding: 0px 10px 0px 0px;
}

/* Body (White List) */
.widget-body-modern {
    background: #fff;
    padding: 5px 15px 15px 15px;
    border-bottom-right-radius: 24px;
    border-bottom-left-radius: 24px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03);
    padding-top: 10px;
}

.side-list-modern {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Flex Container */
.side-item-modern {
    display: flex;
    align-items: center; /* Vertically center image and text */
    padding: 20px 0;
    border-bottom: 1px solid #f0f0f0;
    gap: 15px; /* Space between Image and Text */
}

.side-item-modern:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

/* Image Wrapper (Appears on Right) */
.side-image-wrap {
    flex-shrink: 0;
    width: 85px;
    height: 65px;
}

.side-thumb-modern {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
    background-color: #eee;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.side-thumb-modern.placeholder {
    background-color: #f5f5f5;
}

/* Text Wrapper (Appears on Left) */
.side-content-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.side-link-modern {
    font-size: 14px;
    font-weight: 700;
    color: #333;
    line-height: 1.5;
    margin-bottom: 8px; /* Space between Title and Date */
    display: block;
    transition: color 0.2s;
}

.side-link-modern:hover {
    color: var(--color-primary);
}

.side-meta-modern {
    font-size: 12px;
    color: #000;
    display: flex;
    align-items: center;
}

@media (max-width: 992px) {
    .widget-header-modern { text-align: center; }
    .widget-title-modern { text-align: center; }
}


/* =========================================
   ACCESSIBILITY CONTRAST FIXES
   ========================================= */

/* 1. Sidebar Meta (The specific error you saw) */
.side-meta-modern {
    color: #444444; /* Darker gray (Passes AA) */
    font-weight: 500; /* Slightly thicker font helps readability */
    opacity: 1; /* Ensure no transparency inherits */
}

/* Fix the SVG icon opacity in Sidebar to be more visible */
.side-meta-modern svg {
    opacity: 1 !important; /* Force full visibility */
    color: #666; /* Slightly softer than text is okay for icon */
}

/* 2. Main Grid Meta (Dates in the post list) */
/* currently #999 -> Change to #555 */
.grid-meta {
    color: #555555; 
    font-weight: 500;
}

/* 3. Breadcrumbs (Top of single post) */
/* currently #8A8A9F -> Change to #4A4A5A */
.breadcrumbs {
    color: #4A4A5A; 
}

/* 4. Widget Links */
.side-link-modern {
    color: #222222; /* Very dark gray for better readability */
}

/* 5. Footer Text */
.footer-desc, .fb-item p {
    color: #333333; /* Darken from #444 just to be safe */
}


.ymyl-disclaimer {
    margin-top: 40px;
    padding: 20px;
    background-color: #f8f9fa;
    border-left: 4px solid #3DE8CA;
    font-size: 0.9em;
    line-height: 1.6;
    color: #555;
}

.ymyl-disclaimer p {
    margin-bottom: 10px;
}

.ymyl-disclaimer p:last-child {
    margin-bottom: 0;
    font-size: 0.85em;
    color: #777;
}

/* =========================================
/*hoame-page

/* --- Container Setup --- */
.custom-home-container {
    max-width: 1300px; /* Wider to fit 4 cards nicely */
    margin: 40px auto;
    padding: 0 20px;
    direction: rtl;
    font-family: inherit;
    box-sizing: border-box;

}

.custom-home-container * {
    box-sizing: border-box;
}

/* --- SECTION A: HERO (Same as before) --- */
.hero-section-wrapper {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    grid-template-rows: 280px 280px;
    gap: 20px;
    margin-bottom: 60px;
}

.hero-card-big {
    grid-column: 1 / 2;
    grid-row: 1 / 3;
    position: relative;
    border-radius: 20px;
    overflow: hidden;
}

.hero-card-small {
    grid-column: 2 / 3;
    position: relative;
    border-radius: 20px;
    overflow: hidden;
}

.hero-img-wrap {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
}

.hero-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.hero-card-big:hover .hero-thumb,
.hero-card-small:hover .hero-thumb {
    transform: scale(1.05);
}

.hero-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.1) 100%);
    z-index: 1;
}

.hero-content {
    position: absolute;
    bottom: 20px;
    right: 20px;
    left: 20px;
    z-index: 2;
    text-align: right;
    color: #fff;
}

.hero-title {
    font-size: 1.5rem;
    margin: 5px 0;
    color: #fff;
    text-shadow: 0 2px 5px rgba(0,0,0,0.5);
}

/* --- SECTION B: MAIN POSTS GRID (The Screenshot Look) --- */
.main-post-grid {
    display: grid;
    /* 4 Columns Exactly */
    grid-template-columns: repeat(4, 1fr); 
    gap: 20px;
    margin-bottom: 60px;
}

.no-posts-msg {
    grid-column: 1 / -1;
    text-align: center;
    font-size: 1.2rem;
    color: #666;
}

/* Card Design - Like Screenshot */
.standard-card {
    background: #ffffff;
    border-radius: 25px; /* Very rounded corners */
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05); /* Soft shadow */
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid rgba(0,0,0,0.02);
}

.standard-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}

/* Image Section */
.std-img-wrap {
    display: block;
    width: 100%;
    height: auto; /* Fixed height */
    overflow: hidden;
    background: #eee;
}

.std-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.standard-card:hover .std-thumb {
    transform: scale(1.1);
}

/* Body Content */
.std-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    text-align: right; /* RTL Text Alignment */
}

/* Date Meta */
.std-meta {
    margin-bottom: 10px;
    color: #888;
    font-size: 0.8rem;
    display: flex;
    justify-content: flex-end; /* Align date to Left (or Right based on pref) */
    /* Screenshot shows date on right, aligning with title usually */
    justify-content: flex-start; 
}

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

/* Title */
.std-title {
    font-size: 1.1rem;
    font-weight: 800;
    line-height: 1.5;
    margin: 0 0 10px 0;
    color: #000;
}

.std-title a {
    text-decoration: none;
    color: #1a1a1a;
    transition: color 0.3s;
}

.std-title a:hover {
    color: #3498db;
}

/* Excerpt */
.std-excerpt {
    font-size: 0.9rem;
    color: #666;
    line-height: 1.6;
    margin-bottom: 20px;
    flex-grow: 1; /* Pushes footer down */
}

/* Footer / Button Area */
.std-footer {
    margin-top: auto;
    display: flex;
    /* To match screenshot: button is on the Left */
    justify-content: flex-end; 
}

/* Button Style */
.std-btn {
    color: #00a8ff; /* Cyan/Blue color */
    font-weight: bold;
    text-decoration: none;
    font-size: 0.95rem;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.std-btn:hover {
    color: #0077b5;
}

.arrow-icon {
    font-size: 1.2rem;
    line-height: 1;
    display: inline-block;
    transform: translateY(1px); /* Micro adjustment */
}

/* --- Separator --- */
.section-heading {
    display: flex;
    align-items: center;
    margin-bottom: 30px;
    gap: 15px;
}
.section-heading h3 {
    font-size: 1.5rem;
    font-weight: bold;
    color: #333;
    white-space: nowrap;
    margin: 0;
}
.heading-line {
    width: 100%;
    height: 2px;
    background: #ddd;
}


/* --- Pagination --- */
.pagination-wrapper {
    margin-top: 40px;
    display: flex;
    justify-content: center;
}
.pagination-wrapper ul {
    list-style: none;
    padding: 0;
    display: flex;
    gap: 5px;
}
.pagination-wrapper .page-numbers {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    background: #fff;
    border-radius: 10px;
    color: #333;
    text-decoration: none;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    transition: 0.3s;
}
.pagination-wrapper .page-numbers.current,
.pagination-wrapper .page-numbers:hover {
    background: #3498db;
    color: #fff;
}

/* --- RESPONSIVE BREAKPOINTS --- */

/* Laptop/Small Desktop ( < 1200px ) */
@media (max-width: 1200px) {
    .main-post-grid {
        grid-template-columns: repeat(3, 1fr); /* Switch to 3 columns */
    }
}

/* Tablet ( < 900px ) */
@media (max-width: 900px) {
    .hero-section-wrapper {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }
    .hero-card-big, .hero-card-small {
        grid-column: 1 / -1;
        height: 250px;
    }
    
    .main-post-grid {
        grid-template-columns: repeat(2, 1fr); /* Switch to 2 columns */
    }
}

/* Mobile ( < 600px ) */
@media (max-width: 600px) {
    .main-post-grid {
        grid-template-columns: 1fr; /* Switch to 1 column */
    }
    
    .standard-card {
        border-radius: 15px;
    }
}





/* =========================================
   USER CUSTOM CSS - MOVED FROM CUSTOMIZER
   ========================================= */

@media (max-width: 992px) {
  .container {
    padding: 0px 8px 0px 8px;
  }
}

@media (min-width: 993px) {
    .single-post .meta-container {
        flex-direction: row;
        align-items: center;
        gap: 15px;
    }
    
    .single-post .post-meta-dates {
        border-top: none;
        padding-top: 0;
    }
}

.pagination-wrap a, .pagination-wrap span {
  font-weight: normal;
}

:root {
    --color-primary: #00A88E;
		--bg-body: #f1f1f8;;
}

.ymyl-disclaimer {
    margin-top: 40px;
    padding: 20px;
    background-color: #f8f9fa;
    border-left: 4px solid #3DE8CA;
    font-size: 0.9em;
    line-height: 1.6;
    color: #555;
		border-radius: 10px;
}

.ymyl-disclaimer p {
    margin-bottom: 10px;
}

.ymyl-disclaimer p:last-child {
    margin-bottom: 0;
    font-size: 0.85em;
    color: #000;
}

/* =========================================
   MOBILE HEADER STYLES - NEW ADDITIONS
   ========================================= */

/* Hide mobile elements on desktop */
.mobile-btn-website,
.mobile-hamburger,
.mobile-menu-overlay,
.menu-overlay-bg {
    display: none;
}

/* Mobile styles - only apply on screens 992px and below */
@media (max-width: 992px) {
    /* Show mobile elements */
    .mobile-btn-website,
    .mobile-hamburger {
        display: flex;
    }
    
    .mobile-menu-overlay,
    .menu-overlay-bg {
        display: block;
    }
    
    /* Adjust flex container for mobile */
    .header-wrap > div {
        justify-content: space-between !important;
        gap: 10px !important;
    }
    
    /* Mobile Button (Left Side) */
    .mobile-btn-website {
        align-items: center;
        justify-content: center;
    background: #1D1D1B;
        color: #fff;
        padding: 8px 12px;
        border-radius: 8px;
        font-size: 13px;
        font-weight: 600;
        white-space: nowrap;
        text-decoration: none;
        transition: background 0.2s;
        flex-shrink: 0;
    }
    
    .mobile-btn-website:hover {
        background: #0052A3;
        color: #fff;
    }
    
    /* Center Logo */
    .logo-area {
        flex: 1;
        display: flex !important;
        justify-content: center;
    }
    
    /* Hamburger Menu (Right Side) */
    .mobile-hamburger {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 4px;
        width: 40px;
        height: 40px;
        background: transparent;
        border: none;
        cursor: pointer;
        padding: 8px;
        flex-shrink: 0;
    }
    
    /* Mobile Menu Overlay - Dark Mode */
.mobile-menu-overlay {
    position: fixed;
    top: 65px;
    right: -100%;
    width: 85%;
    max-width: 320px;
    height: calc(100vh - 65px);
    background: #1D1D1B;
    box-shadow: -2px 0 20px rgba(0,0,0,0.3);
    transition: right 0.3s ease;
    z-index: 999;
    overflow-y: auto;
    padding: 20px;
}

.mobile-menu-overlay.active {
    right: 0;
}

.mobile-menu-overlay ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mobile-menu-overlay li {
    margin-bottom: 15px;
}

.mobile-menu-overlay a {
    display: block;
    padding: 12px 0;
    font-size: 16px;
    font-weight: 600;
    color: #FFFFFF;
    border-bottom: 1px solid rgba(157,255,239,0.1);
    text-decoration: none;
    transition: color 0.2s;
}

.mobile-menu-overlay a:hover {
    color: #9DFFEF;
}
    
    /* Overlay Background */
    .menu-overlay-bg {
        position: fixed;
        top: 65px;
        left: 0;
        width: 100%;
        height: calc(100vh - 65px);
        background: rgba(0,0,0,0.5);
        z-index: 998;
        opacity: 0;
        transition: opacity 0.3s ease;
        pointer-events: none;
    }
    
    .menu-overlay-bg.active {
        opacity: 1;
        pointer-events: auto;
    }
}


/* ===================================================================
   V3.2.1: CUSTOMER REQUESTS - HEADER BUTTON & MOBILE STYLES
   =================================================================== */

/* 1. Website Button (Visible on Desktop & Mobile) */
.header-website-btn {
    display: inline-flex; 
    align-items: center;
    justify-content: center;
    background: #00A88E;
    color: #fff;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.2s;
    white-space: nowrap;
    height: 40px;
    
    /* KEY FOR DESKTOP: Pushes button to the far left in RTL layout */
    margin-right: auto; 
}
.header-website-btn:hover { background: #0052A3; color: #fff; }


/* 2. Mobile Styles (< 992px) - Overrides */
@media (max-width: 992px) {
    /* Mobile Elements must be shown */
    .mobile-hamburger, .mobile-menu-overlay, .menu-overlay-bg {
        display: flex; /* or block, based on element type */
    }
    .mobile-menu-overlay, .menu-overlay-bg { 
        display: block; 
    }
    
    /* Header Layout Adjustments for Mobile */
    .header-wrap > div {
        justify-content: space-between !important;
        gap: 10px !important;
    }

    /* Center Logo */
    .logo-area {
        flex: 1;
        display: flex !important;
        justify-content: center;
    }

    /* Adjust Button for Mobile */
    .header-website-btn {
        padding: 8px 12px;
        font-size: 13px;
        height: auto;
        margin-right: 0; /* Reset margin for mobile layout */
        flex-shrink: 0;
    }
    
    /* Hamburger Styling */
    .mobile-hamburger {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 4px;
        width: 40px;
        height: 40px;
        background: transparent;
        border: none;
        cursor: pointer;
        padding: 8px;
        flex-shrink: 0;
    }
    
    /* Mobile Menu Overlay Styles - Dark Mode */
    .mobile-menu-overlay {
        position: fixed; top: 65px; right: -100%; width: 85%; max-width: 320px;
        height: calc(100vh - 65px); background: #1D1D1B; 
        box-shadow: -2px 0 20px rgba(0,0,0,0.3); transition: right 0.3s ease;
        z-index: 999; overflow-y: auto; padding: 20px;
    }
    .mobile-menu-overlay.active { right: 0; }
    .mobile-menu-overlay ul { list-style: none; padding: 0; margin: 0; }
    .mobile-menu-overlay li { margin-bottom: 15px; }
    .mobile-menu-overlay a { display: block; padding: 12px 0; font-size: 16px; font-weight: 600; color: #FFFFFF; border-bottom: 1px solid rgba(157,255,239,0.1); text-decoration: none; transition: color 0.2s; }
    .mobile-menu-overlay a:hover { color: #9DFFEF; }
    
    .menu-overlay-bg {
        position: fixed; top: 65px; left: 0; width: 100%; height: calc(100vh - 65px);
        background: rgba(0,0,0,0.5); z-index: 998; opacity: 0; transition: opacity 0.3s ease; pointer-events: none;
    }
    .menu-overlay-bg.active { opacity: 1; pointer-events: auto; }
}






/* ... [Keep all previous font/variable definitions] ... */

/* =========================================
   SIDEBAR STICKY BEHAVIOR
   ========================================= */
.sidebar { 
    width: 100%; 
    /* NEW: Sticky settings */
    position: -webkit-sticky; /* Safari support */
    position: sticky;
    top: 90px; /* 75px Header + 15px Gap */
    align-self: start; /* Required for grid item stickiness */
    height: fit-content;
}

/* Hide Table of Contents on Mobile */
@media (max-width: 992px) {
    #sidebar-toc-widget {
        display: none !important;
    }
}

/* =========================================
   META SECTION LAYOUT (V3.4 Updated)
   ========================================= */

/* CONTAINER: Holds everything */
.meta-container {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap; /* Allows wrapping on small desktop screens if needed */
}

/* ROW 1 WRAPPER: People (Author, Expert, Team) */
.meta-people-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* ROW 2 WRAPPER: Dates */
.meta-dates-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    /* Optional: Separator line between people and dates on desktop */
    border-right: 1px dashed #eee;
    padding-right: 20px;
}

/* Profile Elements Styling */
.profile-compact {
    display: flex;
    align-items: center;
    gap: 10px;
}

.profile-avatar-wrap {
    flex-shrink: 0;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    overflow: hidden;
    background: #eee;
}

.profile-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.profile-role {
    font-size: 12px;
    color: #888;
    margin-bottom: 2px;
}

.profile-name {
    font-size: 12px;
    color: #1d315a;
    line-height: 1.2;
    font-weight: 700;
}

.profile-sep {
    width: 1px;
    height: 30px;
    background-color: #ddd;
}

.meta-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #555;
}


/* =========================================
   MOBILE RESPONSIVE META (Max-Width 768px)
   ========================================= */
@media (max-width: 768px) {
    
    .meta-container {
        flex-direction: column; /* Stack wrapper 1 and wrapper 2 */
        align-items: flex-start;
        gap: 15px;
    }

    /* ROW 1: People - Horizontal Scroll if needed */
    .meta-people-wrapper {
        width: 100%;
        display: flex;
        flex-wrap: nowrap; /* Force single row */
        overflow-x: auto; /* Allow scrolling if 3 profiles are too wide */
        padding-bottom: 5px; /* Space for scrollbar */
        gap: 15px;
        align-items: center;
        /* Hide scrollbar for cleaner look */
        -ms-overflow-style: none;  /* IE and Edge */
        scrollbar-width: none;  /* Firefox */
    }
    .meta-people-wrapper::-webkit-scrollbar {
        display: none;
    }

    /* Keep separators visible or hide them? 
       If scrolling, separators might look weird. Let's keep them small. */
    .profile-sep {
        height: 25px;
        flex-shrink: 0;
    }

    /* Ensure Labels (Role) stay visible as requested */
    .profile-role {
        display: block !important;
        font-size: 11px;
    }
    
    .profile-name {
        font-size: 12px;
        white-space: nowrap; /* Keep name on one line */
    }

    .profile-avatar-wrap {
        width: 40px;
        height: 40px;
    }

    /* ROW 2: Dates */
    .meta-dates-wrapper {
        width: 100%;
        border-right: none; /* Remove desktop border */
        padding-right: 0;
        justify-content: flex-start; /* Align left (RTL: Right) */
        border-top: 1px dashed #eee; /* Add top border for separation */
        padding-top: 10px;
        gap: 15px;
    }
}

/* ... [Rest of your CSS: YMYL, Generative Capsule, etc.] ... */
.generative-capsule {
  background-color: #EFFFFC;
  border-right: 5px solid #00D88A;
  border-radius: 12px;
  padding: 15px 15px;
  margin-bottom: 30px;
  color: #002F77;
  font-size: 14px;
  line-height: 1.7;
  font-weight: 400;
  box-shadow: 0 4px 15px rgba(33, 150, 243, 0.1);
}

.ymyl-top-box {
    background-color: #f6f6f6;
    color: #1D1E41;
    padding: 10px 10px;
    border-radius: 8px;
    margin-bottom: 25px;
    font-size: 13px;
    line-height: 1.6;
}
.ymyl-top-box a { color: #004476; text-decoration: underline; }

/* TOC Styles */
#sidebar-toc-body ul { list-style: none; padding: 0; margin: 0; }
#sidebar-toc-body li { margin-bottom: 10px; }
#sidebar-toc-body a { font-size: 13px; color: #444; text-decoration: none; display: block; padding-right: 15px; position: relative; transition:0.2s; }
#sidebar-toc-body a:hover { color: var(--color-primary); }
#sidebar-toc-body a::before { content: "•"; color: #ccc; position: absolute; right: 0; top: 0; }
.toc-h3 { padding-right: 30px !important; font-size: 12px !important; opacity: 0.9; }



/* =========================================
   MOBILE RESPONSIVE META (Fix for Vertical Stacking)
   ========================================= */
@media (max-width: 768px) {
    
    .meta-container {
        flex-direction: column;
        align-items: center; /* Center the whole block */
        gap: 0px;
    }

    /* 1. Wrapper: Remove Scroll, Allow Wrapping */
    .meta-people-wrapper {
        width: 100%;
        display: flex;
        flex-wrap: wrap;         /* Allow items to move to next line if needed */
        justify-content: center; /* Center items in the row */
        overflow-x: visible;     /* Disable horizontal scroll */
        gap: 5px;               /* Space between the 3 profiles */
    }

    /* 2. Hide the vertical line separators on mobile */
    .profile-sep {
        display: none;
    }

    /* 3. The Individual Profile: Stack Vertical (Image Top, Text Bottom) */
    .profile-compact {
        display: flex;
        flex-direction: column; /* Stack image on top of text */
        align-items: center;    /* Center horizontally */
        text-align: center;     /* Center the text itself */
        width: 30%;             /* Make them fit side-by-side (3 in a row) */
        min-width: 100px;       /* Minimum width to prevent crushing */
    }

    /* 4. Avatar Size & Spacing */
    .profile-avatar-wrap {
        width: 45px;
        height: 45px;
        margin-bottom: 0px; /* Space between image and role */
    }

    /* 5. Text Styling */
    .profile-info {
        align-items: center; /* Center flex items inside info */
        width: 100%;
    }

    .profile-role {
        display: block !important;
        font-size: 11px;
        color: #888;
        margin-bottom: 4px;
    }
    
    .profile-name {
        font-size: 12px;
        font-weight: 700;
        white-space: normal; /* Allow long names to wrap to next line */
        line-height: 1.4;
    }

    /* 6. Dates Section Adjustment */
    .meta-dates-wrapper {
        border-top: 1px dashed #eee;
        padding-top: 15px;
        justify-content: center;
        width: 100%;
    }
}










/* ============================================================
   Minimal Authors Grid - Clean & Beautiful (Exactly like screenshot)
   ============================================================ */

.minimal-authors-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    margin: 60px 0;
    direction: rtl;
}

.minimal-author-card {
    background: #fff;
    border-radius: 20px;
    padding: 28px 20px;
    text-align: center;
    box-shadow: 0 5px 5px rgba(0,0,0,0.05);
    border: 1px solid #f0f0f0;
    transition: all 0.35s ease;
}

.minimal-author-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 45px rgba(0,0,0,0.12);
}

.author-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
}

.author-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid #f0f8ff;
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}

.minimal-avatar-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
}

.author-name {
    font-size: 17px;
    font-weight: 800;
    margin: 0;
    color: #222;
    line-height: 1.3;
}

.author-role {
    font-size: 13px;
    color: #555;
    background: #f8f9fa;
    padding: 5px 14px;
    border-radius: 30px;
    font-weight: 600;
}

.author-bio {
    font-size: 14.5px;
    color: #444;
    line-height: 1.85;
    margin: 20px 0;
    padding: 0 8px;
    white-space: pre-line;     /* این خط خیلی مهمه! */
    word-wrap: break-word;
    text-align: justify;
    max-width: 100%;
}

.author-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    justify-content: center;
    margin: 18px 0;
}

.social-tag {
    font-size: 10px;
    background: #f5f5f5;
    color: #444;
    padding: 5px 5px;
    border-radius: 10px;
    text-decoration: none;
    transition: all 0.25s ease;
    border: 1px solid #eaeaea;
}

.social-tag:hover {
    background: var(--color-primary, #6F42C1);
    color: #fff;
    border-color: transparent;
}

.view-all-btn {
    display: block;
    margin-top: 22px;
    padding: 11px 16px;
    background: transparent;
    color: var(--color-primary, #00A88E);
    border: 2.3px solid var(--color-primary, #00A88E);
    border-radius: 14px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s ease;
}

.view-all-btn:hover {
    background: var(--color-primary, #00A88E);
    color: #fff;
}

/* Responsive */
@media (max-width: 1200px) {
    .minimal-authors-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 900px) {
    .minimal-authors-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
    .minimal-authors-grid { 
        grid-template-columns: 1fr;
        gap: 20px;
        margin: 40px 0;
    }
    .minimal-author-card { padding: 24px 18px; }
}
















/* ============================================================
   Full Width Page - No Sidebar, No Featured Image
   ============================================================ */

.fullwidth-page-wrapper {
    margin: 40px 0 80px;
    background: #fff;
    border-radius: 20px;
    padding: 40px 50px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.06);
    border: 1px solid #f0f0f0;
    max-width: 100%;
    box-sizing: border-box;
}

.fullwidth-page-content {
    line-height: 1.85;
    font-size: 16px;
}

.page-header {
    text-align: center;
    margin-bottom: 40px;
    padding-bottom: 20px;
    border-bottom: 1px dashed #eee;
}

.page-title {
    font-size: 32px;
    font-weight: 800;
    color: #222;
    margin: 0;
    line-height: 1.3;
}

.page-entry-content {
    color: #444;
}

.page-entry-content p {
    margin-bottom: 20px;
}

.page-entry-content h2,
.page-entry-content h3,
.page-entry-content h4 {
    margin: 10px 0 15px;
    color: #222;
    font-weight: 700;
}

.page-entry-content ul,
.page-entry-content ol {
    margin: 20px 0;
    padding-right: 25px;
}

.page-entry-content img {
    max-width: 100%;
    height: auto;
    border-radius: 12px;

}

/* Responsive */
@media (max-width: 768px) {
    .fullwidth-page-wrapper {
        padding: 30px 25px;
        border-radius: 16px;
        margin: 30px 0 60px;
    }
    .page-title {
        font-size: 28px;
    }
}

@media (max-width: 480px) {
    .fullwidth-page-wrapper {
        padding: 25px 20px;
    }
    .page-title {
        font-size: 26px;
    }
}



/* ============================================================
   Sidebar Header Unification (Fix for TOC and Related Posts)
   ============================================================ */

/* Target the header container for background, padding, and borders */
.widget-card-modern .widget-header-modern-content {
    background-color: #1D1D1B; 
    padding: 15px 20px; /* Adjust padding as necessary */
    /* Ensure the top corners match the card's border radius */
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    margin: -1px; /* Minor adjustment to align with widget-card border */
}

/* Target the title text for color and formatting */
.widget-card-modern .widget-header-modern-content .widget-title-modern {
    color: #fff; /* White text for contrast */
    font-size: 18px; /* Standardize font size */
    font-weight: 700;
    margin: 0; /* Remove default H3 margin */
}

/* Optional: If the white text isn't showing, use !important to force the color */
.widget-card-modern .widget-header-modern-content .widget-title-modern {
    color: #fff !important; 
}


/* Accessibility Fixes for Contrast */
.c-input, 
.c-input::placeholder {
    color: #444 !important; /* Forces dark gray text for inputs */
    opacity: 1;
}

/* Ensure the modified spans act like titles */
.widget-title-modern,
.ap-name {
    display: block;
}



/* Restore bullets in post content */
.entry-content ul,
.entry-content ol,
.widget-area ul,
.widget-area ol,
.page-entry-content ul,
.page-entry-content ol {
    list-style: revert;
    padding-right: 25px;
    margin: 20px 0;
}

.entry-content li,
.widget-area li,
.page-entry-content li {
    margin-bottom: 8px;
    line-height: 1.7;
}

/* Keep navigation menus clean (no bullets) */
.nav-links ul,
.mobile-menu-overlay ul,
.footer-links-col ul {
    list-style: none !important;
    padding: 0 !important;
}

/* ایجاد فاصله برای پاسخ‌ها در حالت دسکتاپ */
.comment-list .children {
    margin-right: 40px; /* ایجاد فاصله از سمت راست برای نسخه فارسی */
    margin-top: 15px;
    border-right: 2px solid #eee; /* یک خط عمودی ظریف برای راهنمای چشم */
    padding-right: 15px;
}

/* بهینه سازی برای نمایش در موبایل */
@media (max-width: 768px) {
    .comment-list .children {
        margin-right: 15px; /* کاهش فاصله در موبایل برای جلوگیری از کم شدن عرض باکس */
        padding-right: 10px;
    }
}

/* استایل دهی به تک تک پاسخ‌ها */
.comment-list .children li.comment {
    background: #f9f9f9; /* رنگ پس‌زمینه متفاوت برای پاسخ‌ها (اختیاری) */
    border-radius: 10px;
    margin-bottom: 10px;
}

/* گرد کردن تصویر پروفایل در لیست نظرات */
.comment-list .comment-body img.avatar,
.comment-list .comment-body img.author-img {
    border-radius: 50% !important;
    width: 40px;
    height: 40px;
    object-fit: cover;
    border: 1px solid #eee; /* یک حاشیه ظریف برای زیبایی بیشتر */
}

/* ============================================================
   DESKTOP DROPDOWN MENU (FIXED - No More Gaps)
   ============================================================ */

/* Parent item positioning */
.nav-links li {
    position: relative;
}

/* Hide submenus by default - Dark Mode */
.nav-links .sub-menu {
    display: none;
    position: absolute;
    background: #1D1D1B;
    box-shadow: 0 10px 40px rgba(0,0,0,0.4);
    border: 1px solid rgba(157,255,239,0.1);
    border-radius: 12px;
    min-width: 220px;
    z-index: 1000;
    padding: 8px 0;
}

/* Level 2: drop down below top nav item */
.nav-links > li > .sub-menu {
    top: 100%;
    right: 0;
    padding-top: 10px;
}

/* Level 3+: flyout to the left (forward in RTL) */
.nav-links .sub-menu .sub-menu {
    top: -8px;
    right: 100%;
    margin-right: 4px;
}

/* Show submenu via active class (click-based) */
.nav-links li.active > .sub-menu {
    display: block;
    animation: fadeIn 0.3s ease;
}

/* Submenu items styling - Dark Mode */
.nav-links .sub-menu li {
    display: block;
    width: 100%;
}

.nav-links .sub-menu a {
    display: block;
    padding: 10px 20px;
    font-size: 13px;
    color: #FFFFFF;
    transition: all 0.2s;
    white-space: nowrap;
}

.nav-links .sub-menu a:hover {
    background: rgba(157,255,239,0.1);
    color: #9DFFEF;
    padding-right: 25px;
}

/* Level 2 arrow: points down-left (opens down, level 3 flies left) */
.nav-links > .menu-item-has-children > a::after {
    content: '';
    display: inline-block;
    width: 5px;
    height: 5px;
    border-left: 1.5px solid #9DFFEF;
    border-bottom: 1.5px solid #9DFFEF;
    transform: rotate(45deg);
    margin-right: 6px;
    margin-top: -3px;
    opacity: 0.7;
    transition: transform 0.2s ease;
}
.nav-links > .menu-item-has-children.active > a::after {
    transform: rotate(-135deg);
    opacity: 1;
}

/* Level 3+ arrow: points left (flyout opens left in RTL) */
.nav-links .sub-menu .menu-item-has-children > a::after {
    content: '';
    display: inline-block;
    width: 5px;
    height: 5px;
    border-left: 1.5px solid #9DFFEF;
    border-bottom: 1.5px solid #9DFFEF;
    transform: rotate(45deg);
    margin-right: 6px;
    margin-top: -3px;
    opacity: 0.7;
    transition: transform 0.2s ease;
}
.nav-links .sub-menu .menu-item-has-children.active > a::after {
    transform: rotate(-135deg);
    opacity: 1;
}

/* Dark header nav links default to white, dropdown links also white in dark mode */
.header .nav .sub-menu a {
    color: #FFFFFF;
}
.header .nav .sub-menu a:hover {
    color: #9DFFEF;
}

/* FIX: Bridge the gap with pseudo-element (top-level only, level 3 flies out sideways) */
.nav-links > li.menu-item-has-children::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 10px;
    background: transparent;
    z-index: 999;
}

/* ============================================================
   MOBILE DROPDOWN MENU (Unchanged - Keep as was)
   ============================================================ */

/* Parent items with children - clickable */
.mobile-menu-overlay .menu-item-has-children > a {
    position: relative;
    padding-left: 40px;
    cursor: pointer;
}

/* Plus icon for mobile - Dark Mode */
.mobile-menu-overlay .menu-item-has-children > a::after {
    content: '+';
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 20px;
    font-weight: 300;
    color: #9DFFEF;
    transition: transform 0.3s;
}

/* Rotate icon when active */
.mobile-menu-overlay .menu-item-has-children.active > a::after {
    transform: translateY(-50%) rotate(45deg);
}

/* Hide submenus by default on mobile */
.mobile-menu-overlay .sub-menu {
    display: none;
    padding-right: 20px;
    margin-top: 10px;
}

/* Show submenu when active */
.mobile-menu-overlay .sub-menu.active {
    display: block;
    animation: slideDown 0.3s ease;
}

/* Submenu items on mobile - Dark Mode */
.mobile-menu-overlay .sub-menu a {
    font-size: 14px;
    padding: 8px 0;
    color: #9DFFEF;
    border-bottom: 1px dotted rgba(157,255,239,0.15);
}

.mobile-menu-overlay .sub-menu li:last-child a {
    border-bottom: none;
}

/* Animation keyframes */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes slideDown {
    from { opacity: 0; max-height: 0; }
    to { opacity: 1; max-height: 500px; }
}

/* ============================================================
   PAGE LINKS - BLUE COLOR
   ============================================================ */

.page-link-blue {
    color: #00A88E !important;
    font-weight: 500;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: all 0.2s ease;
}

.page-link-blue:hover {
    color: #004499 !important;
    border-bottom-color: #004499;
    background-color: rgba(0, 102, 204, 0.05);
}

/* Exclude buttons and special links */
.page-link-blue.btn-cta-action,
.page-link-blue.button,
.page-link-blue.wp-block-button__link {
    color: inherit !important;
    border-bottom: none;
    background-color: transparent;
}

/* =========================================
   ATHENA BRAND HEADER (Dark Navy Theme)
   ========================================= */
:root {
    --athena-navy: #1D1D1B;
    --athena-blue: #29CCB1;
    --athena-green-600: #00A88E;
    --athena-green-200: #3DE8CA;
    --athena-green-100: #9DFFEF;
    --athena-green-50: #EFFFFC;
    --athena-muted: rgba(157,255,239,.58);
    --athena-gutter: max(24px, calc((100vw - 1440px)/2 + 24px));
    --athena-ease: cubic-bezier(.2,.75,.2,1);
}

.header {
    position: sticky;
    inset: 0 0 auto;
    z-index: 100;
    height: 80px;
    display: flex;
    align-items: center;
    color: #FFFFFF;
    background: #1D1D1B;
    backdrop-filter: none;
}
.header__inner {
    width: 100%;
    padding: 0 var(--athena-gutter);
    display: grid;
    grid-template-columns: max-content 1fr max-content;
    align-items: center;
    gap: 24px;
}
.header .logo,
.custom-logo-link { display: flex; align-items: center; width: max-content; }
.header .logo img,
.custom-logo { display: block; width: auto; height: 46px; object-fit: contain; }
.header .nav {
    justify-self: center;
    display: flex;
    align-items: center;
    gap: 30px;
    font-size: 14px;
    font-weight: 600;
}
.header .nav > ul {
    display: flex;
    align-items: center;
    gap: 30px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.header .nav li {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
}
.header .nav a {
    color: #FFFFFF;
    transition: color .3s ease;
}
.header .nav a:hover { color: #9DFFEF; }
.nav-mobile { display: none; }
.header-actions { display: flex; align-items: center; gap: 5px; justify-self: end; }
.header-action {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    color: #FFFFFF;
    border: 1px solid transparent;
    border-radius: 9px;
    background: transparent;
    transition: background .3s ease, border-color .3s ease, color .3s ease, transform .3s var(--athena-ease);
}
.header-action:hover {
    color: #3DE8CA;
    background: rgba(255,255,255,.10);
    border-color: rgba(157,255,239,.16);
    transform: translateY(-1px);
}
.header-action svg { width: 22px; height: 22px; }
.header-phone{text-decoration:none}
.header-phone:hover{text-decoration:none}
.menu-btn {
    display: none;
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 8px;
    background: rgba(255,255,255,.12);
    color: #FFFFFF;
    cursor: pointer;
    box-sizing: border-box;
}

.blog-main {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 20px;
    width: 100%;
}

@media (max-width: 1239px) {
    .header .nav { display: none; }
    .nav-mobile { display: block; }
    .menu-btn {
        display: flex !important;
        background: var(--athena-navy);
        order: 1;
        flex: none;
        align-items: center;
        justify-content: center;
        width: 42px;
        height: 42px;
        border: 0;
        border-radius: 8px;
        color: #FFFFFF;
        cursor: pointer;
        flex-shrink: 0;
        padding: 0;
        box-sizing: border-box;
    }
    .menu-btn svg{width:20px;height:20px;display:block;color:#FFFFFF}
    .header__inner { display: flex; align-items: center; gap: 12px; }
    .header .logo, .custom-logo-link { order: 3; flex: 1; display: flex; justify-content: center; align-items: center; width: auto; }
    .header-actions { display: contents; }
    .header-phone{order:2;width:38px;height:38px;display:grid;place-items:center;padding:0;border-radius:9px;border:1px solid transparent}
    .header-phone .phone-text{display:none}
    .header-phone .phone-icon{display:block;width:20px;height:20px}
    .cart-button{order:4}
    .profile-button{order:5}
}
@media (max-width: 620px) {
    .header { height: 54px; }
    .header__inner { gap: 8px; }
    .header .logo img { height: 37px; }
    .header-action, .menu-btn { width: 38px; height: 38px; }
    .header-action svg { width: 20px; height: 20px; }
}

/* =========================================
   ATHENA BRAND FOOTER
   ========================================= */
.site-footer {
    --footer-inline: 48px;
    position: relative;
    z-index: 5;
    padding: 1px 0 0;
    background: #EFFFFC;
    color: #1D1D1B;
    margin-top: 0;
    border-top: none;
    font-size: 14px;
}
.site-footer::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 180px;
    pointer-events: none;
    background: linear-gradient(180deg,rgba(157,255,239,.45),transparent);
}
.footer-shell {
    position: relative;
    width: min(100%,1440px);
    margin-inline: auto;
    padding-inline: var(--athena-gutter);
}
.footer-cta {
    position: relative;
    z-index: 2;
    min-height: 190px;
    margin-top: -70px;
    padding: 42px var(--footer-inline);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
    overflow: hidden;
    border: 1px solid rgba(29,29,27,.10);
    border-radius: 30px;
    background: linear-gradient(125deg,#29CCB1 0%,#3DE8CA 56%,#9DFFEF 100%);
    box-shadow: 0 28px 70px rgba(0,95,79,.18);
}
.footer-cta::after {
    content: "";
    position: absolute;
    left: -60px;
    bottom: -130px;
    width: 310px;
    height: 310px;
    border: 55px solid rgba(255,255,255,.25);
    border-radius: 50%;
}
.footer-cta > div { position: relative; z-index: 1; max-width: 760px; }
.footer-cta span {
    display: block;
    margin-bottom: 9px;
    color: rgba(29,29,27,.64);
    font-size: 12px;
    font-weight: 650;
}
.footer-cta h3 {
    margin: 0;
    color: #1D1D1B;
    font-size: clamp(20px,2vw,30px);
    font-weight: 600;
    line-height: 1.55;
    letter-spacing: -.02em;
}
.footer-cta > a {
    position: relative;
    z-index: 1;
    min-width: 170px;
    height: 56px;
    padding: 0 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    border-radius: 14px;
    background: #1D1D1B;
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 650;
    transition: transform .3s var(--athena-ease), background .3s ease;
    text-decoration: none;
}
.footer-cta > a:hover { transform: translateY(-3px); background: #004F43; }
.footer-cta > a b { color: #3DE8CA; font-size: 20px; }

.seo-about {
    margin: 0;
    padding: 58px var(--footer-inline) 26px;
    color: #1D1D1B;
}
.seo-about h2 {
    max-width: 860px;
    margin: 0 0 20px;
    color: #1D1D1B;
    font-size: clamp(24px,2.3vw,32px);
    font-weight: 650;
    line-height: 1.6;
}
.seo-about__excerpt,
.seo-about__content {
    max-width: 1120px;
    color: rgba(29,29,27,.66);
    font-size: 13px;
    line-height: 2.15;
    text-align: justify;
}
.seo-about__excerpt { display: inline; margin: 0; }
.seo-about__details { display: inline; }
.seo-about__details[open] { display: block; }
.seo-about__details summary {
    display: inline-flex;
    margin-right: 8px;
    vertical-align: middle;
    list-style: none;
    cursor: pointer;
    user-select: none;
}
.seo-about__details summary::-webkit-details-marker { display: none; }
.seo-about__details[open] summary { display: none; }
.seo-about__dots {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 2px;
}
.seo-about__dots i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #00A88E;
    transition: transform .2s ease, background .2s ease;
}
.seo-about__dots i:nth-child(2) { background: #29CCB1; }
.seo-about__dots i:nth-child(3) { background: #3DE8CA; }
.seo-about__details summary:hover .seo-about__dots i {
    transform: translateY(-2px);
    background: #006F5E;
}
.seo-about__content { padding-top: 16px; }
.seo-about__content p { margin: 0 0 15px; }
.seo-about__content p:last-child { margin-bottom: 0; }

.footer-main {
    display: grid;
    grid-template-columns: minmax(0,1.35fr) minmax(180px,.55fr) minmax(280px,.85fr);
    gap: clamp(42px,7vw,100px);
    padding: clamp(76px,9vw,120px) var(--footer-inline) 64px;
}
.footer-brand > p {
    max-width: 470px;
    margin: 24px 0 30px;
    color: rgba(29,29,27,.61);
    font-size: 14px;
    line-height: 2;
}
.footer-social {
    display: flex;
    align-items: center;
    gap: 9px;
}
.footer-social a {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    color: #006F5E;
    border: 1px solid rgba(0,143,120,.25);
    border-radius: 50%;
    background: rgba(255,255,255,.48);
    transition: color .3s ease, background .3s ease, transform .3s var(--athena-ease), border-color .3s ease;
}
.footer-social a:hover {
    color: #FFFFFF;
    background: #00A88E;
    border-color: #00A88E;
    transform: translateY(-3px);
}
.footer-social svg { width: 20px; height: 20px; }
.footer-links,
.footer-contact {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 13px;
}
.footer-links h3,
.footer-contact h3 {
    margin: 0 0 10px;
    color: #1D1D1B;
    font-size: 17px;
    font-weight: 700;
}
.footer-links a,
.footer-contact a {
    position: relative;
    color: rgba(29,29,27,.62);
    font-size: 13px;
    transition: color .25s ease, transform .25s ease;
    text-decoration: none;
}
.footer-links a:hover,
.footer-contact a:hover {
    color: #008F78;
    transform: translateX(-3px);
}
.footer-contact address {
    max-width: 360px;
    margin: 0 0 7px;
    color: rgba(29,29,27,.64);
    font-size: 13px;
    font-style: normal;
    line-height: 2;
}
.footer-contact a[dir="ltr"] {
    font-size: 14px;
    font-weight: 600;
}
.footer-contact-row {
    display: flex;
    align-items: center;
    gap: 0;
}
.footer-contact-gap {
    width: 24px;
}
.footer-contact .footer-contact-row a {
    font-size: 13px;
}
.footer-badges {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 14px;
}
.footer-badges img {
    width: clamp(47px, 4.5vw, 58px);
    height: auto;
    border-radius: 10px;
    border: 2px solid rgba(16,227,188,.09);
    padding: 6px;
    background: rgba(255,255,255,.4);
    transition: transform .25s var(--athena-ease), border-color .25s ease;
}
.footer-badges img:hover {
    transform: translateY(-2px);
    border-color: rgba(0,168,142,.3);
}
.footer-bottom {
    min-height: 82px;
    padding: 0 var(--footer-inline);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    border-top: 1px solid rgba(0,143,120,.15);
    grid-template-columns: none;
}
.footer-bottom p {
    margin: 0;
    color: rgba(29,29,27,.52);
    font-size: 12px;
}
.footer-bottom > div {
    display: flex;
    align-items: center;
    gap: 22px;
}
.footer-bottom a {
    color: rgba(29,29,27,.52);
    font-size: 12px;
    transition: color .25s ease;
    text-decoration: none;
}
.footer-bottom a:hover { color: #008F78; }

@media (max-width: 900px) {
    .site-footer { --footer-inline: 30px; }
    .footer-cta { padding: 34px var(--footer-inline); border-radius: 24px; }
    .footer-main {
        grid-template-columns: 1fr 1fr;
        grid-template-areas: "brand brand" "links contact";
        padding-top: 78px;
    }
    .footer-brand { grid-area: brand; }
    .footer-links { grid-area: links; }
    .footer-contact { grid-area: contact; }
}
@media (max-width: 620px) {
    .site-footer { --footer-inline: 22px; }
    .footer-cta {
        min-height: auto;
        margin-top: -46px;
        padding: 28px var(--footer-inline);
        align-items: flex-start;
        flex-direction: column;
        gap: 24px;
    }
    .footer-cta h3 { font-size: 20px; }
    .footer-cta > a { width: 100%; }
    .footer-main {
        grid-template-columns: 1fr;
        grid-template-areas: "brand" "links" "contact";
        gap: 44px;
        padding: 70px var(--footer-inline) 46px;
    }
    .footer-bottom {
        padding: 24px var(--footer-inline);
        align-items: flex-start;
        flex-direction: column;
    }
}
@media (max-width: 720px) {
    .seo-about { padding: 44px var(--footer-inline) 18px; }
    .seo-about h2 { font-size: 23px; }
    .seo-about__excerpt,
    .seo-about__content { font-size: 12px; line-height: 2; }
}

/* Mobile nav overlay (dark theme override) */
@media (max-width: 992px) {
    .mobile-menu-overlay {
        background: #101814 !important;
        top: 80px !important;
        height: calc(100vh - 80px) !important;
    }
    .mobile-menu-overlay ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    .mobile-menu-overlay li { margin-bottom: 0; }
    .mobile-menu-overlay a {
        display: block;
        padding: 14px 0;
        font-size: 15px;
        font-weight: 600;
        color: #FFFFFF !important;
        border-bottom: 1px solid rgba(157,255,239,.1) !important;
        text-decoration: none;
        transition: color .3s ease;
    }
    .mobile-menu-overlay a:hover { color: #9DFFEF !important; }
    .menu-overlay-bg {
        top: 80px !important;
        height: calc(100vh - 80px) !important;
    }
    /* Hide desktop nav on mobile */
    .header .nav { display: none; }
}

/* Desktop Dropdown Menu - Dark Mode (Level 2 & Level 3) */
.header .nav .sub-menu {
    background: #1D1D1B !important;
    border: 1px solid rgba(157,255,239,0.12);
    box-shadow: 0 12px 40px rgba(0,0,0,0.5);
}
.header .nav .sub-menu a {
    color: #FFFFFF !important;
    padding: 10px 20px;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.25s ease;
}
.header .nav .sub-menu a:hover {
    background: rgba(157,255,239,0.1) !important;
    color: #9DFFEF !important;
    padding-right: 25px;
}
/* Level 3 flyout - Dark Mode */
.header .nav .sub-menu .sub-menu {
    background: #151513 !important;
    border: 1px solid rgba(157,255,239,0.15);
    box-shadow: 0 12px 40px rgba(0,0,0,0.6);
}
.header .nav .sub-menu .sub-menu a:hover {
    background: rgba(157,255,239,0.12) !important;
}
@media (max-width: 620px) {
    .header { height: 54px !important; }
    .mobile-menu-overlay { top: 54px !important; height: calc(100vh - 54px) !important; }
    .menu-overlay-bg { top: 54px !important; height: calc(100vh - 54px) !important; }
    .header__inner { gap: 8px; }
    .header .logo img { height: 37px; }
    .header-action, .menu-btn { width: 38px; height: 38px; }
    .header-action svg { width: 20px; height: 20px; }
}

/* =========================================
   WOOCOMMERCE INTEGRATION
   ========================================= */

/* Cart Count Badge */
.cart-button {
    position: relative;
}
.cart-count {
    position: absolute;
    top: -6px;
    left: -6px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    background: #E74C3C;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    border-radius: 50%;
    direction: ltr;
}

/* WooCommerce Wrapper */
.woocommerce-wrapper {
    max-width: var(--container, 1240px);
    margin: 0 auto;
    padding: 0 20px 60px;
}
.woocommerce-shell {
    width: 100%;
}

/* Breadcrumb */
.woocommerce-breadcrumb {
    margin: 20px 0;
    font-size: 12px;
    color: var(--color-meta, #8A8A9F);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
}
.woocommerce-breadcrumb a {
    color: #00A88E;
    border-bottom: 1px solid transparent;
    transition: 0.2s;
}
.woocommerce-breadcrumb a:hover {
    color: #004499;
    border-bottom: 1px solid #004499;
}
.woocommerce-breadcrumb .sep {
    margin: 0 2px;
    color: #ccc;
}
.woocommerce-breadcrumb .current {
    color: #000;
}

.woocommerce-main {
    background: #fff;
    border-radius: 15px;
    padding: 30px;
}

/* =========================================
   SHOP / ARCHIVE PAGE
   ========================================= */
.woocommerce ul.products {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    margin: 0;
    padding: 0;
}
.woocommerce ul.products li.product {
    width: auto;
    float: none;
    margin: 0;
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.04);
    border: 1px solid #f0f0f0;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.woocommerce ul.products li.product:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}
.woocommerce ul.products li.product a {
    text-decoration: none;
}
.woocommerce ul.products li.product a img {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    margin: 0;
    border-radius: 0;
}
.woocommerce ul.products li.product .star-rating {
    margin: 8px auto;
}
.woocommerce ul.products li.product .button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #00A88E;
    color: #fff;
    border: none;
    padding: 10px 22px;
    border-radius: 30px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    margin-top: auto;
}
.woocommerce ul.products li.product .button:hover {
    background: #008F78;
}
.woocommerce ul.products li.product .added_to_cart {
    display: none;
}
.woocommerce ul.products li.product .price {
    color: #2C2C2C;
    font-size: 15px;
    font-weight: 700;
}
.woocommerce ul.products li.product .price del {
    color: #999;
    font-size: 13px;
}
.woocommerce ul.products li.product .price ins {
    text-decoration: none;
}
.woocommerce ul.products li.product .onsale {
    background: #E74C3C;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 20px;
    min-height: auto;
    min-width: auto;
    line-height: 1.6;
    top: 10px;
    right: 10px;
}

/* Archive header */
.woocommerce-products-header {
    margin-bottom: 30px;
}
.woocommerce-products-header__title {
    font-size: 24px;
    font-weight: 800;
    color: #222;
}

/* Result count & ordering */
.woocommerce-result-count {
    font-size: 13px;
    color: #666;
    margin-bottom: 20px;
}
.woocommerce-ordering {
    margin-bottom: 20px;
}
.woocommerce-ordering select {
    padding: 8px 14px;
    border: 1px solid #ddd;
    border-radius: 10px;
    font-family: inherit;
    font-size: 13px;
    background: #fff;
    cursor: pointer;
}

/* =========================================
   SINGLE PRODUCT PAGE
   ========================================= */
.woocommerce div.product {
    display: flex;
    flex-direction: column;
}
.woocommerce div.product .product_title {
    font-size: 24px;
    font-weight: 800;
    color: #222;
    margin-bottom: 15px;
}
.woocommerce div.product .woocommerce-product-gallery {
    margin-bottom: 30px;
}
.woocommerce div.product .woocommerce-product-gallery__image img {
    border-radius: 16px;
}
.woocommerce div.product .summary {
    margin-bottom: 40px;
}
.woocommerce div.product .summary .price {
    font-size: 22px;
    font-weight: 700;
    color: #2C2C2C;
    margin-bottom: 15px;
}
.woocommerce div.product .summary .price del {
    color: #999;
    font-size: 16px;
}
.woocommerce div.product .summary .price ins {
    text-decoration: none;
}
.woocommerce div.product .summary .woocommerce-product-rating {
    margin-bottom: 15px;
}
.woocommerce div.product .summary .stock {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 15px;
}
.woocommerce div.product .summary .stock.in-stock {
    color: #00A88E;
}
.woocommerce div.product .summary .stock.out-of-stock {
    color: #E74C3C;
}
.woocommerce div.product .summary .cart {
    display: flex;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
    margin-top: 20px;
}
.woocommerce div.product .summary .cart .quantity {
    display: flex;
    align-items: center;
}
.woocommerce div.product .summary .cart .quantity input {
    width: 60px;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 10px;
    font-family: inherit;
    font-size: 14px;
    text-align: center;
}
.woocommerce div.product .summary .cart .single_add_to_cart_button {
    background: #00A88E;
    color: #fff;
    border: none;
    padding: 12px 35px;
    border-radius: 30px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}
.woocommerce div.product .summary .cart .single_add_to_cart_button:hover {
    background: #008F78;
}
.woocommerce div.product .product_meta {
    margin-top: 25px;
    padding-top: 20px;
    border-top: 1px solid #eee;
    font-size: 13px;
    color: #666;
}
.woocommerce div.product .product_meta span {
    display: block;
    margin-bottom: 5px;
}
.woocommerce div.product .product_meta a {
    color: #00A88E;
}
.woocommerce div.product .woocommerce-tabs {
    margin-top: 40px;
}
.woocommerce div.product .woocommerce-tabs ul.tabs {
    display: flex;
    gap: 5px;
    padding: 0;
    margin: 0 0 20px;
    border-bottom: 2px solid #eee;
}
.woocommerce div.product .woocommerce-tabs ul.tabs::before {
    border: none;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li {
    border: none;
    background: none;
    padding: 0;
    margin: 0;
    border-radius: 0;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li::before,
.woocommerce div.product .woocommerce-tabs ul.tabs li::after {
    display: none;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li a {
    display: block;
    padding: 12px 20px;
    font-size: 14px;
    font-weight: 600;
    color: #666;
    border-bottom: 3px solid transparent;
    transition: all 0.2s;
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
    color: #00A88E;
    border-bottom-color: #00A88E;
}
.woocommerce div.product .woocommerce-tabs .panel {
    background: #fafafa;
    padding: 25px;
    border-radius: 12px;
    border: 1px solid #f0f0f0;
}

/* Related Products */
.woocommerce div.product .related {
    margin-top: 50px;
    padding-top: 40px;
    border-top: 1px solid #eee;
}
.woocommerce div.product .related h2 {
    font-size: 20px;
    font-weight: 800;
    margin-bottom: 25px;
    color: #222;
}

/* Product gallery thumbs */
.woocommerce div.product .woocommerce-product-gallery .flex-control-thumbs {
    display: flex;
    gap: 8px;
    margin-top: 10px;
}
.woocommerce div.product .woocommerce-product-gallery .flex-control-thumbs li {
    width: 70px;
    margin: 0;
}
.woocommerce div.product .woocommerce-product-gallery .flex-control-thumbs li img {
    border-radius: 8px;
    border: 2px solid transparent;
    transition: all 0.2s;
    opacity: 0.6;
}
.woocommerce div.product .woocommerce-product-gallery .flex-control-thumbs li img.flex-active {
    border-color: #00A88E;
    opacity: 1;
}

/* Cart styles now embedded in woocommerce/cart/cart.php */

/* Checkout styles now embedded in woocommerce/checkout/form-checkout.php */

/* =========================================
   MY ACCOUNT PAGE
   ========================================= */
.woocommerce-MyAccount-navigation {
    background: #fff;
    border-radius: 12px;
    border: 1px solid #E5E7EB;
    overflow: hidden;
    margin-bottom: 30px;
}
.woocommerce-MyAccount-navigation ul {
    padding: 0;
    margin: 0;
    list-style: none;
}
.woocommerce-MyAccount-navigation ul li {
    margin: 0;
}
.woocommerce-MyAccount-navigation ul li a {
    display: block;
    padding: 14px 20px;
    font-size: 14px;
    color: #4B5563;
    border-bottom: 1px solid #F3F4F6;
    transition: all 0.2s;
}
.woocommerce-MyAccount-navigation ul li.is-active a,
.woocommerce-MyAccount-navigation ul li a:hover {
    background: #F0FDF9;
    color: #00A88E;
    font-weight: 600;
}
.woocommerce-MyAccount-content {
    background: #fff;
    border-radius: 12px;
    border: 1px solid #E5E7EB;
    padding: 28px;
}

/* =========================================
   NOTICES & MESSAGES
   ========================================= */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
    border-radius: 12px;
    padding: 14px 18px !important;
    margin-bottom: 20px !important;
    border: none !important;
    font-size: 13px;
    line-height: 1.6;
    display: flex;
    align-items: center;
    gap: 10px;
}
.woocommerce-message {
    background: #F0FDF9;
    border: 1px solid #A7F3D0 !important;
    color: #065F46;
}
.woocommerce-message a {
    color: #00A88E;
    font-weight: 600;
    margin-right: auto;
    padding: 6px 16px;
    border-radius: 8px;
    background: #fff;
    border: 1px solid #A7F3D0;
    transition: all 0.2s;
}
.woocommerce-message a:hover {
    background: #00A88E;
    color: #fff;
    border-color: #00A88E;
}
.woocommerce-info {
    background: #EFF6FF;
    border: 1px solid #BFDBFE !important;
    color: #1E40AF;
}
.woocommerce-error {
    background: #FEF2F2;
    border: 1px solid #FECACA !important;
    color: #991B1B;
}
.woocommerce .woocommerce-message::before,
.woocommerce .woocommerce-info::before,
.woocommerce .woocommerce-error::before {
    display: none;
}

/* =========================================
   STAR RATING
   ========================================= */
.woocommerce .star-rating {
    color: #F59E0B;
    font-size: 14px;
}
.woocommerce .star-rating span {
    color: #F59E0B;
}

/* =========================================
   PAGINATION (WooCommerce)
   ========================================= */
.woocommerce nav.woocommerce-pagination {
    margin-top: 40px;
}
.woocommerce nav.woocommerce-pagination ul {
    border: none;
    display: flex;
    gap: 8px;
    justify-content: center;
}
.woocommerce nav.woocommerce-pagination ul li {
    border: none;
    margin: 0;
}
.woocommerce nav.woocommerce-pagination ul li a,
.woocommerce nav.woocommerce-pagination ul li span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: #fff;
    color: #4B5563;
    font-weight: 600;
    font-size: 14px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    padding: 0;
    transition: all 0.2s;
}
.woocommerce nav.woocommerce-pagination ul li a:hover,
.woocommerce nav.woocommerce-pagination ul li span.current {
    background: #00A88E;
    color: #fff;
    box-shadow: 0 4px 12px rgba(0,168,142,0.2);
}

/* =========================================
   ORDER RECEIVED / THANK YOU PAGE
   ========================================= */
.woocommerce-order-received .woocommerce-order {
    text-align: center;
    padding: 20px 0;
}
.woocommerce-order-received .woocommerce-order .woocommerce-thankyou-order-received {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: #F0FDF9;
    border: 2px solid #00A88E;
    border-radius: 16px;
    padding: 20px 32px;
    font-size: 16px;
    font-weight: 700;
    color: #065F46;
    margin-bottom: 32px;
}
.woocommerce-order-received .woocommerce-order .woocommerce-thankyou-order-received::before {
    content: "🎉";
    font-size: 24px;
}
.woocommerce-order-received .woocommerce-order ul.order_details {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0 0 32px;
    padding: 0;
    text-align: right;
}
.woocommerce-order-received .woocommerce-order ul.order_details li {
    flex: 1;
    min-width: 140px;
    list-style: none;
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    padding: 16px;
    font-size: 12px;
    color: #6B7280;
}
.woocommerce-order-received .woocommerce-order ul.order_details li strong {
    display: block;
    font-size: 14px;
    color: #1A1A2E;
    margin-top: 4px;
    font-weight: 700;
}
.woocommerce-order-received .woocommerce-order .woocommerce-customer-details {
    text-align: right;
    background: #fff;
    border-radius: 12px;
    border: 1px solid #E5E7EB;
    padding: 24px;
}
.woocommerce-order-received .woocommerce-order .woocommerce-customer-details h2 {
    font-size: 16px;
    font-weight: 700;
    color: #1A1A2E;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #F3F4F6;
}
.woocommerce-order-received .woocommerce-order .woocommerce-customer-details address {
    font-style: normal;
    line-height: 1.8;
    color: #4B5563;
    font-size: 14px;
}

/* =========================================
   RESPONSIVE WOOCOMMERCE
   ========================================= */
@media (max-width: 992px) {
    .woocommerce ul.products {
        grid-template-columns: repeat(3, 1fr);
    }
    /* old cart form styles removed */
}
@media (max-width: 768px) {
    .woocommerce ul.products {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
    .woocommerce-main {
        padding: 20px;
    }
    .woocommerce div.product .summary .cart {
        flex-direction: column;
        align-items: flex-start;
    }
    /* old cart mobile styles removed */
    /* old checkout mobile styles removed */
}
@media (max-width: 480px) {
    .woocommerce ul.products {
        grid-template-columns: 1fr;
    }
    .woocommerce div.product .product_title {
        font-size: 20px;
    }
    .woocommerce-order-received .woocommerce-order ul.order_details li {
        min-width: 100%;
    }
}

/* =========================================
   EDR OPTIMUM CUSTOM PRODUCT TEMPLATE
   ========================================= */
.edr-page { background: #F8FAFC; direction: rtl; }
.edr-container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
.edr-section { padding: 70px 0; }
.edr-section-title {
    font-size: 28px; font-weight: 800; color: #1A1A2E;
    text-align: center; margin-bottom: 12px;
}
.edr-section-subtitle {
    font-size: 15px; color: #6B7280;
    text-align: center; max-width: 640px; margin: 0 auto 48px; line-height: 1.7;
}
.edr-hero {
    background: linear-gradient(135deg, #0D1B2A 0%, #1B3A4B 50%, #0D1B2A 100%);
    color: #fff; padding: 80px 0 60px;
}
.edr-hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: center; }
.edr-hero-content { direction: rtl; }
.edr-hero-badge {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(0,168,142,0.15); color: #00A88E;
    padding: 6px 16px; border-radius: 20px;
    font-size: 12px; font-weight: 700; margin-bottom: 20px;
    border: 1px solid rgba(0,168,142,0.3);
}
.edr-hero h1 {
    font-size: 42px; font-weight: 900; line-height: 1.2;
    margin-bottom: 16px; color: #fff;
}
.edr-hero p {
    font-size: 16px; line-height: 1.8;
    color: rgba(255,255,255,0.75); margin-bottom: 28px;
    max-width: 500px;
}
.edr-hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.edr-btn-primary {
    display: inline-flex; align-items: center; gap: 8px;
    background: #00A88E; color: #fff; border: none;
    padding: 14px 32px; border-radius: 12px;
    font-size: 15px; font-weight: 700; cursor: pointer;
    transition: all 0.25s ease; text-decoration: none;
}
.edr-btn-primary:hover {
    background: #008F78; color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0,168,142,0.35);
}
.edr-btn-outline {
    display: inline-flex; align-items: center; gap: 8px;
    background: transparent; color: #fff; border: 2px solid rgba(255,255,255,0.3);
    padding: 12px 30px; border-radius: 12px;
    font-size: 15px; font-weight: 600; cursor: pointer;
    transition: all 0.25s ease; text-decoration: none;
}
.edr-btn-outline:hover {
    border-color: #00A88E; color: #00A88E;
    transform: translateY(-2px);
}
.edr-hero-stats {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 20px; margin-top: 50px;
    padding-top: 40px; border-top: 1px solid rgba(255,255,255,0.1);
}
.edr-hero-stat { text-align: center; }
.edr-hero-stat-value { font-size: 28px; font-weight: 900; color: #00A88E; }
.edr-hero-stat-label { font-size: 12px; color: rgba(255,255,255,0.5); margin-top: 4px; }
.edr-price-card {
    background: #fff; border-radius: 16px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.06); padding: 32px;
    border: 1px solid #E5E7EB; margin-bottom: 40px;
}
.edr-price-header { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.edr-price-header h2 { font-size: 18px; font-weight: 700; color: #1A1A2E; margin: 0; }
.edr-price-amount {
    display: flex; align-items: baseline; gap: 8px;
    padding: 20px 0; border-top: 1px solid #E5E7EB;
    border-bottom: 1px solid #E5E7EB; margin-bottom: 20px;
}
.edr-price-amount .amount {
    font-size: 36px; font-weight: 900; color: #00A88E;
}
.edr-price-amount .currency { font-size: 16px; color: #6B7280; font-weight: 600; }
.edr-price-amount .period { font-size: 13px; color: #6B7280; margin-right: auto; }
.edr-price-features { list-style: none; padding: 0; margin: 0 0 24px; }
.edr-price-features li {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 0; font-size: 14px; color: #1A1A2E;
    border-bottom: 1px solid #E5E7EB;
}
.edr-price-features li:last-child { border-bottom: none; }
.edr-price-features li::before {
    content: "✓";
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 50%;
    background: #E8F8F5; color: #00A88E;
    font-size: 12px; font-weight: 700; flex-shrink: 0;
}
.edr-features-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
}
.edr-feature-card {
    background: #fff; border-radius: 16px;
    padding: 32px 24px; text-align: center;
    box-shadow: 0 4px 24px rgba(0,0,0,0.06);
    border: 1px solid #E5E7EB;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.edr-feature-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 36px rgba(0,0,0,0.08);
}
.edr-feature-icon {
    width: 64px; height: 64px; border-radius: 16px;
    background: #E8F8F5; display: flex;
    align-items: center; justify-content: center;
    margin: 0 auto 16px;
}
.edr-feature-icon svg { width: 32px; height: 32px; fill: #00A88E; }
.edr-feature-card h3 { font-size: 16px; font-weight: 700; color: #1A1A2E; margin-bottom: 8px; }
.edr-feature-card p { font-size: 13px; color: #6B7280; line-height: 1.7; margin: 0; }
.edr-scenarios { background: #fff; }
.edr-scenarios-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; }
.edr-scenario-card {
    display: flex; gap: 20px; align-items: flex-start;
    padding: 28px; border-radius: 16px;
    border: 1px solid #E5E7EB;
    transition: box-shadow 0.3s ease;
}
.edr-scenario-card:hover { box-shadow: 0 8px 28px rgba(0,0,0,0.06); }
.edr-scenario-num {
    width: 44px; height: 44px; border-radius: 12px;
    background: #E8F8F5; color: #00A88E;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; font-weight: 800; flex-shrink: 0;
}
.edr-scenario-body h3 { font-size: 16px; font-weight: 700; color: #1A1A2E; margin-bottom: 8px; }
.edr-scenario-body p { font-size: 13px; color: #6B7280; line-height: 1.7; margin: 0; }
.edr-comparison-wrap {
    background: #fff; border-radius: 16px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.06);
    border: 1px solid #E5E7EB; overflow: hidden;
}
.edr-comparison-header {
    display: grid; grid-template-columns: 1fr 1fr 1fr;
    gap: 1px; background: #E5E7EB;
}
.edr-comp-head-cell {
    padding: 20px 24px; background: #fff; text-align: center;
}
.edr-comp-head-cell:first-child { background: #F9FAFB; text-align: right; }
.edr-comp-head-cell h4 { font-size: 14px; font-weight: 700; color: #1A1A2E; margin: 8px 0 0; }
.edr-comp-head-cell .badge.recommended {
    display: inline-block; font-size: 10px; font-weight: 700;
    padding: 3px 10px; border-radius: 10px; margin-top: 6px;
    background: #E8F8F5; color: #00A88E;
}
.edr-comp-row {
    display: grid; grid-template-columns: 1fr 1fr 1fr;
    gap: 1px; background: #E5E7EB;
}
.edr-comp-row:nth-child(even) .edr-comp-cell { background: #FAFBFC; }
.edr-comp-cell {
    padding: 14px 24px; background: #fff;
    font-size: 13px; color: #1A1A2E;
    display: flex; align-items: center; gap: 8px;
}
.edr-comp-cell:first-child {
    font-weight: 600; color: #6B7280;
    font-size: 12px; background: #F9FAFB;
}
.edr-comp-cell .check { color: #00A88E; font-weight: 700; }
.edr-comp-cell .cross { color: #EF4444; font-size: 14px; }
.edr-cta {
    background: linear-gradient(135deg, #0D1B2A 0%, #1B3A4B 100%);
    text-align: center; padding: 70px 0;
}
.edr-cta h2 { font-size: 30px; font-weight: 800; color: #fff; margin-bottom: 16px; }
.edr-cta p {
    font-size: 15px; color: rgba(255,255,255,0.7);
    max-width: 560px; margin: 0 auto 32px; line-height: 1.7;
}
.edr-cta-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.edr-products-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.edr-product-card {
    background: #fff; border-radius: 16px;
    border: 1px solid #E5E7EB; overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.edr-product-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0,0,0,0.08);
}
.edr-product-card-body { padding: 24px; }
.edr-product-card h3 { font-size: 15px; font-weight: 700; color: #1A1A2E; margin-bottom: 8px; }
.edr-product-card p { font-size: 13px; color: #6B7280; line-height: 1.6; margin-bottom: 16px; }
@media (max-width: 992px) {
    .edr-hero-grid { grid-template-columns: 1fr; gap: 30px; }
    .edr-hero h1 { font-size: 32px; }
    .edr-hero-stats { grid-template-columns: repeat(2, 1fr); }
    .edr-features-grid { grid-template-columns: repeat(2, 1fr); }
    .edr-scenarios-grid { grid-template-columns: 1fr; }
    .edr-comparison-header, .edr-comp-row { grid-template-columns: 1fr; }
    .edr-products-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
    .edr-section { padding: 40px 0; }
    .edr-hero { padding: 50px 0 30px; }
    .edr-hero h1 { font-size: 26px; }
    .edr-section-title { font-size: 22px; }
    .edr-features-grid { grid-template-columns: 1fr; }
    .edr-products-grid { grid-template-columns: 1fr; }
    .edr-price-amount .amount { font-size: 28px; }
    .edr-cta h2 { font-size: 22px; }
}