/* OnlyTicket (2026-11-01): annual pass card designs ("templates") and the design picker.
   Default = the green Jungle Gym Club card (.jgp-card in profile.css). Others add .jgp-t-<code> to .jgp-card:
   ocean / space (boys), sakura / rainbow (girls); backgrounds are assets/img/pass-templates/<code>.svg.
   Used by Profile (My Annual Pass) and /Membership (picker). */

/* ---------- Card designs ---------- */
.jgp-card[class*="jgp-t-"] .jgp-leaf { display: none; }
.jgp-card[class*="jgp-t-"] .jgp-deco { background-position: center; background-size: cover; background-repeat: no-repeat; }

.jgp-card.jgp-t-ocean { background: #1e88e5; box-shadow: 0 0 0 2px #1565c0, 0 14px 30px rgba(13,71,161,.30); }
.jgp-card.jgp-t-ocean .jgp-deco { background-image: url(/assets/img/pass-templates/ocean.svg); }
.jgp-card.jgp-t-ocean .jgp-ribbon { background: linear-gradient(#ffca28, #ff9800); }
.jgp-card.jgp-t-ocean .jgp-chip, .jgp-card.jgp-t-ocean .jgp-valid { color: #0d47a1; }

.jgp-card.jgp-t-space { background: #283593; box-shadow: 0 0 0 2px #1a237e, 0 14px 30px rgba(11,15,58,.35); }
.jgp-card.jgp-t-space .jgp-deco { background-image: url(/assets/img/pass-templates/space.svg); }
.jgp-card.jgp-t-space .jgp-ribbon { background: linear-gradient(#ff7043, #e64a19); }
.jgp-card.jgp-t-space .jgp-chip, .jgp-card.jgp-t-space .jgp-valid { color: #1a237e; }
.jgp-card.jgp-t-space .jgp-spark { color: #fff59d; }

.jgp-card.jgp-t-sakura { background: #f06292; box-shadow: 0 0 0 2px #d81b60, 0 14px 30px rgba(194,24,91,.28); }
.jgp-card.jgp-t-sakura .jgp-deco { background-image: url(/assets/img/pass-templates/sakura.svg); }
.jgp-card.jgp-t-sakura .jgp-ribbon { background: linear-gradient(#ab47bc, #8e24aa); }
.jgp-card.jgp-t-sakura .jgp-chip, .jgp-card.jgp-t-sakura .jgp-valid { color: #ad1457; }
.jgp-card.jgp-t-sakura .jgp-valid i { color: #ec407a; }
.jgp-card.jgp-t-sakura .jgp-spark { color: #fff; }

.jgp-card.jgp-t-rainbow { background: #9575cd; box-shadow: 0 0 0 2px #7e57c2, 0 14px 30px rgba(94,53,177,.30); }
.jgp-card.jgp-t-rainbow .jgp-deco { background-image: url(/assets/img/pass-templates/rainbow.svg); }
.jgp-card.jgp-t-rainbow .jgp-ribbon { background: linear-gradient(#ec407a, #d81b60); }
.jgp-card.jgp-t-rainbow .jgp-chip, .jgp-card.jgp-t-rainbow .jgp-valid { color: #5e35b1; }
.jgp-card.jgp-t-rainbow .jgp-spark { color: #fff59d; }

/* ---------- Design picker (registration form and Profile "Change design") ---------- */
.jgp-picker { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.jgp-picker input { position: absolute; opacity: 0; pointer-events: none; }
.jgp-picker .jgp-pick { display: block; margin: 0; cursor: pointer; text-align: center; font-size: 11.5px; font-weight: 700; color: #6b7084; line-height: 1.2; }
.jgp-pick-face { position: relative; display: block; aspect-ratio: 1.586; border-radius: 10px; overflow: hidden; border: 3px solid transparent;
                 box-shadow: 0 0 0 1px #e6e8f0; transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease; margin-bottom: 5px;
                 background: radial-gradient(120% 90% at 18% 8%, #43a94f 0%, #22803a 48%, #15672c 100%); background-size: cover; background-position: center; }
.jgp-pick-face img { position: absolute; left: 8%; top: 14%; width: 42%; height: auto; }
.jgp-pick-face::after { content: ""; position: absolute; right: 8%; bottom: 12%; width: 26%; aspect-ratio: 1; border-radius: 4px; background: #fff; opacity: .95; }
.jgp-pick-face.t-ocean { background-image: url(/assets/img/pass-templates/ocean.svg); }
.jgp-pick-face.t-space { background-image: url(/assets/img/pass-templates/space.svg); }
.jgp-pick-face.t-sakura { background-image: url(/assets/img/pass-templates/sakura.svg); }
.jgp-pick-face.t-rainbow { background-image: url(/assets/img/pass-templates/rainbow.svg); }
.jgp-pick-tag { display: block; font-size: 10px; font-weight: 700; color: #9aa0ad; text-transform: uppercase; letter-spacing: .4px; }
.jgp-picker input:checked + .jgp-pick { color: #1e2130; }
.jgp-picker input:checked + .jgp-pick .jgp-pick-face { border-color: #e31e24; box-shadow: 0 0 0 1px #e31e24, 0 6px 14px rgba(227,30,36,.22); transform: translateY(-2px); }
.jgp-picker input:focus-visible + .jgp-pick .jgp-pick-face { box-shadow: 0 0 0 4px rgba(227,30,36,.25); }
.jgp-pick-face .jgp-pick-check { position: absolute; left: 6%; bottom: 8%; width: 18px; height: 18px; border-radius: 50%; background: #e31e24; color: #fff;
                                 font-size: 10px; display: none; place-items: center; z-index: 1; }
.jgp-picker input:checked + .jgp-pick .jgp-pick-check { display: grid; }

@media (max-width: 420px) {
    .jgp-picker { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- My Annual Pass: Change card design panel ---------- */
.jgp-design-panel { margin: 10px 4px 0; padding: 14px; border: 1px solid #e3eadd; border-radius: 14px; background: #fbfcfa; }
.jgp-design-title { font-weight: 700; font-size: 13px; margin-bottom: 10px; color: #1e2130; }
.jgp-design-btns { display: flex; gap: 8px; margin-top: 12px; }
.jgp-design-btns .jgp-btn { min-height: 42px; }