/* Pro forms UI (scoped) */
.pro-wrap{ max-width: 1080px; margin: 22px auto; padding: 0 14px; }
.pro-header{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-bottom:14px; }
.pro-title{ margin:0; font-family: "Playfair Display", ui-serif; letter-spacing:.2px; }
.pro-sub{ margin:4px 0 0; opacity:.78; }

.pro-stepper{ display:flex; gap:10px; flex-wrap:wrap; margin: 10px 0 0; }
.pro-step{ display:flex; align-items:center; gap:8px; padding:8px 10px; border-radius:999px; background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.10); font-weight:700; font-size:13px; }
.pro-step .dot{ width:18px; height:18px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; background: rgba(255,255,255,.12); font-size:12px; }
.pro-step.is-on{ background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.18); }
.pro-step.is-done .dot{ background: rgba(255,255,255,.22); }

.pro-grid{ display:grid; grid-template-columns: 1.15fr .85fr; gap:16px; align-items:start; }
@media (max-width: 960px){ .pro-grid{ grid-template-columns: 1fr; } }

.pro-card{ background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.10); border-radius: 18px; box-shadow: 0 18px 44px rgba(0,0,0,.25); overflow:hidden; }
.pro-card .hd{ padding:16px 16px 10px; border-bottom:1px solid rgba(255,255,255,.08); display:flex; align-items:center; justify-content:space-between; gap:10px; }
.pro-card .bd{ padding:16px; }
.pro-card .hd h3{ margin:0; font-size:16px; letter-spacing:.2px; }
.pro-badge{ padding:6px 10px; border-radius:999px; background: rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.14); font-size:12px; font-weight:800; }

.pro-alert{ border-radius: 14px; padding: 12px 12px; margin: 0 0 12px; border:1px solid rgba(255,255,255,.14); background: rgba(255,180,180,.08); color:#ffd3d3; }

.pro-row{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; }
@media (max-width: 700px){ .pro-row{ grid-template-columns: 1fr; } }

.pro-field{ display:flex; flex-direction:column; gap:6px; margin-bottom:12px; }
.pro-label{ font-size:12px; letter-spacing:.2px; opacity:.82; font-weight:800; text-transform:uppercase; }
.pro-help{ font-size:12px; opacity:.72; margin-top:6px; }

.pro-input, .pro-select, .pro-textarea{
  width:100%;
  background: rgba(0,0,0,.22);
  border:1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.92);
  border-radius: 14px;
  padding: 11px 12px;
  outline: none;
  transition: border-color .15s ease, transform .05s ease, background .15s ease;
}
.pro-input:focus, .pro-select:focus, .pro-textarea:focus{
  border-color: rgba(255,255,255,.28);
  background: rgba(0,0,0,.26);
}
.pro-textarea{ min-height: 96px; resize: vertical; }

.pay-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:8px; }
@media (max-width: 700px){ .pay-grid{ grid-template-columns:1fr; } }
.pay-option{ position:relative; border-radius: 16px; border:1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.05); padding: 12px; cursor:pointer; transition: transform .08s ease, border-color .15s ease, background .15s ease; }
.pay-option:hover{ transform: translateY(-1px); border-color: rgba(255,255,255,.20); background: rgba(255,255,255,.07); }
.pay-option input{ position:absolute; inset:0; opacity:0; cursor:pointer; }
.pay-option .name{ font-weight:900; }
.pay-option .desc{ font-size:12px; opacity:.75; margin-top:2px; }
.pay-option.is-on{ border-color: rgba(255,255,255,.26); background: rgba(255,255,255,.10); }

.pro-btn{ width:100%; display:inline-flex; justify-content:center; align-items:center; gap:10px; padding: 12px 14px; border-radius: 14px; font-weight:900; border:1px solid rgba(255,255,255,.08); background: #ffffff; color:#0b0f14; cursor:pointer; }
.pro-btn:active{ transform: translateY(1px); }
.pro-btn.secondary{ background: rgba(255,255,255,.08); color: rgba(255,255,255,.92); border-color: rgba(255,255,255,.14); }
.pro-btn.small{ width:auto; padding:10px 12px; border-radius: 12px; }

.pro-summary{ position:sticky; top:14px; }
@media (max-width: 960px){ .pro-summary{ position:static; } }

.summary-line{ display:flex; justify-content:space-between; gap:12px; margin: 8px 0; }
.summary-hr{ border:0; border-top:1px solid rgba(255,255,255,.10); margin: 12px 0; }
.summary-total{ font-weight:1000; font-size: 16px; }

.pro-pill{ display:inline-flex; gap:8px; align-items:center; padding: 8px 10px; border-radius: 999px; background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.10); font-weight:800; font-size:12px; }
.pro-pill b{ font-weight:1000; }
.dropzone{ border:1px dashed rgba(255,255,255,.25); border-radius:16px; padding:14px; background: rgba(0,0,0,.18); }
.dropzone .hint{ font-size:12px; opacity:.75; margin-top:6px; }


/* Payment QR */
.pro-qr{ width:100%; max-width:280px; height:auto; display:block; margin-top:10px; border-radius:16px; border:1px solid rgba(255,255,255,.14); background:#fff; padding:10px; }
.pro-qr-placeholder{ width:100%; max-width:280px; height:280px; display:flex; align-items:center; justify-content:center; margin-top:10px; border-radius:16px; border:1px dashed rgba(255,255,255,.22); opacity:.85; font-weight:900; }


/* HOTFIX: ensure links/buttons are readable on light backgrounds (guest portal, checkout, etc.) */
.pro-card .pro-btn.secondary{
  background: rgba(17,24,39,.06);
  border-color: rgba(17,24,39,.14);
  color: rgba(17,24,39,.92);
}
.pro-card a{ color: rgba(17,24,39,.92); }
.pro-card a:hover{ opacity:1; text-decoration: underline; }