/* ========================================
   ROOT VARIABLES & BASE STYLES
   ======================================== */

:root {
    --primary-color: #005045;
    --primary-container: #24695c;
    --secondary: #7f552e;
    --secondary-container: #ffc796;
    --secondary-fixed: #ffdcc0;
    --tertiary: #474743;
    --error: #ba1a1a;
    --surface: #fcf9f8;
    --surface-dim: #dcd9d9;
    --surface-container-lowest: #ffffff;
    --surface-container-low: #f6f3f2;
    --surface-container: #f0eded;
    --surface-container-high: #eae7e7;
    --on-surface: #1c1b1b;
    --on-surface-variant: #3f4946;
    --on-primary: #ffffff;
    --outline: #6f7976;
    --outline-variant: #bfc9c5;
    --inverse-surface: #313030;
    --font-display: 'Sora', sans-serif;
    --font-body: 'Be Vietnam Pro', sans-serif;
}

* {
    font-family: var(--font-body);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 700;
}

body {
    background-color: var(--surface);
    color: var(--on-surface);
}

/* ========================================
   MATERIAL SYMBOLS ICONS
   ======================================== */

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}

/* ========================================
   CUSTOM COMPONENTS
   ======================================== */

.editorial-shadow {
    box-shadow: 0 30px 60px -15px rgba(0, 80, 69, 0.06);
}

.btn-primary-custom {
    background: var(--primary-color);
    border: none;
    color: var(--on-primary);
    border-radius: 999px;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.btn-primary-custom:hover {
    background: #003d35;
    color: var(--on-primary);
}

.btn-outline-primary-custom {
    background: transparent;
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
    border-radius: 999px;
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.btn-outline-primary-custom:hover {
    background: rgba(0, 80, 69, 0.05);
    color: var(--primary-color);
}

.text-accent {
    color: var(--secondary);
    font-style: italic;
    font-weight: 400;
}

/* ========================================
   RESPONSIVE UTILITIES
   ======================================== */

@media (max-width: 768px) {
    .editorial-shadow {
        box-shadow: 0 8px 30px rgba(10, 30, 39, 0.04);
    }
}

/* ========================================
   ANIMATIONS
   ======================================== */

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

.fade-in {
    animation: fadeIn 0.5s ease-in-out;
}

/* ========================================
   UTILITY CLASSES
   ======================================== */

.w-100 {
    width: 100%;
}

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

.gap-1 {
    gap: 0.25rem;
}

.gap-2 {
    gap: 0.5rem;
}

.gap-3 {
    gap: 0.75rem;
}

.gap-4 {
    gap: 1rem;
}

.gap-5 {
    gap: 1.5rem;
}

.gap-6 {
    gap: 2rem;
}

/* ========================================
   FRONT FIXES (layout, forms, lightbox)
   ======================================== */

.btn-brand {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-container) 100%);
    border: none;
    color: #fff;
    font-weight: 700;
    border-radius: 0.65rem;
    padding: 0.65rem 1.25rem;
}
.btn-brand:hover { color: #fff; opacity: 0.92; }

.front-main { min-height: 60vh; }
.front-page-section { padding-top: 7rem; padding-bottom: 3rem; }
.front-flash-wrap { padding-top: 6rem; max-width: 1280px; }

.featured-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--secondary);
    margin-bottom: 0.5rem;
}
.featured-title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 2.5rem);
    font-weight: 700;
    color: var(--primary-color);
    letter-spacing: -0.02em;
    line-height: 1.2;
}
.featured-title-group {
    margin-bottom: 0.5rem;
}

.front-shell {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding-inline: 20px;
}

@media (min-width: 768px) {
    .front-shell {
        padding-inline: 32px;
    }
}

@media (min-width: 1200px) {
    .front-shell {
        padding-inline: 64px;
    }
}

.front-header {
    height: auto;
    min-height: 5rem;
    background: rgba(252, 249, 248, 0.72);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(191, 201, 195, 0.3);
    z-index: 1050;
}

.front-header .front-shell {
    min-height: 5rem;
}

.front-header .navbar-brand {
    flex-shrink: 0;
    margin-inline-end: 0.75rem;
}

.front-header .navbar-nav {
    gap: 0.5rem;
}

@media (min-width: 992px) {
    .front-header .navbar-nav {
        gap: 0.85rem;
        align-items: center;
        margin-inline: auto;
        flex-wrap: nowrap;
    }
}

@media (min-width: 1400px) {
    .front-header .navbar-nav {
        gap: 1.35rem;
    }
}

.front-header .nav-link {
    color: var(--on-surface-variant);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.35rem 0;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
}

.front-header .nav-link.active,
.front-header .nav-link:hover {
    color: var(--primary-color);
}

.front-header .nav-link.active {
    border-bottom-color: var(--secondary);
}

.front-header-actions {
    gap: 0.65rem;
    flex-shrink: 0;
    flex-wrap: nowrap;
}

.front-header-meta {
    gap: 0.5rem;
    color: var(--on-surface-variant);
    margin-inline-end: 0.25rem;
    flex-shrink: 0;
}

.front-icon-btn,
.front-meta-btn {
    background: none;
    border: 0;
    color: inherit;
    padding: 0;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    gap: 0.35rem;
    white-space: nowrap;
}

.front-icon-btn .material-symbols-outlined {
    font-size: 1.15rem;
    line-height: 1;
    flex-shrink: 0;
}

.front-icon-btn:hover,
.front-meta-btn:hover {
    color: var(--primary-color);
}

.front-header-divider {
    width: 1px;
    height: 1rem;
    background: rgba(191, 201, 195, 0.5);
}

.front-header .btn-primary-custom,
.front-header .btn-outline-primary-custom {
    padding: 0.5rem 1rem;
    white-space: nowrap;
    flex-shrink: 0;
}

@media (min-width: 1200px) {
    .front-header .btn-primary-custom,
    .front-header .btn-outline-primary-custom {
        padding: 0.65rem 1.35rem;
    }
}

.front-footer {
    background: var(--primary-color);
    color: #dad8d3;
    padding: 5rem 0 2.5rem;
    margin-top: 0;
}

.front-footer-lead {
    font-size: 1rem;
    line-height: 1.6;
    color: rgba(229, 226, 221, 0.8);
    max-width: 20rem;
}

.front-footer-title {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--secondary-fixed);
    margin-bottom: 1.5rem;
}

.front-footer-link {
    color: rgba(229, 226, 221, 0.8);
    text-decoration: none;
    font-size: 1rem;
}

.front-footer-link:hover {
    color: var(--secondary-fixed);
    text-decoration: underline;
    text-decoration-color: var(--secondary);
}

.front-footer-copy {
    margin-top: 3rem;
    font-size: 0.95rem;
    color: #e5e2dd;
}

@media (max-width: 991.98px) {
    .front-page-section {
        padding-top: 5.5rem;
        padding-bottom: 2rem;
        padding-inline: 0.25rem;
    }
    .front-flash-wrap { padding-top: 5rem; }
}

.front-listings-layout {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0;
    gap: 1.5rem;
}

.front-header .navbar-collapse {
    max-height: calc(100vh - 4.5rem);
    overflow-x: hidden;
    overflow-y: auto;
}

@media (min-width: 992px) {
    .front-header .navbar-collapse {
        flex: 1 1 auto;
        min-width: 0;
        max-height: none;
        overflow: visible;
        align-items: center;
        justify-content: flex-end;
        gap: 0.75rem;
    }
}

@media (max-width: 991.98px) {
    .front-header .navbar-collapse {
        padding-bottom: 1rem;
    }

    .front-header .navbar-nav {
        padding-top: 0.75rem;
        border-top: 1px solid rgba(191, 201, 195, 0.25);
        margin-top: 0.75rem;
    }
}

.hp-field {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.single-price-period {
    font-size: 1rem;
    font-weight: 600;
    margin-inline-start: 0.35rem;
}

.single-gallery-image.gallery-trigger,
.single-gallery-view-all { cursor: pointer; }

.gallery-lightbox {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(10, 30, 39, 0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}
.gallery-lightbox[hidden] { display: none !important; }
.gallery-lightbox-image {
    max-width: min(1100px, 92vw);
    max-height: 85vh;
    object-fit: contain;
    border-radius: 0.75rem;
    box-shadow: 0 20px 60px rgba(0,0,0,0.35);
}
.gallery-lightbox-close,
.gallery-lightbox-prev,
.gallery-lightbox-next {
    position: absolute;
    background: rgba(255,255,255,0.12);
    color: #fff;
    border: 0;
    border-radius: 999px;
    width: 2.75rem;
    height: 2.75rem;
    font-size: 1.75rem;
    line-height: 1;
    display: grid;
    place-items: center;
}
.gallery-lightbox-close { top: 1.25rem; inset-inline-end: 1.25rem; }
.gallery-lightbox-prev { inset-inline-start: 1.25rem; top: 50%; transform: translateY(-50%); }
.gallery-lightbox-next { inset-inline-end: 1.25rem; top: 50%; transform: translateY(-50%); }
.gallery-lightbox-counter {
    position: absolute;
    bottom: 1.25rem;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255,255,255,0.85);
    font-size: 0.875rem;
    font-weight: 600;
}

.front-form .form-control {
    border-radius: 0.75rem;
    border-color: rgba(64, 73, 68, 0.18);
    background: #fff;
}
.front-form .form-control:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 0.2rem rgba(0, 53, 39, 0.12);
}

.agency-logo { background: #fff; padding: 0.75rem; border-radius: 0.75rem; }

.cms-content p { margin-bottom: 1rem; }
.cms-content img { max-width: 100%; height: auto; border-radius: 0.75rem; }

.brand-logo {
    height: 34px;
    width: auto;
    max-width: 160px;
    display: block;
    overflow: visible;
}

@media (min-width: 1400px) {
    .brand-logo {
        height: 40px;
        max-width: 190px;
    }
}
.brand-logo--sm {
    height: 36px;
}
.brand-logo--footer {
    height: 44px;
}

@media (max-width: 991.98px) {
    .front-listings-layout {
        display: block;
    }
    .filters-aside { margin-bottom: 1.5rem; }
    .single-contact-card.sticky-top { position: static !important; }
    .gallery-lightbox { padding: 1rem; }
    .gallery-lightbox-prev { inset-inline-start: 0.5rem; }
    .gallery-lightbox-next { inset-inline-end: 0.5rem; }
}

/* Arabic / RTL: readable glyphs, no Latin uppercase tracking */
body.is-rtl {
    --font-display: 'IBM Plex Sans Arabic', sans-serif;
    --font-body: 'IBM Plex Sans Arabic', sans-serif;
}

body.is-rtl,
body.is-rtl h1,
body.is-rtl h2,
body.is-rtl h3,
body.is-rtl h4,
body.is-rtl h5,
body.is-rtl h6,
body.is-rtl .btn,
body.is-rtl input,
body.is-rtl select,
body.is-rtl textarea {
    font-family: var(--font-body);
}

body.is-rtl,
body.is-rtl .btn,
body.is-rtl .nav-link,
body.is-rtl .mm-pill,
body.is-rtl .mm-card-badge,
body.is-rtl .featured-label,
body.is-rtl .text-uppercase {
    letter-spacing: normal !important;
    text-transform: none !important;
}

body.is-rtl .front-lang-label {
    font-size: 0.75rem;
    font-weight: 600;
}

body.is-rtl .mm-dir-arrow {
    transform: scaleX(-1);
}

body.is-rtl .mm-label-caps,
.mm-label-caps {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

body.is-rtl .mm-label-caps {
    letter-spacing: normal !important;
    text-transform: none !important;
}

/* Prefer logical sides so badges/overlays mirror correctly in RTL */
body.is-rtl .mm-card-badge,
body.is-rtl .mm-pill,
body.is-rtl .mm-fav {
    left: auto;
}

body.is-rtl .mm-btn-gold,
body.is-rtl .mm-newsletter-form button,
body.is-rtl .btn-primary-custom,
body.is-rtl .btn-outline-primary-custom {
    white-space: normal;
}

@media (min-width: 992px) {
    body.is-rtl .front-header .navbar-nav {
        gap: 0.85rem;
    }

    body.is-rtl .front-header .nav-link {
        font-size: 0.8rem;
    }
}

/* Site-wide mixed-script / overflow helpers */
.front-main {
    overflow-x: clip;
}

body.is-rtl .mm-prose,
body.is-rtl .cms-content,
body.is-rtl .mm-blog-card p,
body.is-rtl .mm-insight-body p {
    unicode-bidi: plaintext;
}

body.is-rtl .mm-card-agency,
body.is-rtl .mm-agency-logo,
body.is-rtl .mm-agent-mark {
    direction: ltr;
    unicode-bidi: isolate;
}