/*
 * BestCV design tokens
 *
 * This file deliberately follows the existing site and builder styles. It
 * changes presentation only: layouts, Livewire bindings and CV data remain
 * untouched while both experiences consume the same brand palette.
 */
:root {
    --bestcv-primary: #263a67;
    --bestcv-primary-dark: #17233f;
    --bestcv-ai: #5367c7;
    --bestcv-gold: #d99a3d;
    --bestcv-terracotta: #c96845;
    --bestcv-background: #fbf9f4;
    --bestcv-ivory: #fbf9f4;
    --bestcv-surface-soft: #f1f4fa;
    --bestcv-surface: #ffffff;
    --bestcv-text: #182033;
    --bestcv-text-muted: #667085;
    --bestcv-border: #dde2ec;
    --bestcv-success: #27806b;
    --bestcv-danger: #b54747;

    /* Derived presentation tones keep all tints anchored to the palette. */
    --bestcv-primary-soft: color-mix(in srgb, var(--bestcv-primary) 9%, var(--bestcv-surface));
    --bestcv-ai-soft: color-mix(in srgb, var(--bestcv-ai) 12%, var(--bestcv-surface));
    --bestcv-gold-soft: color-mix(in srgb, var(--bestcv-gold) 15%, var(--bestcv-surface));
    --bestcv-terracotta-soft: color-mix(in srgb, var(--bestcv-terracotta) 12%, var(--bestcv-surface));
    --bestcv-success-soft: color-mix(in srgb, var(--bestcv-success) 11%, var(--bestcv-surface));
    --bestcv-danger-soft: color-mix(in srgb, var(--bestcv-danger) 10%, var(--bestcv-surface));

    /* Compatibility aliases for the pre-tokenized component styles. */
    --bestcv-purple: var(--bestcv-primary);
    --bestcv-purple-dark: var(--bestcv-primary-dark);
    --bestcv-purple-light: var(--bestcv-primary-soft);
    --bestcv-orange: var(--bestcv-terracotta);
    --bestcv-orange-light: var(--bestcv-terracotta-soft);
    --bestcv-navy: var(--bestcv-text);
    --bestcv-muted: var(--bestcv-text-muted);
    --bestcv-white: var(--bestcv-surface);

    /* Bootstrap controls used by the builder share the same semantic colors. */
    --bs-primary: var(--bestcv-primary);
    --bs-primary-rgb: 38, 58, 103;
    --bs-success: var(--bestcv-success);
    --bs-success-rgb: 39, 128, 107;
    --bs-warning: var(--bestcv-gold);
    --bs-warning-rgb: 217, 154, 61;
    --bs-danger: var(--bestcv-danger);
    --bs-danger-rgb: 181, 71, 71;
    --bs-body-color: var(--bestcv-text);
    --bs-body-bg: var(--bestcv-background);
    --bs-border-color: var(--bestcv-border);

    --resume-brand: var(--bestcv-primary);
    --resume-brand-dark: var(--bestcv-primary-dark);
    --resume-brand-soft: var(--bestcv-primary-soft);
    --resume-ink: var(--bestcv-text);
    --resume-muted: var(--bestcv-text-muted);
    --resume-line: var(--bestcv-border);
}

/* ---------- Shared front experience ---------- */

.bestcv-site {
    background: var(--bestcv-background);
    color: var(--bestcv-text);
}

.bestcv-header,
.bestcv-error-header {
    background: color-mix(in srgb, var(--bestcv-surface) 94%, var(--bestcv-background));
}

.bestcv-brand,
.bestcv-brand:hover,
.bestcv-header__nav a:hover,
.bestcv-back-link:hover,
.bestcv-text-action,
.bestcv-models-link,
.bestcv-auth-options a,
.bestcv-auth-switch a,
.bestcv-auth-text-button {
    color: var(--bestcv-primary) !important;
}

.bestcv-brand:hover,
.bestcv-text-action:hover,
.bestcv-models-link:hover,
.bestcv-auth-options a:hover,
.bestcv-auth-switch a:hover,
.bestcv-auth-text-button:hover {
    color: var(--bestcv-primary-dark) !important;
}

.bestcv-button--primary,
.bestcv-file-button,
.bestcv-auth-submit {
    border-color: var(--bestcv-primary);
    background: var(--bestcv-primary);
}

.bestcv-button--primary:hover,
.bestcv-button--primary:focus-visible,
.bestcv-file-button:hover,
.bestcv-auth-submit:hover {
    border-color: var(--bestcv-primary-dark);
    background: var(--bestcv-primary-dark);
}

.bestcv-button--secondary {
    border-color: var(--bestcv-primary);
    background: var(--bestcv-surface);
    color: var(--bestcv-primary) !important;
}

.bestcv-button--secondary:hover,
.bestcv-button--secondary:focus-visible {
    border-color: var(--bestcv-primary-dark);
    background: var(--bestcv-primary-soft);
    color: var(--bestcv-primary-dark) !important;
}

.bestcv-button:focus-visible,
.bestcv-header a:focus-visible,
.bestcv-logout:focus-visible,
.bestcv-file-button:focus-within,
.bestcv-auth-submit:focus-visible,
.bestcv-auth-text-button:focus-visible,
.bestcv-auth-options a:focus-visible,
.bestcv-auth-switch a:focus-visible,
.bestcv-auth-check:focus-within,
.bestcv-error-page a:focus-visible {
    outline-color: color-mix(in srgb, var(--bestcv-primary) 32%, transparent);
}

.bestcv-hero {
    background:
        radial-gradient(circle at 92% 6%, color-mix(in srgb, var(--bestcv-ai) 23%, transparent) 0, color-mix(in srgb, var(--bestcv-ai) 7%, transparent) 23%, transparent 47%),
        linear-gradient(112deg, var(--bestcv-background) 0%, var(--bestcv-surface-soft) 100%);
}

.bestcv-hero h1 span,
.bestcv-eyebrow,
.bestcv-choice-badge,
.bestcv-barma-intro__icon,
.bestcv-benefit__icon,
.bestcv-choice-icon,
.bestcv-auth-card__icon,
.bestcv-cv-card__thumb {
    color: var(--bestcv-ai);
}

.bestcv-eyebrow,
.bestcv-choice-badge,
.bestcv-barma-intro__icon,
.bestcv-benefit__icon,
.bestcv-choice-icon,
.bestcv-auth-card__icon,
.bestcv-cv-card__thumb {
    background: var(--bestcv-ai-soft);
}

.bestcv-eyebrow i,
.bestcv-template-card__topline i,
.bestcv-pricing-note i {
    color: var(--bestcv-gold);
}

.bestcv-hero__description,
.bestcv-barma-intro p,
.bestcv-reassurance,
.bestcv-benefit p,
.bestcv-section-heading p,
.bestcv-start__intro>p:last-child,
.bestcv-choice-card p,
.bestcv-start__privacy,
.bestcv-auth-card__heading p,
.bestcv-auth-copy,
.bestcv-auth-check,
.bestcv-auth-switch,
.bestcv-auth-page__privacy,
.bestcv-error-header__label,
.bestcv-error-copy p {
    color: var(--bestcv-text-muted);
}

.bestcv-barma-intro {
    border-color: color-mix(in srgb, var(--bestcv-ai) 24%, var(--bestcv-border));
    background: color-mix(in srgb, var(--bestcv-surface) 76%, var(--bestcv-surface-soft));
}

.bestcv-barma-nameplate {
    background: color-mix(in srgb, var(--bestcv-primary-dark) 94%, transparent);
    box-shadow: 0 0.45rem 1.25rem color-mix(in srgb, var(--bestcv-primary-dark) 20%, transparent);
}

.bestcv-speech {
    border-color: var(--bestcv-border);
    background: color-mix(in srgb, var(--bestcv-surface) 96%, var(--bestcv-surface-soft));
    box-shadow: 0 0.5rem 1.5rem color-mix(in srgb, var(--bestcv-primary-dark) 10%, transparent);
    color: var(--bestcv-text-muted);
}

.bestcv-speech strong,
.bestcv-template-card__topline,
.bestcv-start__eyebrow {
    color: var(--bestcv-ai);
}

.bestcv-speech::after {
    border-color: var(--bestcv-border);
    background: var(--bestcv-surface);
}

.bestcv-benefit:nth-child(2) .bestcv-benefit__icon,
.bestcv-benefit:nth-child(3) .bestcv-benefit__icon {
    background: var(--bestcv-gold-soft);
    color: var(--bestcv-gold);
}

.bestcv-models {
    background: var(--bestcv-surface-soft);
}

.bestcv-template-card,
.bestcv-choice-card,
.bestcv-account-card,
.bestcv-cv-card {
    box-shadow: 0 0.5rem 1.5rem color-mix(in srgb, var(--bestcv-primary-dark) 5%, transparent);
}

.bestcv-template-card__meta {
    color: var(--bestcv-text-muted);
}

.bestcv-start-page {
    background:
        radial-gradient(circle at 4% 35%, color-mix(in srgb, var(--bestcv-ai) 14%, transparent), transparent 22rem),
        radial-gradient(circle at 92% 23%, color-mix(in srgb, var(--bestcv-gold) 14%, transparent), transparent 18rem),
        var(--bestcv-surface);
}

.bestcv-choice-card--featured {
    border-color: var(--bestcv-ai);
    background: linear-gradient(145deg, var(--bestcv-surface) 0%, var(--bestcv-ai-soft) 100%);
}

.bestcv-choice-card--featured .bestcv-choice-badge {
    color: var(--bestcv-primary-dark);
}

.bestcv-file-loading {
    background: var(--bestcv-ai-soft);
    color: var(--bestcv-ai);
}

.bestcv-import-error,
.bestcv-auth-error {
    color: var(--bestcv-danger) !important;
}

.bestcv-start__barma::before {
    border-color: color-mix(in srgb, var(--bestcv-ai) 23%, transparent);
}

.bestcv-auth-page {
    background:
        radial-gradient(circle at 7% 8%, color-mix(in srgb, var(--bestcv-ai) 25%, transparent), transparent 23rem),
        radial-gradient(circle at 95% 92%, color-mix(in srgb, var(--bestcv-gold) 19%, transparent), transparent 26rem),
        linear-gradient(135deg, var(--bestcv-background) 0%, var(--bestcv-surface-soft) 100%);
}

.bestcv-auth-page__glow,
.bestcv-auth-card {
    border-color: var(--bestcv-border);
}

.bestcv-auth-card {
    box-shadow: 0 1rem 3.5rem color-mix(in srgb, var(--bestcv-primary-dark) 10%, transparent);
}

.bestcv-auth-field label {
    color: var(--bestcv-text);
}

.bestcv-auth-field input {
    border-color: var(--bestcv-border);
    background: var(--bestcv-surface);
    color: var(--bestcv-text);
}

.bestcv-auth-field input:hover {
    border-color: color-mix(in srgb, var(--bestcv-primary) 55%, var(--bestcv-border));
}

.bestcv-auth-field input:focus {
    border-color: var(--bestcv-primary);
    box-shadow: 0 0 0 0.22rem color-mix(in srgb, var(--bestcv-primary) 15%, transparent);
}

.bestcv-password-field {
    position: relative;
    min-width: 0;
}

.bestcv-auth-field .bestcv-password-field input {
    padding-right: 3.5rem;
}

.bestcv-password-toggle {
    position: absolute;
    top: 50%;
    right: 0.25rem;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 0.65rem;
    background: transparent;
    color: var(--bestcv-muted);
    font-size: 1.15rem;
    cursor: pointer;
}

.bestcv-password-toggle[hidden] {
    display: none;
}

.bestcv-password-toggle:hover {
    color: var(--bestcv-primary);
    background: var(--bestcv-surface-soft);
}

.bestcv-password-toggle:focus-visible {
    outline: 2px solid var(--bestcv-primary);
    outline-offset: -2px;
}

.bestcv-auth-check input {
    accent-color: var(--bestcv-primary);
}

.bestcv-auth-alert--success {
    border-color: color-mix(in srgb, var(--bestcv-success) 34%, var(--bestcv-border));
    background: var(--bestcv-success-soft);
    color: var(--bestcv-success);
}

.bestcv-auth-alert--info {
    border-color: color-mix(in srgb, var(--bestcv-ai) 34%, var(--bestcv-border));
    background: var(--bestcv-ai-soft);
    color: var(--bestcv-ai);
}

.bestcv-auth-alert--error,
.bestcv-account-card--danger,
.bestcv-account-confirm {
    border-color: color-mix(in srgb, var(--bestcv-danger) 35%, var(--bestcv-border));
}

.bestcv-auth-alert--error,
.bestcv-button--danger:hover,
.bestcv-button--danger:focus-visible,
.bestcv-cv-card__icon-btn--danger:hover {
    background: var(--bestcv-danger-soft);
    color: var(--bestcv-danger);
}

.bestcv-auth-showcase {
    border-color: color-mix(in srgb, var(--bestcv-primary) 28%, var(--bestcv-border));
    background:
        radial-gradient(circle at 83% 22%, color-mix(in srgb, var(--bestcv-surface) 24%, transparent), transparent 11rem),
        linear-gradient(148deg, var(--bestcv-primary-dark) 0%, var(--bestcv-primary) 100%);
    box-shadow: 0 1rem 3.5rem color-mix(in srgb, var(--bestcv-primary-dark) 17%, transparent);
}

.bestcv-auth-showcase::after {
    background: linear-gradient(180deg, color-mix(in srgb, var(--bestcv-primary-dark) 78%, transparent) 0%, color-mix(in srgb, var(--bestcv-primary) 20%, transparent) 50%, color-mix(in srgb, var(--bestcv-primary-dark) 64%, transparent) 100%);
}

.bestcv-auth-showcase__copy span {
    color: var(--bestcv-surface-soft);
}

.bestcv-auth-showcase p {
    color: color-mix(in srgb, var(--bestcv-surface) 82%, var(--bestcv-ai));
}

.bestcv-account-card__success,
.bestcv-account-card__saved,
.bestcv-cv-card__badge--completed {
    color: var(--bestcv-success);
}

.bestcv-cv-card__badge--completed {
    background: var(--bestcv-success-soft);
}

.bestcv-button--danger,
.bestcv-cv-card__icon-btn--danger:hover {
    border-color: color-mix(in srgb, var(--bestcv-danger) 35%, var(--bestcv-border));
    color: var(--bestcv-danger) !important;
}

.bestcv-modal-backdrop {
    background: color-mix(in srgb, var(--bestcv-primary-dark) 52%, transparent);
}

.bestcv-modal {
    box-shadow: 0 1.5rem 3.5rem color-mix(in srgb, var(--bestcv-primary-dark) 26%, transparent);
}

/* Error pages are a public-facing surface, too. */
.bestcv-error-main {
    background:
        radial-gradient(circle at 82% 38%, color-mix(in srgb, var(--bestcv-ai) 26%, transparent), transparent 28rem),
        radial-gradient(circle at 6% 92%, color-mix(in srgb, var(--bestcv-gold) 21%, transparent), transparent 27rem),
        linear-gradient(115deg, var(--bestcv-surface) 0%, var(--bestcv-background) 100%);
}

.bestcv-error-copy__badge {
    border-color: color-mix(in srgb, var(--bestcv-ai) 25%, var(--bestcv-border));
    background: var(--bestcv-ai-soft);
    color: var(--bestcv-ai);
}

.bestcv-error-copy__badge span {
    color: var(--bestcv-gold);
}

.bestcv-error-visual__halo {
    border-color: color-mix(in srgb, var(--bestcv-ai) 18%, var(--bestcv-border));
    background: radial-gradient(circle at 50% 48%, color-mix(in srgb, var(--bestcv-surface) 95%, transparent), color-mix(in srgb, var(--bestcv-ai) 19%, transparent) 65%, color-mix(in srgb, var(--bestcv-ai) 4%, transparent) 72%);
}

.bestcv-error-visual__code {
    -webkit-text-stroke-color: color-mix(in srgb, var(--bestcv-primary) 17%, transparent);
}

/* ---------- CV builder workspace ---------- */

.resume-builder-body {
    background: var(--bestcv-background);
    color: var(--bestcv-text);
}

.resume-builder-header,
.resume-builder-subheader,
.resume-rail,
.resume-drawer-header,
.resume-experience-card,
.resume-builder-body .resume-editor-section,
.resume-builder-body .form-control,
.resume-builder-body .form-select {
    background: var(--bestcv-surface);
}

.resume-builder-header {
    box-shadow: 0 1px 0 color-mix(in srgb, var(--bestcv-primary-dark) 4%, transparent);
}

.resume-platform-brand em {
    color: var(--bestcv-terracotta);
}

.resume-title-caption,
.resume-drawer-step,
.resume-drawer-body .form-label,
.resume-experience-card-label {
    color: var(--bestcv-text-muted);
}

.resume-builder-body .btn-primary {
    border-color: var(--bestcv-primary);
    background: var(--bestcv-primary);
    box-shadow: 0 0.25rem 0.65rem color-mix(in srgb, var(--bestcv-primary) 20%, transparent);
}

.resume-builder-body .btn-primary:hover,
.resume-builder-body .btn-primary:focus {
    border-color: var(--bestcv-primary-dark);
    background: var(--bestcv-primary-dark);
}

.resume-builder-body .btn-outline-primary {
    border-color: color-mix(in srgb, var(--bestcv-primary) 35%, var(--bestcv-border));
    background: var(--bestcv-primary-soft);
    color: var(--bestcv-primary);
}

.resume-builder-body .btn-outline-primary:hover,
.resume-builder-body .btn-outline-primary:focus {
    border-color: var(--bestcv-primary);
    background: var(--bestcv-primary);
    color: var(--bestcv-surface);
}

.resume-builder-body .btn-outline-secondary,
.resume-stepper,
.resume-drawer-close,
.resume-zoom-btn {
    border-color: var(--bestcv-border);
    background: var(--bestcv-surface);
    color: var(--bestcv-text-muted);
}

.resume-builder-body .btn-outline-secondary:hover,
.resume-builder-body .btn-outline-secondary:focus,
.resume-drawer-close:hover,
.resume-rail-btn:hover {
    border-color: color-mix(in srgb, var(--bestcv-primary) 35%, var(--bestcv-border));
    background: var(--bestcv-primary-soft);
    color: var(--bestcv-primary-dark);
}

.resume-token-balance,
.resume-ats-callout {
    border-color: color-mix(in srgb, var(--bestcv-gold) 40%, var(--bestcv-border));
    background: var(--bestcv-gold-soft);
    color: color-mix(in srgb, var(--bestcv-gold) 72%, var(--bestcv-text));
}

.resume-save-status-pill {
    background: var(--bestcv-surface-soft);
    color: var(--bestcv-text-muted);
}

.resume-save-status-pill.is-saved,
.resume-save-status-pill .bi-check-circle-fill,
.resume-save-status-pill .bi-cloud-check {
    color: var(--bestcv-success);
}

.resume-save-status-pill.is-saved {
    background: var(--bestcv-success-soft);
}

.resume-save-status-pill.is-failed,
.resume-ats-inline-error {
    color: var(--bestcv-danger);
}

.resume-save-status-pill.is-failed {
    background: var(--bestcv-danger-soft);
}

.resume-rail-btn,
.resume-rail-btn i,
.resume-stepper span,
.resume-drawer-body .form-control,
.resume-drawer-body .form-select {
    color: var(--bestcv-text);
}

.resume-rail-btn.is-active {
    border-left-color: var(--bestcv-primary);
    background: var(--bestcv-terracotta);
    color: var(--bestcv-ivory);
}

.resume-rail-btn.is-active i {
    color: var(--bestcv-ivory);
}

.resume-drawer {
    background: color-mix(in srgb, var(--bestcv-surface) 74%, var(--bestcv-surface-soft));
    box-shadow: 0.65rem 0 1.25rem color-mix(in srgb, var(--bestcv-primary-dark) 4%, transparent);
}

.resume-drawer-body .form-control,
.resume-drawer-body .form-select,
.resume-experience-card,
.resume-template-card,
.resume-template-card-media,
.resume-template-filter,
.resume-modal-header,
.resume-editor-section {
    border-color: var(--bestcv-border);
}

.resume-drawer-body .form-control:focus,
.resume-drawer-body .form-select:focus {
    border-color: var(--bestcv-ai);
    box-shadow: 0 0 0 0.18rem color-mix(in srgb, var(--bestcv-ai) 16%, transparent);
}

.resume-canvas-area {
    background-color: var(--bestcv-surface-soft);
    background-image: radial-gradient(circle, color-mix(in srgb, var(--bestcv-primary) 23%, var(--bestcv-surface-soft)) 1px, transparent 1.1px);
}

.resume-preview-page {
    box-shadow: 0 0.75rem 2rem color-mix(in srgb, var(--bestcv-primary-dark) 15%, transparent);
}

.resume-ai-guide,
.resume-ai-dialog-intro,
.resume-ats-barma-intro,
.resume-ai-suggestion,
.resume-skill-suggestion-chip {
    border-color: color-mix(in srgb, var(--bestcv-ai) 28%, var(--bestcv-border));
    background: var(--bestcv-ai-soft);
}

.resume-ai-guide-eyebrow,
.resume-ats-barma-intro span,
.resume-ats-priorities-label,
.resume-ai-suggestion-label,
.resume-skill-suggestion-add,
.resume-ats-score {
    color: var(--bestcv-ai);
}

.resume-ai-guide p,
.resume-ai-dialog-intro p,
.resume-ats-barma-intro p,
.resume-ats-summary,
.resume-skill-suggestion-chip {
    color: var(--bestcv-text-muted);
}

.resume-ai-guide p strong {
    color: var(--bestcv-primary-dark);
}

.resume-skill-suggestion-add:hover {
    background: var(--bestcv-ai);
}

.resume-template-card.is-current,
.resume-template-filter.is-active {
    border-color: var(--bestcv-primary);
}

.resume-template-card.is-current {
    box-shadow: 0 0 0 1px var(--bestcv-primary);
}

.resume-template-card-flag.is-current,
.resume-template-filter.is-active {
    background: var(--bestcv-primary);
}

.resume-template-card:focus-visible {
    outline-color: var(--bestcv-primary);
}

.resume-ats-score-badge {
    background: var(--bestcv-ai-soft);
    color: var(--bestcv-ai);
}

.resume-ats-issue {
    border-left-color: var(--bestcv-border);
    background: var(--bestcv-surface-soft);
}

.resume-ats-issue-high {
    border-left-color: var(--bestcv-danger);
    background: var(--bestcv-danger-soft);
}

.resume-ats-issue-medium {
    border-left-color: var(--bestcv-gold);
    background: var(--bestcv-gold-soft);
}

@media (max-width: 767.98px) {
    .resume-rail {
        background: color-mix(in srgb, var(--bestcv-surface) 96%, var(--bestcv-surface-soft));
    }

    .resume-rail-btn.is-active {
        border-top-color: var(--bestcv-primary);
    }

    .resume-drawer {
        background: var(--bestcv-surface);
        box-shadow: 0 -0.75rem 2rem color-mix(in srgb, var(--bestcv-primary-dark) 18%, transparent);
    }

    .resume-drawer-backdrop {
        background: color-mix(in srgb, var(--bestcv-primary-dark) 45%, transparent);
    }

    .resume-drawer-header .resume-drawer-close {
        min-height: 2.75rem;
        height: auto;
        border-color: var(--bestcv-primary);
        border-radius: 0.65rem;
        background: var(--bestcv-primary);
        color: var(--bestcv-surface);
    }

    .resume-drawer-header .resume-drawer-close:hover,
    .resume-drawer-header .resume-drawer-close:focus-visible {
        border-color: var(--bestcv-primary-dark);
        background: var(--bestcv-primary-dark);
        color: var(--bestcv-surface);
    }

    .resume-drawer-header .resume-drawer-close:focus-visible {
        outline: 3px solid var(--bestcv-gold);
        outline-offset: 2px;
    }
}

/* Compact mobile builder: existing brand tokens and controls. */
@media (max-width: 767.98px) {
    :root {
        --resume-topbar-height: 132px;
    }

    .resume-builder-topbar-group {
        min-height: 0;
        padding-top: env(safe-area-inset-top, 0px);
        background: var(--bestcv-surface);
        box-shadow: 0 3px 12px color-mix(in srgb, var(--bestcv-primary-dark) 6%, transparent);
    }

    .resume-builder-header,
    .resume-builder-subheader {
        display: none !important;
    }

    .resume-mobile-header {
        display: block;
        padding: 8px max(12px, env(safe-area-inset-right, 0px)) 12px max(12px, env(safe-area-inset-left, 0px));
    }

    .resume-mobile-header-row {
        display: grid;
        grid-template-columns: 44px minmax(0, 1fr) auto 44px;
        align-items: center;
        gap: 4px;
        min-height: 44px;
    }

    .resume-mobile-icon-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        flex-shrink: 0;
        border: 0;
        border-radius: 14px;
        background: var(--bestcv-surface-soft);
        color: var(--bestcv-primary);
        text-decoration: none;
        font-size: 1.15rem;
    }

    .resume-mobile-icon-button:hover,
    .resume-mobile-icon-button:focus-visible {
        background: var(--bestcv-primary-soft);
        color: var(--bestcv-primary-dark);
    }

    .resume-mobile-document {
        position: relative;
        min-width: 0;
        min-height: 44px;
    }

    .resume-mobile-title::after {
        content: "";
        position: absolute;
        inset: 0;
    }

    .resume-mobile-title {
        display: flex;
        align-items: center;
        gap: 4px;
        width: 100%;
        min-height: 28px;
        padding: 0;
        border: 0;
        background: transparent;
        color: var(--bestcv-text);
        text-align: left;
        font-size: 0.875rem;
        font-weight: 700;
    }

    .resume-mobile-title > span {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .resume-mobile-title > i {
        flex-shrink: 0;
        color: var(--bestcv-text-muted);
        font-size: 0.6rem;
    }

    .resume-mobile-save-status {
        min-height: 14px;
        color: var(--bestcv-success);
        font-size: 0.625rem;
        line-height: 14px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .resume-mobile-save-failed {
        color: var(--bestcv-danger);
    }

    .resume-builder-body .resume-mobile-download {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        min-height: 44px;
        padding: 0 10px;
        border-radius: 14px;
        background: var(--bestcv-primary);
        box-shadow: 0 3px 8px color-mix(in srgb, var(--bestcv-primary) 17%, transparent);
        white-space: nowrap;
        font-size: 0.75rem;
        font-weight: 650;
    }

    .resume-mobile-command-bar {
        display: grid;
        grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
        gap: 8px;
        margin-top: 10px;
    }

    .resume-mobile-design-tools {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        min-width: 0;
        gap: 8px;
    }

    .resume-mobile-command-bar button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 2px;
        min-width: 0;
        min-height: 58px;
        padding: 6px 4px;
        border: 1px solid var(--bestcv-border);
        border-radius: 16px;
        background: var(--bestcv-surface);
        color: var(--bestcv-text-muted);
        font-size: 0.72rem;
        font-weight: 700;
        line-height: 1.1;
    }

    .resume-mobile-command-bar button > .bi {
        color: var(--bestcv-primary);
        font-size: 1.25rem;
    }

    .resume-mobile-command-bar button:hover,
    .resume-mobile-command-bar button[aria-expanded="true"] {
        border-color: var(--bestcv-primary);
        background: var(--bestcv-primary-soft);
        color: var(--bestcv-primary-dark);
    }

    .resume-mobile-command-bar button:focus-visible,
    .resume-mobile-title:focus-visible {
        outline: 2px solid var(--bestcv-ai);
        outline-offset: 2px;
    }

    .resume-mobile-command-bar .resume-mobile-barma {
        position: relative;
        border-color: color-mix(in srgb, var(--bestcv-ai) 25%, var(--bestcv-border));
        background: var(--bestcv-ai-soft);
        color: var(--bestcv-ai);
    }

    .resume-mobile-barma .resume-ai-avatar {
        width: 27px;
        height: 27px;
    }

    .resume-mobile-barma > .bi {
        position: absolute;
        top: 8px;
        right: 8px;
        font-size: 0.6rem !important;
    }

    .resume-mobile-panel-backdrop {
        position: fixed;
        inset: 0;
        display: block;
        z-index: 60;
        background: color-mix(in srgb, var(--bestcv-primary-dark) 38%, transparent);
    }

    .resume-mobile-panel {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        display: flex;
        flex-direction: column;
        max-height: calc(var(--mobile-panel-height, 100dvh) - 16px - env(safe-area-inset-top, 0px));
        padding-bottom: env(safe-area-inset-bottom, 0px);
        border-radius: 24px 24px 0 0;
        background: var(--bestcv-surface);
        color: var(--bestcv-text);
        box-shadow: 0 -5px 24px color-mix(in srgb, var(--bestcv-primary-dark) 10%, transparent);
    }

    .resume-mobile-panel-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-shrink: 0;
        gap: 12px;
        padding: 10px 12px 10px 16px;
        border-bottom: 1px solid var(--bestcv-border);
    }

    .resume-mobile-panel-header h2 {
        margin: 0;
        font-size: 1rem;
        font-weight: 700;
    }

    .resume-mobile-panel-body {
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 16px max(16px, env(safe-area-inset-right, 0px)) 20px max(16px, env(safe-area-inset-left, 0px));
        font-size: 0.875rem;
    }

    .resume-mobile-panel .form-control,
    .resume-mobile-panel .form-select,
    .resume-modal .form-control {
        font-size: 16px;
    }

    .resume-mobile-panel .form-control,
    .resume-mobile-panel .form-select,
    .resume-mobile-panel .btn,
    .resume-mobile-panel .resume-download-option,
    .resume-mobile-panel .resume-palette-swatch {
        min-height: 44px;
    }

    .resume-mobile-panel .resume-download-option {
        padding: 12px 8px;
    }

    .resume-mobile-panel .resume-share-link-row {
        flex-wrap: wrap;
    }

    .resume-mobile-panel .resume-share-link-row input {
        min-width: 0;
        flex: 1 1 100%;
    }

    .resume-mobile-panel-action {
        display: flex;
        align-items: center;
        gap: 12px;
        width: 100%;
        min-height: 52px;
        padding: 10px;
        border: 0;
        border-radius: 10px;
        background: var(--bestcv-surface-soft);
        color: var(--bestcv-text);
        text-align: left;
    }

    .resume-mobile-panel-action > span:not(.resume-ai-avatar):not(.resume-ats-score-badge) {
        flex: 1;
        min-width: 0;
    }

    .resume-mobile-panel-action strong,
    .resume-mobile-panel-action small {
        display: block;
    }

    .resume-mobile-panel-action small {
        margin-top: 3px;
        color: var(--bestcv-text-muted);
        font-size: 0.75rem;
    }

    .resume-mobile-style-settings {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .resume-mobile-style-settings h3 {
        margin-bottom: 8px;
        font-size: 0.875rem;
    }

    .resume-mobile-size-row {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
    }

    .resume-mobile-size-control {
        display: flex;
        align-items: center;
        border-radius: 10px;
        background: var(--bestcv-surface-soft);
    }

    .resume-mobile-size-control button {
        width: 44px;
        height: 44px;
        border: 0;
        border-radius: 10px;
        background: transparent;
        color: var(--bestcv-primary);
        font-size: 1.1rem;
    }

    .resume-mobile-size-control output {
        min-width: 48px;
        text-align: center;
        font-variant-numeric: tabular-nums;
    }

    .resume-mobile-credit-summary {
        display: grid;
        grid-template-columns: auto 1fr;
        align-items: center;
        gap: 4px 8px;
        margin-bottom: 16px;
        padding: 12px;
        border-radius: 10px;
        background: var(--bestcv-gold-soft);
        color: var(--bestcv-primary);
    }

    .resume-mobile-credit-summary small {
        grid-column: 1 / -1;
        color: var(--bestcv-text-muted);
        font-size: 0.75rem;
    }

    .resume-mobile-ai-entry {
        margin-top: 8px;
        background: var(--bestcv-ai-soft);
    }

    .resume-mobile-ai-entry .resume-ai-avatar {
        width: 32px;
        height: 32px;
        flex: 0 0 32px;
    }

    .resume-mobile-ai-entry .resume-ats-score-badge {
        flex: 0 0 auto;
    }

    .resume-mobile-panel .resume-ats-inline-error {
        max-width: none;
    }

    .resume-report-backdrop {
        z-index: 40;
    }

    .resume-modal-backdrop {
        align-items: flex-end;
        padding: 0;
        bottom: var(--resume-mobile-viewport-bottom, 0px);
    }

    .resume-modal,
    .resume-modal.resume-template-modal {
        max-height: calc(var(--resume-mobile-viewport-height, 100dvh) - 16px - env(safe-area-inset-top, 0px));
        border-radius: 18px 18px 0 0;
        padding-bottom: env(safe-area-inset-bottom, 0px);
        box-shadow: 0 -5px 24px color-mix(in srgb, var(--bestcv-primary-dark) 10%, transparent);
    }

    .resume-modal-header {
        flex-shrink: 0;
        padding: 12px 16px;
        gap: 8px;
    }

    .resume-modal-header h2 {
        min-width: 0;
        font-size: 1rem;
    }

    .resume-modal-header .resume-drawer-close {
        width: 44px;
        height: 44px;
        padding: 0;
        flex-shrink: 0;
    }

    .resume-modal .resume-template-grid,
    .resume-modal .resume-ats-modal-body {
        min-height: 0;
        overscroll-behavior: contain;
        padding: 16px;
    }

    .resume-modal .resume-ai-action {
        flex-wrap: wrap;
        min-height: 44px;
        white-space: normal;
    }

    .resume-canvas-area {
        background-image: radial-gradient(circle, color-mix(in srgb, var(--bestcv-primary) 9%, var(--bestcv-surface-soft)) 0.7px, transparent 0.9px);
        background-size: 22px 22px;
        padding-bottom: 6rem;
    }

    .resume-builder-shell {
        --resume-sheet-top: calc(52px + env(safe-area-inset-top, 0px));
        padding-bottom: calc(6rem + env(safe-area-inset-bottom, 0px));
    }

    .resume-rail {
        left: max(10px, env(safe-area-inset-left, 0px));
        right: max(10px, env(safe-area-inset-right, 0px));
        bottom: calc(10px + env(safe-area-inset-bottom, 0px));
        width: auto;
        padding: 6px;
        gap: 4px;
        overscroll-behavior-x: contain;
        scroll-padding-inline: 6px;
        scrollbar-width: none;
        border: 1px solid rgba(255, 255, 255, 0.72);
        border-radius: 24px;
        background: rgba(245, 248, 252, 0.62);
        -webkit-backdrop-filter: blur(28px) saturate(160%);
        backdrop-filter: blur(28px) saturate(160%);
        box-shadow: 0 10px 30px color-mix(in srgb, var(--bestcv-primary-dark) 18%, transparent), inset 0 1px rgba(255, 255, 255, 0.8);
    }

    .resume-rail::-webkit-scrollbar {
        display: none;
    }

    .resume-rail-btn {
        min-width: 76px;
        min-height: 60px;
        padding: 6px;
        gap: 4px;
        font-size: 0.7rem;
        white-space: nowrap;
        border: 0;
        border-radius: 14px;
        color: var(--bestcv-primary-dark);
    }

    .resume-rail-btn i {
        color: var(--bestcv-primary-dark);
    }

    .resume-rail-btn:hover {
        background: rgba(255, 255, 255, 0.35);
    }

    .resume-rail-btn.is-active i {
        color: var(--bestcv-primary);
    }

    .resume-rail-btn.is-active {
        background: rgba(255, 255, 255, 0.76);
        color: var(--bestcv-primary-dark);
        box-shadow: 0 3px 12px color-mix(in srgb, var(--bestcv-primary-dark) 14%, transparent), inset 0 1px rgba(255, 255, 255, 0.9);
        font-weight: 700;
    }

    .resume-rail-btn:focus-visible,
    .resume-rail-arrow:focus-visible {
        outline: 2px solid var(--bestcv-ai);
        outline-offset: -2px;
    }

    .resume-drawer {
        padding-bottom: calc(6rem + env(safe-area-inset-bottom, 0px));
        border-radius: 24px 24px 0 0;
    }

    .resume-canvas-footer {
        gap: 4px;
        padding: 3px 5px;
        bottom: calc(6rem + env(safe-area-inset-bottom, 0px) + 8px);
        box-shadow: 0 2px 8px color-mix(in srgb, var(--bestcv-primary-dark) 8%, transparent);
    }

    .resume-zoom-btn {
        width: 36px;
        height: 36px;
        border-radius: 8px;
    }

    /* Resize the preview inside its own scroller when zoomed; the interface
       keeps the viewport width and every part of the CV stays reachable. */
    .resume-preview-viewport {
        display: block;
        width: 100%;
        overflow-x: auto;
        overscroll-behavior-x: contain;
    }

    .resume-preview-viewport .resume-canvas {
        margin-inline: auto;
        transition: none;
    }
}

/* Pricing page (/tarifs) and the account pages of the pricing grid:
   "Mes candidatures" and the prepaid-code form. */
.bestcv-pricing__intro {
    max-width: 46rem;
    margin-inline: auto;
    text-align: center;
}

.bestcv-pricing__wave {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    background: var(--bestcv-surface-soft);
    color: var(--bestcv-primary);
    font-size: 0.9rem;
    font-weight: 600;
}

.bestcv-pricing__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1.15rem;
    align-items: stretch;
    margin-top: 2.5rem;
}

/* Between phone and desktop widths the four cards would otherwise wrap as
   three and one: two rows of two instead. */
@media (min-width: 600px) and (max-width: 1099.98px) {
    .bestcv-pricing__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.bestcv-pricing-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    padding: 1.6rem 1.35rem;
    border: 1px solid var(--bestcv-border);
    border-radius: 1rem;
    background: var(--bestcv-surface);
}

.bestcv-pricing-card.is-featured {
    border: 2px solid var(--bestcv-primary);
    box-shadow: 0 18px 40px -22px color-mix(in srgb, var(--bestcv-primary) 60%, transparent);
}

.bestcv-pricing-card__ribbon {
    position: absolute;
    top: -0.8rem;
    left: 1.35rem;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    background: var(--bestcv-primary);
    color: var(--bestcv-surface);
    font-size: 0.75rem;
    font-weight: 700;
}

.bestcv-pricing-card h2 {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--bestcv-primary-dark);
}

.bestcv-pricing-card__who {
    margin: 0.25rem 0 0;
    min-height: 2.9em;
    color: var(--bestcv-text-muted);
    font-size: 0.92rem;
}

.bestcv-pricing-card__price {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-height: 4.1rem;
    margin: 0;
}

.bestcv-pricing-card__price strong {
    font-size: 2.2rem;
    font-weight: 800;
    line-height: 1;
    color: var(--bestcv-primary-dark);
    font-variant-numeric: tabular-nums;
}

.bestcv-pricing-card__price span {
    color: var(--bestcv-success);
    font-size: 0.85rem;
    font-weight: 600;
}

.bestcv-pricing-card form {
    margin: 0;
}

.bestcv-pricing-card .bestcv-button {
    width: 100%;
    min-height: 3rem;
}

.bestcv-pricing-card ul {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 0.93rem;
}

.bestcv-pricing-card li {
    position: relative;
    padding-left: 1.6rem;
}

.bestcv-pricing-card li::before {
    content: "\F26E";
    position: absolute;
    left: 0;
    top: 0.05rem;
    font-family: "bootstrap-icons";
    color: var(--bestcv-success);
}

.bestcv-pricing-card li.is-ai::before {
    content: "\F589";
    color: var(--bestcv-ai);
}

.bestcv-pricing-card__keep {
    margin: auto 0 0;
    padding-top: 0.9rem;
    border-top: 1px dashed var(--bestcv-border);
    color: var(--bestcv-text-muted);
    font-size: 0.85rem;
}

.bestcv-pricing-topup {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.25rem;
    margin-top: 1.15rem;
    padding: 1.35rem;
    border: 1px solid var(--bestcv-border);
    border-radius: 1rem;
    background: var(--bestcv-surface);
}

.bestcv-pricing-topup > div {
    flex: 1 1 16rem;
    min-width: 0;
}

.bestcv-pricing-topup h2 {
    margin: 0 0 0.2rem;
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--bestcv-primary-dark);
}

.bestcv-pricing-topup p {
    margin: 0;
    color: var(--bestcv-text-muted);
    font-size: 0.93rem;
}

.bestcv-pricing-topup strong {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--bestcv-primary-dark);
}

.bestcv-pricing-topup form {
    margin: 0;
}

.bestcv-pricing__promises {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 1.15rem;
    margin-top: 2.75rem;
}

.bestcv-pricing__promises > div {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding-left: 0.9rem;
    border-left: 3px solid var(--bestcv-gold);
}

.bestcv-pricing__promises strong {
    font-weight: 800;
    color: var(--bestcv-primary-dark);
}

.bestcv-pricing__promises span {
    color: var(--bestcv-text-muted);
    font-size: 0.92rem;
}

.bestcv-pricing-schools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.75rem;
    margin-top: 2.75rem;
    padding: 2rem;
    border-radius: 1.25rem;
    background: var(--bestcv-primary);
    color: var(--bestcv-surface);
}

.bestcv-pricing-schools > div:first-child {
    flex: 1 1 24rem;
    min-width: 0;
}

.bestcv-pricing-schools .bestcv-content__eyebrow {
    color: var(--bestcv-gold);
}

.bestcv-pricing-schools h2 {
    margin: 0.35rem 0 0.5rem;
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.2;
    color: var(--bestcv-surface);
}

.bestcv-pricing-schools p {
    margin: 0;
    color: color-mix(in srgb, var(--bestcv-surface) 82%, var(--bestcv-primary));
}

.bestcv-pricing-schools__actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
}

.bestcv-pricing-schools__actions > a:not(.bestcv-button) {
    color: var(--bestcv-surface);
    font-size: 0.9rem;
}

.bestcv-button--gold {
    border-color: var(--bestcv-gold);
    background: var(--bestcv-gold);
    color: var(--bestcv-primary-dark) !important;
}

.bestcv-applications__balance {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding: 1rem 1.25rem;
    border-radius: 0.9rem;
    background: var(--bestcv-surface-soft);
    font-weight: 600;
}

.bestcv-applications__balance form {
    margin: 0;
}

.bestcv-application {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.9rem;
    margin-bottom: 1.15rem;
    padding: 1.35rem;
    border: 1px solid var(--bestcv-border);
    border-radius: 1rem;
    background: var(--bestcv-surface);
}

.bestcv-application h2 {
    margin: 0 0 0.25rem;
    font-size: 1.15rem;
    font-weight: 800;
    overflow-wrap: anywhere;
}

.bestcv-application header p {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1rem;
    margin: 0;
    color: var(--bestcv-text-muted);
    font-size: 0.9rem;
}

.bestcv-application__documents {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.bestcv-application__documents li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem 0.85rem;
}

.bestcv-application__documents li > span {
    color: var(--bestcv-text-muted);
}

.bestcv-application details {
    width: 100%;
    font-size: 0.92rem;
}

.bestcv-application details summary {
    cursor: pointer;
    color: var(--bestcv-primary);
    font-weight: 600;
}

.bestcv-application details p {
    margin: 0.6rem 0 0;
    color: var(--bestcv-text-muted);
    overflow-wrap: anywhere;
}

.bestcv-code-form {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    max-width: 26rem;
}

.bestcv-code-form label {
    font-weight: 700;
}

.bestcv-code-form input {
    width: 100%;
    padding: 0.8rem 1rem;
    border: 1px solid var(--bestcv-border);
    border-radius: 0.5rem;
    background: var(--bestcv-surface);
    font-size: 1.15rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.bestcv-code-form input[aria-invalid="true"] {
    border-color: var(--bestcv-danger);
}

.bestcv-code-form__error {
    margin: 0;
    color: var(--bestcv-danger);
    font-size: 0.92rem;
}

/* The scrolling section bar keeps a tappable arrow at each visible edge. */
.resume-rail-arrow {
    display: none;
}

@media (max-width: 767.98px) {
    .resume-rail-arrow {
        display: block;
        position: sticky;
        flex: 0 0 2.25rem;
        width: 2.25rem;
        padding: 0;
        border: 0;
        background: none;
        z-index: 2;
        opacity: 0;
        pointer-events: none;
        transition: opacity 0.18s ease;
    }

    .resume-rail-arrow.is-visible {
        opacity: 1;
        pointer-events: auto;
    }

    .resume-rail-arrow span {
        position: absolute;
        top: 0;
        bottom: 0;
        display: flex;
        align-items: center;
        width: 100%;
        border-radius: 12px;
        background: rgba(245, 248, 252, 0.7);
        color: var(--bestcv-primary-dark);
        font-size: 0.95rem;
    }

    .resume-rail-arrow-prev {
        left: 0;
        margin-right: -2.25rem;
    }

    .resume-rail-arrow-prev span {
        left: 0;
        justify-content: flex-start;
        padding-left: 0.3rem;
    }

    .resume-rail-arrow-next {
        right: 0;
        margin-left: -2.25rem;
    }

    .resume-rail-arrow-next span {
        right: 0;
        justify-content: flex-end;
        padding-right: 0.3rem;
    }
}

@media (max-width: 767.98px) and (prefers-reduced-transparency: reduce) {
    .resume-rail {
        background: #eef1f5;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}

/* Barma loader (x-barma-loader): the portrait stays still, the three ring
   layers turn at their own pace. Lives here because this sheet is the one
   every layout loads. */
.barma-loader {
    display: inline-block;
    width: var(--barma-loader-size);
    height: var(--barma-loader-size);
    flex: 0 0 auto;
    position: relative;
    vertical-align: middle;
}

.barma-loader svg {
    display: block;
    width: 100%;
    height: 100%;
}

.barma-loader__ring {
    fill: none;
    animation: barma-loader-spin 4s linear infinite;
}

.barma-loader__ring--gold {
    animation-direction: reverse;
}

.barma-loader__ring--inner {
    animation-duration: 2s;
}

.barma-loader__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

@keyframes barma-loader-spin {
    to {
        transform: rotate(360deg);
    }
}

/* A frozen loader reads as a crash, so the rings only slow down. */
@media (prefers-reduced-motion: reduce) {
    .barma-loader__ring {
        animation-duration: 16s;
    }

    .barma-loader__ring--inner {
        animation-duration: 8s;
    }
}