/* Hermosa Payments design-system components, ported from _ds_bundle.js as plain CSS */

/* Icon */
.ic{display:inline-flex;flex:none;width:var(--s,20px);height:var(--s,20px);line-height:0;color:var(--c,currentColor)}
.ic svg{width:100%;height:100%}

/* Button */
.hp-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--font-sans);font-weight:500;border:1px solid transparent;cursor:pointer;white-space:nowrap;text-decoration:none;transition:background var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),color var(--dur-fast),transform var(--dur-fast) var(--ease-out);-webkit-tap-highlight-color:transparent}
.hp-btn:hover{text-decoration:none}
.hp-btn:active:not(:disabled){transform:scale(.98)}
.hp-btn:focus-visible{outline:var(--focus-width) solid var(--focus-ring);outline-offset:2px}
.hp-btn--md{height:var(--control-md);padding:0 18px;font-size:15px;border-radius:var(--radius-md);--s:18px}
.hp-btn--lg{height:var(--control-lg);padding:0 24px;font-size:17px;border-radius:var(--radius-lg);--s:20px}
.hp-btn--primary,.hp-btn--primary:hover{background:var(--brand-primary);color:var(--on-primary)}
.hp-btn--primary:hover{background:var(--brand-primary-hover)}
.hp-btn--primary:active{background:var(--brand-primary-press)}
.hp-btn--secondary,.hp-btn--secondary:hover{background:var(--surface-card);color:var(--text-strong);border-color:var(--border-default)}
.hp-btn--secondary:hover{background:var(--bg-subtle);border-color:var(--border-strong)}
.hp-btn--ghost,.hp-btn--ghost:hover{background:transparent;color:var(--text-strong)}
.hp-btn--ghost:hover{background:var(--bg-subtle)}
.hp-btn--accent,.hp-btn--accent:hover{background:var(--brand-accent);color:var(--on-accent)}
.hp-btn--accent:hover{background:var(--brand-accent-hover)}

/* IconButton */
.hp-ib{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid transparent;border-radius:var(--radius-md);cursor:pointer;background:transparent;color:var(--text-body);transition:background var(--dur-fast) var(--ease-out),transform var(--dur-fast)}
.hp-ib:active{transform:scale(.96)}
.hp-ib:focus-visible{outline:var(--focus-width) solid var(--focus-ring);outline-offset:2px}
.hp-ib--secondary{background:var(--surface-card);border-color:var(--border-default)}
.hp-ib--secondary:hover{background:var(--bg-subtle);border-color:var(--border-strong)}

/* Input */
.hp-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.hp-label{font:600 14px/20px var(--font-sans);color:var(--text-strong)}
.hp-control{position:relative;display:flex;align-items:center;gap:8px;height:var(--control-md);padding:0 14px;background:var(--surface-card);border:1px solid var(--border-default);border-radius:var(--radius-md);transition:border-color var(--dur-fast) var(--ease-out)}
.hp-control--lg{height:var(--control-lg);border-radius:var(--radius-lg);padding:0 16px}
.hp-control:hover{border-color:var(--border-strong)}
.hp-control:focus-within{border-color:var(--brand-primary);outline:var(--focus-width) solid var(--focus-ring);outline-offset:1px}
.hp-control input{flex:1;min-width:0;height:100%;border:0;outline:0;background:transparent;font:400 16px/24px var(--font-sans);color:var(--text-strong);padding:0}
.hp-control--lg input{font-size:18px}
.hp-control input::placeholder{color:var(--text-subtle)}
.hp-affix{color:var(--text-muted);font-size:15px;white-space:nowrap}
.hp-num-input input{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

/* PillChip */
.hp-pill{display:inline-flex;align-items:center;font-family:var(--font-sans);color:#FFFFFF}
.hp-pill>span{border:1.5px solid currentColor;height:44px;display:inline-flex;align-items:center;justify-content:center}
.hp-pill .t{border-radius:999px;padding:0 24px;font-size:15px;font-weight:500;letter-spacing:-0.005em;white-space:nowrap}
.hp-pill .c{width:44px;border-radius:50%;flex:none;--s:18px}
.hp-pill[data-side=right] .c{margin-left:-1.5px}
.hp-pill[data-side=left] .c{margin-right:-1.5px}

/* ServiceCard */
.hp-service{display:flex;flex-direction:column;gap:12px;padding:24px;background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-xl);font-family:var(--font-sans)}
.hp-service .badge{width:52px;height:52px;border-radius:50%;background:var(--surface-pastel);color:var(--ink);display:flex;align-items:center;justify-content:center;--s:24px}
.hp-service .title{font-size:18px;line-height:24px;font-weight:600;color:var(--text-strong)}
.hp-service p{font-size:15px;line-height:22px;color:var(--text-body);flex:1}

/* Input extras and Select */
.hp-hint{font-size:13px;line-height:18px;color:var(--text-muted)}
.hp-control select{flex:1;min-width:0;height:100%;border:0;outline:0;background:transparent;font:400 16px/24px var(--font-sans);color:var(--text-strong);padding:0 24px 0 0;appearance:none;-webkit-appearance:none;cursor:pointer}
.hp-select-chev{position:absolute;right:14px;pointer-events:none}

/* Checkbox */
.hp-choice{display:flex;gap:12px;align-items:flex-start;min-height:var(--tap-min);padding:10px 0;cursor:pointer;font-family:var(--font-sans);position:relative}
.hp-choice input{position:absolute;opacity:0;width:1px;height:1px}
.hp-choice .box{flex:none;width:22px;height:22px;display:flex;align-items:center;justify-content:center;background:var(--surface-card);border:1.5px solid var(--border-strong);border-radius:var(--radius-xs);transition:all var(--dur-fast) var(--ease-out)}
.hp-choice:hover .box{border-color:var(--brand-primary)}
.hp-choice input:checked+.box{background:var(--brand-primary);border-color:var(--brand-primary)}
.hp-choice input:focus-visible+.box{outline:var(--focus-width) solid var(--focus-ring);outline-offset:2px}
.hp-choice input:not(:checked)+.box .hp-chk{visibility:hidden}
.hp-choice .t{font-size:15px;line-height:22px;color:var(--text-strong);font-weight:500}
.hp-choice .d{font-size:13px;line-height:18px;color:var(--text-muted);margin-top:2px}

/* FileDrop */
.hp-filedrop{display:flex;flex-direction:column;gap:10px;font-family:var(--font-sans)}
.hp-filedrop .drop{display:flex;flex-direction:column;align-items:center;gap:8px;padding:28px 20px;border:1.5px dashed var(--border-strong);background:var(--surface-sunken);border-radius:var(--radius-lg);cursor:pointer;color:var(--text-body);font:inherit;line-height:20px;text-align:center;transition:all var(--dur-fast) var(--ease-out)}
.hp-filedrop .drop.over{border-color:var(--brand-primary);background:var(--brand-primary-soft)}
.hp-filedrop .drop:focus-visible{outline:var(--focus-width) solid var(--focus-ring);outline-offset:2px}
.hp-filedrop .big{font-size:16px;line-height:22px;font-weight:600;color:var(--text-strong)}
.hp-filedrop .big u{color:var(--text-link)}
.hp-filedrop .small{font-size:13px;line-height:18px;color:var(--text-muted)}
.hp-filedrop .files{display:flex;flex-direction:column;gap:10px}
.hp-filedrop .file{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--border-subtle);border-radius:var(--radius-md);background:var(--surface-card);--s:20px;--c:var(--text-muted)}
.hp-filedrop .file .name{flex:1;min-width:0;font-size:14px;color:var(--text-strong);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hp-filedrop .file .size{font-size:13px;color:var(--text-muted);font-variant-numeric:tabular-nums}
.hp-filedrop .file button{width:32px;height:32px;border:0;background:transparent;cursor:pointer;color:var(--text-muted);display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);--s:16px}

/* RateComparison */
.hp-ratecmp{border:1px solid var(--border-subtle);border-radius:var(--radius-lg);overflow:hidden;background:var(--surface-card);font-family:var(--font-sans);font-variant-numeric:tabular-nums}
.hp-ratecmp table{width:100%;border-collapse:collapse;font-size:15px}
.hp-ratecmp th{text-align:right;font-size:12px;font-weight:600;letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--text-muted);padding:10px 16px;border-bottom:1px solid var(--border-default)}
.hp-ratecmp th.pro{color:var(--brand-primary)}
.hp-ratecmp td{padding:12px 16px;border-bottom:1px solid var(--border-subtle);text-align:right}
.hp-ratecmp .l{text-align:left}
.hp-ratecmp td.l span{color:var(--text-strong);font-weight:500}
.hp-ratecmp td.cur{color:var(--text-muted)}
.hp-ratecmp td.pro{color:var(--text-strong);font-weight:500}
.hp-ratecmp tfoot tr{background:var(--bg-subtle)}
.hp-ratecmp tfoot td{border-bottom:0;font-weight:600}
.hp-ratecmp tfoot td.l{color:var(--text-strong)}
.hp-ratecmp .save{display:flex;justify-content:space-between;align-items:baseline;gap:16px;flex-wrap:wrap;padding:16px;background:var(--status-paid-bg);color:var(--status-paid-fg)}
.hp-ratecmp .save b{font-weight:600;font-size:15px}
.hp-ratecmp .amt{font-size:24px;font-weight:600}
.hp-ratecmp small{font-size:14px}

/* Form validation and sending states */
.hp-label .req{color:var(--text-accent)}
.hp-control[data-invalid="true"]{border-color:var(--danger)}
.form-error{margin:0;padding:12px 16px;border-radius:var(--radius-md);background:var(--status-failed-bg);color:var(--status-failed-fg);font-size:15px;line-height:22px}
.hp-btn[aria-busy="true"]{opacity:.7;cursor:progress}
/* Spam trap: present for bots, invisible and unreachable for people */
.hp-hidden-field{position:absolute!important;left:-10000px!important;width:1px;height:1px;overflow:hidden}

/* Multi-line text field */
.hp-control--area{height:auto;padding:12px 14px;align-items:stretch}
.hp-control--area textarea{flex:1;min-width:0;min-height:120px;border:0;outline:0;background:transparent;font:400 16px/24px var(--font-sans);color:var(--text-strong);padding:0;resize:vertical}
.hp-control--area textarea::placeholder{color:var(--text-subtle)}