/* --- Import Fonts --- */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&family=Press+Start+2P&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;600;700&display=swap'); /* Added Persian Font */

/* --- CSS Variables (Color Palette & Fonts) --- */
:root {
    --font-pixel: 'Press Start 2P', cursive;
    --font-body: 'Poppins', sans-serif;
    --font-persian: 'Vazirmatn', var(--font-body); /* Fallback to body font */

    --color-primary: #2ecc71; /* Emerald Green */
    --color-secondary: #3498db; /* Bright Blue */
    --color-accent: #f1c40f; /* Gold/Yellow */
    --color-discord: #5865F2; /* Discord Blue */

    --color-dark-bg: #2c3e50; /* Midnight Blue / Dark Stone */
    --color-light-bg: #ecf0f1; /* Clouds / Light Grey */
    --color-white: #ffffff;
    --color-dark-text: #34495e; /* Dark text, slightly softer than black */
    --color-light-text: #fdfdfd;
    --color-muted-text: #7f8c8d; /* Grey for subtitles etc. */

    --color-success: #27ae60; /* Green for success messages */
    --color-danger: #c0392b; /* Red for warnings */

    --shadow-light: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-medium: 0 6px 12px rgba(0, 0, 0, 0.15);
    --border-radius: 8px;
}

/* --- Global Styles & Reset --- */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body); /* Default to English font */
    line-height: 1.7;
    color: var(--color-dark-text);
    background-color: var(--color-white);
    font-size: 16px;
    direction: ltr; /* Default LTR */
    text-align: left; /* Default Left */
}

.container {
    max-width: 1200px; /* Slightly wider */
    margin: 0 auto;
    padding: 0 25px;
}

a {
    color: var(--color-secondary);
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: var(--color-primary);
    text-decoration: none; /* Remove underline on hover */
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-pixel); /* Pixel font for all headers */
    line-height: 1.3;
    margin-bottom: 0.75em; /* Consistent spacing */
    color: var(--color-dark-bg); /* Darker color for headers */
    text-transform: uppercase; /* Minecraft style */
}
h1 { font-size: 1.8rem; }
h2 { font-size: 1.5rem; text-align: center; margin-bottom: 2.5rem; } /* Section titles */
h3 { font-size: 1.1rem; }
h4 { font-size: 1rem; }

img {
    max-width: 100%;
    height: auto;
    display: block; /* Prevents bottom space */
}

section {
    padding: 60px 0;
}

.alternate-bg {
    background-color: var(--color-light-bg); /* Light grey for alternating sections */
}

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

/* --- Header --- */
header {
    background-color: var(--color-dark-bg);
    color: var(--color-light-text);
    padding: 15px 0;
    position: sticky; /* Sticky header */
    top: 0;
    z-index: 1000;
    box-shadow: var(--shadow-light);
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap; /* Allow wrapping on small screens */
}

header .logo {
    display: flex;
    align-items: center;
}
header .logo img {
    margin-right: 10px;
}
header .logo h1 {
    font-size: 1.4rem; /* Adjusted size */
    margin-bottom: 0; /* Remove margin from h1 */
    color: var(--color-white);
}
header .logo h1 a {
    color: inherit;
    text-decoration: none;
}

header nav ul {
    list-style: none;
    display: flex;
    align-items: center;
}

header nav ul li {
    margin-left: 25px; /* More spacing */
}

header nav ul li a {
    font-family: var(--font-pixel); /* Pixel font for nav */
    font-size: 0.8rem;
    color: var(--color-light-text);
    text-decoration: none;
    padding: 8px 12px;
    border-radius: 5px;
    transition: background-color 0.3s ease, color 0.3s ease;
    text-transform: uppercase;
    border: 1px solid transparent; /* Prepare for border */
}

header nav ul li a:hover,
header nav ul li a.active {
    background-color: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-white);
}

.server-status {
    font-size: 0.8rem;
    text-align: right;
    display: flex; /* Align items nicely */
    align-items: center;
    gap: 15px; /* Spacing between status items */
}
.server-status p {
    margin-bottom: 0;
}
.server-status .ip-address strong {
    color: var(--color-accent); /* Gold for IP */
    font-family: var(--font-body); /* Use body font for IP readability */
    font-weight: 600;
}
.server-status .player-count {
    font-weight: 600;
    color: var(--color-secondary); /* Blue for player count */
}

/* --- Buttons --- */
.button {
    font-family: var(--font-pixel); /* Pixel font for buttons */
    display: inline-block;
    background-color: var(--color-primary); /* Green */
    color: var(--color-white);
    padding: 12px 25px;
    border: none;
    border-radius: 5px; /* Slightly blocky */
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    text-transform: uppercase;
    font-size: 0.9rem;
    transition: background-color 0.3s ease, transform 0.1s ease, box-shadow 0.3s ease;
    box-shadow: 0 3px 0 #1a7e4a; /* Bottom border for 3D effect */
    border-bottom: 3px solid #1a7e4a;
}

.button:hover {
    background-color: #27ae60; /* Slightly lighter green */
    text-decoration: none;
    color: var(--color-white);
    transform: translateY(-2px); /* Lift effect */
    box-shadow: 0 5px 8px rgba(0, 0, 0, 0.2);
}
.button:active {
     transform: translateY(1px); /* Push down effect */
     box-shadow: 0 1px 0 #1a7e4a;
}

.small-button {
    padding: 8px 15px;
    font-size: 0.75rem;
    box-shadow: 0 2px 0 #1a7e4a;
    border-bottom: 2px solid #1a7e4a;
}
.small-button:active {
    box-shadow: 0 1px 0 #1a7e4a;
}


.large-button {
    padding: 15px 35px;
    font-size: 1rem;
}

/* Specific Button Colors */
.accent-button {
    background-color: var(--color-accent); /* Gold */
    color: var(--color-dark-bg);
    box-shadow: 0 3px 0 #c89d0a;
    border-bottom: 3px solid #c89d0a;
}
.accent-button:hover {
    background-color: #f3d153; /* Lighter gold */
     color: var(--color-dark-bg);
     box-shadow: 0 5px 8px rgba(0, 0, 0, 0.2);
}
.accent-button:active {
    box-shadow: 0 1px 0 #c89d0a;
}


.discord-button {
    background-color: var(--color-discord); /* Discord Blue */
     box-shadow: 0 3px 0 #454FBF;
    border-bottom: 3px solid #454FBF;
}
.discord-button:hover {
    background-color: #6e7bf5;
     box-shadow: 0 5px 8px rgba(0, 0, 0, 0.2);
}
.discord-button:active {
     box-shadow: 0 1px 0 #454FBF;
}

.buy-button { /* Shop specific */
    background-color: var(--color-secondary); /* Blue */
    box-shadow: 0 3px 0 #2980b9;
    border-bottom: 3px solid #2980b9;
}
.buy-button:hover {
    background-color: #5dade2;
     box-shadow: 0 5px 8px rgba(0, 0, 0, 0.2);
}
.buy-button:active {
    box-shadow: 0 1px 0 #2980b9;
}


/* --- Hero Section --- */
#hero {
    /* !! Replace 'images/hero-bg.jpg' with your actual background !! */
    background: url('images/hero-bg.png') no-repeat center center/cover;
    color: var(--color-white);
    text-align: center;
    padding: 100px 0; /* More padding */
    position: relative; /* For overlay */
    min-height: 60vh; /* Make it taller */
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Dark overlay for text contrast */
    z-index: 1;
}

.hero-content-container {
    position: relative; /* Above overlay */
    z-index: 2;
}

.hero-title {
    font-size: 2.8rem; /* Larger pixel title */
    margin-bottom: 1rem;
    color: var(--color-white);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
}

.hero-subtitle {
    font-family: var(--font-body); /* Readable subtitle */
    font-size: 1.4rem;
    margin-bottom: 2.5rem;
    color: var(--color-light-text);
    font-weight: 400;
     text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7);
}



.hero-buttons .button {        
    margin: 10px;
    margin-top: 150px;
}
.hero-buttons .ip-display {
    font-family: var(--font-body); /* Keep IP readable */
    font-size: 0.8em; /* Smaller than button text */
    display: block; /* Put on new line */
    margin-top: 5px;
    opacity: 0.8;
}


/* --- Section Titles --- */
.section-title {
    font-size: 1.8rem; /* Larger section titles */
    color: var(--color-dark-text);
    margin-bottom: 3rem;
    position: relative; /* For the slashes */
    display: inline-block; /* Fit content */
    padding: 0 15px;
}
.section-title span {
    color: var(--color-primary); /* Green slashes */
    display: inline-block;
    font-size: 0.8em; /* Slightly smaller */
    margin: 0 5px;
}

/* --- Cards (Used for Features, News, Shop Items) --- */
.card {
    background-color: var(--color-white);
    border-radius: var(--border-radius);
    padding: 30px;
    box-shadow: var(--shadow-light);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column; /* Stack content vertically */
    height: 100%; /* Make cards in a grid equal height */
}

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

.card-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
    color: var(--color-primary);
    text-align: center;
    /* Replace text icons with <img> or proper icon font later */
}

.card-title {
    font-size: 1.1rem; /* Smaller pixel font for card titles */
    margin-bottom: 0.75rem;
    color: var(--color-secondary); /* Blue title */
    text-align: center;
}
.card p, .card ul { /* Body text inside cards */
    font-size: 0.95rem;
    color: var(--color-muted-text);
    margin-bottom: 1rem;
    flex-grow: 1; /* Allow text to push button down */
    text-align: center;
}
.card a.button {
    margin-top: auto; /* Push button to bottom */
}

/* --- Features Section --- */
.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 30px;
}
.feature-item .card-title {
     color: var(--color-primary); /* Green title for features */
}

/* --- Community Section --- */
#community p {
    font-size: 1.1rem;
    max-width: 700px;
    margin: 0 auto 2rem auto; /* Center paragraph */
}

/* --- News Section --- */
.news-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
     gap: 30px;
}
.news-item .card-title {
     color: var(--color-dark-bg);
     text-align: left;
}
.news-item p {
    text-align: left;
     color: var(--color-dark-text); /* Darker text for news */
}
.news-item p a {
    font-weight: 600;
     color: var(--color-secondary);
}
.news-date {
    display: block;
    margin-top: 1rem;
    font-size: 0.8rem;
    color: var(--color-muted-text);
    text-align: right;
}

/* --- Shop Page Specific --- */
#shop-header p {
    font-size: 1.1rem;
    max-width: 800px;
    margin: 10px auto;
}
.store-notice {
    font-size: 0.9rem;
    color: var(--color-muted-text);
    margin-top: 1rem !important;
}
.store-notice a {
    font-weight: 600;
    color: var(--color-primary);
}
#shop-header .button {
    margin-top: 1.5rem;
}

.category-title {
    font-size: 1.6rem;
    text-align: center;
    margin-bottom: 2.5rem;
    color: var(--color-secondary); /* Blue for shop categories */
}
.category-title:nth-child(odd) { /* Alternate category title color */
    /* color: var(--color-primary); */ /* Can use green if desired */
}

/* Default (e.g., mobile-first) */
.shop-grid {
    display: grid;
    grid-template-columns: 1fr; /* 1 column on small screens */
    gap: 30px;
}

/* Medium screens (e.g., tablets) */
@media (min-width: 768px) {
    .shop-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columns */
    }
}

/* Large screens (e.g., desktops) */
@media (min-width: 992px) {
    .shop-grid {
        grid-template-columns: repeat(3, 1fr); /* 3 columns */
    }
}

.shop-item .item-image-container {
    height: 170px; /* Fixed height for image area */
    width: 100%;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-light-bg); /* Light bg for container */
    border-radius: 5px;
    overflow: hidden; /* Clip image if needed */
}
.shop-item .item-image {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain; /* Scale image down to fit */
}
.shop-item .item-image-placeholder { /* Style for text placeholder if no image */
    font-family: var(--font-pixel);
    font-size: 1.5rem;
    color: var(--color-white);
    padding: 10px;
    border-radius: 5px;
    text-align: center;
}


.shop-item .item-title {
    min-height: 2.6em; /* Prevent title height jumps */
    margin-bottom: 0.5rem;
}

.shop-item .item-price {
    font-family: var(--font-body); /* Readable price */
    font-weight: 700;
    color: var(--color-success); /* Green price */
    font-size: 1.3rem;
    margin-bottom: 10px;
    text-align: center;
}
.shop-item .price-term {
    font-size: 0.7em;
    font-weight: 400;
    color: var(--color-muted-text);
}

.shop-item .item-description {
    font-size: 0.9rem;
    color: var(--color-dark-text); /* Darker text */
    text-align: center;
     margin-bottom: 1.5rem;
}

.shop-item .item-perks {
    /* Core Scrolling Properties */
    max-height: 160px;  /* ADJUST THIS VALUE! Max height before scrolling starts */
    overflow-y: auto;   /* Show vertical scrollbar only when needed */
    overflow-x: hidden; /* Hide horizontal scrollbar if content ever wraps weirdly */

    /* Adjust Flexbox behavior */
    flex-grow: 0;       /* Don't let the list grow infinitely */
    flex-shrink: 1;     /* Allow the list to shrink if space is limited */

    /* List styling (ensure list looks good inside scroll area) */
    list-style: none;
    padding-left: 5px;  /* Reset default padding */
    padding-right: 15px; /* Add padding on the right for scrollbar space */
    margin-bottom: 1.5rem; /* Keep margin below the list */
    text-align: left;   /* Ensure text aligns left */
    font-size: 0.9rem;

    /* Optional: Add some visual indication or padding */
    border: 1px solid transparent; /* Prevent slight jump when scrollbar appears */
    margin-right: -10px; /* Offset the padding-right slightly if needed */


    /* --- Scrollbar Styling (Optional but recommended) --- */

    /* Standard scrollbar styling (Firefox) */
    scrollbar-width: thin;
    scrollbar-color: var(--color-muted-text) var(--color-light-bg); /* thumb color track color */
}

.shop-item .item-perks::-webkit-scrollbar {
    width: 8px; /* Width of the scrollbar */
}

.shop-item .item-perks::-webkit-scrollbar-track {
    background: var(--color-light-bg); /* Color of the tracking area */
    border-radius: 4px;
    margin-top: 5px; /* Add small margin at top/bottom of track */
    margin-bottom: 5px;
}

.shop-item .item-perks::-webkit-scrollbar-thumb {
    background-color: var(--color-muted-text); /* Color of the scroll thumb */
    border-radius: 4px;       /* Roundness of the scroll thumb */
    border: 2px solid var(--color-light-bg); /* Creates padding around thumb */
}
.shop-item .item-perks::-webkit-scrollbar-thumb:hover {
    background-color: var(--color-dark-text); /* Darker thumb on hover */
}

body.rtl .shop-item .item-perks {
    text-align: right;   /* Align text right */
    padding-left: 15px;  /* Add padding on the left for scrollbar */
    padding-right: 5px; /* Reset right padding */
    margin-left: -10px;  /* Offset left padding */
    margin-right: 0;
}

body.rtl .shop-item .item-perks li {
     padding-left: 0;
     padding-right: 5px; /* Slight indent for items in RTL */
}

body.rtl .shop-item .perk-icon {
    margin-right: 0;
    margin-left: 8px; /* Space after icon in RTL */
}

.shop-item .item-perks li {
    margin-bottom: 8px;
    color: var(--color-dark-text);
}
.shop-item .perk-icon {
    margin-right: 8px;
    color: var(--color-accent); /* Gold for perk icons */
    /* display: inline-block; */
    /* width: 1em; */ /* Align icons if needed */
}

.shop-item .buy-button {
    margin-top: auto; /* Ensures button is at the bottom */
}

#shop-disclaimer {
    padding: 30px 0;
}
.disclaimer-title {
    font-size: 1.2rem;
    color: var(--color-danger);
    margin-bottom: 1rem;
}
#shop-disclaimer p {
    font-size: 0.9rem;
    color: var(--color-muted-text);
    max-width: 700px;
    margin: 5px auto;
}
#shop-disclaimer a {
    color: var(--color-secondary);
    font-weight: 600;
}

/* --- Footer --- */
footer {
    background-color: var(--color-dark-bg);
    color: #bdc3c7; /* Lighter grey for footer text */
    text-align: center;
    padding: 30px 0;
    margin-top: 40px;
    font-size: 0.9rem;
}
footer p {
     margin-bottom: 8px;
}
footer a {
     color: var(--color-light-bg); /* Lighter links in footer */
}
footer a:hover {
     color: var(--color-primary);
}


/* --- Responsiveness --- */
@media (max-width: 992px) {
    .container {
        padding: 0 20px;
    }
    h1 { font-size: 1.6rem; }
    .hero-title { font-size: 2.2rem; }
    .hero-subtitle { font-size: 1.2rem; }
    .section-title { font-size: 1.5rem; }

    .features-grid, .shop-grid, .news-grid {
         grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Adjust breakpoint */
    }
}

@media (max-width: 768px) {
    h1 { font-size: 1.4rem; }
    h2 { font-size: 1.3rem; } /* Section titles */
    .hero-title { font-size: 1.8rem; }
    .hero-subtitle { font-size: 1rem; }
    #hero { padding: 80px 0; min-height: 50vh; }

    .header-content {
        flex-direction: column;
        text-align: center;
    }
    header .logo { margin-bottom: 10px; }
    header nav { margin: 10px 0; }
    header nav ul { justify-content: center; }
    .server-status {
        justify-content: center; /* Center status items */
        flex-wrap: wrap;
        gap: 10px;
        margin-top: 10px;
    }

    .features-grid, .shop-grid, .news-grid {
        grid-template-columns: 1fr; /* Stack everything */
    }
    .shop-item .item-title {
        min-height: 0; /* Disable min-height when stacked */
    }
}

@media (max-width: 480px) {
     body { font-size: 15px; }
     h1 { font-size: 1.3rem; }
     .hero-title { font-size: 1.6rem; }
     .hero-buttons .button { font-size: 0.9rem; padding: 12px 20px; }
     .button { padding: 10px 20px; font-size: 0.8rem; }
     .large-button { padding: 12px 25px; font-size: 0.9rem; }
     .small-button { padding: 6px 12px; font-size: 0.7rem; }
     .card { padding: 20px; }
     .shop-item .item-price { font-size: 1.1rem; }
}

/* --- Styles for Main Shop Category Page --- */
#shop-intro p {
    max-width: 800px; /* Or adjust as needed */
    margin-left: auto;
    margin-right: auto;
}

.shop-category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
}

.category-card {
    /* Uses .card styles by default */
    text-align: center; /* Center content within category card */
}

.category-card .category-icon {
     /* Re-using card-icon styles is fine, or customize */
    margin-bottom: 1.5rem; /* More space below icon */
    height: 80px; /* Example fixed height */
    display: flex;
    align-items: center;
    justify-content: center;
}
.category-card .category-icon img {
    max-height: 100%;
    max-width: 80%; /* Don't let icon fill entire space */
    object-fit: contain;
}

.category-card .category-title {
    /* Re-using card-title styles is fine, or customize */
     color: var(--color-primary); /* Example: Green titles for categories */
     font-size: 1.2rem;
}

.category-card p {
    min-height: 60px; /* Give description some minimum space */
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
}

.category-card .button {
    margin-top: auto; /* Push button to bottom */
}


/* --- Styles for Sub-Category Pages --- */
.category-header {
    padding-bottom: 40px; /* Add padding below header */
}

.breadcrumbs {
    font-size: 0.9rem;
    color: var(--color-muted-text);
    margin-bottom: 2rem;
    text-align: center; /* Or left-align if preferred */
}
.breadcrumbs a {
    color: var(--color-secondary);
    text-decoration: none;
}
.breadcrumbs a:hover {
    text-decoration: underline;
}

.item-listing {
    padding-top: 40px; /* Add padding above item grid */
}

/* Optional: Add specific styles for permission items if needed */
.permission-item {
    /* Example: Could have simpler layout than rank/item cards */
}

/* --- Language Switcher --- */
.language-switcher {
    display: flex;
    align-items: center;
    margin-left: 20px; /* Adjust spacing as needed */
}

.lang-button {
    background: none;
    border: none;
    color: var(--color-light-text);
    font-family: var(--font-body); /* Use readable font */
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    padding: 5px 8px;
    border-radius: 4px;
    transition: background-color 0.3s ease, color 0.3s ease;
    opacity: 0.7;
}

.lang-button.active {
    background-color: var(--color-primary);
    color: var(--color-white);
    opacity: 1;
}
.lang-button:not(.active):hover {
    opacity: 1;
    background-color: rgba(255, 255, 255, 0.1);
}

.lang-separator {
    color: var(--color-muted-text);
    margin: 0 5px;
    opacity: 0.5;
}

/* Adjust header layout if needed to accommodate switcher */
.header-content {
    /* Might need adjustments depending on flex setup */
}

/* Ensure switcher stays in view on mobile */
@media (max-width: 768px) {
    .language-switcher {
        order: -1; /* Move switcher above nav maybe */
        margin: 0 0 10px 0; /* Adjust spacing */
        justify-content: center; /* Center on mobile */
    }
}

/* --- RTL Styles --- */
body.rtl {
    direction: rtl;
    text-align: right;
    font-family: var(--font-persian); /* Apply Persian font */
}

/* Override specific elements for RTL */
body.rtl h1,
body.rtl h2,
body.rtl h3,
body.rtl h4,
body.rtl h5,
body.rtl h6 {
     /* Ensure headings align right */
     text-align: right;
}
body.rtl .section-title span {
    /* Adjust slash direction if desired, or just let text-align handle it */
}


/* Header */
body.rtl header nav ul li {
    margin-left: 0;
    margin-right: 25px; /* Reverse margin */
}
body.rtl .language-switcher {
    margin-left: 0;
    margin-right: 20px; /* Reverse margin */
}
body.rtl .server-status {
    text-align: left; /* Status might look better left-aligned in RTL */
}
body.rtl .header-content {
    /* Might need flex-direction: row-reverse if elements jump weirdly */
}


/* Grids (might need reversing based on visual preference) */
/* body.rtl .features-grid,
body.rtl .shop-grid,
body.rtl .news-grid,
body.rtl .shop-category-grid {
    direction: ltr; /* Sometimes keep grid LTR internally for item order */
/* } */


/* Cards */
body.rtl .card p,
body.rtl .card ul {
    text-align: right; /* Ensure card text aligns right */
}
body.rtl .news-item .news-date {
    text-align: left; /* Date might look better on the left */
}
body.rtl .shop-item .item-perks {
    text-align: right;
    padding-left: 0;
    padding-right: 10px; /* Adjust padding */
}
body.rtl .shop-item .perk-icon {
    margin-right: 0;
    margin-left: 8px; /* Reverse icon margin */
}

/* Breadcrumbs */
body.rtl .breadcrumbs {
    text-align: right;
}
body.rtl .breadcrumbs a {
    /* Adjust styling if needed */
}

/* Footer */
body.rtl footer {
    text-align: right;
}

/* --- Specific Font Overrides for Pixel Font in RTL --- */
/* Keep pixel font for headings but allow body font for numbers/symbols if needed */
body.rtl .card-title,
body.rtl .item-title,
body.rtl .disclaimer-title,
body.rtl .category-title,
body.rtl .section-title,
body.rtl h1, body.rtl h2, body.rtl h3, body.rtl h4, body.rtl h5, body.rtl h6 {
    font-family: var(--font-pixel), var(--font-persian); /* Add Persian as fallback for pixel */
}
body.rtl .button {
     font-family: var(--font-pixel), var(--font-persian);
}