/* Payment information only: shared site typography, compact cards and native disclosures. */
body.page-template-page-payment-methods,
body.page-template-page-payment-methods #content.site-content { background: #f0f9e8; }
body.page-template-page-payment-methods #content.site-content { padding: 30px 0; }
body.page-template-page-payment-methods #content > .container { width: 100%; max-width: none; padding-left: 0; padding-right: 0; }
body.page-template-page-payment-methods #content > .container > .row { margin: 0; }
.tt-payment-page { --tt-pay-gap: 30px; width: 100%; color: #333; font: 15px/1.65 Poppins, sans-serif; }
.tt-payment-page * { box-sizing: border-box; }
.tt-payment-page-inner { max-width: 1040px; margin: 0 auto; padding: 0 24px; }
.tt-payment-page h1, .tt-payment-page h2, .tt-payment-page h3 { font-family: Poppins, sans-serif; color: #344d1e; font-weight: 600; text-transform: none; }
.tt-payment-page h1 { font-size: clamp(27px, 3.5vw, 38px); line-height: 1.25; margin: 0 0 12px; }
.tt-payment-page h2 { font-size: 21px; line-height: 1.4; margin: 0 0 14px; }
.tt-payment-page h3 { font-size: 15px; line-height: 1.5; margin: 0 0 4px; }
.tt-payment-page p { margin: 0; }
.tt-payment-hero { text-align: center; padding-top: 4px; margin-bottom: 16px; }
.tt-payment-page .tt-payment-eyebrow { color: #555; font-size: 12px; font-weight: 500; margin-bottom: 8px; }
.tt-payment-page .tt-payment-intro { max-width: 700px; margin: 0 auto; color: #444; }
.tt-payment-page .tt-payment-actions { display: flex; justify-content: center; margin: 0 0 var(--tt-pay-gap); }
/* Match the established .sp-cta-button style on destination pages. */
.tt-payment-page .tt-payment-primary { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 48px; padding: 16px 48px; border: none; border-radius: 30px; background: #ff7a00; color: #fff; font-size: 16px; line-height: 1.6; font-weight: 700; text-decoration: none; cursor: pointer; box-shadow: 0 4px 16px rgba(255,122,0,.2); transition: background .2s, box-shadow .2s, transform .2s; }
.tt-payment-page .tt-payment-primary:hover { background: #ff6600; color: #fff; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(255,122,0,.35); text-decoration: none; }
.tt-payment-page .tt-payment-primary:focus-visible { border-radius: 30px; }
.tt-payment-page .tt-payment-card-section { background: #f8fdf5; border: 1px solid #d7e5cc; border-radius: 16px; padding: 24px; box-shadow: 0 4px 12px rgba(0,0,0,.06); margin-bottom: var(--tt-pay-gap); }
.tt-payment-page .tt-payment-help { margin-bottom: 0; }
.tt-payment-page .tt-payment-methods { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; }
.tt-payment-page .tt-payment-method-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 10px; margin-bottom: 10px; min-height: 40px; }
.tt-payment-page .tt-payment-method-heading h2 { font-size: 17px; margin: 0; }
.tt-payment-page .tt-payment-brand-row { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; }
.tt-payment-page .tt-payment-brand-row img { display: block; width: 36px; height: 36px; object-fit: contain; }
.tt-payment-page .tt-payment-brand-row img[alt="Bancontact"] { width: 60px; }
.tt-payment-page .tt-payment-method p { font-size: 14px; }
.tt-payment-page .tt-payment-how { margin-top: 22px; padding-top: 20px; border-top: 1px solid #d7e5cc; }
.tt-payment-page .tt-payment-steps { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; list-style: none; counter-reset: tt-pay-step; margin: 0; padding: 0; }
.tt-payment-page .tt-payment-steps li { counter-increment: tt-pay-step; display: grid; grid-template-columns: 28px 1fr; gap: 0 10px; align-content: start; margin: 0; padding: 0; }
.tt-payment-page .tt-payment-steps li::before { content: counter(tt-pay-step); display: flex; align-items: center; justify-content: center; grid-row: 1 / 3; width: 28px; height: 28px; border-radius: 50%; background: #fbb03b; color: #222; font-size: 14px; font-weight: 600; }
.tt-payment-page .tt-payment-steps p { font-size: 13px; grid-column: 2; }
.tt-payment-page .tt-payment-note { margin-top: 20px; padding-top: 14px; border-top: 1px solid #d7e5cc; font-size: 12px; color: #555; }
.tt-payment-page a { color: #0066cc; text-decoration: underline; text-underline-offset: 3px; }
.tt-payment-page a:focus-visible, .tt-payment-page summary:focus-visible { outline: 2px solid #007cba; outline-offset: 3px; border-radius: 4px; }
.tt-payment-page details { border-top: 1px solid #d7e5cc; padding: 0; }
.tt-payment-page summary { cursor: pointer; min-height: 48px; padding: 13px 24px 13px 0; font-weight: 500; line-height: 1.5; list-style: none; position: relative; }
.tt-payment-page summary::-webkit-details-marker { display: none; }
.tt-payment-page summary::after { content: '+'; position: absolute; top: 8px; right: 0; color: #344d1e; font-size: 22px; }
.tt-payment-page details[open] summary::after { content: '−'; }
.tt-payment-page details > p { padding: 0 16px 14px 0; font-size: 14px; }
@media(max-width: 768px) {
 body.page-template-page-payment-methods #content.site-content { padding: 25px 0; }
 .tt-payment-page { --tt-pay-gap: 25px; }
 .tt-payment-page .tt-payment-methods, .tt-payment-page .tt-payment-steps { gap: 18px; }
}
@media(max-width: 700px) {
 .tt-payment-page-inner { padding: 0 15px; }
 .tt-payment-page .tt-payment-card-section { padding: 20px; }
 .tt-payment-page .tt-payment-methods, .tt-payment-page .tt-payment-steps { grid-template-columns: 1fr; }
 .tt-payment-page .tt-payment-methods { gap: 14px; }
 .tt-payment-page .tt-payment-method + .tt-payment-method { border-top: 1px solid #d7e5cc; padding-top: 14px; }
 .tt-payment-page .tt-payment-method-heading { margin-bottom: 4px; }
 .tt-payment-page .tt-payment-steps { gap: 14px; }
 .tt-payment-page .tt-payment-brand-row img { width: 32px; height: 32px; }
 .tt-payment-page .tt-payment-brand-row img[alt="Bancontact"] { width: 58px; }
}
@media(max-width: 480px) {
 body.page-template-page-payment-methods #content.site-content { padding: 20px 0; }
 .tt-payment-page { --tt-pay-gap: 20px; font-size: 14px; }
 .tt-payment-page .tt-payment-primary { width: 100%; padding: 14px 24px; }
 .tt-payment-page h2 { font-size: 19px; }
}

@media(prefers-reduced-motion: reduce) { .tt-payment-page .tt-payment-primary { transition: none; } .tt-payment-page .tt-payment-primary:hover { transform: none; } }