.appointment-payment-panel .family-payment-card {margin:0 0 18px;border:1px solid #713333;border-radius:14px;overflow:hidden;background:linear-gradient(115deg,#8c24240c,transparent 75%),var(--ws-panel);color:var(--ws-ink)}
.family-payment-card > header {padding:14px 18px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;background:linear-gradient(110deg,#491b1d,#272126);border-bottom:1px solid #6c3333}
.family-payment-card > header > strong {display:flex;gap:9px;align-items:center;color:#fff;font-size:17px;font-weight:650}
.family-payment-card > header svg {width:22px;height:22px;stroke:#ffaaa0;fill:none;stroke-width:1.7}
.family-payment-card > header > small {color:#dec5c0;font-size:13px}
.family-payment-body {display:grid;gap:14px;padding:18px}
.family-payment-owner {display:grid;gap:5px;overflow-wrap:anywhere}
.family-payment-owner strong {font-size:16px;color:var(--ws-ink)}
.family-payment-owner > span,.family-payment-duration {color:var(--ws-muted);font-size:13px;line-height:1.5}
.family-payment-balance {display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;flex-wrap:wrap}
.family-payment-balance > div {display:grid;gap:3px}
.family-payment-balance > div > strong {font-size:27px;line-height:1.25;font-variant-numeric:tabular-nums}
.family-payment-balance strong small {font-size:17px;font-weight:500;color:var(--ws-muted)}
.family-payment-balance > div > span {font-size:13px;color:var(--ws-muted)}
.family-payment-expiry {font-size:13px;padding:6px 10px;border:1px solid var(--ws-line);border-radius:8px;color:var(--ws-muted)}
.family-payment-expiry.is-expired {border-color:#9a6b35;color:#efc287;background:#96622418}
.family-payment-reason {margin:12px 0 0;color:#efc287;line-height:1.5;font-size:14px}
.family-payment-action {display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap}
.family-payment-action label {display:grid;gap:6px;font-size:13px;color:var(--ws-muted);flex:0 0 135px}
.family-payment-action input {width:100%!important;min-width:0;box-sizing:border-box;font-size:17px!important}
.family-payment-action button {flex:1;min-width:180px;min-height:44px!important}
.family-payment-duration {margin:0}
.family-payment-picker {display:grid;gap:6px;min-width:0}
.appointment-payment-panel .family-payment-card button.primary,body > .family-extend-dialog button.primary {background:linear-gradient(110deg,#b72d31,#982125)!important;border:1px solid #cc4b4b!important;color:white!important;box-shadow:0 4px 12px #a11d241a!important;border-radius:10px;font-size:14px;white-space:normal}
.appointment-payment-panel .family-payment-card button.primary:hover,body > .family-extend-dialog button.primary:hover {background:linear-gradient(110deg,#cc383a,#ad2c2e)!important}
.family-payment-card button:disabled {opacity:.45;cursor:not-allowed}
.appointment-payment-panel .family-payment-extend {color:#ffa398!important;border:1px solid #904342!important;background:#9b292914!important;margin-top:12px;font-weight:600}
.family-payment-success {display:grid;gap:5px;margin:14px 18px;padding:13px 15px;border:1px solid #477b5e;border-radius:10px;background:#24513a25;color:#ade5c2}
.family-payment-success > strong {font-size:15px}
.family-payment-success > span {font-size:13px}
body > .family-extend-dialog {width:min(520px,calc(100vw - 24px));max-height:calc(100dvh - 32px);padding:0;background:var(--ws-panel);color:var(--ws-ink);border:1px solid var(--ws-line);border-radius:16px;overflow:auto}
.family-extend-dialog form {padding:0;display:block}
body > .family-extend-dialog .dialog-header {padding:18px 20px;margin:0;background:linear-gradient(110deg,#491b1d,#272126)!important;display:flex;gap:12px;align-items:center;justify-content:space-between}
body > .family-extend-dialog .dialog-header h2 {font-size:20px;color:#fff!important;margin:0}
body > .family-extend-dialog .icon-close {color:#fff}
.family-extend-body {padding:20px;display:grid;gap:16px}
.family-extend-body p {margin:0;line-height:1.5;font-size:14px;color:var(--ws-muted)}
.family-extend-body label {display:grid;gap:7px}
.family-extend-body :is(input,textarea) {background:var(--ws-raised);color:var(--ws-ink);border:1px solid var(--ws-line);padding:11px;border-radius:9px;width:100%;box-sizing:border-box;font:inherit}
.family-extend-body textarea {resize:vertical}
.family-extend-dialog footer {display:flex;justify-content:flex-end;gap:10px;padding:16px 20px;border-top:1px solid var(--ws-line)}
:root[data-theme=light] .appointment-payment-panel .family-payment-card {border-color:#d2afaa}
:root[data-theme=light] .family-payment-expiry.is-expired,:root[data-theme=light] .family-payment-reason {color:#805015}
:root[data-theme=light] .appointment-payment-panel .family-payment-extend {color:#a1292c!important;border-color:#c78980!important}
:root[data-theme=light] .family-payment-success {color:#25643d;background:#e8f3eb;border-color:#99bca3}
@media(max-width:480px){.family-payment-body{padding:14px}.family-payment-card > header{padding:13px 14px}.family-payment-action label{flex-basis:100%}.family-payment-action button{width:100%;min-width:0}.family-payment-balance > div > strong{font-size:24px}.family-extend-dialog footer{flex-wrap:wrap}.family-extend-dialog footer button{flex:1}}

.family-extend-body > label {min-width:0}
.family-extend-body .family-reason-insert {justify-self:start;margin-top:-6px}
.family-reason-confirm {padding:12px;border:1px solid #904342;border-radius:10px;background:#9b292914}
.family-reason-confirm[hidden] {display:none!important}
.family-reason-confirm > div {display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.family-extend-body .bl-select {min-width:0;max-width:100%}