/* Widget Located in Italy - CSS */
.located-widget {
  position: absolute;
  top: 50%;
  left: 0;
  /* animated via data-visible attr */
  transform: translate(-120%, -50%);
  /* Keep below fixed header (1000) but above hero content */
  z-index: 900;
  display: flex;
  align-items: center;
  background: #222;
  border-radius: 48px 120px 120px 48px;
  padding: 32px 38px 32px 40px;
  color: #fff;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  min-width: 240px;
  min-height: 101px;
  max-width: 567px;
  height: 71px;
  opacity: 0;
  transition: transform .55s cubic-bezier(.22,.61,.36,1), opacity .35s ease;
}
/* Ensure hidden during intro overlay */
html.intro-active .located-widget{ transform: translate(-120%, -50%) !important; opacity: 0 !important; }
/* Visible state on desktop: slide in from left */
.located-widget[data-visible="true"]{
  transform: translate(0, -50%);
  opacity: 1;
  visibility: visible;
}
.located-icon {
  background: #444;
  border-radius: 50%;
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 0px;
  margin-right: 0;
  box-shadow: 0 0 0 6px #222;
  /* Ensure globe icon stays white irrespective of global accent color */
  color: #fff !important;
}
#globe-icon,
#globe-icon * {
  /* Force icon color to white to override global svg color */
  color: #fff !important;
  /* Fix Safari iOS: ensure strokes render and remain visible */
  stroke: currentColor !important;
  fill: none !important;
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-linejoin: round;
  shape-rendering: geometricPrecision;
}
#globe-icon {
  /* Nudge Safari GPU rendering */
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  will-change: transform;
}
.located-text {
  font-family: 'Montserrat', Arial, Helvetica, sans-serif;
  font-size: 1.45rem;
  font-weight: 400;
  line-height: 1.2;
  margin-right: 1rem;
  letter-spacing: 0.01em;
}
#globe-icon {
  display: block;
}

/* Mobile behavior: widget becomes a right floating circle; animate from right */
@media (max-width: 992px){
  .located-widget{
    opacity: 0;
    transform: translateX(120%) !important; /* start off-screen to the right */
  }
  html.intro-active .located-widget{ transform: translateX(120%) !important; opacity:0 !important; }
  .located-widget[data-visible="true"]{
    transform: translateX(0) !important;
    opacity: 1;
    visibility: visible;
  }
  
  /* Ensure the globe icon is visible on mobile */
  .located-icon {
    width: 60px;
    height: 60px;
    margin: 0;
    z-index: 10; /* Ensure icon stays on top */
  }
  
  #globe-icon {
    display: block;
    width: 30px; /* Adjust size for mobile */
    height: 30px;
  }
  
  /* Adjust the text display for mobile */
  .located-text {
    font-size: 1.1rem;
    margin-left: 10px;
  }
}