/*
  The employer welcome tour (class.employer_tour.php, employer_tour.js): the dim over the page,
  the spotlight box around the stop's element (its huge shadow is the dim), and the card beside
  it with Back / Next. The card takes the availability tour's coach look (css/employer_surveys.css).
  px throughout (a rem is 10px on this site).
*/

/* the blocker under everything the tour draws: nothing on the page takes a tap while the tour
   is up. it paints the dim itself only when there is no spotlight to paint it */
.ewt_dim { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1000; background: transparent; }
.ewt_dim.ewt_dim_full { background: rgba(22, 33, 31, .62); }
.ewt_dim.hide_me, .ewt_spot.hide_me, .ewt_card.hide_me, .ewt_step.hide_me, .ewt_back.hide_me, .ewt_next.hide_me, .ewt_finish.hide_me { display: none; }

/* the spotlight: a box over the element with a teal ring, the dim as its shadow; it glides
   from one stop to the next on the same page */
.ewt_spot
{
  position: fixed;
  z-index: 1001;
  border-radius: 10px;
  box-shadow: 0 0 0 2px #1db4b4, 0 0 0 200vmax rgba(22, 33, 31, .62);
  pointer-events: none;
  transition: top .35s ease, left .35s ease, width .35s ease, height .35s ease;
}

/* the card */
.ewt_card
{
  position: fixed;
  z-index: 1002;
  width: 340px;
  max-width: calc(100vw - 24px);
  background: #16211f;
  color: white;
  border-radius: 12px;
  padding: 14px 16px 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
}
.ewt_card_center { top: 50%; left: 50%; transform: translate(-50%, -50%); }
.ewt_in { animation: ewt_in .3s ease-out; }
@keyframes ewt_in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.ewt_card_center.ewt_in { animation: ewt_in_center .3s ease-out; }
@keyframes ewt_in_center { from { opacity: 0; transform: translate(-50%, -50%) translateY(6px); } to { opacity: 1; transform: translate(-50%, -50%); } }

.ewt_step { padding-right: 56px; }
.ewt_count { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #7fd6d6; }
.ewt_title { font-weight: 700; font-size: 16px; margin-top: 3px; }
.ewt_copy { font-size: 13.5px; line-height: 1.5; color: #d5e0e0; margin-top: 5px; }
.ewt_copy b { color: white; }

/* copy that differs by device: the rail's words on a desk, the tabs' on a phone (bootstrap's xs) */
.ewt_phone_only { display: none; }
@media (max-width: 767px)
{
  .ewt_wide_only { display: none; }
  .ewt_phone_only { display: inline; }
  .ewt_card { width: auto; max-width: none; left: 12px; right: 12px; }
  .ewt_card.ewt_dock_bottom { bottom: calc(68px + env(safe-area-inset-bottom)); top: auto; }
  .ewt_card.ewt_dock_top { top: calc(64px + env(safe-area-inset-top)); bottom: auto; }
  .ewt_card_center { left: 12px; right: 12px; top: 50%; transform: translateY(-50%); }
  .ewt_card_center.ewt_in { animation: ewt_in_phone_center .3s ease-out; }
  @keyframes ewt_in_phone_center { from { opacity: 0; transform: translateY(-50%) translateY(6px); } to { opacity: 1; transform: translateY(-50%); } }
}

.ewt_skip { position: absolute; top: 10px; right: 12px; background: none; border: 0; color: #9fb3b4; font-size: 12px; font-weight: 600; cursor: pointer; padding: 2px 4px; }
.ewt_skip:hover { color: white; }

.ewt_buttons { display: flex; gap: 8px; margin-top: 14px; }
.ewt_back, .ewt_next, .ewt_finish { border-radius: 8px; padding: 9px 14px; font-weight: 700; font-size: 14px; cursor: pointer; }
.ewt_back { background: transparent; color: #d5e0e0; border: 1px solid #4a5a5a; }
.ewt_back:hover { color: white; border-color: #7fd6d6; }
.ewt_next, .ewt_finish { flex: 1; background: #1db4b4; color: white; border: 0; }
.ewt_next:hover, .ewt_finish:hover { background: #19a0a0; }

@media (prefers-reduced-motion: reduce)
{
  .ewt_in, .ewt_card_center.ewt_in { animation: none; }
  .ewt_spot { transition: none; }
}