/* Shared modal look (.pm): compact, calm forms. Used by Packages and New member; reuse for other modals. */
.pm .modal-content { border: 0; border-radius: 12px; box-shadow: 0 20px 50px rgba(16, 24, 40, .18); overflow: hidden; }
.pm .modal-header { padding: .8rem 1.1rem .65rem; border-bottom: 1px solid #eef0f3; align-items: flex-start; }
.pm .modal-title { font-size: .95rem; font-weight: 600; color: var(--heading); margin: 0; }
.pm .pm-sub { font-size: .72rem; color: #6b7280; margin-top: .1rem; line-height: 1.35; }
.pm .modal-body { padding: .9rem 1.1rem 1rem; }
.pm .modal-body .mb-3 { margin-bottom: .7rem !important; }
.pm .modal-footer { padding: .6rem 1.1rem; border-top: 1px solid #eef0f3; background: #fafbfc; gap: .4rem; justify-content: flex-end; }
.pm .modal-footer > * { margin: 0; }
.pm .modal-footer .btn { font-size: .78rem; padding: .35rem .9rem; border-radius: 7px; }
.pm .pm-label { display: block; font-size: .72rem; font-weight: 500; color: #344054; margin-bottom: .2rem; }
.pm .pm-opt { font-weight: 400; color: #98a2b3; margin-left: .2rem; }
.pm .pm-hint { font-size: .66rem; color: #98a2b3; margin-top: .15rem; }
.pm .pm-help { font-size: .74rem; color: #667085; margin: 0 0 .7rem; }
.pm .form-control, .pm .form-select, .pm .input-group-text { font-size: .78rem; padding: .32rem .55rem; border-color: #d0d5dd; }
.pm .form-select { padding-right: 1.8rem; background-position: right .5rem center; }
.pm .form-control, .pm .form-select { border-radius: 7px; }
.pm .input-group > .form-control, .pm .input-group > .form-select { border-radius: 0; }
.pm .input-group > :first-child { border-top-left-radius: 7px; border-bottom-left-radius: 7px; }
.pm .input-group > :last-child { border-top-right-radius: 7px; border-bottom-right-radius: 7px; }
.pm .input-group-text { background: #f9fafb; color: #667085; }
.pm .form-control:focus, .pm .form-select:focus { border-color: var(--bs-primary); box-shadow: 0 0 0 3px rgba(var(--bs-primary-rgb), .12); }
.pm .row.g-3 { --bs-gutter-y: .6rem; --bs-gutter-x: .7rem; }
.pm .pm-seg { display: flex; background: #f2f4f7; border-radius: 8px; padding: 2px; gap: 2px; }
.pm .pm-seg .btn { flex: 1; font-size: .74rem; font-weight: 500; color: #475467; border: 0; border-radius: 6px; padding: .28rem .4rem; background: transparent; }
.pm .pm-seg .btn-check:checked + .btn { background: #fff; color: var(--heading); box-shadow: 0 1px 2px rgba(16, 24, 40, .12); }
.pm .pm-seg .btn-check:disabled + .btn { opacity: .45; }
.pm .pm-switch { border: 1px solid #eaecf0; border-radius: 8px; padding: .45rem .65rem; margin-bottom: .7rem; }
.pm .pm-switch .form-check { margin: 0; display: flex; gap: .5rem; padding-left: 2.4em; min-height: 0; }
.pm .pm-switch .form-check-label { font-size: .76rem; font-weight: 500; color: #344054; }
.pm .pm-switch .form-check-label span { display: block; font-size: .68rem; font-weight: 400; color: #98a2b3; }
.pm .pm-box { background: #f9fafb; border: 1px solid #eaecf0; border-radius: 9px; padding: .7rem .8rem; }
.pm .pm-box-title { font-size: .64rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: #667085; margin-bottom: .45rem; }
.pm .pm-tabs { padding: 0 1.1rem; border-bottom: 1px solid #eef0f3; gap: 1rem; }
.pm .pm-tabs .nav-link { font-size: .76rem; font-weight: 500; color: #667085; padding: .5rem 0; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none; display: flex; align-items: center; gap: .3rem; }
.pm .pm-tabs .nav-link.active { color: var(--bs-primary); border-bottom-color: var(--bs-primary); }
.pm .pm-dot { width: 5px; height: 5px; border-radius: 50%; background: transparent; }
.pm .pm-dot.on { background: var(--bs-primary); }
.pm .tab-content { min-height: 230px; }
.pm .pm-total { display: flex; align-items: baseline; flex-wrap: wrap; gap: .4rem; padding: .5rem .75rem; border-radius: 8px; background: var(--primarylight); }
.pm .pm-total span { font-size: .74rem; color: #475467; } .pm .pm-total strong { font-size: .92rem; color: var(--heading); margin-left: auto; }
.pm .pm-total small { flex-basis: 100%; font-size: .66rem; color: #667085; }

/* ---- Form panels (.po): forms shown in a right-side offcanvas (assets/js/form-panels.js) ---- */
.offcanvas.po { --bs-offcanvas-width: var(--po-width, 440px); border-left: 1px solid #eaecf0; box-shadow: -12px 0 40px rgba(16, 24, 40, .12); }
.offcanvas.po.po-lg { --bs-offcanvas-width: var(--po-width, 600px); }
.offcanvas.po.po-xl { --bs-offcanvas-width: var(--po-width, 820px); }
@media (max-width: 640px) { .offcanvas.po, .offcanvas.po.po-lg, .offcanvas.po.po-xl { --bs-offcanvas-width: 100vw; } }
.po > .po-wrap { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.po .modal-header, .po .offcanvas-header { flex: none; padding: .8rem 1.1rem .65rem; border-bottom: 1px solid #eef0f3; display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; }
.po .modal-title, .po .offcanvas-title { font-size: .95rem; font-weight: 600; color: var(--heading); margin: 0; }
.po .modal-body, .po .offcanvas-body { flex: 1 1 auto; overflow-y: auto; padding: .9rem 1.1rem 1rem; }
.po .modal-footer { flex: none; display: flex; padding: .6rem 1.1rem; border-top: 1px solid #eef0f3; background: #fafbfc; gap: .4rem; justify-content: flex-end; }
.po .pm-tabs { flex: none; }
.po .tab-content { min-height: 0; }
/* older forms inside panels: same compact look */
.po .form-label { display: block; font-size: .72rem; font-weight: 500; color: #344054; margin-bottom: .2rem; }
.po .form-label .req { color: #98a2b3; font-weight: 400; font-size: .66rem; }
.po .form-control-sm, .po .form-select-sm { font-size: .78rem; padding: .32rem .55rem; border-radius: 7px; border-color: #d0d5dd; min-height: 0; }
.po .input-group-sm > .form-control, .po .input-group-sm > .form-select, .po .input-group-sm > .input-group-text { font-size: .78rem; padding: .32rem .55rem; }
.po .input-group-sm > .input-group-text { background: #f9fafb; color: #667085; border-color: #d0d5dd; }
.po .form-check-label { font-size: .76rem; }
.po .row > [class*="col"].mb-1, .po .row > [class*="col"].mb-2 { margin-bottom: .55rem !important; }
.po .btn-sm { font-size: .78rem; border-radius: 7px; }
.po .alert { font-size: .74rem; border-radius: 8px; padding: .45rem .65rem; }
.po.po-native .offcanvas-title.text-primary { color: var(--heading) !important; }

/* read-only total shown inside .pm-total */
.pm-total input[readonly] { border: 0; background: transparent !important; padding: 0; width: 7.5em; text-align: right; font: inherit; color: inherit; outline: none; }

/* a form shown directly on a page (e.g. Renew membership) in the same design */
.pm-card { background: #fff; border: 1px solid #eaecf0; border-radius: 12px; box-shadow: 0 1px 2px rgba(16, 24, 40, .04); overflow: hidden; }
.pm-card .modal-header { padding: .8rem 1.1rem .65rem; border-bottom: 1px solid #eef0f3; }
.pm-card .modal-body { padding: .9rem 1.1rem 1rem; }
.pm-card .modal-footer { display: flex; padding: .6rem 1.1rem; border-top: 1px solid #eef0f3; background: #fafbfc; gap: .4rem; justify-content: flex-end; }