/* Vistora shared UI — buttons, fields, OTP panel, modal.
   Works with both themes: colours come from the theme's --pcm-* variables. */

:root{
  --vs-p:      var(--pcm-primary, #0F793C);
  --vs-pd:     var(--pcm-primary-dark, #0B4A26);
  --vs-p-rgb:  var(--pcm-primary-rgb, 15,121,60);
  --vs-tint:   var(--pcm-lp, #E2F3E8);
  --vs-bg:     var(--pcm-surface, #F4F8F5);
  --vs-line:   var(--pcm-line, #DDE7E0);
  --vs-ink:    var(--pcm-ink, #14261B);
  --vs-mute:   var(--pcm-mute, #66766B);
  --vs-red:    #C0262D;
  --vs-amber:  #D97706;
  --vs-radius: 14px;
  --vs-font:   var(--pcm-font, 'Cairo', system-ui, sans-serif);
  --vs-btn:    var(--pcm-btn, linear-gradient(135deg, var(--vs-p), var(--vs-pd)));
  --vs-btn-text: var(--pcm-btn-text, #fff);
}

.vs-noscroll{overflow:hidden!important}
form[hidden],.vs-otp[hidden],#vs-reg-head[hidden]{display:none!important}
.vs-invalid{border-color:var(--vs-red)!important;box-shadow:0 0 0 4px rgba(192,38,45,.12)!important}
.vs-partners-hint{margin-top:6px}
.vs-partners-hint i{color:var(--vs-p)}

/* ---------- buttons ---------- */
.vs-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1.5px solid transparent;border-radius:12px;padding:12px 22px;font:700 .95rem/1.2 var(--vs-font);cursor:pointer;text-decoration:none;transition:transform .15s,box-shadow .2s,background .2s,border-color .2s;white-space:nowrap}
.vs-btn:disabled{opacity:.55;cursor:not-allowed;transform:none!important;box-shadow:none!important}
.vs-btn-primary{background:var(--vs-btn);color:var(--vs-btn-text);box-shadow:0 8px 22px -8px rgba(var(--vs-p-rgb),.55)}
.vs-btn-primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 12px 26px -8px rgba(var(--vs-p-rgb),.6);color:var(--vs-btn-text)}
.vs-btn-ghost{background:#fff;border-color:var(--vs-line);color:var(--vs-ink)}
.vs-btn-ghost:hover:not(:disabled){border-color:var(--vs-p);color:var(--vs-p)}
.vs-btn-block{display:flex;width:100%}
.vs-btn-sm{padding:8px 14px;font-size:.84rem;border-radius:10px}
.vs-linkbtn{background:none;border:0;padding:6px 4px;color:var(--vs-p);font:700 .88rem var(--vs-font);cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:6px}
.vs-linkbtn:hover:not(:disabled){text-decoration:underline}
.vs-linkbtn:disabled{color:var(--vs-mute);cursor:not-allowed}

/* ---------- fields ---------- */
.vs-f{display:flex;flex-direction:column;gap:6px;min-width:0}
.vs-f>span{font:700 .82rem var(--vs-font);color:var(--vs-ink)}
.vs-f input,.vs-f select,.vs-f textarea{width:100%;border:1.5px solid var(--vs-line);border-radius:11px;padding:11px 13px;font:600 .95rem var(--vs-font);color:var(--vs-ink);background:#fff;outline:none;transition:border-color .15s,box-shadow .15s}
.vs-f input:focus,.vs-f select:focus,.vs-f textarea:focus{border-color:var(--vs-p);box-shadow:0 0 0 4px rgba(var(--vs-p-rgb),.12)}
.vs-hint{color:var(--vs-mute);font-size:.76rem;line-height:1.5}
.vs-check{display:flex;gap:10px;align-items:flex-start;cursor:pointer;font-size:.9rem;line-height:1.7}
.vs-check input{margin-top:.35em;accent-color:var(--vs-p);width:18px;height:18px;flex:none}

/* ---------- OTP panel ---------- */
.vs-otp{text-align:center;animation:vsPop .28s ease}
.vs-otp[hidden]{display:none}
.vs-otp-ico{width:74px;height:74px;margin:0 auto 14px;border-radius:50%;background:linear-gradient(135deg,#25D366,#128C7E);color:#fff;display:grid;place-items:center;font-size:2.2rem;box-shadow:0 12px 28px -10px rgba(18,140,126,.7)}
.vs-otp-ico.is-email{background:var(--vs-btn);box-shadow:0 12px 28px -10px rgba(var(--vs-p-rgb),.6)}
.vs-otp-title{font:900 1.35rem var(--vs-font);margin:0 0 6px;color:var(--vs-ink)}
.vs-otp-sub{color:var(--vs-mute);margin:0 0 20px;font-size:.95rem}
.vs-otp-boxes{display:flex;gap:9px;justify-content:center;margin-bottom:14px}
.vs-otp-boxes input{width:48px;height:58px;text-align:center;font:800 1.5rem var(--vs-font);border:2px solid var(--vs-line);border-radius:12px;background:#fff;color:var(--vs-ink);outline:none;transition:border-color .15s,box-shadow .15s,transform .15s;padding:0}
.vs-otp-boxes input:focus{border-color:var(--vs-p);box-shadow:0 0 0 4px rgba(var(--vs-p-rgb),.14);transform:translateY(-2px)}
.vs-otp-boxes input.filled{border-color:var(--vs-p);background:var(--vs-tint)}
.vs-otp-boxes.err input{border-color:var(--vs-red);animation:vsShake .35s}
.vs-otp-msg{margin:0 0 14px;padding:10px 14px;border-radius:10px;font-size:.88rem;line-height:1.7;text-align:start}
.vs-otp-msg[hidden]{display:none}
.vs-otp-msg.err{background:#FDECEA;color:#9B1C1C;border:1px solid #F3C0C0}
.vs-otp-msg.ok{background:#E8F6EC;color:#166534;border:1px solid #B6E3C4}
.vs-otp-msg.info{background:#FFF7E0;color:#7a5b0d;border:1px solid #F1DFA3}
.vs-otp-foot{display:flex;justify-content:space-between;gap:10px;margin-top:12px;flex-wrap:wrap}
.vs-otp-note{margin:16px 0 0;color:var(--vs-mute);font-size:.8rem}
@media (max-width:420px){.vs-otp-boxes{gap:6px}.vs-otp-boxes input{width:42px;height:52px;font-size:1.3rem}}

/* ---------- modal ---------- */
.vs-modal{position:fixed;inset:0;z-index:100000;display:grid;place-items:center;padding:18px;background:rgba(7,32,19,.62);backdrop-filter:blur(3px)}
.vs-modal-box{background:#fff;border-radius:20px;max-width:480px;width:100%;padding:30px 28px;text-align:center;box-shadow:0 30px 80px -20px rgba(0,0,0,.5);animation:vsPop .28s ease;max-height:92vh;overflow:auto}
.vs-modal-ico{width:64px;height:64px;border-radius:18px;background:var(--vs-tint);color:var(--vs-p);display:grid;place-items:center;font-size:1.7rem;margin:0 auto 14px}
.vs-modal-box h2{font:900 1.3rem var(--vs-font);margin:0 0 10px;color:var(--vs-ink)}
.vs-modal-box p{color:var(--vs-mute);font-size:.93rem;line-height:1.85}
.vs-modal-links{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin:10px 0 16px!important}
.vs-modal-links a{color:var(--vs-p);font-weight:700;text-decoration:none}
.vs-modal-box .vs-check{text-align:start;margin:0 0 14px;background:var(--vs-bg);border-radius:12px;padding:12px 14px}
.vs-modal-box .vs-linkbtn{margin-top:10px;color:var(--vs-mute)}

/* ---------- misc ---------- */
.vs-spin{display:inline-block;animation:vsSpin 1s linear infinite}
@keyframes vsPop{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
@keyframes vsShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
@keyframes vsSpin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.vs-otp,.vs-modal-box{animation:none}}