/**
 * assets: match-configurator.css
 * — Thin bridge styles for plugin-specific match states.
 *
 * @package Ring_Match_Configurator
 */

.ring_match {
  width: 100%;
  position: relative;
}

.ring_match__panel {
  margin-top: var(--small);
  padding: var(--small);
  border-radius: 20px;
  background: rgb(255 255 255 / 18%);
  border: 1px solid rgb(255 255 255 / 24%);
}

.ring_match__panel_title {
  margin: 0 0 var(--extrasmall) 0;
}

.ring_match__panel_actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--extrasmall);
  margin-top: var(--extrasmall);
  justify-content: center;
}

.ring_match__email,
.ring_match__session_code,
.ring_match__person_code {
  width: 100%;
  margin-top: var(--extrasmall);
}

.ring_match__out_link {
  color: #fff;
  text-decoration: underline;
  word-break: break-word;
}

.ring_match__explain {
  margin-top: var(--extrasmall);
  margin-bottom: 0;
}

.ring_match__start_status,
.ring_match__status,
.ring_match__waiting {
  margin-top: var(--small);
  text-align: center;
  line-height: 1.6;
}

.ring_match__waiting {
  font-weight: 500;
}

.ring_match--is-waiting .tinder,
.ring_match--is-waiting .matches__actions {
  display: none;
}

.ring_match--is-waiting button,
.ring_match--is-waiting .btn,
.ring_match--is-waiting .ring_match__status {
  display: none !important;
}

section.matches.ring_match--compact {
  min-height: 90vh;
  padding: 0;
  justify-content: center;
}

section.matches.ring_match--compact .ring_match__waiting {
  margin-top: 0;
}

.ring_match__current_cards,
.ring_match__matches_cards {
  width: 100%;
}

.ring_match__current_card,
.ring_match__match_card,
.ring_match__empty_card {
  max-width: 330px;
  margin: 0 auto;
}

.ring_match__empty_card {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 260px;
  border-radius: 30px;
  background: #fff;
  color: #1e1e1e;
  box-shadow: 0 0 4px 0 rgb(0 0 0 / 25%);
  text-align: center;
  padding: var(--small);
}

.ring_match__empty_message {
  max-width: 240px;
}

.ring_match__appointment,
.ring_match__continue {
  min-width: min(100%, 260px);
}

.ring_match__match_votes {
  margin-top: var(--extrasmall);
  text-align: center;
  line-height: 1.5;
  font-weight: 500;
}

.ring_match__loading {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: auto;
  max-width: calc(100% - 24px);
  padding: 8px 14px;
  border-radius: 999px;
  background: rgb(0 0 0 / 22%);
  line-height: 1.4;
  z-index: 30;
  pointer-events: none;
}

.ring_match__loading_spinner {
  width: 14px;
  height: 14px;
  border-radius: 999px;
  border: 2px solid rgb(255 255 255 / 45%);
  border-top-color: #fff;
  animation: ring_match_spin 0.7s linear infinite;
}

.ring_match__loading_text {
  font-size: 14px;
}

.ring_match__card-returning {
  transition: transform 0.28s ease-out, opacity 0.28s ease-out !important;
}

.ring_match__card-returning--left {
  transform: translate(-130px, -45px) rotate(14deg) !important;
  opacity: 0 !important;
}

.ring_match__card-returning--right {
  transform: translate(130px, -45px) rotate(-14deg) !important;
  opacity: 0 !important;
}

.ring_match__panel[hidden],
.ring_match__start_options_group[hidden],
.ring_match__start_options_group.ring_match__is-hidden,
.ring_match__waiting[hidden],
.ring_match__loading[hidden] {
  display: none !important;
}

@keyframes ring_match_spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@media (max-width: 768px) {
  .ring_match__panel {
    border-radius: 16px;
  }

  .ring_match__current_card,
  .ring_match__match_card,
  .ring_match__empty_card {
    max-width: 300px;
  }
}