/*
 * ZeroBroker liquid-glass visual layer.
 * Loaded after the base, responsive, and bilingual styles so the material
 * system remains consistent without changing the theme's page structure.
 */

:root {
  --re-bg: #eaf4ff;
  --re-surface: rgba(255, 255, 255, 0.58);
  --re-surface-soft: rgba(239, 248, 255, 0.52);
  --re-border: rgba(255, 255, 255, 0.78);
  --re-text: #10243f;
  --re-muted: #5f7188;
  --re-primary: #1768e5;
  --re-primary-dark: #0e49ad;
  --re-accent: #0e9f98;
  --re-radius: 20px;
  --re-glass: rgba(255, 255, 255, 0.58);
  --re-glass-strong: rgba(255, 255, 255, 0.76);
  --re-glass-soft: rgba(244, 250, 255, 0.44);
  --re-glass-border: rgba(255, 255, 255, 0.82);
  --re-glass-blur: blur(22px) saturate(145%);
  --re-shadow: 0 24px 64px rgba(32, 72, 117, 0.16),
    0 4px 14px rgba(32, 72, 117, 0.08);
  --re-shadow-hover: 0 30px 72px rgba(32, 72, 117, 0.22),
    0 8px 20px rgba(32, 72, 117, 0.1);
}

html {
  background: #eaf4ff;
}

body {
  background-color: var(--re-bg);
  background-image:
    radial-gradient(circle at 8% 8%, rgba(64, 205, 255, 0.32) 0, rgba(64, 205, 255, 0) 30%),
    radial-gradient(circle at 88% 12%, rgba(123, 103, 238, 0.22) 0, rgba(123, 103, 238, 0) 28%),
    radial-gradient(circle at 78% 78%, rgba(57, 217, 180, 0.2) 0, rgba(57, 217, 180, 0) 31%),
    linear-gradient(145deg, #f7fbff 0%, #eaf4ff 48%, #f4f0ff 100%);
  background-attachment: fixed;
  min-height: 100vh;
}

body::before {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.16) 1px, transparent 1px);
  background-size: 72px 72px;
  content: "";
  inset: 0;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.48), transparent 72%);
  pointer-events: none;
  position: fixed;
  z-index: -1;
}

::selection {
  background: rgba(23, 104, 229, 0.2);
  color: var(--re-text);
}

a,
button,
input,
select,
textarea,
.ui-button,
.ui-item,
.mega-menu-link {
  transition: background-color 180ms ease, border-color 180ms ease,
    box-shadow 180ms ease, color 180ms ease, transform 180ms ease;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid rgba(23, 104, 229, 0.24);
  outline-offset: 3px;
}

/* Large glass planes */
#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 {
  -webkit-backdrop-filter: var(--re-glass-blur);
  backdrop-filter: var(--re-glass-blur);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.72), rgba(243, 249, 255, 0.42));
  border: 1px solid var(--re-glass-border);
  box-shadow: var(--re-shadow);
}

#header {
  background: transparent;
}

#user_menu {
  box-shadow: 0 18px 50px rgba(32, 72, 117, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.88);
}

#mega-menu,
.mega-panel {
  background: rgba(249, 252, 255, 0.74);
  border-color: rgba(255, 255, 255, 0.88);
}

.mega-menu-link {
  border-radius: 14px;
  margin: 5px 3px;
  min-height: 36px;
}

.mega-menu-link:hover,
.mega-menu-item:hover > .mega-menu-link,
.mega-menu-item:focus-within > .mega-menu-link {
  background: linear-gradient(135deg, rgba(23, 104, 229, 0.92), rgba(54, 126, 231, 0.8));
  box-shadow: 0 9px 22px rgba(23, 104, 229, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.34);
  transform: translateY(-1px);
}

.breadcrumb {
  color: var(--re-muted);
  margin-top: 10px;
}

.realestate-hero-wrap {
  margin-top: 22px;
}

#main {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.67), rgba(235, 246, 255, 0.4));
  border-radius: 28px;
  box-shadow: var(--re-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.88);
}

.content-item #main {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: transparent;
  border: 0;
  box-shadow: none;
}

/* Inputs and compact controls */
input,
select,
textarea,
.ui-input-text,
.ui-row-text input,
.ui-row-text textarea,
.ui-generic-form .ui-selectmenu-trigger,
.ui-generic-form .ui-selectmenu-list,
.ui-generic-form .ui-autocomplete {
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.84);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 7px 20px rgba(32, 72, 117, 0.08);
  color: var(--re-text);
}

input:focus,
select:focus,
textarea:focus,
.ui-input-text:focus {
  background: rgba(255, 255, 255, 0.84);
  border-color: rgba(23, 104, 229, 0.5);
  box-shadow: 0 0 0 4px rgba(23, 104, 229, 0.11),
    0 12px 26px rgba(32, 72, 117, 0.11);
}

#home-search .has-placeholder {
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.82);
  border-radius: 18px;
  box-shadow: 0 16px 42px rgba(32, 72, 117, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.85);
  padding: 7px;
}

#home-search .input-text {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
}

#home-search .input-text:focus {
  box-shadow: none;
}

#home-search .categories a,
.zb-language-switch a,
.zb-trust-row span,
.zb-result-tabs span,
.zb-card-signals span,
.active-filter-summary strong,
.active-filter-summary a,
.request-tabs a,
.zb-contact-step,
.publish-progress span,
.listing-badge {
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  backdrop-filter: blur(12px) saturate(140%);
  background: rgba(255, 255, 255, 0.58);
  border-color: rgba(255, 255, 255, 0.84);
  box-shadow: 0 8px 20px rgba(32, 72, 117, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

#home-search .categories a:hover,
#home-search .categories a:focus {
  background: rgba(255, 255, 255, 0.82);
  border-color: rgba(23, 104, 229, 0.3);
  box-shadow: 0 14px 30px rgba(32, 72, 117, 0.14);
  transform: translateY(-2px);
}

/* Property cards */
.ui-item {
  background: rgba(255, 255, 255, 0.48);
  border: 1px solid rgba(255, 255, 255, 0.86);
  border-radius: 22px;
  box-shadow: 0 18px 46px rgba(32, 72, 117, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.88);
}

.ui-item:hover {
  border-color: rgba(255, 255, 255, 0.98);
  box-shadow: var(--re-shadow-hover);
  transform: translateY(-4px);
}

.ui-item .info {
  -webkit-backdrop-filter: blur(18px) saturate(145%);
  backdrop-filter: blur(18px) saturate(145%);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.78), rgba(239, 248, 255, 0.5));
  border-top-color: rgba(255, 255, 255, 0.72);
}

.ui-item .frame .type,
#hero-carousel .hero-caption {
  -webkit-backdrop-filter: blur(18px) saturate(135%);
  backdrop-filter: blur(18px) saturate(135%);
  background: linear-gradient(90deg, rgba(7, 24, 50, 0.72), rgba(19, 52, 89, 0.46));
}

.ui-item .frame .price,
.details-box .price,
#form_publish,
.ui-button,
.ui-button-big,
#sidebar .submit-box .ui-button-submit,
button.ui-button-submit {
  background: linear-gradient(135deg, #2485f2, #1554c6);
  border: 1px solid rgba(255, 255, 255, 0.38);
  box-shadow: 0 12px 28px rgba(23, 104, 229, 0.27),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

#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: linear-gradient(135deg, #176fe3, #0e49ad);
  box-shadow: 0 16px 34px rgba(23, 104, 229, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.34);
  transform: translateY(-1px);
}

#hero-carousel {
  border: 1px solid rgba(255, 255, 255, 0.84);
  border-radius: 26px;
  box-shadow: var(--re-shadow);
}

#hero-carousel .hero-caption {
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

#gallery,
.ad-gallery .ad-image-wrapper,
.ad-gallery .zb-gallery-main-image,
.ui-item .frame {
  overflow: hidden;
}

.ad-gallery .ad-image-wrapper {
  background: rgba(229, 240, 250, 0.52);
}

.publish-left .actions:last-child {
  -webkit-backdrop-filter: blur(22px) saturate(145%);
  backdrop-filter: blur(22px) saturate(145%);
  background: rgba(245, 250, 255, 0.78);
  border-color: rgba(255, 255, 255, 0.78);
}

#footer {
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  backdrop-filter: blur(22px) saturate(140%);
  background: rgba(244, 249, 255, 0.56);
  border-top: 1px solid rgba(255, 255, 255, 0.76);
  box-shadow: 0 -16px 44px rgba(32, 72, 117, 0.08);
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  #user_menu,
  #mega-menu,
  .mega-panel,
  #main,
  #sidebar,
  .ui-content-box,
  .ui-generic-form,
  #right-side #contact,
  #item-head,
  #gallery,
  #comments,
  .ui-item .info {
    background: rgba(250, 253, 255, 0.94);
  }
}

@media (max-width: 820px) {
  .realestate-hero-wrap {
    margin-top: 16px;
  }

  #header.mobile-menu-open #user_menu {
    -webkit-backdrop-filter: var(--re-glass-blur);
    backdrop-filter: var(--re-glass-blur);
    background: rgba(249, 252, 255, 0.82);
    border-color: rgba(255, 255, 255, 0.88);
  }

  #main {
    border-radius: 24px;
  }
}

@media (max-width: 560px) {
  body {
    background-image:
      radial-gradient(circle at 12% 4%, rgba(64, 205, 255, 0.26), transparent 34%),
      radial-gradient(circle at 96% 30%, rgba(123, 103, 238, 0.18), transparent 32%),
      linear-gradient(155deg, #f7fbff, #eaf4ff 58%, #f4f0ff);
  }

  #main {
    border-radius: 20px;
    box-shadow: 0 18px 44px rgba(32, 72, 117, 0.13),
      inset 0 1px 0 rgba(255, 255, 255, 0.88);
  }

  .ui-item {
    border-radius: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }
}