/*
Theme Name: Ray Azar Real Estate Custom Theme
Theme URI: https://rayazar.com
Author: Ray Azar Real Estate
Description: A luxury, highly responsive custom real estate theme crafted specifically for Ray Azar Real Estate Brokerage. Matches the live rayazar.com design. Fully integrated with custom page templates.
Version: 3.18.1
Text Domain: ray-azar-real-estate
*/

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

/* Images: never overflow their container, and never stretch out of
   aspect ratio when only a width is set (WordPress adds fixed width/height
   attributes to every inserted image, which otherwise wins over a partial
   inline style like "width:100%" alone). Elements with an explicit inline
   height (e.g. logos) still override this via normal CSS specificity. */
img {
    max-width: 100%;
    height: auto;
}

:root {
    --color-accent: #9a2c46;
    --color-accent-dark: #7d2338;
    --color-heading: #1a1a1a;
    --color-body: #6b7280;
    --color-bg-cream: #f7f4ee;
    --color-bg-stats: #e7e3dc;
    --color-bg-footer: #e3ded6;
    --color-icon-bg: #f5e2e6;
    --color-gold: #b8935f;
    --color-gold-light: #d4af37;
    --shadow-sm: 0 1px 3px rgba(26,26,26,0.05);
    --shadow-md: 0 12px 24px -8px rgba(26,26,26,0.10);
    --shadow-lg: 0 24px 48px -12px rgba(26,26,26,0.16);
    --radius-md: 14px;
    --radius-lg: 20px;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Inter', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    color: var(--color-body);
    background-color: #ffffff;
    line-height: 1.6;
}

h1, h2, h3, h4, h5, h6, .brand-title {
    font-family: 'Playfair Display', Georgia, serif;
    color: var(--color-heading);
    font-weight: 700;
}

a {
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-accent);
    color: #ffffff !important;
    padding: 14px 26px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    box-shadow: 0 4px 6px -1px rgba(154, 44, 70, 0.15);
    transition: all 0.2s ease;
    border: none;
    cursor: pointer;
    gap: 8px;
}

.btn-primary:hover {
    background-color: var(--color-accent-dark);
    transform: translateY(-1px);
    box-shadow: 0 10px 15px -3px rgba(154, 44, 70, 0.25);
}

.btn-primary:active {
    transform: scale(0.98);
}

.btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
    color: var(--color-heading) !important;
    padding: 14px 26px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    border: 1px solid #e5e0d8;
    cursor: pointer;
}

.btn-secondary:hover {
    background-color: #f5f2ec;
}

.btn-outline-light {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #f2ede4;
    color: var(--color-heading) !important;
    padding: 14px 26px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    border: none;
    gap: 8px;
}

.btn-outline-light:hover {
    background-color: #ffffff;
}

.section-padding {
    padding: 80px 0;
}

.text-center { text-align: center; }
.mb-4 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }

.grid-3,
.grid-4 {
    display: table;
    width: 100%;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 24px 0;
    margin: 0 -24px;
}
/* table-layout:fixed splits the row evenly, so .grid-4 needs no width rules
   of its own, it just holds one more .grid-col than .grid-3 does. */
.grid-4 .service-card {
    padding: 26px;
}
.grid-col {
    display: table-cell;
    vertical-align: top;
    background: #ffffff;
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background-color: rgba(247, 244, 238, 0.95);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid #ece7dd;
    height: 80px;
}

/* Flexbox rather than display:table. The old table layout gave the
   brand a fixed 350px cell, which cramped the nav once the language
   switcher was added and left the eXp logo colliding with the menu.
   Flex also mirrors automatically under RTL, so the Farsi header lays
   itself out correctly with no separate rules. */
.header-container {
    /* Pinned to LTR for the same reason as .site-topbar__inner further
       down: keeping logo / nav / CTA / language switcher in the same
       physical spot regardless of language, so the header stays
       predictable to navigate rather than rearranging itself on every
       switch. Text inside still renders correctly RTL either way. */
    direction: ltr;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    width: 100%;
    height: 80px;
}

.header-brand {
    flex: 0 0 auto;
    min-width: 0;
}

.header-nav {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    justify-content: center;
}

.header-cta {
    flex: 0 0 auto;
}

.brand-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
}

.brand-logo, .brand-text-meta {
    flex: 0 0 auto;
}

/* Divider before the eXp Realty logo. Logical properties (inline-start)
   rather than left/right so the divider flips to the correct side
   automatically in RTL instead of sitting on the wrong edge. */
.brand-partner {
    margin-inline-start: 8px;
    padding-inline-start: 16px;
    border-inline-start: 1px solid #d6d0c5;
    display: flex;
    align-items: center;
}
.brand-partner img {
    height: 30px;
    width: auto;
    display: block;
}

.brand-logo-box {
    width: 42px;
    height: 42px;
    background-color: #1a1a1a;
    border-radius: 4px;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    margin-right: 12px;
}

.brand-logo-box span {
    font-family: 'Playfair Display', serif;
    color: #c9a04f;
    font-size: 18px;
}

.brand-logo img {
    height: 45px;
    width: auto;
    margin-right: 12px;
}

.brand-title {
    font-size: 20px;
    line-height: 1.2;
}

.brand-subtitle {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #6b7280;
}

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

.main-navigation ul, .nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.main-navigation li, .nav-list li {
    display: inline-block;
    margin: 0 15px;
}

.main-navigation a, .nav-list a {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-heading);
}

.main-navigation a:hover, .main-navigation .current-menu-item a,
.nav-list a:hover, .nav-list .current-menu-item a {
    color: var(--color-accent);
}

.header-cta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}

/* Language switcher — two explicit buttons (English / فارسی) */
.lang-switch {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid #d6d0c5;
    border-radius: 999px;
    overflow: hidden;
    background: #fff;
    flex-shrink: 0;
    /* Always render the two buttons English-first, in both text
       directions, so the control doesn't reorder when the site flips to
       RTL — a switcher that swaps position between languages is
       disorienting to use. */
    direction: ltr;
}
.lang-switch__btn {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1;
    color: #78716c;
    white-space: nowrap;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.lang-switch__btn + .lang-switch__btn {
    border-left: 1px solid #ece7dd;
}
.lang-switch__btn:hover {
    background: #f5f2ed;
    color: var(--color-heading);
}
.lang-switch__btn.is-active {
    background: var(--color-accent);
    color: #fff;
    cursor: default;
}
.lang-switch--mobile { display: none; }

@media (max-width: 900px) {
    .lang-switch--desktop { display: none; }
    .lang-switch--mobile {
        display: inline-flex;
        margin-top: 14px;
    }
}

.service-overview p { margin-bottom: 18px; }
.service-overview p:last-child { margin-bottom: 0; }
.service-overview h3 {
    font-size: 19px;
    margin: 26px 0 12px;
    color: var(--color-heading);
}

/* ==========================================================================
   Services dropdown (auto-injected under the "Services" nav item)
   ========================================================================== */
.nav-list li.menu-item-has-children {
    position: relative;
}
.nav-list li.menu-item-has-children > a::after {
    content: "▾";
    font-size: 10px;
    margin-left: 5px;
    display: inline-block;
    vertical-align: middle;
}
.nav-list .sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    border: 1px solid #ece7dd;
    border-radius: 12px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.08);
    padding: 10px;
    min-width: 240px;
    z-index: 100;
    text-align: left;
}
/* Desktop: hover reveals the dropdown */
@media (min-width: 901px) {
    .nav-list li.menu-item-has-children:hover .sub-menu {
        display: block;
    }
}
.nav-list .sub-menu li {
    display: block;
    margin: 0;
}
.nav-list .sub-menu li a {
    display: block;
    padding: 9px 14px;
    border-radius: 8px;
    font-size: 13.5px;
    white-space: nowrap;
}
.nav-list .sub-menu li a:hover {
    background: var(--color-icon-bg);
    color: var(--color-accent);
}
.submenu-toggle-btn {
    display: none;
}

/* ==========================================================================
   Mobile header & navigation
   ========================================================================== */
.mobile-menu-toggle {
    display: none;
    background: none;
    border: none;
    color: var(--color-heading);
    padding: 6px;
    cursor: pointer;
}

@media (max-width: 900px) {
    .site-header {
        height: auto;
    }
    .header-container {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: auto;
        padding: 14px 0;
        flex-wrap: wrap;
    }
    .header-brand {
        flex: 0 1 auto;
    }
    .header-nav { display: none; }
    .brand-wrapper { flex-wrap: nowrap; }
    .brand-subtitle,
    .brand-partner {
        display: none;
    }
    .brand-logo img { height: 34px; margin-right: 8px; }
    .brand-title { font-size: 16px; }

    .mobile-menu-toggle { display: block; }

    .header-cta { display: none; }

    /* The nav becomes a full-width toggleable panel below the header row */
    .header-nav {
        display: none;
        width: 100%;
        order: 10;
        margin-top: 14px;
        border-top: 1px solid #ece7dd;
        padding-top: 14px;
    }
    .header-nav.is-open { display: block; }

    .nav-list {
        display: block;
    }
    .nav-list li {
        display: block;
        margin: 0;
    }
    .nav-list li a {
        display: block;
        padding: 12px 4px;
        font-size: 15px;
        border-bottom: 1px solid #f3f0e9;
    }
    .nav-list li.menu-item-has-children > a::after {
        display: none; /* replaced by the injected toggle button below */
    }

    /* Submenu: hidden by default, expanded via the JS-injected toggle
       button (tapping the "Services" link itself still navigates there) */
    .nav-list .sub-menu {
        display: none;
        position: static;
        transform: none;
        box-shadow: none;
        border: none;
        border-radius: 0;
        padding: 0 0 0 16px;
        min-width: 0;
    }
    .nav-list li.menu-item-has-children.submenu-open .sub-menu {
        display: block;
    }
    .nav-list .sub-menu li a {
        padding: 11px 4px;
        border-bottom: 1px solid #f3f0e9;
        white-space: normal;
    }

    /* Toggle chevron button injected next to items with a submenu */
    .submenu-toggle-btn {
        position: absolute;
        right: 0;
        top: 4px;
        background: var(--color-icon-bg);
        border: none;
        width: 32px;
        height: 32px;
        border-radius: 8px;
        color: var(--color-accent);
        font-size: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: transform 0.2s ease;
    }
    .nav-list li.menu-item-has-children.submenu-open .submenu-toggle-btn {
        transform: rotate(180deg);
    }

    .mobile-book-btn {
        display: block;
        width: 100%;
        text-align: center;
        margin-top: 16px;
    }

    /* Fix the site-wide two-column "table/table-cell" layout pattern
       (used on About, Services, Contact, and individual service pages)
       so columns stack vertically instead of squeezing into unreadably
       narrow side-by-side columns on small screens. */
    [style*="display:table;"] {
        display: block !important;
    }
    [style*="display:table-cell;"] {
        display: block !important;
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-bottom: 24px;
    }
    [style*="display:table-row;"] {
        display: block !important;
    }

    /* Stack the class-based "table" layouts too (grid-3 service/testimonial
       cards, footer columns, stats bar) — the fix above only catches
       inline styles, so these need their own rules. */
    .grid-3,
    .grid-4 {
        display: block !important;
        margin: 0 !important;
    }
    .grid-col {
        display: block !important;
        width: 100% !important;
        margin-bottom: 24px;
    }
    .grid-col:last-child {
        margin-bottom: 0;
    }

    .footer-grid {
        display: block !important;
        border-spacing: 0 !important;
    }
    .footer-col {
        display: block !important;
        width: 100% !important;
        margin-bottom: 32px;
    }
    .footer-col:last-child {
        margin-bottom: 0;
    }

    .stats-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 28px 16px;
    }
    .stat-col {
        border-left: none !important;
    }

    /* Inline CSS-grid layouts (reviews, brokerage logos, blog cards,
       related-post grids, service grids) — collapse to 2 columns on
       tablets so nothing gets squeezed into unreadable narrow strips. */
    [style*="grid-template-columns"] {
        grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    }
}
@media (max-width: 640px) {
    /* On phones, drop those same grids to a single column. */
    [style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
    }
}
@media (min-width: 901px) {
    .mobile-book-btn { display: none; }
}

.hero-banner {
    background-color: var(--color-bg-cream);
    background-size: cover;
    background-position: center;
}

.stats-bar {
    background-color: var(--color-bg-stats);
    padding: 40px 0;
}

.stats-grid {
    display: table;
    width: 100%;
    table-layout: fixed;
}

.stat-col {
    display: table-cell;
    text-align: center;
}

.stat-number {
    font-family: 'Playfair Display', serif;
    font-size: 34px;
    color: var(--color-accent);
    font-weight: 700;
}

.stat-label {
    font-size: 13px;
    color: var(--color-body);
    margin-top: 6px;
}

.service-icon {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    background-color: var(--color-icon-bg);
    color: var(--color-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    font-size: 22px;
}

.site-footer {
    background-color: var(--color-bg-footer);
    color: #4b5563;
    padding: 70px 0 30px 0;
}

.footer-grid {
    display: table;
    width: 100%;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 40px 0;
}

.footer-col {
    display: table-cell;
    vertical-align: top;
}

.footer-title {
    color: var(--color-heading);
    font-size: 18px;
    margin-bottom: 24px;
}

.footer-links {
    list-style: none;
}

.footer-links li {
    margin-bottom: 12px;
}

.footer-links a {
    color: #57534e;
    font-size: 14px;
}

.footer-links a:hover {
    color: var(--color-accent);
}

.contact-info-list {
    list-style: none;
}

.contact-info-list li {
    margin-bottom: 12px;
    font-size: 14px;
    color: #57534e;
}

.footer-bottom {
    margin-top: 50px;
    padding-top: 20px;
    border-top: 1px solid #d6d0c5;
    font-size: 13px;
    color: #78716c;
}

.service-card {
    background: #ffffff;
    border: 1px solid #ece7dd;
    border-radius: 16px;
    padding: 32px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    transition: all 0.3s ease;
}

.service-card:hover {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.08);
    transform: translateY(-4px);
}

.testimonial-card {
    background: #efece6;
    border-radius: 12px;
    padding: 28px;
}

.testimonial-card .stars {
    color: var(--color-gold-light);
    font-size: 15px;
    margin-bottom: 14px;
}

.testimonial-card .quote {
    font-style: italic;
    font-size: 14px;
    color: #4b5563;
    margin-bottom: 16px;
    line-height: 1.6;
}

.testimonial-card .author-name {
    font-weight: 600;
    font-size: 14px;
    color: var(--color-heading);
}

.testimonial-card .author-loc {
    font-size: 13px;
    color: #78716c;
}

.cta-banner {
    background-color: var(--color-accent);
    color: #ffffff;
    text-align: center;
    padding: 70px 0;
}

.cta-banner h2 {
    color: #ffffff;
}

.cta-banner p {
    color: #f3d9df;
}

.why-choose-list {
    list-style: none;
}

.why-choose-list li {
    margin-bottom: 18px;
    font-size: 15px;
    color: #374151;
    padding-inline-start: 30px;
    position: relative;
}

.why-choose-list li:before {
    content: "\2713";
    position: absolute;
    inset-inline-start: 0;
    top: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1px solid var(--color-accent);
    color: var(--color-accent);
    font-size: 11px;
    text-align: center;
    line-height: 18px;
}

.newsletter-form input[type="email"] {
    width: 100%;
    padding: 12px;
    border-radius: 6px;
    border: 1px solid #d6d0c5;
    background-color: #ffffff;
    color: #1a1a1a;
    margin-bottom: 10px;
}

/* Contact Form 7 styling to match site design */
.wpcf7-form p {
    margin-bottom: 20px;
}

.wpcf7-form label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-heading);
    margin-bottom: 8px;
}

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form textarea {
    width: 100%;
    padding: 12px 14px;
    border-radius: 8px;
    border: 1px solid #d6d0c5;
    font-size: 14px;
    font-family: inherit;
    background-color: #ffffff;
    color: #1a1a1a;
}

.wpcf7-form textarea {
    resize: vertical;
}

.wpcf7-form input[type="submit"] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-accent);
    color: #ffffff;
    padding: 14px 26px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    border: none;
    cursor: pointer;
    width: 100%;
    transition: all 0.2s ease;
}

.wpcf7-form input[type="submit"]:hover {
    background-color: var(--color-accent-dark);
}

.wpcf7-form input[type="submit"]:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.wpcf7-not-valid-tip {
    color: #b91c1c;
    font-size: 12px;
    margin-top: 4px;
    display: block;
}

.wpcf7-response-output {
    margin-top: 20px !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    padding: 12px 16px !important;
}

.wpcf7-mail-sent-ok {
    border-color: #16a34a !important;
    color: #15803d !important;
    background-color: #f0fdf4;
}

.wpcf7-validation-errors,
.wpcf7-acceptance-missing {
    border-color: #dc2626 !important;
    color: #b91c1c !important;
    background-color: #fef2f2;
}

.wpcf7-spinner {
    margin-left: 10px;
}

/* ==========================================================================
   Blog layout: main column + sidebar (categories, recent posts, CTA)
   ========================================================================== */
.blog-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 40px;
    align-items: start;
}
@media (max-width: 900px) {
    .blog-layout { grid-template-columns: 1fr; }
}

.blog-sidebar {
    position: sticky;
    top: 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.sidebar-box {
    background: #ffffff;
    border: 1px solid #ece7dd;
    border-radius: 16px;
    padding: 26px;
}

.sidebar-title {
    font-size: 16px;
    margin-bottom: 16px;
    color: var(--color-heading);
}

.sidebar-cat-list, .sidebar-recent-list {
    list-style: none;
}

.sidebar-cat-list li { margin-bottom: 4px; }

.sidebar-cat-list a {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    color: #57534e;
    padding: 8px 10px;
    border-radius: 8px;
}
.sidebar-cat-list a span { color: #a8a29e; font-size: 13px; }
.sidebar-cat-list a:hover { background: #f7f4ee; color: var(--color-accent); }
.sidebar-cat-list a.is-active {
    background: var(--color-icon-bg);
    color: var(--color-accent);
    font-weight: 600;
}

.sidebar-recent-list li {
    padding: 12px 0;
    border-bottom: 1px solid #f0ece3;
}
.sidebar-recent-list li:last-child { border-bottom: none; padding-bottom: 0; }
.sidebar-recent-list a {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-heading);
    line-height: 1.4;
    margin-bottom: 4px;
}
.sidebar-recent-list a:hover { color: var(--color-accent); }
.sidebar-recent-date { font-size: 12px; color: #a8a29e; }

.sidebar-cta {
    background: var(--color-accent);
    color: #f7f4ee;
}
.sidebar-cta p { color: #f0d9de; font-size: 14px; margin-top: 8px; }

/* Category pill shown on blog cards */
.post-cat-pill {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--color-accent);
    background: var(--color-icon-bg);
    padding: 4px 10px;
    border-radius: 999px;
    margin-bottom: 12px;
}

/* Single post: category pill + author line spacing */
.single-post-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    font-size: 14px;
    color: #6b7280;
}

/* ==========================================================================
   Visual enhancement layer
   ========================================================================== */

/* Signature accent under major section headings */
.section-heading {
    position: relative;
    padding-bottom: 18px;
    margin-bottom: 12px !important;
}
.section-heading::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%) scaleX(0);
    transform-origin: center;
    width: 56px;
    height: 3px;
    background: linear-gradient(90deg, var(--color-accent), var(--color-gold));
    border-radius: 2px;
    transition: transform 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) 0.1s;
}
/* JS adds .is-visible as the heading enters the viewport, striking the
   line the way a rule is drawn on a survey. Without JS the fallback at
   the bottom of this file leaves it permanently drawn. */
.section-heading.is-visible::after { transform: translateX(-50%) scaleX(1); }
.section-heading.align-left::after { left: 0; transform: none; transform-origin: left center; }
.section-heading.align-left.is-visible::after { transform: scaleX(1); }
[dir="rtl"] .section-heading.align-left::after { transform-origin: right center; }

/* Page-header / hero depth: subtle radial texture instead of flat cream */
.page-hero-enhanced {
    position: relative;
    overflow: hidden;
}
.page-hero-enhanced::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 15% 20%, rgba(154,44,70,0.07), transparent 45%),
        radial-gradient(circle at 85% 80%, rgba(184,147,95,0.10), transparent 45%);
    pointer-events: none;
}
.page-hero-enhanced > * { position: relative; z-index: 1; }

/* Icon badge: larger variant for page-hero use, consistent with .service-icon */
.icon-badge-lg {
    width: 68px;
    height: 68px;
    border-radius: 18px;
    background: linear-gradient(135deg, var(--color-icon-bg), #fff);
    color: var(--color-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    margin: 0 auto 20px;
    box-shadow: var(--shadow-sm);
    border: 1px solid rgba(154,44,70,0.08);
}

/* Card polish: refined shadow scale + gold hairline on hover */
.service-card {
    box-shadow: var(--shadow-sm);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.service-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-4px);
    border-color: rgba(184,147,95,0.35);
}

/* FAQ accordion */
.faq-item {
    background: #fff;
    border: 1px solid #ece7dd;
    border-radius: var(--radius-md);
    margin-bottom: 14px;
    overflow: hidden;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.faq-item[open] {
    border-color: rgba(154,44,70,0.25);
    box-shadow: var(--shadow-sm);
}
.faq-item summary {
    list-style: none;
    cursor: pointer;
    padding: 20px 24px;
    font-size: 16px;
    font-weight: 600;
    color: var(--color-heading);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
    content: "+";
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--color-icon-bg);
    color: var(--color-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: transform 0.25s ease;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item .faq-answer {
    padding: 0 24px 20px;
    font-size: 14.5px;
    color: #57534e;
    line-height: 1.7;
}

/* Review / testimonial card quote accent */
.review-card {
    position: relative;
}
.review-card .quote-mark {
    font-family: 'Playfair Display', serif;
    font-size: 48px;
    line-height: 1;
    color: var(--color-icon-bg);
    position: absolute;
    top: 12px;
    right: 20px;
    z-index: 0;
}
.review-card > * { position: relative; z-index: 1; }

/* Stats bar: divider hairlines between columns */
.stat-col {
    border-left: 1px solid rgba(0,0,0,0.06);
}
.stat-col:first-child { border-left: none; }

/* Subtle scroll-reveal (fade + rise). No-JS and reduced-motion safe:
   elements are visible by default and only animate once .is-visible
   is added by the small IntersectionObserver script in main.js. */
.reveal-on-scroll {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal-on-scroll.is-visible {
    opacity: 1;
    transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
    .reveal-on-scroll {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* Buttons: subtle arrow micro-interaction on inline text links */
a[style*="var(--color-accent)"] {
    transition: opacity 0.2s ease;
}

/* ==========================================================================
   Farsi / RTL support
   ----------------------------------------------------------------------
   The <html> tag gets dir="rtl" + lang="fa" automatically (see
   inc/lang-core.php) whenever Farsi is active, and CSS `direction` is an
   inherited property — so most flex/grid layouts already in this theme
   (header nav, footer icon row, etc.) automatically mirror correctly with
   no extra work, since "row" reverses direction under RTL by spec.
   This section covers what does NOT auto-mirror: webfont choice for
   Farsi glyphs, and a handful of hard-coded left/right values.
   ========================================================================== */
body.lang-fa {
    font-family: 'Vazirmatn', Tahoma, Arial, sans-serif;
}
body.lang-fa h1,
body.lang-fa h2,
body.lang-fa h3,
body.lang-fa h4,
body.lang-fa h5,
body.lang-fa h6,
body.lang-fa .brand-title,
body.lang-fa .section-heading,
body.lang-fa .stat-number {
    /* Playfair Display has no Farsi glyphs, so headings need an explicit
       Farsi-capable face rather than relying on browser font fallback,
       which looks inconsistent across devices. */
    font-family: 'Vazirmatn', Tahoma, Arial, sans-serif;
    font-weight: 700;
}

/* Numerals (stat counters, prices, phone numbers) stay in Western digits
   by design — common practice on Farsi business sites — so no digit
   conversion here, but phone/email in the footer are forced back to LTR
   directly in footer.php since a phone number reads the same either way. */

body.lang-fa .nav-list li.menu-item-has-children > a::after {
    content: "▾"; /* unchanged glyph; position mirrors automatically via RTL flex */
}

/* The decorative quote mark on review cards is purely visual — mirror it
   to the opposite corner so it still reads as "opening" the quote in an
   RTL layout. */
body.lang-fa .review-card .quote-mark {
    right: auto;
    left: 20px;
}

/* Hero / CTA buttons: the theme sets margin-right for spacing between
   the two homepage hero buttons, which needs to flip to margin-left so
   the gap still sits on the correct (now-mirrored) side. */
body.lang-fa .hero-banner .btn-primary {
    margin-right: 0 !important;
    margin-left: 14px;
}

/* Stat divider hairlines: originally border-left with the first column
   exempted; RTL flex already reverses column order, so mirror which
   edge carries the border to match. */
body.lang-fa .stat-col {
    border-left: none;
    border-right: 1px solid rgba(0,0,0,0.06);
}
body.lang-fa .stat-col:first-child { border-right: none; }
@media (max-width: 900px) {
    body.lang-fa .stat-col { border-right: none; }
}

/* ==========================================================================
   VISUAL LAYER  —  "the survey line"
   --------------------------------------------------------------------------
   Design note: real estate is a business of measured, verified things —
   surveys, floor plans, lot lines, square footage, sold prices. So rather
   than scattering unrelated effects, the whole visual layer is built on one
   motif: a fine gold rule that DRAWS ITSELF, the way a line is struck on a
   site plan. It appears under section headings as they scroll into view,
   sweeps across the top edge of a card on hover, and underlines the hero.
   Paired with it: the numbers actually count up, because in this business
   the numbers are the proof.

   Everything here degrades safely — no JS means no animation, never hidden
   content — and the whole layer is switched off under prefers-reduced-motion
   at the bottom of this file.
   ========================================================================== */

:root {
    --ease-out-soft: cubic-bezier(0.22, 0.61, 0.36, 1);
    --gold-line: linear-gradient(90deg, var(--color-gold-light), var(--color-gold));
}

/* --- Reading-progress hairline (top of viewport) ------------------------ */
.rz-progress {
    position: fixed;
    top: 0;
    inset-inline: 0;
    height: 2px;
    z-index: 100;
    background: var(--gold-line);
    transform: scaleX(0);
    transform-origin: left center;
    will-change: transform;
    pointer-events: none;
}
[dir="rtl"] .rz-progress { transform-origin: right center; }

/* --- Header: condenses on scroll ---------------------------------------- */
.site-header {
    transition: height 0.3s var(--ease-out-soft),
                box-shadow 0.3s var(--ease-out-soft),
                background-color 0.3s var(--ease-out-soft);
}
@media (min-width: 901px) {
    .site-header.is-condensed {
        height: 64px;
        background-color: rgba(247, 244, 238, 0.98);
        box-shadow: 0 6px 24px -12px rgba(26, 26, 26, 0.28);
    }
    .site-header.is-condensed .header-container { height: 64px; }
    .site-header.is-condensed .brand-logo img { height: 34px; }
    .site-header.is-condensed .brand-subtitle { opacity: 0; }
}
.brand-subtitle { transition: opacity 0.25s ease; }
.brand-logo img { transition: height 0.3s var(--ease-out-soft); }

/* --- The signature ------------------------------------------------------
   The gold rule under section headings already existed in this theme and
   was well placed; rather than duplicating it, the rule below simply
   teaches it to DRAW ITSELF when the heading scrolls into view. Keeping
   one definition avoids two competing ::after rules fighting over
   alignment. See "Signature accent under major section headings" above. */

/* --- Hero: staggered entrance + underlined headline --------------------- */
.hero-banner h1,
.hero-banner > .container > p,
.hero-banner .btn-primary,
.hero-banner .btn-secondary {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.7s var(--ease-out-soft), transform 0.7s var(--ease-out-soft);
}
body.rz-ready .hero-banner h1,
body.rz-ready .hero-banner > .container > p,
body.rz-ready .hero-banner .btn-primary,
body.rz-ready .hero-banner .btn-secondary {
    opacity: 1;
    transform: translateY(0);
}
body.rz-ready .hero-banner > .container > p { transition-delay: 0.12s; }
body.rz-ready .hero-banner .btn-primary     { transition-delay: 0.22s; }
body.rz-ready .hero-banner .btn-secondary   { transition-delay: 0.28s; }

/* Ambient wash behind the hero — very low contrast, adds depth without
   competing with the content. */
.hero-banner {
    position: relative;
    overflow: hidden;
}
.hero-banner::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(1100px 460px at 80% -10%, rgba(184, 147, 95, 0.16), transparent 62%),
        radial-gradient(760px 380px at 8% 105%, rgba(154, 44, 70, 0.09), transparent 60%);
    pointer-events: none;
}
.hero-banner > * { position: relative; z-index: 1; }

/* --- Cards: lift, and the survey line sweeps the top edge ---------------- */
.service-card,
.review-card,
.testimonial-card,
.sidebar-box {
    position: relative;
    overflow: hidden;
    transition: transform 0.35s var(--ease-out-soft),
                box-shadow 0.35s var(--ease-out-soft),
                border-color 0.35s var(--ease-out-soft);
}
.service-card::before,
.review-card::before,
.testimonial-card::before {
    content: "";
    position: absolute;
    top: 0;
    inset-inline-start: 0;
    height: 2px;
    width: 100%;
    background: var(--gold-line);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.45s var(--ease-out-soft);
}
[dir="rtl"] .service-card::before,
[dir="rtl"] .review-card::before,
[dir="rtl"] .testimonial-card::before { transform-origin: right center; }

.service-card:hover,
.review-card:hover,
.testimonial-card:hover,
.sidebar-box:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
}
.service-card:hover::before,
.review-card:hover::before,
.testimonial-card:hover::before { transform: scaleX(1); }

/* Service icons get a gentle response so the whole card feels alive. */
.service-icon { transition: transform 0.35s var(--ease-out-soft); }
.service-card:hover .service-icon { transform: translateY(-2px) scale(1.06); }

/* --- Buttons: arrow slides, surface lifts -------------------------------- */
.btn-primary,
.btn-secondary,
.btn-outline-light {
    position: relative;
    transition: transform 0.25s var(--ease-out-soft),
                box-shadow 0.25s var(--ease-out-soft),
                background-color 0.25s ease,
                color 0.25s ease;
}
.btn-primary:hover,
.btn-secondary:hover,
.btn-outline-light:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px -10px rgba(154, 44, 70, 0.55);
}
.btn-primary:active,
.btn-secondary:active { transform: translateY(0); }

/* Inline "Learn More →" style links: nudge the arrow on hover. */
a[style*="var(--color-accent)"] {
    display: inline-block;
    transition: transform 0.25s var(--ease-out-soft), opacity 0.2s ease;
}
a[style*="var(--color-accent)"]:hover { transform: translateX(3px); }
[dir="rtl"] a[style*="var(--color-accent)"]:hover { transform: translateX(-3px); }

/* --- Images: slow zoom inside their frame -------------------------------- */
.rz-media {
    overflow: hidden;
    border-radius: var(--radius-md);
}
.rz-media img {
    display: block;
    width: 100%;
    transition: transform 0.7s var(--ease-out-soft);
}
.rz-media:hover img { transform: scale(1.05); }

/* --- Stats: the numbers are the proof ------------------------------------ */
.stat-number {
    font-variant-numeric: tabular-nums;
    transition: color 0.3s ease;
}
.stat-col { position: relative; }

/* --- Back to top --------------------------------------------------------- */
.rz-top {
    position: fixed;
    inset-inline-end: 22px;
    bottom: 22px;
    z-index: 60;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border: 1px solid #d6d0c5;
    border-radius: 50%;
    background: #fff;
    color: var(--color-heading);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    box-shadow: var(--shadow-md);
    transition: opacity 0.3s ease, transform 0.3s var(--ease-out-soft), visibility 0.3s;
}
.rz-top.is-shown { opacity: 1; visibility: visible; transform: translateY(0); }
.rz-top:hover { background: var(--color-accent); color: #fff; border-color: var(--color-accent); }

/* --- Keyboard focus: visible on every interactive element ---------------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
    border-radius: 3px;
}

/* --- Respect reduced-motion: switch the whole layer off ------------------ */
@media (prefers-reduced-motion: reduce) {
    .rz-progress { display: none; }
    .section-heading::after,
    .section-heading.is-visible::after {
        transform: translateX(-50%) scaleX(1);
        transition: none;
    }
    .section-heading.align-left::after,
    .section-heading.align-left.is-visible::after { transform: scaleX(1); }
    .hero-banner h1,
    .hero-banner > .container > p,
    .hero-banner .btn-primary,
    .hero-banner .btn-secondary {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .service-card,
    .review-card,
    .testimonial-card,
    .sidebar-box,
    .btn-primary,
    .btn-secondary,
    .btn-outline-light,
    .rz-media img,
    .service-icon,
    .site-header,
    .rz-top {
        transition: none !important;
    }
    .service-card:hover,
    .review-card:hover,
    .testimonial-card:hover,
    .sidebar-box:hover,
    .btn-primary:hover,
    .btn-secondary:hover,
    .rz-media:hover img,
    .service-card:hover .service-icon {
        transform: none;
    }
}

/* --- Photographic hero (only when an image is set in the Customizer) ----- */
.hero-banner--image {
    background-color: #1a1a1a;
    min-height: 560px;
    display: flex;
    align-items: center;
}
.hero-banner--image::before { display: none; } /* the cream wash isn't wanted over a photo */

.hero-media {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    /* Very slow, very small zoom. Large enough to feel alive on a long
       look, small enough that nobody consciously notices it moving. */
    animation: rz-hero-drift 26s ease-out forwards;
    will-change: transform;
}
@keyframes rz-hero-drift {
    from { transform: scale(1.0); }
    to   { transform: scale(1.08); }
}

.hero-scrim {
    position: absolute;
    inset: 0;
    /* Angled rather than flat: darkest behind the text, opening up on the
       far side so the photograph is still legible as a photograph. */
    background: linear-gradient(
        100deg,
        rgba(20, 16, 14, calc(var(--scrim, 0.55) + 0.18)) 0%,
        rgba(20, 16, 14, var(--scrim, 0.55)) 45%,
        rgba(20, 16, 14, calc(var(--scrim, 0.55) * 0.45)) 100%
    );
}
[dir="rtl"] .hero-scrim { transform: scaleX(-1); }

.hero-banner--image .container { position: relative; z-index: 2; }
.hero-banner--image h1 { color: #fff; }
.hero-banner--image p { color: rgba(255, 255, 255, 0.88) !important; }

/* The secondary button over a photograph.
   An earlier version made this transparent with white text, but the base
   .btn-secondary rule sets its colour with !important — so the background
   vanished while the text stayed dark, leaving an unreadable button on a
   busy photo. Rather than fighting that !important, this keeps the dark
   text and gives it a solid, slightly frosted panel to sit on, which
   stays legible over any image. */
.hero-banner--image .btn-secondary {
    background: rgba(255, 255, 255, 0.94);
    border-color: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(4px);
    box-shadow: 0 6px 20px -8px rgba(0, 0, 0, 0.45);
}
.hero-banner--image .btn-secondary:hover {
    background: #ffffff;
    border-color: #ffffff;
    box-shadow: 0 10px 26px -8px rgba(0, 0, 0, 0.55);
}

@media (max-width: 900px) {
    .hero-banner--image { min-height: 440px; }
}

@media (prefers-reduced-motion: reduce) {
    .hero-media { animation: none; transform: scale(1.04); }
}

/* Hero headline scales down on small screens. !important is required
   here specifically because the template sets font-size inline, and an
   inline style outranks any selector without it. */
.hero-banner h1 {
    font-size: clamp(32px, 6.2vw, 52px) !important;
}
@media (max-width: 640px) {
    .hero-banner { padding: 64px 0 56px 0 !important; }
    .hero-banner .btn-primary,
    .hero-banner .btn-secondary {
        display: block;
        text-align: center;
        margin-inline: 0 !important;
    }
    .hero-banner .btn-secondary { margin-top: 12px; }
}

/* ==========================================================================
   Two-tier header
   --------------------------------------------------------------------------
   Contact details and the language switcher sit in a slim utility bar so
   the main row only has to carry brand + navigation + CTA. Farsi labels
   run longer than their English counterparts, and cramming everything
   onto one line was forcing the menu to wrap to a second row.
   ========================================================================== */
.site-header { height: auto; }

.site-topbar {
    background: #efeae1;
    border-bottom: 1px solid #e2dcd1;
    font-size: 12.5px;
}
.site-topbar__inner {
    /* Pinned to a fixed physical layout across all three languages: on
       its own this is a plain flex row, which mirrors under RTL like any
       other, moving the language switcher to the opposite corner every
       time someone switches to Farsi. That's exactly what made it hard
       to find. Text inside (Farsi nav labels, etc.) still renders
       correctly RTL either way, since glyph shaping is independent of
       this container's own layout direction. */
    direction: ltr;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 38px;
}
.site-topbar__contact {
    display: flex;
    align-items: center;
    gap: 20px;
    min-width: 0;
}
.site-topbar__contact a {
    color: #6b6257;
    white-space: nowrap;
    transition: color 0.2s ease;
}
.site-topbar__contact a:hover { color: var(--color-accent); }

/* The topbar switcher is compact — it's a utility, not a headline. */
.site-topbar .lang-switch { border-color: #ddd5c8; }
.site-topbar .lang-switch__btn { padding: 4px 12px; font-size: 12px; }

/* --- Main row -------------------------------------------------------- */
.header-container { height: 76px; }

/* Flex, not inline-block: inline-block items wrap onto a new line the
   moment they run out of room, which is exactly what was happening. Flex
   with nowrap keeps them on one row and lets the gap absorb the pressure. */
.nav-list {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 22px;
}
.main-navigation li, .nav-list li {
    display: block;
    margin: 0;
    white-space: nowrap;
}
.main-navigation a, .nav-list a { font-size: 14px; }

/* Tighten progressively rather than wrapping. */
@media (max-width: 1400px) {
    .nav-list { gap: 16px; }
    .main-navigation a, .nav-list a { font-size: 13.5px; }
}
@media (max-width: 1240px) {
    .nav-list { gap: 12px; }
    .main-navigation a, .nav-list a { font-size: 13px; }
    /* The eXp mark is the first thing to go — it also appears in the
       footer, so nothing is lost by dropping it from a crowded header. */
    .brand-partner { display: none; }
}
@media (max-width: 1080px) {
    .brand-subtitle { display: none; }
    .nav-list { gap: 10px; }
}

/* Condensed state: only the main row shrinks; the topbar slides away. */
@media (min-width: 901px) {
    .site-topbar {
        overflow: hidden;
        max-height: 44px;
        transition: max-height 0.3s var(--ease-out-soft), opacity 0.25s ease;
    }
    .site-header.is-condensed .site-topbar { max-height: 0; opacity: 0; }
    .site-header.is-condensed { height: auto; }
    .site-header.is-condensed .header-container { height: 62px; }
}

@media (max-width: 900px) {
    /* On mobile the topbar would just be clutter above a hamburger. */
    .site-topbar { display: none; }
    .header-container { height: auto; }
    .nav-list {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }
}

/* Cross-language notice on articles that exist in both languages. */
.rz-lang-notice {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 28px;
    padding: 12px 18px;
    background: #f5e2e6;
    border-inline-start: 3px solid var(--color-accent);
    border-radius: 8px;
    font-size: 13.5px;
    color: #6b5158;
}
.rz-lang-notice a {
    font-weight: 600;
    color: var(--color-accent);
}
.rz-lang-notice a:hover { text-decoration: underline; }

/* --- Chinese ------------------------------------------------------------
   Playfair Display has no CJK glyphs, so headings need an explicit
   Chinese-capable face; without one, browsers substitute inconsistently
   and the page looks different on every device. Noto Sans SC is loaded
   from inc/lang-core.php only when Chinese is active. */
body.lang-zh {
    font-family: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
}
body.lang-zh h1,
body.lang-zh h2,
body.lang-zh h3,
body.lang-zh h4,
body.lang-zh h5,
body.lang-zh h6,
body.lang-zh .brand-title,
body.lang-zh .section-heading,
body.lang-zh .footer-title,
body.lang-zh .sidebar-title {
    font-family: 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
    font-weight: 700;
    /* CJK glyphs are visually denser than Latin at the same size, so the
       tight display leading used for Playfair reads cramped here. */
    line-height: 1.35;
}
body.lang-zh .stat-number {
    font-family: 'Playfair Display', serif; /* digits stay in the display face */
}
/* CJK has no word spaces, so lines may break anywhere — keep body copy
   from breaking mid-term in headings and buttons. */
body.lang-zh .btn-primary,
body.lang-zh .btn-secondary,
body.lang-zh .nav-list a {
    word-break: keep-all;
}

/* Three languages instead of two: let the switcher stay compact so the
   header row still fits at narrower widths. */
@media (max-width: 1240px) {
    .site-topbar__email { display: none; }
}
@media (max-width: 1080px) {
    .site-topbar__contact { display: none; }
    .site-topbar__inner { justify-content: flex-end; }
}

/* Untranslated (Latin-script) content inside an RTL page. Set by
   inc/lang-page-content.php so English articles stay readable while the
   surrounding Farsi interface remains right-to-left. */
.rz-force-ltr {
    direction: ltr;
    text-align: left;
}
.rz-force-ltr ul,
.rz-force-ltr ol {
    padding-left: 22px;
    padding-right: 0;
}
body.lang-fa .rz-force-ltr,
body.lang-fa .rz-force-ltr p,
body.lang-fa .rz-force-ltr li,
body.lang-fa .rz-force-ltr h2,
body.lang-fa .rz-force-ltr h3 {
    /* Latin text shouldn't inherit the Persian webface. */
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}
body.lang-fa .rz-force-ltr h2,
body.lang-fa .rz-force-ltr h3 {
    font-family: 'Playfair Display', serif;
}

/* YouTube facade thumbnail. A real <img> rather than a CSS background so
   a missing maxresdefault can be detected and swapped (see inc/video.php). */
.rz-yt-thumb {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ==========================================================================
   MLS listings page
   Cards render photos hotlinked from TRREB's image CDN, which serves them
   pre-resized behind a one-year cache header.
   Logical properties throughout so the Farsi RTL layout mirrors correctly.
   ========================================================================== */

.mls-back { display:inline-block; font-size:14px; font-weight:600; color:var(--color-accent); margin-bottom:24px; }
.mls-title { font-size:34px; margin-bottom:12px; }
.mls-intro { font-size:15px; color:#57534e; max-width:680px; margin-bottom:28px; line-height:1.6; }

.mls-tabs { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:24px; }
.mls-tab {
	padding:9px 16px; border-radius:999px; font-size:14px; font-weight:600;
	background:#f5f5f4; color:#44403c; border:1px solid transparent;
	transition:background .15s, color .15s;
}
.mls-tab:hover { background:#e7e5e4; }
.mls-tab.is-active { background:var(--color-accent); color:#fff; }

.mls-filters {
	display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
	gap:14px; align-items:end;
	padding:18px; border:1px solid #e7e5e4; border-radius:12px;
	background:#fafaf9; margin-bottom:22px;
}
.mls-filters label { display:flex; flex-direction:column; gap:6px; font-size:13px; font-weight:600; color:#57534e; }
.mls-filters input, .mls-filters select {
	padding:9px 11px; border:1px solid #d6d3d1; border-radius:8px;
	font-size:14px; font-weight:400; background:#fff; inline-size:100%;
}
.mls-filters__wide { grid-column:span 2; }
.mls-filters__actions { display:flex; align-items:center; gap:12px; }
.mls-reset { font-size:13px; color:#78716c; text-decoration:underline; }

.mls-count { font-size:14px; color:#57534e; margin-bottom:16px; }
.mls-empty { padding:36px 0; color:#78716c; font-size:15px; }

.mls-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:22px; }

.mls-card {
	border:1px solid #e7e5e4; border-radius:12px; overflow:hidden;
	background:#fff; display:flex; flex-direction:column;
	transition:box-shadow .18s, transform .18s;
}
.mls-card:hover { box-shadow:0 8px 24px rgba(0,0,0,.09); transform:translateY(-2px); }
.mls-card--ours { border-color:var(--color-accent); }

.mls-card__media { position:relative; aspect-ratio:4/3; background:#f5f5f4; }
.mls-card__media img { inline-size:100%; block-size:100%; object-fit:cover; display:block; }
.mls-card__nophoto { inline-size:100%; block-size:100%; background:linear-gradient(135deg,#f5f5f4,#e7e5e4); }

.mls-card__badge {
	position:absolute; inset-block-start:10px; inset-inline-start:10px;
	background:var(--color-accent); color:#fff;
	font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
	padding:5px 10px; border-radius:5px;
}
.mls-card__count {
	position:absolute; inset-block-end:10px; inset-inline-end:10px;
	background:rgba(0,0,0,.62); color:#fff; font-size:12px; font-weight:600;
	padding:3px 9px; border-radius:5px;
}

.mls-card__body { padding:16px; display:flex; flex-direction:column; gap:6px; flex:1; }
.mls-card__price { font-size:20px; font-weight:700; color:#1c1917; margin:0; }
.mls-card__address { font-size:15px; font-weight:600; margin:0; line-height:1.35; }
.mls-card__locale { font-size:13px; color:#78716c; margin:0; }

.mls-card__specs { display:flex; flex-wrap:wrap; gap:14px; list-style:none; padding:0; margin:8px 0 0; font-size:13px; color:#57534e; }
.mls-card__specs strong { color:#1c1917; }

.mls-card__office { font-size:11px; color:#a8a29e; margin:auto 0 0; padding-block-start:12px; line-height:1.4; }

.mls-more { margin-block-start:36px; padding:24px; border:1px dashed #d6d3d1; border-radius:12px; text-align:center; }
.mls-more p { font-size:14px; color:#57534e; margin-bottom:14px; }

.mls-disclaimer { margin-block-start:28px; font-size:11.5px; color:#a8a29e; line-height:1.6; max-width:820px; }

@media (max-width:640px) {
	.mls-title { font-size:27px; }
	.mls-filters__wide { grid-column:span 1; }
	.mls-grid { grid-template-columns:1fr; }
}

/* --- Card is a link now, so it must not inherit link styling -------------- */
a.mls-card { text-decoration:none; color:inherit; display:flex; }
a.mls-card:hover .mls-card__address { color:var(--color-accent); }

/* The badge reads "Our Featured Listing" — longer than it used to be, so it
   must not wrap into two lines over the photo. */
.mls-card__badge { white-space:nowrap; max-inline-size:calc(100% - 20px); overflow:hidden; text-overflow:ellipsis; }

/* --- Listing detail page -------------------------------------------------- */
.mls-detail { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(280px,1fr); gap:34px; align-items:start; }
.mls-detail__status {
	background:#fef3c7; border:1px solid #fcd34d; color:#78350f;
	padding:12px 16px; border-radius:8px; font-size:14px; margin-bottom:20px;
}

.mls-gallery__stage { position:relative; border-radius:12px; overflow:hidden; background:#f5f5f4; aspect-ratio:4/3; }
.mls-gallery__stage img { inline-size:100%; block-size:100%; object-fit:cover; display:block; }
.mls-gallery__thumbs { display:flex; gap:8px; overflow-x:auto; padding-block:10px; }
.mls-gallery__thumb {
	flex:0 0 auto; inline-size:96px; block-size:72px; padding:0; cursor:pointer;
	border:2px solid transparent; border-radius:7px; overflow:hidden; background:none;
}
.mls-gallery__thumb img { inline-size:100%; block-size:100%; object-fit:cover; display:block; }
.mls-gallery__thumb.is-active { border-color:var(--color-accent); }

.mls-detail__remarks, .mls-detail__facts { margin-block-start:30px; }
.mls-detail__remarks h2, .mls-detail__facts h2, .mls-booking__title { font-size:21px; margin-bottom:12px; }
.mls-detail__remarks p { font-size:15px; line-height:1.75; color:#44403c; white-space:pre-line; }

.mls-detail__facts dl { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:0; margin:0; }
.mls-detail__facts dl > div { display:flex; justify-content:space-between; gap:14px; padding:11px 0; border-bottom:1px solid #f0efed; }
.mls-detail__facts dt { font-size:13px; color:#78716c; }
.mls-detail__facts dd { font-size:14px; font-weight:600; margin:0; text-align:end; }

.mls-detail__aside { position:sticky; top:96px; }
.mls-detail__card { border:1px solid #e7e5e4; border-radius:12px; padding:22px; background:#fff; }
.mls-detail__price { font-size:27px; font-weight:700; margin:0 0 6px; }
.mls-detail__address { font-size:17px; font-weight:600; margin:0 0 4px; line-height:1.35; }
.mls-detail__locale { font-size:13px; color:#78716c; margin:0 0 14px; }
.mls-detail__specs { display:flex; flex-wrap:wrap; gap:16px; list-style:none; padding:0; margin:0 0 14px; font-size:14px; color:#57534e; }
.mls-detail__specs strong { color:#1c1917; }
.mls-detail__mls { font-size:12px; color:#a8a29e; margin:0 0 16px; }
.mls-detail__cta { display:block; text-align:center; }
.mls-detail__ask { display:block; text-align:center; margin-block-start:10px; font-size:13px; color:var(--color-accent); }

/* --- Book a showing ------------------------------------------------------- */
.mls-booking { margin-block-start:36px; padding:24px; border:1px solid #e7e5e4; border-radius:12px; background:#fafaf9; scroll-margin-top:110px; }
.mls-booking__intro { font-size:14px; color:#57534e; margin-bottom:18px; }
.mls-booking__form { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px; }
.mls-booking__form label { display:flex; flex-direction:column; gap:6px; font-size:13px; font-weight:600; color:#57534e; }
.mls-booking__form input, .mls-booking__form textarea {
	padding:10px 12px; border:1px solid #d6d3d1; border-radius:8px;
	font-size:14px; font-weight:400; font-family:inherit; background:#fff; inline-size:100%;
}
.mls-booking__wide { grid-column:1 / -1; }
.mls-booking__actions { grid-column:1 / -1; display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.mls-booking__ref { font-size:12px; color:#a8a29e; }
.mls-booking__hp { position:absolute; inset-inline-start:-9999px; opacity:0; pointer-events:none; }
.mls-booking__notice { padding:12px 16px; border-radius:8px; font-size:14px; margin-bottom:16px; }
.mls-booking__notice.is-ok { background:#dcfce7; border:1px solid #86efac; color:#14532d; }
.mls-booking__notice.is-error { background:#fee2e2; border:1px solid #fca5a5; color:#7f1d1d; }

@media (max-width:900px) {
	.mls-detail { grid-template-columns:1fr; }
	.mls-detail__aside { position:static; order:-1; }
}

/* --- Listing detail: rooms, facts, open house ----------------------------- */
.mls-gallery__counter {
	position:absolute; inset-block-end:12px; inset-inline-end:12px;
	background:rgba(0,0,0,.62); color:#fff; font-size:12px; font-weight:600;
	padding:4px 10px; border-radius:5px;
}

.mls-openhouse { margin-block-start:24px; padding:16px 20px; border-radius:10px; background:#f0fdf4; border:1px solid #bbf7d0; }
.mls-openhouse h2 { font-size:15px; margin:0 0 8px; color:#14532d; }
.mls-openhouse ul { list-style:none; padding:0; margin:0; }
.mls-openhouse li { font-size:14px; color:#166534; padding:3px 0; font-weight:600; }

.mls-rooms { margin-block-start:32px; }
.mls-rooms > h2, .mls-facts__group h2 { font-size:21px; margin-bottom:12px; }
.mls-rooms__level { font-size:12px; text-transform:uppercase; letter-spacing:.07em; color:#a8a29e; margin:18px 0 6px; }
.mls-rooms__table { inline-size:100%; border-collapse:collapse; }
.mls-rooms__table td { padding:9px 0; border-bottom:1px solid #f0efed; font-size:14px; vertical-align:top; }
.mls-rooms__name { font-weight:600; inline-size:34%; }
.mls-rooms__size { color:#57534e; inline-size:26%; white-space:nowrap; }
.mls-rooms__feat { color:#78716c; font-size:13px; }

.mls-facts { margin-block-start:32px; display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:28px; }
.mls-facts__group h2 { font-size:16px; padding-block-end:8px; border-bottom:2px solid var(--color-accent); display:inline-block; }
.mls-facts__group dl { margin:10px 0 0; }
.mls-facts__group dl > div { display:flex; justify-content:space-between; gap:16px; padding:9px 0; border-bottom:1px solid #f0efed; }
.mls-facts__group dt { font-size:13px; color:#78716c; flex:0 0 auto; }
.mls-facts__group dd { font-size:13.5px; font-weight:600; margin:0; text-align:end; }

.mls-detail__change { font-size:13px; font-weight:600; margin:0 0 10px; color:#78716c; }
.mls-detail__change.is-down { color:#15803d; }
.mls-detail__change span { font-weight:400; opacity:.8; }
.mls-detail__subtype { font-size:13px; color:#57534e; margin:0 0 10px; }
.mls-detail__extras { margin-block-start:24px; }
.mls-detail__extras h2 { font-size:16px; margin-bottom:8px; }
.mls-detail__extras p { font-size:14px; line-height:1.7; color:#57534e; }