/*
 * armaLocal Affiliate Monitor: shared CTA design
 * Mobile first. Accent colours inherit the active SWELL palette.
 */
.aam-affiliate-cta {
    --aam-cta-main: var(--color_main, #2563eb);
    --aam-cta-soft: var(--color_main_thin, #eff6ff);
    --aam-cta-ink: var(--color_text, #20242a);
    --aam-cta-muted: #626a73;
    position: relative;
    margin: 2em 0;
    padding: 1.25em 1.1em 1.1em;
    overflow: hidden;
    color: var(--aam-cta-ink);
    background: #fff;
    border: 1px solid rgba(32, 36, 42, .13);
    border-radius: 16px;
    box-shadow: 0 10px 28px rgba(24, 32, 44, .08);
}

.aam-affiliate-cta,
.aam-affiliate-cta * {
    box-sizing: border-box;
}

.aam-affiliate-cta::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 5px;
    background: var(--aam-cta-main);
}

.aam-affiliate-cta > * {
    margin-top: 0;
}

.aam-affiliate-cta__kicker {
    display: inline-flex;
    align-items: center;
    width: auto;
    margin: 0 0 .75em;
    padding: .38em .7em;
    color: var(--aam-cta-ink);
    background: var(--aam-cta-soft);
    border-radius: 999px;
    font-weight: 700;
    line-height: 1.45;
}

.aam-affiliate-cta__title {
    margin-bottom: .55em;
    font-size: clamp(1.18rem, 4.8vw, 1.5rem) !important;
    line-height: 1.5;
    letter-spacing: .01em;
    font-weight: 700;
}

.aam-affiliate-cta__summary {
    margin-bottom: 1em;
    color: var(--aam-cta-muted);
    font-size: .94em;
    line-height: 1.8;
}

.aam-affiliate-cta__benefits {
    display: grid;
    grid-template-columns: 1fr;
    gap: .55em;
    margin: 0 0 1em !important;
    padding: 0 !important;
    list-style: none !important;
}

.aam-affiliate-cta__benefits li {
    position: relative;
    margin: 0 !important;
    padding: .78em .8em .78em 2.7em;
    background: var(--aam-cta-soft);
    border-radius: 10px;
    font-size: .9em;
    font-weight: 700;
    line-height: 1.55;
}

.aam-affiliate-cta__benefits li::before {
    content: "✓";
    position: absolute;
    top: .82em;
    left: .85em;
    display: grid;
    width: 1.35em;
    height: 1.35em;
    place-items: center;
    color: var(--aam-cta-main);
    background: #fff;
    border: 2px solid var(--aam-cta-main);
    border-radius: 50%;
    font-size: .78em;
    line-height: 1;
}

.aam-affiliate-cta__offer {
    margin: 0 0 .85em;
    padding: .75em .85em;
    text-align: center;
    background: #f7f8fa;
    border-radius: 9px;
    font-size: .9em;
    font-weight: 700;
    line-height: 1.55;
}

.aam-affiliate-cta__media {
    margin: 0 0 1em !important;
    overflow: hidden;
    background: #f7f8fa;
    border-radius: 10px;
}

.aam-affiliate-cta__media img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
}

.aam-affiliate-cta__tracking {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
}

.aam-affiliate-cta--native .block-editor-rich-text__editable:focus {
    outline: 1px dashed var(--aam-cta-main);
    outline-offset: 3px;
}

.aam-affiliate-cta-block__media-preview {
    display: block;
    width: 100%;
    height: auto;
    margin: 0 0 12px;
    border-radius: 6px;
}

.aam-affiliate-cta-block__media-control .components-button + .components-button {
    margin-left: 6px;
}

.aam-affiliate-cta__action {
    margin: 0;
}

.aam-affiliate-cta__action .swell-block-button {
    width: 100%;
    margin: 0;
}

.aam-affiliate-cta__action .swell-block-button__link {
    display: flex;
    width: 100%;
    min-height: 54px;
    align-items: center;
    justify-content: center;
    padding: .85em 1em;
    border-radius: 10px;
    font-size: .96em;
    font-weight: 700;
    line-height: 1.45;
    text-align: center;
}

.aam-affiliate-cta__microcopy {
    margin: .8em 0 0;
    color: var(--aam-cta-muted);
    font-weight: 700;
    line-height: 1.65;
    text-align: center;
}

.aam-affiliate-cta__notice {
    margin: .8em 0 0;
    padding-top: .75em;
    color: var(--aam-cta-muted);
    border-top: 1px solid rgba(32, 36, 42, .1);
    font-size: .72em !important;
    line-height: 1.65;
}

.aam-affiliate-compare__question {
    margin: 1em 0 .65em;
    font-size: 1em;
    font-weight: 700;
    line-height: 1.55;
}

.aam-affiliate-compare__jumps {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    margin: 0 0 1.15em;
    padding: .8em;
    background: var(--aam-cta-soft);
    border-radius: 12px;
    counter-reset: aam-jump;
}

.aam-affiliate-compare__jumps > * {
    width: 100%;
    max-width: none !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
}

.aam-affiliate-compare__jump {
    margin: 0 !important;
    padding: 0 !important;
}

.aam-affiliate-compare__jumps > .aam-affiliate-compare__jump + .aam-affiliate-compare__jump {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.aam-affiliate-compare__jump a {
    position: relative;
    display: flex;
    min-height: 66px;
    flex-direction: column;
    justify-content: center;
    padding: .75em 2.5em .75em 3.5em;
    color: var(--aam-cta-ink);
    background: #fff;
    border: 1px solid rgba(32, 36, 42, .1);
    border-radius: 10px;
    line-height: 1.45;
    text-decoration: none;
}

.aam-affiliate-compare__jump a::before {
    content: counter(aam-jump, upper-alpha);
    counter-increment: aam-jump;
    position: absolute;
    top: 50%;
    left: .85em;
    display: grid;
    width: 1.9em;
    height: 1.9em;
    place-items: center;
    color: var(--aam-cta-main);
    background: var(--aam-cta-soft);
    border: 1px solid var(--aam-cta-main);
    border-radius: 50%;
    font-size: .82em;
    font-weight: 800;
    line-height: 1;
    transform: translateY(-50%);
}

.aam-affiliate-compare__jump a::after {
    content: "↓";
    position: absolute;
    top: 50%;
    right: .85em;
    color: var(--aam-cta-main);
    font-size: 1.15em;
    font-weight: 800;
    transform: translateY(-50%);
}

.aam-affiliate-compare__jump strong,
.aam-affiliate-compare__jump span {
    display: block;
}

.aam-affiliate-compare__jump strong {
    font-size: .9em;
}

.aam-affiliate-compare__jump span {
    margin-top: .25em;
    color: var(--aam-cta-muted);
    font-size: .72em;
}

/* Gutenberg wraps child blocks in editor-only elements, so frontend sibling
   selectors cannot create the same spacing inside the editor. */
.editor-styles-wrapper .aam-affiliate-compare__jump {
    margin: 0 0 14px !important;
    padding: 0 !important;
}

.editor-styles-wrapper .aam-affiliate-compare__jump a,
.editor-styles-wrapper .aam-affiliate-compare__jump a:visited {
    color: var(--aam-cta-ink) !important;
}

.editor-styles-wrapper .aam-affiliate-compare__jump span {
    color: var(--aam-cta-muted) !important;
}

.aam-affiliate-compare {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    margin: 1.1em 0 0;
    counter-reset: aam-card;
}

.aam-affiliate-compare__card + .aam-affiliate-compare__card {
    margin-top: 0 !important;
}

.aam-affiliate-compare__card {
    position: relative;
    display: block;
    min-width: 0;
    margin: 0;
    padding: 1em;
    background: #fff;
    border: 1px solid rgba(32, 36, 42, .13);
    border-left: 5px solid var(--aam-cta-main);
    border-radius: 12px;
    box-shadow: 0 5px 16px rgba(24, 32, 44, .055);
    scroll-margin-top: 90px;
}

.aam-affiliate-compare__card::before {
    content: counter(aam-card, upper-alpha);
    counter-increment: aam-card;
    position: absolute;
    top: 1.7em;
    right: 1.75em;
    display: grid;
    width: 2em;
    height: 2em;
    place-items: center;
    color: var(--aam-cta-main);
    background: #fff;
    border: 1px solid var(--aam-cta-main);
    border-radius: 50%;
    font-size: .78em;
    font-weight: 800;
    line-height: 1;
}

.aam-affiliate-compare__card > * {
    min-width: 0;
    width: 100%;
    max-width: none !important;
    margin: 0;
    margin-right: 0 !important;
    margin-left: 0 !important;
}

.aam-affiliate-compare__choice > *,
.aam-affiliate-compare__details > *,
.aam-affiliate-compare__conversion > *,
.aam-affiliate-compare__action > * {
    width: 100%;
    max-width: none !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
}

.aam-affiliate-compare__choice {
    margin-bottom: .85em !important;
    padding: .8em 3.4em .8em .8em;
    background: var(--aam-cta-soft);
    border-radius: 9px;
}

.aam-affiliate-compare__label {
    margin: 0 0 .55em;
    padding: 0 0 .48em;
    color: var(--aam-cta-ink);
    border-bottom: 2px solid var(--aam-cta-main);
    line-height: 1.45;
    font-weight: 700;
}

.aam-affiliate-compare__name {
    margin: 0;
    font-size: 1.12em;
    line-height: 1.5;
    font-weight: 700;
}

.aam-affiliate-compare__details {
    margin-bottom: .9em !important;
    padding: .1em .2em;
}

.aam-affiliate-compare__text {
    margin: 0 0 .75em;
    color: var(--aam-cta-muted);
    line-height: 1.7;
}

.aam-affiliate-compare__points {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.aam-affiliate-compare__points li {
    position: relative;
    margin: .42em 0 0 !important;
    padding-left: 1.45em;
    font-size: .86em;
    font-weight: 700;
    line-height: 1.55;
}

.aam-affiliate-compare__points li::before {
    content: "✓";
    position: absolute;
    top: 0;
    left: 0;
    color: var(--aam-cta-main);
    font-weight: 800;
}

.aam-affiliate-compare__action {
    width: 100%;
    margin: 0;
}

.aam-affiliate-compare__conversion {
    align-self: stretch;
    max-width: 420px !important;
    margin-right: auto !important;
    margin-left: auto !important;
    padding: 0;
    background: transparent;
}

.aam-affiliate-compare__action .swell-block-button {
    width: 100%;
    margin: 0;
}

.aam-affiliate-compare__action .swell-block-button__link {
    display: flex;
    width: 100%;
    min-height: 50px;
    align-items: center;
    justify-content: center;
    padding: .78em .8em;
    border-radius: 9px;
    font-size: .9em;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
}

.aam-affiliate-compare__microcopy {
    margin: .6em 0 0;
    color: var(--aam-cta-muted);
    font-size: .7em !important;
    line-height: 1.55;
    text-align: center;
}

/* Editorial recommendation ranking */
.aam-affiliate-ranking__rank--1 {
    --aam-rank: #b9890b;
    --aam-rank-soft: #fff7d8;
}

.aam-affiliate-ranking__rank--2 {
    --aam-rank: #788492;
    --aam-rank-soft: #f0f3f6;
}

.aam-affiliate-ranking__rank--3 {
    --aam-rank: #a96332;
    --aam-rank-soft: #fff0e5;
}

.aam-affiliate-ranking__basis {
    margin: 0 0 1em !important;
    padding: .85em 1em;
    background: #f7f8fa;
    border-left: 4px solid var(--aam-cta-main);
    border-radius: 9px;
}

.aam-affiliate-ranking__basis > * {
    width: 100%;
    max-width: none !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
}

.aam-affiliate-ranking__basis-title {
    margin: 0 0 .35em;
    font-size: .9em;
    font-weight: 700;
}

.aam-affiliate-ranking__basis-text {
    margin: 0;
    color: var(--aam-cta-muted);
    line-height: 1.7;
}

.aam-affiliate-ranking__question {
    margin: 1em 0 .65em;
    font-size: 1em;
    line-height: 1.55;
    font-weight: 700;
}

.aam-affiliate-ranking__jumps {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    margin: 0 0 1.15em;
    padding: .8em;
    background: var(--aam-cta-soft);
    border-radius: 12px;
}

.aam-affiliate-ranking__jumps > * {
    width: 100%;
    max-width: none !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
}

.aam-affiliate-ranking__jump {
    margin: 0 !important;
    padding: 0 !important;
}

.aam-affiliate-ranking__jump a {
    position: relative;
    display: flex;
    min-height: 68px;
    flex-direction: column;
    justify-content: center;
    padding: .75em 2.5em .75em 4.45em;
    color: var(--aam-cta-ink);
    background: #fff;
    border: 1px solid rgba(32, 36, 42, .1);
    border-left: 4px solid var(--aam-rank);
    border-radius: 10px;
    line-height: 1.45;
    text-decoration: none;
}

.aam-affiliate-ranking__jump a::before {
    position: absolute;
    top: 50%;
    left: .75em;
    display: grid;
    width: 2.8em;
    height: 2.8em;
    place-items: center;
    color: #fff;
    background: var(--aam-rank);
    border: 3px double rgba(255, 255, 255, .75);
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(24, 32, 44, .16);
    font-size: .78em;
    font-weight: 800;
    line-height: 1;
    transform: translateY(-50%);
}

.aam-affiliate-ranking__jump.aam-affiliate-ranking__rank--1 a::before {
    content: "1位";
}

.aam-affiliate-ranking__jump.aam-affiliate-ranking__rank--2 a::before {
    content: "2位";
}

.aam-affiliate-ranking__jump.aam-affiliate-ranking__rank--3 a::before {
    content: "3位";
}

.aam-affiliate-ranking__jump a::after {
    content: "↓";
    position: absolute;
    top: 50%;
    right: .85em;
    color: var(--aam-rank);
    font-size: 1.15em;
    font-weight: 800;
    transform: translateY(-50%);
}

.aam-affiliate-ranking__jump strong,
.aam-affiliate-ranking__jump span {
    display: block;
}

.aam-affiliate-ranking__jump strong {
    font-size: .9em;
}

.aam-affiliate-ranking__jump span {
    margin-top: .25em;
    color: var(--aam-cta-muted);
    font-size: .72em;
}

.aam-affiliate-ranking {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
    margin: 1.1em 0 0;
}

.aam-affiliate-ranking__card {
    border-left-color: var(--aam-rank);
}

.aam-affiliate-ranking__card::before {
    width: 3em;
    height: 3em;
    color: #fff;
    background: var(--aam-rank);
    border: 3px double rgba(255, 255, 255, .75);
    box-shadow: 0 2px 7px rgba(24, 32, 44, .16);
}

.aam-affiliate-ranking__card.aam-affiliate-ranking__rank--1::before {
    content: "1位";
}

.aam-affiliate-ranking__card.aam-affiliate-ranking__rank--2::before {
    content: "2位";
}

.aam-affiliate-ranking__card.aam-affiliate-ranking__rank--3::before {
    content: "3位";
}

.aam-affiliate-ranking__card .aam-affiliate-compare__choice {
    background: var(--aam-rank-soft);
}

.aam-affiliate-ranking__card .aam-affiliate-compare__label {
    border-bottom-color: var(--aam-rank);
}

.aam-affiliate-ranking__reason {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .7em;
    align-items: start;
    margin: 0 0 .85em;
    padding: .75em .8em;
    color: var(--aam-cta-ink);
    background: #f7f8fa;
    border-radius: 9px;
    font-size: .86em;
    line-height: 1.65;
}

.aam-affiliate-ranking__reason strong {
    white-space: nowrap;
    color: var(--aam-rank);
}

.aam-affiliate-ranking__reason span {
    color: var(--aam-cta-muted);
}

.aam-affiliate-ranking__card .aam-affiliate-compare__points {
    margin-bottom: .95em !important;
}

.aam-affiliate-ranking__card .aam-affiliate-compare__points li::before {
    color: var(--aam-rank);
}

/* Keep longer copy easy to scan on phones. Buttons and rank badges remain
   centred by their own layout rules; explanatory text is left aligned. */
@media (max-width: 719px) {
    .aam-affiliate-cta {
        padding: 1.2em 1em 1.05em;
    }

    .aam-affiliate-cta .aam-affiliate-cta__kicker,
    .aam-affiliate-cta .aam-affiliate-cta__title,
    .aam-affiliate-cta .aam-affiliate-cta__summary,
    .aam-affiliate-cta .aam-affiliate-cta__benefits,
    .aam-affiliate-cta .aam-affiliate-cta__benefits li,
    .aam-affiliate-cta .aam-affiliate-cta__offer,
    .aam-affiliate-cta .aam-affiliate-cta__microcopy,
    .aam-affiliate-cta .aam-affiliate-cta__notice,
    .aam-affiliate-cta .aam-affiliate-compare__question,
    .aam-affiliate-cta .aam-affiliate-compare__jump a,
    .aam-affiliate-cta .aam-affiliate-compare__choice,
    .aam-affiliate-cta .aam-affiliate-compare__label,
    .aam-affiliate-cta .aam-affiliate-compare__name,
    .aam-affiliate-cta .aam-affiliate-compare__details,
    .aam-affiliate-cta .aam-affiliate-compare__text,
    .aam-affiliate-cta .aam-affiliate-compare__points,
    .aam-affiliate-cta .aam-affiliate-compare__points li,
    .aam-affiliate-cta .aam-affiliate-compare__microcopy,
    .aam-affiliate-cta .aam-affiliate-ranking__basis,
    .aam-affiliate-cta .aam-affiliate-ranking__basis-title,
    .aam-affiliate-cta .aam-affiliate-ranking__basis-text,
    .aam-affiliate-cta .aam-affiliate-ranking__question,
    .aam-affiliate-cta .aam-affiliate-ranking__jump a,
    .aam-affiliate-cta .aam-affiliate-ranking__reason,
    .aam-affiliate-cta .aam-affiliate-ranking__reason strong,
    .aam-affiliate-cta .aam-affiliate-ranking__reason span {
        text-align: left !important;
    }

    .aam-affiliate-cta__title {
        font-size: 1.18rem !important;
        line-height: 1.48;
    }

    .aam-affiliate-cta__summary,
    .aam-affiliate-compare__text,
    .aam-affiliate-ranking__basis-text {
        line-height: 1.75;
    }

    .aam-affiliate-cta__offer {
        padding: .8em .9em;
    }

    .aam-affiliate-cta__microcopy,
    .aam-affiliate-compare__microcopy {
        font-size: .76em !important;
        line-height: 1.65;
    }

    .aam-affiliate-cta__notice {
        font-size: .78em !important;
        line-height: 1.7;
    }

    .aam-affiliate-compare__jumps,
    .aam-affiliate-ranking__jumps {
        padding: .7em;
    }

    .aam-affiliate-compare__jump a,
    .aam-affiliate-ranking__jump a {
        min-height: 64px;
    }

    .aam-affiliate-compare__card {
        padding: .9em;
    }

    .aam-affiliate-compare__choice {
        padding: .78em 3.2em .78em .78em;
    }

    .aam-affiliate-ranking__reason {
        display: block;
        padding: .75em .8em;
    }

    .aam-affiliate-ranking__reason strong,
    .aam-affiliate-ranking__reason span {
        display: block;
        white-space: normal;
    }

    .aam-affiliate-ranking__reason span {
        margin-top: .25em;
    }

    .aam-affiliate-cta .aam-affiliate-cta__action .swell-block-button__link,
    .aam-affiliate-cta .aam-affiliate-compare__action .swell-block-button__link {
        text-align: center !important;
    }
}

@media (min-width: 720px) {
    .aam-affiliate-cta {
        padding: 1.6em 1.75em 1.35em;
    }

    .aam-affiliate-cta__benefits {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .aam-affiliate-cta__action {
        max-width: 620px;
        margin-right: auto;
        margin-left: auto;
    }

    .aam-affiliate-compare__points {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .25em 1.2em;
    }
}

@media (prefers-reduced-motion: no-preference) {
    .aam-affiliate-cta__action .swell-block-button__link {
        transition: transform .16s ease, filter .16s ease;
    }

    .aam-affiliate-cta__action .swell-block-button__link:hover {
        transform: translateY(-1px);
        filter: brightness(.94);
    }

    .aam-affiliate-compare__action .swell-block-button__link {
        transition: transform .16s ease, filter .16s ease;
    }

    .aam-affiliate-compare__action .swell-block-button__link:hover {
        transform: translateY(-1px);
        filter: brightness(.94);
    }
}