/* Trust bar — main-domain UI/UX redesign (Batch 11)
 *
 * Three trust chips placed under the plan strip on landing.php and offers.php.
 * Self-contained: every value rides theme_a/tokens.css. Uses logical
 * properties (margin-inline, padding-block, inset-inline-*) so RTL is free.
 *
 * Layout:
 *   ≥768px  three chips on a single horizontal row, divided by hairlines.
 *   <768px  chips stack vertically, full-width tap targets.
 */

.trust-bar {
    --trust-bar-pad-block: var(--space-4);
    --trust-bar-pad-inline: var(--space-5);
    --trust-bar-gap: var(--space-3);
    --trust-bar-radius: var(--radius);
    --trust-bar-icon-size: 18px;
    --trust-bar-flag-size: 22px;
    --trust-bar-dot-size: 10px;

    display: block;
    margin-block: var(--space-6) var(--space-7);
    margin-inline: 0;
    padding-block: var(--trust-bar-pad-block);
    padding-inline: var(--trust-bar-pad-inline);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--trust-bar-radius);
    box-shadow: 0 1px 2px rgba(var(--text-rgb), 0.04);
    contain: layout paint;
}

.trust-bar__title.visually-hidden,
.trust-bar .visually-hidden {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.trust-bar__list {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--trust-bar-gap);
    margin: 0;
    padding: 0;
    list-style: none;
}

.trust-bar__item {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-block-size: 36px;
    padding-block: var(--space-2);
    padding-inline: 0;
    color: var(--text);
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.35;
}

.trust-bar__text {
    color: var(--text-strong);
}

.trust-bar__icon {
    inline-size: var(--trust-bar-icon-size);
    block-size: var(--trust-bar-icon-size);
    color: var(--primary);
    flex: 0 0 auto;
}

.trust-bar__arrow {
    inline-size: 14px;
    block-size: 14px;
    color: var(--muted);
    flex: 0 0 auto;
    transition: transform var(--dur-fast) var(--ease-standard);
}

[dir="rtl"] .trust-bar__arrow {
    transform: scaleX(-1);
}

.trust-bar__dot {
    inline-size: var(--trust-bar-dot-size);
    block-size: var(--trust-bar-dot-size);
    border-radius: 999px;
    background: var(--success);
    box-shadow: 0 0 0 4px rgba(var(--success-rgb), 0.18);
    flex: 0 0 auto;
    animation: trust-bar-pulse 2.4s var(--ease-standard) infinite;
}

@keyframes trust-bar-pulse {
    0%, 100% {
        box-shadow: 0 0 0 4px rgba(var(--success-rgb), 0.18);
    }
    50% {
        box-shadow: 0 0 0 7px rgba(var(--success-rgb), 0.06);
    }
}

.trust-bar__count {
    color: var(--text-strong);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.trust-bar__link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: inherit;
    text-decoration: none;
    border-radius: 8px;
    padding-block: var(--space-1);
    padding-inline: var(--space-1);
    margin-inline: calc(var(--space-1) * -1);
    transition: color var(--dur-fast) var(--ease-standard),
                background var(--dur-fast) var(--ease-standard);
}

.trust-bar__link:hover,
.trust-bar__link:focus-visible {
    color: var(--primary);
    background: rgba(var(--primary-rgb), 0.06);
}

.trust-bar__link:focus-visible {
    outline: 0;
    box-shadow: var(--focus-ring);
}

.trust-bar__link:hover .trust-bar__arrow,
.trust-bar__link:focus-visible .trust-bar__arrow {
    color: var(--primary);
    transform: translateX(2px);
}

[dir="rtl"] .trust-bar__link:hover .trust-bar__arrow,
[dir="rtl"] .trust-bar__link:focus-visible .trust-bar__arrow {
    transform: scaleX(-1) translateX(2px);
}

.trust-bar__flag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 28px;
    block-size: var(--trust-bar-flag-size);
    border-radius: 3px;
    overflow: hidden;
    flex: 0 0 auto;
    box-shadow: 0 0 0 1px var(--border);
}

.trust-bar__flag-svg {
    inline-size: 100%;
    block-size: 100%;
    display: block;
}

/* ≥768px — single row, dividers */
@media (min-width: 768px) {
    .trust-bar__list {
        grid-template-columns: auto 1fr auto;
        align-items: center;
        gap: 0;
    }

    .trust-bar__item {
        justify-content: center;
        padding-inline: var(--space-5);
    }

    .trust-bar__item--live {
        justify-self: start;
        padding-inline-start: 0;
    }

    .trust-bar__item--hosted {
        justify-self: end;
        padding-inline-end: 0;
    }

    .trust-bar__item + .trust-bar__item {
        border-inline-start: 1px solid var(--border);
    }
}

/* Compact variant — used on landing.php under the plan strip where the page
 * has the hero immediately above with similar trust badges. Tones the visual
 * weight down so it doesn't double-shout. */
.trust-bar--compact {
    --trust-bar-pad-block: var(--space-3);
    background: transparent;
    box-shadow: none;
    border-color: transparent;
}

.trust-bar--compact .trust-bar__item {
    font-size: 0.9rem;
}

.trust-bar--compact .trust-bar__icon {
    inline-size: 16px;
    block-size: 16px;
}

@media (max-width: 767.98px) {
    .trust-bar {
        margin-block: var(--space-5);
    }
    .trust-bar__item {
        justify-content: flex-start;
        min-block-size: 44px;
    }
    .trust-bar__item + .trust-bar__item {
        border-block-start: 1px solid var(--border);
        padding-block-start: var(--space-3);
    }
}

@media (prefers-reduced-motion: reduce) {
    .trust-bar__dot {
        animation: none;
    }
    .trust-bar__arrow {
        transition: none;
    }
}

@media print {
    .trust-bar {
        display: none;
    }
}