/*
 * APD 550 / 554 — Airbnb-grade discovery spacing and premium all-fees sheen.
 * Scoped to the existing APD discovery shell; no duplicate layout owner.
 */

:root {
  --apd550-ink: #222222;
  --apd550-muted: #6a6a6a;
  --apd550-line: #dddddd;
  --apd550-coral: #e61e4d;
  --apd550-surface: #ffffff;
}

@media (max-width: 767px) {
  body.apd550-discovery-premium #apd5-header.is-discovery-context > .apd5-header-search-row,
  body.apd550-discovery-premium.apd15-scroll-down #apd5-header.is-discovery-context > .apd5-header-search-row {
    padding: 24px 20px 15px !important;
    margin: 0 !important;
    background: #fff !important;
  }

  body.apd550-discovery-premium #apd5-header.is-discovery-context #apd5-search .apd10-mobile-search-trigger {
    min-height: 60px !important;
    height: 60px !important;
    padding: 0 22px !important;
    gap: 9px !important;
    border-radius: 999px !important;
    border-color: #d9d9d9 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .065), 0 8px 24px rgba(0, 0, 0, .075) !important;
    -webkit-tap-highlight-color: transparent !important;
    touch-action: manipulation !important;
  }

  body.apd550-discovery-premium #apd5-header.is-discovery-context #apd5-search .apd10-mobile-search-trigger strong {
    font-size: 17px !important;
    line-height: 1.15 !important;
    font-weight: 600 !important;
    letter-spacing: -.24px !important;
  }

  body.apd550-discovery-premium #apd5-header.is-discovery-context .apd5-main-nav,
  body.apd550-discovery-premium.apd15-scroll-down #apd5-header.is-discovery-context .apd5-main-nav {
    box-sizing: border-box !important;
    min-height: 72px !important;
    margin: 0 !important;
    padding: 10px 20px 14px !important;
    gap: 10px !important;
    scroll-padding-inline: 20px !important;
    scroll-snap-type: x proximity !important;
    overscroll-behavior-x: contain !important;
  }

  body.apd550-discovery-premium #apd5-header.is-discovery-context .apd5-main-nav > a {
    min-height: 48px !important;
    height: 48px !important;
    padding: 0 17px !important;
    gap: 8px !important;
    border-radius: 999px !important;
    border: 1px solid #d8d8d8 !important;
    background: #fff !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .055), 0 4px 12px rgba(0, 0, 0, .085) !important;
    -webkit-tap-highlight-color: transparent !important;
    touch-action: manipulation !important;
    transition: border-color 120ms ease, box-shadow 120ms ease, background-color 120ms ease !important;
  }

  body.apd550-discovery-premium #apd5-header.is-discovery-context .apd5-main-nav > a strong {
    font-size: 15.5px !important;
    line-height: 1 !important;
    font-weight: 540 !important;
    letter-spacing: -.18px !important;
  }

  body.apd550-discovery-premium #apd5-header.is-discovery-context .apd5-main-nav > a.is-active,
  body.apd550-discovery-premium #apd5-header.is-discovery-context .apd5-main-nav > a[aria-current="page"],
  body.apd550-discovery-premium #apd5-header.is-discovery-context .apd5-main-nav > a.is-apd550-pending {
    border-color: #c9c9c9 !important;
    background: #fff !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .07), 0 5px 14px rgba(0, 0, 0, .105), inset 0 1px 2px rgba(0, 0, 0, .045) !important;
  }

  body.apd550-discovery-premium #apd5-header.is-discovery-context .apd5-main-nav > a.is-active strong,
  body.apd550-discovery-premium #apd5-header.is-discovery-context .apd5-main-nav > a[aria-current="page"] strong,
  body.apd550-discovery-premium #apd5-header.is-discovery-context .apd5-main-nav > a.is-apd550-pending strong {
    font-weight: 620 !important;
  }

  body.apd550-discovery-premium #apd5-header.is-discovery-context .apd5-main-nav > a:active,
  body.apd550-discovery-premium #apd5-header.is-discovery-context .apd5-main-nav > a.is-apd550-pressed {
    transform: translate3d(0, 1px, 0) scale(.982) !important;
  }

  body.apd550-discovery-premium .apd40-home .apd5-section-head,
  body.apd550-discovery-premium .apd5-main .apd5-section-head {
    align-items: flex-start !important;
    gap: 14px !important;
    margin-bottom: 15px !important;
  }

  body.apd550-discovery-premium .apd40-home .apd5-section-head h1,
  body.apd550-discovery-premium .apd40-home .apd5-section-head h2,
  body.apd550-discovery-premium .apd5-main .apd5-section-head h1,
  body.apd550-discovery-premium .apd5-main .apd5-section-head h2 {
    color: #222 !important;
    font-size: 24px !important;
    line-height: 1.17 !important;
    font-weight: 650 !important;
    letter-spacing: -.65px !important;
    text-wrap: balance !important;
  }
}

/* One elevated notice shared by Todo / Alojamientos / Experiencias / Servicios. */
.apd550-fee-notice {
  position: fixed;
  left: 50%;
  bottom: calc(92px + env(safe-area-inset-bottom, 0px));
  z-index: 8400;
  width: min(620px, calc(100vw - 40px));
  min-height: 76px;
  margin: 0;
  padding: 14px 22px 14px 15px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 14px;
  overflow: hidden;
  color: var(--apd550-ink);
  isolation: isolate;
  background:
    radial-gradient(circle at 8% 20%, rgba(255, 56, 92, .06), transparent 31%),
    rgba(255, 255, 255, .972);
  border: 1px solid rgba(215, 215, 215, .92);
  border-radius: 21px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .96),
    0 13px 34px rgba(0, 0, 0, .145),
    0 3px 10px rgba(0, 0, 0, .065);
  -webkit-backdrop-filter: saturate(1.2) blur(16px);
  backdrop-filter: saturate(1.2) blur(16px);
  opacity: 0;
  visibility: hidden;
  transform: translate3d(-50%, 18px, 0) scale(.965);
  transform-origin: 50% 100%;
  transition: opacity 300ms cubic-bezier(.2, .8, .2, 1), transform 360ms cubic-bezier(.2, .8, .2, 1), visibility 0s linear 360ms, filter 220ms ease;
  will-change: opacity, transform;
  pointer-events: auto;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.apd550-fee-notice.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translate3d(-50%, 0, 0) scale(1);
  transition-delay: 0s;
}

.apd550-fee-notice.is-dismissing,
.apd550-fee-notice.is-dismissed {
  opacity: 0 !important;
  visibility: hidden !important;
  filter: blur(2.5px) !important;
  transform: translate3d(-50%, 14px, 0) scale(.975) !important;
  transition: opacity 180ms ease, transform 220ms ease, visibility 0s linear 220ms, filter 180ms ease !important;
  pointer-events: none !important;
}

.apd550-fee-notice[hidden] {
  display: none !important;
}

.apd550-fee-icon {
  position: relative;
  z-index: 2;
  flex: 0 0 46px;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  filter: drop-shadow(0 7px 10px rgba(230, 30, 77, .26));
  transform-origin: 42% 62%;
  animation: apd550-fee-tag 4.2s cubic-bezier(.3, .8, .3, 1) infinite;
}

.apd550-fee-icon::after {
  content: "";
  position: absolute;
  top: 8px;
  left: 12px;
  width: 13px;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.92), transparent);
  opacity: .78;
  transform: rotate(-25deg);
  pointer-events: none;
}

.apd550-fee-icon svg {
  width: 46px;
  height: 46px;
  display: block;
}

.apd550-fee-notice strong {
  position: relative;
  z-index: 2;
  min-width: 0;
  color: #222;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.25;
  font-weight: 660;
  letter-spacing: -.28px;
  text-align: left;
}

.apd550-fee-notice strong span {
  color: #222;
  animation: apd550-fee-accent 4.2s ease-in-out infinite;
}

.apd550-fee-shine {
  position: absolute;
  z-index: 4;
  top: -55%;
  bottom: -55%;
  left: -44%;
  width: 34%;
  pointer-events: none;
  background: linear-gradient(
    104deg,
    transparent 0%,
    rgba(255, 56, 92, .025) 28%,
    rgba(255, 255, 255, .96) 45%,
    rgba(255, 255, 255, .995) 51%,
    rgba(255, 56, 92, .13) 59%,
    transparent 78%
  );
  opacity: 0;
  transform: translate3d(0, 0, 0) skewX(-16deg);
  filter: blur(.2px);
  will-change: transform, opacity;
  animation: apd554-fee-sweep 3.9s cubic-bezier(.22, .61, .36, 1) infinite;
}

/* Results keep their canonical markup and receive the same complete sweep. */
.apd196-fee-note[data-apd549-fee-note] {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
}

.apd196-fee-note[data-apd549-fee-note]::after {
  content: "";
  position: absolute;
  z-index: 4;
  top: -55%;
  bottom: -55%;
  left: -44%;
  width: 34%;
  pointer-events: none;
  background: linear-gradient(104deg, transparent 0 28%, rgba(255,255,255,.96) 48%, rgba(255,56,92,.13) 59%, transparent 78%);
  opacity: 0;
  transform: translate3d(0,0,0) skewX(-16deg);
  will-change: transform, opacity;
  animation: apd554-fee-sweep 3.9s cubic-bezier(.22,.61,.36,1) infinite;
}

.apd196-fee-note[data-apd549-fee-note].is-dismissed,
.apd196-fee-note[data-apd549-fee-note].is-dismissing {
  opacity: 0 !important;
  transform: translate3d(0, -6px, 0) scale(.985) !important;
  filter: blur(2px) !important;
  transition-duration: 180ms !important;
  pointer-events: none !important;
}

@keyframes apd550-fee-tag {
  0%, 14%, 100% { transform: rotate(0deg) translate3d(0, 0, 0) scale(1); }
  20% { transform: rotate(-4deg) translate3d(0, -2px, 0) scale(1.035); }
  27% { transform: rotate(3deg) translate3d(0, 0, 0) scale(1.02); }
  34% { transform: rotate(-1deg) translate3d(0, 0, 0) scale(1); }
  42% { transform: rotate(0deg) translate3d(0, 0, 0) scale(1); }
}

@keyframes apd550-fee-accent {
  0%, 22%, 100% { color: #222; }
  34%, 56% { color: var(--apd550-coral); }
  70% { color: #222; }
}

@keyframes apd554-fee-sweep {
  0%, 17% { opacity: 0; transform: translate3d(0,0,0) skewX(-16deg); }
  23% { opacity: .95; }
  56% { opacity: .95; transform: translate3d(430%,0,0) skewX(-16deg); }
  63%, 100% { opacity: 0; transform: translate3d(430%,0,0) skewX(-16deg); }
}

@media (min-width: 768px) {
  .apd550-fee-notice {
    bottom: 32px;
    min-height: 68px;
  }
}

@media (max-width: 390px) {
  .apd550-fee-notice {
    width: calc(100vw - 28px);
    min-height: 68px;
    padding: 11px 15px 11px 12px;
    gap: 10px;
    border-radius: 17px;
  }

  .apd550-fee-icon,
  .apd550-fee-icon svg {
    flex-basis: 42px;
    width: 42px;
    height: 42px;
  }

  .apd550-fee-notice strong {
    font-size: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .apd550-fee-notice,
  .apd550-fee-icon,
  .apd550-fee-notice strong span,
  .apd550-fee-shine,
  .apd196-fee-note[data-apd549-fee-note]::after {
    animation: none !important;
    transition-duration: 1ms !important;
  }
}