.villa-feature-hint {
  box-sizing: border-box;
  position: fixed;
  z-index: 70;
  width: min(370px, calc(100vw - 24px));
  padding: 28px 26px 20px;
  border: 1px solid rgba(255,255,255,.85);
  border-radius: 22px;
  background: rgba(255,255,255,.72);
  color: #000;
  -webkit-backdrop-filter: blur(22px) saturate(1.15);
  backdrop-filter: blur(22px) saturate(1.15);
  box-shadow: 0 24px 80px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.9);
  text-align: left;
  font-family: inherit;
}
.villa-feature-hint[hidden] { display: none !important; }
.villa-hint-content { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
.villa-hint-detail { margin-top: 20px; padding-top: 20px; border-top: 1px solid rgba(0,0,0,.16); }
.villa-feature-hint .villa-hint-detail h3 {
  margin: 0 0 12px;
  color: #000;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.02em;
}
.villa-feature-hint .villa-hint-detail p { font-size: 15px; line-height: 1.55; }
.villa-feature-hint .villa-hint-detail p + p { margin-top: 14px; }
.villa-feature-hint .villa-hint-detail ul {
  margin: 8px 0 14px;
  padding-left: 20px;
  color: #000;
  font-size: 15px;
  line-height: 1.55;
  list-style: disc;
}
.villa-feature-hint .villa-hint-detail li { margin: 4px 0; color: #000; }
.villa-feature-hint h2 {
  margin: 0 28px 12px 0;
  color: #000;
  font-size: 23px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.025em;
}
.villa-feature-hint p {
  margin: 0;
  color: #000;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
}
.villa-feature-hint .villa-hint-close {
  position: absolute;
  top: 8px;
  right: 8px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid rgba(0,0,0,.18);
  border-radius: 50%;
  background: rgba(255,255,255,.5);
  color: #000;
  font-family: inherit;
  cursor: pointer;
}
.villa-feature-hint .villa-hint-close span { font: 24px/1 Arial, sans-serif; }
.villa-feature-hint .villa-hint-close:hover { background: rgba(255,255,255,.95); }
.villa-feature-hint .villa-hint-close:focus-visible { outline: 2px solid #000; outline-offset: 2px; }
.villa-hint-progress { height: 2px; margin-top: 18px; overflow: hidden; background: rgba(0,0,0,.1); }
.villa-hint-progress::after {
  content: '';
  display: block;
  height: 100%;
  background: rgba(0,0,0,.4);
  transform-origin: left;
  animation: villa-hint-countdown 60s linear forwards;
}
@keyframes villa-hint-countdown { to { transform: scaleX(0); } }
@media (max-width: 1024px), (pointer: coarse) and (max-width: 1366px) {
  .villa-feature-hint { padding: 24px 22px 18px; border-radius: 20px; }
  .villa-feature-hint h2 { font-size: 22px; margin-right: 30px; }
  .villa-feature-hint .villa-hint-close { width: 40px; height: 40px; }
}
@media (prefers-reduced-motion: reduce) { .villa-hint-progress::after { animation: none; } }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .villa-feature-hint { background: rgba(255,255,255,.96); }
}

.villa-hint-info {
  position: fixed;
  z-index: 71;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(255,255,255,.85);
  border-radius: 50%;
  background: rgba(255,255,255,.78);
  color: #000;
  -webkit-backdrop-filter: blur(22px) saturate(1.15);
  backdrop-filter: blur(22px) saturate(1.15);
  box-shadow: 0 6px 22px rgba(0,0,0,.18);
  cursor: pointer;
}
.villa-hint-info[hidden] { display: none !important; }
.villa-hint-info span { font: bold 24px/1 Georgia, serif; }
.villa-hint-info:hover { background: rgba(255,255,255,.98); }
.villa-hint-info:focus-visible { outline: 2px solid #000; outline-offset: 3px; }
/* Keep the mobile offer info button inside the reserved footer, clear of tour controls. */
@media (max-width:1024px), (pointer:coarse) and (max-width:1366px) {
  .tour-page.villa-offers-info-visible .related-panel.is-minimized {
    width: calc(100% - 62px);
    right: 56px;
  }
}

/* Smaller closed-state info icons on phones; keep their existing center points. */
@media (max-width:1024px), (pointer:coarse) and (max-width:1366px) {
  .villa-hint-info {
    width: 24px;
    height: 24px;
    transform: translate(10px, 10px);
    box-shadow: 0 3px 12px rgba(0,0,0,.16);
  }
  .villa-hint-info span { font-size: 16px; }
  .villa-floorplan-info {
    width: 24px !important;
    height: 24px !important;
    font-size: 16px !important;
    transform: translate(3px, 3px);
  }
}