/* Motorhome Norway · línea del código de descuento en el hero (opción 1). Medidas en px reales. */
.mhn-promo {
  margin: 20px 0 0;                 /* 20 px bajo «Motorhome rental in Norway» */
  display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 9px;
  font-family: inherit;             /* la misma tipografía del hero */
  font-size: 22px; font-weight: 700; line-height: 1.2;
  color: #fff; text-shadow: 0 1px 6px rgba(0, 25, 70, .45); white-space: nowrap;
}
.mhn-promo__deal { display: inline-flex; align-items: center; gap: 9px; }
.mhn-promo__codegroup { display: inline-flex; align-items: center; gap: 9px; white-space: nowrap; }
.mhn-promo__pill {
  /* League Spartan deja mucho hueco bajo la línea base: más relleno arriba que
     abajo para que el texto quede centrado (mismo alto que con 4/4). */
  border-radius: 999px; padding: 7px 13px 1px;
  /* El mismo fondo que el botón Search. */
  background: var(--search-button-background-image, linear-gradient(261.6deg, #0163e1 50%, #0190fd 81.1%));
  color: #fff; text-shadow: none; box-shadow: 0 2px 8px rgba(0, 40, 110, .35);
}
.mhn-promo__dot { opacity: .8; }
.mhn-promo__code { letter-spacing: .01em; }
.mhn-promo__copy {
  display: inline-grid; place-items: center; width: 1.6em; height: 1.6em; padding: 0;
  border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .75); background: transparent;
  color: #fff; cursor: pointer; font-size: inherit;
  transition: background-color .25s, border-color .25s;
}
/* Los dos iconos (copiar y tick) ocupan la misma celda. */
.mhn-promo__copy svg { grid-area: 1 / 1; width: 58%; height: 58%; }
.mhn-promo__copy:hover { background: rgba(255, 255, 255, .15); }
.mhn-promo__copy:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* Al copiar (components/promo-line.js): el botón se pone verde, el icono de
   copiar se encoge y el tick se dibuja con un pequeño rebote. */
.mhn-promo__copy-icon { transition: opacity .2s, transform .25s; }
.mhn-promo__check-icon { opacity: 0; stroke-dasharray: 1; stroke-dashoffset: 1; transition: opacity .15s, stroke-dashoffset 0s .2s; }
.mhn-promo__copy.is-copied { background: #16a34a; border-color: #16a34a; }
.mhn-promo__copy.is-copied .mhn-promo__copy-icon { opacity: 0; transform: scale(.3) rotate(-25deg); }
.mhn-promo__copy.is-copied .mhn-promo__check-icon {
  opacity: 1; stroke-dashoffset: 0;
  transition: opacity .1s .1s, stroke-dashoffset .35s ease-out .12s;
  animation: mhnPromoTick .45s cubic-bezier(.34, 1.56, .64, 1) .1s;
}
@keyframes mhnPromoTick { 0% { transform: scale(.6); } 100% { transform: scale(1); } }
/* A la vez, el código da un salto y se tiñe de verde claro un momento. */
.mhn-promo__code.is-copied { animation: mhnPromoCode .8s ease-out; }
@keyframes mhnPromoCode {
  0% { transform: none; }
  25% { transform: translateY(-5px) scale(1.08); color: #86efac; }
  45% { transform: translateY(1px) scale(.97); }
  65% { transform: translateY(-1px) scale(1.02); color: #86efac; }
  100% { transform: none; }
}
@keyframes mhnPromoCodeColor { 25%, 65% { color: #86efac; } }
@media (prefers-reduced-motion: reduce) {
  .mhn-promo__copy { transition: none; }
  .mhn-promo__copy svg { transition: none !important; animation: none !important; }
  .mhn-promo__code.is-copied { animation-name: mhnPromoCodeColor; }
}
/* Móvil: la pregunta arriba y la oferta debajo, centradas. */
@media (max-width: 600px) {
  .mhn-promo { font-size: 15px; gap: 6px; margin-top: 14px; flex-direction: column; white-space: normal; padding: 0 16px; }
  .mhn-promo__deal { gap: 6px; flex-wrap: wrap; justify-content: center; row-gap: 6px; }
  .mhn-promo__pill { padding: 5px 10px 1px; white-space: nowrap; }
  .mhn-promo__codegroup { gap: 6px; }
  .mhn-promo__dot { display: none; }
  .mhn-promo__copy { width: 28px; height: 28px; }
}
/* En el hero las piezas se ordenan con `order` (flex) por debajo de 1110 px: la
   línea va siempre justo después del subtítulo. */
.js-search-container > .mhn-promo { order: 4; }