/*!
 * RKR API Conversions Pro - front-office styles
 *
 * Only the consent preferences page and the optional header link are styled.
 * The module never injects visual elements into the shop templates.
 *
 * Translatable CSS content: every string rendered through a pseudo-element is
 * declared with attr(data-i18n-*) so the translated value comes from the
 * template (and therefore from the module translations) instead of being
 * hardcoded here.
 *
 * @author    RKR
 * @copyright 2026 RKR
 * @license   https://opensource.org/licenses/AFL-3.0 Academic Free License version 3.0
 */

.rkra-consent-link {
    display: inline-flex;
    align-items: center;
    margin-left: 8px;
    font-size: 13px;
}

.rkra-consent-link a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none;
}

.rkra-consent-link__icon {
    display: inline-flex;
    opacity: .7;
}

.rkra-consent-link a:hover .rkra-consent-link__icon { opacity: 1; }

/* Fallback label rendered with CSS when the template text is removed by a theme */
.rkra-consent-link [data-i18n="consentTitle"]:empty::after {
    content: attr(data-i18n-fallback);
}

.rkra-consent-page {
    max-width: 760px;
    padding: 24px 0 48px;
    margin: 0 auto;
}

.rkra-consent-page__title {
    margin: 0 0 8px;
    font-size: 26px;
    font-weight: 700;
}

.rkra-consent-page__intro {
    margin: 0 0 24px;
    font-size: 15px;
    line-height: 1.6;
    opacity: .8;
}

.rkra-consent-form fieldset {
    padding: 0;
    margin: 0 0 18px;
    border: 0;
}

.rkra-consent-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0;
    border-bottom: 1px solid rgba(0, 0, 0, .1);
}

.rkra-consent-row__label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 15px;
    font-weight: 600;
}

.rkra-consent-row__label code {
    font-size: 11px;
    font-weight: 400;
    opacity: .55;
}

.rkra-consent-row__options { display: inline-flex; gap: 8px; }

.rkra-consent-option {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid rgba(0, 0, 0, .18);
    border-radius: 999px;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.rkra-consent-option input { accent-color: #5a8023; }

.rkra-consent-option:hover { border-color: #5a8023; }

.rkra-consent-option:has(input:checked),
.rkra-consent-option.is-checked {
    color: #fff;
    background: #5a8023;
    border-color: #5a8023;
}

.rkra-consent-page__note {
    padding: 12px 14px;
    margin: 0 0 20px;
    font-size: 13px;
    line-height: 1.6;
    background: rgba(63, 98, 18, .08);
    border-left: 3px solid #5a8023;
    border-radius: 6px;
}

.rkra-consent-page__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.rkra-consent-page__feedback {
    min-height: 22px;
    margin: 14px 0 0;
    font-size: 13px;
    font-weight: 600;
}

.rkra-consent-page__feedback.is-ok { color: #15803d; }
.rkra-consent-page__feedback.is-ko { color: #b91c1c; }

.rkra-consent-destinations {
    padding: 16px;
    margin-top: 26px;
    background: rgba(0, 0, 0, .04);
    border-radius: 10px;
}

.rkra-consent-destinations h2 {
    margin: 0 0 8px;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    opacity: .7;
}

.rkra-consent-destinations ul {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.rkra-consent-destinations li {
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 600;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, .12);
    border-radius: 999px;
}

@media (max-width: 575px) {
    .rkra-consent-row { flex-direction: column; align-items: flex-start; }
    .rkra-consent-page__actions .btn { flex: 1 1 100%; }
}