/*!
 * Agree Terms Pro — Lumvara skin.
 *
 * Loaded automatically when the client area template is Lumvara. It only
 * retunes the module's tokens to the theme's own palette, so nothing here
 * affects any other template.
 *
 * @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 {
    /* The Lumvara CTA is amber, so text on it must be dark. */
    --atp-brand-ink: #1a1204;

    --atp-surface: var(--lv-elevated, #1a1e27);
    --atp-surface-deep: var(--gray-950, #0c0b10);
    --atp-surface-alt: var(--lv-focusbed, #2d323e);
    --atp-text: var(--lv-text, #fcfcfd);
    --atp-muted: var(--lv-muted, #cdd5df);
    --atp-dim: var(--lv-dim, #697586);
    --atp-line: var(--lv-line, rgba(255, 255, 255, .08));
    --atp-brand: var(--lv-lumen, #feb54a);
    --atp-brand-hover: var(--lv-lumen-hover, #fec065);
    --atp-success: var(--lv-pulse, #2fd8c6);
    --atp-warning: var(--lv-warning, #fea439);
    --atp-danger: var(--lv-danger, #fc5d5d);
    --atp-info: var(--lv-info, #53b1fd);
    --atp-radius-card: 14px;
    --atp-radius-control: 10px;
    --atp-shadow: 0 18px 50px -12px rgba(0, 0, 0, .6);
    --atp-font: var(--font-ui, 'Ubuntu', system-ui, sans-serif);
}

/* Headings inside an agreement use the theme's display face. */
.atp-doc h1,
.atp-doc h2,
.atp-doc h3,
.atp-gate__doc h1,
.atp-gate__doc h2,
.atp-gate__doc h3,
.atp-gate__title,
.atp-modal__title {
    font-family: var(--font-heading, 'Share Tech', 'Ubuntu', system-ui, sans-serif);
    font-weight: 500;
    letter-spacing: 0;
}

/* Amber glow on the primary action, as the theme does for its own CTAs. */
.atp-btn--primary:hover,
.atp-btn--go:hover {
    box-shadow: 0 0 26px -6px var(--atp-brand);
}

.atp-sig__canvas {
    background: var(--gray-950, #0c0b10);
}

/* The theme paints its own page bloom; keep panel heads flat against it. */
.atp-gate__head,
.atp-gate__foot {
    background: rgba(255, 255, 255, .015);
}

.atp-table th {
    background: rgba(255, 255, 255, .015);
}

.atp-table tbody tr:hover td {
    background: rgba(255, 255, 255, .02);
}

.atp-overlay {
    background: rgba(5, 6, 9, .82);
}

/* Stacked table cards sit on the deep surface, like the theme's own rows. */
@media (max-width: 767.98px) {
    .atp-table--stack tbody tr {
        background: var(--lv-elevated, #1a1e27);
    }
}

/* The reminder matches the theme's own banner: near-black bed, amber dot and
   a fading tint from the left, exactly as .lv-alert paints it. */
.atp-notice {
    background: #0b0c0f;
    border: 1px solid rgba(255, 255, 255, .07);
    border-radius: 14px;
    padding: .8125rem 1rem;
    gap: .875rem;
    --atp-notice-dot: #fdb022;
    --atp-notice-tint: rgba(253, 176, 34, .24);
}

/* The theme's CTA is a bordered ghost button tinted to the severity. */
.atp-notice__cta {
    border: 1px solid color-mix(in srgb, var(--atp-notice-dot) 45%, transparent);
    border-radius: 10px;
    padding: .4375rem .875rem;
    font-size: .75rem;
    font-weight: 600;
}

.atp-notice__icon {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .07);
}

.atp-notice__title {
    color: #fff;
}

.atp-notice__desc {
    color: var(--gray-400, #9aa4b3);
}

/* Cards use the theme's own list card treatment. */
.atp-card {
    background: var(--gray-900, #171b23);
    border-color: var(--lv-line, rgba(255, 255, 255, .08));
    border-radius: 16px;
}

.atp-card__head {
    padding: 1.125rem 1.375rem;
}

.atp-card__title {
    font-family: var(--font-heading, 'Share Tech', 'Ubuntu', sans-serif);
    font-weight: 400;
    font-size: 1.125rem;
}

.atp-card__title svg {
    color: var(--brand-500, #feb54a);
}

.atp-card__link {
    color: var(--gray-400, #9aa4b3);
}

.atp-card__link:hover {
    color: var(--brand-500, #feb54a);
}

.atp-row {
    padding: .9375rem 1.375rem;
    border-bottom-color: rgba(255, 255, 255, .05);
}

.atp-row--link:hover {
    background: rgba(255, 255, 255, .02);
}

/* Gradient icon tiles, as the theme uses for its section headers. */
.atp-row__icon {
    background: linear-gradient(135deg, rgba(254, 181, 74, .28), rgba(254, 181, 74, .08));
    border-color: rgba(254, 181, 74, .22);
    color: #fec05a;
}

.atp-row__icon--green {
    background: linear-gradient(135deg, rgba(47, 216, 198, .28), rgba(47, 216, 198, .08));
    border-color: rgba(47, 216, 198, .22);
    color: #57e0d0;
}

.atp-row__icon--blue {
    background: linear-gradient(135deg, rgba(88, 150, 255, .28), rgba(88, 150, 255, .08));
    border-color: rgba(88, 150, 255, .22);
    color: #7ca9ff;
}

.atp-row__icon--red {
    background: linear-gradient(135deg, rgba(252, 93, 93, .28), rgba(252, 93, 93, .08));
    border-color: rgba(252, 93, 93, .22);
    color: #ff8a8a;
}

.atp-row__icon--amber {
    background: linear-gradient(135deg, rgba(253, 176, 34, .28), rgba(253, 176, 34, .08));
    border-color: rgba(253, 176, 34, .22);
    color: #fdc45c;
}

.atp-empty__icon {
    background: var(--gray-800, #212630);
}

.atp-record-head__title,
.atp-details__value {
    color: var(--gray-25, #fcfcfd);
}

/* The wording is set a step below the theme's body size so the sentence and
   the agreement's name stay together on one line. */
.atp-checklist label.atp-checklist__label {
    font-size: .8125rem;
    line-height: 1.5;
}

/* The tick list reads as one of the theme's cards. */
.atp-checklist {
    background: var(--gray-900, #171b23);
    border-color: var(--lv-line, rgba(255, 255, 255, .08));
}

.atp-checklist .atp-checklist__head {
    padding: 1.125rem 1.375rem;
}

.atp-checklist .atp-checklist__title {
    font-family: var(--font-heading, 'Share Tech', 'Ubuntu', sans-serif);
    font-weight: 400;
    font-size: 1.0625rem;
    color: var(--gray-25, #fcfcfd);
}

.atp-checklist li.atp-checklist__item {
    padding: .9375rem 1.375rem;
    border-bottom-color: rgba(255, 255, 255, .05);
}

.atp-checklist span.atp-checklist__text {
    color: var(--gray-200, #e3e8ef);
}

.atp-checklist a.atp-checklist__link {
    color: var(--brand-500, #feb54a);
}

.atp-checklist .atp-checklist__error {
    padding: .875rem 1.375rem;
}

/* The tick box is the theme's own .lv-cb-box, rendered by the module and
   painted entirely by the theme, so it tracks any restyling there. */
.atp-checklist label.atp-check.atp-themed.atp-checklist__control {
    width: auto;
    height: auto;
    margin-top: 2px;
}

.atp-gate__check .atp-check.atp-themed {
    margin-right: 0;
}

/* Home page panel: cancel the theme's body padding so the rows sit flush and
   their separators run the full width, as the theme's own panel lists do. */
.lv-panel-body .atp-panel-list {
    margin: -1.25rem -1.5rem;
}

.lv-panel-body .atp-panel-list .atp-row {
    padding: .875rem 1.5rem;
}

.lv-panel-body .atp-panel-list .atp-row:first-child {
    padding-top: .875rem;
}

.lv-panel-body .atp-panel-list .atp-row:last-child {
    padding-bottom: .875rem;
}

.lv-panel-body .atp-panel-list .atp-row + .atp-row {
    border-top: 1px solid var(--lv-line, rgba(255, 255, 255, .08));
}

.lv-panel-body .atp-panel-list .atp-row {
    border-bottom: 0;
}

/* The theme colours every link inside a panel body, which would turn each
   agreement row amber. Rows keep the list typography instead. */
.lv-panel-body .atp-panel-list a.atp-row,
.lv-panel-body .atp-panel-list a.atp-row:hover {
    color: inherit;
    text-decoration: none;
}

.lv-panel-body .atp-panel-list .atp-row__title {
    color: var(--gray-25, #fcfcfd);
}

.lv-panel-body .atp-panel-list .atp-row__sub {
    color: var(--gray-500, #697586);
}

.lv-panel-body .atp-panel-list a.atp-row:hover {
    background: rgba(255, 255, 255, .03);
}

.lv-panel-body .atp-panel-list a.atp-row:hover .atp-row__title {
    color: var(--brand-500, #feb54a);
}

/* ============================================================
   Reader — matched to the theme's own dialog (.lv-dlg / .lv-modal)
   ============================================================ */

.atp-modal__backdrop {
    background: rgba(5, 6, 9, .8);
    backdrop-filter: blur(3px);
}

.atp-modal__dialog {
    background: var(--gray-900, #171b23);
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 16px;
    box-shadow: 0 24px 64px -12px rgba(0, 0, 0, .8);
    animation: atpLvDlgIn .18s cubic-bezier(.2, .7, .2, 1);
}

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

.atp-modal__head {
    padding: 1.125rem 1.25rem;
    border-bottom: 1px solid var(--lv-line, rgba(255, 255, 255, .08));
}

.atp-modal__title {
    font-family: var(--font-heading, 'Share Tech', 'Ubuntu', sans-serif);
    font-weight: 400;
    font-size: 1.0625rem;
    color: var(--gray-25, #fcfcfd);
}

.atp-modal__x {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    font-size: 20px;
    color: var(--gray-500, #697586);
    transition: background .16s var(--lv-ease, ease), color .16s var(--lv-ease, ease);
}

.atp-modal__x:hover {
    background: rgba(255, 255, 255, .08);
    color: #fff;
}

.atp-modal__body {
    padding: 1.25rem;
    color: var(--gray-200, #e3e8ef);
}

.atp-modal__sign {
    padding: 0 1.25rem 1rem;
    border-top: 1px solid rgba(255, 255, 255, .07);
}

.atp-modal__foot {
    padding: 1rem 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, .07);
}

.atp-modal__actions {
    gap: .5rem;
}

.atp-modal__actions .atp-btn {
    padding: .5625rem 1.125rem;
}

/* ============================================================
   Full panel — matched to the theme's card
   ============================================================ */

.atp-gate {
    background: var(--gray-900, #171b23);
    border-color: var(--lv-line, rgba(255, 255, 255, .08));
    border-radius: 16px;
    box-shadow: none;
}

.atp-gate__head {
    padding: 1.125rem 1.375rem;
    border-bottom-color: var(--lv-line, rgba(255, 255, 255, .08));
}

/* The section icon tile the theme uses on its own card headings. */
.atp-gate__icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(254, 181, 74, .28), rgba(254, 181, 74, .08));
    border: 1px solid rgba(254, 181, 74, .22);
    color: #fec05a;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08);
}

.atp-gate__title {
    font-family: var(--font-heading, 'Share Tech', 'Ubuntu', sans-serif);
    font-weight: 400;
    font-size: 1.125rem;
    letter-spacing: -.01em;
    color: var(--gray-25, #fcfcfd);
}

.atp-gate__lead {
    color: var(--gray-500, #697586);
}

.atp-gate__doc {
    padding: 1.25rem 1.375rem;
    color: var(--gray-200, #e3e8ef);
}

.atp-gate__sign {
    padding: 0 1.375rem 1.25rem;
    border-top-color: rgba(255, 255, 255, .07);
}

.atp-gate__foot {
    padding: 1.125rem 1.375rem;
    border-top-color: var(--lv-line, rgba(255, 255, 255, .08));
    background: rgba(255, 255, 255, .015);
}

.atp-gate__check {
    font-size: var(--text-md, .8125rem);
    color: var(--gray-200, #e3e8ef);
}

.atp-gate-list {
    background: var(--gray-900, #171b23);
    border-color: var(--lv-line, rgba(255, 255, 255, .08));
    border-radius: 16px;
    box-shadow: none;
}

/* Signature fields follow .lv-input. */
.atp-sig__input,
.atp-sig__name input {
    background: var(--gray-950, #0c0b10);
    border-color: var(--lv-line, rgba(255, 255, 255, .08));
    border-radius: 10px;
    color: var(--gray-25, #fcfcfd);
}

.atp-sig__input:focus,
.atp-sig__name input:focus {
    border-color: var(--lv-lumen, #feb54a);
    box-shadow: 0 0 0 3px rgba(254, 181, 74, .12);
}

.atp-sig__tab {
    border-radius: 10px;
    border-color: var(--lv-line, rgba(255, 255, 255, .08));
    color: var(--gray-300, #cdd5df);
}

.atp-sig__tab.is-active {
    background: var(--lv-lumen, #feb54a);
    border-color: var(--lv-lumen, #feb54a);
    color: #1a1204;
}

/* ============================================================
   Home page panel — matched to the theme's tickets and news cards
   ============================================================ */

/* The theme's own panels use a plain amber text link, not the bordered
   button its addon panel template renders, so ours is toned to match. Scoped
   to this panel so other modules keep the button they expect. */
.lv-panel:has(.atp-panel-list) .lv-panel-btn {
    padding: 0;
    border: 0;
    background: none;
    color: var(--brand-500, #feb54a);
    font-size: var(--text-sm, .75rem);
    font-weight: 600;
}

.lv-panel:has(.atp-panel-list) .lv-panel-btn:hover {
    color: var(--brand-400, #fec065);
}

.lv-panel:has(.atp-panel-list) .lv-panel-title {
    font-size: 1.125rem;
    font-weight: 600;
}

/* Rows follow the ticket row: 36px tile, title, status pill, no chevron. */
.lv-panel-body .atp-panel-list .atp-row {
    gap: .75rem;
    border-radius: 1rem;
}

.lv-panel-body .atp-panel-list .atp-row__icon {
    width: 36px;
    height: 36px;
    border-radius: 12px;
}

.lv-panel-body .atp-panel-list .atp-row__title {
    font-size: .9375rem;
    font-weight: 600;
}

.lv-panel-body .atp-panel-list .atp-row__sub {
    font-size: var(--text-sm, .75rem);
}

.lv-panel-body .atp-panel-list .atp-badge {
    padding: .25rem .625rem;
    font-size: .6875rem;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
}

/* ============================================================
   Continue — the theme's primary call to action
   ============================================================ */

.atp-btn--go {
    background: var(--lv-lumen, #feb54a);
    border-color: var(--lv-lumen, #feb54a);
    color: #1a1204;
    padding: .5625rem 1.25rem;
    border-radius: 10px;
    font-weight: 600;
}

.atp-btn--go:hover {
    background: var(--brand-400, #fec065);
    border-color: var(--brand-400, #fec065);
    color: #1a1204;
    filter: brightness(1.06);
    box-shadow: 0 0 26px -6px var(--lv-lumen, #feb54a);
}

.atp-btn--go.is-blocked,
.atp-btn--go.is-blocked:hover {
    box-shadow: none;
    filter: none;
}

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

/* Email me is a secondary action, so it reads as a ghost button. */
.atp-btn--amber {
    background: transparent;
    border-color: var(--lv-line, rgba(255, 255, 255, .08));
    color: var(--gray-200, #e3e8ef);
}

.atp-btn--amber:hover {
    background: var(--lv-focusbed, #2d323e);
    border-color: rgba(254, 181, 74, .45);
    color: var(--brand-500, #feb54a);
    filter: none;
}

/* Status pills use the theme's own status colours rather than a computed
   mix, so they read identically to the OPEN and PAID chips elsewhere. */
.atp-badge {
    background: rgba(255, 255, 255, .05);
    color: var(--lv-dim, #697586);
}

.atp-badge--accepted {
    background: rgba(47, 216, 198, .12);
    color: var(--lv-pulse, #2fd8c6);
}

.atp-badge--declined {
    background: rgba(255, 90, 95, .12);
    color: var(--lv-danger, #fc5d5d);
}

.atp-badge--superseded,
.atp-badge--expired {
    background: rgba(245, 197, 24, .12);
    color: var(--lv-warning, #fea439);
}

/* Renewal notice, sitting above the order button in the summary card. */
.atp-renewal {
    color: var(--gray-400, #9aa4b3);
    font-size: var(--text-sm, .75rem);
}

/* ============================================================
   The invoice page, in this theme

   It sits inside the theme's payment card, so it borrows that card's own
   surfaces rather than drawing a competing card of its own.
   ============================================================ */
.atp-inline-host .atp-checklist__title {
    color: var(--gray-400, #97a1af);
    font-family: inherit;
}

.atp-inline-host .atp-checklist__headicon {
    color: var(--brand-500, #feb54a);
}

.atp-inline-host .atp-checklist__notice {
    background: rgba(255, 255, 255, .03);
    border: 1px solid rgba(255, 255, 255, .07);
    color: var(--gray-300, #cdd5df);
}

.atp-inline-host .atp-checklist__noticehead {
    color: var(--gray-100, #eef1f6);
}

.atp-inline-host .atp-checklist span.atp-checklist__text {
    color: var(--gray-200, #e3e8ef);
}

.atp-inline-host a.atp-checklist__link {
    color: var(--brand-500, #feb54a);
}

/* Separated from the pay button so the two do not read as one control. */
.atp-inline-host {
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, .07);
}