/*
 * Marketing consent — fine print disclaimer with an inline text-link toggle.
 *
 * The disclaimer reads as a sentence, with a small underlined "opt out" / "undo"
 * link at the end (a <button> styled as a link, since it toggles in-page state
 * rather than navigating). The whole thing is a single italic line of muted
 * text — visually a setting/footnote, not a form field.
 *
 * The row's data-state attribute switches which disclaimer/link pair is shown.
 */

.marketing-consent-row {
    max-width: none;
    width: 100%;
    margin: 14px auto 0;
    padding: 0 var(--spacing-4);
    overflow-x: auto;
    text-align: center;
}

.marketing-consent-text {
    display: block;
    font-size: 12px;
    line-height: 1.6;
    color: var(--text-muted);
    font-weight: 400;
    font-style: italic;
    opacity: 0.78;
    transition: opacity 0.2s ease;
    margin: 0;
    white-space: nowrap;
}

.marketing-consent-refund {
    margin-top: 2px;
}

.marketing-consent-row:hover .marketing-consent-text,
.marketing-consent-row:focus-within .marketing-consent-text {
    opacity: 1;
}

[data-state-shown-when] {
    display: inline;
}

.marketing-consent-row[data-state="opted-out"] [data-state-shown-when="opted-in"],
.marketing-consent-row[data-state="opted-in"] [data-state-shown-when="opted-out"] {
    display: none;
}

.marketing-consent-link {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: none;
    padding: 0;
    margin-inline-start: 4px;
    font: inherit;
    font-style: normal;
    color: inherit;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-style: dotted;
    text-decoration-thickness: 1px;
    transition: color 0.15s ease, text-decoration-style 0.15s ease;
}

.marketing-consent-link:hover {
    color: var(--text-primary);
    text-decoration-style: solid;
}

.marketing-consent-link:focus-visible {
    outline: 1px dotted currentColor;
    outline-offset: 2px;
    border-radius: 2px;
}

[dir="rtl"] .marketing-consent-text {
    font-style: normal;
}