/* ============================================================================
   Project Payment (/project-payment/) — field-guide editorial checkout
   Wraps FluentForm #10 in the same design language as services/cart/checkout.
   ========================================================================== */
#pp-root{
	--g-deep:#154d37; --g:#1d6b4f; --g-soft:#2f8a67; --mint:#9fe0c0;
	--clay:#bd6a36; --clay-dk:#9a5125;
	--ink:#1a1c16; --ink-2:#33372c; --muted:#6a6f60; --faint:#9a9e8d;
	--bone:#f6f2e9; --paper:#fffdf8; --cream:#f3eee2; --line:#e6e0d2; --line-2:#efeadd;
	--ease:cubic-bezier(.22,.61,.36,1);
	background:var(--bone);
	color:var(--ink);
	font-family:"Hanken Grotesk",system-ui,-apple-system,sans-serif;
	display:block;
}
#pp-root *{box-sizing:border-box;}

.pp-wrap{max-width:1180px;margin:0 auto;padding:0 24px;}

/* ── Hero ─────────────────────────────────────────────────────────────── */
.pp-hero{padding:64px 0 30px;}
.pp-kicker{
	display:inline-flex;align-items:center;gap:8px;
	font-size:.72rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
	color:var(--clay);margin-bottom:16px;
}
.pp-kicker svg{width:15px;height:15px;}
.pp-title{
	font-family:"Newsreader",Georgia,serif;font-weight:600;
	font-size:clamp(32px,5vw,52px);line-height:1.04;letter-spacing:.005em;
	color:var(--g-deep);margin:0 0 14px;
}
.pp-title em{font-style:italic;color:var(--clay);}
.pp-sub{max-width:640px;font-size:1.05rem;line-height:1.65;color:var(--ink-2);}

/* ── Layout ───────────────────────────────────────────────────────────── */
.pp-body{padding:14px 0 80px;}
.pp-grid{display:grid;grid-template-columns:1fr 360px;gap:34px;align-items:start;}

.pp-form-card{
	background:var(--paper);border:1px solid var(--line);border-radius:20px;
	padding:clamp(24px,3.4vw,40px);
	box-shadow:0 30px 60px -46px rgba(26,28,22,.5);
}
.pp-form-head{margin-bottom:24px;padding-bottom:20px;border-bottom:1px solid var(--line);}
.pp-form-head h2{
	font-family:"Newsreader",Georgia,serif;font-weight:600;
	font-size:clamp(22px,2.6vw,30px);color:var(--ink);margin:0 0 6px;
}
.pp-form-head p{font-size:.95rem;color:var(--muted);margin:0;}

/* ── Aside (trust / steps) ───────────────────────────────────────────── */
.pp-aside{position:sticky;top:96px;display:flex;flex-direction:column;gap:18px;}
.pp-card{
	background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:24px;
}
.pp-card.pp-card-dark{
	background:linear-gradient(160deg,var(--g-deep),var(--g));
	border-color:transparent;color:#f3f7f3;
}
.pp-card-dark .pp-card-title{color:#fff;}
.pp-card-title{
	font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
	color:var(--g);margin:0 0 16px;
}
.pp-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px;}
.pp-step{display:flex;gap:13px;align-items:flex-start;}
.pp-step-n{
	flex:0 0 auto;width:26px;height:26px;border-radius:50%;
	background:rgba(255,255,255,.16);color:#fff;
	display:flex;align-items:center;justify-content:center;
	font-size:.8rem;font-weight:800;
}
.pp-step-t{font-size:.92rem;line-height:1.5;color:#eaf2ec;}
.pp-step-t b{color:#fff;font-weight:700;display:block;margin-bottom:1px;}

.pp-trust{display:flex;flex-direction:column;gap:14px;}
.pp-trust-row{display:flex;gap:12px;align-items:flex-start;}
.pp-trust-row svg{width:20px;height:20px;flex:0 0 auto;color:var(--g);margin-top:1px;}
.pp-trust-row p{margin:0;font-size:.9rem;line-height:1.5;color:var(--ink-2);}
.pp-trust-row p b{color:var(--ink);font-weight:700;}

.pp-pay-badges{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:6px;}
.pp-pay-badges span{
	font-size:.72rem;font-weight:700;color:var(--muted);
	display:inline-flex;align-items:center;gap:6px;
}
.pp-pay-badges svg{width:16px;height:16px;color:var(--g-soft);}

/* ── Invoice banner (when paying via an admin invoice link) ──────────── */
.pp-invoice-banner{
	background:linear-gradient(160deg,#f3eee2,#fffdf8);
	border:1px solid var(--line);border-radius:16px;padding:20px 22px;margin-bottom:26px;
}
.pp-invoice-banner-head{display:flex;justify-content:space-between;align-items:center;gap:14px;margin-bottom:14px;padding-bottom:14px;border-bottom:1px dashed var(--line);}
.pp-invoice-tag{font-size:.72rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--clay);}
.pp-invoice-amt{font-family:"Newsreader",Georgia,serif;font-size:1.6rem;font-weight:600;color:var(--g-deep);}
.pp-invoice-items{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;}
.pp-invoice-items li{display:flex;justify-content:space-between;gap:14px;font-size:.92rem;color:var(--ink-2);}
.pp-invoice-items li span:last-child{font-weight:700;color:var(--g-deep);white-space:nowrap;}
.pp-invoice-items em{font-style:normal;color:var(--muted);font-size:.85rem;}
.pp-invoice-note{margin:14px 0 0;font-size:.9rem;color:var(--muted);}
.pp-invoice-note b{color:var(--g-deep);}
.pp-terms{
	display:flex;align-items:flex-start;gap:10px;margin-top:18px;
	font-size:.9rem;line-height:1.5;color:var(--ink-2);cursor:pointer;
}
.pp-terms input{width:19px;height:19px;margin-top:1px;flex:none;accent-color:var(--g-deep);cursor:pointer;}
.pp-terms a{color:var(--g);font-weight:700;text-decoration:underline;text-underline-offset:2px;}
.pp-terms a:hover{color:var(--g-deep);}
.pp-pay-btn{
	display:inline-flex;align-items:center;justify-content:center;gap:11px;width:100%;
	margin-top:16px;padding:17px 26px;border-radius:13px;
	background:var(--g-deep);color:#fff;text-decoration:none;
	font-family:"Hanken Grotesk",sans-serif;font-weight:800;font-size:1.08rem;letter-spacing:.01em;
	box-shadow:0 16px 34px -16px rgba(21,77,55,.85);
	transition:background .18s var(--ease),transform .18s var(--ease),box-shadow .18s var(--ease);
}
.pp-pay-btn:hover{background:var(--g);transform:translateY(-1px);box-shadow:0 22px 42px -16px rgba(21,77,55,.9);}
.pp-pay-btn svg{width:20px;height:20px;}
.pp-pay-sub{margin:12px 0 0;text-align:center;font-size:.78rem;color:var(--faint);}
.pp-paid-note{margin-top:22px;padding:16px 18px;border-radius:12px;background:#e7f3ec;border:1px solid #bfe0cd;color:var(--g-deep);font-weight:600;}
.pp-paid-note a{color:var(--g);font-weight:800;}

/* Inline Stripe Payment Element */
.pp-pay-inline{margin-top:22px;}
.pp-pay-element{min-height:60px;margin-bottom:20px;}
.pp-pay-loading{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:.92rem;padding:18px 0;}
.pp-pay-spinner{width:18px;height:18px;border-radius:50%;border:2px solid var(--line);border-top-color:var(--g);animation:pp-spin .8s linear infinite;display:inline-block;}
@keyframes pp-spin{to{transform:rotate(360deg);}}
.pp-pay-btn[disabled]{opacity:.55;cursor:not-allowed;}
.pp-pay-btn.is-loading{opacity:.7;cursor:wait;}
.pp-pay-error{margin:12px 0 0;color:var(--clay-dk);font-size:.88rem;font-weight:600;min-height:1em;}

/* ── FluentForm #10 restyle (scoped) ─────────────────────────────────── */
#pp-root .fluentform .ff-el-group{margin-bottom:18px;}
#pp-root .fluentform .ff-el-input--label label,
#pp-root .fluentform .ff-el-group-label{
	font-family:"Hanken Grotesk",sans-serif;font-weight:700;font-size:.85rem;
	color:var(--ink-2);margin-bottom:7px;letter-spacing:.01em;
}
#pp-root .fluentform .ff-el-is-required > label::after{color:var(--clay);}

#pp-root .fluentform input[type=text],
#pp-root .fluentform input[type=email],
#pp-root .fluentform input[type=tel],
#pp-root .fluentform input[type=number],
#pp-root .fluentform input[type=url],
#pp-root .fluentform select,
#pp-root .fluentform textarea,
#pp-root .fluentform .ff-el-form-control{
	width:100%;background:var(--paper);
	border:1.5px solid var(--line);border-radius:11px;
	padding:12px 14px;font-size:.97rem;font-family:inherit;color:var(--ink);
	line-height:1.4;transition:border-color .18s var(--ease),box-shadow .18s var(--ease),background .18s var(--ease);
	box-shadow:none;outline:none;
}
#pp-root .fluentform textarea{min-height:120px;resize:vertical;}
#pp-root .fluentform input:focus,
#pp-root .fluentform select:focus,
#pp-root .fluentform textarea:focus,
#pp-root .fluentform .ff-el-form-control:focus{
	border-color:var(--g);background:#fff;
	box-shadow:0 0 0 4px rgba(29,107,79,.12);
}
#pp-root .fluentform input::placeholder,
#pp-root .fluentform textarea::placeholder{color:var(--faint);}

/* multi-column rows keep the field-guide rhythm */
#pp-root .fluentform .ff-el-input--content{margin:0;}
#pp-root .fluentform .ff-t-cell{padding-left:7px;padding-right:7px;}

/* Payment components / totals */
#pp-root .fluentform .ff-el-group.ff_list_buttons label,
#pp-root .fluentform .ff-el-payment-method label,
#pp-root .fluentform .ff_payment_summary,
#pp-root .fluentform .ff-payment-summary-component{
	border-radius:12px;
}
#pp-root .fluentform .ff_payment_summary,
#pp-root .fluentform .ff-payment-summary-component,
#pp-root .fluentform table.ff_payment_summary{
	background:var(--cream);border:1px solid var(--line-2);border-radius:14px;overflow:hidden;
}
#pp-root .fluentform .ff_payment_summary th,
#pp-root .fluentform .ff_payment_summary td{color:var(--ink-2);}
#pp-root .fluentform .ff-item-total,
#pp-root .fluentform .ff_payment_total{color:var(--g-deep);font-weight:800;}

/* radio / checkbox accents */
#pp-root .fluentform input[type=radio],
#pp-root .fluentform input[type=checkbox]{accent-color:var(--g);width:17px;height:17px;}
#pp-root .fluentform .ff-el-form-check label{color:var(--ink-2);font-weight:500;font-size:.92rem;}

/* Submit button */
#pp-root .fluentform .ff-btn-submit,
#pp-root .fluentform button.ff-btn,
#pp-root .fluentform .ff_btn_style{
	background:var(--g-deep)!important;color:#fff!important;border:0!important;
	font-family:"Hanken Grotesk",sans-serif!important;font-weight:800!important;font-size:1rem!important;
	padding:14px 30px!important;border-radius:12px!important;cursor:pointer;
	letter-spacing:.01em;box-shadow:0 14px 30px -16px rgba(21,77,55,.85);
	transition:background .18s var(--ease),transform .18s var(--ease),box-shadow .18s var(--ease);
}
#pp-root .fluentform .ff-btn-submit:hover,
#pp-root .fluentform button.ff-btn:hover,
#pp-root .fluentform .ff_btn_style:hover{
	background:var(--g)!important;transform:translateY(-1px);
	box-shadow:0 18px 36px -16px rgba(21,77,55,.9);
}

/* validation + messages */
#pp-root .fluentform .error,
#pp-root .fluentform .text-danger,
#pp-root .fluentform .ff-el-is-error .text-danger{color:var(--clay-dk);font-size:.82rem;}
#pp-root .fluentform .ff-el-is-error input,
#pp-root .fluentform .ff-el-is-error textarea,
#pp-root .fluentform .ff-el-is-error select{border-color:var(--clay)!important;}
#pp-root .ff-message-success,
#pp-root .fluentform_success,
#pp-root .ff_submit_success{
	background:#e7f3ec;border:1px solid #bfe0cd;color:var(--g-deep);
	border-radius:14px;padding:22px 24px;font-size:1rem;line-height:1.6;
}

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width:920px){
	.pp-grid{grid-template-columns:1fr;}
	.pp-aside{position:static;flex-direction:row;flex-wrap:wrap;}
	.pp-aside > .pp-card{flex:1 1 280px;}
}
@media (max-width:560px){
	.pp-hero{padding:44px 0 22px;}
	.pp-wrap{padding:0 16px;}
	.pp-aside{flex-direction:column;}
}