/* Custom styling for kv.tonp.eu */

/* Line clamp utilities */
.line-clamp-1 {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Card hover animation */
.property-card {
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.property-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 24px -10px rgba(15, 23, 42, 0.15);
}

/* Image zoom effect on hover */
.property-card:hover .property-img {
  transform: scale(1.04);
}

.property-img {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Skyscraper Ads on large screens */
@media (min-width: 1660px) {
  .ad-skyscraper-left {
    position: fixed;
    top: 180px;
    left: calc(50% - 640px - 180px);
    width: 160px;
    height: 600px;
    z-index: 20;
  }
  .ad-skyscraper-right {
    position: fixed;
    top: 180px;
    right: calc(50% - 640px - 180px);
    width: 160px;
    height: 600px;
    z-index: 20;
  }
}

@media (min-width: 2000px) {
  .ad-skyscraper-left {
    left: calc(50% - 640px - 320px);
    width: 300px;
  }
  .ad-skyscraper-right {
    right: calc(50% - 640px - 320px);
    width: 300px;
  }
}

@media (max-width: 1659px) {
  .ad-skyscraper-left, .ad-skyscraper-right {
    display: none;
  }
}

/* Map view height */
#map-container {
  height: calc(100vh - 280px);
  min-height: 550px;
}

/* Modern Leaflet Popup styling */
.leaflet-popup-content-wrapper {
  border-radius: 14px !important;
  box-shadow: 0 12px 28px -6px rgba(0, 0, 0, 0.2), 0 8px 10px -6px rgba(0, 0, 0, 0.1) !important;
  padding: 4px !important;
}

.leaflet-popup-content {
  margin: 8px 10px !important;
  line-height: 1.4 !important;
}

.leaflet-popup-tip {
  box-shadow: 0 12px 28px -6px rgba(0, 0, 0, 0.2) !important;
}

.leaflet-container a.leaflet-popup-close-button {
  width: 26px !important;
  height: 26px !important;
  line-height: 24px !important;
  font-size: 18px !important;
  top: 6px !important;
  right: 6px !important;
  border-radius: 9999px !important;
  background: rgba(255, 255, 255, 0.92) !important;
  color: #334155 !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 10 !important;
}

/* Modern Leaflet Tooltip for map dots on hover */
.leaflet-tooltip.price-tooltip {
  background: #0f172a !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 6px !important;
  padding: 3px 8px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
  white-space: nowrap !important;
}

.leaflet-tooltip-top.price-tooltip::before {
  border-top-color: #0f172a !important;
}

.leaflet-tooltip-bottom.price-tooltip::before {
  border-bottom-color: #0f172a !important;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Modern Leaflet Layer Control (Aluskaardid & Kataster) */
.leaflet-control-layers {
  border-radius: 12px !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.15), 0 8px 10px -6px rgba(0, 0, 0, 0.1) !important;
  padding: 8px 12px !important;
  font-family: inherit !important;
  font-size: 12px !important;
  background: rgba(255, 255, 255, 0.96) !important;
  backdrop-filter: blur(8px) !important;
}

.leaflet-control-layers-base label,
.leaflet-control-layers-overlays label {
  font-weight: 600 !important;
  color: #1e293b !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-bottom: 4px !important;
  cursor: pointer !important;
  transition: color 0.15s ease !important;
}

.leaflet-control-layers-base label:hover,
.leaflet-control-layers-overlays label:hover {
  color: #2563eb !important;
}

.leaflet-control-layers-separator {
  margin: 6px 0 !important;
  border-top-color: #e2e8f0 !important;
}

/* Fullscreen Map Styles */
#map-container.map-fullscreen {
  position: fixed !important;
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  max-width: 100vw !important;
  max-height: 100vh !important;
  max-height: 100dvh !important;
  z-index: 99999 !important;
  border-radius: 0 !important;
  border: none !important;
  margin: 0 !important;
}

.leaflet-control-fullscreen-btn {
  background: #ffffff !important;
  color: #1e293b !important;
  width: 34px !important;
  height: 34px !important;
  line-height: 34px !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  transition: all 0.15s ease !important;
  margin-top: 8px !important;
}

.leaflet-control-fullscreen-btn:hover {
  background: #f1f5f9 !important;
  color: #2563eb !important;
}

#map-container.map-fullscreen .leaflet-control-fullscreen-btn {
  background: #ef4444 !important;
  color: #ffffff !important;
  border-color: #dc2626 !important;
}

#map-container.map-fullscreen .leaflet-control-fullscreen-btn:hover {
  background: #dc2626 !important;
}