/* Shared frontend finish. Keep existing responsive layouts and UI behavior. */
:root {
  --re-bg: #f7f8fa;
  --re-surface: #fff;
  --re-surface-soft: #eef3fb;
  --re-border: #e1e6ee;
  --re-text: #14253d;
  --re-muted: #58677b;
  --re-primary: #245cdb;
  --re-primary-dark: #1944ab;
  --re-accent: #137c70;
  --re-radius: 18px;
  --re-shadow: 0 8px 28px rgba(20, 37, 61, .06);
  --re-shadow-hover: 0 16px 36px rgba(20, 37, 61, .11);
}

html { background: var(--re-bg); }
body {
  background: var(--re-bg);
  color: var(--re-text);
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
body::before { content: none; }
h1, h2, h3 { text-wrap: balance; }
h1 { font-size: clamp(28px, 3vw, 40px); line-height: 1.18; letter-spacing: -.035em; }
p { text-wrap: pretty; }
[dir="rtl"] h1, [dir="rtl"] h2 { letter-spacing: normal; }

/* Flat, readable surfaces give imagery and primary actions the emphasis. */
#user_menu, #mega-menu, .mega-panel, #main, #sidebar,
.ui-content-box, .ui-generic-form, #right-side #contact,
#item-head, #gallery, #comments, .zb-verification-summary,
.zb-property-verification-form, .mark-as, .empty-state,
.zb-contact-flow > div, .zb-dashboard-summary > div {
  background: var(--re-surface);
  border-color: var(--re-border);
  box-shadow: var(--re-shadow);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
#user_menu { border-radius: 16px; }
#mega-menu { box-shadow: none; border-radius: 14px; }
.mega-panel { box-shadow: 0 20px 48px rgba(20, 37, 61, .14); }
.mega-menu-link { border-radius: 9px; }
.mega-menu-link:hover,
.mega-menu-item:hover > .mega-menu-link,
.mega-menu-item:focus-within > .mega-menu-link {
  background: var(--re-surface-soft);
  color: var(--re-primary);
  box-shadow: none;
  transform: none;
}
#header.mobile-menu-open #user_menu { background: #fff; border-color: var(--re-border); }

#form_publish, .ui-button, .ui-button-big,
#sidebar .submit-box .ui-button-submit, button.ui-button-submit {
  background: var(--re-primary);
  border: 1px solid var(--re-primary);
  border-radius: 11px;
  box-shadow: 0 4px 10px rgba(36, 92, 219, .12);
  color: #fff;
  font-weight: 650;
  text-shadow: none;
}
#form_publish:hover, #form_publish:focus,
.ui-button:hover, .ui-button:focus,
.ui-button-big:hover, .ui-button-big:focus,
#sidebar .submit-box .ui-button-submit:hover, button.ui-button-submit:hover {
  background: var(--re-primary-dark);
  border-color: var(--re-primary-dark);
  box-shadow: 0 6px 16px rgba(36, 92, 219, .18);
  color: #fff;
  transform: none;
}
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--re-primary);
  outline-offset: 3px;
}

/* Search-led homepage with an editorial heading and a single clear action. */
#main {
  background: linear-gradient(115deg, #edf3fe, #f5f8ff 55%, #fff);
  border: 1px solid #dce5f5;
  border-radius: 26px;
  padding: clamp(22px, 3.2vw, 44px);
  gap: 36px;
  box-shadow: none;
}
#home-search { padding-top: 6px; }
.zb-eyebrow {
  color: var(--re-primary);
  font-size: 11px;
  font-weight: 750;
  letter-spacing: .12em;
  line-height: 1.5;
  text-transform: uppercase;
  margin: 0 0 12px;
}
#home-search h1 {
  font-size: clamp(36px, 4.2vw, 58px);
  line-height: 1.06;
  font-weight: 750;
  letter-spacing: -.045em;
  margin: 0 0 20px;
}
#home-search h1 span { color: var(--re-primary); }
[dir="rtl"] #home-search h1 { letter-spacing: normal; }
#home-search .zb-hero-copy {
  color: var(--re-muted);
  font-size: 16px;
  line-height: 1.7;
  max-width: 420px;
  margin: 0 0 26px;
}
.zb-search-label { display: block; font-weight: 650; font-size: 13px; margin-bottom: 9px; }
#home-search .zb-home-search-control {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  background: #fff;
  padding: 7px;
  border: 1px solid #cbd7ea;
  border-radius: 14px;
  box-shadow: 0 5px 18px rgba(20, 37, 61, .05);
}
#home-search .zb-home-search-control .input-text {
  min-width: 0;
  flex: 1 1 140px;
  width: 0;
  max-width: none;
  height: 48px;
  padding: 10px;
  background: #fff;
  border: 0;
  border-radius: 7px;
  box-shadow: none;
  font-size: 14px;
}
#home-search .zb-home-search-control button {
  flex: 0 0 auto;
  min-height: 48px;
  height: auto;
  margin: 0;
  padding: 10px 18px;
  line-height: 1.4;
  font-size: 14px;
}
#home-search #message-seach { position: static; flex-basis: 100%; color: #a12832; font-size: 13px; }
#home-search #message-seach:empty { display: none; }
.zb-trust-row { gap: 8px 14px; margin-top: 16px; }
.zb-trust-row span {
  background: transparent;
  border: 0;
  color: var(--re-muted);
  font-size: 11px;
  font-weight: 500;
  padding: 0;
}
.zb-trust-row span::before { content: "\2713"; color: var(--re-accent); margin-inline-end: 5px; font-weight: 800; }
#home-search .categories { padding-top: 24px; gap: 8px; }
#home-search .categories h2 { line-height: 1.4; }
#home-search .categories a {
  background: rgba(255, 255, 255, .7);
  border: 1px solid #d5deed;
  border-radius: 10px;
  box-shadow: none;
  font-size: 13px;
  font-weight: 600;
}
#home-search .categories a:hover { background: #fff; border-color: var(--re-primary); }
.zb-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin: 42px 0 22px; }
.zb-section-heading .zb-eyebrow { margin-bottom: 6px; }
.zb-section-heading h2 { font-size: clamp(24px, 2.6vw, 32px); line-height: 1.2; letter-spacing: -.025em; margin: 0; }
.zb-text-link { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 650; padding: 8px 0; }

/* Consistent cards across discovery, search, and account pages. */
.ui-item {
  background: #fff;
  border: 1px solid var(--re-border);
  border-radius: 18px;
  box-shadow: 0 3px 12px rgba(20, 37, 61, .04);
}
.ui-item .info { background: #fff; -webkit-backdrop-filter: none; backdrop-filter: none; border-color: var(--re-border); padding: 20px; }
.ui-item .info a { font-size: 18px; font-weight: 650; line-height: 1.4; }
.ui-item .info h3 a { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.ui-item .info a.ui-button { color: #fff; font-size: 13px; min-height: 40px; padding: 10px 14px; }
.ui-item .info .data { font-size: 13px; }
.ui-item .frame img { transition: transform 280ms ease; }
.ui-item .frame .type { background: rgba(20, 37, 61, .84); font-size: 12px; text-align: start; }
.ui-item .frame .price, .details-box .price { background: #fff; color: var(--re-text); border: 1px solid var(--re-border); border-radius: 9px; box-shadow: 0 3px 12px rgba(20, 37, 61, .12); font-weight: 750; }
.zb-result-tabs span, .active-filter-summary strong, .zb-card-signals span { border-radius: 7px; background: var(--re-surface-soft); border-color: var(--re-border); color: var(--re-muted); }
.zb-dashboard-summary { gap: 16px; }
.zb-dashboard-summary > div { border-radius: 16px; padding: 22px; border-top: 3px solid var(--re-primary); }
.zb-dashboard-summary strong { color: var(--re-text); font-size: 30px; line-height: 1.3; font-variant-numeric: tabular-nums; }
.zb-dashboard-summary span { color: var(--re-muted); font-size: 12px; margin-top: 6px; }
.ui-generic-form input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="submit"]),
.ui-generic-form textarea, .ui-generic-form select,
#sidebar input[type="text"], #sidebar input[type="number"], #sidebar select {
  background: #fff;
  color: var(--re-text);
  border: 1px solid #cbd4e1;
  border-radius: 10px;
  box-shadow: none;
}
.ui-generic-form label { color: var(--re-text); font-weight: 600; }
#footer { background: #edf1f7; border-top: 1px solid var(--re-border); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; margin-top: 48px; }
#footer-inner { padding-top: 30px; padding-bottom: 30px; }

/* Secondary journeys use the same surfaces, controls, and spacing. The
   container scope also wins over legacy styles embedded in custom pages. */
.container .zb-move, .container .zb-land { color: var(--re-text); margin: 8px auto 32px; }
.container .zb-move section, .container .zb-move fieldset,
.container .zb-land section {
  background: #fff;
  border: 1px solid var(--re-border);
  border-radius: 18px;
  padding: clamp(18px, 3vw, 28px);
  box-shadow: var(--re-shadow);
}
.container .zb-move .move-hero, .container .zb-land .hero,
.container .zb-services-hero {
  background: linear-gradient(115deg, #eaf1ff, #f5f8ff);
  border: 1px solid #dce5f5;
  border-radius: 22px;
  color: var(--re-text);
  box-shadow: none;
  padding: clamp(24px, 4vw, 44px);
}
.container .zb-services-hero h1 { color: var(--re-text); font-size: clamp(32px, 4vw, 48px); line-height: 1.12; }
.container .zb-services-hero > span { color: var(--re-primary); }
.container .zb-services-hero p { color: var(--re-muted); line-height: 1.7; }
.container .zb-services-hero .ui-button { background: var(--re-primary); color: #fff; }
.container .zb-services-hero .ui-button:hover { background: var(--re-primary-dark); }
.container .zb-partner-cta { background: var(--re-surface-soft); border: 1px solid var(--re-border); }
.container .zb-move .move-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.container .zb-move .move-stat { background: var(--re-surface-soft); border-radius: 12px; }
.container .zb-move input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
.container .zb-move select, .container .zb-move textarea,
.container .zb-land input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
.container .zb-land select, .container .zb-land textarea,
.container .transaction-grid input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
.container .transaction-grid select, .container .transaction-grid textarea {
  min-width: 0;
  max-width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid #cbd4e1;
  border-radius: 10px;
  background: #fff;
  color: var(--re-text);
  box-shadow: none;
  font: inherit;
  box-sizing: border-box;
}
.container .zb-move button, .container .zb-land button {
  background: var(--re-primary);
  color: #fff;
  border: 1px solid var(--re-primary);
  border-radius: 10px;
  min-height: 44px;
  max-width: 100%;
  white-space: normal;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  margin-inline: 0 8px;
}
.container .zb-move button:hover, .container .zb-land button:hover { background: var(--re-primary-dark); }
.container :is(.zb-move, .zb-land) summary { padding: 12px 0; color: var(--re-primary); }
.container :is(.zb-move, .zb-land) legend { float: none; width: auto; padding-inline: 8px; font-size: 16px; font-weight: 650; }
.container .transaction-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.container .transaction-grid > *, .container .transaction-grid label { min-width: 0; max-width: 100%; }
.container .transaction-grid .ui-button { max-width: 100%; white-space: normal; overflow-wrap: anywhere; }
.container .transaction-grid p, .container .transaction-row, .container .transaction-contract,
.container .realestate-notification-row p, .container .contact-request-list { overflow-wrap: anywhere; }
.container .transaction-grid label { flex: 1 1 180px; }
.container .realestate-notification-row { flex-wrap: wrap; gap: 16px; }
.container .notification-row-actions, .container .notification-actions, .zb-recovery-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.container .notification-row-actions { white-space: normal; }
.container .user-sidebar a { display: block; padding: 8px 10px; border-radius: 8px; line-height: 1.4; }
.container .user-sidebar a:hover, .container .user-sidebar a:focus-visible { background: var(--re-surface-soft); }
.container .ui-actionbox { background: #fff; border: 1px solid var(--re-border); border-radius: 10px; box-shadow: none; }
.container .ui-actionbox a { background: transparent; border-color: var(--re-border); text-shadow: none; }
.container .ui-actionbox a.current { color: var(--re-primary); background: var(--re-surface-soft); }
#sidebar .ui-slider-box { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; height: auto; }
#sidebar #price-range { grid-column: 1 / -1; width: auto; margin: 12px 5px; }
#sidebar .ui-slider-box input { float: none; width: 100%; min-width: 0; margin: 0; padding: 9px 6px; font-size: 14px; text-align: start; }
.container .page { max-width: 850px; margin: 0 auto 32px; background: #fff; border: 1px solid var(--re-border); border-radius: 20px; padding: clamp(20px, 4vw, 40px); line-height: 1.8; }
.container .page h2 { margin-top: 32px; font-size: 23px; }
.container .page ul, .container .page ol { padding-inline-start: 24px; }
.container .page li { margin-bottom: 8px; }
.container .content.error { background: #fff; border: 1px solid var(--re-border); border-radius: 22px; padding: clamp(24px, 5vw, 60px); margin-block: 12px 36px; }
.container .content.error p { color: var(--re-muted); margin-block: 16px 24px; }
.container .register-location-box, .container .register-otp-box { border-radius: 14px; border-color: var(--re-border); background: var(--re-surface-soft); }
.container .ui-generic-form .ui-row-text input:disabled { background: #f1f3f7; color: var(--re-muted); cursor: default; }
.zb-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .ui-item:hover { box-shadow: var(--re-shadow-hover); }
  .ui-item .frame a:hover img { transform: scale(1.025); }
}
@media (max-width: 820px) {
  #main { padding: 24px; gap: 28px; }
  #home-search h1 { font-size: clamp(36px, 7vw, 52px); }
  #home-search .zb-hero-copy { max-width: 100%; }
  #home-search .zb-home-search-control .input-text { font-size: 16px; }
  .zb-section-heading { margin-top: 30px; align-items: start; flex-wrap: wrap; gap: 10px; }
  /* Prevent focus zoom on phones despite the legacy 12/13px field rules. */
  .container form input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
  .container form select, .container form textarea,
  #user_menu .zb-country-switch select { font-size: 16px !important; }
  .container .transaction-grid { grid-template-columns: 1fr; }
  .container .ui-actionbox { display: flex; flex-wrap: wrap; }
}
@media (max-width: 480px) {
  #main { padding: 20px 16px; border-radius: 20px; }
  #home-search h1 { font-size: 36px; }
  #home-search .zb-home-search-control .input-text { flex-basis: 100%; width: 100%; font-size: 16px; }
  #home-search .zb-home-search-control button { width: 100%; }
  .zb-trust-row { gap: 7px 12px; }
  .zb-section-heading h2 { font-size: 25px; }
  .ui-item .info { padding: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .ui-item .frame img { transition: none; }
}
