/* ==========================================================================
   Ofoq for Homzen — bridge: Botble/Homzen pieces in the Ofoq language
   (logo, menus, wishlist state, toasts, cookie bar, auth, forms, utilities)
   ========================================================================== */

body { background: var(--of-white); font-size: 1rem; line-height: 1.75; }
h4, .h4, h5, .h5, h6, .h6 { font-family: var(--of-font-display); font-weight: 500; }
p { line-height: 1.9; }
.font-display { font-family: var(--of-font-display) !important; }
.line-clamp-1, .line-clamp-2 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.line-clamp-1 { -webkit-line-clamp: 1; }
.line-clamp-2 { -webkit-line-clamp: 2; }
[dir="ltr"] .arrow, [dir="ltr"] .row-arrow svg { transform: scaleX(-1); }
[dir="ltr"] .btn:hover .arrow, [dir="ltr"] .link-arrow:hover .arrow { transform: scaleX(-1) translateX(-6px); }
.icon { stroke-width: 1.6; }
svg.icon { vertical-align: middle; }

/* Header: logo instead of the word mark ------------------------------------- */
.navbar-brand { align-items: center; }
.brand-logo img { display: block; height: auto; max-height: 48px; width: auto; transition: opacity .4s; }
.site-header.is-scrolled .brand-logo img { max-height: 42px; }
.brand-logo-light { display: none; }
.site-header.is-overlay:not(.is-scrolled) .brand-logo-dark:has(+ .brand-logo-light) { display: none; }
.site-header.is-overlay:not(.is-scrolled) .brand-logo-light { display: block; }
.offcanvas-nav .brand-logo-light img { max-height: 44px; width: auto; }

/* Main menu dropdowns */
.main-nav .nav-item.dropdown { position: relative; }
.main-nav .dropdown-toggle { display: inline-flex; align-items: center; gap: .25rem; }
.main-nav .dropdown-toggle .caret { width: .875rem; height: .875rem; transition: transform .3s var(--of-ease); }
.main-nav .dropdown-toggle[aria-expanded="true"] .caret { transform: rotate(180deg); }
.main-nav .dropdown-menu { margin-top: .75rem !important; min-width: 220px; }
@media (min-width: 992px) {
  .main-nav .dropdown:hover > .dropdown-menu { display: block; }
  .main-nav .dropdown > .dropdown-menu::before { content: ""; position: absolute; inset-inline: 0; top: -.875rem; height: .875rem; }
}
.site-header.is-overlay:not(.is-scrolled) .main-nav .nav-link::after { background: #fff; }

/* Top bar: dropdown toggles and announcements */
.topbar .dropdown-toggle::after { vertical-align: .15em; margin-inline-start: .35em; }
.topbar .dropdown-menu { font-size: .875rem; }
.topbar-start { min-width: 0; overflow: hidden; }
.topbar .ae-anno-announcement-wrapper, .topbar [class*="announcement"] { background: transparent !important; color: inherit !important; padding: 0 !important; font-size: inherit; }

/* Mobile menu */
.offcanvas-menu ul { padding: 0; }
.offcanvas-nav .offcanvas-sub { padding: .25rem 0 1rem; }
.offcanvas-nav .offcanvas-nav-sub { font-family: var(--of-font-text); font-size: 1rem; color: var(--of-inverse-muted); padding: .625rem 0; border-bottom: 0; }
.offcanvas-nav .offcanvas-nav-sub:hover, .offcanvas-nav .offcanvas-nav-sub.active { color: #fff; }
.offcanvas-nav a.offcanvas-nav-sub.d-flex { border-bottom: 1px solid var(--of-navy-700); padding: 1rem 0; }
.offcanvas-nav .offcanvas-nav-item[aria-expanded="true"] svg { transform: rotate(180deg); }
.offcanvas-nav .offcanvas-nav-item svg { transition: transform .3s var(--of-ease); }
.offcanvas-meta { font-size: .875rem; color: var(--of-inverse-muted); }
.offcanvas-meta a, .offcanvas-meta .dropdown-toggle { color: var(--of-inverse-muted); background: none; border: 0; padding: 0; }
.offcanvas-meta a:hover { color: #fff; }
.offcanvas-meta .dropdown-menu a { color: var(--of-navy); }

/* Page head with a background image */
.page-head-image { position: relative; background-size: cover; background-position: center; color: #fff; padding-block: 120px 64px; border: 0; }
.page-head-image::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(7, 19, 48, .35), rgba(7, 19, 48, .8)); }
.page-head-image > .container { position: relative; }
.page-head-image h1 { color: #fff; }

.sec-head-center { justify-content: center; text-align: center; }
.sec-head-center > div { max-width: 720px; }
.sec-head .lead-of { max-width: 560px; }

/* Status badges from the real-estate filter */
.badge-status { background: #fff; color: var(--of-navy); }
.badge-status-active { background: #fff; color: var(--of-navy); }

/* Wishlist heart: script.js toggles .active and swaps the SVG */
.btn-fav.active, .btn-fav.is-on { color: var(--of-blue); }
.btn-fav.active svg { fill: currentColor; }
.btn-fav svg { width: 1.25rem; height: 1.25rem; }
.btn-fav:active { animation: favPop .5s var(--of-ease-out); }

/* Cards */
.p-card-media img { display: block; }
.avatar { overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.p-list-item .p-card-media { min-height: 220px; }
.proj-card .p-card-title a::before { content: ""; position: absolute; inset: 0; }
.proj-card .btn-fav { z-index: 3; }

/* Footer --------------------------------------------------------------------- */
.site-footer { overflow: hidden; }
.site-footer .footer-word { white-space: nowrap; font-size: clamp(3.25rem, 12.5vw, 11.5rem); }
.footer-top { padding-bottom: 2.5rem; margin-bottom: 3rem; border-bottom: 1px solid #dce2ec; }
.footer-logo img { max-height: 52px; width: auto; }
.footer-contact li { padding-block: .25rem; }
.footer-contact .icon { color: var(--of-blue); flex: none; }
.social-btn { width: 40px; height: 40px; border: 1px solid var(--of-line-strong); border-radius: 999px; display: grid; place-items: center; color: var(--of-navy); transition: all .3s var(--of-ease); }
.social-btn:hover { background: var(--of-navy); border-color: var(--of-navy); color: #fff; }
.footer-bottom .links a { color: var(--of-muted-strong); }
.footer-bottom .links a:hover { color: var(--of-blue); }
.footer-newsletter form { position: relative; }
.footer-newsletter .form-control { flex: 1; background: #fff; }
.footer-newsletter .btn { flex: none; }
.footer-newsletter .text-danger, .footer-newsletter .invalid-feedback { font-size: .8125rem; }
.newsletter-form-of .mb-3 { margin-bottom: 0 !important; }
.newsletter-form-of .newsletter-message, .newsletter-form-of [class*="message"] { font-size: .875rem; margin-top: .5rem; }

/* Back to top */
.go-top { position: fixed; z-index: 1020; inset-inline-end: 1.25rem; bottom: 1.25rem; width: 48px; height: 48px; border-radius: 999px; border: 1px solid var(--of-line-strong); background: rgba(255, 255, 255, .94); color: var(--of-navy); display: grid; place-items: center; box-shadow: var(--of-shadow-sm); opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity .4s, transform .4s var(--of-ease-out), background-color .3s; }
.go-top:hover { background: var(--of-navy); color: #fff; }
html.is-loaded body:has(.site-header.is-scrolled) .go-top { opacity: 1; transform: none; pointer-events: auto; }

/* Toast (Botble toastify) */
.toastify { background: var(--of-navy) !important; color: #fff; border-radius: var(--of-radius) !important; box-shadow: var(--of-shadow-sm) !important; font-family: var(--of-font-text); font-size: .9375rem; padding: .875rem 1.25rem !important; }
.toastify.toastify-error, .toastify.toastify-danger { background: var(--of-danger) !important; }

/* Cookie consent (Botble plugin) as the Ofoq cookie bar */
.site-notice { inset-inline: 1rem !important; bottom: 1rem !important; max-width: 1200px; margin: 0 auto; padding: 0 !important; background: transparent !important; box-shadow: none !important; }
.site-notice .site-notice-body { background: #fff !important; color: var(--of-muted-strong) !important; border: 1px solid var(--of-line); border-radius: var(--of-radius-lg) !important; box-shadow: var(--of-shadow-sm); padding: 1rem 1.5rem !important; max-width: none !important; }
.site-notice .site-notice__inner { justify-content: space-between; }
.site-notice .site-notice__message { font-size: .875rem; color: var(--of-muted-strong); }
.site-notice .site-notice__message a { color: var(--of-blue); }
.site-notice button { font-family: var(--of-font-text); font-size: .875rem !important; font-weight: 600; border-radius: var(--of-radius) !important; padding: .625rem 1.125rem !important; background: #fff !important; color: var(--of-navy) !important; border: 1px solid var(--of-line-strong) !important; transition: background-color .3s, color .3s; }
.site-notice button.js-site-notice-agree, .site-notice .site-notice__agree, .site-notice button[class*="agree"], .site-notice button[class*="save"] { background: var(--of-navy) !important; color: #fff !important; border-color: var(--of-navy) !important; }
.site-notice .cookie-category { border: 1px solid var(--of-line); border-radius: var(--of-radius); }
.site-notice .cookie-category__name { color: var(--of-navy); font-weight: 600; }

/* Auth modal + Botble form builder output ----------------------------------- */
.modal-of .modal-content { box-shadow: var(--of-shadow); }
.modal-of form .btn[type="submit"], .modal-of form button[type="submit"] { width: 100%; --bs-btn-bg: var(--of-blue); --bs-btn-color: #fff; --bs-btn-border-color: var(--of-blue); --bs-btn-hover-bg: var(--of-blue-700); --bs-btn-hover-color: #fff; }
.modal-of .auth-card, .modal-of .card { border: 0; box-shadow: none; }
.modal-of .card-body { padding: 0; }
form .form-group, form .mb-3 { margin-bottom: 1rem; }
form label.required::after, .form-label.required::after { content: " *"; color: var(--of-danger); }
.invalid-feedback, .text-danger { color: var(--of-danger) !important; }
.form-check-label a, .form-text a { color: var(--of-blue); }
.btn-loading { position: relative; color: transparent !important; pointer-events: none; }
.btn-loading::after { content: ""; position: absolute; inset: 0; margin: auto; width: 1.125rem; height: 1.125rem; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .5); border-top-color: #fff; animation: ofSpin .7s linear infinite; }
@keyframes ofSpin { to { transform: rotate(360deg); } }

/* Ajax listing spinner (script.js appends .loading-spinner) */
[data-bb-toggle="data-listing"] { position: relative; }
.loading-spinner { position: absolute; inset: 0; z-index: 5; background: rgba(255, 255, 255, .7); }
.loading-spinner::after { content: ""; position: sticky; top: 45vh; display: block; margin: 120px auto; width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--of-line); border-top-color: var(--of-blue); animation: ofSpin .8s linear infinite; }

/* Generic content (CKEditor output in pages / posts) */
.ck-content, .of-prose { color: var(--of-body); font-size: 1.0625rem; line-height: 2; }
.ck-content h2, .ck-content h3, .ck-content h4, .of-prose h2, .of-prose h3, .of-prose h4 { color: var(--of-navy); margin: 2rem 0 1rem; }
.ck-content p, .of-prose p { margin-bottom: 1.25rem; }
.ck-content a, .of-prose a { color: var(--of-blue); text-decoration: underline; text-underline-offset: 3px; }
.ck-content img, .of-prose img { height: auto; border-radius: var(--of-radius); }
.ck-content ul, .ck-content ol, .of-prose ul, .of-prose ol { padding-inline-start: 1.25rem; margin-bottom: 1.25rem; }
.ck-content ul, .of-prose ul { list-style: disc; }
.ck-content blockquote, .of-prose blockquote { border-inline-start: 2px solid var(--of-blue); padding: .5rem 1.5rem; margin: 2rem 0; font-family: var(--of-font-display); font-size: 1.25rem; color: var(--of-navy); }
.ck-content table, .of-prose table { width: 100%; margin-bottom: 1.5rem; border-collapse: collapse; }
.ck-content td, .ck-content th, .of-prose td, .of-prose th { border-bottom: 1px solid var(--of-line); padding: .75rem .5rem; }

/* Alerts */
.alert { border-radius: var(--of-radius); border: 1px solid var(--of-line); }
.alert-warning, .alert-info { background: var(--of-soft); color: var(--of-navy); border-color: var(--of-line); }

/* Leaflet markers (maps on listing/detail pages) */
.map-marker-home { background: var(--of-blue); border: 4px solid #fff; border-radius: 999px; box-shadow: 0 0 0 8px rgba(0, 77, 250, .2); }
.leaflet-popup-content-wrapper { border-radius: var(--of-radius-lg); box-shadow: var(--of-shadow-sm); }
.leaflet-container { font-family: var(--of-font-text); }

@media (max-width: 991.98px) {
  .footer-top { margin-bottom: 2rem; }
}