/*
 * Unified route and in-module loading presentation.
 * One quiet motif replaces the legacy logo cards and rotating rings.
 */
html.orange-feature-loading #app main {
  visibility: hidden !important;
  pointer-events: none !important;
}

#orangeRouteLoader {
  display: none;
  position: fixed;
  left: 232px;
  top: 56px;
  right: 0;
  bottom: 0;
  z-index: 10045;
  align-items: center;
  justify-content: center;
  background: #f8f5ef;
  color: #28221b;
}

html.orange-feature-loading #orangeRouteLoader {
  display: flex;
}

.orange-route-loader-card {
  position: relative;
  display: grid;
  grid-template-columns: 42px auto;
  gap: 16px;
  align-items: center;
  min-width: 280px;
  padding: 22px 6px 25px;
  border-top: 1px solid #d8c9b5;
  border-bottom: 1px solid #d8c9b5;
}

.orange-route-loader-mark {
  display: inline-flex;
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  border: 1px solid #b58231;
  color: #aa741e;
  font: 400 19px/1 var(--orange-display-font);
}

.orange-route-loader-title {
  color: #30271f;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.35;
}

.orange-route-loader-copy {
  margin-top: 5px;
  color: #8b7b69;
  font-size: 13px;
  line-height: 1.4;
}

.orange-route-loader-line {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  overflow: hidden;
}

.orange-route-loader-line::after {
  content: "";
  display: block;
  width: 56px;
  height: 1px;
  background: #ad771e;
  animation: orange-loader-travel 1.15s cubic-bezier(.45, 0, .2, 1) infinite;
}

#orangeRouteLoader[data-error="1"] .orange-route-loader-line::after {
  animation: none;
  width: 100%;
  background: #b64a40;
}

:where(
  .wb-loading,
  .fd-pro-loading,
  .cap-loading,
  .fr-loading,
  .fts-loading,
  .iss-loading,
  .lss-loading,
  .ma-recovery-loading,
  .rap-drawer-loading,
  .sc-loading,
  .tap-qr-loading,
  .odp-loading
) {
  position: relative;
  min-height: 160px;
  padding: 68px 24px 28px !important;
  color: #81715f !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  text-align: center;
}

:where(
  .wb-loading,
  .fd-pro-loading,
  .cap-loading,
  .fr-loading,
  .fts-loading,
  .iss-loading,
  .lss-loading,
  .ma-recovery-loading,
  .rap-drawer-loading,
  .sc-loading,
  .tap-qr-loading,
  .odp-loading
)::before {
  content: "";
  position: absolute;
  top: 42px;
  left: calc(50% - 36px);
  width: 72px;
  height: 1px;
  background: #d9cbb8;
}

:where(
  .wb-loading,
  .fd-pro-loading,
  .cap-loading,
  .fr-loading,
  .fts-loading,
  .iss-loading,
  .lss-loading,
  .ma-recovery-loading,
  .rap-drawer-loading,
  .sc-loading,
  .tap-qr-loading,
  .odp-loading
)::after {
  content: "";
  position: absolute;
  top: 42px;
  left: calc(50% - 36px);
  width: 24px;
  height: 1px;
  background: #ac761e;
  animation: orange-module-travel 1.05s ease-in-out infinite alternate;
}

.rap-drawer-loading {
  display: block !important;
  min-height: 280px;
}

.rap-drawer-loading i {
  display: none !important;
}

.sc-loading i {
  display: none !important;
}

.rap-drawer-loading b,
.rap-drawer-loading span {
  display: block;
  margin: 0 !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.7;
}

.rap-drawer-loading span {
  color: #948575 !important;
  font-size: 12px !important;
}

@keyframes orange-loader-travel {
  from { transform: translateX(-60px); }
  to { transform: translateX(284px); }
}

@keyframes orange-module-travel {
  from { transform: translateX(0); }
  to { transform: translateX(48px); }
}

@media (max-width: 1000px) {
  #orangeRouteLoader {
    left: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .orange-route-loader-line::after,
  :where(
    .wb-loading,
    .fd-pro-loading,
    .cap-loading,
    .fr-loading,
    .fts-loading,
    .iss-loading,
    .lss-loading,
    .ma-recovery-loading,
    .rap-drawer-loading,
    .sc-loading,
    .tap-qr-loading,
    .odp-loading
  )::after {
    animation: none;
  }
}