/* ==========================================================================
   Section: Payment / Form + summary. Ported from payment-styles.css.
   Raw card-field styles dropped (replaced by Stripe Payment Element); the
   secure element + thank-you styles are appended at the end.
   ========================================================================== */

/* ---------- Layout ---------- */
.pay-layout { display: grid; grid-template-columns: minmax(0,1fr) 380px; gap: 36px; align-items: start; padding: 0 0 110px; margin-top: -24px; }

/* ---------- Form card ---------- */
.pay-card { background:#fff; border:1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 38px 40px; }
.pay-card .card-head { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom: 26px; flex-wrap: wrap; }
.pay-card .card-head h2 { font-size: 22px; }
.secure-pill { display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:500; color:var(--muted); background:var(--bg-alt); border:1px solid var(--line); border-radius:100px; padding:7px 14px; }
.secure-pill svg { width:14px; height:14px; color: var(--green); }

/* fields */
.field-row { display:grid; gap:18px; margin-bottom:18px; }
.field-row.two { grid-template-columns: 1fr 1fr; }
.field { display:flex; flex-direction:column; gap:8px; }
.field label { font-size:13px; font-weight:600; color:var(--navy); letter-spacing:0.01em; }
.field label .opt { color:var(--muted); font-weight:400; }
.input-wrap { position:relative; display:flex; align-items:center; }
.input {
	width:100%; font-family:var(--body-font); font-size:15px; color:var(--navy);
	background:#fff; border:1.5px solid var(--line); border-radius:10px; padding:13px 15px;
	transition: border-color .2s ease, box-shadow .2s ease; outline:none;
}
.input::placeholder { color:#9AA3AD; }
.input:focus { border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(24,173,231,0.12); }
.input:hover:not(:focus) { border-color:#C9D2DC; }
.amount-wrap .input { padding-left:34px; font-size:18px; font-weight:600; font-family:var(--sans); }
.amount-wrap .cur { position:absolute; left:15px; font-size:16px; font-weight:600; color:var(--muted); font-family:var(--sans); }

.stripe-note { display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--muted); margin-top:14px; }
.stripe-note svg { width:14px; height:14px; flex-shrink:0; color: var(--green); }

/* ---------- Stripe Payment Element ---------- */
.payment-element { padding: 4px 2px; min-height: 44px; }
.payment-message {
	margin-top: 12px; padding: 12px 15px; border-radius: 10px; font-size: 14px;
	background: rgba(235, 0, 27, 0.06); border: 1px solid rgba(235, 0, 27, 0.25); color: #c0392b;
}

/* ---------- Summary sidebar ---------- */
.pay-summary { position:sticky; top:96px; display:flex; flex-direction:column; gap:18px; }
.summary-card { background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow); overflow:hidden; }
.summary-card .sc-head { padding:22px 26px 18px; border-bottom:1px solid var(--line-soft); }
.summary-card .sc-head h3 { font-size:16px; }
.summary-card .sc-head p { font-size:13px; color:var(--muted); margin-top:3px; }
.sc-rows { padding:20px 26px; display:flex; flex-direction:column; gap:14px; }
.sc-row { display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:14.5px; }
.sc-row .lbl { color:var(--body); }
.sc-row .val { font-family:var(--sans); font-weight:600; color:var(--navy); font-variant-numeric: tabular-nums; }
.sc-row .lbl small { display:block; color:var(--muted); font-size:11.5px; font-weight:400; margin-top:1px; }
.sc-total { padding:18px 26px; background:var(--navy); display:flex; align-items:center; justify-content:space-between; }
.sc-total .lbl { color:rgba(255,255,255,0.7); font-size:13px; letter-spacing:0.04em; text-transform:uppercase; font-weight:600; }
.sc-total .val { font-family:var(--sans); font-weight:700; font-size:26px; color:#fff; font-variant-numeric: tabular-nums; }
.sc-total .val .grad-text { background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }

.btn-pay { width:100%; justify-content:center; font-size:16px; padding:16px; margin-top:2px; }
.btn-pay:disabled { opacity:.55; cursor:not-allowed; transform:none !important; box-shadow:none; }
.btn-pay .lock { width:16px; height:16px; }
.pay-btn-spinner { display:none; width:16px; height:16px; border:2px solid rgba(255,255,255,.5); border-top-color:#fff; border-radius:50%; animation: paySpin .7s linear infinite; }
.btn-pay.is-busy .pay-btn-spinner { display:inline-block; }
.btn-pay.is-busy .lock { display:none; }
@keyframes paySpin { to { transform: rotate(360deg); } }

/* trust list */
.trust-card { background:var(--bg-alt); border:1px solid var(--line); border-radius:var(--radius-lg); padding:22px 24px; }
.trust-card .t-item { display:flex; gap:12px; align-items:flex-start; padding:11px 0; border-top:1px solid var(--line-soft); }
.trust-card .t-item:first-child { border-top:none; padding-top:0; }
.trust-card .t-item:last-child { padding-bottom:0; }
.trust-card .t-ic { width:32px; height:32px; border-radius:9px; background:var(--grad-soft); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.trust-card .t-ic svg { width:16px; height:16px; color:var(--cyan); }
.trust-card .t-tx strong { display:block; font-family:var(--sans); font-size:14px; color:var(--navy); }
.trust-card .t-tx span { font-size:12.5px; color:var(--muted); line-height:1.5; }

.brand-row { display:flex; align-items:center; gap:10px; justify-content:center; padding-top:4px; }
.brand-row span { font-size:11.5px; color:var(--muted); }
.brand-row .stripe-logo { font-family:var(--sans); font-weight:700; font-size:14px; color:#635BFF; text-decoration:none; transition: opacity .2s ease; }
.brand-row a.stripe-logo:hover { color:#635BFF; opacity:.7; text-decoration:underline; }

/* ---------- Thank-you (revealed on success) ---------- */
.pay-thankyou {
	max-width: 620px; margin: 0 auto 90px; text-align: center;
	background:#fff; border:1px solid var(--line); border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg); padding: 56px 44px;
	animation: tyIn .6s cubic-bezier(.2,.7,.3,1) both;
}
@keyframes tyIn { from { opacity:0; transform: translateY(16px); } to { opacity:1; transform:none; } }
.ty-check {
	width: 72px; height: 72px; border-radius: 50%; margin: 0 auto 24px;
	background: var(--grad); color:#fff; display:flex; align-items:center; justify-content:center;
	box-shadow: 0 10px 28px rgba(98,207,95,0.35); animation: tyPop .5s cubic-bezier(.34,1.56,.64,1) .15s both;
}
@keyframes tyPop { from { transform: scale(.4); opacity:0; } to { transform: scale(1); opacity:1; } }
.ty-check svg { width: 36px; height: 36px; }
.pay-thankyou h2 { font-size: clamp(26px, 3vw, 36px); margin-bottom: 12px; }
.pay-thankyou p { font-size: 16.5px; color: var(--body); line-height: 1.6; max-width: 46ch; margin: 0 auto 28px; }
.ty-ref { display: inline-block; margin-top: 12px; font-size: 13.5px; color: var(--muted); }
.ty-ref code {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px;
	color: var(--navy); background: var(--bg-alt); border: 1px solid var(--line);
	padding: 3px 9px; border-radius: 7px; word-break: break-all;
}

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
	.pay-layout { grid-template-columns: 1fr; gap:24px; }
	.pay-summary { position:static; }
}
@media (max-width: 620px) {
	.pay-card { padding:28px 22px; }
	.field-row.two { grid-template-columns: 1fr; }
	.pay-thankyou { padding: 40px 26px; }
}