/* Shared Nearby card, used by the pass and payment example. */
.nearby-service-card { --tilt-x:11deg; --tilt-y:-17deg; --flip:0deg; display:block; position:relative; width:100%; aspect-ratio:1.586; padding:0; border:0; background:transparent; transform-style:preserve-3d; transform:rotateX(var(--tilt-x)) rotateY(calc(var(--tilt-y) + var(--flip))) rotateZ(-7deg); transition:transform 1.25s cubic-bezier(.22,.68,.22,1); }
.nearby-service-card.is-flipped { --flip:180deg; }
.nearby-card-face { position:absolute; display:flex; flex-direction:column; justify-content:space-between; inset:0; padding:27px 29px; text-align:left; border-radius:18px; background:#eaece8; color:#232725; backface-visibility:hidden; -webkit-backface-visibility:hidden; overflow:hidden; border:1px solid #ffffffa6; box-shadow:inset 0 1px 0 #ffffffd9,inset 0 -2px 0 #bdc4be,1px 3px 0 #a8b0a9,0 30px 60px #0000001c; }
.nearby-card-front::after { content:""; position:absolute; inset:0; background:linear-gradient(120deg,#ffffff75,transparent 35%,#ffffff12 70%,#ffffff70); pointer-events:none; }
.nearby-card-top { display:flex; align-items:center; justify-content:space-between; position:relative; z-index:2; }
.nearby-card-top strong { font-size:1.7rem; font-weight:600; letter-spacing:-.08em; line-height:1; }
.nearby-card-top>span { font-size:.46rem; letter-spacing:.13em; color:#646d66; }
.nearby-card-design { position:absolute; right:-38px; top:-30px; width:290px; height:290px; transform:rotate(-18deg); }
.nearby-card-design i { position:absolute; width:100%; height:100%; border:1px solid #b9c2ba77; border-radius:50%; transform:rotateY(0deg); }
.nearby-card-design i:nth-child(2) { transform:rotateY(25deg); }
.nearby-card-design i:nth-child(3) { transform:rotateY(50deg); }
.nearby-card-design i:nth-child(4) { transform:rotateY(75deg); }
.nearby-card-design i:nth-child(5) { transform:rotateX(32deg); }
.nearby-card-design i:nth-child(6) { transform:rotateX(58deg); }
.nearby-card-design i:nth-child(7) { transform:rotateX(78deg); border-color:#b0131850; }
.nearby-card-bottom { display:flex; align-items:flex-end; justify-content:space-between; gap:15px; position:relative; z-index:2; }
.nearby-card-bottom>span:first-child { display:grid; gap:8px; }
.nearby-card-bottom small { font-size:.45rem; letter-spacing:.13em; color:#727d74; }
.nearby-card-bottom strong { font-size:clamp(1rem,2vw,1.7rem); font-weight:500; line-height:1.1; letter-spacing:-.045em; }
.nearby-card-reference { font-size:.49rem; letter-spacing:.1em; color:#677469; white-space:nowrap; }
.nearby-card-back { transform:rotateY(180deg) translateZ(1px); background:#e7eae5; }
.nearby-card-back-head { display:flex; justify-content:space-between; gap:20px; }
.nearby-card-back-head strong { font-size:1.3rem; line-height:1.05; letter-spacing:-.06em; font-weight:500; }
.nearby-card-back-head>span { font-size:1.1rem; font-weight:600; letter-spacing:-.08em; }
.nearby-card-code { position:absolute; width:36%; aspect-ratio:1; right:26px; top:50%; transform:translateY(-38%); background:white; padding:7px; border-radius:5px; }
.nearby-card-code svg { width:100%; height:100%; }
.nearby-card-back-footer { display:flex; justify-content:space-between; font-size:.46rem; letter-spacing:.1em; }

@media (prefers-reduced-motion: reduce) {
  .nearby-service-card { --tilt-x: 0deg !important; --tilt-y: 0deg !important; transform: rotateY(var(--flip)); transition-duration: .01ms; }
}