/* Optional Ask Aira / Indoor Navigation — frosted kiosk tiles */

/* Lift the extras + FAQ dock off the bezel when the three tiles are on. */
html.has-landing-extras .regions-strip {
  padding-bottom: 118px;
}

.extra-cta-row {
  display: none;
  width: min(920px, 100%);
  gap: 8px;
  padding: 6px;
  margin-bottom: 10px;
  border-radius: 22px;
  background: rgba(6, 16, 34, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.extra-cta-row.is-visible { display: flex; }

.extra-cta {
  flex: 1 1 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 14px;
  min-height: 74px;
  padding: 10px 16px 10px 12px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  color: #fff;
  text-align: left;
  position: relative;
  overflow: hidden;
  transition: transform 0.16s ease, background 0.2s ease, border-color 0.2s ease;
}
.extra-cta:active { transform: scale(0.985); }
.extra-cta[hidden] { display: none !important; }

.extra-cta-aira {
  background:
    radial-gradient(120% 80% at 12% -10%, rgba(94, 224, 216, 0.34), transparent 58%),
    rgba(255, 255, 255, 0.045);
}
.extra-cta-nav {
  background:
    radial-gradient(120% 80% at 12% -10%, rgba(232, 200, 150, 0.28), transparent 58%),
    rgba(255, 255, 255, 0.045);
}
.extra-cta-virtualq {
  background:
    radial-gradient(120% 80% at 12% -10%, rgba(120, 168, 255, 0.28), transparent 58%),
    rgba(255, 255, 255, 0.045);
}

.extra-cta-orb {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.extra-cta-orb svg { width: 20px; height: 20px; }

.extra-cta-aira .extra-cta-orb {
  color: #042623;
  background: radial-gradient(circle at 35% 30%, #d9fffb 0%, #5ee0d8 38%, #0fbab2 100%);
  box-shadow:
    0 0 0 5px rgba(15, 186, 178, 0.14),
    0 8px 18px rgba(15, 186, 178, 0.32);
  animation: extra-orb-pulse 3.4s ease-in-out infinite;
}
.extra-cta-nav .extra-cta-orb {
  color: #2a2116;
  background: radial-gradient(circle at 35% 30%, #fff4de 0%, #e8c896 40%, #c2a37e 100%);
  box-shadow:
    0 0 0 5px rgba(194, 163, 126, 0.14),
    0 8px 18px rgba(194, 163, 126, 0.28);
}
.extra-cta-virtualq .extra-cta-orb {
  color: #071226;
  background: radial-gradient(circle at 35% 30%, #e8f0ff 0%, #9db8ff 40%, #6f90e8 100%);
  box-shadow:
    0 0 0 5px rgba(111, 144, 232, 0.16),
    0 8px 18px rgba(111, 144, 232, 0.3);
}

@keyframes extra-orb-pulse {
  0%, 100% { box-shadow: 0 0 0 5px rgba(15, 186, 178, 0.14), 0 8px 18px rgba(15, 186, 178, 0.32); }
  50% { box-shadow: 0 0 0 8px rgba(15, 186, 178, 0.08), 0 8px 18px rgba(15, 186, 178, 0.42); }
}

.extra-cta-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  width: 100%;
}
.extra-cta-kicker { display: none; }
.extra-cta-row.has-three .extra-cta-txt {
  font-size: 19px;
}
.extra-cta-row.has-three .extra-cta-sub {
  font-size: 12px;
}

.extra-cta-txt {
  font-family: var(--font-display, inherit);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: #fff;
}
.extra-cta-sub {
  font-size: 13px;
  font-weight: 400;
  line-height: 1.25;
  color: rgba(255, 255, 255, 0.56);
  margin-top: 2px;
}

#extra-backdrop {
  z-index: 21;
}

.extra-modal {
  position: absolute;
  left: 4%;
  right: 4%;
  top: 5%;
  bottom: 5%;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--cream, #f7f3ec);
  border-radius: 32px;
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.55);
  z-index: 22;
  opacity: 0;
  pointer-events: none;
  overflow: hidden;
  transform: translateY(18px) scale(0.98);
  transition: opacity 0.28s ease, transform 0.36s cubic-bezier(0.32, 0.72, 0.05, 1);
}
.extra-modal.is-open {
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

.extra-modal-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 78px 16px 28px;
  background: #fff;
  border-bottom: 1px solid rgba(3, 20, 50, 0.08);
}
.extra-modal-title {
  margin: 0;
  font-family: var(--font-display, inherit);
  font-size: 28px;
  font-weight: 600;
  color: var(--navy-900, #031432);
}
.extra-frame {
  flex: 1 1 auto;
  width: 100%;
  border: 0;
  background: #fff;
}

body.is-handheld .extra-cta { min-height: 78px; }
body.is-handheld .extra-cta-txt { font-size: 23px; }
body.is-phone .extra-cta { min-height: 80px; padding: 10px 14px 10px 10px; }
body.is-phone .extra-cta-txt { font-size: 22px; }