/* Recharge4Me — the hero card turns over
 *
 * The front is the card you scratch. The back is whichever network's card
 * it happens to be. Left alone, it works through all seven. */

.card-stage {
  perspective: 1600px;
}

.r4m-flip {
  position: relative;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  will-change: transform;
  transition: transform 0.95s cubic-bezier(0.25, 0.7, 0.3, 1);
}

.r4m-flip.r4m-showing-back {
  transform: rotateY(180deg);
}

.r4m-face {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Both faces sat at the same depth, which lets a browser show slivers of
   the wrong one mid-rotation. A hair of separation removes the ambiguity. */
.r4m-front {
  transform: translateZ(0.6px);
}

/* backface-visibility is not inherited, and a child that makes its own
   stacking context — the card's shadow and background do — can render
   through regardless of what the parent says. */
.r4m-front > * {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* Out of rendering entirely while the card rests on its front. */
.r4m-flip.r4m-back-parked .r4m-back {
  visibility: hidden;
}

/* The back sits exactly over the front, so it inherits the card's size
   without either face needing a fixed height. */
.r4m-back {
  position: absolute;
  inset: 0;
  transform: rotateY(180deg) translateZ(0.6px);
  border-radius: 18px;
  padding: 24px 26px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-image: linear-gradient(
    135deg,
    var(--net-g1, #383495) 0%,
    var(--net-g2, #192fa6) 52%,
    var(--net-g3, #1330a8) 100%
  );
  background-color: var(--net-g2, #192fa6);
  box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.9);
  overflow: hidden;
}

/* A sheen across the corner, the same one the app's cards carry. */
.r4m-back::after {
  content: "";
  position: absolute;
  top: -40%;
  right: -30%;
  width: 70%;
  height: 180%;
  transform: rotate(18deg);
  background: rgba(255, 255, 255, var(--net-sheen, 0.1));
  pointer-events: none;
}

.r4m-back-top {
  display: flex;
  align-items: center;
  min-height: 52px;
}

.r4m-back-logo {
  height: var(--net-logoh, 32px);
  width: auto;
  max-width: 62%;
  object-fit: contain;
  display: block;
}

/* Shown only when a logo file is missing, so a card is never blank. */
.r4m-back-word {
  display: none;
  font-weight: 800;
  font-size: 20px;
  letter-spacing: 0.5px;
  color: var(--net-fg, #fff);
}

.r4m-back-word.r4m-visible {
  display: block;
}

.r4m-back-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.r4m-back-code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.6px;
  color: var(--net-fg, #fff);
  background: var(--net-pill, rgba(0, 0, 0, 0.24));
  padding: 7px 11px;
  border-radius: 8px;
}

.r4m-back-country {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--net-fg, #fff);
  opacity: 0.9;
}

/* The front picks up the current network's colour on its dial line and a
   thin strip along the top, so both faces belong to the same card. */
.r4m-front .dial-out {
  color: var(--net-accent, inherit);
  transition: color 0.4s ease;
}

@media (max-width: 620px) {
  .r4m-back {
    padding: 18px 20px;
  }
  .r4m-back-code {
    font-size: 12.5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .r4m-flip {
    transition: none;
  }
  /* No turning at all: the card simply stays on its front. */
  .r4m-flip.r4m-showing-back {
    transform: none;
  }
  .r4m-back {
    display: none;
  }
}