/* Secure invoice payment page */
.invoice-payment-page { --payment-ink:#112f49; --payment-muted:#64798b; --payment-blue:#1769c2; --payment-line:#dce6ed; }
.payment-hero { position:relative; overflow:hidden; color:#fff; background:radial-gradient(ellipse at 79% 43%,rgba(41,125,177,.36),transparent 38%),linear-gradient(120deg,#071b2e 0%,#0b2942 52%,#0d3856 100%); }
.payment-hero::after { position:absolute; inset:0; content:""; pointer-events:none; opacity:.12; background-image:linear-gradient(rgba(255,255,255,.14) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.14) 1px,transparent 1px); background-size:58px 58px; mask-image:linear-gradient(90deg,transparent,#000 56%,#000); }
.payment-hero-inner { position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1fr) minmax(390px,.9fr); align-items:center; gap:clamp(40px,7vw,100px); min-height:490px; padding-top:46px; padding-bottom:54px; }
.payment-hero-copy { max-width:620px; }
.payment-breadcrumbs { display:flex; gap:10px; align-items:center; margin-bottom:27px; color:#a8bdcc; font-size:13px; }
.payment-breadcrumbs a { color:#fff; }
.payment-breadcrumbs a:hover { color:#ff9a22; }
.payment-eyebrow,.payment-step-label { display:flex; align-items:center; gap:10px; color:#7fc4df; font-size:12px; font-weight:750; letter-spacing:.13em; text-transform:uppercase; }
.payment-eyebrow span { width:8px; height:8px; border-radius:50%; background:#ff9a22; box-shadow:0 0 0 5px #ff9a222b; }
.payment-hero h1 { margin:19px 0 19px; color:#fff; font-size:clamp(48px,5.3vw,72px); line-height:1.02; letter-spacing:-.06em; }
.payment-hero h1 em,.payment-section-intro h2 em,.payment-faq-grid h2 em { color:#76b9e6; font-style:normal; }
.payment-hero-copy>p { max-width:555px; margin:0; color:#c3d3df; font-size:18px; line-height:1.75; }
.payment-hero-trust { display:flex; gap:13px; align-items:center; max-width:510px; margin-top:31px; padding-top:21px; border-top:1px solid #ffffff25; }
.payment-lock { display:grid; place-items:center; flex:0 0 40px; width:40px; height:40px; border:1px solid #ffffff35; border-radius:50%; color:#8cd4bc; }
.payment-lock svg { width:19px; height:19px; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.payment-hero-trust span:last-child { display:flex; flex-direction:column; gap:3px; }
.payment-hero-trust b { color:#fff; font-size:13px; }
.payment-hero-trust small { color:#a9c0d0; font-size:12px; }
.payment-hero-art { position:relative; display:grid; place-items:center; min-height:340px; isolation:isolate; }
.payment-orbit { position:absolute; left:50%; top:50%; width:min(95%,360px); aspect-ratio:1; border:1px solid #66b3db38; border-radius:50%; transform:translate(-50%,-50%); }
.payment-orbit::after { position:absolute; top:16%; right:13%; width:8px; height:8px; border-radius:50%; background:#ff9a22; box-shadow:0 0 17px #ff9a22; content:""; }
.payment-orbit-a { animation:payment-orbit-spin 28s linear infinite; }
.payment-orbit-b { width:min(76%,285px); border-style:dashed; border-color:#7ec5df35; animation:payment-orbit-spin 38s linear infinite reverse; }
.payment-orbit-b::after { top:auto; right:auto; bottom:16%; left:12%; width:6px; height:6px; background:#76b9e6; box-shadow:0 0 15px #76b9e6; }
.payment-art-core { position:relative; z-index:1; display:grid; place-items:center; width:142px; height:142px; border:1px solid #ffffff28; border-radius:37px; color:#fff; background:linear-gradient(145deg,#1a5780,#103755); box-shadow:0 26px 60px #03172780,inset 0 1px #ffffff28; transform:rotate(-8deg); animation:payment-core-float 6s ease-in-out infinite; }
.payment-art-core>span { display:grid; place-items:center; width:68px; height:68px; border-radius:22px; color:#0c3552; background:#ff9a22; font-size:43px; font-weight:800; box-shadow:0 12px 30px #ff9a2244; }
.payment-art-core i { position:absolute; right:-16px; width:20px; height:2px; background:#82c6e1; box-shadow:0 8px #82c6e155,0 -8px #82c6e155; }
.payment-art-core i:nth-of-type(1) { top:31px; }.payment-art-core i:nth-of-type(2) { top:69px; right:-23px; width:27px; }.payment-art-core i:nth-of-type(3) { bottom:31px; }
.payment-art-chip { position:absolute; z-index:2; display:grid; grid-template-columns:34px 1fr; column-gap:10px; align-items:center; width:212px; padding:13px 14px; border:1px solid #ffffff2c; border-radius:10px; background:#0a2944eF; box-shadow:0 14px 35px #03172745; animation:payment-chip-arrive .8s both; }
.payment-art-chip>span { grid-row:span 2; display:grid; place-items:center; width:32px; height:32px; border:1px solid #66c4a044; border-radius:9px; color:#84d3b5; background:#56bb8d19; font-size:10px; font-weight:800; }
.payment-art-chip b { color:#fff; font-size:12px; }.payment-art-chip small { color:#9fb7c7; font-size:10px; }
.chip-one { top:48px; left:0; animation-delay:.18s; }.chip-two { right:-2px; bottom:37px; animation-delay:.32s; }.chip-two>span { color:#90c8ef; border-color:#65a7df4a; background:#3b8bc01c; }
.payment-art-label { position:absolute; right:4px; bottom:0; display:flex; align-items:center; gap:10px; color:#82a4ba; font-size:9px; font-weight:750; letter-spacing:.16em; }
.payment-art-label i { display:block; width:31px; height:1px; background:#ff9a22; }

.payment-main-section { padding:clamp(65px,8vw,102px) 0; background:#f5f8fa; }
.payment-layout { display:grid; grid-template-columns:minmax(0,1.45fr) minmax(280px,.72fr); align-items:start; gap:clamp(40px,7vw,92px); }
.payment-section-intro { max-width:680px; margin-bottom:31px; }
.payment-step-label { color:#3276aa; font-size:11px; letter-spacing:.12em; }
.payment-step-label>span { display:grid; place-items:center; width:27px; height:27px; border:1px solid #cfe0eb; border-radius:50%; color:#1769c2; background:#fff; font-size:10px; }
.payment-section-intro h2,.payment-faq-grid h2 { margin:17px 0 11px; color:#112f49; font-size:clamp(34px,4vw,48px); line-height:1.1; letter-spacing:-.05em; }
.payment-section-intro h2 em,.payment-faq-grid h2 em { color:#2879bc; }
.payment-section-intro>p { max-width:580px; margin:0; color:#63788a; font-size:16px; line-height:1.7; }
.invoice-payment-form { padding:clamp(21px,3.1vw,34px); border:1px solid #dfe7ed; border-radius:13px; background:#fff; box-shadow:0 18px 50px #173c5910; }
.payment-fields-row { display:grid; grid-template-columns:1fr 1fr; gap:19px; }
.payment-field { min-width:0; }
.payment-field label { display:block; margin-bottom:7px; color:#1b3851; font-size:14px; font-weight:700; }
.payment-field label span { color:#e17c18; }
.payment-field input,.payment-field select { display:block; width:100%; min-height:52px; padding:0 14px; border:1px solid #cad8e2; border-radius:7px; color:#18364e; background:#fff; font:inherit; font-size:15px; transition:border-color .2s,box-shadow .2s; }
.payment-field input::placeholder { color:#98a8b5; }
.payment-field input:focus,.payment-field select:focus { outline:0; border-color:#3688c3; box-shadow:0 0 0 4px #3283bd21; }
.payment-field small { display:block; margin-top:7px; color:#788b9a; font-size:12px; line-height:1.45; }
.payment-methods { min-width:0; margin:32px 0 0; padding:0; border:0; }
.payment-methods legend { width:100%; margin-bottom:15px; }
.payment-method-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.payment-method-option { position:relative; display:block; cursor:pointer; }
.payment-method-option>input { position:absolute; width:1px; height:1px; overflow:hidden; opacity:0; }
.payment-method-card { display:flex; flex-direction:column; min-height:168px; padding:16px; border:1px solid #dce5eb; border-radius:9px; background:#fff; transition:border-color .2s,background .2s,box-shadow .2s,transform .2s; }
.payment-method-option:hover .payment-method-card { border-color:#a5c6dc; transform:translateY(-2px); }
.payment-method-option>input:focus-visible+.payment-method-card { outline:3px solid #4c9de0; outline-offset:3px; }
.payment-method-option>input:checked+.payment-method-card { border-color:#1769c2; background:#f5faff; box-shadow:0 0 0 2px #1769c21c; }
.payment-method-option>input:disabled+.payment-method-card { cursor:not-allowed; opacity:.65; }
.payment-method-option.method-disabled { cursor:not-allowed; opacity:.6; }
.payment-method-option.method-disabled:hover .payment-method-card { border-color:#dce5eb; transform:none; }
.payment-method-option.method-disabled .method-fee-badge { background:#f1f5f9; border-color:#cbd5e1; color:#64748b; }
.payment-method-top { display:flex; justify-content:space-between; align-items:center; min-height:27px; margin-bottom:14px; }
.provider-wordmark { line-height:1; font-weight:800; letter-spacing:-.04em; }
.mypos-wordmark { color:#083c79; font-size:23px; }.stripe-wordmark { color:#6556c8; font-size:26px; letter-spacing:-.08em; }.klarna-wordmark { color:#111; font-size:24px; }.paypal-wordmark { color:#00457c; font-size:23px; font-style:italic; font-weight:850; letter-spacing:-.03em; }
.method-check { display:grid; place-items:center; width:20px; height:20px; border:1px solid #d2dfe8; border-radius:50%; color:transparent; font-size:12px; }
.payment-method-option>input:checked+.payment-method-card .method-check { border-color:#1769c2; color:#fff; background:#1769c2; }
.payment-method-card>b { color:#18364f; font-size:15px; }
.payment-method-card>small { max-width:260px; margin-top:3px; color:#6a7f91; font-size:12px; line-height:1.5; }
.method-fee-badge { display:inline-flex; align-items:center; align-self:flex-start; margin-top:9px; padding:3px 8px; border-radius:5px; font-size:11px; font-weight:750; line-height:1.3; }
.method-fee-badge.fee-free { color:#166534; background:#f0fdf4; border:1px solid #bbf7d0; }
.method-fee-badge.fee-surcharge { color:#9a3412; background:#fff7ed; border:1px solid #fed7aa; }
.payment-method-foot { display:flex; justify-content:space-between; align-items:center; margin-top:auto; padding-top:13px; border-top:1px solid #e8eef2; color:#59768d; font-size:11px; font-weight:650; }
.payment-method-foot i { color:#327bb5; font-size:16px; font-style:normal; }
.payment-breakdown { margin-top:24px; padding:19px 22px; border:1px solid #dce6ed; border-radius:10px; background:#f8fafc; box-shadow:0 6px 20px rgba(11,41,66,.04); }
.payment-breakdown[hidden] { display:none !important; }
.breakdown-header { display:flex; align-items:center; gap:8px; padding-bottom:10px; border-bottom:1px solid #e2e8f0; color:#112f49; font-size:13px; font-weight:750; }
.breakdown-icon { font-size:15px; }
.breakdown-body { display:flex; flex-direction:column; gap:8px; padding-top:11px; }
.breakdown-line { display:flex; justify-content:space-between; align-items:center; color:#536f82; font-size:13px; }
.breakdown-line strong { color:#112f49; font-size:14px; font-weight:700; }
.breakdown-line-fee strong { color:#c2410c; }
.breakdown-line-fee.fee-is-free strong { color:#166534; }
.breakdown-line-total { margin-top:4px; padding-top:10px; border-top:1px dashed #cbd5e1; color:#0f172a; font-size:14px; font-weight:750; }
.breakdown-line-total strong { color:#1769c2; font-size:19px; font-weight:800; font-family:var(--display, inherit); }
.breakdown-hint { margin:11px 0 0; color:#64748b; font-size:11px; line-height:1.55; }
.payment-method-note { margin:14px 0 0; color:#687d8e; font-size:12px; line-height:1.65; }
.payment-submit-row { display:flex; align-items:center; gap:16px; margin-top:27px; }
.payment-submit { min-height:54px; padding:0 18px; gap:24px; border:0; cursor:pointer; font-family:inherit; font-size:14px; }
.payment-submit:disabled { cursor:wait; opacity:.72; transform:none; }
.payment-submit-row>p { max-width:230px; margin:0; color:#778a99; font-size:11px; line-height:1.5; }
.payment-status { margin:18px 0 0; padding:14px 16px; border:1px solid #ead4ae; border-radius:7px; color:#6a4b1b; background:#fffaf0; font-size:14px; line-height:1.6; }
.payment-status[data-state="error"] { border-color:#edcaca; color:#812e2e; background:#fff7f6; }
.payment-status[data-state="success"] { border-color:#b9dfcf; color:#1f6246; background:#f2fbf6; }
.payment-status[hidden] { display:none; }

.payment-status-modal-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 10px;
  padding: 5px 12px;
  border: 1px solid #24795c;
  border-radius: 5px;
  background: #ffffff;
  color: #1f6246;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
}
.payment-status-modal-link:hover {
  background: #1f6246;
  color: #ffffff;
}

/* Modal & Interactive Confirmation */
dialog.payment-modal {
  border: none;
  padding: 0;
  background: transparent;
  max-width: 520px;
  width: calc(100% - 32px);
  margin: auto;
  border-radius: 14px;
  box-shadow: 0 24px 60px -10px rgba(7, 27, 46, 0.45);
  overscroll-behavior: contain;
}

dialog.payment-modal::backdrop {
  overflow: hidden;
  overscroll-behavior: contain;
  background: rgba(7, 27, 46, 0.72);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.payment-modal-card {
  background: #ffffff;
  border: 1px solid #dce6ed;
  border-radius: 14px;
  padding: clamp(20px, 3.5vw, 30px);
  color: #112f49;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.payment-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.payment-modal-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 750;
  color: #166534;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  padding: 4px 10px;
  border-radius: 999px;
  letter-spacing: 0.03em;
}

.modal-close-icon {
  background: transparent;
  border: 0;
  font-size: 16px;
  color: #64798b;
  cursor: pointer;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  transition: color 0.15s, background 0.15s;
}

.modal-close-icon:hover {
  color: #0b2942;
  background: #f1f5f9;
}

.payment-modal-body h3 {
  margin: 0 0 6px;
  font-size: clamp(20px, 2.5vw, 24px);
  color: #0b2942;
  letter-spacing: -0.03em;
}

.modal-intro {
  margin: 0 0 16px;
  font-size: 13px;
  color: #64748b;
  line-height: 1.5;
}

.modal-summary {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  font-size: 13px;
}

.modal-summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.modal-summary-label {
  color: #64748b;
  font-size: 12px;
}

.modal-summary-val {
  color: #112f49;
  font-weight: 650;
  text-align: right;
}

.modal-summary-divider {
  height: 1px;
  background: #e2e8f0;
  margin: 4px 0;
}

.modal-fee-row .modal-summary-val {
  color: #047857;
}

.modal-fee-row.fee-surcharge .modal-summary-val {
  color: #c2410c;
}

.modal-total-row {
  padding-top: 6px;
}

.modal-total-row .modal-summary-label {
  color: #0b2942;
  font-weight: 700;
  font-size: 14px;
}

.modal-total-val {
  color: #ff6b35 !important;
  font-size: 23px;
  font-weight: 800;
}

.modal-security-text {
  margin: 0;
  font-size: 11px;
  color: #64748b;
  line-height: 1.55;
  background: #f1f7fa;
  border-left: 3px solid #1769c2;
  padding: 8px 12px;
  border-radius: 0 6px 6px 0;
}

.payment-modal-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
}

.modal-btn-pay {
  width: 100%;
  min-height: 52px;
  justify-content: center;
  font-size: 14px;
  font-weight: 750;
  border: 0;
  cursor: pointer;
}

.modal-btn-modify {
  width: 100%;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 600;
  color: #64748b;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
}

.modal-btn-modify:hover {
  background: #f8fafc;
  color: #0b2942;
  border-color: #94a3b8;
}

.payment-aside { padding-top:8px; }
.payment-aside-card { padding:24px 22px 20px; border:1px solid #dce6ec; border-radius:11px; background:#fff; box-shadow:0 14px 40px #173c590b; }
.payment-aside-heading { display:flex; align-items:center; gap:11px; padding-bottom:17px; border-bottom:1px solid #e5edf2; color:#18364f; font-size:16px; font-weight:750; }
.payment-aside-icon { display:grid; place-items:center; width:31px; height:31px; border-radius:9px; color:#24795c; background:#e8f5ef; font-size:16px; }
.payment-steps { display:grid; gap:0; margin:0; padding:8px 0 0; list-style:none; }
.payment-steps li { display:grid; grid-template-columns:27px 1fr; gap:12px; padding:16px 0; border-bottom:1px solid #e9eff3; }
.payment-steps li:last-child { border-bottom:0; }
.payment-steps li>span { display:grid; place-items:center; width:26px; height:26px; border:1px solid #d5e3eb; border-radius:50%; color:#287bb8; font-size:10px; font-weight:750; }
.payment-steps li div { display:flex; flex-direction:column; gap:4px; }
.payment-steps b { color:#1b3953; font-size:13px; }.payment-steps small { color:#718594; font-size:12px; line-height:1.55; }
.payment-security-note { display:flex; gap:10px; margin-top:7px; padding:13px; border-radius:7px; background:#f2f7fa; }
.payment-security-note>span { display:grid; place-items:center; flex:0 0 23px; color:#1c7e62; }
.payment-security-note svg { width:19px; height:19px; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.payment-security-note p { margin:0; color:#536f82; font-size:11px; line-height:1.55; }
.payment-help-card { margin-top:17px; padding:19px 20px; border-radius:10px; color:#eaf4fa; background:#0b2d49; }
.payment-help-kicker { color:#83bfe0; font-size:10px; font-weight:750; letter-spacing:.13em; text-transform:uppercase; }
.payment-help-card p { margin:8px 0 13px; color:#c2d4e0; font-size:13px; line-height:1.6; }
.payment-help-card>a { display:flex; justify-content:space-between; gap:12px; padding:7px 0; color:#fff; font-size:12px; font-weight:650; }
.payment-help-card>a span { color:#ff9a22; }
.payment-privacy-note { margin:14px 0 0; color:#778a98; font-size:11px; line-height:1.6; }
.payment-privacy-note a { color:#216caa; text-decoration:underline; text-underline-offset:2px; }
.payment-faq-section { padding:clamp(65px,8vw,95px) 0; background:#fff; }
.payment-faq-grid { display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(35px,8vw,110px); }
.payment-faq-grid h2 { font-size:clamp(32px,3.7vw,45px); }
.payment-faq-list { border-top:1px solid #dfe8ee; }
.payment-faq-list details { border-bottom:1px solid #dfe8ee; }
.payment-faq-list summary { position:relative; padding:19px 34px 19px 0; color:#173550; font-size:15px; font-weight:700; cursor:pointer; list-style:none; }
.payment-faq-list summary::-webkit-details-marker { display:none; }
.payment-faq-list summary::after { position:absolute; right:3px; top:16px; color:#287bb8; content:"+"; font-size:22px; font-weight:400; }
.payment-faq-list details[open] summary::after { content:"−"; }
.payment-faq-list details p { max-width:680px; margin:-3px 0 18px; color:#687e8e; font-size:14px; line-height:1.75; }
@keyframes payment-orbit-spin { to { rotate:360deg; } }
@keyframes payment-core-float { 0%,100% { translate:0 0; } 50% { translate:0 -8px; } }
@keyframes payment-chip-arrive { from { opacity:0; translate:0 9px; } to { opacity:1; translate:0 0; } }

@media(max-width:950px) {
  .payment-hero-inner { grid-template-columns:minmax(0,1fr) minmax(300px,.8fr); gap:26px; min-height:440px; }
  .payment-hero h1 { font-size:clamp(43px,6vw,58px); }
  .payment-hero-copy>p { font-size:16px; }
  .payment-hero-art { min-height:300px; }
  .payment-art-chip { width:190px; }
  .payment-layout { grid-template-columns:minmax(0,1.3fr) minmax(255px,.75fr); gap:34px; }
}
@media(max-width:700px) {
  .payment-hero-inner { grid-template-columns:1fr; gap:2px; min-height:0; padding-top:26px; padding-bottom:30px; }
  .payment-breadcrumbs { margin-bottom:22px; }
  .payment-hero h1 { margin-top:15px; font-size:clamp(42px,11vw,56px); }
  .payment-hero-copy>p { font-size:15px; line-height:1.65; }
  .payment-hero-trust { margin-top:22px; padding-top:16px; }
  .payment-hero-art { min-height:270px; margin:0 -8px; }
  .payment-orbit { width:min(80vw,280px); }.payment-orbit-b { width:min(63vw,224px); }
  .payment-art-core { width:114px; height:114px; border-radius:30px; }.payment-art-core>span { width:55px; height:55px; border-radius:18px; font-size:34px; }
  .payment-art-chip { width:178px; padding:10px 11px; }.payment-art-chip b { font-size:11px; }.payment-art-chip small { font-size:9px; }
  .chip-one { top:22px; left:0; }.chip-two { right:0; bottom:26px; }
  .payment-art-label { right:10px; bottom:2px; font-size:8px; }
  .payment-main-section { padding:60px 0; }
  .payment-layout { grid-template-columns:1fr; gap:38px; }
  .payment-section-intro h2 { font-size:37px; }.payment-section-intro>p { font-size:15px; }
  .invoice-payment-form { padding:20px 17px; }
  .payment-fields-row { grid-template-columns:1fr; gap:17px; }
  .payment-methods { margin-top:26px; }
  .payment-method-grid { gap:9px; }
  .payment-method-card { min-height:164px; padding:13px 12px; }
  .payment-method-card>b { font-size:14px; }.payment-method-card>small { font-size:11px; }
  .payment-method-foot { font-size:10px; }
  .payment-submit-row { align-items:flex-start; flex-direction:column; gap:10px; }
  .payment-submit { width:100%; justify-content:space-between; }
  .payment-aside { padding-top:0; }
  .payment-faq-grid { grid-template-columns:1fr; gap:24px; }.payment-faq-grid h2 { font-size:36px; }
}
@media(max-width:380px) {
  .payment-method-grid { grid-template-columns:1fr; }
  .payment-method-card { min-height:145px; }
  .payment-art-chip { width:160px; }.chip-one { left:-2px; }.chip-two { right:-2px; }
}
@media(prefers-reduced-motion:reduce) {
  .payment-orbit,.payment-art-core,.payment-art-chip { animation:none!important; }
  .payment-method-card { transition:none; }
}