/* ==========================================================================
   Homino (site13) — shared shell: header, footer, page loader.
   Loaded on every site13 page. Page-specific CSS loads after this file.

   Brand palette is fixed by the client — do not change these values.
   ========================================================================== */

:root {
  --primary: #0A8AA8;
  --primary-hover: #087691;
  --accent: #27D7B2;
  --accent-hover: #1FC7A4;
  --text: #1B1F23;
  --text-secondary: #667085;
  --background: #FFFFFF;
  --background-secondary: #F8FAFC;
  --border: #E5E7EB;
  --ink: #062D3D;
  --deep: #07384C;

  --hm-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --hm-header-h: 84px;
  --hm-gutter: 56px;
  --hm-max: 1220px;
  --hm-radius: 8px;
  --shadow-soft: 0 18px 46px rgba(16, 24, 40, .08);
  --shadow-strong: 0 28px 70px rgba(6, 45, 61, .18);
}

html,
body {
  /* These were pinned to `ltr` / `left` when site13 was English-only. The pin
     had to go for the Persian side: styleRtl.css turns `main` right-to-left, so
     the boxes mirrored but every block inside them inherited `text-align: left`
     and the Persian text sat against the wrong edge of its own card.
     `start` follows whatever direction the element ends up with. */
  text-align: start;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  background: var(--background);

  /* theme13.min.css pins html and body to height:100%, which caps the document
     at one viewport — anything past it (the footer, most visibly) is cut off
     and unreachable. Let the page grow with its content instead. */
  height: auto;
  min-height: 100%;
}

/* Legacy theme chrome that must never show on Homino pages. */
.page-loading:not(.hm-page-loading),
.btn-scroll-top {
  display: none !important;
}

/* --------------------------------------------------------------------------
   Layout primitives
   -------------------------------------------------------------------------- */

.hm-container {
  width: min(var(--hm-max), calc(100% - var(--hm-gutter)));
  margin-inline: auto;
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.hm-header {
  position: sticky;
  top: 0;
  z-index: 80;
  margin: 0;
  background: rgba(255, 255, 255, .92);
  border-bottom: 1px solid rgba(229, 231, 235, .7);
  box-shadow: 0 10px 30px rgba(6, 45, 61, .06);
  backdrop-filter: blur(18px);
}

.hm-header * {
  box-sizing: border-box;
}

/* The homepage hero sits underneath a translucent fixed bar. */
.homino-page .hm-header {
  position: fixed;
  inset: 0 0 auto;
}

/* minmax(0, 1fr), not 1fr: a grid track sized `1fr` still refuses to go below
   its content, and every item in the bar is `white-space: nowrap`. The signed-in
   row (menu + language + currency + phone + two quick actions + bell + avatar)
   measured 1444px inside a 1220px container and simply hung off the right edge —
   on a 1600px screen the avatar was cut in half by `overflow-x: hidden`. Now the
   menu is the track that gives, and the rules below cut what the row carries so
   it does not have to. */
.hm-nav {
  min-height: var(--hm-header-h);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(16px, 1.8vw, 24px);
}

.hm-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  color: var(--primary);
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}

.hm-logo:hover {
  color: var(--primary-hover);
}

.hm-logo small {
  display: block;
  margin-top: 6px;
  color: var(--text-secondary);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.hm-mark {
  position: relative;
  width: 34px;
  height: 42px;
  flex: 0 0 34px;
  border-left: 8px solid var(--primary);
  border-right: 8px solid var(--primary);
  border-radius: 6px 6px 2px 2px;
}

.hm-mark::before {
  position: absolute;
  left: 6px;
  right: 6px;
  bottom: 7px;
  height: 16px;
  content: "";
  border: 4px solid var(--accent);
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
}

.hm-menu {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 1.5vw, 26px);
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 13px;
  font-weight: 600;
}

.hm-menu a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: var(--hm-header-h);
  padding: 0 2px;
  color: #123047;
  text-decoration: none;
  white-space: nowrap;
  transition: color .2s ease;
}

.hm-menu a::after {
  position: absolute;
  right: 0;
  bottom: 22px;
  left: 0;
  height: 2px;
  content: "";
  border-radius: 999px;
  background: var(--accent);
  transform: scaleX(0);
  transition: transform .22s ease;
}

.hm-menu a:hover,
.hm-menu a.active {
  color: var(--primary);
}

.hm-menu a:hover::after,
.hm-menu a.active::after {
  transform: scaleX(1);
}

.hm-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  flex-shrink: 0;
}

/* The signed-in bar carries the most, so it gets the tighter rhythm. */
.hm-nav--auth .hm-actions {
  gap: 10px;
}

/* Language and currency as one control. Two identical pills with a 14px gap
   read as four unrelated buttons; sharing a frame says "display settings" and
   saves the gap as well. */
.hm-utils {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px;
  border: 1px solid rgba(8, 40, 61, .12);
  border-radius: 999px;
  background: #F1F5F8;
}

.hm-utils .hm-lang {
  padding: 0;
  border: 0;
  background: none;
}

/* Hairline between the two groups inside the shared frame. */
.hm-utils .hm-cur {
  position: relative;
  padding-inline-start: 5px;
}

.hm-utils .hm-cur::before {
  position: absolute;
  inset-block: 6px;
  inset-inline-start: 0;
  width: 1px;
  content: "";
  background: rgba(8, 40, 61, .14);
}

/* Header CTA. Page CSS may define richer .hm-btn variants on top of this. */
.hm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 22px;
  color: #fff;
  border: 0;
  border-radius: var(--hm-radius);
  background: linear-gradient(135deg, var(--primary), var(--accent));
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  box-shadow: 0 12px 26px rgba(10, 138, 168, .22);
  transition: background .22s ease, transform .22s ease, box-shadow .22s ease;
}

.hm-btn:hover {
  color: #fff;
  background: linear-gradient(135deg, var(--primary-hover), var(--accent-hover));
  transform: translateY(-1px);
}

/* Variants live here rather than in the page CSS so the login, register and
   other standalone site13 screens get them too. */
.hm-btn--primary {
  color: #fff;
  border: 0;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  box-shadow: 0 12px 26px rgba(10, 138, 168, .22);
}

.hm-btn--primary:hover {
  color: #fff;
  background: linear-gradient(135deg, var(--primary-hover), var(--accent-hover));
}

.hm-btn--outline {
  color: var(--primary);
  border: 1.5px solid rgba(10, 138, 168, .38);
  background: #fff;
  box-shadow: none;
}

.hm-btn--outline:hover {
  color: var(--primary-hover);
  border-color: var(--primary);
  background: rgba(10, 138, 168, .07);
}

/* On dark or photographic backgrounds. */
.hm-btn--ghost {
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .5);
  background: rgba(255, 255, 255, .14);
  box-shadow: none;
  backdrop-filter: blur(14px);
}

.hm-btn--ghost:hover {
  color: #fff;
  background: rgba(255, 255, 255, .24);
}

.hm-phone {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--deep);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.hm-phone i {
  color: var(--primary);
  font-size: 15px;
}

.hm-phone:hover {
  color: var(--primary);
}


/* --------------------------------------------------------------------------
   Header — signed-in state
   -------------------------------------------------------------------------- */

.hm-account-menu {
  justify-content: flex-start;
  gap: 18px;
}

.hm-account-menu a {
  gap: 7px;
}

.hm-account-menu i,
.hm-quick i,
.hm-user__menu i,
.hm-mobile-link i,
.hm-mobile-quickbar i {
  font-size: 15px;
  line-height: 1;
}

.hm-quick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 38px;
  padding: 0 15px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: transform .18s ease;
}

.hm-quick--outline {
  color: var(--deep);
  border: 1px solid rgba(7, 56, 76, .24);
  background: #fff;
}

.hm-quick--primary {
  color: #fff;
  border: 1px solid transparent;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  box-shadow: 0 10px 22px rgba(10, 138, 168, .18);
}

.hm-quick:hover,
.hm-user__trigger:hover {
  transform: translateY(-1px);
}

/* The bell and the avatar, set apart from the actions by a hairline. */
.hm-account {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-inline-start: 12px;
  border-inline-start: 1px solid rgba(8, 40, 61, .12);
}

.hm-user {
  position: relative;
}

.hm-user__trigger {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 0;
  color: #123047;
  border: 0;
  border-radius: 999px;
  background: none;
  font-size: 12px;
  font-weight: 700;
  transition: transform .18s ease;
}

/* --------------------------------------------------------------------------
   Avatar
   --------------------------------------------------------------------------
   Two bugs lived here. theme13.min.css sets `img { max-width: 100%; height: auto }`,
   which beats the width/height attributes on the tag, so any profile photo that
   was not exactly square rendered as an oval inside the round frame. And the
   photo is not guaranteed to load at all: users.photo can name a file that is no
   longer on disk, and User::photo()'s female default (avatar_women.png) has
   never existed in public/upload/images — that user got the browser's broken
   image icon in the header.

   So the frame is the avatar. It always draws the initials; the photo lies on
   top of it and removes itself (onerror) if it fails, leaving the initials. */
.hm-avatar {
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  overflow: hidden;
  color: #fff;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--deep), var(--primary));
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .02em;
  line-height: 1;
  /* 38 + a 2px ring = 42px across, the same as the bell next to it. */
  box-shadow: 0 0 0 2px rgba(10, 138, 168, .22);
}

.hm-avatar::before {
  content: attr(data-initials);
}

.hm-avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.hm-avatar--lg {
  width: 46px;
  height: 46px;
  font-size: 15px;
}

.hm-mobile-toggle .hm-avatar {
  box-shadow: none;
}

.hm-user__trigger span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hm-user__menu {
  min-width: 230px;
  padding: 8px;
  border: 1px solid rgba(10, 138, 168, .14);
  border-radius: var(--hm-radius);
  box-shadow: 0 22px 48px rgba(6, 45, 61, .16);
}

.hm-user__info {
  margin-bottom: 4px;
  padding: 9px 11px 11px;
  border-bottom: 1px solid var(--border);
}

.hm-user__info strong,
.hm-user__info span {
  display: block;
}

.hm-user__info strong {
  color: #052D3D;
  font-size: 13px;
}

.hm-user__info span {
  margin-top: 3px;
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 600;
}

.hm-user__menu .dropdown-item {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 38px;
  color: #123047;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
}

.hm-user__menu .dropdown-item:hover {
  color: var(--primary);
  background: rgba(10, 138, 168, .08);
}

.hm-user__menu .dropdown-item.danger {
  color: #c2410c;
}

/* theme13.min.css ends with `.fi-heart, .fi-heart-filled { color: red !important }`.
   It is meant for the favourite toggle on a property card, where red is the point,
   but it has no scope — so "Favorites" in the account menu beside the notification
   bell, in the mobile drawer and in the workspace sidebar came out as a single red
   heart in an otherwise navy list, reading like an alert rather than a link.
   Same specificity trick the theme used, one class deeper. The icons in these
   menus take their colour from the item, so inherit is the right value; the
   sidebar colours its icons per state and is fixed in management.css. */
.hm-user__menu .dropdown-item .fi-heart,
.hm-mobile-link .fi-heart,
.hm-account-menu .fi-heart {
  color: inherit !important;
}

/* --------------------------------------------------------------------------
   Notification bell in the header
   --------------------------------------------------------------------------
   notifications.css is shared with sites 3 and 14, where the bell sits on a navy
   bar: it draws a 40px rounded *square* filled with a flat grey wash. Next to a
   round language pill, two pill buttons and a round avatar that was the one
   square thing in the row. Restyled here, scoped to the header, so the other two
   sites keep their own bell. */

/* `.nb14.on-light .nb14-btn` in notifications.css is three classes deep and that
   file loads after this one, so the on-light class has to be named here too. */
.hm-header .nb14.on-light .nb14-btn {
  width: 42px;
  height: 42px;
  color: var(--primary);
  border: 1px solid rgba(10, 138, 168, .18);
  border-radius: 50%;
  background: #fff;
  font-size: 17px;
  box-shadow: 0 8px 20px rgba(16, 24, 40, .07);
  transition: color .18s ease, border-color .18s ease, background .18s ease, transform .18s ease;
}

.hm-header .nb14.on-light .nb14-btn:hover,
.hm-header .nb14.on-light .nb14-btn[aria-expanded="true"] {
  color: var(--primary-hover);
  border-color: rgba(10, 138, 168, .42);
  background: rgba(10, 138, 168, .07);
  transform: translateY(-1px);
}

/* The count is the only thing in the corner allowed to shout. Coral rather than
   the brand teal: on a teal-tinted button a teal badge disappears. */
.hm-header .nb14-badge {
  top: -3px;
  inset-inline-end: -3px;
  min-width: 18px;
  height: 18px;
  border: 2px solid #fff;
  border-radius: 999px;
  background: #F0522F;
  color: #fff;
  font-size: .62rem;
  line-height: 14px;
  box-shadow: 0 4px 10px rgba(240, 82, 47, .34);
}

/* An unread count is worth a ring; a bell that rocks every page load is not. */
.hm-header .nb14-btn.has-new {
  animation: none;
}

.hm-header .nb14-btn.has-new .nb14-badge {
  animation: hmBellPulse 1.8s ease-out 3;
}

@keyframes hmBellPulse {
  0%, 100% { transform: scale(1); }
  12% { transform: scale(1.18); }
  24% { transform: scale(1); }
}

/* --------------------------------------------------------------------------
   Header — mobile
   -------------------------------------------------------------------------- */

.hm-mobile-toggle {
  display: none;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  color: #123047;
  border: 1px solid rgba(10, 138, 168, .18);
  border-radius: 50%;
  background: #fff;
}

.hm-mobile-nav {
  color: #123047;
}

.hm-mobile-user {
  display: flex;
  align-items: center;
  gap: 11px;
}

.hm-mobile-user strong,
.hm-mobile-user span {
  display: block;
}

.hm-mobile-user strong {
  color: #052D3D;
  font-size: 14px;
}

.hm-mobile-user span {
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 600;
}

.hm-mobile-quickbar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.hm-mobile-quickbar a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 54px;
  color: #052D3D;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

.hm-mobile-quickbar a + a {
  border-inline-start: 1px solid var(--border);
}

.hm-mobile-link {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 20px;
  color: #123047;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

.hm-mobile-link:hover {
  color: var(--primary);
  background: rgba(10, 138, 168, .06);
}

.hm-mobile-link.danger {
  color: #c2410c;
}

/* Unread counter — used in both the desktop dropdown and the mobile panel. */
.hm-badge {
  margin-inline-start: auto;
  padding: 2px 7px;
  color: #fff;
  border-radius: 999px;
  background: #dc2626;
  font-size: 11px;
  font-weight: 700;
}

.hm-mobile-divider {
  height: 10px;
  border-bottom: 1px solid var(--border);
  background: var(--background-secondary);
}

.hm-mobile-auth {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--border);
}

.hm-mobile-auth .hm-btn {
  min-height: 44px;
  padding: 0 12px;
  font-size: 13px;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.hm-footer {
  position: relative;
  clear: both;
  width: 100%;
  overflow: hidden;
  padding: 78px 0 28px;
  color: #d8eef4;
  background:
    radial-gradient(circle at 12% 0, rgba(39, 215, 178, .18), transparent 30%),
    linear-gradient(135deg, #062D3D, #07384C 58%, #052938);
}

.hm-footer::before {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  background: linear-gradient(90deg, rgba(255, 255, 255, .05), transparent 50%);
}

.hm-footer__top {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(260px, 1.7fr) repeat(4, minmax(130px, 1fr));
  gap: 42px;
}

.hm-footer__top > * {
  min-width: 0;
}

.hm-footer-logo {
  color: #fff;
  font-size: 24px;
}

.hm-footer-logo:hover {
  color: #fff;
}

.hm-footer-logo small {
  color: rgba(216, 238, 244, .72);
}

.hm-footer__brand p {
  max-width: 360px;
  margin: 20px 0 22px;
  color: rgba(216, 238, 244, .78);
  font-size: 14px;
  line-height: 1.85;
}

.hm-footer h4 {
  margin: 8px 0 18px;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.3;
  text-transform: uppercase;
}

.hm-footer a,
.hm-footer p {
  max-width: 100%;
  color: rgba(216, 238, 244, .78);
  font-size: 13px;
  line-height: 1.8;
  text-decoration: none;
  word-break: normal;
}

.hm-footer nav a,
.hm-footer__contact a {
  display: block;
  margin-bottom: 10px;
}

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

.hm-footer__newsletter {
  display: grid;
  grid-template-columns: 1fr auto;
  overflow: hidden;
  max-width: 390px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--hm-radius);
  background: rgba(255, 255, 255, .08);
}

.hm-footer__newsletter input {
  min-width: 0;
  min-height: 48px;
  padding: 0 14px;
  color: #fff;
  border: 0;
  outline: 0;
  background: transparent;
}

.hm-footer__newsletter input::placeholder {
  color: rgba(255, 255, 255, .58);
}

.hm-footer__newsletter button {
  padding: 0 16px;
  color: #fff;
  border: 0;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.hm-footer__social {
  display: flex;
  gap: 9px;
  margin-top: 16px;
}

.hm-footer__social a {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin: 0;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 50%;
  background: rgba(255, 255, 255, .07);
}

.hm-footer__bottom {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  min-height: 70px;
  margin-top: 46px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  color: rgba(216, 238, 244, .68);
  font-size: 12px;
}

.hm-footer__bottom nav {
  display: flex;
  gap: 18px;
}

/* --------------------------------------------------------------------------
   Page loader
   -------------------------------------------------------------------------- */

/* Nothing toggles .active today, so the overlay stays out of the layer stack
   entirely; add the class from JS to show it. */
.hm-page-loading {
  display: none;
}

.hm-page-loading.active {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(5, 41, 56, .28);
  backdrop-filter: blur(10px) saturate(1.08);
}

.hm-loader-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  min-width: 250px;
  padding: 30px 32px 28px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 18px;
  background: rgba(6, 45, 61, .78);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .26);
  backdrop-filter: blur(16px);
  text-align: center;
  transform: translateY(6px) scale(.98);
  animation: hmLoaderCardIn .42s ease forwards;
}

.hm-loader-card strong {
  color: #fff;
  font-size: 25px;
  font-weight: 800;
  line-height: 1;
}

.hm-loader-card > span {
  color: rgba(216, 238, 244, .82);
  font-size: 13px;
  font-weight: 600;
}

.hm-loader-mark {
  position: relative;
  width: 98px;
  height: 98px;
  margin-bottom: 2px;
}

.hm-loader-ring,
.hm-loader-ring::after {
  position: absolute;
  inset: 0;
  content: "";
  border-radius: 50%;
}

.hm-loader-ring {
  border: 3px solid rgba(255, 255, 255, .12);
  border-top-color: var(--accent);
  border-right-color: var(--primary);
  animation: hmLoaderSpin .82s linear infinite;
}

.hm-loader-ring::after {
  inset: 10px;
  border: 1px solid rgba(39, 215, 178, .22);
  box-shadow: inset 0 0 22px rgba(39, 215, 178, .10);
}

.hm-loader-logo-mark {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 44px;
  height: 54px;
  border-left: 10px solid var(--primary);
  border-right: 10px solid var(--primary);
  border-radius: 7px 7px 3px 3px;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 12px 24px rgba(39, 215, 178, .22));
  animation: hmLoaderMarkPulse 1.4s ease-in-out infinite;
}

.hm-loader-logo-mark::before {
  position: absolute;
  left: 7px;
  right: 7px;
  bottom: 9px;
  height: 20px;
  content: "";
  border: 5px solid var(--accent);
  border-bottom: 0;
  border-radius: 9px 9px 0 0;
}

.hm-loader-progress {
  width: 178px;
  height: 4px;
  overflow: hidden;
  margin-top: 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .12);
}

.hm-loader-progress span {
  display: block;
  width: 46%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  animation: hmLoaderBar 1.1s ease-in-out infinite;
}

@keyframes hmLoaderSpin { to { transform: rotate(360deg); } }
@keyframes hmLoaderMarkPulse { 50% { transform: translate(-50%, -50%) scale(1.06); } }
@keyframes hmLoaderBar {
  0% { transform: translateX(-120%); }
  100% { transform: translateX(240%); }
}
@keyframes hmLoaderCardIn { to { transform: translateY(0) scale(1); } }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1320px) {
  /* First thing to go when the bar gets tight — it stays in the mobile menu and
     the footer. Only guests still have it in the bar at all, so the threshold
     could come back down from 1440 to where the guest row actually runs out of
     room. */
  .hm-phone {
    display: none;
  }
}

@media (max-width: 1280px) {
  /* Under 1280 the signed-in row is down to its last few pixels of slack. The
     quick actions keep their icons and lose their labels rather than the row
     losing the menu — /add and /customers/create are two of the three things an
     advisor opens the header for. */
  /* 42px round, the same as the bell and the avatar beside them. */
  .hm-nav--auth .hm-quick {
    width: 42px;
    height: 42px;
    min-height: 0;
    padding: 0;
  }

  .hm-nav--auth .hm-quick span {
    display: none;
  }

  .hm-nav--auth .hm-quick i {
    font-size: 17px;
  }
}

@media (max-width: 1180px) {
  :root {
    --hm-gutter: 36px;
  }

  /* Logo on the left, the off-canvas toggle on the right — two cells, one row.
     The <nav> is still a grid child even though its menu is hidden, so leaving
     three columns declared pushed .hm-actions onto a second row and the avatar
     ended up stranded under the logo. */
  .hm-nav {
    grid-template-columns: 1fr auto;
    gap: 12px;
  }

  .hm-nav > nav {
    display: none;
  }

  /* The desktop menu, the quick actions and the avatar all give way to the
     off-canvas toggle at the same width, or the header is left with no nav.
     The language and currency switches go with them — the drawer opens with
     both, and left in the bar they pushed the toggle itself off a phone
     screen: at 430px the row was logo + switches + bell and the button that
     opens the drawer was past the right edge. The bell stays; an advisor
     checking the day's reminders from a phone is the whole point of it, and
     the drawer has no bell of its own. */
  .hm-menu,
  .hm-quick,
  .hm-user,
  .hm-utils {
    display: none;
  }

  .hm-mobile-toggle {
    display: grid;
  }
}

@media (max-width: 1120px) {
  .hm-footer__top {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  :root {
    --hm-header-h: 72px;
    --hm-gutter: 28px;
  }

  .homino-page .hm-header {
    position: sticky;
  }

  .hm-logo {
    font-size: 25px;
  }

  /* Login/Register move into the off-canvas panel, which opens with them
     pinned to the top. */
  .hm-actions .hm-btn {
    display: none;
  }

  .hm-footer {
    padding: 36px 0 20px;
  }

  /* Five stacked blocks made the footer longer than the page it sits under. The
     brand + newsletter keeps the full width; the four link lists pair up. */
  .hm-footer__top {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 18px;
  }

  .hm-footer__top > *:first-child {
    grid-column: 1 / -1;
  }

  .hm-footer__newsletter {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .hm-footer__bottom {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* ==========================================================================
   Page head — the band every top-level page opens with.

   Lives here, in the stylesheet every site13 page already loads, because it is
   the one thing that has to look identical everywhere. It used to exist only as
   .pg-hero inside pages.css, so the marketing pages (/areas, /team, /about-us)
   opened with a teal hero and a big title while the two search pages
   (/c/{city}, /new-projects/uae) opened straight into a filter bar — same site,
   two different front doors.

   Tokens are the shared Homino palette, spelled out rather than var()-ed: this
   block is used by .pg-page, .ls-page and .pv-page, and each of those declares
   its own token scope.
   ========================================================================== */

.hm-pagehead {
  position: relative;
  overflow: hidden;
  padding: 56px 0 52px;
  color: #fff;
  background: linear-gradient(112deg, #08283D 0%, #0B6E77 52%, #0DA9A5 100%);
}

.hm-pagehead::after {
  content: "";
  position: absolute;
  top: -140px;
  right: -120px;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .07);
}

/* Community pages put a photo of the area behind the band. The gradient stays on
   top of it so the white type keeps its contrast whatever the photo looks like,
   and the caller passes the image in as --hm-head-img on the element — only add
   the modifier when there really is an image, or the layer resolves to nothing
   and the gradient goes with it. */
.hm-pagehead--photo {
  background-color: #08283D;
  background-image:
    linear-gradient(112deg, rgba(8, 40, 61, .94) 0%, rgba(11, 110, 119, .86) 52%, rgba(13, 169, 165, .74) 100%),
    var(--hm-head-img);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.hm-pagehead__in {
  position: relative;
  z-index: 1;
  width: min(100% - 32px, 1220px);
  margin-inline: auto;
}

.hm-pagehead__text { max-width: 720px; }

.hm-pagehead__eyebrow {
  margin-bottom: 12px;
  color: rgba(255, 255, 255, .78);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.hm-pagehead h1 {
  margin: 0 0 14px;
  color: #fff;
  font-size: 42px;
  font-weight: 700;
  line-height: 1.15;
}

.hm-pagehead p {
  margin: 0;
  color: rgba(255, 255, 255, .84);
  font-size: 16.5px;
  line-height: 1.7;
}

/* Result counts and other live numbers the search pages put in the head. */
.hm-pagehead__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 18px;
  color: rgba(255, 255, 255, .8);
  font-size: 14px;
}

.hm-pagehead__meta b { color: #fff; font-weight: 800; }

.hm-pagehead__acts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

/* Breadcrumb strip that sits under the band on every page. */
.hm-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  width: min(100% - 32px, 1220px);
  margin: 18px auto 0;
  color: #62778C;
  font-size: 13px;
}

.hm-crumbs a { color: #62778C; text-decoration: none; }
.hm-crumbs a:hover { color: #0B8F8C; }
.hm-crumbs i { font-size: 10px; opacity: .55; }
.hm-crumbs span { color: #102A43; font-weight: 600; }

@media (max-width: 767px) {
  .hm-pagehead { padding: 40px 0 36px; }
  .hm-pagehead h1 { font-size: 30px; }
  .hm-pagehead p { font-size: 15px; }
}


/* --------------------------------------------------------------------------
   Language switch
   --------------------------------------------------------------------------
   Two short codes in one pill rather than a dropdown: there are exactly two
   languages, so a menu would cost a click to show a single alternative. The
   pill keeps the header height unchanged at every width. */

.hm-lang {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid rgba(8, 40, 61, .12);
  border-radius: 999px;
  background: #F1F5F8;
}

.hm-lang a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 30px;
  padding: 0 9px;
  border-radius: 999px;
  color: #56708A;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .02em;
  text-decoration: none;
  transition: color .2s ease, background .2s ease;
}

.hm-lang a:hover {
  color: var(--deep);
  background: rgba(255, 255, 255, .8);
}

.hm-lang a.is-active {
  color: #fff;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  box-shadow: 0 6px 14px rgba(10, 138, 168, .24);
}

/* The Persian label is set in its own font even on the English page, or "فا"
   renders in whatever the Latin stack falls back to. */
.hm-lang a[lang="fa"],
.hm-mobile-lang a[lang="fa"] {
  font-family: IRANSans, vazir, Tahoma, sans-serif;
}

/* Full labels in the drawer — there is room, and "English / فارسی" is clearer
   than two codes on a screen where nothing else gives the context. */
.hm-mobile-lang {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 16px 20px 4px;
}

.hm-mobile-lang a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  border: 1.5px solid rgba(8, 40, 61, .14);
  border-radius: var(--hm-radius);
  color: #56708A;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

.hm-mobile-lang a.is-active {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, var(--primary), var(--accent));
}


/* --------------------------------------------------------------------------
   RTL
   --------------------------------------------------------------------------
   dir="rtl" on <html> mirrors the flex and grid tracks on its own, so this
   block only has to undo the places where the shell used a physical side or a
   direction-specific transform. */

/* IRANSans for the whole Persian side. Headings, form controls and buttons are
   listed because theme13.min.css gives each of them its own font-family, so
   setting it on <body> alone left them in the Latin stack. --hm-font-fa keeps
   the stack in one place for the page stylesheets to reuse. */
[dir="rtl"] {
  --hm-font-fa: IRANSans, vazir, "Noto Sans", Tahoma, sans-serif;
}

[dir="rtl"] body,
[dir="rtl"] :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6),
[dir="rtl"] :is(input, button, select, optgroup, textarea, .form-label, .btn) {
  font-family: var(--hm-font-fa);
}

/* Latin brand name, Latin numerals, phone numbers and e-mail addresses keep
   their own direction so "+971 4 123 4567" does not come out reversed. */
[dir="rtl"] .hm-logo > span,
[dir="rtl"] .hm-phone,
[dir="rtl"] .hm-footer__contact a {
  direction: ltr;
  unicode-bidi: isolate;
}

[dir="rtl"] .hm-logo > span,
[dir="rtl"] .hm-footer__contact a {
  text-align: right;
}

[dir="rtl"] .hm-pagehead::after {
  right: auto;
  left: -120px;
}

[dir="rtl"] .hm-crumbs i {
  transform: scaleX(-1);
}

/* Property titles, community names and developer names come from the database
   and are English on both sides of the site. Left as ordinary RTL text, a title
   like "3 bedroom Townhouse in JBR" had its leading number pushed to the end.
   `plaintext` takes each element's direction from its own first strong
   character, so English data reads left-to-right and Persian data still reads
   right-to-left — without pinning either. */
[dir="rtl"] :is(
  .hm2-card__title, .hm2-card__area, .hm2-card__price,
  .hm2-project__name, .hm2-project__dev, .hm2-project__area,
  .hm2-area__name, .hm2-advisor__info b, .hm2-advisor__info span,
  .es-card__title, .pj-card__title, .pj-card__dev, .ls-mc__title,
  .pv-advisor__name, .pg-area__name, .pg-area__meta, .pg-person h3,
  .pg-table td, .pg-table th,
  .s13-list td, .s13-list th
) {
  unicode-bidi: plaintext;
  /* Physical `right`, not `end`: under plaintext the logical sides follow the
     element's own first strong character, so an English title would resolve
     `end` to the left and sit against the wrong edge of a right-aligned card. */
  text-align: right;
}

/* Cells keep whatever alignment their column asked for. */
[dir="rtl"] :is(.pg-table td, .pg-table th, .s13-list td, .s13-list th) {
  text-align: start;
}

[dir="rtl"] :is(.pg-num, .pv-num, [data-align="right"]) {
  text-align: end;
}

/* The currency switch reuses the language pill so the two controls read as one
   pair of settings rather than two unrelated widgets. It is a touch narrower —
   AED/USD are three characters, EN/فا are two. */
.hm-cur a {
  min-width: 40px;
  padding: 0 7px;
  font-size: 11px;
}

.hm-mobile-cur {
  padding-top: 8px;
}

/* Phone, e-mail and URL fields hold Latin text whichever language the page is
   in. Left as RTL inputs, a number like +971 50 123 4567 had its "+" dragged to
   the far end. They run left-to-right but stay against the right edge, so the
   column of fields still reads as one straight line. */
[dir="rtl"] input[type="tel"],
[dir="rtl"] input[type="email"],
[dir="rtl"] input[type="url"],
[dir="rtl"] input[type="number"],
[dir="rtl"] input[name="mobile"],
[dir="rtl"] input[name="phone"] {
  direction: ltr;
  text-align: right;
}