/* H-CLEER tracking page — locked fields + gold loader */

.tracking__page input.is-track-locked,
.tracking__page select.is-track-locked,
.tracking__page textarea.is-track-locked {
  cursor: not-allowed;
  opacity: 0.92;
  background-color: #f3f0e8 !important;
  color: #2a2a2a;
}

.tracking__page .invoice__right input.is-track-locked,
.tracking__page .rt input.is-track-locked,
.tracking__page .rt select.is-track-locked {
  background-color: rgba(255, 255, 255, 0.06) !important;
  color: #e8e8e8;
}

#hcleerTrackInput {
  cursor: text !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

#hcleerTrackInput.is-error {
  outline: 2px solid #c9a227;
  box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.25);
}

#hcleerTrackBtn.is-loading {
  pointer-events: none;
  opacity: 0.75;
}

.hcleer-track-loader {
  position: fixed;
  inset: 0;
  z-index: 13000;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(10, 13, 16, 0.72);
  backdrop-filter: blur(3px);
}

.hcleer-track-loader.is-open {
  display: flex;
}

.hcleer-track-loader__card {
  width: min(320px, calc(100vw - 32px));
  padding: 28px 24px;
  border-radius: 16px;
  background: linear-gradient(180deg, #151a20 0%, #0d1116 100%);
  border: 1px solid rgba(201, 162, 39, 0.45);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
  text-align: center;
  color: #f5f1e6;
}

.hcleer-track-loader__spin {
  width: 44px;
  height: 44px;
  margin: 0 auto 16px;
  border-radius: 50%;
  border: 3px solid rgba(201, 162, 39, 0.2);
  border-top-color: #c9a227;
  animation: hcleer-spin 0.85s linear infinite;
}

.hcleer-track-loader__title {
  margin: 0 0 6px;
  font-family: Oswald, sans-serif;
  font-size: 18px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #c9a227;
}

.hcleer-track-loader__text {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: rgba(245, 241, 230, 0.75);
}

@keyframes hcleer-spin {
  to {
    transform: rotate(360deg);
  }
}

.shipment__status > .el.is-done > p:first-child > span {
  background: #2ec04a;
}

/* Keep related-documents card height locked to sibling columns — scroll inside the list */
.tracking__page .grid__title {
  align-items: stretch;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.1fr) minmax(0, 0.95fr);
}

.tracking__page .grid__title > .elem__grid {
  min-width: 0;
  overflow: hidden;
}

.tracking__page .grid__title > .elem__grid:has(.documents__list) {
  display: flex;
  flex-direction: column;
  /* Stretch to match verified-status / feature cards without collapsing */
  min-height: 100%;
  overflow: hidden;
}

.tracking__page .grid__title > .elem__grid:has(.documents__list) > p {
  flex-shrink: 0;
}

.tracking__page .grid__title > .elem__grid .documents__list {
  flex: 1 1 auto;
  min-height: 0;
  margin-top: 5px;
  margin-bottom: 5px;
  overflow-x: hidden;
  overflow-y: auto;
  padding-right: 3px;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.3) transparent;
}

.tracking__page .grid__title > .elem__grid .documents__list::-webkit-scrollbar {
  width: 4px;
}

.tracking__page .grid__title > .elem__grid .documents__list::-webkit-scrollbar-track {
  background: transparent;
}

.tracking__page .grid__title > .elem__grid .documents__list::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.25);
  border-radius: 4px;
}

.tracking__page .grid__title > .elem__grid .documents__list::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.4);
}

.tracking__page .grid__title > .elem__grid > span[data-track-documents-hint] {
  flex-shrink: 0;
  margin-top: auto;
}

/* ===== Dynamic map geo overlays (same art, lat/lng positioned) ===== */
.rt__geo {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.rt__geo[hidden] {
  display: none !important;
}

.rt__geo-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.rt__geo-route {
  fill: none;
  stroke: #ffffff;
  stroke-width: 0.55;
  stroke-dasharray: 1.35 1.1;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.95;
  filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.55));
}

.rt__geo-pin {
  position: absolute;
  width: max(22px, 3.2cqw);
  height: max(22px, 3.2cqw);
  margin-left: calc(max(22px, 3.2cqw) / -2);
  margin-top: calc(max(22px, 3.2cqw) / -2);
  border-radius: 50%;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.35s ease, transform 0.35s ease;
  z-index: 2;
  pointer-events: none;
}

.rt__geo-pin.is-on {
  opacity: 1;
  transform: scale(1);
}

.rt__geo-pin--origin {
  background: radial-gradient(
    circle,
    rgba(255, 220, 90, 1) 0%,
    rgba(232, 148, 30, 0.85) 32%,
    rgba(232, 148, 30, 0.25) 58%,
    rgba(232, 148, 30, 0) 72%
  );
  box-shadow: 0 0 14px rgba(232, 148, 30, 0.85);
}

.rt__geo-pin--origin::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(6px, 0.7cqw);
  height: max(6px, 0.7cqw);
  margin: calc(max(6px, 0.7cqw) / -2) 0 0 calc(max(6px, 0.7cqw) / -2);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 6px rgba(255, 200, 80, 1);
}

.rt__geo-pin--dest {
  background: radial-gradient(
    circle,
    rgba(90, 255, 150, 1) 0%,
    rgba(46, 192, 74, 0.85) 32%,
    rgba(46, 192, 74, 0.25) 58%,
    rgba(46, 192, 74, 0) 72%
  );
  box-shadow: 0 0 14px rgba(46, 192, 74, 0.8);
}

.rt__geo-pin--dest::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(6px, 0.7cqw);
  height: max(6px, 0.7cqw);
  margin: calc(max(6px, 0.7cqw) / -2) 0 0 calc(max(6px, 0.7cqw) / -2);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 6px rgba(80, 255, 140, 1);
}

.rt__geo-vessel {
  position: absolute;
  width: max(36px, 4.6cqw);
  height: auto;
  margin-left: calc(max(36px, 4.6cqw) / -2);
  margin-top: calc(max(36px, 4.6cqw) / -2);
  opacity: 0;
  transform: rotate(0deg);
  transform-origin: center center;
  transition:
    opacity 0.35s ease,
    transform 0.45s ease,
    left 0.55s ease,
    top 0.55s ease;
  filter: drop-shadow(0 0 3px rgba(232, 148, 30, 0.45));
  z-index: 3;
}

.rt__geo-vessel.is-on {
  opacity: 1;
}

.rt__geo-vessel img {
  display: block;
  width: 100%;
  height: auto;
}

/* ------------------------------------------------------------------ */
/* Real interactive H-CLEER map (Google Maps engine, H-CLEER styling) */
/* ------------------------------------------------------------------ */

/* Preserve the original static-map aspect ratio so the surrounding
   H-CLEER cards / timeline keep their percentage positions. */
.rt {
  aspect-ratio: 2087 / 753;
  background: #05080e;
}

.rt__mapwrap {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: auto;
}

.rt__gmap {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: #05080e;
  pointer-events: auto;
  touch-action: pan-x pan-y;
  cursor: grab;
}
.rt__gmap.leaflet-drag-target,
.rt__gmap.leaflet-dragging {
  cursor: grabbing;
}

/* Keep Google's own UI compact + readable on the dark theme */
.rt__gmap .gm-style-mtc button,
.rt__gmap .gmnoprint button {
  font-family: inherit;
}

/* Floating "current location" panel (bottom-center like the concept) */
.rt__loc {
  position: absolute;
  left: 50%;
  bottom: 30%;
  transform: translateX(-50%);
  min-width: 15%;
  max-width: 34%;
  padding: 0.7cqw 1cqw 0.75cqw;
  border-radius: 6px;
  background: rgba(8, 11, 18, 0.82);
  border: 1px solid rgba(232, 148, 30, 0.5);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45);
  z-index: 4;
  pointer-events: none;
}

.rt__loc-title {
  margin: 0 0 0.4cqw;
  display: flex;
  align-items: center;
  gap: 6px;
  color: #2ec04a;
  font-weight: 700;
  font-size: 1cqw;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.rt__loc-coords {
  margin: 0 0 0.3cqw;
  color: #fff;
  font-weight: 700;
  font-size: 1.05cqw;
}

.rt__loc-meta {
  margin: 0;
  color: #c9cdd6;
  font-size: 0.85cqw;
}

/* Loading / configuration message overlay */
.rt__mapmsg {
  position: absolute;
  left: 50%;
  top: 45%;
  transform: translate(-50%, -50%);
  max-width: 70%;
  text-align: center;
  padding: 1cqw 1.4cqw;
  border-radius: 6px;
  background: rgba(8, 11, 18, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #e8e8e8;
  font-size: 1cqw;
  line-height: 1.5;
  z-index: 5;
  pointer-events: none;
}

/* Leaflet controls and custom shipment markers */
.rt__gmap .leaflet-control-layers {
  background: linear-gradient(180deg, #1a2028 0%, #12171d 100%);
  border: 1px solid #2a2f36;
  border-radius: 10px;
  color: #fff;
  font-family: inherit;
}

.rt__gmap .leaflet-control-layers label {
  color: #aab3bc;
  font-size: 11px;
}

.rt__gmap .leaflet-bar {
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
}
.rt__gmap .leaflet-bar a {
  background: linear-gradient(180deg, #1a2028 0%, #12171d 100%);
  border-color: #2a2f36;
  color: #d79a18;
  transition: color 0.2s ease, background 0.2s ease;
}

.rt__gmap .leaflet-bar a:hover {
  background: #181e25;
  color: #ffd35b;
}
  color: #e8941e;
}

.rt__gmap .leaflet-control-attribution {
  background: rgba(5, 8, 14, 0.68);
  color: #aeb5c0;
  font-size: 9px;
}

.rt__gmap .leaflet-control-attribution a {
  color: #e8941e;
}

.hcleer-leaflet-pin-wrap {
  background: transparent;
  border: 0;
}

.hcleer-leaflet-pin {
  display: block;
  width: 22px;
  height: 22px;
  border: 2px solid #fff;
  border-radius: 50% 50% 50% 0;
  box-shadow: 0 0 9px rgba(0, 0, 0, 0.8);
  transform: rotate(-45deg);
}

.hcleer-leaflet-pin::after {
  content: "";
  position: absolute;
  left: 8px;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
}

/* Segmented Map / Satellite / Hybrid control (matches concept top-right) */
.hcleer-seg {
  display: flex;
  overflow: hidden;
  border-radius: 10px;
  border: 1px solid #2a2f36;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.55);
  background: linear-gradient(180deg, #1a2028 0%, #12171d 100%);
}
.hcleer-seg__btn {
  border: 0;
  border-left: 1px solid #2a2f36;
  background: transparent;
  color: #aab3bc;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: 7px 13px;
  cursor: pointer;
  line-height: 1.1;
  transition: color 0.2s ease, background 0.2s ease;
}
.hcleer-seg__btn:first-child { border-left: 0; }
.hcleer-seg__btn:hover { color: #ffd35b; background: rgba(215, 154, 24, 0.1); }
.hcleer-seg__btn.is-active {
  background: linear-gradient(180deg, #f3b327 0%, #d48f12 100%);
  color: #1a1206;
}

/* Fullscreen button */
.rt__gmap .hcleer-fs a {
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* "Focus route" eye button — same dark control chrome, gold icon */
.rt__gmap .hcleer-eye a {
  display: flex;
  align-items: center;
  justify-content: center;
}
.rt__gmap .hcleer-eye a svg {
  width: 16px;
  height: 16px;
}

/* Vessel marker — compact, centered on the route, glides between live updates */
.hcleer-vessel-wrap.leaflet-div-icon {
  background: transparent !important;
  border: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
  transition: transform 0.9s linear;
  will-change: transform;
}
.hcleer-ship {
  display: block;
  line-height: 0;
  transform-origin: 50% 50%;
  transition: transform 0.9s ease-out;
}
.hcleer-ship img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Glossy glowing pin (matches concept image 1) */
.hcleer-pin3 {
  display: block;
  line-height: 0;
}

/* Start / stop / end glow dots */
.hcleer-stop-dot-wrap.leaflet-div-icon {
  background: transparent !important;
  border: 0 !important;
  overflow: visible !important;
}
.hcleer-stop-dot__glow {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  box-sizing: border-box;
}

/* Place tags — SAME crisp overlay technique as continent labels */
.hcleer-stop-lbl {
  background: none !important;
  border: 0 !important;
  pointer-events: none;
  overflow: visible;
}
.hcleer-stop-lbl__t {
  position: absolute;
  left: 0;
  top: 10px;
  transform: translate(-50%, 0);
  white-space: nowrap;
  text-align: center;
  line-height: 1;
  color: #c9a05a;
  font-family: "Oswald", "Open Sans", sans-serif;
  font-weight: 500;
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
  -webkit-text-stroke: 0.25px rgba(0, 0, 0, 0.7);
  text-shadow:
    -1px -1px 0 rgba(0, 0, 0, 0.9),
    1px -1px 0 rgba(0, 0, 0, 0.9),
    -1px 1px 0 rgba(0, 0, 0, 0.9),
    1px 1px 0 rgba(0, 0, 0, 0.9),
    0 1px 3px rgba(0, 0, 0, 0.7);
}

/* Map vignette — lighter on classic tracking embed so continents stay readable */
.hcleer-map-vignette {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  background:
    linear-gradient(
      180deg,
      rgba(5, 9, 18, 0.55) 0%,
      rgba(5, 9, 18, 0.22) 9%,
      rgba(5, 9, 18, 0) 21%,
      rgba(5, 9, 18, 0) 86%,
      rgba(3, 5, 11, 0.18) 100%
    ),
    radial-gradient(
      125% 120% at 50% 44%,
      rgba(3, 5, 11, 0) 62%,
      rgba(3, 5, 11, 0.28) 100%
    );
}

/* Continent / ocean labels — small & thin like the concept mockup */
.hcleer-lbl {
  background: none;
  border: 0;
  pointer-events: none;
  overflow: visible;
}
.hcleer-lbl__t {
  position: absolute;
  left: 0;
  top: 0;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  text-align: center;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}
.hcleer-lbl--land .hcleer-lbl__t {
  color: rgba(255, 255, 255, 0.88);
  font-family: "Oswald", "Open Sans", sans-serif;
  font-weight: 500;
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  -webkit-text-stroke: 0.25px rgba(0, 0, 0, 0.65);
  text-shadow:
    -1px -1px 0 rgba(0, 0, 0, 0.9),
    1px -1px 0 rgba(0, 0, 0, 0.9),
    -1px 1px 0 rgba(0, 0, 0, 0.9),
    1px 1px 0 rgba(0, 0, 0, 0.9),
    0 1px 2px rgba(0, 0, 0, 0.65);
}
.hcleer-lbl--sea .hcleer-lbl__t {
  color: rgba(158, 184, 204, 0.78);
  font-family: "Oswald", "Open Sans", sans-serif;
  font-weight: 400;
  font-style: italic;
  font-size: 8px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  -webkit-text-stroke: 0.2px rgba(0, 4, 10, 0.7);
  text-shadow:
    -1px -1px 0 rgba(0, 4, 10, 0.9),
    1px -1px 0 rgba(0, 4, 10, 0.9),
    -1px 1px 0 rgba(0, 4, 10, 0.9),
    1px 1px 0 rgba(0, 4, 10, 0.9),
    0 1px 2px rgba(0, 0, 0, 0.6);
}

/* Embedded invoice-map is smaller — keep labels even tighter there */
.shipping__box .rt .hcleer-lbl--land .hcleer-lbl__t {
  font-size: 7.5px;
  letter-spacing: 0.12em;
  font-weight: 500;
}
.shipping__box .rt .hcleer-lbl--sea .hcleer-lbl__t {
  font-size: 6.5px;
  letter-spacing: 0.14em;
}
.shipping__box .rt .hcleer-stop-lbl__t {
  font-size: 7.5px;
  letter-spacing: 0.08em;
}

/* Ocean base — warm near-black (concept), NOT navy/indigo. */
#hcleerMap.leaflet-container,
.rt__gmap.leaflet-container {
  background: #030201 !important;
}

/* Earth-at-night composite (matches the client concept image): REAL Blue Marble
   terrain (visible land, mountains, polar ice, blue oceans) darkened to a night
   mood, with the NASA VIIRS city-lights layer screen-blended on top so only the
   warm gold cities add glow. Isolate the tile pane so the blend stays within the
   map (never the page). */
#hcleerMap .leaflet-tile-pane,
.rt__gmap .leaflet-tile-pane {
  isolation: isolate;
}
/* Terrain base → TWILIGHT night earth: darken the bright daytime imagery so the
   land reads as night, while keeping its real detail visible (tan deserts, green
   vegetation, mountain relief, light polar ice) and deepening the blue oceans to
   navy. Not flat-black — a dim, natural earth at dusk. City lights add the glow. */
.hcleer-terrain {
  filter: brightness(0.45) saturate(1.3) contrast(1.06);
}
/* City lights: screen-blend so dark areas vanish and only the lit cities glow.
   VERY high contrast is applied BEFORE the warm tint, which crushes the imagery's
   faint blue/purple airglow to pure black — so the map keeps its navy/terrain
   colour and the lights add nothing but bright gold (no purple "jamuni" wash). */
.hcleer-night {
  mix-blend-mode: screen;
  filter: contrast(2.6) brightness(1.55) saturate(1.8) sepia(0.62)
    hue-rotate(-15deg);
}

/* Decorative compass rose in the top-right corner (matches the concept). */
.hcleer-compass {
  width: 74px;
  height: 74px;
  margin: 8px 10px 0 0 !important;
  pointer-events: none;
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.7));
  opacity: 0.92;
}
.hcleer-compass svg {
  width: 100%;
  height: 100%;
  display: block;
}

/*
 * NASA Black Marble tiles ship with a strong cool-blue ocean cast.
 * Concept oceans are near-black/charcoal (sampled ~#00070f, B−R≈15).
 * Ours were ~#010621 (B−R≈32). Kill blue → warm black, keep gold city lights.
 * Apply on BOTH the classic invoice tracking page (.shipping__box .rt) and
 * trackingv2 (.hv2__map) — without this boost the embedded map reads as
 * nearly pure black.
 */
#hcleerMap .leaflet-tile-pane,
.rt__gmap .leaflet-tile-pane,
.hv2__map .leaflet-tile-pane,
.shipping__box .rt .leaflet-tile-pane {
  filter:
    brightness(1.12)
    contrast(1.02)
    saturate(0.88)
    sepia(0.22)
    hue-rotate(-4deg)
    saturate(1.1)
    brightness(1.06);
}

/* Sea labels: muted blue-gray like the concept (not bright white). */
.hcleer-lbl--sea .hcleer-lbl__t {
  color: #9eb8cc;
}

/* Tight dotted white route — bright on dark seas (concept). */
.hcleer-route-line {
  filter:
    drop-shadow(0 0 1px rgba(255, 255, 255, 1))
    drop-shadow(0 0 3px rgba(255, 255, 255, 0.75))
    drop-shadow(0 0 8px rgba(255, 255, 255, 0.35));
}