/* =============================================================
   Cruzber Roof Racks — Frontend Styles  (Phase 2 UI Overhaul)
   ============================================================= */

/* ── Variables ─────────────────────────────────────────────── */
:root {
    --crr-primary:      #d32f2f;
    --crr-primary-dk:   #b71c1c;
    --crr-primary-lt:   #ffebee;
    --crr-accent:       #1a1a1a;
    --crr-bg:           #f4f4f6;
    --crr-card:         #ffffff;
    --crr-border:       #e2e2e8;
    --crr-text:         #1e1e2e;
    --crr-muted:        #6b7080;
    --crr-radius:       12px;
    --crr-radius-lg:    18px;
    --crr-shadow:       0 2px 16px rgba(0,0,0,.07);
    --crr-shadow-hover: 0 8px 32px rgba(0,0,0,.13);
    --crr-shadow-card:  0 1px 4px rgba(0,0,0,.06), 0 4px 16px rgba(0,0,0,.08);
    --crr-transition:   .22s cubic-bezier(.4,0,.2,1);
    --crr-green:        #1b8a4c;
    --crr-green-bg:     #e8f5ee;
    --crr-amber:        #c07800;
    --crr-amber-bg:     #fff8e1;
}

/* ── App wrapper ────────────────────────────────────────────── */
.crr-app {
    font-family: inherit;
    color: var(--crr-text);
    max-width: 1120px;
    margin: 0 auto;
    padding: 32px 18px 64px;
}

/* ── Section headings ───────────────────────────────────────── */
.crr-section-title {
    font-size: 1.65rem;
    font-weight: 800;
    margin: 0 0 6px;
    color: var(--crr-accent);
    letter-spacing: -.02em;
    line-height: 1.2;
}
.crr-section-subtitle {
    color: var(--crr-muted);
    margin: 0 0 28px;
    font-size: .95rem;
    line-height: 1.6;
}

/* ═══════════════════════════════════════════════════════════
   BRAND BUTTONS — pill cards with avatar letter
   ═══════════════════════════════════════════════════════════ */
.crr-brand-section-label {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--crr-muted);
    margin-bottom: 10px;
}

.crr-brand-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 28px;
}

.crr-brand-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--crr-text);
    background: var(--crr-card);
    border: 1.5px solid var(--crr-border);
    border-radius: 100px;
    padding: 7px 14px 7px 8px;
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
    transition:
        background var(--crr-transition),
        color var(--crr-transition),
        border-color var(--crr-transition),
        box-shadow var(--crr-transition),
        transform var(--crr-transition);
    box-shadow: var(--crr-shadow);
    white-space: nowrap;
}

.crr-brand-btn__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--crr-bg);
    color: var(--crr-primary);
    font-size: .7rem;
    font-weight: 800;
    flex-shrink: 0;
    transition: background var(--crr-transition), color var(--crr-transition);
}

.crr-brand-btn:hover {
    background: var(--crr-primary-lt);
    border-color: var(--crr-primary);
    color: var(--crr-primary);
    box-shadow: 0 4px 16px rgba(211,47,47,.15);
    transform: translateY(-1px);
}
.crr-brand-btn:hover .crr-brand-btn__avatar {
    background: var(--crr-primary);
    color: #fff;
}

.crr-brand-btn.is-active {
    background: var(--crr-primary);
    border-color: var(--crr-primary);
    color: #fff;
    box-shadow: 0 4px 20px rgba(211,47,47,.35);
    transform: translateY(-1px);
}
.crr-brand-btn.is-active .crr-brand-btn__avatar {
    background: rgba(255,255,255,.25);
    color: #fff;
}

/* ═══════════════════════════════════════════════════════════
   SELECTOR SECTION
   ═══════════════════════════════════════════════════════════ */
.crr-selector-section {
    background: var(--crr-card);
    border: 1.5px solid var(--crr-border);
    border-radius: var(--crr-radius-lg);
    padding: 32px 32px 36px;
    margin-bottom: 32px;
    box-shadow: var(--crr-shadow-card);
    position: relative;
    overflow: hidden;
}

/* Subtle decorative top bar */
.crr-selector-section::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--crr-primary), #ff7043);
    border-radius: var(--crr-radius-lg) var(--crr-radius-lg) 0 0;
}

/* ── Steps row ──────────────────────────────────────────────── */
.crr-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 24px;
}

/* ── Single step ────────────────────────────────────────────── */
.crr-step {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.crr-step__label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--crr-muted);
}

/* Active step: label turns dark when select is enabled */
.crr-step:not([data-disabled]) .crr-step__label { color: var(--crr-accent); }

.crr-step__number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--crr-primary), #ff5722);
    color: #fff;
    font-size: .72rem;
    font-weight: 800;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(211,47,47,.35);
}

.crr-step__control {
    position: relative;
}

.crr-select {
    width: 100%;
    padding: 12px 40px 12px 14px;
    border: 2px solid var(--crr-border);
    border-radius: 10px;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7'%3E%3Cpath d='M0 0l6 7 6-7z' fill='%236b7080'/%3E%3C/svg%3E") no-repeat right 14px center;
    appearance: none;
    font-size: .95rem;
    color: var(--crr-text);
    transition: border-color var(--crr-transition), box-shadow var(--crr-transition), background var(--crr-transition);
    cursor: pointer;
    font-weight: 500;
}

.crr-select:focus {
    outline: none;
    border-color: var(--crr-primary);
    box-shadow: 0 0 0 4px rgba(211,47,47,.12);
    background-color: #fffafa;
}

.crr-select:disabled {
    opacity: .45;
    cursor: not-allowed;
    background-color: var(--crr-bg);
}

/* ── Step spinner ─────────────────────────────────────────── */
.crr-step__spinner {
    display: none;
    position: absolute;
    right: 40px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    border: 2px solid var(--crr-border);
    border-top-color: var(--crr-primary);
    border-radius: 50%;
    animation: crr-spin .7s linear infinite;
}
.crr-step--loading .crr-step__spinner { display: block; }

/* ═══════════════════════════════════════════════════════════
   FEEDBACK BANNER
   ═══════════════════════════════════════════════════════════ */
.crr-feedback {
    border-radius: 10px;
    padding: 14px 18px;
    font-size: .9rem;
    font-weight: 500;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.crr-feedback--success {
    background: var(--crr-green-bg);
    border: 1.5px solid #a8d5b5;
    color: var(--crr-green);
}
.crr-feedback--error {
    background: #ffebee;
    border: 1.5px solid #ffcdd2;
    color: var(--crr-primary-dk);
}
.crr-feedback--info {
    background: #e8f0fe;
    border: 1.5px solid #c5d3f8;
    color: #1a47b8;
}

/* ═══════════════════════════════════════════════════════════
   RESULTS SECTION
   ═══════════════════════════════════════════════════════════ */
.crr-results__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 20px;
}

/* ── Vehicle summary badge ──────────────────────────────────── */
.crr-vehicle-summary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, #fff3e0, #ffe8cc);
    border: 1.5px solid #ffcc80;
    border-radius: 100px;
    padding: 8px 20px;
    font-size: .88rem;
    font-weight: 700;
    color: #bf5000;
    margin-bottom: 24px;
    box-shadow: 0 2px 8px rgba(191,80,0,.12);
}
.crr-vehicle-summary svg { flex-shrink: 0; }

/* ═══════════════════════════════════════════════════════════
   LOADING — three dots
   ═══════════════════════════════════════════════════════════ */
.crr-results-loading {
    text-align: center;
    padding: 40px 0;
    color: var(--crr-muted);
    font-size: .9rem;
    font-weight: 500;
}

.crr-dots {
    display: inline-flex;
    gap: 5px;
    vertical-align: middle;
    margin-right: 10px;
}
.crr-dots span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--crr-primary);
    animation: crr-bounce .9s ease-in-out infinite;
}
.crr-dots span:nth-child(2) { animation-delay: .15s; }
.crr-dots span:nth-child(3) { animation-delay: .3s; }

@keyframes crr-bounce {
    0%, 80%, 100% { transform: scale(.6); opacity: .4; }
    40%           { transform: scale(1);  opacity: 1; }
}

/* ═══════════════════════════════════════════════════════════
   SOLUTION CARDS
   ═══════════════════════════════════════════════════════════ */
.crr-solutions-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 22px;
}

.crr-solution-card {
    background: var(--crr-card);
    border: 1.5px solid var(--crr-border);
    border-radius: var(--crr-radius-lg);
    box-shadow: var(--crr-shadow-card);
    transition: box-shadow var(--crr-transition), transform var(--crr-transition), border-color var(--crr-transition);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}

.crr-solution-card:hover {
    box-shadow: var(--crr-shadow-hover);
    transform: translateY(-4px);
    border-color: #ccc;
}

/* Image area */
.crr-solution-card__img-wrap {
    position: relative;
    overflow: hidden;
    background: #f8f8fa;
    border-bottom: 1.5px solid var(--crr-border);
}

.crr-solution-card__img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: contain;
    padding: 12px;
    display: block;
    transition: transform .4s ease;
}

.crr-solution-card:hover .crr-solution-card__img {
    transform: scale(1.04);
}

.crr-solution-card__img--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    aspect-ratio: 16/9;
    background: linear-gradient(135deg, #f8f8fa, #efefef);
    border-bottom: 1.5px solid var(--crr-border);
    color: #ccc;
}

/* Price badge — top-right corner of image */
.crr-solution-card__price-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: var(--crr-primary);
    color: #fff;
    border-radius: 8px;
    padding: 4px 10px;
    font-size: .82rem;
    font-weight: 800;
    letter-spacing: -.01em;
    box-shadow: 0 2px 8px rgba(211,47,47,.35);
    line-height: 1.4;
}
.crr-solution-card__price-badge--none {
    background: #e0e0e8;
    color: var(--crr-muted);
    font-weight: 600;
    font-size: .75rem;
}

.crr-solution-card__body {
    padding: 18px 18px 12px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.crr-solution-card__name {
    font-size: 1.05rem;
    font-weight: 800;
    margin: 0;
    color: var(--crr-accent);
    line-height: 1.25;
    letter-spacing: -.01em;
}

.crr-solution-card__meta {
    font-size: .78rem;
    color: var(--crr-muted);
    display: flex;
    align-items: center;
    gap: 5px;
    font-weight: 500;
}

/* Items list */
.crr-solution-card__items {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.crr-solution-card__item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: .82rem;
    padding: 7px 10px;
    background: var(--crr-bg);
    border-radius: 8px;
    border: 1px solid transparent;
    transition: border-color var(--crr-transition);
}
.crr-solution-card__item:hover { border-color: var(--crr-border); }

.crr-solution-card__item-sku {
    font-family: 'SF Mono', 'Fira Code', monospace;
    font-size: .72rem;
    color: var(--crr-muted);
    white-space: nowrap;
    background: #fff;
    padding: 1px 5px;
    border-radius: 4px;
    border: 1px solid var(--crr-border);
}

.crr-solution-card__item-desc {
    flex: 1;
    line-height: 1.4;
    color: var(--crr-text);
}

/* Badges */
.crr-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 9px;
    border-radius: 100px;
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    flex-shrink: 0;
    line-height: 1.6;
}
.crr-badge--mandatory {
    background: var(--crr-green-bg);
    color: var(--crr-green);
    border: 1px solid #b2dfc4;
}
.crr-badge--optional {
    background: var(--crr-amber-bg);
    color: var(--crr-amber);
    border: 1px solid #ffd591;
}

/* Footer */
.crr-solution-card__footer {
    padding: 0 18px 18px;
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ═══════════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════════ */
.crr-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 11px 22px;
    border-radius: 10px;
    font-size: .9rem;
    font-weight: 700;
    cursor: pointer;
    border: 2px solid transparent;
    text-decoration: none;
    transition:
        background var(--crr-transition),
        color var(--crr-transition),
        border-color var(--crr-transition),
        transform var(--crr-transition),
        box-shadow var(--crr-transition);
    width: 100%;
    text-align: center;
    letter-spacing: -.01em;
}

.crr-btn:active { transform: scale(.97); }

.crr-btn--primary {
    background: linear-gradient(135deg, var(--crr-primary), #c62828);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 2px 12px rgba(211,47,47,.3);
}
.crr-btn--primary:hover {
    background: linear-gradient(135deg, #c62828, var(--crr-primary-dk));
    box-shadow: 0 4px 20px rgba(211,47,47,.4);
    transform: translateY(-1px);
}
.crr-btn--primary:disabled {
    opacity: .5;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.crr-btn--ghost {
    background: transparent;
    border-color: var(--crr-border);
    color: var(--crr-muted);
    width: auto;
    padding: 8px 16px;
    font-size: .84rem;
    border-radius: 8px;
}
.crr-btn--ghost:hover {
    border-color: var(--crr-primary);
    color: var(--crr-primary);
    background: var(--crr-primary-lt);
}

.crr-btn--success {
    background: linear-gradient(135deg, #2e7d32, #1b5e20);
    color: #fff;
    border-color: transparent;
    pointer-events: none;
    box-shadow: 0 2px 12px rgba(46,125,50,.3);
}

.crr-btn--cart-link {
    background: #fff;
    color: var(--crr-primary);
    border-color: var(--crr-primary);
    box-shadow: none;
}
.crr-btn--cart-link:hover {
    background: var(--crr-primary-lt);
    box-shadow: 0 2px 10px rgba(211,47,47,.15);
}

/* ═══════════════════════════════════════════════════════════
   FILTER PANEL
   ═══════════════════════════════════════════════════════════ */
.crr-filters {
    background: var(--crr-card);
    border: 1.5px solid var(--crr-border);
    border-radius: var(--crr-radius-lg);
    padding: 24px 24px 20px;
    margin: 24px 0;
    box-shadow: var(--crr-shadow);
}

.crr-filters h3 {
    margin: 0 0 18px;
    font-size: .95rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--crr-muted);
}

.crr-filter-group {
    margin-bottom: 18px;
}

.crr-filter-group > label {
    display: block;
    font-weight: 700;
    margin-bottom: 8px;
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--crr-accent);
}

/* Price inputs */
.crr-price-inputs {
    display: flex;
    align-items: center;
    gap: 10px;
}
.crr-price-inputs input {
    flex: 1;
    padding: 9px 12px;
    border: 1.5px solid var(--crr-border);
    border-radius: 8px;
    font-size: .88rem;
    color: var(--crr-text);
    font-weight: 500;
    transition: border-color var(--crr-transition), box-shadow var(--crr-transition);
    background: var(--crr-bg);
}
.crr-price-inputs input:focus {
    outline: none;
    border-color: var(--crr-primary);
    box-shadow: 0 0 0 3px rgba(211,47,47,.1);
    background: #fff;
}
.crr-price-separator {
    color: var(--crr-muted);
    font-weight: 600;
    font-size: .85rem;
    flex-shrink: 0;
}

/* Pill toggle checkboxes */
.crr-checkbox-group {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.crr-checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: 0;
    cursor: pointer;
}

.crr-checkbox-label input[type="checkbox"] {
    display: none;
}

.crr-checkbox-label .crr-pill {
    display: inline-flex;
    align-items: center;
    padding: 5px 12px;
    border-radius: 100px;
    border: 1.5px solid var(--crr-border);
    background: var(--crr-bg);
    font-size: .78rem;
    font-weight: 600;
    color: var(--crr-muted);
    transition:
        background var(--crr-transition),
        color var(--crr-transition),
        border-color var(--crr-transition),
        box-shadow var(--crr-transition);
    user-select: none;
}

.crr-checkbox-label input:checked + .crr-pill {
    background: var(--crr-primary-lt);
    border-color: var(--crr-primary);
    color: var(--crr-primary);
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(211,47,47,.15);
}

.crr-checkbox-label:hover .crr-pill {
    border-color: var(--crr-primary);
    color: var(--crr-primary);
}

.crr-no-options {
    font-style: italic;
    color: var(--crr-muted);
    font-size: .82rem;
}

#crr-filter-clear {
    margin-top: 6px;
}

/* ═══════════════════════════════════════════════════════════
   TRUST BADGES
   ═══════════════════════════════════════════════════════════ */
.crr-trust-badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    padding: 28px 0 4px;
    border-top: 1.5px solid var(--crr-border);
    margin-top: 36px;
}

.crr-trust-badge {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--crr-card);
    border: 1.5px solid var(--crr-border);
    border-radius: 12px;
    padding: 12px 18px;
    font-weight: 600;
    font-size: .84rem;
    color: var(--crr-text);
    box-shadow: var(--crr-shadow);
    transition: transform var(--crr-transition), box-shadow var(--crr-transition), border-color var(--crr-transition);
    flex: 1 1 160px;
    max-width: 200px;
}

.crr-trust-badge:hover {
    transform: translateY(-2px);
    box-shadow: var(--crr-shadow-hover);
    border-color: #ccc;
}

.crr-trust-badge__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.crr-trust-badge__icon--lock    { background: #e8f5ee; }
.crr-trust-badge__icon--truck   { background: #e8f0fe; }
.crr-trust-badge__icon--shield  { background: #fff3e0; }
.crr-trust-badge__icon--chat    { background: #f3e8ff; }
.crr-trust-badge__icon--star    { background: #fff8e1; }

.crr-trust-badge__text {
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.crr-trust-badge__title {
    font-weight: 700;
    font-size: .84rem;
    color: var(--crr-accent);
    line-height: 1.2;
}
.crr-trust-badge__sub {
    font-size: .72rem;
    color: var(--crr-muted);
    font-weight: 500;
}

/* ═══════════════════════════════════════════════════════════
   SEO SECTION
   ═══════════════════════════════════════════════════════════ */
.crr-seo {
    margin-top: 40px;
    border-top: 1.5px solid var(--crr-border);
    padding-top: 32px;
}

.crr-seo__guide {
    background: linear-gradient(135deg, #f8f8fa 0%, #fff 100%);
    border: 1.5px solid var(--crr-border);
    border-left: 4px solid var(--crr-primary);
    border-radius: var(--crr-radius);
    padding: 22px 24px;
    margin-bottom: 32px;
}

.crr-seo__guide h2 {
    font-size: 1.15rem;
    font-weight: 800;
    margin: 0 0 12px;
    color: var(--crr-accent);
    letter-spacing: -.01em;
}

.crr-seo__guide p {
    margin: 0;
    color: var(--crr-muted);
    line-height: 1.7;
    font-size: .92rem;
}

.crr-faq h2 {
    font-size: 1.15rem;
    font-weight: 800;
    margin: 0 0 16px;
    color: var(--crr-accent);
    letter-spacing: -.01em;
}

/* FAQ accordion */
.crr-faq-item {
    margin-bottom: 10px;
    border: 1.5px solid var(--crr-border);
    border-radius: var(--crr-radius);
    background: var(--crr-card);
    overflow: hidden;
    transition: border-color var(--crr-transition), box-shadow var(--crr-transition);
}

.crr-faq-item[open] {
    border-color: #ccc;
    box-shadow: var(--crr-shadow);
}

.crr-faq-item summary {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    font-weight: 700;
    font-size: .92rem;
    cursor: pointer;
    color: var(--crr-accent);
    user-select: none;
    gap: 12px;
}

.crr-faq-item summary::-webkit-details-marker { display: none; }

.crr-faq-item summary::after {
    content: '';
    display: inline-block;
    width: 18px;
    height: 18px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%236b7080' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") center/contain no-repeat;
    flex-shrink: 0;
    transition: transform .25s ease;
}

.crr-faq-item[open] summary::after {
    transform: rotate(180deg);
}

.crr-faq-item summary:hover {
    color: var(--crr-primary);
}

.crr-faq-item p {
    margin: 0;
    padding: 0 20px 18px;
    color: var(--crr-muted);
    line-height: 1.7;
    font-size: .9rem;
    border-top: 1px solid var(--crr-border);
    padding-top: 14px;
}

/* ═══════════════════════════════════════════════════════════
   ANIMATIONS
   ═══════════════════════════════════════════════════════════ */
@keyframes crr-spin { to { transform: rotate(360deg); } }

@keyframes crr-fade-in {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}
.crr-fade-in { animation: crr-fade-in .35s ease forwards; }

/* Legacy spinner (kept for step loading) */
.crr-spinner {
    width: 32px; height: 32px;
    border: 3px solid var(--crr-border);
    border-top-color: var(--crr-primary);
    border-radius: 50%;
    animation: crr-spin .8s linear infinite;
}
.crr-spinner-small {
    display: inline-block;
    width: 18px; height: 18px;
    border: 2px solid var(--crr-border);
    border-top-color: var(--crr-primary);
    border-radius: 50%;
    animation: crr-spin .8s linear infinite;
    vertical-align: middle;
}

/* No-results */
.crr-no-results {
    grid-column: 1 / -1;
    text-align: center;
    color: var(--crr-muted);
    padding: 40px 0;
    font-style: italic;
    font-size: .95rem;
}
/* ── Cart lock upsell notice ── */
.crr-cart-upsell-notice {
    background: #fff8e1;
    border: 1.5px solid #ffd54f;
    border-radius: var(--crr-radius);
    padding: 18px 24px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    font-size: .92rem;
    font-weight: 600;
}
.crr-cart-upsell-notice p {
    margin: 0;
    flex: 1;
}
.crr-cart-upsell-notice button {
    cursor: pointer;
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 700px) {
    .crr-selector-section { padding: 22px 18px 26px; }
    .crr-steps { grid-template-columns: 1fr; gap: 16px; }
    .crr-solutions-list { grid-template-columns: 1fr; }
    .crr-section-title { font-size: 1.3rem; }
    .crr-trust-badge { max-width: 100%; flex: 1 1 100%; }
    .crr-trust-badges { gap: 10px; }
    .crr-filters { padding: 18px 16px; }
    .crr-solution-card__footer { padding: 0 14px 14px; }
    .crr-solution-card__body { padding: 14px 14px 10px; }
}

@media (max-width: 480px) {
    .crr-brand-btn { font-size: .78rem; padding: 6px 12px 6px 7px; }
    .crr-btn { padding: 10px 16px; font-size: .86rem; }
}
/* Lock Upsell Modal */
.crr-upsell-modal {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,.5); display: flex; align-items: center; justify-content: center;
    z-index: 100000;
}
.crr-upsell-content {
    background: var(--crr-card); border-radius: var(--crr-radius-lg); padding: 24px;
    max-width: 400px; width: 90%; text-align: center; box-shadow: var(--crr-shadow-hover);
}
.crr-upsell-content p { margin: 0 0 20px; font-weight: 600; }
.crr-upsell-content button { margin: 5px; }


/* ── Hide brand pill buttons (keep for future logo usage) ── */
#crr-brand-buttons {
    display: none;
}
/* ── Introductory text area ── */
.crr-intro-text {
    margin-bottom: 24px;
    color: var(--crr-text);
    font-size: .95rem;
    line-height: 1.7;
}