/*
 * Production presentation fixes:
 * 1. Public pages reserve the real header/footer heights.
 * 2. Visitor account screens hide the public shell.
 * 3. Desktop header rotates “Ruta de Tapas” and the route name.
 * 4. Mobile route status uses a compact, expandable strip.
 */
.app-container.public-shell-active {
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  overflow: hidden;
}

.app-container.public-shell-active > .main-header,
.app-container.public-shell-active > .site-footer {
  flex: 0 0 auto;
}

.app-container.public-shell-active > .main-layout,
.app-container.public-shell-active > .main-layout > .content-body {
  min-height: 0;
}

.app-container.public-shell-active > .main-layout > .content-body {
  padding-bottom: 0;
}

.app-container.public-shell-active .map-screen-wrapper {
  height: 100%;
  min-height: 0;
}

.app-container.public-shell-active > .site-footer {
  position: relative;
  right: auto;
  bottom: auto;
  left: auto;
  width: 100%;
}

.app-container.public-shell-active > .modal-backdrop {
  top: var(--public-header-height, 66px);
  right: 0;
  bottom: var(--public-footer-height, 30px);
  left: 0;
  width: auto;
  height: auto;
}

.app-container.public-shell-active > .modal-backdrop .modal-content-panel {
  max-height: calc(
    100dvh - var(--public-header-height, 66px) -
      var(--public-footer-height, 30px) - 2rem
  );
}

.app-container.visitor-intranet-active > .main-header,
.app-container.visitor-intranet-active > .site-footer,
.app-container.visitor-intranet-active .bottom-nav-bar {
  display: none !important;
}

@media (min-width: 768px) {
  .logo-section.rt-desktop-logo-animated .logo-title {
    display: block !important;
    width: max-content;
    height: 2rem;
    overflow: hidden;
    color: var(--header-fg, var(--color-primary));
    font-family: var(--font-heading);
    font-size: clamp(1.2rem, 2vw, 1.55rem);
    font-weight: 800;
    line-height: 2rem;
    white-space: nowrap;
  }

  .rt-desktop-logo-track {
    display: flex;
    flex-direction: column;
    width: max-content;
    animation: rtDesktopHeaderRotate 6s cubic-bezier(.76, 0, .24, 1)
      infinite;
    will-change: transform;
  }

  .rt-desktop-logo-track > span {
    display: flex;
    align-items: center;
    width: max-content;
    height: 2rem;
    flex: 0 0 2rem;
  }

  .logo-section.rt-desktop-logo-animated .logo-separator,
  .logo-section.rt-desktop-logo-animated .logo-event-block {
    display: none !important;
  }
}

@keyframes rtDesktopHeaderRotate {
  0%,
  34% {
    transform: translateY(0);
  }
  43%,
  78% {
    transform: translateY(-2rem);
  }
  88%,
  100% {
    transform: translateY(-4rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .rt-desktop-logo-track {
    animation: none;
  }
}

@media (max-width: 767px) {
  .widget-countdown.phase-active {
    display: none !important;
  }

  .widget-countdown.phase-upcoming,
  .widget-countdown.phase-finished,
  .widget-countdown.phase-pending {
    top: 0 !important;
    right: 0 !important;
    left: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 27px !important;
    min-height: 27px;
    padding: 0 2.5rem !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font-family: var(--font-heading);
    cursor: default;
    overflow: hidden;
  }

  .widget-countdown.phase-upcoming {
    background: linear-gradient(110deg, #b67a00 0%, #d89f16 58%, #8f6500 100%) !important;
    cursor: pointer;
  }

  .widget-countdown.phase-finished,
  .widget-countdown.phase-pending {
    background: linear-gradient(110deg, #8b1f2b 0%, #bc3441 58%, #741923 100%) !important;
  }

  .widget-countdown.phase-upcoming .countdown-hud-days {
    position: static !important;
    inset: auto !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100% !important;
    height: 27px !important;
    margin: 0 !important;
    color: #fff !important;
    font-family: var(--font-heading);
    font-size: .74rem !important;
    font-weight: 650 !important;
    line-height: 1 !important;
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .widget-countdown.phase-upcoming .countdown-clock-mini,
  .widget-countdown.phase-upcoming .countdown-title {
    display: none !important;
  }

  .widget-countdown.phase-finished .countdown-status-message,
  .widget-countdown.phase-pending .countdown-status-message {
    color: #fff !important;
    font-family: var(--font-heading);
    font-size: .74rem !important;
    font-weight: 650 !important;
    line-height: 1 !important;
  }

  .widget-countdown.phase-upcoming[data-rt-mobile-expanded="true"] {
    top: .55rem !important;
    right: .75rem !important;
    left: .75rem !important;
    width: calc(100% - 1.5rem) !important;
    height: 112px !important;
    min-height: 112px;
    padding: .85rem 2.65rem .7rem !important;
    border: 1px solid rgba(255, 255, 255, .28) !important;
    border-radius: 12px !important;
    box-shadow: 0 14px 32px rgba(43, 31, 0, .3) !important;
    cursor: default;
    overflow: visible;
  }

  .widget-countdown.phase-upcoming[data-rt-mobile-expanded="true"]
    .countdown-hud-days {
    display: none !important;
  }

  .widget-countdown.phase-upcoming[data-rt-mobile-expanded="true"]
    .countdown-clock-mini {
    position: static !important;
    display: flex !important;
    gap: .75rem !important;
    margin: 0 !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    animation: none !important;
    transform: none !important;
  }

  .widget-countdown.phase-upcoming[data-rt-mobile-expanded="true"]
    .countdown-title {
    position: static !important;
    display: block !important;
    margin: .45rem 0 0 !important;
    color: rgba(255, 255, 255, .86) !important;
    font-family: var(--font-body);
    font-size: .64rem !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    text-align: center !important;
    opacity: 1 !important;
    animation: none !important;
    transform: none !important;
  }

  .widget-countdown.phase-upcoming[data-rt-mobile-expanded="true"]
    .flip-digit-card {
    width: 24px !important;
    height: 34px !important;
    background: rgba(255, 255, 255, .2) !important;
    border-color: rgba(255, 255, 255, .34) !important;
    box-shadow: none !important;
  }

  .widget-countdown.phase-upcoming[data-rt-mobile-expanded="true"] .digit-num {
    font-size: 1.12rem !important;
  }

  .widget-countdown.phase-upcoming[data-rt-mobile-expanded="true"]
    .flip-unit-label {
    color: rgba(255, 255, 255, .82) !important;
    font-size: .48rem !important;
  }

  .rt-mobile-countdown-close {
    position: absolute;
    top: .4rem;
    right: .45rem;
    z-index: 2;
    display: none;
    place-items: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .45);
    border-radius: 50%;
    color: #fff;
    background: rgba(0, 0, 0, .14);
    font: 500 1.2rem/1 var(--font-body);
    cursor: pointer;
  }

  .widget-countdown[data-rt-mobile-expanded="true"]
    > .rt-mobile-countdown-close {
    display: grid;
  }
}