/* Client payment validation, loaded after the dashboard theme. */
.shell .client-test-payments { overflow: hidden; }
.shell .client-test-payments-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding-bottom: 20px; border-bottom: 1px solid hsl(var(--border)); }
.shell .client-test-payments-heading h2 { margin: 5px 0 7px; font-size: clamp(20px, 2vw, 25px); letter-spacing: -.025em; }
.shell .client-test-payments-heading p, .shell .client-test-payments-section-head p { max-width: 620px; margin: 0; color: hsl(var(--muted-foreground)); font-size: 13px; line-height: 1.55; }
.shell .client-test-payments-kicker { display: block; color: hsl(var(--muted-foreground)); font-size: 10px; font-weight: 750; letter-spacing: .13em; text-transform: uppercase; }
.shell .client-test-payments-environment { display: inline-flex; align-items: center; width: fit-content; flex: 0 0 auto; min-height: 27px; padding: 4px 10px; border: 1px solid hsl(var(--border)); border-radius: 999px; background: hsl(var(--muted) / .6); color: hsl(var(--foreground)); font-size: 11px; font-weight: 700; }
.shell .client-test-payments-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 20px 0; }
.shell .client-test-payments-steps > div { display: grid; grid-template-columns: 29px 1fr; column-gap: 10px; align-content: start; min-width: 0; padding: 12px; border: 1px solid hsl(var(--border)); border-radius: var(--radius-md); background: hsl(var(--muted) / .25); }
.shell .client-test-payments-steps span { display: grid; grid-row: span 2; place-items: center; width: 27px; height: 27px; border-radius: 50%; background: hsl(var(--primary) / .12); color: hsl(var(--primary)); font-size: 10px; font-weight: 800; }
.shell .client-test-payments-steps strong { color: hsl(var(--foreground)); font-size: 12px; }
.shell .client-test-payments-steps small { margin-top: 3px; color: hsl(var(--muted-foreground)); font-size: 11px; line-height: 1.4; }
.shell .client-test-payments-layout { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: 16px; align-items: start; }
.shell .client-test-payments-setup, .shell .client-test-payments-output { min-width: 0; padding: 20px; border: 1px solid hsl(var(--border)); border-radius: var(--radius-lg); background: hsl(var(--background) / .55); }
.shell .client-test-payments-section-head { margin-bottom: 17px; }
.shell .client-test-payments-section-head h3 { margin: 5px 0 5px; font-size: 16px; letter-spacing: -.015em; }
.shell .client-test-payments .test-payment-fields { margin: 0; }
.shell .client-test-payments-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
.shell .client-test-payments-form-grid label { display: grid; align-content: start; min-width: 0; gap: 6px; margin: 0; color: hsl(var(--foreground)); font-size: 12px; font-weight: 650; }
.shell .client-test-payments-form-grid .client-test-payments-wide { grid-column: 1 / -1; }
.shell .client-test-payments-form-grid input, .shell .client-test-payments-form-grid select { box-sizing: border-box; width: 100%; min-width: 0; min-height: 40px; }
.shell .client-test-payments .validation-summary-errors { margin-bottom: 14px; color: hsl(var(--destructive)); font-size: 12px; }
.shell .client-test-payments-production { margin: 19px 0 0; padding: 15px; border: 1px solid hsl(var(--destructive) / .42); border-radius: var(--radius-md); background: hsl(var(--destructive) / .08); color: hsl(var(--foreground)); }
.shell .client-test-payments-production strong { display: block; font-size: 13px; }
.shell .client-test-payments-production p { margin: 7px 0 11px; color: hsl(var(--foreground)); font-size: 12px; line-height: 1.55; }
.shell .client-test-payments-production label { display: flex; align-items: flex-start; gap: 9px; margin: 0; font-size: 12px; font-weight: 650; line-height: 1.45; }
.shell .client-test-payments-production input { flex: 0 0 auto; margin: 3px 0 0; }
.shell .client-test-payments-form-actions { margin-top: 19px; padding-top: 18px; border-top: 1px solid hsl(var(--border)); }
.shell .client-test-payments-form-actions button, .shell .client-test-payments-result button { min-height: 38px; }
.shell .client-test-payments-reference { margin-top: 17px; padding: 12px 14px; border: 1px solid hsl(var(--border)); border-radius: var(--radius-md); background: hsl(var(--muted) / .35); }
.shell .client-test-payments-reference strong { color: hsl(var(--foreground)); font-size: 12px; }
.shell .client-test-payments-reference p { margin: 5px 0 0; color: hsl(var(--muted-foreground)); font-size: 12px; line-height: 1.55; overflow-wrap: anywhere; }
.shell .client-test-payments code { overflow-wrap: anywhere; }
.shell .client-test-payments-empty { padding: 27px 21px; border: 1px dashed hsl(var(--border)); border-radius: var(--radius-md); background: hsl(var(--muted) / .25); }
.shell .client-test-payments-empty strong, .shell .client-test-payments-no-code strong { color: hsl(var(--foreground)); font-size: 13px; }
.shell .client-test-payments-empty p, .shell .client-test-payments-no-code p { margin: 6px 0 0; color: hsl(var(--muted-foreground)); font-size: 12px; line-height: 1.55; }
.shell .client-test-payments-empty a { display: inline-flex; gap: 7px; margin-top: 12px; color: hsl(var(--primary)); font-size: 12px; font-weight: 700; text-decoration: none; }
.shell .client-test-payments-result { margin: 0; padding: 0; border: 0; background: transparent; box-shadow: none; }
.shell .client-test-payments-result .test-payment-result-head { gap: 14px; padding: 0 0 17px; }
.shell .client-test-payments-result .test-payment-result-head > div { display: grid; justify-items: start; gap: 8px; }
.shell .client-test-payments-result .client-test-payments-amount { margin: 0; color: hsl(var(--foreground)); font-size: clamp(24px, 2.5vw, 30px); font-weight: 750; font-variant-numeric: tabular-nums; }
.shell .client-test-payments-result dl { grid-template-columns: minmax(90px, auto) minmax(0, 1fr); margin: 0 0 18px; padding: 15px 0; border-color: hsl(var(--border)); }
.shell .client-test-payments-result dt { color: hsl(var(--muted-foreground)); }
.shell .client-test-payments-result dd { color: hsl(var(--foreground)); }
.shell .client-test-payments-result .test-payment-code { gap: 8px; color: hsl(var(--foreground)); font-size: 12px; font-weight: 650; }
.shell .client-test-payments-result .test-payment-code textarea { min-width: 0; border-color: hsl(var(--border)); background: hsl(var(--background)); color: hsl(var(--foreground)); font-size: 12px; line-height: 1.5; }
.shell .client-test-payments-copy { margin-top: 10px; }
.shell .client-test-payments-copy span { color: hsl(var(--muted-foreground)); font-size: 12px; }
.shell .client-test-payments-code-note { margin: 13px 0 0; color: hsl(var(--muted-foreground)); font-size: 12px; line-height: 1.55; }
.shell .client-test-payments-code-note.is-production { padding: 10px 12px; border: 1px solid hsl(var(--destructive) / .35); border-radius: var(--radius-md); background: hsl(var(--destructive) / .08); color: hsl(var(--foreground)); }
.shell .client-test-payments-no-code { padding: 15px; border: 1px dashed hsl(var(--border)); border-radius: var(--radius-md); }
.shell .client-test-payments-error-code { margin: 14px 0 0; color: hsl(var(--muted-foreground)); font-size: 12px; }
.shell .client-test-payments a:focus-visible, .shell .client-test-payments textarea:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 3px; }

@media (max-width: 960px) {
    .shell .client-test-payments-layout { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
    .shell .client-test-payments-heading { flex-direction: column; gap: 12px; }
    .shell .client-test-payments-steps { grid-template-columns: 1fr; gap: 7px; }
    .shell .client-test-payments-steps > div { padding: 10px 12px; }
    .shell .client-test-payments-setup, .shell .client-test-payments-output { padding: 16px; }
    .shell .client-test-payments-form-grid { grid-template-columns: 1fr; }
    .shell .client-test-payments-form-actions button, .shell .client-test-payments-result .test-payment-result-head button, .shell .client-test-payments-copy button { width: 100%; }
    .shell .client-test-payments-result .test-payment-result-head { flex-direction: column; align-items: stretch; }
}