/* Y2B HOME — shared styles for the Home New page.
   Scoped entirely under #y2b-home-root so nothing here can leak
   into or be affected by other plugins/pages. */

#y2b-home-root * { box-sizing: border-box; }
#y2b-home-root {
  font-family: 'Inter', Arial, sans-serif;
  color: #122850;
}

/* ---------- Dev-in-progress notice ---------- */
#y2b-home-root .y2b-home-dev-notice {
  max-width: 1200px;
  margin: 0 auto 24px;
  padding: 16px 24px;
  background: #fff7f0;
  border: 1px dashed #FF6A00;
  border-radius: 10px;
}
#y2b-home-root .y2b-home-dev-notice p {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: #4a5568;
}

/* ---------- Hero ---------- */
#y2b-home-root .y2b-hero {
  position: relative;
  width: 100%;
  background: linear-gradient(180deg, #0c1c38 0%, #122850 55%, #1c3766 100%);
  padding: 70px 20px 110px;
  color: #ffffff;
  text-align: center;
}
#y2b-home-root .y2b-hero-skyline {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: auto;
  opacity: 0.55;
  pointer-events: none;
}
#y2b-home-root .y2b-hero-inner {
  position: relative;
  z-index: 2;
  max-width: 880px;
  margin: 0 auto 40px;
}
#y2b-home-root .y2b-hero-eyebrow {
  display: inline-block;
  background: rgba(255, 106, 0, 0.15);
  border: 1px solid #FF6A00;
  color: #FF9E52;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 6px 16px;
  border-radius: 999px;
  margin-bottom: 20px;
}
#y2b-home-root .y2b-hero h1 {
  font-family: 'Poppins', Arial, sans-serif;
  font-size: 44px;
  line-height: 1.2;
  font-weight: 700;
  margin: 0 0 16px;
}
#y2b-home-root .y2b-hero h1 span {
  color: #FF6A00;
}
#y2b-home-root .y2b-hero .y2b-hero-subtitle {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: #FFD9B8;
  margin: 0 0 14px;
}
#y2b-home-root .y2b-hero .y2b-hero-desc {
  font-size: 16px;
  line-height: 1.6;
  color: #cbd5e1;
  max-width: 620px;
  margin: 0 auto 36px;
}

/* ---------- Search panel ---------- */
#y2b-home-root .y2b-search-wrap {
  position: relative;
  z-index: 3;
  max-width: 920px;
  margin: 0 auto;
  /* Negative margin (not transform) pulls this into the hero's bottom
     padding while staying in normal document flow, so it can never be
     clipped by any ancestor and the hero's height always accounts for
     it correctly. */
  margin-top: -60px;
}
#y2b-home-root .y2b-search-panel {
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 20px 45px rgba(18, 40, 80, 0.25);
  overflow: hidden;
  text-align: left;
}
#y2b-home-root .y2b-search-tabs {
  display: flex;
  background: #0f1f3d;
}
#y2b-home-root .y2b-search-tab {
  flex: 1;
  padding: 16px 8px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: #a9b8d6;
  cursor: pointer;
  background: transparent;
  border: none;
  transition: background 0.15s ease, color 0.15s ease;
}
#y2b-home-root .y2b-search-tab.active {
  background: #ffffff;
  color: #122850;
  border-radius: 12px 12px 0 0;
}
#y2b-home-root .y2b-search-tab:not(.active):hover {
  color: #ffffff;
  background: rgba(255,255,255,0.08);
}
#y2b-home-root .y2b-search-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  padding: 24px;
  align-items: center;
}
#y2b-home-root .y2b-field {
  flex: 1 1 220px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
#y2b-home-root .y2b-field label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #8a94a6;
}
#y2b-home-root .y2b-field select,
#y2b-home-root .y2b-field input {
  font-family: 'Inter', Arial, sans-serif;
  font-size: 15px;
  padding: 12px 14px;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  color: #122850;
  background: #f8fafc;
  width: 100%;
  outline: none;
}
#y2b-home-root .y2b-field select:focus,
#y2b-home-root .y2b-field input:focus {
  border-color: #FF6A00;
  background: #ffffff;
}
#y2b-home-root .y2b-search-btn {
  flex: 0 0 auto;
  background: #FF6A00;
  color: #ffffff;
  font-size: 15px;
  font-weight: 700;
  border: none;
  border-radius: 10px;
  padding: 14px 32px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease;
  align-self: flex-end;
}
#y2b-home-root .y2b-search-btn:hover {
  background: #e55f00;
}

/* ---------- Hot Properties carousel (shared by all Hot Properties sections) ---------- */
#y2b-home-root .y2b-hp-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 48px 20px 8px;
}
#y2b-home-root .y2b-hp-icon {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
}

#y2b-home-root .y2b-hp-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
#y2b-home-root .y2b-hp-header h2 {
  font-family: 'Poppins', Arial, sans-serif;
  font-size: 22px;
  font-weight: 600;
  color: #122850;
  margin: 0;
  letter-spacing: -0.2px;
}
#y2b-home-root .y2b-hp-empty {
  border: 1px solid #e6eaf0;
  border-radius: 8px;
  padding: 28px;
  background: #fafbfc;
  color: #8a94a6;
  font-size: 14px;
}

#y2b-home-root .y2b-hp-carousel {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
}
#y2b-home-root .y2b-hp-track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: 2px 2px 8px;
  flex: 1 1 auto;
  min-width: 0; /* keeps flex child from forcing page-level horizontal scroll */
  -ms-overflow-style: none;
  scrollbar-width: none;
}
#y2b-home-root .y2b-hp-track::-webkit-scrollbar {
  display: none;
}
#y2b-home-root .y2b-hp-arrow {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  border: 1px solid #d7deea;
  background: #ffffff;
  color: #122850;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
#y2b-home-root .y2b-hp-arrow:hover {
  background: #122850;
  color: #ffffff;
  border-color: #122850;
}
#y2b-home-root .y2b-hp-arrow:disabled {
  opacity: 0.35;
  cursor: default;
  background: #ffffff;
  color: #122850;
  border-color: #d7deea;
}

/* 5-ish cards on desktop */
#y2b-home-root .y2b-hp-card {
  flex: 0 0 calc((100% - 4 * 16px) / 5);
  scroll-snap-align: start;
  background: #ffffff;
  border: 1px solid #e6eaf0;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 2px 8px rgba(18, 40, 80, 0.05);
  transition: box-shadow 0.15s ease;
}
#y2b-home-root .y2b-hp-card:hover {
  box-shadow: 0 8px 20px rgba(18, 40, 80, 0.1);
}
#y2b-home-root .y2b-hp-card-photo {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: #f2f4f8;
}
#y2b-home-root .y2b-hp-card-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Gallery: images stack in the same box, only the active one is visible.
   No stretching/distortion — object-fit: cover only crops to keep a
   consistent card height across differently-sized source photos. */
#y2b-home-root .y2b-hp-gallery-img {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.2s ease;
  pointer-events: none;
}
#y2b-home-root .y2b-hp-gallery-img.active {
  opacity: 1;
  pointer-events: auto;
}
#y2b-home-root .y2b-hp-gallery-dots {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 5px;
  z-index: 2;
}
#y2b-home-root .y2b-hp-gallery-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}
#y2b-home-root .y2b-hp-gallery-dot.active {
  background: #ffffff;
  transform: scale(1.2);
}
#y2b-home-root .y2b-hp-card-photo-sample {
  object-fit: contain;
  padding: 6px;
  background: #f2f4f8;
}
#y2b-home-root .y2b-hp-card-sample-tag {
  position: absolute;
  bottom: 8px;
  left: 8px;
  background: rgba(255, 255, 255, 0.92);
  color: #718096;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.3px;
  padding: 3px 8px;
  border-radius: 4px;
  border: 1px solid #e6eaf0;
}
#y2b-home-root .y2b-hp-card-badge {
  position: absolute;
  top: 8px;
  left: 8px;
  background: #122850;
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 4px;
  z-index: 2;
}
#y2b-home-root .y2b-hp-card-body {
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 auto;
}
#y2b-home-root .y2b-hp-card-title {
  font-family: 'Poppins', Arial, sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #122850;
  margin: 0 0 2px;
  line-height: 1.3;
}
#y2b-home-root .y2b-hp-card-code {
  font-size: 11px;
  color: #a0aab8;
  margin: 0;
  letter-spacing: 0.2px;
}
#y2b-home-root .y2b-hp-card-location {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  color: #8a94a6;
  margin: 0;
  font-weight: 400;
}
#y2b-home-root .y2b-hp-card-meta {
  font-size: 12px;
  color: #a0aab8;
  margin: 0;
}
#y2b-home-root .y2b-hp-card-price {
  font-size: 16px;
  font-weight: 700;
  color: #FF6A00;
  margin: 4px 0 0;
}
#y2b-home-root .y2b-hp-card-desc {
  font-size: 12px;
  color: #8a94a6;
  margin: 4px 0 0;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
#y2b-home-root .y2b-hp-card-postedby {
  font-size: 11px;
  color: #a0aab8;
  margin: 4px 0 0;
}
#y2b-home-root .y2b-hp-card-actions {
  display: flex;
  gap: 6px;
  /* auto top-margin pushes the button row to the bottom of every card,
     so cards with different amounts of text (description, code, etc.)
     still line their buttons up at the same height. */
  margin-top: auto;
  padding-top: 10px;
  width: 100%;
}

/* ---------- Shared button style across all Hot Properties sections ---------- */
/* Rectangular, slightly rounded corners, no pill shapes, navy/orange
   accents. Compact by design — only as much height/width as the text
   and icon need, never oversized CTA-style buttons. */
#y2b-home-root .y2b-hp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  /* flex-basis 0 + min-width 0 lets each button actually shrink to fit
     the card instead of forcing its full nowrap content width — this
     is what previously pushed the WhatsApp button past the card edge
     (where it then got visually clipped by the card's own overflow). */
  flex: 1 1 0;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  height: 30px;
  text-align: center;
  font-family: 'Inter', Arial, sans-serif;
  font-size: 11px;
  font-weight: 600;
  padding: 0 6px;
  border-radius: 5px;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border: 1px solid transparent;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
#y2b-home-root .y2b-hp-btn .y2b-hp-icon {
  flex: 0 0 auto;
}
#y2b-home-root .y2b-hp-btn-outline {
  border-color: #122850;
  color: #122850;
  background: #ffffff;
}
#y2b-home-root .y2b-hp-btn-outline:hover {
  background: #122850;
  color: #ffffff;
}
#y2b-home-root .y2b-hp-btn-whatsapp {
  border-color: #FF6A00;
  color: #ffffff;
  background: #FF6A00;
}
#y2b-home-root .y2b-hp-btn-whatsapp:hover {
  background: #e55f00;
  border-color: #e55f00;
}
#y2b-home-root .y2b-hp-btn-viewall {
  flex: 0 0 auto;
  border-color: #f0d3bb;
  color: #FF6A00;
  background: #fff7f0;
  font-size: 12px;
  padding: 6px 12px;
  height: auto;
}
#y2b-home-root .y2b-hp-btn-viewall:hover {
  background: #FF6A00;
  color: #ffffff;
  border-color: #FF6A00;
}


/* Narrower desktop/laptop: 4 cards instead of forcing 5 into less room */
@media (max-width: 1199px) {
  #y2b-home-root .y2b-hp-card {
    flex: 0 0 calc((100% - 3 * 16px) / 4);
  }
}
/* Tablet: ~3 cards */
@media (max-width: 1024px) {
  #y2b-home-root .y2b-hp-card {
    flex: 0 0 calc((100% - 2 * 16px) / 3);
  }
}
/* Small tablet: ~2 cards */
@media (max-width: 768px) {
  #y2b-home-root .y2b-hp-section { padding: 32px 16px 8px; }
  #y2b-home-root .y2b-hp-header h2 { font-size: 19px; }
  #y2b-home-root .y2b-hp-card {
    flex: 0 0 calc((100% - 16px) / 2);
  }
}
/* Mobile: 1 card at a time */
@media (max-width: 480px) {
  #y2b-home-root .y2b-hp-card {
    flex: 0 0 85%;
  }
  #y2b-home-root .y2b-hp-arrow {
    width: 34px;
    height: 34px;
  }
}


#y2b-home-root .y2b-placeholders {
  max-width: 1200px;
  margin: 40px auto 0;
  padding: 0 20px;
}
#y2b-home-root .y2b-placeholder-block {
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 28px;
  margin-bottom: 20px;
  background: #fafbfc;
}
#y2b-home-root .y2b-placeholder-block h2 {
  font-family: 'Poppins', Arial, sans-serif;
  color: #122850;
  font-size: 18px;
  margin: 0 0 6px;
}
#y2b-home-root .y2b-placeholder-block span {
  font-size: 13px;
  color: #FF6A00;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
#y2b-home-root .y2b-placeholder-block p {
  margin: 8px 0 0;
  font-size: 14px;
  color: #718096;
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  #y2b-home-root .y2b-hero h1 { font-size: 34px; }
  #y2b-home-root .y2b-search-wrap { margin-top: -50px; }
}
@media (max-width: 768px) {
  #y2b-home-root .y2b-hero { padding: 50px 16px 90px; }
  #y2b-home-root .y2b-hero h1 { font-size: 28px; }
  #y2b-home-root .y2b-hero .y2b-hero-desc { font-size: 14px; }
  #y2b-home-root .y2b-search-tab { font-size: 12px; padding: 12px 4px; }
  #y2b-home-root .y2b-search-fields { padding: 18px; }
  #y2b-home-root .y2b-search-btn { flex: 1 1 100%; }
  #y2b-home-root .y2b-search-wrap { margin-top: -36px; }
}
@media (max-width: 480px) {
  #y2b-home-root .y2b-hero { padding: 40px 14px 70px; }
  #y2b-home-root .y2b-hero h1 { font-size: 23px; }
  #y2b-home-root .y2b-hero-eyebrow { font-size: 10px; padding: 5px 12px; }
  #y2b-home-root .y2b-field { flex: 1 1 100%; }
  #y2b-home-root .y2b-search-wrap { margin-top: -24px; }
}