/*!
 * Agree Terms Pro — client area styling.
 *
 * Everything is driven by --atp-* tokens which default to a light palette
 * but inherit the active theme's own variables when they exist, so the
 * module picks up the surrounding design instead of fighting it. A theme
 * skin in assets/css/themes/<template>.css can override the tokens further.
 *
 * @author Tivro.Net
 */

.atp-wrapper,
.atp-checklist,
.atp-modal,
.atp-overlay,
.atp-gate,
.atp-gate-list,
.atp-notice,
.atp-card,
.atp-verify,
.atp-list,
.atp-panel-list,
.atp-page {
    --atp-surface: var(--lv-elevated, #ffffff);
    --atp-surface-deep: var(--lv-void, #f8fafc);
    --atp-surface-alt: var(--lv-focusbed, #f8fafc);
    --atp-text: var(--lv-text, #1f2937);
    --atp-muted: var(--lv-muted, #4b5563);
    --atp-dim: var(--lv-dim, #6b7280);
    --atp-line: var(--lv-line, #e2e8f0);
    --atp-brand: var(--lv-lumen, #0189fd);
    --atp-brand-hover: var(--lv-lumen-hover, #0170d1);
    --atp-on-brand: var(--atp-brand-ink, #ffffff);
    --atp-success: var(--lv-success, #16a34a);
    --atp-warning: var(--lv-warning, #f0ad4e);
    --atp-danger: var(--lv-danger, #dc2626);
    --atp-info: var(--lv-info, #2e90fa);
    --atp-radius: var(--atp-radius-card, 14px);
    --atp-radius-sm: var(--atp-radius-control, 10px);
    --atp-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 12px 32px rgba(15, 23, 42, .08);
    --atp-font: var(--font-ui, inherit);
}

/* ------------------------------------------------------------- checklist */

/* Selectors here carry an extra class or element on purpose: themes style
   `label`, `input` and `a` inside their content area with rules that would
   otherwise outrank a single class and break the layout. */

.atp-checklist {
    border: 1px solid var(--atp-line, #e2e8f0);
    border-radius: 16px;
    background: var(--atp-surface, #ffffff);
    color: var(--atp-text);
    font-family: var(--atp-font, inherit);
    font-size: 14px;
    margin: 20px 0;
    overflow: hidden;
}

.atp-checklist .atp-checklist__head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px 20px;
    border-bottom: 1px solid var(--atp-line, #e2e8f0);
}

.atp-checklist .atp-checklist__headicon {
    color: var(--atp-brand);
    flex: 0 0 auto;
}

.atp-checklist .atp-checklist__title {
    font-weight: 600;
    font-size: 14px;
    color: var(--atp-text);
    margin: 0;
}

.atp-checklist ul.atp-checklist__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.atp-checklist li.atp-checklist__item {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 10px;
    margin: 0;
    padding: 13px 20px;
    border-bottom: 1px solid var(--atp-line, #e2e8f0);
    list-style: none;
}

.atp-checklist li.atp-checklist__item:last-child {
    border-bottom: 0;
}

.atp-checklist label.atp-checklist__label {
    display: block;
    margin: 0;
    padding: 0;
    font-weight: 400;
    /* Sized so a sentence and the agreement's name usually sit on one line.
       Wrapping between the two reads as a mistake, since the link looks like
       the start of a second item rather than the end of the first. */
    font-size: 13px;
    line-height: 1.5;
    color: var(--atp-muted);
    cursor: pointer;
    flex: 1 1 auto;
    min-width: 0;
}

/* The control is a sibling of the label, so the row survives any theme rule
   that turns a label into a block. A fixed slot keeps the tick aligned with
   the first line of wrapping text. */
.atp-checklist .atp-checklist__control {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    margin: 2px 0 0;
    padding: 0;
}

.atp-checklist .atp-checklist__control input.atp-checklist__box {
    width: 18px;
    height: 18px;
    margin: 0;
    padding: 0;
    flex: 0 0 auto;
    accent-color: var(--atp-brand);
    cursor: pointer;
}

.atp-checklist span.atp-checklist__text {
    display: inline;
    color: var(--atp-muted);
    font-size: inherit;
}

.atp-checklist a.atp-checklist__link {
    color: var(--atp-brand);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.atp-checklist a.atp-checklist__link:hover {
    color: var(--atp-brand-hover);
}

.atp-checklist .atp-checklist__req {
    color: var(--atp-danger);
    margin-left: 2px;
}

.atp-checklist .atp-checklist__optional {
    color: var(--atp-dim);
    font-style: italic;
}

.atp-checklist li.atp-checklist__item.is-accepted a.atp-checklist__link {
    color: var(--atp-success);
}

.atp-checklist .atp-checklist__error {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 12px 20px;
    border-top: 1px solid var(--atp-line, #e2e8f0);
    background: color-mix(in srgb, var(--atp-danger) 10%, transparent);
    color: var(--atp-danger);
    font-size: 13px;
}

.atp-checklist .atp-checklist__error[hidden] {
    display: none;
}

.atp-checklist .atp-checklist__erroricon {
    flex: 0 0 auto;
}

/* ----------------------------------------------------------------- modal */

.atp-modal {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    font-family: var(--atp-font);
}

.atp-modal[hidden] {
    display: none;
}

.atp-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(5, 6, 9, .74);
    backdrop-filter: blur(3px);
}

.atp-modal__dialog {
    position: relative;
    background: var(--atp-surface);
    color: var(--atp-text);
    border: 1px solid var(--atp-line);
    border-radius: 16px;
    width: 100%;
    max-width: 860px;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .55);
    animation: atpDialogIn .18s cubic-bezier(.2, .7, .2, 1);
}

@keyframes atpDialogIn {
    from { opacity: 0; transform: translateY(8px) scale(.985); }
    to { opacity: 1; transform: none; }
}

.atp-modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--atp-line);
}

.atp-modal__title {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--atp-text);
}

.atp-modal__x {
    background: none;
    border: 0;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    color: var(--atp-dim);
    padding: 0 4px;
}

.atp-modal__x:hover {
    color: var(--atp-text);
}

.atp-modal__body {
    overflow-y: auto;
    padding: 20px;
    flex: 1 1 auto;
    min-height: 180px;
    font-size: 14px;
    line-height: 1.7;
}

.atp-modal__body:focus {
    outline: none;
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--atp-brand) 25%, transparent);
}

.atp-modal__sign {
    padding: 0 20px 16px;
    border-top: 1px solid var(--atp-line);
}

.atp-modal__sign[hidden] {
    display: none;
}

.atp-modal__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    border-top: 1px solid var(--atp-line);
    flex-wrap: wrap;
}

.atp-modal__note {
    font-size: 13px;
    color: var(--atp-dim);
    flex: 1 1 200px;
}

.atp-modal__note.is-error {
    color: var(--atp-danger);
}

.atp-modal__actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.atp-modal.is-forced .atp-modal__x,
.atp-modal.is-forced .atp-modal__foot [data-atp-close] {
    display: none;
}

.atp-modal.is-forced .atp-modal__backdrop {
    cursor: default;
}

/* --------------------------------------------------------------- buttons */

.atp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid var(--atp-line, #e2e8f0);
    background: transparent;
    color: var(--atp-muted, #4b5563);
    border-radius: var(--atp-radius-sm, 10px);
    padding: 9px 16px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
    text-decoration: none;
    transition: background .2s ease, color .2s ease, border-color .2s ease, box-shadow .28s ease, filter .2s ease;
}

.atp-btn:hover {
    background: var(--atp-surface-alt);
    color: var(--atp-text);
    text-decoration: none;
}

.atp-btn--primary {
    background: var(--atp-brand);
    border-color: var(--atp-brand);
    color: var(--atp-on-brand);
}

.atp-btn--primary:hover {
    background: var(--atp-brand-hover);
    border-color: var(--atp-brand-hover);
    color: var(--atp-on-brand);
    filter: brightness(1.04);
}

.atp-btn--amber {
    background: var(--atp-warning);
    border-color: var(--atp-warning);
    color: #1a1204;
}

.atp-btn--amber:hover {
    filter: brightness(1.06);
    color: #1a1204;
}

.atp-btn--go {
    background: var(--atp-success);
    border-color: var(--atp-success);
    color: #04140a;
}

.atp-btn--go:hover {
    filter: brightness(1.06);
    color: #04140a;
}

.atp-btn--ghost {
    background: transparent;
    border-color: transparent;
    color: var(--atp-dim);
}

.atp-btn--ghost:hover {
    background: var(--atp-surface-alt);
    color: var(--atp-text);
}

.atp-btn--sm {
    padding: 6px 12px;
    font-size: 12px;
}

.atp-btn[disabled] {
    opacity: .5;
    cursor: not-allowed;
    filter: none;
    box-shadow: none;
}

/* ------------------------------------------------------------- signature */

.atp-sig__head {
    font-weight: 600;
    font-size: 12px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--atp-dim);
    margin: 14px 0 8px;
}

.atp-sig__tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 10px;
}

.atp-sig__tab {
    border: 1px solid var(--atp-line, #e2e8f0);
    background: transparent;
    color: var(--atp-muted, #4b5563);
    border-radius: var(--atp-radius-sm, 10px);
    padding: 6px 13px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

.atp-sig__tab.is-active {
    background: var(--atp-brand);
    border-color: var(--atp-brand);
    color: var(--atp-on-brand);
}

.atp-sig__canvas {
    border: 1px dashed var(--atp-line);
    border-radius: var(--atp-radius-sm);
    background: var(--atp-surface-deep);
    touch-action: none;
    max-width: 100%;
    cursor: crosshair;
}

.atp-sig__hint {
    font-size: 12px;
    color: var(--atp-dim);
    margin-top: 6px;
}

.atp-sig__clear {
    background: none;
    border: 0;
    color: var(--atp-brand);
    cursor: pointer;
    padding: 0;
    font-size: 12px;
    text-decoration: underline;
}

.atp-sig__input,
.atp-sig__name input {
    width: 100%;
    max-width: 380px;
    padding: 10px 12px;
    border: 1px solid var(--atp-line);
    border-radius: var(--atp-radius-sm);
    background: var(--atp-surface-deep);
    color: var(--atp-text);
    font-family: inherit;
    font-size: 14px;
    transition: border-color .24s ease, box-shadow .28s ease;
}

.atp-sig__input:focus,
.atp-sig__name input:focus {
    outline: none;
    border-color: var(--atp-brand);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--atp-brand) 18%, transparent);
}

.atp-sig__preview {
    margin-top: 10px;
    font-family: "Segoe Script", "Brush Script MT", cursive;
    font-size: 30px;
    min-height: 44px;
    border-bottom: 1px solid var(--atp-line);
    max-width: 380px;
    color: var(--atp-text);
}

.atp-sig__name {
    display: block;
    margin-top: 12px;
    font-size: 13px;
}

.atp-sig__name span {
    display: block;
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--atp-dim);
}

/* --------------------------------------------------- per section initials */

.atp-section {
    border-left: 3px solid transparent;
    padding-left: 12px;
    margin-bottom: 6px;
}

.atp-section.is-initialled {
    border-left-color: var(--atp-success);
}

.atp-initials {
    margin: 8px 0 18px;
    padding: 10px 12px;
    background: var(--atp-surface-deep);
    border: 1px dashed var(--atp-line);
    border-radius: var(--atp-radius-sm);
}

.atp-initials__label {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 11px;
    font-weight: 700;
    color: var(--atp-dim);
    text-transform: uppercase;
    letter-spacing: .06em;
}

.atp-initials__req {
    color: var(--atp-danger);
}

.atp-initials__input {
    width: 92px;
    padding: 6px 9px;
    border: 1px solid var(--atp-line);
    border-radius: 8px;
    background: var(--atp-surface);
    color: var(--atp-text);
    font-family: inherit;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: .08em;
}

/* ------------------------------------------------- forced acceptance page */

.atp-page--gate {
    max-width: 900px;
    margin: 0 auto;
}

.atp-gate {
    border: 1px solid var(--atp-line);
    border-radius: var(--atp-radius);
    overflow: hidden;
    background: var(--atp-surface);
    color: var(--atp-text);
    font-family: var(--atp-font);
    margin-bottom: 24px;
    box-shadow: var(--atp-shadow);
}

.atp-gate.is-accepted {
    border-color: var(--atp-success);
}

.atp-gate__head {
    display: flex;
    align-items: center;
    gap: 12px;
    background: transparent;
    border-bottom: 1px solid var(--atp-line);
    padding: 18px 22px;
    text-align: left;
}

.atp-gate__icon {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    border-radius: 10px;
    background: color-mix(in srgb, var(--atp-brand) 16%, transparent);
    border: 1px solid color-mix(in srgb, var(--atp-brand) 22%, transparent);
    color: var(--atp-brand);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}

.atp-gate__heading {
    min-width: 0;
}

.atp-gate__title {
    display: block;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--atp-text);
}

.atp-gate__lead {
    display: block;
    font-size: 12px;
    color: var(--atp-dim);
    margin-top: 2px;
}

.atp-gate__doc {
    max-height: 420px;
    min-height: 180px;
    overflow-y: auto;
    padding: 20px 22px;
}

.atp-gate__doc:focus {
    outline: none;
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--atp-brand) 20%, transparent);
}

.atp-gate__sign {
    padding: 4px 24px 16px;
    border-top: 1px solid var(--atp-line);
}

.atp-gate__foot {
    border-top: 1px solid var(--atp-line);
    background: transparent;
    padding: 18px 22px;
    text-align: center;
}

.atp-gate__check {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 4px;
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
    color: var(--atp-text);
}

.atp-gate__check input {
    width: 18px;
    height: 18px;
    accent-color: var(--atp-brand);
    cursor: pointer;
}

.atp-gate__check input[disabled] + span {
    color: var(--atp-dim);
}

.atp-gate__note {
    min-height: 18px;
    font-size: 12px;
    color: var(--atp-dim);
    margin-bottom: 10px;
}

.atp-gate__note.is-error {
    color: var(--atp-danger);
}

.atp-gate__actions {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
}

/* Tick list on the forced page and inside the overlay */
.atp-gate-list {
    background: var(--atp-surface);
    border: 1px solid var(--atp-line);
    border-radius: var(--atp-radius);
    padding: 20px 22px;
    margin-bottom: 24px;
    color: var(--atp-text);
    font-family: var(--atp-font);
    box-shadow: var(--atp-shadow);
}

.atp-gate-list__lead {
    margin: 0 0 6px;
    font-size: 13px;
    color: var(--atp-dim);
}

.atp-gate-list .atp-checklist {
    border: 0;
    padding: 0;
    margin: 0;
    background: transparent;
    box-shadow: none;
}

.atp-gate-list .atp-checklist__title {
    display: none;
}

.atp-gate-list__actions {
    margin-top: 16px;
    display: flex;
    justify-content: flex-end;
}

/* --------------------------------------------------------------- overlay */

.atp-overlay {
    position: fixed;
    inset: 0;
    z-index: 100001;
    background: rgba(5, 6, 9, .8);
    backdrop-filter: blur(3px);
    overflow-y: auto;
    padding: 24px 16px;
    -webkit-overflow-scrolling: touch;
}

.atp-overlay__inner {
    max-width: 880px;
    margin: 0 auto;
}

.atp-overlay .atp-gate,
.atp-overlay .atp-gate-list {
    box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .8);
}

/* --------------------------------------------------- client area surfaces */

.atp-page {
    font-family: var(--atp-font);
    font-size: 14px;
    color: var(--atp-muted);
}

.atp-alert {
    border-radius: var(--atp-radius-sm);
    padding: 13px 16px;
    margin-bottom: 18px;
    background: color-mix(in srgb, var(--atp-info) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--atp-info) 30%, transparent);
    color: var(--atp-info);
    font-size: 13px;
}

.atp-alert--warn {
    background: color-mix(in srgb, var(--atp-warning) 10%, transparent);
    border-color: color-mix(in srgb, var(--atp-warning) 30%, transparent);
    color: var(--atp-warning);
}

.atp-alert--ok {
    background: color-mix(in srgb, var(--atp-success) 10%, transparent);
    border-color: color-mix(in srgb, var(--atp-success) 30%, transparent);
    color: var(--atp-success);
}

.atp-alert a {
    color: inherit;
    text-decoration: underline;
}

.atp-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--atp-line);
    border-radius: var(--atp-radius);
    background: var(--atp-surface);
    margin-bottom: 18px;
}

.atp-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.atp-table th {
    text-align: left;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--atp-dim);
    padding: 12px 20px;
    border-bottom: 1px solid var(--atp-line);
    white-space: nowrap;
}

.atp-table td {
    padding: 15px 20px;
    border-bottom: 1px solid var(--atp-line);
    vertical-align: middle;
    font-size: 13px;
    color: var(--atp-muted);
}

.atp-table tbody tr:last-child td {
    border-bottom: 0;
}

.atp-table .atp-right {
    text-align: right;
}

.atp-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 999px;
    padding: 4px 11px;
    font-size: 11px;
    font-weight: 600;
    background: color-mix(in srgb, var(--atp-dim) 14%, transparent);
    color: var(--atp-dim);
    white-space: nowrap;
}

.atp-badge--accepted {
    background: color-mix(in srgb, var(--atp-success) 14%, transparent);
    color: var(--atp-success);
}

.atp-badge--declined {
    background: color-mix(in srgb, var(--atp-danger) 14%, transparent);
    color: var(--atp-danger);
}

.atp-badge--superseded,
.atp-badge--expired {
    background: color-mix(in srgb, var(--atp-warning) 14%, transparent);
    color: var(--atp-warning);
}

.atp-doc--framed {
    border: 1px solid var(--atp-line);
    border-radius: var(--atp-radius);
    padding: 22px;
    background: var(--atp-surface);
    max-height: 620px;
    overflow-y: auto;
}

.atp-actions {
    margin: 16px 0;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.atp-meta {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--atp-dim);
    margin-bottom: 14px;
}

.atp-meta strong {
    color: var(--atp-text);
}

.atp-empty {
    padding: 40px 20px;
    text-align: center;
    color: var(--atp-dim);
    border: 1px dashed var(--atp-line);
    border-radius: var(--atp-radius);
}

.atp-hash {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
    word-break: break-all;
}

.atp-signature-view {
    margin-top: 16px;
    border: 1px solid var(--atp-line);
    border-radius: var(--atp-radius-sm);
    padding: 16px;
    display: inline-block;
    background: var(--atp-surface-deep);
}

.atp-signature-view img {
    max-height: 110px;
}

.atp-signature-view--typed {
    font-family: "Segoe Script", "Brush Script MT", cursive;
    font-size: 30px;
    color: var(--atp-text);
}

.atp-policy-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.atp-policy-list li {
    padding: 14px 0;
    border-bottom: 1px solid var(--atp-line);
    font-size: 15px;
}

.atp-doc-head h2 {
    margin: 0 0 6px;
    font-size: 20px;
    color: var(--atp-text);
}

/* ----------------------------------------------- agreement body typography */

.atp-doc,
.atp-gate__doc {
    color: var(--atp-muted);
    font-size: 14px;
    line-height: 1.75;
    word-wrap: break-word;
}

.atp-doc h1, .atp-gate__doc h1 { font-size: 20px; font-weight: 700; margin: 22px 0 10px; line-height: 1.3; color: var(--atp-text); }
.atp-doc h2, .atp-gate__doc h2 { font-size: 17px; font-weight: 700; margin: 22px 0 8px; line-height: 1.35; color: var(--atp-text); }
.atp-doc h3, .atp-gate__doc h3 { font-size: 15px; font-weight: 700; margin: 18px 0 6px; color: var(--atp-text); }
.atp-doc h4, .atp-doc h5, .atp-doc h6,
.atp-gate__doc h4, .atp-gate__doc h5, .atp-gate__doc h6 { font-size: 14px; font-weight: 700; margin: 16px 0 6px; color: var(--atp-text); }

.atp-doc h1:first-child, .atp-doc h2:first-child, .atp-doc h3:first-child,
.atp-gate__doc h1:first-child, .atp-gate__doc h2:first-child, .atp-gate__doc h3:first-child { margin-top: 0; }

.atp-doc p, .atp-gate__doc p { margin: 0 0 12px; color: inherit; }

.atp-doc ul, .atp-doc ol,
.atp-gate__doc ul, .atp-gate__doc ol { margin: 0 0 12px; padding-left: 24px; list-style-position: outside; }

.atp-doc ul, .atp-gate__doc ul { list-style-type: disc; }
.atp-doc ol, .atp-gate__doc ol { list-style-type: decimal; }
.atp-doc li, .atp-gate__doc li { margin-bottom: 5px; color: inherit; }
.atp-doc li > ul, .atp-doc li > ol,
.atp-gate__doc li > ul, .atp-gate__doc li > ol { margin-top: 5px; }

.atp-doc a, .atp-gate__doc a { color: var(--atp-brand); text-decoration: underline; }
.atp-doc strong, .atp-doc b, .atp-gate__doc strong, .atp-gate__doc b { font-weight: 700; color: var(--atp-text); }
.atp-doc em, .atp-doc i, .atp-gate__doc em, .atp-gate__doc i { font-style: italic; }

.atp-doc blockquote, .atp-gate__doc blockquote {
    margin: 0 0 12px;
    padding: 10px 16px;
    border-left: 3px solid var(--atp-brand);
    background: var(--atp-surface-deep);
    color: var(--atp-dim);
}

.atp-doc hr, .atp-gate__doc hr { border: 0; border-top: 1px solid var(--atp-line); margin: 18px 0; }
.atp-doc img, .atp-gate__doc img { max-width: 100%; height: auto; }

.atp-doc table, .atp-gate__doc table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 14px;
    font-size: 13px;
}

.atp-doc th, .atp-doc td,
.atp-gate__doc th, .atp-gate__doc td {
    border: 1px solid var(--atp-line);
    padding: 8px 10px;
    text-align: left;
    vertical-align: top;
}

.atp-doc th, .atp-gate__doc th { background: var(--atp-surface-deep); font-weight: 700; color: var(--atp-text); }

.atp-doc pre, .atp-gate__doc pre {
    background: var(--atp-surface-deep);
    border-radius: 8px;
    padding: 12px 14px;
    overflow-x: auto;
    font-size: 12.5px;
    margin: 0 0 12px;
}

.atp-doc code, .atp-gate__doc code {
    background: var(--atp-surface-deep);
    border-radius: 4px;
    padding: 1px 5px;
    font-size: 12.5px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.atp-doc pre code, .atp-gate__doc pre code { background: none; padding: 0; }
.atp-doc > *:last-child, .atp-gate__doc > *:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------ responsive */

@media (max-width: 600px) {
    .atp-modal__dialog { max-height: 96vh; }
    .atp-checklist__item { flex-direction: column; gap: 4px; }
    .atp-gate__doc { max-height: 320px; padding: 16px; }
    .atp-gate__actions .atp-btn { flex: 1 1 auto; }
    .atp-gate-list__actions .atp-btn { width: 100%; }
}

/* Definition style rows (verification page) */
.atp-table--rows th {
    text-transform: none;
    letter-spacing: 0;
    font-size: 13px;
    font-weight: 500;
    color: var(--atp-dim);
    width: 230px;
    white-space: normal;
    vertical-align: top;
}

.atp-cell-strong {
    color: var(--atp-text);
    font-weight: 600;
}

/* ------------------------------------------------- tables on small screens */

@media (max-width: 767.98px) {
    /* Rows become cards: the header row is dropped and every cell titles
       itself from the label carried on the cell. */
    .atp-table-wrap {
        overflow-x: visible;
        border: 0;
        background: transparent;
    }

    .atp-table--stack,
    .atp-table--stack thead,
    .atp-table--stack tbody,
    .atp-table--stack tr,
    .atp-table--stack td {
        display: block;
        width: 100%;
    }

    .atp-table--stack thead {
        display: none;
    }

    .atp-table--stack tbody tr {
        background: var(--atp-surface);
        border: 1px solid var(--atp-line);
        border-radius: var(--atp-radius);
        margin-bottom: 12px;
        padding: 4px 2px;
    }

    .atp-table--stack tbody td {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 14px;
        padding: 10px 16px;
        border-bottom: 1px solid var(--atp-line);
        text-align: right;
    }

    .atp-table--stack tbody tr td:last-child,
    .atp-table--stack tbody tr td:only-child {
        border-bottom: 0;
    }

    .atp-table--stack tbody td::before {
        content: attr(data-atp-label);
        flex: 0 0 auto;
        font-size: 11px;
        font-weight: 600;
        letter-spacing: .08em;
        text-transform: uppercase;
        color: var(--atp-dim);
        text-align: left;
        padding-top: 2px;
    }

    .atp-table--stack tbody td:empty,
    .atp-table--stack tbody td[data-atp-label=""] {
        display: none;
    }

    /* The action cell reads better as full width buttons under the card. */
    .atp-table--stack .atp-cell-actions {
        display: block;
        text-align: left;
        padding-top: 12px;
    }

    .atp-table--stack .atp-cell-actions::before {
        display: none;
    }

    .atp-table--stack .atp-cell-actions .atp-btn {
        width: calc(50% - 4px);
        margin-right: 4px;
    }

    .atp-table--rows th,
    .atp-table--rows td {
        display: block;
        width: 100%;
    }

    .atp-table--rows th {
        border-bottom: 0;
        padding-bottom: 0;
        font-size: 11px;
        letter-spacing: .08em;
        text-transform: uppercase;
    }

    .atp-table--rows td {
        padding-top: 4px;
    }

    .atp-meta {
        gap: 6px 18px;
    }

    .atp-actions .atp-btn {
        flex: 1 1 auto;
    }
}

/* --------------------------------------------- standing client area notice */

.atp-notice {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: nowrap;
    padding: 13px 16px;
    margin: 0 0 12px;
    border-radius: var(--atp-radius, 14px);
    border: 1px solid var(--atp-line, #e2e8f0);
    background: var(--atp-surface, #ffffff);
    font-family: var(--atp-font, inherit);
    --atp-notice-dot: var(--atp-warning, #f0ad4e);
    --atp-notice-tint: color-mix(in srgb, var(--atp-warning) 22%, transparent);
}

.atp-notice::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(90deg, var(--atp-notice-tint) 0%, rgba(0, 0, 0, 0) 62%);
}

.atp-notice > * {
    position: relative;
    z-index: 1;
}

.atp-notice__icon {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: color-mix(in srgb, var(--atp-text) 5%, transparent);
    border: 1px solid var(--atp-line);
}

.atp-notice__icon::before {
    content: "";
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: var(--atp-notice-dot);
}

.atp-notice__body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}

.atp-notice__title {
    font-size: 14px;
    font-weight: 600;
    color: var(--atp-text);
    line-height: 1.45;
}

.atp-notice__desc {
    font-size: 13px;
    color: var(--atp-dim);
    line-height: 1.45;
}

.atp-notice__actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

.atp-notice__cta {
    border-color: color-mix(in srgb, var(--atp-notice-dot) 45%, transparent);
    color: var(--atp-notice-dot);
    white-space: nowrap;
}

.atp-notice__cta:hover {
    background: color-mix(in srgb, var(--atp-notice-dot) 12%, transparent);
    border-color: var(--atp-notice-dot);
    color: var(--atp-notice-dot);
}

.atp-notice--danger {
    --atp-notice-dot: var(--atp-danger);
    --atp-notice-tint: color-mix(in srgb, var(--atp-danger) 22%, transparent);
}

@media (max-width: 600px) {
    .atp-notice {
        flex-wrap: wrap;
    }

    .atp-notice__actions {
        width: 100%;
    }

    .atp-notice__cta {
        width: 100%;
    }
}

/* ---------------------------------------------------------- link buttons */

/* Themes commonly colour every anchor inside the content area with a rule
   like `.lv-main a`, which outranks a single class and repaints the label
   of a link styled as a button — amber text on an amber button. These
   selectors carry an extra element or class so the button always wins. */
a.atp-btn,
.atp-wrapper a.atp-btn,
.atp-notice a.atp-btn,
.atp-gate a.atp-btn,
.atp-gate-list a.atp-btn,
.atp-modal a.atp-btn {
    color: var(--atp-muted, #4b5563);
    text-decoration: none;
}

a.atp-btn--primary,
.atp-wrapper a.atp-btn--primary,
.atp-notice a.atp-btn--primary,
.atp-gate a.atp-btn--primary,
.atp-gate-list a.atp-btn--primary,
.atp-modal a.atp-btn--primary,
a.atp-btn--primary:hover,
.atp-wrapper a.atp-btn--primary:hover {
    color: var(--atp-on-brand, #ffffff);
}

a.atp-btn--amber,
.atp-wrapper a.atp-btn--amber,
a.atp-btn--amber:hover {
    color: #1a1204;
}

a.atp-btn--go,
.atp-wrapper a.atp-btn--go,
a.atp-btn--go:hover {
    color: #04140a;
}

a.atp-btn--ghost,
.atp-wrapper a.atp-btn--ghost {
    color: var(--atp-dim, #6b7280);
}

.atp-notice a.atp-notice__cta,
.atp-notice a.atp-notice__cta:hover {
    color: var(--atp-notice-dot);
}

/* Links inside an agreement body keep the theme's own link colour, but the
   ones the module renders as buttons must not. */
.atp-wrapper a.atp-btn:hover,
.atp-notice a.atp-btn:hover {
    text-decoration: none;
}

/* ------------------------------------------------------------------ cards */

.atp-card {
    background: var(--atp-surface, #ffffff);
    border: 1px solid var(--atp-line, #e2e8f0);
    border-radius: 16px;
    overflow: hidden;
    margin-bottom: 20px;
}

.atp-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 22px;
    border-bottom: 1px solid var(--atp-line, #e2e8f0);
}

.atp-card__title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -.01em;
    color: var(--atp-text);
}

.atp-card__title svg {
    color: var(--atp-brand);
    flex: 0 0 auto;
}

.atp-card__link {
    color: var(--atp-dim);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.atp-card__link:hover {
    color: var(--atp-brand);
}

.atp-card__body {
    padding: 20px 22px;
}

.atp-card__body--flush {
    padding: 0;
}

/* ------------------------------------------------------------- list rows */

.atp-list {
    display: flex;
    flex-direction: column;
}

.atp-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 15px 22px;
    border-bottom: 1px solid var(--atp-line, #e2e8f0);
    text-decoration: none;
    color: inherit;
}

.atp-row:last-child {
    border-bottom: 0;
}

.atp-row--link {
    transition: background .15s ease;
}

.atp-row--link:hover {
    background: color-mix(in srgb, var(--atp-text) 3%, transparent);
    text-decoration: none;
}

.atp-row__icon {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
    border-radius: 10px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
    background: color-mix(in srgb, var(--atp-brand) 16%, transparent);
    border: 1px solid color-mix(in srgb, var(--atp-brand) 22%, transparent);
    color: var(--atp-brand);
}

.atp-row__icon--green {
    background: color-mix(in srgb, var(--atp-success) 16%, transparent);
    border-color: color-mix(in srgb, var(--atp-success) 22%, transparent);
    color: var(--atp-success);
}

.atp-row__icon--amber {
    background: color-mix(in srgb, var(--atp-warning) 16%, transparent);
    border-color: color-mix(in srgb, var(--atp-warning) 22%, transparent);
    color: var(--atp-warning);
}

.atp-row__icon--red {
    background: color-mix(in srgb, var(--atp-danger) 16%, transparent);
    border-color: color-mix(in srgb, var(--atp-danger) 22%, transparent);
    color: var(--atp-danger);
}

.atp-row__icon--blue {
    background: color-mix(in srgb, var(--atp-info) 16%, transparent);
    border-color: color-mix(in srgb, var(--atp-info) 22%, transparent);
    color: var(--atp-info);
}

.atp-row__main {
    flex: 1 1 auto;
    min-width: 0;
}

.atp-row__title {
    display: block;
    color: var(--atp-text);
    font-weight: 600;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.atp-row__sub {
    display: block;
    color: var(--atp-dim);
    font-size: 12px;
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.atp-row__meta {
    flex: 0 0 auto;
    text-align: right;
}

.atp-row__meta-label {
    display: block;
    color: var(--atp-dim);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.atp-row__meta-value {
    display: block;
    color: var(--atp-muted);
    font-size: 13px;
    font-weight: 600;
    margin-top: 2px;
    white-space: nowrap;
}

.atp-row__actions {
    flex: 0 0 auto;
    display: flex;
    gap: 6px;
}

.atp-row__go {
    flex: 0 0 auto;
    color: var(--atp-dim);
    display: grid;
    place-items: center;
}

.atp-btn--icon {
    padding: 6px 9px;
}

/* ------------------------------------------------------------- detail grid */

.atp-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px 24px;
}

.atp-details__item {
    min-width: 0;
}

.atp-details__label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--atp-dim);
    margin-bottom: 4px;
}

.atp-details__value {
    display: block;
    font-size: 14px;
    color: var(--atp-text);
    word-break: break-word;
}

.atp-details__hash {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--atp-line);
}

.atp-details__hashvalue {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    color: var(--atp-muted);
    word-break: break-all;
}

.atp-mono {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 13px;
}

/* --------------------------------------------------------- record heading */

.atp-record-head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 18px;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--atp-line);
}

.atp-record-head__main {
    flex: 1 1 auto;
    min-width: 0;
}

.atp-record-head__title {
    display: block;
    font-size: 17px;
    font-weight: 600;
    color: var(--atp-text);
}

.atp-record-head__ref {
    display: block;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
    color: var(--atp-dim);
    margin-top: 2px;
}

.atp-signature-by {
    margin-top: 10px;
    font-size: 12px;
    color: var(--atp-dim);
}

/* ----------------------------------------------------------- verification */

.atp-verify {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px 22px;
    margin-bottom: 20px;
    border-radius: 16px;
    border: 1px solid color-mix(in srgb, var(--atp-success) 30%, transparent);
    background: color-mix(in srgb, var(--atp-success) 10%, transparent);
}

.atp-verify__mark {
    display: grid;
    place-items: center;
    width: 46px;
    height: 46px;
    flex: 0 0 auto;
    border-radius: 14px;
    background: color-mix(in srgb, var(--atp-success) 18%, transparent);
    color: var(--atp-success);
}

.atp-verify__title {
    font-size: 15px;
    font-weight: 600;
    color: var(--atp-success);
}

/* ------------------------------------------------------------ empty state */

.atp-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 48px 24px;
    border: 0;
    color: var(--atp-dim);
}

.atp-empty__icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: color-mix(in srgb, var(--atp-text) 5%, transparent);
    border: 1px solid var(--atp-line);
    color: var(--atp-dim);
    margin-bottom: 14px;
}

.atp-empty__title {
    font-size: 15px;
    font-weight: 600;
    color: var(--atp-text);
    margin-bottom: 4px;
}

.atp-empty__text {
    font-size: 13px;
    max-width: 320px;
}

@media (max-width: 767.98px) {
    .atp-row {
        flex-wrap: wrap;
        gap: 10px 14px;
        padding: 14px 16px;
    }

    .atp-row__main {
        flex: 1 1 60%;
    }

    .atp-row__meta {
        text-align: left;
    }

    .atp-row__actions {
        width: 100%;
    }

    .atp-row__actions .atp-btn {
        flex: 1 1 auto;
    }

    .atp-card__head,
    .atp-card__body {
        padding: 16px;
    }
}

/* ------------------------------------------------------------- tick boxes */

/* The native control is kept for behaviour and accessibility but hidden over
   a drawn box, so the tick matches the surrounding design rather than the
   operating system. */
.atp-check {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin: 0;
    padding: 0;
    cursor: pointer;
}

.atp-check input[type="checkbox"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 1;
}

.atp-check:not(.atp-themed) .atp-check__mark {
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    border-radius: 6px;
    border: 1.5px solid var(--atp-line, #cbd5e1);
    background: var(--atp-surface-deep, #f8fafc);
    color: var(--atp-on-brand, #ffffff);
    transition: background .16s ease, border-color .16s ease, box-shadow .16s ease;
}

.atp-check:not(.atp-themed) .atp-check__mark svg {
    opacity: 0;
    transform: scale(.6);
    transition: opacity .14s ease, transform .14s ease;
}

.atp-check:not(.atp-themed) input[type="checkbox"]:hover:not(:disabled) + .atp-check__mark {
    border-color: var(--atp-brand, #0189fd);
}

.atp-check:not(.atp-themed) input[type="checkbox"]:checked + .atp-check__mark {
    background: var(--atp-brand, #0189fd);
    border-color: var(--atp-brand, #0189fd);
}

.atp-check:not(.atp-themed) input[type="checkbox"]:checked + .atp-check__mark svg {
    opacity: 1;
    transform: none;
}

.atp-check:not(.atp-themed) input[type="checkbox"]:focus-visible + .atp-check__mark {
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--atp-brand) 25%, transparent);
}

.atp-check input[type="checkbox"]:disabled {
    cursor: not-allowed;
}

.atp-check:not(.atp-themed) input[type="checkbox"]:disabled + .atp-check__mark {
    opacity: .45;
}

/* The checklist slot is now the drawn box itself. */
.atp-checklist label.atp-check.atp-checklist__control {
    width: 20px;
    height: 20px;
    margin: 1px 0 0;
    padding: 0;
}

.atp-gate__check .atp-check {
    margin-right: 2px;
}

/* --------------------------------------------- checklist on small screens */

@media (max-width: 575.98px) {
    .atp-checklist {
        margin: 16px 0;
        border-radius: 12px;
    }

    .atp-checklist .atp-checklist__head {
        padding: 13px 15px;
        gap: 8px;
    }

    .atp-checklist .atp-checklist__title {
        font-size: 13px;
    }

    .atp-checklist li.atp-checklist__item {
        padding: 13px 15px;
        flex-wrap: wrap;
        row-gap: 8px;
    }

    /* Box and wording keep the first line together; the print button wraps
       underneath, lined up with the text rather than the box. */
    .atp-checklist label.atp-checklist__label {
        flex: 1 1 calc(100% - 32px);
        font-size: 12.5px;
    }

    .atp-checklist .atp-checklist__error {
        padding: 11px 15px;
        font-size: 12.5px;
        align-items: flex-start;
    }

    .atp-gate__check {
        align-items: flex-start;
        text-align: left;
        font-size: 13.5px;
    }

    .atp-gate__head {
        padding: 14px 16px;
    }

    .atp-gate__title {
        font-size: 15px;
    }

    .atp-gate__foot {
        padding: 14px 16px;
    }

    .atp-modal {
        padding: 0;
    }

    .atp-modal__dialog {
        max-height: 100vh;
        height: 100%;
        border-radius: 0;
        border: 0;
    }

    .atp-modal__head,
    .atp-modal__foot {
        padding: 14px 16px;
    }

    .atp-modal__body {
        padding: 16px;
    }

    .atp-modal__actions {
        width: 100%;
    }

    .atp-modal__actions .atp-btn {
        flex: 1 1 auto;
    }

    .atp-overlay {
        padding: 12px 10px;
    }
}

/* A theme supplied tick box paints itself, so the module's own box, border
   and icon step aside rather than drawing a second control on top. */
.atp-check.atp-themed {
    width: auto;
    height: auto;
}

.atp-check.atp-themed input[type="checkbox"] {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
}

/* The theme's box is left entirely alone: only the module's own check icon
   is hidden, since the theme draws its own tick. */
.atp-check.atp-themed .atp-check__mark svg {
    display: none;
}

/* ------------------------------------------------- client area home panel */

/* The rows carry their own padding, so they run edge to edge inside a panel
   body that already has some. The negative margin is set per theme, since
   only the theme knows how much padding it applied. */
.atp-panel-list {
    margin: 0;
}

.atp-panel-list .atp-row {
    padding-left: 0;
    padding-right: 0;
}

.atp-panel-list .atp-row:first-child {
    padding-top: 0;
}

.atp-panel-list .atp-row:last-child {
    padding-bottom: 0;
}

/* No chevron in a panel: the theme's own rows do without one, and it steals
   width from the title. The status pill takes the right hand side instead. */
.atp-panel-list .atp-row__go {
    display: none;
}

.atp-panel-list .atp-row .atp-badge {
    margin-left: auto;
    flex: 0 0 auto;
}

.atp-panel-list .atp-row__main {
    flex: 1 1 auto;
}

/* Count beside the account menu entry */
.atp-menu-count {
    display: inline-flex;
    align-items: center;
    margin-left: auto;
    padding: 1px 7px;
    border-radius: 999px;
    background: var(--atp-warning, #f0ad4e);
    color: #1a1204;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.5;
}

/* A continue button that cannot proceed yet stays clickable so it can say
   why, and is dimmed rather than disabled. */
.atp-btn.is-blocked {
    opacity: .5;
    cursor: not-allowed;
    box-shadow: none;
    filter: none;
}

/* ------------------------------------------------------- renewal notice */

.atp-renewal {
    margin: 0 0 10px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--atp-dim, #6b7280);
    text-align: center;
}

/* -------------------------------------------- authorisation notice block */

/* An agreement carrying a notice stacks: the wording sits above its own tick
   box row, so it is read before it is agreed to rather than after. */
.atp-checklist li.atp-checklist__item--notice {
    display: block;
}

.atp-checklist .atp-checklist__notice {
    margin-bottom: 12px;
}

.atp-checklist .atp-checklist__noticetitle {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--atp-text, #1f2937);
    margin-bottom: 5px;
}

.atp-checklist .atp-checklist__noticetext {
    font-size: 13px;
    line-height: 1.6;
    color: var(--atp-muted, #4b5563);
}

.atp-checklist .atp-checklist__noticetext p {
    margin: 0 0 8px;
}

.atp-checklist .atp-checklist__noticetext p:last-child {
    margin-bottom: 0;
}

.atp-checklist .atp-checklist__noticetext a {
    color: var(--atp-brand, #0189fd);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.atp-checklist .atp-checklist__row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}



/* An agreement filtered out by the payment gateway choice */
.atp-hidden {
    display: none !important;
}

/* The link flows with the sentence it belongs to.

   It used to be `white-space: nowrap`, to stop a short bracketed label like
   [Read Terms] splitting across lines. The cost was worse: a longer name could
   not break either, so the moment it did not fit at the end of the line the
   whole thing dropped to a line of its own and read as a separate item. A
   short label rarely needs breaking anyway, and one that does is better broken
   than exiled. */
.atp-checklist a.atp-checklist__link,
.atp-checklist__noticetext a {
    white-space: normal;
}

/* ============================================================
   The invoice page

   Written straight into the page rather than placed by script, and it lands
   in the narrow column beside the total. Everything here is scoped to that
   host, so the order form is untouched.

   The theme owns that column and styles any list it finds there, which is
   where the stray bullet and the loose line height came from. Those rules are
   overridden deliberately rather than fought with specificity games.
   ============================================================ */
.atp-inline-host {
    display: block;
    margin: 14px 0 12px;
}

.atp-inline-host .atp-checklist,
.atp-inline-host .atp-panel-list,
.atp-inline-host .atp-panel {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
}

/* The surrounding theme decorates lists; this one is a set of rows. */
.atp-inline-host ul,
.atp-inline-host ol,
.atp-inline-host li {
    margin: 0 !important;
    padding-left: 0 !important;
    list-style: none !important;
}

.atp-inline-host li::marker {
    content: none !important;
}

.atp-inline-host .atp-checklist__head {
    gap: 7px;
    padding: 0 0 8px;
    border: 0;
    background: none;
}

.atp-inline-host .atp-checklist__title {
    font-size: 12px;
    letter-spacing: .04em;
    text-transform: uppercase;
    opacity: .75;
}

.atp-inline-host .atp-checklist__headicon {
    width: 15px;
    height: 15px;
}

/* The agreement's own wording, kept to a readable block that scrolls rather
   than pushing the pay button off the screen. */
.atp-inline-host .atp-checklist__notice {
    margin: 0 0 10px;
    padding: 10px 12px;
    font-size: 12.5px;
    line-height: 1.55;
    max-height: 170px;
    overflow-y: auto;
    border-radius: 10px;
}

.atp-inline-host .atp-checklist__noticehead {
    font-size: 12.5px;
    margin-bottom: 5px;
}

.atp-inline-host .atp-checklist__item {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 0;
    border: 0;
}

.atp-inline-host .atp-checklist__row {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    width: 100%;
}

/* A 16px box that stays 16px however cramped the column gets. */
.atp-inline-host .atp-check,
.atp-inline-host .lv-cb-box {
    flex: 0 0 auto;
    margin-top: 1px;
}

.atp-inline-host .atp-checklist label.atp-checklist__label {
    flex: 1 1 auto;
    font-size: 12.5px;
    line-height: 1.55;
}

.atp-inline-host a.atp-checklist__link {
    font-weight: 600;
}

.atp-inline-host .atp-checklist__error {
    margin-top: 8px;
    font-size: 12px;
}

.atp-inline-host .atp-checklist__notice::-webkit-scrollbar {
    width: 6px;
}

.atp-inline-host .atp-checklist__notice::-webkit-scrollbar-thumb {
    border-radius: 3px;
    background: rgba(127, 137, 161, .35);
}