
/* ===================== paloc26 component ===================== */
.paloc26-wrap {
  --paloc26-teal:      #00A99D;
  --paloc26-teal-dk:   #0A8F86;
  --paloc26-teal-soft: rgba(0, 169, 157, .12);
  --paloc26-navy:      #16274B;
  --paloc26-land:      #E9F0E3;
  --paloc26-land-hov:  #DAE8D5;
  --paloc26-bg:        #F7FAFB;
  --paloc26-ink:       #3E4C63;
  --paloc26-mute:      #8A94A6;
  --paloc26-line:      #E3E8EF;
  --paloc26-radius:    14px;
  --paloc26-shadow:    0 14px 40px rgba(22, 39, 75, .10);
  --paloc26-shadow-lg: 0 18px 48px rgba(22, 39, 75, .16);

  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--paloc26-bg);
  font-family: inherit;
  color: var(--paloc26-ink);
  -webkit-font-smoothing: antialiased;
}

#paloc26-map {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(1200px 700px at 70% 20%, #FBFDFD 0%, var(--paloc26-bg) 60%);
  outline: none;
}

/* Tile pane opacity is driven per-frame from JS (no CSS transition,
   otherwise it fights the flight animation and judders). */
#paloc26-map .leaflet-tile-pane { opacity: 0; }
#paloc26-map .leaflet-tile-pane img { filter: saturate(.80) contrast(.95) brightness(1.02); }

/* World vector stops swallowing clicks once tiles are the real map */
.paloc26-world-pane { transition: opacity .3s linear; }
.paloc26-tiles-lead .paloc26-world-pane { pointer-events: none; }

/* ---------------------- floating panel ---------------------- */
.paloc26-panel {
  position: absolute;
  top: clamp(16px, 4vh, 44px);
  left: clamp(16px, 3vw, 44px);
  z-index: 900;
  width: min(400px, calc(100% - 32px));
  background: #fff;
  border-radius: var(--paloc26-radius);
  box-shadow: var(--paloc26-shadow);
  padding: clamp(18px, 2.6vw, 30px);
  box-sizing: border-box;
}

.paloc26-panel h2 {
  position: relative;
  margin: 0 0 18px;
  padding-right: 56px;
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  font-weight: 700;
  color: var(--paloc26-navy);
  letter-spacing: -.01em;
}
.paloc26-amp { color: inherit; } /* "&" matches the "Project Location" text colour */
.paloc26-panel h2::after {
  content: '';
  position: absolute;
  top: 6px; right: 0;
  width: 46px; height: 22px;
  background-image: radial-gradient(circle, rgba(0,169,157,.45) 1.6px, transparent 1.6px);
  background-size: 10px 11px;
}

.paloc26-field { margin-bottom: 16px; }
.paloc26-field > label {
  display: block;
  margin-bottom: 7px;
  font-size: .82rem;
  font-weight: 600;
  color: var(--paloc26-navy);
}

/* ---------------------- combobox ---------------------- */
.paloc26-cb { position: relative; }

.paloc26-cb-input {
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  font-size: .92rem;
  color: var(--paloc26-ink);
  background: #fff;
  border: 1px solid var(--paloc26-line);
  border-radius: 10px;
  padding: 12px 42px 12px 14px;
  cursor: text;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.paloc26-cb-input::placeholder { color: #A6AFBD; }
.paloc26-cb-input:hover:not(:disabled) { border-color: #C9D2DE; }
.paloc26-cb-input:focus {
  outline: none;
  border-color: var(--paloc26-teal);
  box-shadow: 0 0 0 3px var(--paloc26-teal-soft);
}
.paloc26-cb-input:disabled {
  background: #F5F7F9;
  color: #A6AFBD;
  cursor: not-allowed;
}
.paloc26-cb.paloc26-has-value .paloc26-cb-input { font-weight: 500; }

.paloc26-cb-caret {
  position: absolute;
  right: 6px; top: 50%;
  transform: translateY(-50%);
  width: 32px; height: 32px;
  display: grid;
  place-items: center;
  border: 0;
  background: none;
  padding: 0;
  cursor: pointer;
  color: var(--paloc26-mute);
}
.paloc26-cb-caret svg { transition: transform .22s cubic-bezier(.4,0,.2,1); }
.paloc26-cb.paloc26-open .paloc26-cb-caret svg { transform: rotate(180deg); }
.paloc26-cb-caret:disabled { cursor: not-allowed; opacity: .5; }

/* clear (×) replaces caret once something is chosen */
.paloc26-cb-clear { display: none; }
.paloc26-cb.paloc26-has-value:not(.paloc26-open) .paloc26-cb-clear { display: grid; }
.paloc26-cb.paloc26-has-value:not(.paloc26-open) .paloc26-cb-caret { display: none; }

.paloc26-cb-spin {
  position: absolute;
  right: 44px; top: 50%;
  width: 14px; height: 14px;
  margin-top: -7px;
  border: 2px solid var(--paloc26-teal-soft);
  border-top-color: var(--paloc26-teal);
  border-radius: 50%;
  opacity: 0;
  transition: opacity .2s;
  animation: paloc26Spin .7s linear infinite;
}
.paloc26-cb.paloc26-busy .paloc26-cb-spin { opacity: 1; }

.paloc26-cb-list {
  position: absolute;
  z-index: 30;
  top: calc(100% + 6px);
  left: 0; right: 0;
  margin: 0;
  padding: 6px;
  list-style: none;
  max-height: 264px;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background: #fff;
  border: 1px solid var(--paloc26-line);
  border-radius: 12px;
  box-shadow: var(--paloc26-shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px) scale(.985);
  transform-origin: top center;
  transition: opacity .18s ease, transform .18s cubic-bezier(.4,0,.2,1), visibility .18s;
}
.paloc26-cb.paloc26-open .paloc26-cb-list {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.paloc26-cb-list::-webkit-scrollbar { width: 8px; }
.paloc26-cb-list::-webkit-scrollbar-thumb { background: #DCE3EC; border-radius: 8px; }

.paloc26-cb-opt {
  padding: 10px 12px;
  border-radius: 8px;
  font-size: .9rem;
  line-height: 1.3;
  cursor: pointer;
  transition: background .12s ease;
}
.paloc26-cb-opt small {
  display: block;
  margin-top: 2px;
  font-size: .74rem;
  color: var(--paloc26-mute);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.paloc26-cb-opt mark {
  /* Hard reset: theme/Elementor mark styles add padding + background, which
     split matches into two parts ("Ind ia", "Navi M umbai"). */
  display: inline !important;
  background: none !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  font: inherit !important;
  letter-spacing: inherit !important;
  vertical-align: baseline !important;
  color: var(--paloc26-teal-dk) !important;
  font-weight: inherit !important; /* no synthetic bold from the single-weight brand font */
}
.paloc26-cb-opt b, .paloc26-cb-opt strong { font-weight: inherit; color: var(--paloc26-teal-dk); }
.paloc26-cb-opt.paloc26-active { background: #F1F7F6; }
.paloc26-cb-opt[aria-selected="true"] { color: var(--paloc26-teal-dk); font-weight: 500; }
.paloc26-cb-empty {
  padding: 12px;
  font-size: .85rem;
  color: var(--paloc26-mute);
  text-align: center;
}

/* ---------------------- panel footer ---------------------- */
.paloc26-hint {
  margin: 2px 0 0;
  font-size: .78rem;
  color: var(--paloc26-mute);
  min-height: 1.15em;
  line-height: 1.45;
}
.paloc26-hint.paloc26-error { color: #D64545; }

.paloc26-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 16px;
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity .35s ease, transform .35s cubic-bezier(.4,0,.2,1);
}
.paloc26-actions.paloc26-show { opacity: 1; transform: none; pointer-events: auto; }

.paloc26-next {
  flex: 1;
  padding: 13px 16px;
  font: inherit;
  font-size: .95rem;
  font-weight: 600;
  color: #fff;
  background: var(--paloc26-teal);
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  transition: background .2s ease, transform .12s ease;
}
.paloc26-next:hover  { background: var(--paloc26-teal-dk); }
.paloc26-next:active { transform: scale(.985); }

.paloc26-reset {
  padding: 13px 14px;
  font: inherit;
  font-size: .85rem;
  font-weight: 500;
  color: var(--paloc26-mute);
  background: none;
  border: 1px solid var(--paloc26-line);
  border-radius: 10px;
  cursor: pointer;
  transition: color .2s, border-color .2s;
}
.paloc26-reset:hover { color: var(--paloc26-navy); border-color: #C9D2DE; }

/* ---------------------- viewfinder ---------------------- */
.paloc26-finder {
  position: absolute;
  top: 50%; left: 50%;
  width: clamp(230px, 54vmin, 430px);
  height: clamp(230px, 54vmin, 430px);
  transform: translate(-50%, -50%) scale(1.08);
  z-index: 500;
  pointer-events: none;
  opacity: 0;
  transition: opacity .5s ease, transform .6s cubic-bezier(.2,.8,.3,1);
}
.paloc26-finder.paloc26-show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.paloc26-finder i {
  position: absolute;
  width: 26px; height: 26px;
  border: 3px solid var(--paloc26-teal);
  border-radius: 2px;
}
.paloc26-finder i:nth-child(1) { top: 0;    left: 0;  border-right: 0; border-bottom: 0; }
.paloc26-finder i:nth-child(2) { top: 0;    right: 0; border-left: 0;  border-bottom: 0; }
.paloc26-finder i:nth-child(3) { bottom: 0; left: 0;  border-right: 0; border-top: 0; }
.paloc26-finder i:nth-child(4) { bottom: 0; right: 0; border-left: 0;  border-top: 0; }
.paloc26-finder b {
  position: absolute;
  top: calc(50% + 26px); left: calc(50% + 16px);
  width: 20px; height: 20px;
}
.paloc26-finder b::before, .paloc26-finder b::after {
  content: ''; position: absolute; background: var(--paloc26-teal); border-radius: 2px;
}
.paloc26-finder b::before { top: 9px; left: 0; width: 20px; height: 2.5px; }
.paloc26-finder b::after  { top: 0; left: 9px; width: 2.5px; height: 20px; }

/* ---------------------- map bits ---------------------- */
.paloc26-pin { animation: paloc26Drop .6s cubic-bezier(.2,.9,.3,1.25) both; }
.paloc26-pin svg { display: block; filter: drop-shadow(0 6px 8px rgba(10,143,134,.35)); }

/* marching ants once the boundary has finished drawing */
@keyframes paloc26March { to { stroke-dashoffset: -32px; } }
.paloc26-ants { animation: paloc26March 1.6s linear infinite; }

.paloc26-wrap .leaflet-control-zoom {
  border: 0 !important;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--paloc26-shadow) !important;
  margin: 0 clamp(14px, 2.5vw, 36px) clamp(18px, 4vh, 48px) 0 !important;
}
.paloc26-wrap .leaflet-control-zoom a {
  width: 42px; height: 42px; line-height: 42px;
  font-size: 20px;
  color: var(--paloc26-navy) !important;
  background: #fff !important;
  border: 0 !important;
}
.paloc26-wrap .leaflet-control-zoom a:first-child { border-bottom: 1px solid #EFF2F6 !important; }
.paloc26-wrap .leaflet-control-zoom a:hover { color: var(--paloc26-teal) !important; }
.paloc26-wrap .leaflet-control-attribution {
  background: rgba(255,255,255,.75) !important;
  font-size: 9.5px;
  color: var(--paloc26-mute);
}
.paloc26-wrap .leaflet-container { font-family: inherit; }
.paloc26-wrap .leaflet-tooltip {
  background: var(--paloc26-navy);
  color: #fff;
  border: 0;
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(22,39,75,.22);
  font-size: .76rem;
  font-weight: 500;
  padding: 5px 9px;
}
.paloc26-wrap .leaflet-tooltip::before { display: none; }

/* ---------------------- loader ---------------------- */
.paloc26-loader {
  position: absolute; inset: 0; z-index: 950;
  display: grid; place-items: center;
  background: var(--paloc26-bg);
  transition: opacity .5s ease;
}
.paloc26-loader.paloc26-hide { opacity: 0; pointer-events: none; }
.paloc26-loader span {
  width: 34px; height: 34px;
  border: 3px solid var(--paloc26-teal-soft);
  border-top-color: var(--paloc26-teal);
  border-radius: 50%;
  animation: paloc26Spin .8s linear infinite;
}

@keyframes paloc26Spin { to { transform: rotate(360deg); } }
@keyframes paloc26Drop {
  from { opacity: 0; transform: translateY(-26px); }
  to   { opacity: 1; transform: none; }
}

/* ---------------------- responsive ---------------------- */
@media (max-width: 640px) {
  .paloc26-panel { top: 12px; left: 12px; right: 12px; width: auto; padding: 16px 18px; }
  .paloc26-panel h2 { margin-bottom: 14px; }
  .paloc26-finder { top: 64%; }
  .paloc26-cb-list { max-height: 210px; }
  .paloc26-wrap .leaflet-control-zoom a { width: 38px; height: 38px; line-height: 38px; }
}

@media (prefers-reduced-motion: reduce) {
  .paloc26-wrap *, .paloc26-wrap *::before, .paloc26-wrap *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}
