/* Home cards responsive layout */
.home-cards {
  --home-card-min: 450px;
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    'tracking'
    'quote'
    'office';
}
.home-cards > .card {
  min-height: var(--home-card-min);
  height: 100%;
}
.home-cards > .card-quote {
  grid-area: quote;
}
.home-cards > .card-tracking {
  grid-area: tracking;
}
.home-cards > .card-office {
  grid-area: office;
}

/* Tracking card (home): keep the tracking layout compact */
#homeTrackingCard .steps .step {
  font-size: 0.78rem;
}
@media (min-width: 640px) {
  #homeTrackingCard .steps .step {
    font-size: 0.82rem;
  }
}
#homeTrackingCard #homeTrackGuide {
  letter-spacing: -0.01em;
}
/* 2 + 1 */
@media (min-width: 768px) {
  .home-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-areas:
      'tracking quote'
      'office office';
  }
}

/* 3 up */
@media (min-width: 1400px) {
  .home-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-areas: 'quote tracking office';
  }
}

/* Tracking Beacon Animation (Fix: Subtle Purple Ring) */
@keyframes grow-ring {
  0% {
    transform: scale(0.2);
    border-width: 6px;
    opacity: 0.8;
  }
  100% {
    transform: scale(2.5);
    border-width: 0.1px;
    opacity: 0;
  }
}

/* Match DaisyUI's internal grid placement for the ball */
.step-beacon-ring {
  grid-column-start: 1;
  grid-row-start: 1;
  justify-self: center;
  align-self: center;

  width: 24px;
  height: 24px;
  border: 0px solid var(--p, #570df8);
  border-radius: 9999px;
  pointer-events: none;
  visibility: hidden;
  z-index: 90;
}

/* Show and animate on active step */
.step-primary.step-current .step-beacon-ring {
  visibility: visible;
  border-style: solid;
  animation: grow-ring 3s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

/* The actual ball (::after) stays solid */
.step-current.step-primary::after {
  z-index: 100 !important;
  position: relative;
  opacity: 1 !important;
}

#homeTrackingCard,
#homeTrackingCard .card-body,
#homeTrackSteps {
  overflow: visible !important;
}

/* Reserve vertical space for dynamic tracking data */
#homeTrackStatusName,
#homeTrackDesc {
  min-height: 12px;
}
#homeTrackRemi,
#homeTrackDestina {
  min-height: 15px;
}
#homeTrackOrigin,
#homeTrackDest {
  min-height: 14px;
}
#homeTrackPayment,
#homeTrackMode,
#homeTrackBultos {
  min-height: 12px;
}
#homeTrackAddress {
  min-height: 30px;
}

#quoteKgInput {
  -moz-appearance: textfield;
  appearance: textfield;
}

.scrollbar-hide::-webkit-scrollbar {
  display: none;
}
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Office finder: prevent the city box from drawing an extra focus outline */
#officeFinderCard #officeCityInput:focus,
#officeFinderCard #officeCityInput:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* Office finder: ensure Leaflet map fills the card */
#officeFinderCard #officeMap {
  width: 100%;
  height: 100%;
}

/* Collapsed panel button: top-right (INSIDE the map card) */
#officeControlsTab {
  position: absolute;
  top: 12px;
  right: 12px;
  left: auto !important;
  bottom: auto !important;
  z-index: 30;
}

/* Bottom agency drawer (inside the map card) */
#officeFinderCard {
  position: relative;
  overflow: hidden;
}

.agency-drawer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;

  height: 145px;
  max-height: 45%;

  padding: 0;
  transform: translateY(0);
  visibility: visible;
  pointer-events: auto;
  transition:
    transform 220ms ease,
    opacity 180ms ease,
    visibility 0s linear 0s;

  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
}

.agency-drawer.is-hidden {
  transform: translateY(120%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    transform 220ms ease,
    opacity 180ms ease,
    visibility 0s linear 220ms;
}

/* Animated tab labels */
.agency-drawer .join .btn {
  gap: 0 !important;
  min-width: 2.5rem; /* Ensures a square-ish base for the icon */
  padding-left: 0 !important;
  padding-right: 0 !important;
  display: inline-flex;
  justify-content: center;
  transition: all 250ms ease;
}

.agency-drawer .join .btn.btn-active {
  padding-left: 0.75rem !important;
  padding-right: 0.75rem !important;
}

.ag-tab-label {
  max-width: 0;
  opacity: 0;
  margin-left: 0;
  overflow: hidden;
  white-space: nowrap;
  display: inline-block;
  vertical-align: middle;
  visibility: hidden;
  transition:
    max-width 250ms ease,
    opacity 200ms ease,
    margin 250ms ease,
    visibility 0s linear 250ms;
}

.btn-active .ag-tab-label {
  max-width: 120px;
  opacity: 1;
  margin-left: 8px; /* space between icon and text */
  visibility: visible;
  transition:
    max-width 250ms ease,
    opacity 200ms ease,
    margin 250ms ease,
    visibility 0s linear 0s;
}

/* -------------------------------------------------------------------------- */

/* Apply only on this page (JS adds .home-main-bleed to <main>) */
main.home-main-bleed,
main:has(#homeHero) {
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border-left: 0 !important;
  border-right: 0 !important;
  /* remove the blur/saturate shell from <main> (we add it back below the hero) */
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  /* Prevent 1–2px overflow without touching html/body (keeps sticky navbar working) */
  overflow-x: clip;
}

.hero-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity var(--hero-fade, 900ms) ease;
  transform-origin: center;
  will-change: opacity, transform;
}

/* top layer visible */
.hero-layer.is-on {
  opacity: 1;
}

@keyframes heroZoomIn {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.1);
  }
}

/* zoom only on the currently visible layer */
.hero-layer.hero-zoom {
  animation: heroZoomIn var(--hero-zoom, 20000ms) linear forwards;
}

/* respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .hero-layer {
    transition: none;
  }
  .hero-layer.hero-zoom {
    animation: none;
  }
}

/* optional: make it feel clicky */
a.card:hover {
  cursor: pointer;
}

/* Leaflet popups can overlap markers and steal clicks.
     We are not using popup interaction, so let clicks pass through. */
#officeFinderCard .leaflet-popup-pane,
#officeFinderCard .leaflet-popup,
#officeFinderCard .leaflet-tooltip-pane,
#officeFinderCard .leaflet-tooltip {
  pointer-events: none;
}

/* Pin Animations */
/* KNOBS */
:root {
  --beacon-duration: 1.5s;
  --beacon-interval: 4s;
  --beacon-radius: 2.5; /* Scale factor */
  --beacon-stroke-start: 3px;
  --beacon-stroke-end: 0px;
}

@keyframes beaconPulse {
  0% {
    transform: scale(1);
    opacity: 1;
    stroke-width: var(--beacon-stroke-start);
  }
  100% {
    transform: scale(var(--beacon-radius));
    opacity: 0;
    stroke-width: var(--beacon-stroke-end);
  }
}

/* Start hidden */
.beacon {
  display: none;
}

/* Hover or Selected trigger the animation */
/* Target the inner elements when the OUTER container has the class */
.ip-marker-hover .beacon,
.ip-marker-selected .beacon {
  display: block;
  animation: beaconTotal var(--beacon-interval) ease-out infinite;
}

@keyframes beaconTotal {
  0% {
    transform: scale(1);
    opacity: 1;
    stroke-width: var(--beacon-stroke-start);
  }
  37.5% {
    transform: scale(var(--beacon-radius));
    opacity: 0;
    stroke-width: var(--beacon-stroke-end);
  }
  100% {
    transform: scale(var(--beacon-radius));
    opacity: 0;
    stroke-width: var(--beacon-stroke-end);
  }
}

/* Selected state: scale up 20%
       IMPORTANT: Apply this to the INNER .ip-marker wrapper, not the Leaflet container.
    */
.ip-marker-selected .ip-marker {
  transform: scale(1.4);
  transform-origin: 50% 85%; /* Pivot near the bottom tip */
  transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* Lift z-index of the container so it overlaps others */
.ip-marker-selected {
  z-index: 1000 !important;
}

/* Map Tiles Filter */
/* Shared knobs for Light Mode */
.map-tiles-custom {
  /* Light mode default knobs */
  filter: brightness(100%) contrast(100%);
  transition: filter 0.3s ease;
}

/* Dark Mode Knobs (overrides) */
:root[data-theme='integralpack-dark'] .map-tiles-custom {
  filter: invert(100%) hue-rotate(180deg) brightness(85%) contrast(95%);
}

/* Tint overlay (shared base) */
#officeMap::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 400;
  pointer-events: none;
  /* Light mode default overlay */
  background: rgb(18 69 140 / 8%);
  mix-blend-mode: normal;
  width: 100%;
  height: 100%;
  transition: background-color 0.3s ease;
}

/* Dark mode: gently lift highlights */
#officeMap.is-dark::before {
  opacity: 1;

  background: rgb(255 255 255 / 25%);
  mix-blend-mode: screen;
}

/* Dark Mode Overlay */
#officeMap.is-dark::after {
  background: rgb(0 123 255 / 8.235%); /* #007bff15 */
  mix-blend-mode: normal;
}