/* ══════════════════════════════════════════════════════════════
   Yoovic GO — signup / login portal pages
   ══════════════════════════════════════════════════════════════ */

:root {
  --p-accent: #6D28D9;
  --p-accent-dark: #4C1D95;
  --p-gold: #F59E0B;
  --p-green: #16A34A;
  --p-ink: #16181D;
  --p-body: #64748B;
  --p-line: #E5E7EB;
  --p-soft: #F8F7FC;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--p-ink);
  background: var(--p-soft);
  line-height: 1.5;
}
a { text-decoration: none; color: inherit; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
img { max-width: 100%; display: block; }

.pwrap { max-width: 1040px; margin: 0 auto; padding: 32px 20px 60px; }

/* ── card shell: side panel + form ── */
.pcard {
  display: grid; grid-template-columns: 300px 1fr;
  background: #fff; border-radius: 18px; overflow: hidden;
  box-shadow: 0 12px 40px rgba(76,29,149,.10);
}

.pside {
  background: linear-gradient(165deg, var(--p-accent-dark), var(--p-accent));
  color: #fff; padding: 28px 26px; position: relative; overflow: hidden;
  display: flex; flex-direction: column;
}
.pside::before {
  content: ''; position: absolute; inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,.08) 1px, transparent 1px);
  background-size: 16px 16px; pointer-events: none;
}
.pside > * { position: relative; z-index: 1; }

.plogo { font-weight: 900; font-size: 19px; letter-spacing: -.3px; }
.plogo span { color: var(--p-gold); }

.pside-head { margin-top: 40px; }
.pside-head h2 { font-size: 25px; font-weight: 800; line-height: 1.25; }
.pside-head .hl { color: var(--p-gold); }

.pside-img {
  margin-top: auto; border-radius: 12px; overflow: hidden;
  aspect-ratio: 4/3; background: rgba(255,255,255,.08);
}
.pside-img img { width: 100%; height: 100%; object-fit: cover; }
.pside-img .ph {
  width: 100%; height: 100%; display: grid; place-items: center;
  font-size: 11px; color: rgba(255,255,255,.5); text-align: center; padding: 12px;
}

.pside-trust {
  margin-top: 16px; display: flex; align-items: center; gap: 8px;
  font-size: 10.5px; color: rgba(255,255,255,.7);
}

/* ── form side ── */
.pform { padding: 34px 40px; }
.pform-head { text-align: center; margin-bottom: 22px; }
.pform-head h1 { font-size: 19px; font-weight: 800; }
.pform-head p { font-size: 12px; color: var(--p-body); margin-top: 4px; }

/* stepper */
.psteps { display: flex; align-items: center; justify-content: center; gap: 6px; margin-bottom: 26px; }
.pstep-dot {
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 11px; font-weight: 800;
  background: var(--p-line); color: var(--p-body);
}
.pstep-dot.on { background: var(--p-accent); color: #fff; }
.pstep-dot.done { background: var(--p-green); color: #fff; }
.pstep-bar { width: 30px; height: 2px; background: var(--p-line); }
.pstep-bar.on { background: var(--p-accent); }

.perr {
  background: #FEF2F2; border: 1px solid #FECACA; color: #B91C1C;
  border-radius: 9px; padding: 10px 14px; font-size: 12.5px;
  margin-bottom: 18px;
}

.pfield { margin-bottom: 15px; }
.pfield label {
  display: block; font-size: 12px; font-weight: 600;
  color: #374151; margin-bottom: 6px;
}
.pfield .req { color: #EF4444; }
.pinput-wrap { position: relative; }
.pinput-wrap .pic {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: #9CA3AF; font-size: 14px; pointer-events: none;
}
.pfield input, .pfield select {
  width: 100%; border: 1px solid var(--p-line); border-radius: 9px;
  padding: 10px 12px 10px 36px; font-size: 13px; font-family: inherit;
  transition: border-color .15s;
}
.pfield input:focus, .pfield select:focus {
  outline: none; border-color: var(--p-accent);
  box-shadow: 0 0 0 3px rgba(109,40,217,.12);
}
.ptoggle {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  font-size: 11.5px; font-weight: 600; color: var(--p-body); cursor: pointer;
}

.prow2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.pcheck {
  display: flex; align-items: flex-start; gap: 8px;
  font-size: 11.5px; color: var(--p-body); margin: 16px 0;
}
.pcheck input { margin-top: 2px; }
.pcheck a { color: var(--p-accent); font-weight: 600; }

.prow-between {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; margin: 4px 0 18px;
}
.prow-between a { color: var(--p-accent); font-weight: 600; }

.pbtn {
  width: 100%; background: var(--p-accent); color: #fff;
  border-radius: 10px; padding: 12px; font-size: 13.5px; font-weight: 700;
  transition: background .15s; display: flex; align-items: center; justify-content: center; gap: 6px;
}
.pbtn:hover { background: var(--p-accent-dark); }
.pbtn:disabled { opacity: .6; cursor: default; }

.por { display: flex; align-items: center; gap: 12px; margin: 20px 0; }
.por::before, .por::after { content:''; flex:1; height:1px; background: var(--p-line); }
.por span { font-size: 11px; color: var(--p-body); }

.psocials { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.psoc {
  border: 1px solid var(--p-line); border-radius: 9px; padding: 10px;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  font-size: 12px; font-weight: 600; transition: border-color .15s;
}
.psoc:hover { border-color: var(--p-accent); }

.pfoot-link { text-align: center; font-size: 12.5px; color: var(--p-body); margin-top: 22px; }
.pfoot-link a { color: var(--p-accent); font-weight: 700; }

.psecure {
  margin-top: 16px; display: flex; align-items: center; gap: 9px;
  background: var(--p-soft); border-radius: 9px; padding: 11px 13px;
  font-size: 10.5px; color: var(--p-body);
}
.psecure b { color: var(--p-ink); display: block; font-size: 11px; }

/* multi-step form fields */
.pstep-pane { display: none; }
.pstep-pane.on { display: block; }

.pstep-locked {
  border: 1px dashed var(--p-line); border-radius: 10px;
  padding: 20px; text-align: center; color: var(--p-body); font-size: 12px;
}

/* ── info band under card ── */
.pinfo {
  margin-top: 24px; background: #fff; border: 1px solid var(--p-line);
  border-radius: 14px; padding: 20px;
}
.pinfo-title {
  text-align: center; font-size: 11px; font-weight: 800;
  color: var(--p-accent); letter-spacing: .5px; margin-bottom: 16px;
}
.pinfo-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.pinfo-item { text-align: center; }
.pinfo-item .pii { font-size: 18px; margin-bottom: 6px; }
.pinfo-item b { display: block; font-size: 11px; font-weight: 700; }
.pinfo-item small { font-size: 9.5px; color: var(--p-body); }

/* ── dashboard placeholder ── */
.pdash {
  max-width: 640px; margin: 60px auto; background: #fff;
  border-radius: 16px; padding: 40px; text-align: center;
  box-shadow: 0 12px 40px rgba(76,29,149,.10);
}
.pdash .pdash-check {
  width: 56px; height: 56px; border-radius: 50%;
  background: color-mix(in srgb, var(--p-green) 12%, #fff);
  color: var(--p-green); display: grid; place-items: center;
  font-size: 26px; margin: 0 auto 18px;
}
.pdash h1 { font-size: 21px; font-weight: 800; }
.pdash p { font-size: 13px; color: var(--p-body); margin-top: 6px; }
.pdash-table {
  margin-top: 26px; text-align: left; border: 1px solid var(--p-line);
  border-radius: 10px; overflow: hidden;
}
.pdash-row {
  display: flex; justify-content: space-between; padding: 11px 16px;
  font-size: 12.5px; border-bottom: 1px solid var(--p-line);
}
.pdash-row:last-child { border-bottom: none; }
.pdash-row span:first-child { color: var(--p-body); }
.pdash-row span:last-child { font-weight: 600; }
.pdash-status {
  display: inline-block; padding: 2px 9px; border-radius: 5px;
  font-size: 10.5px; font-weight: 700;
  background: #FEF3C7; color: #92400E;
}
.pdash-actions { margin-top: 24px; display: flex; gap: 10px; justify-content: center; }
.pdash-btn {
  padding: 10px 20px; border-radius: 9px; font-size: 12.5px; font-weight: 700;
}
.pdash-btn.primary { background: var(--p-accent); color: #fff; }
.pdash-btn.ghost { border: 1px solid var(--p-line); color: var(--p-ink); }

@media (max-width: 760px) {
  .pcard { grid-template-columns: 1fr; }
  .pside { padding: 22px; }
  .pside-img { display: none; }
  .prow2 { grid-template-columns: 1fr; }
  .pinfo-grid { grid-template-columns: repeat(2, 1fr); }
  .psocials { grid-template-columns: 1fr; }
}

/* ── validation states ─────────────────────────────────────────── */
.pfield.valid input, .pfield.valid select { border-color: var(--p-green); }
.pfield.invalid input, .pfield.invalid select { border-color: #EF4444; }
.pfield-msg {
  font-size: 10.5px; margin-top: 5px; display: none;
}
.pfield.invalid .pfield-msg.err { display: block; color: #DC2626; }
.pfield.valid .pfield-msg.ok { display: block; color: var(--p-green); }
.pfield-check {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  font-size: 13px; display: none;
}
/* Icons removed per request — they interrupted the form-filling flow.
   The coloured border + text message under each field still show. */
.pfield-check { display: none !important; }
/* When a field has both a Show/Hide toggle AND a validation icon, the icon
   moves left of the toggle so they don't sit on top of each other.
   `.has-toggle` is the explicit fallback; :has() covers browsers that
   support it without needing the class at all. */
.pinput-wrap.has-toggle .pfield-check,
.pinput-wrap:has(.ptoggle) .pfield-check { right: 54px; }
.pfield.valid .pfield-check.ok-icon { display: block; color: var(--p-green); }
.pfield.invalid .pfield-check.err-icon { display: block; color: #EF4444; }
.pfield.checking .pfield-check.spin-icon { display: block; animation: pspin 0.7s linear infinite; }
@keyframes pspin { to { transform: translateY(-50%) rotate(360deg); } }

/* ── phone row: country dropdown + number ── */
.pphone-row { display: flex; gap: 8px; }
.pphone-row .pcc {
  flex: 0 0 92px;
}
.pphone-row .pcc select {
  padding-left: 10px; font-size: 12.5px; font-weight: 600;
}
.pphone-row .pnum { flex: 1; }
.pphone-row .pnum input { padding-left: 36px; }

/* ── password strength meter ── */
.pstrength { margin-top: 7px; }
.pstrength-bar {
  height: 4px; border-radius: 2px; background: var(--p-line);
  overflow: hidden; display: flex; gap: 2px;
}
.pstrength-bar i {
  flex: 1; background: var(--p-line); border-radius: 2px; transition: background .2s;
}
.pstrength-bar[data-score="1"] i:nth-child(1),
.pstrength-bar[data-score="2"] i:nth-child(-n+2) { background: #EF4444; }
.pstrength-bar[data-score="3"] i:nth-child(-n+3) { background: #F59E0B; }
.pstrength-bar[data-score="4"] i { background: var(--p-green); }
.pstrength-label {
  font-size: 10px; font-weight: 700; margin-top: 4px;
}
.pstrength-label[data-label="Weak"] { color: #EF4444; }
.pstrength-label[data-label="Medium"] { color: #F59E0B; }
.pstrength-label[data-label="Strong"] { color: var(--p-green); }

.pcriteria {
  list-style: none; display: grid; grid-template-columns: 1fr 1fr;
  gap: 4px 10px; margin-top: 8px;
}
.pcriteria li {
  font-size: 10px; color: var(--p-body);
  display: flex; align-items: center; gap: 5px;
}
.pcriteria li.met { color: var(--p-green); }
.pcriteria .dot {
  width: 5px; height: 5px; border-radius: 50%; background: var(--p-line); flex-shrink: 0;
}
.pcriteria li.met .dot { background: var(--p-green); }

/* ── oauth buttons: unconfigured state ── */
.psoc.unconfigured { opacity: .45; cursor: not-allowed; }
.psoc-note {
  text-align: center; font-size: 10px; color: var(--p-body);
  margin-top: 8px; line-height: 1.5;
}

.pbtn:disabled { opacity: .5; cursor: not-allowed; }

/* ── 4-step extras: labels, file upload, review, ghost button ─────── */
.psteps-labels {
  display: flex; justify-content: space-between;
  max-width: 260px; margin: -18px auto 22px; gap: 8px;
}
.psteps-labels span {
  flex: 1 1 0; text-align: center;
  font-size: 8.5px; font-weight: 600; color: var(--p-body);
  line-height: 1.3; word-break: break-word;
}

.pbtn-ghost {
  background: transparent; color: var(--p-body); margin-top: 8px;
  border: 1px solid var(--p-line);
}
.pbtn-ghost:hover { background: var(--p-soft); color: var(--p-ink); }

.pfile {
  display: flex; align-items: center; gap: 10px;
  border: 1.5px dashed var(--p-line); border-radius: 9px;
  padding: 12px 14px; cursor: pointer; transition: border-color .15s, background .15s;
}
.pfile:hover { border-color: var(--p-accent); background: var(--p-soft); }
.pfile.has-file { border-color: var(--p-green); border-style: solid; background: color-mix(in srgb, var(--p-green) 5%, #fff); }
.pfile-icon { font-size: 16px; flex-shrink: 0; }
.pfile-text { font-size: 11.5px; color: var(--p-body); }
.pfile.has-file .pfile-text { color: var(--p-green); font-weight: 600; }

.preview {
  border: 1px solid var(--p-line); border-radius: 10px;
  overflow: hidden; margin-bottom: 18px;
}
.prev-row {
  display: flex; justify-content: space-between;
  padding: 10px 14px; font-size: 12px;
  border-bottom: 1px solid var(--p-line);
}
.prev-row:last-child { border-bottom: none; }
.prev-row span { color: var(--p-body); }
.prev-row b { font-weight: 600; text-align: right; }