/* SHARED HEADER / FOOTER STYLES
 * Edit the colours here, then the HEADER and FOOTER sections below.
 * Loaded by all pages through app/bootstrap.php. No build step required.
 */
:root{--layout-blue:#0b63c8;--layout-navy:#0a2648;--layout-white:#fff}
*{box-sizing:border-box}
body{margin:0;font-family:Arial,Helvetica,sans-serif}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font:inherit}
/* HEADER: desktop, mobile, and payment progress */

.payment-header{background:var(--layout-white);border-bottom:2px solid #cce2fb;color:#102f50}
.payment-header-inner{width:min(calc(100% - 48px),1112px);margin:0 auto}
.payment-utility{background:var(--layout-navy);color:var(--layout-white);font-size:12px}
.payment-utility .payment-header-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:40px}
.payment-back{display:inline-flex;align-items:center;gap:9px;text-decoration:none}
.payment-back svg{width:18px;height:18px;flex:none}
.payment-utility-help{display:inline-flex;align-items:center;gap:5px;text-decoration:none}
.payment-utility-help strong{font-size:14px}
.payment-brand-row{min-height:104px;display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:20px;padding-bottom:20px}
.payment-brand{display:flex;align-items:center;gap:28px;min-width:0}
.payment-logo{display:block;flex:none;line-height:0}
.payment-logo img{display:block;width:225px;max-width:100%;height:auto}
.payment-header-label{border-left:1px solid #cbd7e3;padding:9px 0 9px 28px;font-size:19px;color:#425770}
.payment-header-contact{display:flex;align-items:center;gap:13px;text-decoration:none;flex-shrink:0}
.payment-phone-icon{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#eaf3fe;color:var(--layout-blue)}
.payment-phone-icon svg{width:22px;height:22px}
.payment-contact-copy{display:flex;flex-direction:column;font-size:12px;color:#425770;line-height:1.5}
.payment-contact-copy strong{font-size:21px;color:var(--layout-blue);white-space:nowrap}
.payment-mobile-help,.payment-mobile-subrow{display:none}
.payment-header a:focus-visible{outline:3px solid #f5a623;outline-offset:5px;border-radius:3px}
.payment-header a:hover{text-decoration:underline;text-underline-offset:3px}
.payment-steps{list-style:none;display:flex;align-items:flex-start;margin:0 0 34px;padding:0;gap:0;max-width:780px}
.payment-steps li{display:flex;align-items:center;flex:1;gap:10px;color:#748398;font-size:13px;white-space:nowrap}
.payment-steps li:not(:last-child)::after{content:"";height:1px;background:#cbd7e3;flex:1;margin:0 16px 0 6px}
.payment-steps li:last-child{flex:0 0 auto}
.payment-step-number{width:32px;height:32px;display:grid;place-items:center;border:1px solid #b9c8d8;border-radius:50%;font-size:14px;font-weight:700;flex-shrink:0}
.payment-steps [aria-current="step"]{color:var(--layout-blue);font-weight:700}
.payment-steps [aria-current="step"] .payment-step-number{background:var(--layout-blue);border-color:var(--layout-blue);color:var(--layout-white)}
@media(max-width:700px){
 .payment-header-inner{width:calc(100% - 32px)}
 .payment-utility,.payment-header-label,.payment-contact-copy{display:none}
 .payment-brand-row{min-height:80px;padding-top:16px;padding-bottom:16px;gap:14px}
 .payment-logo img{width:185px}
 .payment-header-contact{gap:7px;min-height:40px;border:1px solid var(--layout-blue);border-radius:24px;padding:8px 13px;color:var(--layout-blue);font-size:13px;font-weight:700}
 .payment-phone-icon{background:none;width:17px;height:17px}
 .payment-phone-icon svg{width:17px;height:17px}
 .payment-mobile-help{display:inline}
 .payment-mobile-subrow{display:block;padding:0 0 14px;font-size:12px}
 .payment-mobile-subrow .payment-header-inner{display:flex;align-items:center;gap:18px}
 .payment-mobile-subrow .payment-back{border-left:1px solid #cbd7e3;padding-left:18px;color:var(--layout-blue);gap:6px}
 .payment-mobile-subrow svg{width:15px;height:15px}
 .payment-steps{margin-bottom:26px;justify-content:space-between}
 .payment-steps li{flex:1!important;flex-direction:column;text-align:center;white-space:normal;font-size:11px;gap:7px;position:relative}
 .payment-steps li:not(:last-child)::after{position:absolute;left:calc(50% + 23px);right:calc(-50% + 23px);top:15px;margin:0}
 .payment-step-number{width:30px;height:30px;font-size:13px}
 .payment-step-label{max-width:95px;line-height:1.4}
}
@media(max-width:360px){.payment-logo img{width:160px}.payment-header-contact{padding:8px 10px}.payment-mobile-subrow .payment-header-inner{gap:12px}.payment-mobile-subrow .payment-back{padding-left:12px}}


/* FOOTER: desktop */

.payment-footer{background:var(--layout-navy);border-top:3px solid #278ce9;color:var(--layout-white)}
.payment-footer-inner{width:min(calc(100% - 48px),1112px);margin:auto;padding:38px 0 18px}
.payment-footer-grid{display:grid;grid-template-columns:1.1fr 1.2fr .8fr;gap:32px;align-items:start}
.payment-footer-brand img{width:230px;height:auto;max-width:100%;margin-bottom:22px}
.payment-footer-heading,.payment-footer h2{font-size:14px;font-weight:700;margin:0 0 14px;line-height:1.5}
.payment-footer-brand address{font-style:normal;font-size:13px;line-height:1.8;color:#ceddeb}
.payment-footer-contact,.payment-footer-links{border-left:1px solid #385571;padding-left:32px;min-width:0}
.payment-footer-contact>a{display:flex;align-items:center;gap:12px;margin-top:14px;font-size:17px;font-weight:700;overflow-wrap:anywhere}
.payment-footer-contact svg{width:23px;height:23px;flex:none}
.payment-footer-links a{display:block;width:fit-content;font-size:13px;margin-bottom:10px;text-decoration:underline;text-underline-offset:4px;color:#deebf7}
.payment-footer-links a span{margin-left:6px}
.payment-footer a:hover{color:#9ed3ff}.payment-footer a:focus-visible{outline:3px solid #ffd400;outline-offset:5px;border-radius:2px}
.payment-footer-bottom{display:flex;justify-content:space-between;gap:16px;border-top:1px solid #385571;margin-top:32px;padding-top:18px;color:#b5cce2;font-size:11px}
.payment-footer-bottom small{font-size:inherit}

/* FOOTER: tablet and mobile */
@media(max-width:820px){.payment-footer-grid{grid-template-columns:1fr 1fr;gap:26px}.payment-footer-links{grid-column:1/-1;border-left:0;border-top:1px solid #385571;padding:22px 0 0;display:flex;gap:12px 24px;flex-wrap:wrap}.payment-footer-links h2{display:none}.payment-footer-contact{padding-left:24px}.payment-footer-contact>a{font-size:15px}}
@media(max-width:600px){
 .payment-footer-inner{width:calc(100% - 40px);padding:30px 0 22px}.payment-footer-grid{grid-template-columns:1fr;gap:22px}
 .payment-footer-brand img{width:215px;margin-bottom:18px}.payment-footer-brand address{font-size:12px}.payment-footer-heading{margin-bottom:6px}
 .payment-footer-contact{border-left:0;padding-left:0}.payment-footer-contact h2{font-size:13px;margin-bottom:8px}.payment-footer-contact>a{font-size:15px;margin-top:10px}
 .payment-footer-links{padding-top:20px;gap:12px 22px}.payment-footer-links a{font-size:12px;margin-bottom:0}.payment-footer-links a:last-child{flex-basis:100%}
 .payment-footer-bottom{flex-direction:column;gap:8px;margin-top:24px;font-size:10px}

}