/* =========================================================
   Balo — CONNECT PAYMENTS (connect-payments.php)
   Page-scoped layout & components only. NO page background.
   ========================================================= */

:root{
  --cp-max: 980px;
  --radius: 18px;
  --gap: clamp(16px, 2.2vw, 24px);

  --text: var(--zen-text, #e9eefb);
  --muted: var(--zen-muted, #9aa6b0);

  --card-bd: var(--zen-card-bd, rgba(148,163,184,.12));
  --shadow: var(--zen-shadow, 0 10px 30px rgba(0,0,0,.36));

  --input-bg: color-mix(in srgb, #0b1224 72%, transparent); /* dark glass input */
  --input-bd: rgba(148,163,184,.22);
  --input-bd-focus: rgba(129,140,248,.65);
}

/* Shell spacing only (no bg) */
.cp { /* no background here */ }
.cp-wrap { padding: clamp(16px, 3.5vw, 32px) 16px clamp(28px, 5vw, 56px); }

/* Hero (type + spacing) */
.cp-hero {
  text-align:center;
  padding: clamp(48px, 8vw, 96px) 16px clamp(20px, 4vw, 40px);
}
.cp-logo {
  display:inline-block;
  width:160px; height:160px; border-radius:50%; object-fit:cover;
}
.cp-title{
  color: var(--text);
  font-size: clamp(28px, 5.2vw, 48px);
  line-height:1.1;
  margin: 12px 0 8px;
  text-shadow: 0 2px 6px rgba(0,0,0,.35);
}
.cp-sub{
  color: var(--text);
  opacity: .95;
  font-size: clamp(16px, 2.2vw, 19px);
  max-width: 70ch;
  margin: 0 auto;
}

/* Card */
.cp-card{
  max-width: var(--cp-max);
  margin: 0 auto;
  border: 1px solid var(--card-bd);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: clamp(22px, 2.6vw, 30px);
  color: var(--text);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
}
.cp-card-title{
  margin: 0 0 6px;
  font-size: clamp(20px, 2.8vw, 26px);
  line-height:1.2;
  color: var(--text);
  text-shadow: 0 2px 6px rgba(0,0,0,.35);
}
.cp-text{ color: var(--text); opacity:.95; }

/* Alerts */
.cp-alert{
  border-radius: 12px;
  padding: 10px 12px;
  margin: 0 0 14px;
  font-weight: 600;
}
.cp-alert--success{
  border: 1px solid #bbf7d0;
  color: #065f46;
  background: rgba(16,185,129,.12);
}
.cp-alert--error{
  border: 1px solid #fecaca;
  color: #7f1d1d;
  background: rgba(239,68,68,.12);
}

/* Form */
.cp-form{ display:grid; gap: var(--gap); margin-top: 12px; }
.cp-label{ color: var(--text); opacity: .9; font-weight: 600; font-size: 14px; }
.cp-input{
  -webkit-appearance:none; appearance:none;
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--input-bg) !important;          /* avoid white inputs */
  border: 1px solid var(--input-bd);
  color: var(--text);
  outline: none;
  transition: border-color .15s ease, box-shadow .2s ease;
}
.cp-input::placeholder{ color: rgba(233,238,251,.65); }
.cp-input:focus{
  border-color: var(--input-bd-focus);
  box-shadow: 0 0 0 4px rgba(99,102,241,.22);
}

/* Provider field wrappers (shown/hidden by JS) */
.cp-provider { margin-top: 6px; }

/* Buttons */
.cp-buttons{ margin-top: 8px; }
.cp-btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding: 12px 18px; border-radius: 999px; font-weight: 700;
  border:1px solid rgba(148,163,184,.22);
  color:#fff; text-decoration:none; cursor:pointer;
  background:
    radial-gradient(60% 140% at 50% 0%, rgba(99,102,241,.20), rgba(99,102,241,0)),
    linear-gradient(180deg, rgba(39,55,110,.92), rgba(20,31,64,.95));
  box-shadow: 0 10px 24px rgba(0,0,0,.28);
  transition: transform .12s ease, box-shadow .2s ease, border-color .2s ease;
}
.cp-btn:hover{
  transform: translateY(-1px);
  border-color: rgba(129,140,248,.55);
  box-shadow: 0 0 40px 6px rgba(99,102,241,.25);
}
.cp-btn-primary{ width: 100%; }
.cp-btn-ghost{
  background: transparent !important;
  border-color: rgba(148,163,184,.34);
  color: var(--text);
}

/* Visual cue for provider (button only, not page bg) */
.cp-btn-paypal{
  background:
    radial-gradient(60% 140% at 50% 0%, rgba(253,224,71,.25), rgba(253,224,71,0)),
    linear-gradient(180deg, rgba(245, 203, 66, .95), rgba(234, 179, 8, .95));
}
.cp-btn-stripe{
  background:
    radial-gradient(60% 140% at 50% 0%, rgba(129,140,248,.30), rgba(129,140,248,0)),
    linear-gradient(180deg, rgba(99,102,241,.95), rgba(67,56,202,.95));
}

/* Status */
.cp-status{ margin-top: 18px; text-align: left; }
.cp-h3{ margin: 0 0 8px; font-size: 1.05rem; color: var(--text); }
.cp-status-list{
  list-style:none; padding:0; margin:0; display:grid; gap:8px;
}
.cp-status-item{
  border:1px solid var(--card-bd);
  border-radius:12px;
  padding:10px 12px;
  display:flex; flex-wrap:wrap; gap:8px; align-items:center; justify-content:space-between;
}

/* Inline form */
.cp-inline-form{ display:inline-block; margin-left: 8px; }

/* Links inside card */
.cp-card a{ color:#c7d2fe; text-decoration:none; }
.cp-card a:hover{ text-decoration:underline; }

/* Motion safety */
@media (prefers-reduced-motion: reduce){
  .cp-btn, .cp-input { transition: none !important; }
}