/* Pexlumi — Invitation Details: the "Your details" form (uses the Pexlumi Haldi colours when they are there). */
.pxo{--pxo-ink:var(--ink,#2b1035);--pxo-rani:var(--rani,#ef2d7d);--pxo-orange:var(--orange,#ff7a1a);--pxo-haldi:var(--haldi,#ffd23f);--pxo-parrot:var(--parrot,#2fb36d);--pxo-mute:var(--mute,#6f5a72);--pxo-lilac:var(--lilac,#9b6cf2);--pxo-sky:var(--sky,#3aa8f0)}
.pxo-app{max-width:900px;margin:0 auto;background:#fff;border-radius:34px;padding:26px 28px 30px;box-shadow:0 24px 60px -30px rgba(43,16,53,.45);border:3px solid var(--pxo-haldi)}
.pxo-loading{text-align:center;color:var(--pxo-mute)}
/* on a design's page the order card's main button opens this form; the WhatsApp one gives way */
.pxo-on .ordercard .pxw-whatsapp-button--single{display:none!important}
.fwa{transition:opacity .3s}
.pxo-in-view .fwa{opacity:0;pointer-events:none}
.ordercard .pxo-go{display:flex;width:100%;font-size:17px;padding:17px 22px;margin:4px 0 6px;background:linear-gradient(135deg,var(--pxo-rani,#ef2d7d),var(--pxo-orange,#ff7a1a));color:#fff}

/* steps */
.pxo-steps{display:flex;gap:6px;flex-wrap:wrap;justify-content:center;margin-bottom:12px}
.pxo-step{display:flex;align-items:center;gap:7px;border:0;background:#fff7e0;color:var(--pxo-ink);border-radius:99px;padding:6px 12px 6px 6px;font:800 13px/1 var(--sans,system-ui);cursor:pointer;position:relative}
.pxo-step i{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#fff;font-style:normal}
.pxo-step.on{background:var(--pxo-ink);color:#fff} .pxo-step.on i{background:var(--pxo-haldi);color:var(--pxo-ink)}
.pxo-step.done i{background:var(--pxo-parrot);color:#fff}
.pxo-step.dot:after{content:"";position:absolute;top:2px;right:4px;width:9px;height:9px;border-radius:50%;background:var(--pxo-rani)}
.pxo-bar{height:6px;border-radius:99px;background:#f3ead7;overflow:hidden;margin-bottom:18px}
.pxo-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--pxo-rani),var(--pxo-orange),var(--pxo-haldi));border-radius:99px;transition:width .4s}
.pxo-body h3{font:800 28px/1.1 var(--round,system-ui);margin:0 0 16px;color:var(--pxo-ink)}
.pxo-sub{font:800 20px var(--round,system-ui);margin:22px 0 10px}
.pxo-sub small,legend small{font:600 13px var(--sans,system-ui);color:var(--pxo-mute)}

/* fields */
.pxo-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px 16px}
.pxo-f{display:flex;flex-direction:column;gap:6px;font:700 14px var(--sans,system-ui);color:var(--pxo-ink)}
.pxo-f.wide{grid-column:1/-1}
.pxo-f input,.pxo-f textarea{width:100%;border:2px solid #eadfc8;background:#fffcf4;border-radius:14px;padding:12px 14px;font:600 16px/1.3 var(--sans,system-ui);color:var(--pxo-ink);transition:border-color .2s,box-shadow .2s}
.pxo-f input:focus,.pxo-f textarea:focus{outline:0;border-color:var(--pxo-rani);box-shadow:0 0 0 4px rgba(239,45,125,.15)}
.pxo-f small{font-weight:600;color:var(--pxo-mute)}
.pxo-f.bad input,.pxo-f.bad textarea{border-color:var(--pxo-rani);background:#fff1f6}
.err{font:700 13px var(--sans,system-ui);font-style:normal;color:#c2185b}
.star{color:var(--pxo-rani);font-size:.9em}
.pxo-card{border:2px dashed #eadfc8;border-radius:22px;padding:14px 16px 16px;margin:0 0 16px}
.pxo-card legend{font:800 18px var(--round,system-ui);padding:0 8px;color:var(--pxo-ink)}
.pxo-link{border:0;background:none;color:var(--pxo-rani);font:800 13px var(--sans,system-ui);cursor:pointer;padding:0;text-decoration:underline}
.pxo-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 20px}
.pxo-chip{border:2px solid var(--pxo-haldi);background:#fff8dc;color:var(--pxo-ink);border-radius:99px;padding:8px 14px;font:800 14px var(--sans,system-ui);cursor:pointer;transition:transform .2s}
.pxo-chip:hover{transform:scale(1.06) rotate(-2deg)}
.pxo-chip.ink{background:var(--pxo-ink);border-color:var(--pxo-ink);color:#fff}

/* photos */
.pxo-photos{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;margin-bottom:12px}
.pxo-card>.pxo-photo{margin-top:14px}
.pxo-photo{display:flex;gap:12px;align-items:flex-start}
.pxo-photos .pxo-photo{flex-direction:column}
.pxo-drop{position:relative;flex:none;display:grid;place-items:center;width:96px;aspect-ratio:2/3;border-radius:16px;border:2.5px dashed #e3cf9c;background:#fff8dc;cursor:pointer;overflow:hidden;transition:transform .2s}
.pxo-photo.free .pxo-drop{width:100%;aspect-ratio:1}
.pxo-drop:hover{transform:scale(1.03)}
.pxo-drop input{position:absolute;inset:0;opacity:0;cursor:pointer}
.pxo-drop img{width:100%;height:100%;object-fit:cover}
.pxo-plus{font:800 34px var(--round,system-ui);color:var(--pxo-orange)}
.pxo-have{font:800 13px var(--sans,system-ui);color:var(--pxo-parrot);text-align:center;padding:6px}
.pxo-photo.has .pxo-drop{border-style:solid;border-color:var(--pxo-parrot)}
.pxo-photo.bad .pxo-drop{border-color:var(--pxo-rani);background:#fff1f6}
.pxo-photo.busy .pxo-drop{opacity:.5}
.pxo-pmeta{display:flex;flex-direction:column;gap:3px;font:600 13px var(--sans,system-ui);color:var(--pxo-mute)}
.pxo-pmeta b{color:var(--pxo-ink);font-size:14px}
.pxo-pmeta .ok{color:var(--pxo-parrot);font-weight:800}

/* check, send, done */
.pxo-sum{display:grid;gap:8px;margin:0 0 14px;background:#fff8dc;border-radius:18px;padding:14px 16px}
.pxo-sum div{display:grid;grid-template-columns:110px 1fr;gap:10px}
.pxo-sum dt{font:800 14px var(--sans,system-ui);color:var(--pxo-mute)} .pxo-sum dd{margin:0;white-space:pre-line;font-weight:700}
.pxo-note{background:#f1f8ff;border-radius:14px;padding:10px 14px;font-weight:600;color:var(--pxo-ink)}
.pxo-note.ok{background:#eafaf0}
.pxo-warn{background:#fff1f6;border-radius:14px;padding:10px 14px;font-weight:700;color:#c2185b}
.pxo-consent{display:flex;gap:10px;align-items:flex-start;font-weight:600;margin:14px 0 4px}
.pxo-consent input{width:22px;height:22px;flex:none;margin-top:2px;accent-color:var(--pxo-rani)}
.pxo-consent.bad{color:#c2185b}
.pxo-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}
.pxo-acts{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:22px}
.pxo-btn{border:0;border-radius:99px;padding:15px 24px;font:800 17px/1 var(--round,system-ui);cursor:pointer;color:#fff;text-decoration:none;display:inline-flex;align-items:center;gap:8px;box-shadow:0 10px 22px -10px rgba(43,16,53,.6);transition:transform .25s}
.pxo-btn:hover{transform:scale(1.05) rotate(-1.5deg)}
.pxo-btn:disabled{opacity:.6;cursor:wait}
.pxo-btn.back{background:#fff;color:var(--pxo-ink);border:2px solid #eadfc8;box-shadow:none}
.pxo-btn.next{background:var(--pxo-ink)}
.pxo-btn.send{background:linear-gradient(135deg,var(--pxo-rani),var(--pxo-orange))}
.pxo-btn.wa{background:#25d366;color:#073b1d;font-size:19px;padding:17px 28px}
.pxo-status{min-height:1.2em;margin:12px 0 0;font-weight:700;color:var(--pxo-mute);text-align:right}
.pxo-status.err{color:#c2185b}
.pxo-done{text-align:center;padding:10px 0}
.pxo-done h3{font:800 30px var(--round,system-ui);margin:6px 0 10px}
.pxo-done p{max-width:560px;margin:10px auto}
.pxo-confetti{font-size:54px;animation:pxo-pop .6s cubic-bezier(.3,1.6,.5,1)}
@keyframes pxo-pop{from{transform:scale(.2) rotate(-30deg)}}
@media(max-width:600px){
  .pxo-app{padding:18px 14px 22px;border-radius:24px}
  .pxo-step span{display:none} .pxo-step{padding:6px} .pxo-step.on span{display:inline}
  .pxo-body h3{font-size:24px}
  .pxo-sum div{grid-template-columns:1fr;gap:2px}
  .pxo-acts .pxo-btn{padding:14px 18px;font-size:16px}
  .pxo-status{text-align:center}
}
@media(prefers-reduced-motion:reduce){.pxo-confetti{animation:none}.pxo-btn:hover,.pxo-chip:hover{transform:none}}

/* ------------------------------------------------------------------ accounts (includes/accounts.php) */
.pxo-g{display:inline-flex;align-items:center;gap:10px;background:#fff;color:#1f1f1f;border:1.5px solid #dadce0;border-radius:99px;padding:10px 18px 10px 14px;font:700 15px/1 var(--sans,system-ui);text-decoration:none;white-space:nowrap;box-shadow:0 4px 12px -6px rgba(43,16,53,.35);transition:transform .2s,box-shadow .2s}
.pxo-g:hover{transform:translateY(-1px);box-shadow:0 8px 18px -8px rgba(43,16,53,.45)}
.pxo-g svg{flex:none}
.pxo-signin{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:linear-gradient(135deg,#fff7e0,#ffeaf3);border-radius:18px;padding:12px 14px;margin:0 0 16px;font:600 14px/1.4 var(--sans,system-ui);color:var(--pxo-ink,#2b1035)}
.pxo-signin span{flex:1;min-width:200px}
.pxo-signin.on{background:#eafaf0}
.pxo-done .pxo-signin{margin-top:16px;text-align:left}
/* My account: Google first; the password form is for the team (its link is in the box) */
.pxo-signin-box{max-width:520px;margin:0 auto 30px;text-align:center;background:#fff;border-radius:28px;padding:26px 24px;border:3px solid var(--haldi,#ffd23f);box-shadow:0 20px 50px -30px rgba(43,16,53,.45)}
.pxo-signin-box h2{font:800 28px/1.1 var(--round,system-ui);margin:0 0 8px}
.pxo-signin-box p{color:var(--mute,#6f5a72);margin:0 0 16px}
.pxo-signin-box ~ h2,.pxo-signin-box ~ form.woocommerce-form-login,.pxo-signin-box ~ #customer_login{display:none}
.pxo-small{font-size:13px;color:var(--mute,#6f5a72)}
.pxo-small a{color:inherit}
/* My invitations */
.pxo-inv{display:flex;gap:16px;align-items:flex-start;background:#fff;border-radius:24px;padding:16px;margin:0 0 16px;box-shadow:0 14px 34px -22px rgba(43,16,53,.45);border:2px solid #f3ead7}
.pxo-inv-pic{flex:none;width:84px;height:112px;object-fit:cover;border-radius:16px}
.pxo-inv-main{flex:1;min-width:0}
.pxo-inv h3{font:800 20px/1.2 var(--round,system-ui);margin:0 0 4px}
.pxo-inv h3 small{font:700 13px var(--sans,system-ui);color:var(--mute,#6f5a72)}
.pxo-inv p{margin:0 0 8px}
.pxo-inv-acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.pxo-inv-acts .button{border-radius:99px!important}
.pxo-track{display:flex;list-style:none;margin:10px 0 8px;padding:0;gap:0;counter-reset:s}
.pxo-track li{flex:1;position:relative;text-align:center;font:700 11px/1.2 var(--sans,system-ui);color:#9a8a9c;padding-top:26px}
.pxo-track li i{position:absolute;top:0;left:50%;translate:-50% 0;width:20px;height:20px;border-radius:50%;background:#eadfc8;z-index:1}
.pxo-track li:before{content:"";position:absolute;top:9px;left:-50%;width:100%;height:3px;background:#eadfc8}
.pxo-track li:first-child:before{display:none}
.pxo-track li.done i{background:var(--parrot,#2fb36d)} .pxo-track li.done:before,.pxo-track li.now:before{background:var(--parrot,#2fb36d)}
.pxo-track li.now i{background:var(--rani,#ef2d7d);box-shadow:0 0 0 5px rgba(239,45,125,.2)}
.pxo-track li.done,.pxo-track li.now{color:var(--ink,#2b1035)}
.pxo-empty{background:#fff8dc;border-radius:20px;padding:18px}
.pxo-forget{margin-top:26px;color:var(--mute,#6f5a72)} .pxo-forget summary{cursor:pointer;font-weight:700}
@media(max-width:600px){.pxo-track span{font-size:9.5px}.pxo-inv{padding:12px;gap:12px}.pxo-inv-pic{width:64px;height:86px}}

/* the free-song line after an invitation order, and My songs in My account (includes/songs.php) */
.pxo-note.song{background:#fff1f7;margin-top:12px}
.pxo-note.song a{color:var(--pxo-rani,#ef2d7d);font-weight:800}
.pxo-songs-h{margin:30px 0 14px}
.pxo-song-pic{display:grid;place-items:center;font-size:34px;background:#fff8dc;border-radius:14px}