/* InterPay component styles. Every rule reads from the token layer; components
   ship classNames, not inline styles, so hover/focus/press states are real CSS. */

/* ── Reset-ish base helpers ─────────────────────────────────────────────── */
.ip-root{font-family:var(--font-body);color:var(--text-body);font-size:var(--ip-text-body);line-height:var(--ip-leading-body);-webkit-font-smoothing:antialiased}
.ip-eyebrow{font-family:var(--font-ui);font-size:var(--ip-text-caption);line-height:var(--ip-leading-caption);font-weight:var(--ip-weight-semibold);letter-spacing:var(--ip-tracking-eyebrow);text-transform:uppercase;color:var(--text-muted)}
.ip-display-1{font-family:var(--font-display);font-size:var(--ip-text-display-1);line-height:var(--ip-leading-display-1);font-weight:var(--ip-weight-bold);letter-spacing:var(--ip-tracking-display);color:var(--text-strong);margin:0}
.ip-display-2{font-family:var(--font-display);font-size:var(--ip-text-display-2);line-height:var(--ip-leading-display-2);font-weight:var(--ip-weight-bold);letter-spacing:var(--ip-tracking-display);color:var(--text-strong);margin:0}
.ip-h1{font-family:var(--font-display);font-size:var(--ip-text-h1);line-height:var(--ip-leading-h1);font-weight:var(--ip-weight-semibold);letter-spacing:var(--ip-tracking-heading);color:var(--text-strong);margin:0}
.ip-h2{font-family:var(--font-display);font-size:var(--ip-text-h2);line-height:var(--ip-leading-h2);font-weight:var(--ip-weight-semibold);letter-spacing:var(--ip-tracking-heading);color:var(--text-strong);margin:0}
.ip-h3{font-family:var(--font-display);font-size:var(--ip-text-h3);line-height:var(--ip-leading-h3);font-weight:var(--ip-weight-medium);color:var(--text-strong);margin:0}
.ip-body-lg{font-size:var(--ip-text-body-lg);line-height:var(--ip-leading-body-lg);color:var(--text-body);margin:0}
.ip-body{font-size:var(--ip-text-body);line-height:var(--ip-leading-body);color:var(--text-body);margin:0}
.ip-caption{font-size:var(--ip-text-caption);line-height:var(--ip-leading-caption);color:var(--text-muted);margin:0}
.ip-label{font-family:var(--font-ui);font-size:var(--ip-text-caption);line-height:var(--ip-leading-caption);font-weight:var(--ip-weight-medium);letter-spacing:var(--ip-tracking-label);color:var(--text-body)}

/* ── Icon (CSS-masked Lucide glyph, tinted with currentColor) ───────────── */
.ip-icon{display:inline-block;flex:none;width:1em;height:1em;vertical-align:-0.125em;overflow:visible;color:inherit}

/* ── Button ─────────────────────────────────────────────────────────────── */
.ip-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--ip-space-3);font-family:var(--font-ui);font-weight:var(--ip-weight-semibold);letter-spacing:var(--ip-tracking-label);border-radius:var(--radius-button);border:1px solid transparent;cursor:pointer;text-decoration:none;white-space:nowrap;transition:var(--transition-control),transform var(--ip-duration-instant) var(--ip-ease-standard)}
.ip-btn:focus-visible{outline:none;box-shadow:var(--ip-shadow-focus)}
.ip-btn:active{transform:scale(var(--press-scale))}
.ip-btn--sm{height:32px;padding:0 var(--ip-space-4);font-size:var(--ip-text-caption)}
.ip-btn--md{height:40px;padding:0 var(--ip-space-5);font-size:var(--ip-text-body)}
.ip-btn--lg{height:48px;padding:0 var(--ip-space-7);font-size:var(--ip-text-body-lg)}
.ip-btn--primary{background:var(--action-primary);color:var(--text-inverse);box-shadow:0 1px 2px rgba(29,78,216,.24)}
.ip-btn--primary:hover{background:var(--action-primary-hover)}
.ip-btn--primary:active{background:var(--action-primary-active)}
.ip-btn--secondary{background:var(--surface-card);color:var(--text-strong);border-color:var(--border-default);box-shadow:var(--ip-shadow-xs)}
.ip-btn--secondary:hover{background:var(--ip-neutral-100);border-color:var(--border-strong)}
.ip-btn--secondary:active{background:var(--ip-neutral-200)}
.ip-btn--tertiary{background:transparent;color:var(--action-primary);padding-left:var(--ip-space-3);padding-right:var(--ip-space-3)}
.ip-btn--tertiary:hover{background:var(--action-primary-soft)}
.ip-btn--tertiary:active{color:var(--action-primary-active)}
.ip-btn--danger{background:var(--action-danger);color:var(--text-inverse)}
.ip-btn--danger:hover{background:var(--action-danger-hover)}
.ip-btn--ghost{background:var(--surface-card);color:var(--text-strong);border-color:var(--border-subtle)}
.ip-btn--ghost:hover{border-color:var(--border-default);background:var(--ip-mist)}
.ip-btn--onDark{background:rgba(255,255,255,.1);color:var(--text-inverse);border-color:var(--border-dark);backdrop-filter:blur(8px)}
.ip-btn--onDark:hover{background:rgba(255,255,255,.18)}
.ip-btn[disabled],.ip-btn.is-disabled{cursor:not-allowed;transform:none;box-shadow:none;opacity:1}
.ip-btn--primary[disabled]{background:var(--ip-blue-200);color:#fff}
.ip-btn--secondary[disabled]{background:var(--ip-neutral-100);color:var(--text-subtle);border-color:var(--border-subtle)}
.ip-btn--tertiary[disabled]{color:var(--text-subtle);background:transparent}
.ip-btn--danger[disabled]{background:var(--ip-red-100);color:#fff}
.ip-btn--block{width:100%}
.ip-btn .ip-icon{font-size:1.15em}

/* ── IconButton ─────────────────────────────────────────────────────────── */
.ip-iconbtn{display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-control);border:1px solid transparent;background:transparent;color:var(--text-muted);cursor:pointer;transition:var(--transition-control)}
.ip-iconbtn--sm{width:32px;height:32px;font-size:16px}
.ip-iconbtn--md{width:40px;height:40px;font-size:18px}
.ip-iconbtn:hover{background:var(--ip-neutral-100);color:var(--text-strong)}
.ip-iconbtn:focus-visible{outline:none;box-shadow:var(--ip-shadow-focus)}
.ip-iconbtn--outlined{border-color:var(--border-default);background:var(--surface-card)}
.ip-iconbtn--accent{color:var(--action-primary);background:var(--action-primary-soft)}
.ip-iconbtn--accent:hover{background:var(--ip-blue-100)}
.ip-iconbtn[disabled]{color:var(--text-subtle);cursor:not-allowed;background:transparent}

/* ── Link ───────────────────────────────────────────────────────────────── */
.ip-link{display:inline-flex;align-items:center;gap:var(--ip-space-2);font-family:var(--font-ui);font-size:var(--ip-text-body);font-weight:var(--ip-weight-medium);color:var(--text-link);text-decoration:none;transition:var(--transition-control)}
.ip-link:hover{color:var(--text-link-hover);text-decoration:underline;text-underline-offset:3px}
.ip-link--secondary{color:var(--ip-red-500)}
.ip-link--secondary:hover{color:var(--ip-red-700)}
.ip-link--visited{color:var(--text-link-visited)}
.ip-link--quiet{color:var(--text-muted)}
.ip-link--quiet:hover{color:var(--text-strong);text-decoration:none}
a{color:var(--text-link)}
a:hover{color:var(--text-link-hover)}

/* ── Badge ──────────────────────────────────────────────────────────────── */
.ip-badge{display:inline-flex;align-items:center;gap:var(--ip-space-2);height:22px;padding:0 var(--ip-space-3);border-radius:var(--radius-badge);font-family:var(--font-ui);font-size:var(--ip-text-micro);line-height:1;font-weight:var(--ip-weight-semibold);letter-spacing:var(--ip-tracking-label);white-space:nowrap}
.ip-badge__dot{width:5px;height:5px;border-radius:var(--radius-pill,999px);background:currentColor}
.ip-badge--active{background:var(--ip-success-50);color:var(--ip-success-700)}
.ip-badge--pending{background:var(--ip-warning-50);color:var(--ip-warning-700)}
.ip-badge--completed{background:var(--ip-blue-50);color:var(--ip-blue-700)}
.ip-badge--cancelled{background:var(--ip-red-50);color:var(--ip-red-700)}
.ip-badge--new{background:var(--ip-neutral-100);color:var(--ip-neutral-700)}
.ip-badge--onDark{background:rgba(255,255,255,.14);color:#fff}

/* ── Chip / Tag ─────────────────────────────────────────────────────────── */
.ip-chip{display:inline-flex;align-items:center;gap:var(--ip-space-2);height:30px;padding:0 var(--ip-space-4);border-radius:var(--radius-tag);border:1px solid var(--border-subtle);background:var(--surface-card);font-family:var(--font-ui);font-size:var(--ip-text-caption);font-weight:var(--ip-weight-medium);color:var(--text-body);cursor:pointer;transition:var(--transition-control)}
.ip-chip:hover{border-color:var(--border-default);background:var(--ip-mist)}
.ip-chip.is-selected{background:var(--ip-blue-50);border-color:var(--ip-blue-200);color:var(--ip-blue-700)}
.ip-chip--accent{background:var(--ip-blue-50);border-color:transparent;color:var(--ip-blue-700)}
.ip-chip--red{background:var(--ip-red-50);border-color:transparent;color:var(--ip-red-700)}
.ip-chip--neutral{background:var(--ip-neutral-100);border-color:transparent;color:var(--ip-neutral-700)}
.ip-chip__x{display:inline-flex;font-size:12px;color:var(--text-subtle)}

/* ── Card ───────────────────────────────────────────────────────────────── */
.ip-card{background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-card);box-shadow:var(--elevation-card);transition:var(--transition-surface)}
.ip-card--pad{padding:var(--space-card-pad)}
.ip-card--padSm{padding:var(--space-card-pad-sm)}
.ip-card--flat{box-shadow:none}
.ip-card--hover:hover{box-shadow:var(--elevation-card-hover);transform:translateY(-1px)}
.ip-card--dark{background:var(--surface-dark);border-color:rgba(255,255,255,.08);color:rgba(255,255,255,.78)}
.ip-card--dark .ip-h2,.ip-card--dark .ip-h3,.ip-card--dark .ip-h1{color:#fff}
.ip-card--accent{background:var(--surface-accent-soft);border-color:var(--ip-blue-100)}
.ip-card__head{display:flex;align-items:center;justify-content:space-between;gap:var(--ip-space-4);padding:var(--ip-space-5) var(--space-card-pad);border-bottom:1px solid var(--border-subtle)}
.ip-card__title{font-family:var(--font-display);font-size:var(--ip-text-body-lg);font-weight:var(--ip-weight-semibold);color:var(--text-strong)}
.ip-card__body{padding:var(--space-card-pad)}
.ip-card__foot{padding:var(--ip-space-4) var(--space-card-pad);border-top:1px solid var(--border-subtle)}

/* ── StatCard ───────────────────────────────────────────────────────────── */
.ip-stat{display:flex;flex-direction:column;gap:var(--ip-space-3);padding:var(--ip-space-5) var(--ip-space-6)}
.ip-stat__label{font-family:var(--font-ui);font-size:var(--ip-text-caption);color:var(--text-muted);font-weight:var(--ip-weight-medium)}
.ip-stat__value{font-family:var(--font-display);font-size:var(--ip-text-h2);line-height:1.1;font-weight:var(--ip-weight-bold);letter-spacing:var(--ip-tracking-heading);color:var(--text-strong)}
.ip-stat__foot{display:flex;align-items:center;gap:var(--ip-space-2);font-size:var(--ip-text-micro);color:var(--text-muted)}
.ip-stat__delta{display:inline-flex;align-items:center;gap:3px;font-weight:var(--ip-weight-semibold)}
.ip-stat__delta--up{color:var(--ip-success-500)}
.ip-stat__delta--down{color:var(--ip-danger-500)}

/* ── Fields ─────────────────────────────────────────────────────────────── */
.ip-field{display:flex;flex-direction:column;gap:var(--ip-space-3)}
.ip-field__req{color:var(--ip-danger-500);margin-left:2px}
.ip-input,.ip-select{width:100%;height:40px;padding:0 var(--ip-space-4);font-family:var(--font-body);font-size:var(--ip-text-body);color:var(--text-strong);background:var(--surface-card);border:1px solid var(--border-default);border-radius:var(--radius-input);transition:var(--transition-control)}
.ip-input::placeholder{color:var(--text-subtle)}
.ip-input:hover,.ip-select:hover{border-color:var(--border-strong)}
.ip-input:focus,.ip-select:focus{outline:none;border-color:var(--border-accent);box-shadow:var(--ip-shadow-focus)}
.ip-input[disabled],.ip-select[disabled]{background:var(--ip-neutral-100);color:var(--text-subtle);cursor:not-allowed}
.ip-input.is-error,.ip-select.is-error{border-color:var(--ip-danger-500);box-shadow:0 0 0 3px rgba(233,75,65,.18)}
.ip-input--textarea{height:auto;min-height:96px;padding:var(--ip-space-4);line-height:var(--ip-leading-body-lg);resize:vertical}
.ip-select{appearance:none;background-image:linear-gradient(45deg,transparent 49%,var(--ip-neutral-500) 50%),linear-gradient(-45deg,transparent 49%,var(--ip-neutral-500) 50%);background-position:calc(100% - 18px) 18px,calc(100% - 13px) 18px;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:var(--ip-space-9)}
.ip-field__help{font-size:var(--ip-text-caption);color:var(--text-muted)}
.ip-field__help.is-error{color:var(--ip-danger-500)}
.ip-input-wrap{position:relative;display:flex;align-items:center}
.ip-input-wrap .ip-icon{position:absolute;left:var(--ip-space-4);font-size:16px;color:var(--text-subtle);pointer-events:none}
.ip-input-wrap--icon .ip-input{padding-left:var(--ip-space-9)}

/* ── Checkbox / Radio / Switch ──────────────────────────────────────────── */
.ip-choice{display:inline-flex;align-items:center;gap:var(--ip-space-3);font-size:var(--ip-text-body);color:var(--text-body);cursor:pointer;user-select:none}
.ip-choice input{position:absolute;opacity:0;width:0;height:0}
.ip-choice__box{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;flex:none;border:1.5px solid var(--border-strong);border-radius:var(--ip-radius-xs);background:var(--surface-card);color:#fff;transition:var(--transition-control)}
.ip-choice__box .ip-icon{font-size:12px;opacity:0;transition:opacity var(--ip-duration-fast) var(--ip-ease-standard)}
.ip-choice:hover .ip-choice__box{border-color:var(--ip-blue-400)}
.ip-choice input:checked+.ip-choice__box{background:var(--action-primary);border-color:var(--action-primary)}
.ip-choice input:checked+.ip-choice__box .ip-icon{opacity:1}
.ip-choice input:focus-visible+.ip-choice__box{box-shadow:var(--ip-shadow-focus)}
.ip-choice--radio .ip-choice__box{border-radius:var(--radius-pill,999px)}
.ip-choice--radio input:checked+.ip-choice__box{background:var(--surface-card);border:5px solid var(--action-primary)}
.ip-choice.is-disabled{color:var(--text-subtle);cursor:not-allowed}
.ip-choice.is-disabled .ip-choice__box{background:var(--ip-neutral-100);border-color:var(--border-default)}
.ip-switch{display:inline-flex;align-items:center;gap:var(--ip-space-4);cursor:pointer}
.ip-switch input{position:absolute;opacity:0;width:0;height:0}
.ip-switch__track{position:relative;width:44px;height:24px;flex:none;border-radius:var(--radius-pill,999px);background:var(--ip-neutral-300);transition:background-color var(--ip-duration-base) var(--ip-ease-standard)}
.ip-switch__knob{position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:var(--radius-pill,999px);background:#fff;box-shadow:var(--ip-shadow-sm);transition:transform var(--ip-duration-base) var(--ip-ease-standard)}
.ip-switch input:checked+.ip-switch__track{background:var(--action-primary)}
.ip-switch input:checked+.ip-switch__track .ip-switch__knob{transform:translateX(20px)}
.ip-switch input:focus-visible+.ip-switch__track{box-shadow:var(--ip-shadow-focus)}
.ip-switch.is-disabled{cursor:not-allowed;opacity:.55}

/* ── Tabs ───────────────────────────────────────────────────────────────── */
.ip-tabs{display:flex;align-items:stretch;gap:var(--ip-space-8);border-bottom:1px solid var(--border-subtle)}
.ip-tab{display:inline-flex;align-items:center;gap:var(--ip-space-3);padding:var(--ip-space-4) 0;margin-bottom:-1px;border:0;border-bottom:2px solid transparent;background:none;font-family:var(--font-ui);font-size:var(--ip-text-body);font-weight:var(--ip-weight-medium);color:var(--text-muted);cursor:pointer;transition:var(--transition-control)}
.ip-tab:hover{color:var(--text-strong)}
.ip-tab.is-active{color:var(--action-primary);border-bottom-color:var(--action-primary);font-weight:var(--ip-weight-semibold)}
.ip-tabs--fill{gap:0}
.ip-tabs--fill .ip-tab{flex:1;justify-content:center;padding:var(--ip-space-4) var(--ip-space-5)}

/* ── Stepper ────────────────────────────────────────────────────────────── */
.ip-stepper{display:flex;align-items:flex-start;gap:0}
.ip-stepper__step{display:flex;flex-direction:column;align-items:center;gap:var(--ip-space-3);flex:none;width:64px;text-align:center}
.ip-stepper__dot{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:var(--radius-pill,999px);border:1.5px solid var(--border-default);background:var(--surface-card);font-family:var(--font-ui);font-size:var(--ip-text-caption);font-weight:var(--ip-weight-semibold);color:var(--text-muted);transition:var(--transition-control)}
.ip-stepper__label{font-family:var(--font-ui);font-size:var(--ip-text-caption);color:var(--text-muted)}
.ip-stepper__step.is-active .ip-stepper__dot{background:var(--action-primary);border-color:var(--action-primary);color:#fff}
.ip-stepper__step.is-active .ip-stepper__label{color:var(--text-strong);font-weight:var(--ip-weight-semibold)}
.ip-stepper__step.is-done .ip-stepper__dot{background:var(--action-primary-soft);border-color:var(--ip-blue-200);color:var(--action-primary)}
.ip-stepper__bar{flex:1;height:1.5px;background:var(--border-default);margin-top:13px}
.ip-stepper__bar.is-done{background:var(--ip-blue-200)}

/* ── Pagination ─────────────────────────────────────────────────────────── */
.ip-pagination{display:inline-flex;align-items:center;gap:var(--ip-space-2)}
.ip-pagination__item{display:inline-flex;align-items:center;justify-content:center;min-width:32px;height:32px;padding:0 var(--ip-space-2);border:1px solid var(--border-subtle);border-radius:var(--radius-control);background:var(--surface-card);font-family:var(--font-ui);font-size:var(--ip-text-caption);font-weight:var(--ip-weight-medium);color:var(--text-body);cursor:pointer;transition:var(--transition-control)}
.ip-pagination__item:hover{border-color:var(--border-default);background:var(--ip-mist)}
.ip-pagination__item.is-active{background:var(--action-primary);border-color:var(--action-primary);color:#fff}
.ip-pagination__item[disabled]{color:var(--text-subtle);cursor:not-allowed;background:var(--surface-card)}
.ip-pagination__gap{padding:0 var(--ip-space-2);color:var(--text-subtle)}

/* ── Alert ──────────────────────────────────────────────────────────────── */
.ip-alert{display:flex;align-items:flex-start;gap:var(--ip-space-4);padding:var(--ip-space-4) var(--ip-space-5);border:1px solid transparent;border-radius:var(--ip-radius-lg);font-size:var(--ip-text-body)}
.ip-alert__icon{font-size:16px;margin-top:1px}
.ip-alert__body{flex:1;display:flex;flex-wrap:wrap;gap:var(--ip-space-2) var(--ip-space-3)}
.ip-alert__title{font-weight:var(--ip-weight-semibold)}
.ip-alert__x{border:0;background:none;color:inherit;opacity:.5;cursor:pointer;font-size:12px;line-height:1;padding:2px}
.ip-alert__x:hover{opacity:1}
.ip-alert--success{background:var(--ip-success-50);border-color:rgba(15,157,110,.22);color:var(--ip-success-700)}
.ip-alert--info{background:var(--ip-info-50);border-color:var(--ip-blue-200);color:var(--ip-blue-700)}
.ip-alert--warning{background:var(--ip-warning-50);border-color:rgba(217,138,11,.24);color:var(--ip-warning-700)}
.ip-alert--error{background:var(--ip-danger-50);border-color:var(--ip-red-100);color:var(--ip-danger-700)}

/* ── Progress ───────────────────────────────────────────────────────────── */
.ip-progress{display:flex;align-items:center;gap:var(--ip-space-4)}
.ip-progress__track{position:relative;flex:1;height:8px;border-radius:var(--radius-pill,999px);background:var(--ip-neutral-200);overflow:hidden}
.ip-progress__fill{position:absolute;inset:0 auto 0 0;border-radius:var(--radius-pill,999px);background:var(--action-primary);transition:width var(--ip-duration-slow) var(--ip-ease-standard)}
.ip-progress__fill--gradient{background:var(--ip-gradient-energy)}
.ip-progress__value{font-family:var(--font-ui);font-size:var(--ip-text-caption);font-weight:var(--ip-weight-semibold);color:var(--text-body);min-width:34px;text-align:right}

/* ── Notification row ───────────────────────────────────────────────────── */
.ip-notif{display:flex;gap:var(--ip-space-4);padding:var(--ip-space-4) 0;border-bottom:1px solid var(--border-subtle)}
.ip-notif:last-child{border-bottom:0}
.ip-notif__icon{display:flex;align-items:center;justify-content:center;width:28px;height:28px;flex:none;border-radius:var(--radius-pill,999px);background:var(--action-primary-soft);color:var(--action-primary);font-size:14px}
.ip-notif__icon--warning{background:var(--ip-warning-50);color:var(--ip-warning-700)}
.ip-notif__icon--success{background:var(--ip-success-50);color:var(--ip-success-700)}
.ip-notif__title{font-size:var(--ip-text-body);color:var(--text-strong);font-weight:var(--ip-weight-medium)}
.ip-notif__time{font-size:var(--ip-text-micro);color:var(--text-subtle);margin-top:2px}
.ip-notif__dot{width:6px;height:6px;border-radius:var(--radius-pill,999px);background:var(--action-primary);margin-top:9px;flex:none}

/* ── Table ──────────────────────────────────────────────────────────────── */
.ip-table{width:100%;border-collapse:collapse;font-size:var(--ip-text-body)}
.ip-table th{text-align:left;padding:var(--ip-space-3) var(--ip-space-5);font-family:var(--font-ui);font-size:var(--ip-text-micro);font-weight:var(--ip-weight-semibold);letter-spacing:var(--ip-tracking-label);color:var(--text-muted);border-bottom:1px solid var(--border-subtle);white-space:nowrap}
.ip-table td{padding:var(--ip-space-4) var(--ip-space-5);border-bottom:1px solid var(--border-subtle);color:var(--text-body)}
.ip-table tbody tr:last-child td{border-bottom:0}
.ip-table tbody tr:hover td{background:var(--ip-mist)}
.ip-table__num{font-variant-numeric:tabular-nums;text-align:right}
.ip-table__name{color:var(--text-strong);font-weight:var(--ip-weight-medium)}

/* ── OptionCard (selectable, expandable applicant/product choice) ───────── */
.ip-option{display:block;width:100%;text-align:left;background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--ip-radius-xl);cursor:pointer;transition:var(--transition-control)}
.ip-option:hover{border-color:var(--border-default);box-shadow:var(--ip-shadow-xs)}
.ip-option.is-selected{border-color:var(--ip-blue-500);box-shadow:var(--ip-shadow-selected)}
.ip-option__row{display:flex;align-items:center;gap:var(--ip-space-5);padding:var(--ip-space-5) var(--ip-space-6)}
.ip-option__num{font-family:var(--font-ui);font-size:var(--ip-text-body);font-weight:var(--ip-weight-semibold);color:var(--text-subtle);width:22px}
.ip-option.is-selected .ip-option__num{color:var(--action-primary)}
.ip-option__glyph{display:flex;align-items:center;justify-content:center;width:36px;height:36px;flex:none;border-radius:var(--ip-radius-lg);background:var(--ip-neutral-100);color:var(--text-body);font-size:18px}
.ip-option.is-selected .ip-option__glyph{background:var(--action-primary-soft);color:var(--action-primary)}
.ip-option__title{font-size:var(--ip-text-body-lg);font-weight:var(--ip-weight-semibold);color:var(--text-strong)}
.ip-option__desc{font-size:var(--ip-text-body);color:var(--text-muted);margin-top:2px}
.ip-option__chev{color:var(--text-subtle);font-size:16px}
.ip-option__detail{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--ip-space-5);padding:var(--ip-space-5) var(--ip-space-6) var(--ip-space-6);border-top:1px solid var(--border-subtle);margin:0 0 0 0}
.ip-option__fact{display:flex;align-items:flex-start;gap:var(--ip-space-4);padding-left:var(--ip-space-5);border-left:1px solid var(--border-subtle)}
.ip-option__fact:first-child{border-left:0;padding-left:0}
.ip-option__fact .ip-icon{font-size:20px;color:var(--action-primary);opacity:.9}
.ip-option__factLabel{font-size:var(--ip-text-caption);color:var(--text-muted)}
.ip-option__factValue{font-size:var(--ip-text-body);color:var(--text-strong);font-weight:var(--ip-weight-medium);margin-top:2px}

/* ── ActionBar (sticky summary + next/back) ─────────────────────────────── */
.ip-actionbar{display:flex;align-items:center;gap:var(--ip-space-7);padding:var(--ip-space-5) var(--ip-space-6);background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--ip-radius-xl);box-shadow:var(--ip-shadow-sm)}
.ip-actionbar__summary{display:flex;align-items:center;gap:var(--ip-space-5)}
.ip-actionbar__check{display:flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:var(--radius-pill,999px);border:1.5px solid var(--action-primary);color:var(--action-primary);font-size:13px}
.ip-actionbar__field{display:flex;flex-direction:column;gap:2px;padding-left:var(--ip-space-6);border-left:1px solid var(--border-subtle)}
.ip-actionbar__field:first-of-type{border-left:0;padding-left:0}
.ip-actionbar__label{font-size:var(--ip-text-caption);color:var(--text-muted)}
.ip-actionbar__value{font-size:var(--ip-text-body-lg);font-weight:var(--ip-weight-semibold);color:var(--text-strong)}
.ip-actionbar__spacer{flex:1}

/* ── TrustItem (icon + title + line, used in rails and footers) ─────────── */
.ip-trust{display:flex;align-items:flex-start;gap:var(--ip-space-4)}
.ip-trust__icon{display:flex;align-items:center;justify-content:center;width:34px;height:34px;flex:none;border-radius:var(--ip-radius-md);background:var(--action-primary-soft);color:var(--action-primary);font-size:17px}
.ip-trust__icon--plain{background:transparent;color:var(--ip-blue-700)}
.ip-trust__title{font-size:var(--ip-text-body);font-weight:var(--ip-weight-semibold);color:var(--text-strong)}
.ip-trust__desc{font-size:var(--ip-text-caption);color:var(--text-muted);margin-top:2px}

/* ── Logo lockup ────────────────────────────────────────────────────────── */
.ip-logo{display:inline-flex;align-items:center;gap:var(--ip-space-4);text-decoration:none}
.ip-logo__mark{display:block;height:1.6em;width:auto}
.ip-logo__img{display:block;width:auto}
.ip-logo__word{font-family:var(--font-display);font-weight:var(--ip-weight-semibold);letter-spacing:var(--ip-tracking-heading);color:var(--text-strong);white-space:nowrap}
.ip-logo--onDark .ip-logo__word{color:#fff}

/* ── Avatar ─────────────────────────────────────────────────────────────── */
.ip-avatar{display:inline-flex;align-items:center;justify-content:center;border-radius:var(--radius-avatar);background:var(--action-primary-soft);color:var(--ip-blue-700);font-family:var(--font-ui);font-weight:var(--ip-weight-semibold);overflow:hidden}
.ip-avatar--sm{width:28px;height:28px;font-size:var(--ip-text-micro)}
.ip-avatar--md{width:36px;height:36px;font-size:var(--ip-text-caption)}
.ip-avatar--lg{width:48px;height:48px;font-size:var(--ip-text-body)}
.ip-avatar img{width:100%;height:100%;object-fit:cover}

/* ── TopNav ─────────────────────────────────────────────────────────────── */
.ip-topnav{display:flex;align-items:center;gap:var(--ip-space-8);height:var(--layout-topbar);padding:0 var(--ip-space-8);background:var(--surface-card);border-bottom:1px solid var(--border-subtle)}
.ip-topnav__links{display:flex;align-items:center;gap:var(--ip-space-7)}
.ip-topnav__link{font-family:var(--font-ui);font-size:var(--ip-text-body);font-weight:var(--ip-weight-medium);color:var(--text-body);text-decoration:none;padding:var(--ip-space-2) 0;border-bottom:2px solid transparent;transition:var(--transition-control)}
.ip-topnav__link:hover{color:var(--text-strong)}
.ip-topnav__link.is-active{color:var(--action-primary);border-bottom-color:var(--action-primary)}
.ip-topnav__spacer{flex:1}
.ip-topnav__right{display:flex;align-items:center;gap:var(--ip-space-5)}
.ip-topnav--onDark{background:transparent;border-bottom-color:var(--border-dark)}
.ip-topnav--onDark .ip-topnav__link{color:rgba(255,255,255,.8)}
.ip-topnav--onDark .ip-topnav__link:hover{color:#fff}
.ip-topnav__secure{display:inline-flex;align-items:center;gap:var(--ip-space-2);font-size:var(--ip-text-body);font-weight:var(--ip-weight-medium);color:var(--ip-success-500)}

/* ── SideNav ────────────────────────────────────────────────────────────── */
.ip-sidenav{display:flex;flex-direction:column;gap:var(--ip-space-2);width:var(--layout-sidebar);padding:var(--ip-space-6) var(--ip-space-5);background:var(--surface-dark);color:rgba(255,255,255,.72)}
.ip-sidenav__brand{display:flex;align-items:center;gap:var(--ip-space-4);padding:var(--ip-space-2) var(--ip-space-3) var(--ip-space-7)}
.ip-sidenav__item{display:flex;align-items:center;gap:var(--ip-space-4);padding:var(--ip-space-3) var(--ip-space-4);border-radius:var(--ip-radius-md);border:0;background:transparent;font-family:var(--font-ui);font-size:var(--ip-text-body);font-weight:var(--ip-weight-medium);color:rgba(255,255,255,.7);cursor:pointer;text-align:left;width:100%;transition:var(--transition-control)}
.ip-sidenav__item .ip-icon{font-size:16px}
.ip-sidenav__item:hover{background:rgba(255,255,255,.07);color:#fff}
.ip-sidenav__item.is-active{background:var(--action-primary);color:#fff}
.ip-sidenav__spacer{flex:1}

/* ── Charts ─────────────────────────────────────────────────────────────── */
.ip-chart{display:block;width:100%;overflow:visible;font-family:var(--font-ui)}
.ip-chart__grid{stroke:var(--border-subtle);stroke-width:1}
.ip-chart__axis{fill:var(--text-subtle);font-size:10px}
.ip-chart__line{fill:none;stroke:var(--chart-1);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ip-chart__area{fill:url(#ipAreaFill);stroke:none}
.ip-chart__dot{fill:#fff;stroke:var(--chart-1);stroke-width:2}
.ip-chart__bar{fill:var(--chart-1)}
.ip-chart__bar--alt{fill:var(--chart-2)}
.ip-chart__donutTrack{fill:none;stroke:var(--ip-neutral-200)}
.ip-chart__label{fill:var(--text-strong);font-family:var(--font-display);font-weight:var(--ip-weight-bold)}
.ip-legend{display:flex;flex-wrap:wrap;gap:var(--ip-space-3) var(--ip-space-6)}
.ip-legend__item{display:inline-flex;align-items:center;gap:var(--ip-space-3);font-size:var(--ip-text-caption);color:var(--text-muted)}
.ip-legend__swatch{width:8px;height:8px;border-radius:2px}
.ip-chart__tip{fill:var(--ip-neutral-900)}
.ip-chart__tipText{fill:#fff;font-size:10px;font-weight:600}

/* ── Brand surfaces ─────────────────────────────────────────────────────── */
.ip-dark-surface{background:var(--ip-gradient-dark);color:rgba(255,255,255,.8)}
.ip-mark-watermark{position:absolute;inset:0;background-image:url("../assets/logo/interpay-mark.png");background-repeat:no-repeat;background-position:right -40px top -30px;background-size:auto 150%;opacity:.06;pointer-events:none}
.ip-gradient-bar{height:4px;border-radius:var(--radius-pill,999px);background:var(--ip-gradient-energy)}