/* === Select (Išsirinkite) Section === */
.select-section{ position:relative; padding: 0px 0; background:#F6F8FB; overflow-x:hidden; }
.select-section .container{ max-width:1443px; padding-inline:0; }

.select-header{ display:flex; justify-content:space-between; align-items:flex-end; margin-bottom: 18px; }
.select-label{ font-family:'Syne',sans-serif; font-weight:500; font-size:24px; line-height:29px; color:#01172C; }
.select-title{ margin:0; font-family:'Syne',sans-serif; font-weight:700; font-size:72px; line-height:80px; color:#01172C; }

/* Visual */
.select-visual{ position:relative; border-radius: 0; overflow:hidden; background: transparent; 
  /* Use dynamic viewport units to avoid mobile 100vw scrollbar causing horizontal gap */
  width:100dvw; max-width:100dvw; 
  margin-left: calc(50% - 50dvw); margin-right: calc(50% - 50dvw);
}
.select-img{ display: block; width: 100%; height: auto; position: relative; z-index: 0; }
.select-visual::after{ content:""; position:absolute; inset:0; background: rgba(0,0,0,0.12); z-index:1; pointer-events:none; }

/* Houses hotspots (approx shape; tune clip-path for exact match) */
.select-visual .house{ position:absolute; cursor:pointer; z-index:2; display:block; text-decoration:none; }
.select-visual .hs-d{ 
  left:0%; top:11.8%; width:100%; height:77%; 
  clip-path: polygon(30% 17%, 36% 35%, 36% 78%, 18% 90%, 3% 83%, 3% 51%, 5% 51%, 5% 39%, 11% 15%);
}
.select-visual .hs-c{ left:0.1%; top:11.6%; width:100%; height:77%; clip-path: polygon(40% 18%, 46% 35%, 46% 73%, 46% 73%, 46% 73%, 40% 72%, 36% 77%, 36% 37%, 30% 17%);
}
.select-visual .hs-b{ left:-1.4%; top:12%; width:102%; height:77%; clip-path: polygon(72% 16%, 70% 34%, 70% 72%, 60% 70%, 56% 74%, 53% 73%, 53% 63%, 53% 34%, 56% 18%);
}
.select-visual .hs-a{ left:0%; top:11%; width:100%; height:77%; clip-path: polygon(72% 16%, 96% 13%, 97% 31%, 97% 64%, 95% 71%, 95% 83%, 81% 81%, 81% 76%, 70% 74%, 70% 34%);
}

.select-visual .house-link{ position:absolute; inset:0; z-index:2; }
.select-visual .house::before{ content:""; position:absolute; inset:0; background: rgba(175,195,207,.48); opacity:0; transition:.2s ease; }
.select-visual .house:hover::before{ opacity:1; }
.select-visual .house.is-highlighted::before{ opacity:1; animation: pulse 0.6s ease-in-out; }
.select-visual .house.is-selected::before{ opacity:1; }

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* Popup */
.select-popup{ position:absolute; width:440px; background:#F5F7F8; border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,.15); padding: 18px 18px 14px; z-index:3; }
.popup-price{ font-family:'Syne',sans-serif; font-weight:700; font-size:20px; line-height:24px; color:#01172C; }
.popup-title{ font-family:'Syne',sans-serif; font-weight:700; font-size:24px; line-height:29px; color:#01172C; margin-top:6px; }
.popup-line{ height:1px; background:#DFE2E4; margin: 14px 0; }
/* Use flex so first two columns share space equally, status keeps natural width */
.popup-grid{ display:flex; align-items:flex-start; gap:24px; }
.popup-col{ display:flex; flex-direction:column; min-width:0; flex:1 1 0; }
.popup-col:last-child{ flex:0 0 auto; }
.popup-label{ font-family:'Syne',sans-serif; font-weight:700; font-size:18px; line-height:20px; color:#01172C; margin-bottom:4px; }
.popup-value{ font-family:'Syne',sans-serif; font-weight:400; font-size:18px; line-height:20px; color:#01172C; }
.popup-value.status-badge{ font-size:12px; font-weight:700; }

/* Table */
.select-table-wrap{ margin-top: 24px; position:relative; }
.select-table{ width:100%; border-collapse: collapse; font-family:'Syne',sans-serif; color:#01172C; }
.select-table thead th{ text-align:left; font-weight:700; font-size:18px; line-height:22px; padding:18px 20px; border-bottom:1px solid #DFE2E4; }
.select-table tbody td{ font-weight:500; font-size:18px; line-height:22px; padding:18px 20px; border-bottom:1px solid #DFE2E4; }
.select-table tbody tr:hover{ background:#01172C; color:#fff; }
.select-table tbody tr:hover a{ color:#fff; }
.select-table tbody tr.is-hovered{ background:#01172C; color:#fff; }
.select-table tbody tr.is-hovered a{ color:#fff; }
.select-table tbody tr.is-selected{ background:#01172C; color:#fff; position:relative; }
.select-table tbody tr.is-selected a{ color:#fff; }
.select-table tbody tr.is-selected::after{ content:""; position:absolute; left:0; top:0; bottom:0; width:4px; background:#A3C5E8; }
.select-table tbody tr{ cursor:pointer; transition: background 0.2s ease, color 0.2s ease; }
.select-table a{ color:#01172C; text-decoration: underline; }

/* Status badges */
.status-badge{
  display:inline-block; padding:6px 12px; border-radius:6px; 
  font-size:12px; font-weight:700; text-transform:uppercase;
  background:#27AE60; color:#fff;
}
.status-badge.status-rezervuota{
  background:#F39C12; color:#fff;
}
.status-badge.status-parduota{
  background:#E74C3C; color:#fff;
}

@media (max-width: 1450px) {
  .select-header {
    padding: 0px 15px 0px 15px;
  }
}
@media (max-width: 1100px){
  .select-title{ font-size: clamp(40px,6vw,72px); line-height: clamp(48px,6.5vw,80px); }
}


/* === Responsive tweaks === */
@media (max-width: 1024px){
  /* restore horizontal paddings for content under the full-bleed visual */
  .select-section .container{ padding-inline: var(--container-pad); }
  .select-header{ padding-inline: 0; }
  .select-table-wrap{ margin-left: 0; margin-right: 0; }
}

@media (max-width: 800px){
  .select-header{ flex-direction: column; align-items: flex-start; gap: 8px; }
  .select-label{ font-size: 18px; line-height: 22px; }
  .select-title{ font-size: clamp(36px, 8vw, 56px); line-height: clamp(40px, 8.5vw, 64px); }
}

/* Make table usable on small screens */
.select-table-wrap{ overflow-x:auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 768px){
  .select-table{ min-width: 640px; }
  .select-table thead th{ padding: 14px 12px; font-size: 16px; }
  .select-table tbody td{ padding: 14px 12px; font-size: 16px; }
}

/* Popup responsiveness */
@media (max-width: 768px){
  .select-popup{
    width: min(92vw, 360px);
    left: 50% !important;
    transform: translateX(-50%);
    top: 8% !important;
  }
/* Scroll hint popup */
.scroll-hint-popup{
  position:absolute;
  top:150px;
  right:50px;
  background:rgba(1, 23, 44, 0.745);
  color:#fff;
  padding:16px 20px;
  border-radius:12px;
  box-shadow:0 8px 32px rgba(0,0,0,0.3);
  z-index:10;
  opacity:0;
  transform:translateY(-10px);
  transition:opacity 0.3s ease, transform 0.3s ease;
  backdrop-filter:blur(1px);
  max-width:280px;
}
.scroll-hint-popup.show{
  opacity:1;
  transform:translateY(0);
}
.scroll-hint-content{
  display:flex;
  align-items:center;
  gap:12px;
}
.scroll-hint-icon{
  font-size:20px;
  flex-shrink:0;
}
.scroll-hint-text{
  font-family:'Syne',sans-serif;
  font-weight:500;
  font-size:14px;
  line-height:18px;
  flex:1;
}
.scroll-hint-arrow{
  font-size:18px;
  font-weight:bold;
  animation:scrollHintPulse 1.5s ease-in-out infinite;
  flex-shrink:0;
}
@keyframes scrollHintPulse{
  0%, 100% { transform:translateX(0); }
  50% { transform:translateX(4px); }
}

  .popup-title{ font-size: 20px; line-height: 26px; }
  .popup-price{ font-size: 18px; }
  .popup-label{ font-size: 16px; line-height: 20px; }
  .popup-value{ font-size: 16px; line-height: 20px; }
}



@media (min-width: 768px){
  .scroll-hint-popup{
    display:none;
  }
}