/* =============================================================
   ROLLIN HOST 2026 — Order Form (loja/checkout)
   Complementa rollin-theme.css com componentes específicos da loja
   ============================================================= */

/* === SVG SAFETY NET (global, aplica sempre que rollin-cart.css carrega) ===
   Garantia: nenhum SVG/lucide explode mesmo sem rollin-icons.css.
   Necessário porque a loja roda com header do painel (45+ ícones lucide). */
[data-lucide]:not([data-lucide=""]),
svg.lucide,
svg[class*="lucide-"] {
    width: 1em !important;
    height: 1em !important;
    max-width: 1em !important;
    max-height: 1em !important;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
    vertical-align: middle;
    display: inline-block;
}
/* Esconde data-lucide vazios (antes da hidratação Lucide) — evita "quadrado feio" */
[data-lucide]:empty {
    display: inline-block;
    width: 1em;
    height: 1em;
    visibility: hidden;
}
[data-lucide] svg { visibility: visible; }


/* Poppins na página inteira VIA HERANÇA (não via * que quebra FontAwesome).
   font-family é inherited por padrão, então setar só no wrapper basta. */
.rollin-cart-page {
    font-family: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    padding: 60px 24px;
    min-height: 70vh;
    max-width: 1280px;
    margin: 0 auto;
}
/* Garante Poppins em filhos que possam ter font-family hardcoded
   (mas EXCLUI ícones do FontAwesome/Lucide pra não quebrar glyphs) */
.rollin-cart-page h1,
.rollin-cart-page h2,
.rollin-cart-page h3,
.rollin-cart-page h4,
.rollin-cart-page h5,
.rollin-cart-page h6,
.rollin-cart-page p,
.rollin-cart-page span:not([class*="fa"]):not([data-lucide]),
.rollin-cart-page button,
.rollin-cart-page input,
.rollin-cart-page textarea,
.rollin-cart-page select,
.rollin-cart-page label,
.rollin-cart-page strong,
.rollin-cart-page em,
.rollin-cart-page small,
.rollin-cart-page dl,
.rollin-cart-page dt,
.rollin-cart-page dd,
.rollin-cart-page a {
    font-family: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
/* Restaura mono onde for proposital (preços, domínios, código) */
.rollin-cart-page .rh-ci-sub,
.rollin-cart-page .rh-ci-meta-mono,
.rollin-cart-page [class*="mono"],
.rollin-cart-page code,
.rollin-cart-page kbd,
.rollin-cart-page pre {
    font-family: 'JetBrains Mono', 'SF Mono', ui-monospace, Consolas, monospace;
}

/* === Hero compacto, sem gradient text candy === */
.rollin-cart-hero {
    text-align: center;
    margin-bottom: 40px;
    padding: 0;
}

/* Eyebrow no contexto da loja — texto puro, sem pílula/border. Reset
   explícito do .rollin-eyebrow do rollin-theme.css que tem border + bg. */
.rollin-store-shell .rollin-eyebrow,
.rollin-cart-page .rollin-eyebrow,
.rollin-store-pagehead .rollin-eyebrow {
    display: inline-block !important;
    color: #6a1ab0 !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    margin: 0 0 14px !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
}
[data-theme="dark"] .rollin-store-shell .rollin-eyebrow,
[data-theme="dark"] .rollin-cart-page .rollin-eyebrow,
[data-theme="dark"] .rollin-store-pagehead .rollin-eyebrow {
    color: #b97aff !important;
}

.rollin-cart-hero-title {
    font-size: clamp(28px, 4vw, 44px);
    font-weight: 800;
    letter-spacing: -0.025em;
    margin: 0 0 12px;
    color: #0d0a1f;
    line-height: 1.1;
    /* removido gradient text — caretato */
}
[data-theme="dark"] .rollin-cart-hero-title { color: #ffffff; }

.rollin-cart-hero-subtitle {
    color: rgba(13, 10, 31, 0.65);
    font-size: 16px;
    max-width: 580px;
    margin: 0 auto 24px;
    line-height: 1.55;
}
[data-theme="dark"] .rollin-cart-hero-subtitle { color: rgba(255, 255, 255, 0.65); }

/* === Trust row: linha clean sem chip === */
.rollin-trust-row {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 24px;
    justify-content: center;
    padding: 0;
    background: transparent;
    border: none;
    margin: 0 auto;
}

.rollin-trust {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    color: rgba(13, 10, 31, 0.55);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0;
    background: transparent;
}
[data-theme="dark"] .rollin-trust { color: rgba(255, 255, 255, 0.55); }

.rollin-trust::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #19a366;
    margin-right: 2px;
}
[data-theme="dark"] .rollin-trust::before { background: #19f29c; }

.rollin-trust i,
.rollin-trust svg { display: none; } /* não usa mais ícones lucide aqui */

/* === Billing cycle toggle === */
.rollin-cycle-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    margin-bottom: var(--space-xl);
    flex-wrap: wrap;
}

.rollin-cycle-label {
    color: var(--text-muted);
    font-size: var(--fs-sm);
    font-weight: 500;
}

.rollin-cycle-options {
    display: inline-flex;
    padding: 4px;
    background: var(--bg-glass);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-full);
    /* backdrop-filter removido — perf killer */
}

.rollin-cycle-opt {
    padding: 8px 18px;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-family: 'Poppins', sans-serif;
    font-size: var(--fs-sm);
    font-weight: 600;
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: transform 200ms ease, border-color 200ms ease, background 200ms ease, box-shadow 200ms ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.rollin-cycle-opt:hover {
    color: var(--text-primary);
}

.rollin-cycle-opt.active {
    background: var(--gradient-primary);
    color: white;
    box-shadow: var(--shadow-glow-pink);
}

.rollin-badge-save {
    padding: 2px 6px;
    background: rgba(6, 230, 194, 0.2);
    color: var(--accent-cyan);
    border-radius: var(--radius-sm);
    font-size: 10px;
    font-weight: 700;
}

.rollin-cycle-opt.active .rollin-badge-save {
    background: rgba(255, 255, 255, 0.25);
    color: white;
}

/* =============================================================
   PLAN CARDS — Design profissional Linear/Stripe-style
   ============================================================= */

.rollin-plans-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin: 40px 0;
    max-width: 1180px;
    margin-left: auto;
    margin-right: auto;
}

.rollin-plan-card {
    position: relative;
    background: #ffffff;
    border: 1px solid rgba(13, 10, 31, 0.08);
    border-radius: 16px;
    padding: 32px 28px;
    display: flex;
    flex-direction: column;
    transition: transform 220ms cubic-bezier(.2,.7,.2,1), box-shadow 220ms ease, border-color 220ms ease;
    box-shadow:
        0 1px 2px rgba(13, 10, 31, 0.04),
        0 1px 3px rgba(13, 10, 31, 0.04);
}
[data-theme="dark"] .rollin-plan-card {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.2),
        0 4px 12px rgba(0, 0, 0, 0.2);
}

.rollin-plan-card:hover {
    transform: translateY(-3px);
    border-color: rgba(138, 43, 214, 0.25);
    box-shadow:
        0 1px 2px rgba(13, 10, 31, 0.04),
        0 12px 32px rgba(138, 43, 214, 0.10),
        0 4px 12px rgba(13, 10, 31, 0.05);
}
[data-theme="dark"] .rollin-plan-card:hover {
    border-color: rgba(138, 43, 214, 0.35);
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.3),
        0 16px 48px rgba(138, 43, 214, 0.18);
}

/* === Featured card: gradient border + slight elevation === */
.rollin-plan-card.featured {
    border: 1.5px solid transparent;
    background:
        linear-gradient(#ffffff, #ffffff) padding-box,
        linear-gradient(135deg, #8a2bd6 0%, #6a1ab0 100%) border-box;
    box-shadow:
        0 1px 2px rgba(138, 43, 214, 0.06),
        0 12px 32px rgba(138, 43, 214, 0.14),
        0 4px 12px rgba(138, 43, 214, 0.08);
}
[data-theme="dark"] .rollin-plan-card.featured {
    background:
        linear-gradient(#15002b, #15002b) padding-box,
        linear-gradient(135deg, #8a2bd6 0%, #6a1ab0 100%) border-box;
    box-shadow:
        0 1px 2px rgba(138, 43, 214, 0.2),
        0 16px 48px rgba(138, 43, 214, 0.28);
}
.rollin-plan-card.featured:hover {
    transform: translateY(-4px);
}

/* === Ribbon: pill no topo, NÃO corner ribbon === */
.rollin-plan-ribbon {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    padding: 5px 14px;
    background: linear-gradient(135deg, #8a2bd6 0%, #6a1ab0 100%);
    color: #ffffff;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.10em;
    border-radius: 999px;
    white-space: nowrap;
    box-shadow:
        0 1px 2px rgba(138, 43, 214, 0.25),
        0 4px 12px rgba(138, 43, 214, 0.32);
    z-index: 1;
}

/* === Header === */
.rollin-plan-header {
    margin-bottom: 4px;
}
.rollin-plan-name {
    font-size: 17px;
    font-weight: 700;
    color: #0d0a1f;
    margin: 0;
    letter-spacing: -0.01em;
    line-height: 1.3;
}
[data-theme="dark"] .rollin-plan-name { color: #ffffff; }

.rollin-plan-stock {
    color: rgba(13, 10, 31, 0.5);
    font-size: 11px;
    margin: 6px 0 0;
    font-weight: 500;
}
[data-theme="dark"] .rollin-plan-stock { color: rgba(255, 255, 255, 0.5); }

/* === Pricing === */
.rollin-plan-pricing {
    margin: 18px 0 22px;
    text-align: left;
}

.rollin-plan-from {
    color: rgba(13, 10, 31, 0.5);
    font-size: 10.5px;
    margin: 0 0 4px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
}
[data-theme="dark"] .rollin-plan-from { color: rgba(255, 255, 255, 0.5); }

.rollin-plan-bundle {
    display: inline-block;
    color: #6a1ab0;
    font-size: 10.5px;
    font-weight: 800;
    margin: 0 0 6px;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    background: rgba(106, 26, 176, 0.08);
    padding: 3px 10px;
    border-radius: 999px;
}
[data-theme="dark"] .rollin-plan-bundle { color: #b97aff; background: rgba(138, 43, 214, 0.18); }

.rollin-plan-price {
    font-size: 38px;
    font-weight: 800;
    color: #0d0a1f;
    line-height: 1;
    letter-spacing: -0.025em;
    display: inline;
    /* SEM gradient text — fica candy. Mantém preto sólido. */
}
[data-theme="dark"] .rollin-plan-price { color: #ffffff; }

.rollin-plan-cycle {
    color: rgba(13, 10, 31, 0.5);
    font-size: 13px;
    margin-left: 4px;
    font-weight: 500;
}
[data-theme="dark"] .rollin-plan-cycle { color: rgba(255, 255, 255, 0.55); }

.rollin-plan-setup {
    font-size: 11.5px;
    color: rgba(13, 10, 31, 0.55);
    margin: 12px 0 0;
    font-weight: 500;
}
[data-theme="dark"] .rollin-plan-setup { color: rgba(255, 255, 255, 0.5); }

.rollin-plan-setup.rollin-free {
    color: #19a366;
    font-weight: 600;
}
[data-theme="dark"] .rollin-plan-setup.rollin-free { color: #19f29c; }

/* === Description === */
.rollin-plan-desc {
    color: rgba(13, 10, 31, 0.65);
    font-size: 13px;
    line-height: 1.55;
    margin: 0 0 20px;
    padding: 16px 0;
    border-top: 1px solid rgba(13, 10, 31, 0.06);
    border-bottom: 1px solid rgba(13, 10, 31, 0.06);
}
[data-theme="dark"] .rollin-plan-desc {
    color: rgba(255, 255, 255, 0.65);
    border-color: rgba(255, 255, 255, 0.08);
}

/* === Features list === */
.rollin-plan-features {
    list-style: none;
    padding: 0;
    margin: 0 0 24px;
    flex: 1;
    display: grid;
    gap: 10px;
}

.rollin-plan-features li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 0;
    color: rgba(13, 10, 31, 0.75);
    font-size: 13px;
    line-height: 1.5;
    border: none;
}
[data-theme="dark"] .rollin-plan-features li { color: rgba(255, 255, 255, 0.75); }

.rollin-plan-features strong {
    color: #0d0a1f;
    font-weight: 700;
}
[data-theme="dark"] .rollin-plan-features strong { color: #ffffff; }

.rollin-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    background: rgba(138, 43, 214, 0.10);
    color: #6a1ab0;
    border-radius: 50%;
    font-size: 10px;
    font-weight: 800;
    margin-top: 2px;
}
[data-theme="dark"] .rollin-check {
    background: rgba(138, 43, 214, 0.20);
    color: #b97aff;
}
.rollin-plan-card.featured .rollin-check {
    background: linear-gradient(135deg, #8a2bd6, #6a1ab0);
    color: #ffffff;
}

/* === Reset agressivo de outline preto em buttons/links do cart/store ====
   Browser default + Bootstrap focus rings. Click → outline preto feio.
   Substituímos por nada (mouse) ou ring brand sutil (keyboard via :focus-visible). */
.rollin-cart-page a,
.rollin-cart-page button,
.rollin-cart-page input,
.rollin-cart-page select,
.rollin-store-shell a,
.rollin-store-shell button,
.rollin-store-shell input,
.rollin-store-shell select,
.rh-tld-card,
.rollin-plan-cta,
.rollin-plan-card,
.rollin-summary-cta,
.rh-cd-cta,
.rh-dom-input-btn,
.rh-product-action-btn,
.rh-modal-btn {
    outline: none !important;
    -webkit-tap-highlight-color: transparent;
}
.rollin-cart-page a:focus,
.rollin-cart-page button:focus,
.rollin-cart-page input:focus,
.rollin-cart-page select:focus,
.rollin-store-shell a:focus,
.rollin-store-shell button:focus,
.rollin-store-shell input:focus,
.rollin-store-shell select:focus,
.rollin-plan-cta:focus,
.rollin-summary-cta:focus,
.rh-cd-cta:focus,
.rh-dom-input-btn:focus,
.rh-product-action-btn:focus,
.rh-modal-btn:focus {
    outline: none !important;
    box-shadow: inherit;
}
/* Keyboard focus ring (Tab) — ring brand sutil */
.rollin-cart-page a:focus-visible,
.rollin-cart-page button:focus-visible,
.rollin-store-shell a:focus-visible,
.rollin-store-shell button:focus-visible,
.rollin-plan-cta:focus-visible,
.rollin-summary-cta:focus-visible,
.rh-cd-cta:focus-visible,
.rh-dom-input-btn:focus-visible,
.rh-product-action-btn:focus-visible,
.rh-modal-btn:focus-visible {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(184, 85, 255, 0.35) !important;
}

/* === CTA === */
.rollin-plan-cta {
    width: 100%;
    text-align: center;
    padding: 12px 22px !important;
    border-radius: 999px !important;
    font-weight: 700 !important;
    font-size: 13.5px !important;
    background: rgba(13, 10, 31, 0.04) !important;
    color: #0d0a1f !important;
    border: 1px solid rgba(13, 10, 31, 0.10) !important;
    box-shadow: none !important;
    transition: background 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease, box-shadow 180ms ease !important;
    text-decoration: none !important;
    display: block;
}
.rollin-plan-cta:hover {
    background: rgba(138, 43, 214, 0.08) !important;
    border-color: rgba(138, 43, 214, 0.40) !important;
    color: #6a1ab0 !important;
    text-decoration: none !important;
}
[data-theme="dark"] .rollin-plan-cta {
    background: rgba(255, 255, 255, 0.06) !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
}
[data-theme="dark"] .rollin-plan-cta:hover {
    background: rgba(138, 43, 214, 0.20) !important;
    border-color: rgba(138, 43, 214, 0.5) !important;
    color: #ffffff !important;
}

.rollin-plan-card.featured .rollin-plan-cta {
    background: linear-gradient(135deg, #8a2bd6 0%, #6a1ab0 100%) !important;
    color: #ffffff !important;
    border-color: transparent !important;
    box-shadow:
        0 1px 2px rgba(138, 43, 214, 0.20),
        0 6px 18px rgba(138, 43, 214, 0.32) !important;
}
.rollin-plan-card.featured .rollin-plan-cta:hover {
    transform: translateY(-1px);
    color: #ffffff !important;
    box-shadow:
        0 1px 2px rgba(138, 43, 214, 0.20),
        0 10px 28px rgba(138, 43, 214, 0.45) !important;
}

/* === AI chip dentro do card === */
.rollin-plan-ai-chip {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: var(--space-md);
    padding: 10px 14px;
    background: rgba(6, 230, 194, 0.08);
    border: 1px dashed rgba(6, 230, 194, 0.3);
    border-radius: var(--radius-md);
    font-size: var(--fs-xs);
    color: var(--text-secondary);
}

.rollin-plan-ai-chip i {
    color: var(--accent-cyan);
    font-size: 16px;
}

.rollin-plan-ai-chip span {
    flex: 1;
}

.rollin-mini-btn {
    padding: 4px 12px;
    background: var(--accent-cyan);
    color: var(--bg-primary);
    border: none;
    border-radius: var(--radius-full);
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 140ms ease, border-color 140ms ease, background 140ms ease, color 140ms ease;
}

.rollin-mini-btn:hover {
    transform: scale(1.05);
    box-shadow: var(--shadow-glow-cyan);
}

/* =============================================================
   GROUP FEATURES
   ============================================================= */

.rollin-group-features {
    margin-top: 56px;
    padding: 36px 32px;
    background: rgba(13, 10, 31, 0.02);
    border: 1px solid rgba(13, 10, 31, 0.06);
    border-radius: 16px;
}
[data-theme="dark"] .rollin-group-features {
    background: rgba(255, 255, 255, 0.02);
    border-color: rgba(255, 255, 255, 0.06);
}

.rollin-section-title {
    font-size: 18px;
    font-weight: 700;
    text-align: center;
    color: #0d0a1f;
    margin: 0 0 24px;
    letter-spacing: -0.01em;
}
[data-theme="dark"] .rollin-section-title { color: #ffffff; }

.rollin-features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
}

.rollin-feature-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: #ffffff;
    border: 1px solid rgba(13, 10, 31, 0.06);
    border-radius: 10px;
    font-size: 13px;
    color: rgba(13, 10, 31, 0.75);
    transition: border-color 180ms ease;
}
[data-theme="dark"] .rollin-feature-item {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.75);
}

.rollin-feature-item:hover {
    border-color: rgba(138, 43, 214, 0.3);
}

.rollin-feature-item i,
.rollin-feature-item svg { display: none; } /* check é via .rollin-check */

/* =============================================================
   AI CTA BLOCK
   ============================================================= */

.rollin-ai-cta {
    margin-top: var(--space-2xl);
    padding: var(--space-xl);
    background:
        radial-gradient(ellipse at center, rgba(6, 230, 194, 0.1) 0%, transparent 70%),
        var(--bg-glass);
    border: 1px solid rgba(6, 230, 194, 0.2);
    border-radius: var(--radius-xl);
    /* backdrop-filter removido — perf killer */
    position: relative;
    overflow: hidden;
}

.rollin-ai-cta::before {
    content: '';
    position: absolute;
    top: -100px;
    right: -100px;
    width: 300px;
    height: 300px;
    background: var(--gradient-cyan);
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.15;
    pointer-events: none;
}

.rollin-ai-cta-inner {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: var(--space-lg);
    align-items: center;
    position: relative;
    z-index: 1;
}

.rollin-ai-cta-icon {
    width: 72px;
    height: 72px;
    border-radius: var(--radius-lg);
    background: var(--gradient-cyan);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    color: var(--bg-primary);
    box-shadow: var(--shadow-glow-cyan);
    flex-shrink: 0;
}

.rollin-ai-cta-content h3 {
    font-size: var(--fs-xl);
    font-weight: 700;
    margin: 8px 0;
    color: var(--text-primary);
}

.rollin-ai-cta-content p {
    color: var(--text-secondary);
    margin: 0;
    font-size: var(--fs-sm);
    line-height: 1.6;
}

/* =============================================================
   VIEW CART (carrinho)
   ============================================================= */

#order-rollin-2026 .view-cart-items {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

#order-rollin-2026 .view-cart-items .item {
    padding: var(--space-lg) !important;
    background: var(--bg-glass) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: var(--radius-lg) !important;
    /* backdrop-filter removido — perf killer */
    display: flex;
    gap: var(--space-lg);
    align-items: flex-start;
    transition: transform 200ms ease, border-color 200ms ease, background 200ms ease, box-shadow 200ms ease;
}

#order-rollin-2026 .view-cart-items .item:hover {
    border-color: var(--border-default) !important;
    transform: translateX(4px);
}

.rollin-cart-summary {
    position: sticky;
    top: 100px;
    padding: var(--space-xl);
    background: var(--bg-glass);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-xl);
    /* backdrop-filter removido — perf killer */
}

.rollin-cart-summary h3 {
    font-size: var(--fs-lg);
    font-weight: 700;
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--border-subtle);
}

.rollin-cart-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-sm) 0;
    color: var(--text-secondary);
    font-size: var(--fs-sm);
}

.rollin-cart-total {
    margin-top: var(--space-md);
    padding-top: var(--space-md);
    border-top: 1px solid var(--border-subtle);
    font-size: var(--fs-xl) !important;
    font-weight: 800;
    color: var(--text-primary) !important;
}

.rollin-cart-total-value {
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* =============================================================
   RESPONSIVE
   ============================================================= */

@media (max-width: 991px) {
    .rollin-plan-card.featured {
        transform: scale(1);
    }
    .rollin-plan-card.featured:hover {
        transform: translateY(-8px);
    }
    .rollin-ai-cta-inner {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .rollin-ai-cta-icon {
        margin: 0 auto;
    }
}

@media (max-width: 768px) {
    .rollin-cart-hero {
        padding: var(--space-lg) 0;
    }
    .rollin-plans-grid {
        grid-template-columns: 1fr;
        max-width: 420px;
        margin: var(--space-lg) auto;
    }
    .rollin-trust-row {
        flex-direction: column;
        border-radius: var(--radius-lg);
    }
    .rollin-cycle-toggle {
        flex-direction: column;
    }
}

@media (max-width: 480px) {
    .rollin-plan-card {
        padding: var(--space-lg) var(--space-md);
    }
    .rollin-plan-price {
        font-size: var(--fs-3xl);
    }
}

/* =============================================================
   CONFIGURE PRODUCT — layout com sidebar sticky
   ============================================================= */

.rollin-configure-form { margin-top: var(--space-lg); }

.rollin-configure-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: var(--space-xl);
    align-items: flex-start;
}

@media (max-width: 991px) {
    .rollin-configure-layout { grid-template-columns: 1fr; }
}

.rollin-configure-main {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.rollin-configure-head {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-lg);
    /* Gradiente roxo (sem rosa) — alinhado com a brand. */
    background: linear-gradient(135deg, rgba(106, 26, 176, 0.06), rgba(184, 85, 255, 0.04)), var(--bg-glass);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
}

.rollin-configure-icon {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-md);
    background: var(--gradient-primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    box-shadow: var(--shadow-glow-pink);
    flex-shrink: 0;
}

.rollin-configure-name {
    font-size: var(--fs-xl);
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    letter-spacing: -0.01em;
}

.rollin-configure-desc {
    color: var(--text-muted);
    font-size: var(--fs-sm);
    margin-top: 4px;
    line-height: 1.5;
}
.rollin-configure-meta { flex: 1 1 auto; min-width: 0; }

/* Grid de features (chips com ícone) — JS transforma a descrição plain
   em chips coloridos com ícone Lucide contextual. */
.rh-cp-features {
    display: grid;
    /* min(170px, 100%) faz a coluna encolher pra 100% do container quando
       o viewport é mais estreito que 170px — evita scroll-x horizontal que
       acontecia com minmax(170px, 1fr) puro em phones ≤375px. */
    grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr));
    gap: 8px;
    margin-top: 12px;
}
.rh-cp-feature {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 10px;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.3;
    text-transform: none;
    letter-spacing: 0;
    /* Permite o chip encolher abaixo do min-content. Sem isso, texto longo
       ("Suporte 24/7 com SLA") estoura a célula do grid e cria scroll-x. */
    min-width: 0;
}
/* Span interno: permite que palavras longas (e-mails, domínios, GB)
   quebrem em vez de inflar a largura do chip. */
.rh-cp-feature > span {
    min-width: 0;
    flex: 1 1 auto;
    overflow-wrap: anywhere;
}
.rh-cp-feature i,
.rh-cp-feature svg {
    width: 14px; height: 14px;
    flex-shrink: 0;
}
html[data-theme="light"] .rh-cp-feature {
    background: rgba(106, 26, 176, 0.04);
    border: 1px solid rgba(106, 26, 176, 0.10);
    color: rgba(13, 10, 31, 0.75);
}
html[data-theme="light"] .rh-cp-feature i,
html[data-theme="light"] .rh-cp-feature svg { color: #6a1ab0; }
html[data-theme="dark"] .rh-cp-feature {
    background: rgba(184, 85, 255, 0.06);
    border: 1px solid rgba(184, 85, 255, 0.14);
    color: rgba(255, 255, 255, 0.78);
}
html[data-theme="dark"] .rh-cp-feature i,
html[data-theme="dark"] .rh-cp-feature svg { color: #b855ff; }

/* Phone: stack vertical em coluna única — mais legível que 2 colunas
   apertadas, e elimina qualquer chance de overflow lateral. */
@media (max-width: 768px) {
    .rh-cp-features { grid-template-columns: 1fr; }
    .rh-cp-feature { padding: 10px 12px; }
}

.rollin-config-section {
    padding: var(--space-lg);
    background: var(--bg-glass);
    /* backdrop-filter removido — perf killer */
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
}

.rollin-config-section-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-sm);
    border-bottom: 1px dashed var(--border-subtle);
}

.rollin-config-section-head i {
    color: var(--accent-cyan);
    font-size: 20px;
}

.rollin-config-section-head h3 {
    font-size: var(--fs-base);
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.rollin-config-section-desc {
    color: var(--text-muted);
    font-size: var(--fs-sm);
    margin: 0 0 var(--space-md);
    line-height: 1.6;
}

/* Radio stack dentro do configure */
.rollin-radio-stack {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.rollin-radio-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: transform 140ms ease, border-color 140ms ease, background 140ms ease, color 140ms ease;
    color: var(--text-secondary);
    font-size: var(--fs-sm);
}

.rollin-radio-option:hover { background: rgba(255,255,255,0.06); }

.rollin-radio-option:has(input:checked),
.rollin-radio-option.active {
    background: rgba(250,44,104,0.08);
    border-color: var(--accent-pink);
    color: var(--text-primary);
}

.rollin-radio-option input[type="radio"] {
    accent-color: var(--accent-pink);
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* Quantity input com suffix */
.rollin-qty-wrap {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.form-control-qty {
    max-width: 120px;
}

.rollin-qty-suffix {
    color: var(--text-muted);
    font-size: var(--fs-sm);
}

/* Metrics */
.rollin-metrics-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rollin-metric-item {
    padding: 12px 14px;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

.rollin-metric-name {
    color: var(--text-primary);
    font-weight: 600;
    font-size: var(--fs-sm);
}

.rollin-metric-price {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    flex-wrap: wrap;
}

.rollin-metric-price strong {
    color: var(--accent-cyan);
    font-variant-numeric: tabular-nums;
}

.rollin-metric-included {
    color: var(--text-dim);
    font-size: var(--fs-xs);
}

/* Addons dentro do configure (horizontal rows) */
.rollin-addons-grid {
    display: grid;
    gap: var(--space-sm);
}

.panel-addon.rollin-addon-row {
    border-radius: var(--radius-md) !important;
    border: 1.5px solid var(--border-subtle) !important;
    background: rgba(255,255,255,0.03) !important;
    overflow: hidden;
    transition: transform 140ms ease, border-color 140ms ease, background 140ms ease, color 140ms ease;
    padding: 0 !important;
    position: relative;
}

.panel-addon.rollin-addon-row:hover {
    border-color: var(--border-default) !important;
    background: rgba(255,255,255,0.05) !important;
}

.panel-addon.rollin-addon-row.panel-addon-selected,
.panel-addon.rollin-addon-row.active {
    border-color: var(--accent-pink) !important;
    background: linear-gradient(135deg, rgba(250,44,104,0.08), rgba(80,2,174,0.05)) !important;
}

.rollin-addon-row-body {
    display: flex !important;
    align-items: flex-start;
    gap: var(--space-sm);
    padding: var(--space-md) !important;
    margin: 0 !important;
    cursor: pointer;
    background: transparent !important;
}

.rollin-addon-row-body input[type="checkbox"] {
    accent-color: var(--accent-pink);
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    margin-top: 2px;
}

.rollin-addon-row-info { flex: 1; min-width: 0; }
.rollin-addon-row-info strong { display: block; color: var(--text-primary); font-size: var(--fs-sm); margin-bottom: 2px; }
.rollin-addon-row-info p { color: var(--text-muted); font-size: var(--fs-xs); margin: 0; line-height: 1.5; }

.rollin-addon-row-price {
    color: var(--accent-cyan) !important;
    font-size: var(--fs-sm) !important;
    font-weight: 700 !important;
    background: transparent !important;
    padding: 0 !important;
    white-space: nowrap;
}

.rollin-addon-row-cta {
    display: none !important;
}

.rollin-addons-promo {
    margin-bottom: var(--space-sm);
}

/* Help block "Tem dúvidas?" — usa roxo brand, NÃO ciano nem rosa.
   Override agressivo do .alert-info do Bootstrap (bg cyan) pra cor brand. */
.rollin-contact-hint,
.rollin-contact-hint.alert,
.rollin-contact-hint.alert-info {
    display: flex !important;
    align-items: center;
    gap: 10px;
    background: rgba(106, 26, 176, 0.04) !important;
    border: 1px solid rgba(106, 26, 176, 0.15) !important;
    color: rgba(13, 10, 31, 0.75) !important;
    padding: 12px 16px !important;
    border-radius: 12px !important;
}
html[data-theme="dark"] .rollin-contact-hint,
html[data-theme="dark"] .rollin-contact-hint.alert,
html[data-theme="dark"] .rollin-contact-hint.alert-info {
    background: rgba(184, 85, 255, 0.06) !important;
    border-color: rgba(184, 85, 255, 0.18) !important;
    color: rgba(255, 255, 255, 0.75) !important;
}
.rollin-contact-hint > i {
    flex-shrink: 0;
    color: #6a1ab0;
}
html[data-theme="dark"] .rollin-contact-hint > i { color: #b855ff; }
/* Override .alert-link do Bootstrap (que ficava azul ciano) */
.rollin-contact-hint .alert-link,
.rollin-contact-hint a.alert-link {
    color: #6a1ab0 !important;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
}
html[data-theme="dark"] .rollin-contact-hint .alert-link,
html[data-theme="dark"] .rollin-contact-hint a.alert-link {
    color: #b855ff !important;
}
.rollin-inline-link {
    background: transparent;
    border: none;
    color: #6a1ab0;
    text-decoration: underline;
    text-underline-offset: 2px;
    font-weight: 700;
    cursor: pointer;
    padding: 0;
    font-family: inherit;
    font-size: inherit;
}
html[data-theme="dark"] .rollin-inline-link { color: #b855ff; }
.rollin-inline-link:hover { color: #5710a0; }
html[data-theme="dark"] .rollin-inline-link:hover { color: #d4a8ff; }

/* ===== SUMMARY (sidebar sticky) ===== */

.rollin-configure-sidebar {
    position: sticky;
    top: 90px;
    align-self: flex-start;
    max-width: 100%;
}

@media (max-width: 991px) {
    .rollin-configure-sidebar { position: static; top: auto; }
}

.rollin-summary {
    position: relative;
    background: var(--bg-glass);
    /* backdrop-filter removido — perf killer */
    border: 1.5px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    box-shadow: var(--shadow-card);
}

.rollin-summary-loader {
    position: absolute;
    top: var(--space-md);
    right: var(--space-md);
    color: var(--accent-cyan);
    font-size: 18px;
    display: none;
}

.rollin-summary-loader.active,
.rollin-summary-loader[style*="display: block"] { display: block; }

.rollin-summary-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: var(--space-sm);
    margin-bottom: var(--space-md);
    border-bottom: 1px solid var(--border-subtle);
}

/* Squircle Apple-style — radius 30%, gradiente sutil, ícone monoline SF Symbols */
.rh-summary-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 9px; /* squircle proporcional */
    background: linear-gradient(135deg, #6a1ab0, #8a2bd6);
    color: #ffffff;
    flex-shrink: 0;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.20) inset,
        0 4px 10px rgba(106, 26, 176, 0.28),
        0 0 0 1px rgba(255, 255, 255, 0.10) inset;
    /* Apple usa gradient + inner highlight pra simular profundidade material */
}
html[data-theme="dark"] .rh-summary-icon {
    background: linear-gradient(135deg, #8a2bd6, #b855ff);
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.18) inset,
        0 4px 12px rgba(138, 43, 214, 0.40);
}
.rh-summary-icon svg {
    width: 17px;
    height: 17px;
    stroke: currentColor;
    fill: none;
    /* Stroke mais fino pra ficar mais SF Symbols */
}

/* Override: regra antiga .rollin-summary-head i com cor pink — agora não usa mais.
   Mantenho fallback pra outros lugares se houver. */
.rollin-summary-head i {
    color: #6a1ab0;
}
html[data-theme="dark"] .rollin-summary-head i { color: #b855ff; }
.rollin-summary-head h2 {
    font-size: 16px;
    margin: 0;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text-primary);
    text-transform: none;
}

.rollin-summary-body {
    min-height: 160px;
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--border-subtle);
    margin-bottom: var(--space-md);
}

.rollin-summary-cta {
    width: 100%;
    justify-content: center;
    padding: 14px 24px !important;
    font-size: var(--fs-base) !important;
    font-weight: 700 !important;
}

.rollin-summary-trust {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: var(--space-md);
    padding-top: var(--space-md);
    border-top: 1px dashed var(--border-subtle);
}

.rollin-summary-trust span {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: var(--text-muted);
}

.rollin-summary-trust i {
    color: var(--accent-cyan);
    font-size: 14px;
}

/* =============================================================
   ALERTS Rollin — substitui .alert.alert-danger/warning/info/success
   do Bootstrap. Auto-dismiss + close button + slide animations.
   ============================================================= */
.rh-alert {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    margin-bottom: 16px;
    border-radius: 12px;
    border: 1px solid transparent;
    overflow: hidden;
    /* opacity/transform setados via JS pra slide-down on appear */
}
.rh-alert-icon {
    flex-shrink: 0;
    width: 18px; height: 18px;
    margin-top: 2px;
}
.rh-alert-msg {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 13.5px;
    line-height: 1.5;
}
.rh-alert-body {
    flex: 1 1 auto;
    min-width: 0;
}
.rh-alert-body strong {
    display: block;
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 4px;
    text-transform: none;
    letter-spacing: 0;
}
.rh-alert-body ul {
    margin: 4px 0 0;
    padding-left: 18px;
    font-size: 13px;
    line-height: 1.5;
}
.rh-alert-body ul:empty { display: none; }
.rh-alert-close {
    width: 24px; height: 24px;
    border-radius: 6px;
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    opacity: 0.55;
    transition: opacity 160ms ease, background 160ms ease;
    padding: 0;
    color: inherit;
    font-family: inherit;
}
.rh-alert-close:hover { opacity: 1; background: rgba(0, 0, 0, 0.06); }
html[data-theme="dark"] .rh-alert-close:hover { background: rgba(255, 255, 255, 0.10); }
.rh-alert-close i { width: 14px; height: 14px; }

/* Variantes de cor — todas suaves, paleta brand-friendly. NÃO usa pink/red. */
.rh-alert-warn {
    background: rgba(254, 243, 199, 0.50);   /* amber-100 */
    border-color: rgba(217, 119, 6, 0.30);
    color: #92400e;
}
.rh-alert-warn .rh-alert-icon { color: #b45309; }
html[data-theme="dark"] .rh-alert-warn {
    background: rgba(217, 119, 6, 0.10);
    border-color: rgba(245, 158, 11, 0.30);
    color: #fde68a;
}
html[data-theme="dark"] .rh-alert-warn .rh-alert-icon { color: #fbbf24; }

.rh-alert-info {
    background: rgba(106, 26, 176, 0.04);    /* roxo brand suave */
    border-color: rgba(106, 26, 176, 0.20);
    color: #4a1480;
}
.rh-alert-info .rh-alert-icon { color: #6a1ab0; }
html[data-theme="dark"] .rh-alert-info {
    background: rgba(184, 85, 255, 0.06);
    border-color: rgba(184, 85, 255, 0.22);
    color: #e9d5ff;
}
html[data-theme="dark"] .rh-alert-info .rh-alert-icon { color: #b855ff; }

.rh-alert-success {
    background: rgba(0, 168, 150, 0.06);     /* teal/cyan suave */
    border-color: rgba(0, 168, 150, 0.25);
    color: #064e3b;
}
.rh-alert-success .rh-alert-icon { color: #006d5b; }
html[data-theme="dark"] .rh-alert-success {
    background: rgba(1, 250, 213, 0.06);
    border-color: rgba(1, 250, 213, 0.22);
    color: #a7f3d0;
}
html[data-theme="dark"] .rh-alert-success .rh-alert-icon { color: #01fad5; }

/* =============================================================
   MODAL Rollin — substitui Bootstrap default. Mobile-first (slide-up).
   Usado pra "Remover item" e "Esvaziar carrinho" em viewcart.tpl.
   ============================================================= */

/* Wrapper Bootstrap — modal forçado pro topo do stacking context, opaque,
   sem nenhum filtro herdado de section/parent. */
.rh-modal.modal {
    padding: 0 !important;
    z-index: 99999 !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}
/* Quando Bootstrap aplica .in/.show, força opacity:1 (sem fade incompleto) */
.rh-modal.modal.in,
.rh-modal.modal.show,
.rh-modal.modal.fade.in,
.rh-modal.modal.fade.show {
    opacity: 1 !important;
}
.rh-modal .modal-backdrop,
.modal-backdrop.in,
.modal-backdrop.show {
    background-color: rgba(13, 10, 31, 0.65) !important;
    opacity: 1 !important;
    z-index: 99998 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    filter: none !important;
}
.rh-modal-dialog {
    max-width: 440px;
    margin: 0 auto;
    padding: 24px 16px;
    /* Centraliza vertical+horizontal mesmo se Bootstrap não centralizar */
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    /* Garante que o conteúdo NÃO herde nenhum filter de elemento pai */
    filter: none !important;
    -webkit-filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}
/* Modal content sempre nítido, mesmo se algum pai tentar aplicar filter */
.rh-modal-content,
.rh-modal-header,
.rh-modal-body,
.rh-modal-footer,
.rh-modal-title,
.rh-modal-btn {
    filter: none !important;
    -webkit-filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.rh-modal-content {
    width: 100%;
    border-radius: 16px !important;
    border: none !important;
    overflow: hidden;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.30);
}
html[data-theme="light"] .rh-modal-content {
    background: #ffffff !important;
}
html[data-theme="dark"] .rh-modal-content {
    background: #1f0040 !important;
}

/* Header com ícone + título + close */
.rh-modal-header {
    display: flex !important;
    align-items: center;
    gap: 14px;
    padding: 20px 22px 12px !important;
    border-bottom: none !important;
}
.rh-modal-icon {
    width: 42px; height: 42px;
    border-radius: 11px;
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
}
.rh-modal-icon i { width: 20px; height: 20px; }
/* Variante "warn" (destructive) — amber, não rosa/vermelho */
.rh-modal-icon-warn {
    background: rgba(217, 119, 6, 0.12);
    color: #b45309;
}
html[data-theme="dark"] .rh-modal-icon-warn {
    background: rgba(245, 158, 11, 0.18);
    color: #fbbf24;
}

.rh-modal-title {
    flex: 1 1 auto;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    text-transform: none !important;
    letter-spacing: -0.01em !important;
    border: none !important;
    background: transparent !important;
}
html[data-theme="light"] .rh-modal-title { color: #0d0a1f !important; }
html[data-theme="dark"]  .rh-modal-title { color: #ffffff !important; }

.rh-modal-close {
    width: 32px; height: 32px;
    border-radius: 8px;
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    transition: background 160ms ease, color 160ms ease;
    padding: 0;
    opacity: 1 !important;
    text-shadow: none !important;
}
html[data-theme="light"] .rh-modal-close {
    color: rgba(13, 10, 31, 0.50);
}
html[data-theme="light"] .rh-modal-close:hover {
    background: rgba(13, 10, 31, 0.06);
    color: #0d0a1f;
}
html[data-theme="dark"] .rh-modal-close {
    color: rgba(255, 255, 255, 0.55);
}
html[data-theme="dark"] .rh-modal-close:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}
.rh-modal-close i { width: 18px; height: 18px; }

/* Body — texto da pergunta */
.rh-modal-body {
    padding: 0 22px 8px !important;
    font-size: 14px;
    line-height: 1.55;
    text-transform: none !important;
}
html[data-theme="light"] .rh-modal-body { color: rgba(13, 10, 31, 0.75); }
html[data-theme="dark"]  .rh-modal-body { color: rgba(255, 255, 255, 0.75); }

/* Footer — botões de ação. SEM rosa/vermelho — destrutivo é amber. */
.rh-modal-footer {
    display: flex !important;
    gap: 10px;
    padding: 16px 22px 20px !important;
    border-top: none !important;
    justify-content: flex-end;
}
.rh-modal-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 160ms ease, color 160ms ease, transform 120ms ease;
    text-transform: none !important;
    letter-spacing: 0;
    font-family: inherit;
    min-height: 42px;
}
.rh-modal-btn i { width: 14px; height: 14px; }

/* Cancel — ghost/neutro */
.rh-modal-btn-cancel { }
html[data-theme="light"] .rh-modal-btn-cancel {
    background: transparent;
    border-color: rgba(13, 10, 31, 0.12);
    color: rgba(13, 10, 31, 0.75);
}
html[data-theme="light"] .rh-modal-btn-cancel:hover {
    background: rgba(13, 10, 31, 0.04);
    border-color: rgba(13, 10, 31, 0.20);
}
html[data-theme="dark"] .rh-modal-btn-cancel {
    background: transparent;
    border-color: rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.80);
}
html[data-theme="dark"] .rh-modal-btn-cancel:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.22);
}

/* Destructive — amber/laranja queimado, NÃO rosa nem vermelho */
.rh-modal-btn-destructive {
    background: #b45309;
    color: #ffffff;
    border-color: #b45309;
    box-shadow: 0 4px 12px rgba(180, 83, 9, 0.25);
}
.rh-modal-btn-destructive:hover {
    background: #92400e;
    border-color: #92400e;
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(180, 83, 9, 0.30);
}
html[data-theme="dark"] .rh-modal-btn-destructive {
    background: #d97706;
    border-color: #d97706;
    color: #ffffff;
}
html[data-theme="dark"] .rh-modal-btn-destructive:hover {
    background: #f59e0b;
    border-color: #f59e0b;
}

/* Mobile: modal vira bottom sheet (slide up from bottom) */
@media (max-width: 640px) {
    .rh-modal-dialog {
        align-items: flex-end;
        padding: 0;
        max-width: 100%;
        margin: 0;
        min-height: 100vh;
    }
    .rh-modal-content {
        border-radius: 20px 20px 0 0 !important;
        animation: rh-modal-slide-up 280ms cubic-bezier(0.32, 0.72, 0, 1);
    }
    @keyframes rh-modal-slide-up {
        from { transform: translateY(100%); }
        to   { transform: translateY(0); }
    }
    .rh-modal-footer {
        flex-direction: column-reverse;
    }
    .rh-modal-btn { width: 100%; padding: 14px 18px; min-height: 50px; font-size: 15px; }
    /* Drag handle decorativo no topo (estilo iOS sheet) */
    .rh-modal-content::before {
        content: '';
        display: block;
        width: 36px; height: 4px;
        margin: 8px auto 0;
        border-radius: 999px;
        background: rgba(13, 10, 31, 0.20);
    }
    html[data-theme="dark"] .rh-modal-content::before { background: rgba(255, 255, 255, 0.20); }
}

/* =============================================================
   ConfigureProduct — alert âmbar (não rosa) + radio cards de ciclo
   ============================================================= */

/* Alert de erro com paleta amarela/dourada (não peach, não rosa).
   Usa yellow 50-200 do Tailwind como referência. */
.rh-cp-alert {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 18px;
    margin-bottom: 16px;
    border-radius: 12px;
    background: rgba(254, 243, 199, 0.50);   /* amber-100 com transparência */
    border: 1px solid rgba(217, 119, 6, 0.30); /* amber-600 */
    color: rgba(13, 10, 31, 0.85);
}
html[data-theme="dark"] .rh-cp-alert {
    background: rgba(217, 119, 6, 0.10);
    border-color: rgba(245, 158, 11, 0.35);
    color: rgba(255, 255, 255, 0.85);
}
.rh-cp-alert > i {
    width: 20px; height: 20px;
    flex-shrink: 0;
    color: #b45309; /* amber-700 */
    margin-top: 2px;
}
html[data-theme="dark"] .rh-cp-alert > i { color: #fbbf24; }
.rh-cp-alert-body { flex: 1 1 auto; min-width: 0; }
.rh-cp-alert-body strong {
    display: block;
    font-size: 14px; font-weight: 700;
    margin-bottom: 4px;
    text-transform: none;
}
.rh-cp-alert-body ul {
    margin: 4px 0 0;
    padding-left: 18px;
    font-size: 13px;
}
.rh-cp-alert-body ul:empty { display: none; }

/* CRÍTICO: .w-hidden precisa esconder o alerta quando ainda não há erros.
   Sem isso, o alerta fica visível com lista vazia (UX confuso — "corrija
   os erros" sem erros listados). */
.rh-cp-alert.w-hidden {
    display: none !important;
}

/* Radio cards de ciclo de pagamento — substitui o <select> que cortava texto */
.rh-cp-cycles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
    margin-top: 8px;
}
.rh-cp-cycle {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px 18px;
    border-radius: 12px;
    border: 1.5px solid;
    cursor: pointer;
    transition: background 160ms ease, border-color 160ms ease, transform 140ms ease;
    margin: 0;
}
html[data-theme="light"] .rh-cp-cycle {
    background: #ffffff;
    border-color: rgba(13, 10, 31, 0.10);
}
html[data-theme="dark"] .rh-cp-cycle {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.10);
}
html[data-theme="light"] .rh-cp-cycle:hover {
    background: rgba(106, 26, 176, 0.03);
    border-color: rgba(106, 26, 176, 0.30);
    transform: translateY(-1px);
}
html[data-theme="dark"] .rh-cp-cycle:hover {
    background: rgba(184, 85, 255, 0.05);
    border-color: rgba(184, 85, 255, 0.30);
    transform: translateY(-1px);
}
.rh-cp-cycle.is-selected,
.rh-cp-cycle:has(input[type="radio"]:checked) {
    background: linear-gradient(135deg, rgba(106, 26, 176, 0.06), rgba(184, 85, 255, 0.04)) !important;
    border-color: #6a1ab0 !important;
    box-shadow: 0 4px 12px rgba(106, 26, 176, 0.10);
}
html[data-theme="dark"] .rh-cp-cycle.is-selected,
html[data-theme="dark"] .rh-cp-cycle:has(input[type="radio"]:checked) {
    background: linear-gradient(135deg, rgba(138, 43, 214, 0.10), rgba(184, 85, 255, 0.06)) !important;
    border-color: #b855ff !important;
    box-shadow: 0 4px 12px rgba(138, 43, 214, 0.20);
}

/* Esconde o radio mas mantém clicável e acessível */
.rh-cp-cycle input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0; height: 0;
}

.rh-cp-cycle-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.rh-cp-cycle-period {
    font-size: 14px; font-weight: 700;
    text-transform: none;
    letter-spacing: -0.01em;
}
html[data-theme="light"] .rh-cp-cycle-period { color: #0d0a1f; }
html[data-theme="dark"]  .rh-cp-cycle-period { color: #ffffff; }

/* Preço do ciclo — softer typography, sem CAPS, sem extrabold.
   text-transform:none anula qualquer regra global agressiva (incluindo
   eventual text-transform herdado do <strong>/<small> via Bootstrap/rhost). */
.rh-cp-cycle-price,
.rh-cp-cycle-price *,
.rh-cp-cycle-price strong,
.rh-cp-cycle-price small,
.rh-cp-cycle-price span {
    text-transform: none !important;
    letter-spacing: 0 !important;
}
.rh-cp-cycle-price {
    font-size: 15px;
    font-weight: 600;
    color: #6a1ab0;
    word-break: break-word;
    line-height: 1.45;
}
.rh-cp-cycle-price strong {
    font-weight: 700;
    font-size: 17px;
    letter-spacing: -0.01em !important;
}
.rh-cp-cycle-price small {
    font-size: 12.5px;
    font-weight: 400;
    opacity: 0.72;
    display: inline-block;
    margin-top: 2px;
}
html[data-theme="dark"] .rh-cp-cycle-price { color: #b855ff; }

.rh-cp-cycle-meta {
    font-size: 11px;
    text-transform: none;
}
html[data-theme="light"] .rh-cp-cycle-meta { color: rgba(13, 10, 31, 0.55); }
html[data-theme="dark"]  .rh-cp-cycle-meta { color: rgba(255, 255, 255, 0.55); }

/* Tag "Recomendado" no ciclo anual */
.rh-cp-cycle-tag {
    position: absolute;
    top: -8px; right: 12px;
    padding: 3px 10px;
    border-radius: 999px;
    background: linear-gradient(135deg, #00a896, #028090);
    color: #ffffff;
    font-size: 9.5px; font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    box-shadow: 0 4px 10px rgba(0, 168, 150, 0.30);
}
html[data-theme="dark"] .rh-cp-cycle-tag {
    background: linear-gradient(135deg, #01fad5, #00a896);
    color: #0d0a1f;
}

@media (max-width: 640px) {
    .rh-cp-cycles { grid-template-columns: 1fr 1fr; }
}

/* =============================================================
   Resumo do Pedido — UPSELL anual + CUPOM inline (estilo Hostinger)
   ============================================================= */

/* Banner upsell — incentiva trocar mensal por anual com economia */
.rollin-summary-upsell {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 12px 14px;
    margin: 0 0 16px;
    border-radius: 12px;
    border: 1px solid;
    background: linear-gradient(135deg, rgba(0, 168, 150, 0.08), rgba(106, 26, 176, 0.06));
}
html[data-theme="light"] .rollin-summary-upsell {
    border-color: rgba(0, 168, 150, 0.22);
}
html[data-theme="dark"] .rollin-summary-upsell {
    background: linear-gradient(135deg, rgba(1, 250, 213, 0.08), rgba(184, 85, 255, 0.06));
    border-color: rgba(1, 250, 213, 0.22);
}
.rollin-summary-upsell-icon {
    width: 32px; height: 32px;
    border-radius: 8px;
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0, 168, 150, 0.15);
    color: #006d5b;
}
html[data-theme="dark"] .rollin-summary-upsell-icon {
    background: rgba(1, 250, 213, 0.18);
    color: #01fad5;
}
.rollin-summary-upsell-icon i { width: 16px; height: 16px; }
.rollin-summary-upsell-body { flex: 1 1 auto; min-width: 0; }
.rollin-summary-upsell-body strong {
    display: block;
    font-size: 13px; font-weight: 700;
    margin-bottom: 2px;
    text-transform: none;
    letter-spacing: 0;
}
html[data-theme="light"] .rollin-summary-upsell-body strong { color: #0d0a1f; }
html[data-theme="dark"]  .rollin-summary-upsell-body strong { color: #ffffff; }
.rollin-summary-upsell-body p {
    font-size: 12px; line-height: 1.4;
    margin: 0;
    text-transform: none;
}
html[data-theme="light"] .rollin-summary-upsell-body p { color: rgba(13, 10, 31, 0.65); }
html[data-theme="dark"]  .rollin-summary-upsell-body p { color: rgba(255, 255, 255, 0.65); }
.rollin-summary-upsell-body a {
    color: #6a1ab0;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}
html[data-theme="dark"] .rollin-summary-upsell-body a { color: #b855ff; }

/* Cupom inline — toggle expandable abaixo do total */
.rollin-summary-promo {
    margin: 14px 0;
    padding-top: 14px;
    border-top: 1px dashed;
}
html[data-theme="light"] .rollin-summary-promo { border-top-color: rgba(13, 10, 31, 0.10); }
html[data-theme="dark"]  .rollin-summary-promo { border-top-color: rgba(255, 255, 255, 0.10); }

.rollin-summary-promo-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 4px 0;
    font-size: 13px; font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    font-family: inherit;
    text-align: left;
}
html[data-theme="light"] .rollin-summary-promo-toggle { color: #6a1ab0; }
html[data-theme="dark"]  .rollin-summary-promo-toggle { color: #b855ff; }
.rollin-summary-promo-toggle i { width: 14px; height: 14px; }
.rollin-summary-promo-toggle span { flex: 1; }
.rollin-summary-promo-toggle .rh-chev {
    transition: transform 200ms ease;
    margin-left: auto;
    opacity: 0.7;
}
.rollin-summary-promo-toggle.is-open .rh-chev { transform: rotate(180deg); }
.rollin-summary-promo-toggle:hover {
    opacity: 0.85;
}

.rollin-summary-promo-form {
    display: flex;
    gap: 6px;
    margin-top: 10px;
    align-items: stretch;
}
.rollin-summary-promo-form[hidden] { display: none; }

.rollin-summary-promo-input {
    flex: 1 1 auto;
    height: 38px;
    padding: 0 12px;
    border-radius: 8px;
    border: 1px solid;
    font-size: 13px;
    font-family: inherit;
    background: transparent;
    min-width: 0;
}
html[data-theme="light"] .rollin-summary-promo-input {
    border-color: rgba(13, 10, 31, 0.12);
    color: #0d0a1f;
    background: #ffffff;
}
html[data-theme="dark"] .rollin-summary-promo-input {
    border-color: rgba(255, 255, 255, 0.12);
    color: #ffffff;
    background: rgba(255, 255, 255, 0.04);
}
.rollin-summary-promo-input:focus {
    outline: none;
    border-color: #6a1ab0;
    box-shadow: 0 0 0 3px rgba(106, 26, 176, 0.10);
}
html[data-theme="dark"] .rollin-summary-promo-input:focus {
    border-color: #b855ff;
    box-shadow: 0 0 0 3px rgba(184, 85, 255, 0.15);
}

.rollin-summary-promo-apply {
    height: 38px;
    padding: 0 16px;
    border-radius: 8px;
    background: #6a1ab0;
    color: #ffffff;
    border: none;
    font-size: 13px; font-weight: 700;
    cursor: pointer;
    transition: background 160ms ease;
    font-family: inherit;
    text-transform: none;
    letter-spacing: 0;
    flex-shrink: 0;
}
html[data-theme="dark"] .rollin-summary-promo-apply { background: #8a2bd6; }
.rollin-summary-promo-apply:hover { background: #5710a0; }
html[data-theme="dark"] .rollin-summary-promo-apply:hover { background: #b855ff; }

/* Cupom aplicado — badge verde com info + botão remover */
.rollin-summary-promo-applied {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(0, 168, 150, 0.08);
    border: 1px solid rgba(0, 168, 150, 0.22);
}
html[data-theme="dark"] .rollin-summary-promo-applied {
    background: rgba(1, 250, 213, 0.08);
    border-color: rgba(1, 250, 213, 0.22);
}
.rollin-summary-promo-applied > i {
    width: 18px; height: 18px;
    color: #006d5b;
    flex-shrink: 0;
}
html[data-theme="dark"] .rollin-summary-promo-applied > i { color: #01fad5; }
.rollin-summary-promo-applied > div { flex: 1 1 auto; min-width: 0; }
.rollin-summary-promo-applied strong {
    display: block;
    font-size: 13px; font-weight: 700;
    text-transform: none;
}
html[data-theme="light"] .rollin-summary-promo-applied strong { color: #0d0a1f; }
html[data-theme="dark"]  .rollin-summary-promo-applied strong { color: #ffffff; }
.rollin-summary-promo-applied span {
    display: block;
    font-size: 11px;
    margin-top: 1px;
    text-transform: none;
}
html[data-theme="light"] .rollin-summary-promo-applied span { color: rgba(13, 10, 31, 0.60); }
html[data-theme="dark"]  .rollin-summary-promo-applied span { color: rgba(255, 255, 255, 0.60); }
.rollin-summary-promo-remove {
    width: 24px; height: 24px;
    border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    color: rgba(13, 10, 31, 0.50);
    transition: background 160ms ease, color 160ms ease;
    flex-shrink: 0;
}
.rollin-summary-promo-remove:hover {
    background: rgba(220, 38, 38, 0.10);
    color: #c2410c;
    text-decoration: none;
}
.rollin-summary-promo-remove i { width: 14px; height: 14px; }

/* =============================================================
   VIEWCART — cart items + promo + express
   ============================================================= */

.rollin-cart-items {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.rollin-cart-item {
    background: var(--bg-glass);
    /* backdrop-filter removido — perf killer */
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    transition: border-color var(--transition-fast);
    position: relative;
}

.rollin-cart-item:hover { border-color: var(--border-default); }

.rollin-cart-item-head {
    display: grid;
    /* minmax(0, 1fr) é CRÍTICO: o `1fr` puro tem min-width: auto implícito,
       que impede a coluna encolher abaixo do min-content (tamanho da palavra
       mais longa). Em cards estreitos isso fazia o título "Registro de
       Domínio" quebrar caractere por caractere quando combinado com o
       conteúdo das colunas `auto`. minmax(0, ...) deixa encolher. */
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: var(--space-md);
    align-items: flex-start;
}

.rollin-cart-item-title-group {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    min-width: 0;
}

.rollin-cart-item-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, rgba(250,44,104,0.15), rgba(80,2,174,0.1));
    border: 1px solid var(--border-subtle);
    color: var(--accent-pink);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.rollin-cart-item-icon.rollin-icon-badge-cyan {
    background: color-mix(in srgb, var(--accent-cyan) 15%, transparent);
    color: var(--accent-cyan);
    border-color: color-mix(in srgb, var(--accent-cyan) 30%, transparent);
}

.rollin-cart-item-icon.rollin-icon-badge-purple {
    background: color-mix(in srgb, var(--accent-purple) 15%, transparent);
    color: #a577ff;
    border-color: color-mix(in srgb, var(--accent-purple) 30%, transparent);
}

.rollin-cart-item-info { flex: 1; min-width: 0; }

.rollin-cart-item-title {
    font-size: var(--fs-base);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 2px;
    line-height: 1.3;
    word-break: break-word;
}

.rollin-cart-item-group {
    font-size: var(--fs-xs);
    color: var(--text-muted);
    line-height: 1.4;
}

.rollin-cart-item-price {
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    white-space: nowrap;
}

.rollin-cart-item-price strong {
    font-size: var(--fs-lg);
    font-weight: 700;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

.rollin-cart-item-price .cycle {
    font-size: var(--fs-xs);
    color: var(--text-muted);
}

.rollin-cart-item-price small {
    font-size: 11px;
    color: var(--text-dim);
}

.rollin-cart-item-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.rollin-cart-item-btn {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--border-subtle);
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 140ms ease, border-color 140ms ease, background 140ms ease, color 140ms ease;
    text-decoration: none;
}

.rollin-cart-item-btn:hover {
    background: rgba(255,255,255,0.08);
    color: var(--text-primary);
    border-color: var(--border-default);
}

.rollin-cart-item-btn-danger:hover {
    background: rgba(250,44,104,0.1);
    color: var(--accent-pink);
    border-color: var(--accent-pink);
}

.rollin-cart-item-btn i { width: 16px; height: 16px; }

.rollin-cart-item-details {
    margin-top: var(--space-sm);
    padding-top: var(--space-sm);
    border-top: 1px dashed var(--border-subtle);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rollin-cart-item-detail {
    display: flex;
    gap: 10px;
    align-items: baseline;
    font-size: var(--fs-xs);
    flex-wrap: wrap;
}

.rollin-cart-detail-label {
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
}

.rollin-cart-detail-value {
    color: var(--text-primary);
}

.rollin-cart-configs {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.rollin-cart-configs li {
    font-size: var(--fs-xs);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    gap: 6px;
}

.rollin-cart-configs li strong {
    color: var(--text-secondary);
    font-weight: 600;
}

.rollin-cart-configs li i {
    width: 12px;
    height: 12px;
    color: var(--text-dim);
}

.rollin-cart-qty-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 10px;
}

.rollin-cart-qty-wrap label {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    margin: 0;
}

.rollin-cart-qty-wrap input[type="number"] {
    max-width: 80px;
    text-align: center;
}

.rollin-cart-subitem {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: var(--space-sm);
    align-items: center;
    padding: 10px 12px;
    margin-top: 10px;
    background: rgba(255,255,255,0.02);
    border-radius: var(--radius-md);
    border: 1px dashed var(--border-subtle);
}

.rollin-cart-subitem-icon {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--accent-cyan) 15%, transparent);
    color: var(--accent-cyan);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.rollin-cart-subitem-info {
    min-width: 0;
}

.rollin-cart-subitem-info .item-title {
    font-size: var(--fs-sm);
    color: var(--text-primary);
    font-weight: 600;
    line-height: 1.3;
}

.rollin-cart-subitem-info .item-group {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.rollin-cart-subitem-price {
    text-align: right;
    white-space: nowrap;
}

.rollin-cart-subitem-price strong {
    color: var(--text-primary);
    font-size: var(--fs-sm);
    font-variant-numeric: tabular-nums;
}

.rollin-cart-subitem-price .cycle,
.rollin-cart-subitem-price small {
    display: block;
    font-size: 11px;
    color: var(--text-muted);
}

.rollin-cart-period .dropdown-toggle {
    padding: 8px 14px !important;
    font-size: var(--fs-xs);
}

.rollin-cart-credit {
    padding: 10px 12px;
    background: rgba(6,230,194,0.05);
    border: 1px dashed rgba(6,230,194,0.2);
    border-radius: var(--radius-md);
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 6px;
    align-items: center;
}

.rollin-cart-credit-label {
    font-size: 11px;
    color: var(--accent-cyan);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    grid-column: 1 / -1;
}

.rollin-cart-credit .upgrade-calc-msg {
    font-size: var(--fs-xs);
    color: var(--text-muted);
    line-height: 1.5;
}

.rollin-cart-credit-value {
    color: var(--accent-cyan);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    font-size: var(--fs-sm);
}

/* Promo */
.rollin-cart-promo { margin-top: var(--space-lg); }

.rollin-promo-form { width: 100%; }

.rollin-promo-input {
    position: relative;
    display: flex;
    gap: var(--space-sm);
    align-items: stretch;
    background: var(--bg-glass);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-full);
    padding: 4px 4px 4px 16px;
    /* backdrop-filter removido — perf killer */
}

.rollin-promo-input > i {
    color: var(--accent-cyan);
    align-self: center;
    flex-shrink: 0;
}

.rollin-promo-input input[type="text"] {
    flex: 1;
    background: transparent !important;
    border: none !important;
    padding: 8px 0 !important;
    color: var(--text-primary) !important;
    font-family: 'Poppins', sans-serif;
    font-size: var(--fs-sm);
    box-shadow: none !important;
    min-width: 0;
}

.rollin-promo-input input:focus { outline: none; }

.rollin-promo-input button {
    padding: 10px 18px !important;
    border-radius: var(--radius-full) !important;
    white-space: nowrap;
    flex-shrink: 0;
}

.rollin-promo-applied {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-md);
    padding: 14px 18px;
    background: linear-gradient(135deg, rgba(6,230,194,0.08), rgba(80,2,174,0.04));
    border: 1px solid rgba(6,230,194,0.2);
    border-radius: var(--radius-full);
}

.rollin-promo-applied > div {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    flex: 1;
    min-width: 0;
    flex-wrap: wrap;
}

.rollin-promo-applied > div > i { color: var(--accent-cyan); }
.rollin-promo-applied > div strong { color: var(--accent-cyan); font-family: 'SF Mono', monospace; }

.rollin-promo-remove {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255,255,255,0.05);
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform 140ms ease, border-color 140ms ease, background 140ms ease, color 140ms ease;
}

.rollin-promo-remove:hover {
    background: var(--accent-pink);
    color: white;
}

/* Hook output */
.rollin-cart-hook {
    margin-top: var(--space-md);
    padding: var(--space-md);
    background: var(--bg-glass);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
}

.rollin-cart-gateway {
    margin-top: var(--space-md);
}

/* Tax estimator */
.rollin-tax-estimator {
    margin-top: var(--space-lg);
    padding: var(--space-lg);
    background: var(--bg-glass);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
}

.rollin-tax-estimator h4 {
    font-size: var(--fs-base);
    margin: 0 0 var(--space-md);
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.rollin-tax-estimator h4 i { color: var(--accent-cyan); }

/* === Hero do carrinho — versão simplificada estilo Hostinger ============
   Antes: eyebrow pill + h1 grande + subtitle (heroico, ocupa muito)
   Agora: h1 médio + meta-text uma linha
=========================================================================== */
.rh-cart-hero {
    margin-bottom: 24px;
    padding-top: 8px;
    font-family: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.rh-cart-hero-title {
    font-family: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: clamp(22px, 2.4vw, 30px);
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0 0 6px;
    text-transform: none;
}
.rh-cart-hero-meta {
    font-family: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
html[data-theme="light"] .rh-cart-hero-title { color: #0d0a1f; }
html[data-theme="dark"]  .rh-cart-hero-title { color: #ffffff; }
.rh-cart-hero-meta {
    font-size: 13.5px;
    margin: 0;
    text-transform: none;
}
html[data-theme="light"] .rh-cart-hero-meta { color: rgba(13, 10, 31, 0.55); }
html[data-theme="dark"]  .rh-cart-hero-meta { color: rgba(255, 255, 255, 0.55); }
.rh-cart-hero-meta strong { font-weight: 700; }
html[data-theme="light"] .rh-cart-hero-meta strong { color: rgba(13, 10, 31, 0.85); }
html[data-theme="dark"]  .rh-cart-hero-meta strong { color: rgba(255, 255, 255, 0.85); }

/* === Item de PRODUTO no carrinho — layout limpo ==========================
   Header: ícone + (nome + grupo) | preço | ações
   Meta row: Domínio: X · Setup: Y · Pró-rata: Z
=========================================================================== */
.rh-cart-product-price {
    text-align: right;
}
.rh-cart-product-price strong {
    display: block;
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}
html[data-theme="light"] .rh-cart-product-price strong { color: #0d0a1f; }
html[data-theme="dark"]  .rh-cart-product-price strong { color: #ffffff; }
.rh-cart-product-cycle {
    display: block;
    font-size: 11.5px;
    margin-top: 3px;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
}
html[data-theme="light"] .rh-cart-product-cycle { color: rgba(13, 10, 31, 0.55); }
html[data-theme="dark"]  .rh-cart-product-cycle { color: rgba(255, 255, 255, 0.55); }

.rh-cart-product-meta,
.rh-cart-product-configs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 24px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed;
}
html[data-theme="light"] .rh-cart-product-meta,
html[data-theme="light"] .rh-cart-product-configs { border-top-color: rgba(13, 10, 31, 0.08); }
html[data-theme="dark"]  .rh-cart-product-meta,
html[data-theme="dark"]  .rh-cart-product-configs { border-top-color: rgba(255, 255, 255, 0.08); }

.rh-cart-product-meta-row {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    font-size: 13px;
}
.rh-cart-product-meta-label {
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
}
.rh-cart-product-meta-label::after { content: ':'; }
html[data-theme="light"] .rh-cart-product-meta-label { color: rgba(13, 10, 31, 0.55); }
html[data-theme="dark"]  .rh-cart-product-meta-label { color: rgba(255, 255, 255, 0.55); }

.rh-cart-product-meta-value {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
html[data-theme="light"] .rh-cart-product-meta-value { color: #0d0a1f; }
html[data-theme="dark"]  .rh-cart-product-meta-value { color: #ffffff; }

.rh-cart-product-meta-value-mono {
    font-family: 'JetBrains Mono', 'SF Mono', Consolas, monospace;
    font-size: 12.5px;
    color: #6a1ab0 !important;
}
html[data-theme="dark"] .rh-cart-product-meta-value-mono { color: #b855ff !important; }

.rh-cart-product-configs {
    flex-direction: column;
    gap: 4px;
}
.rh-cart-product-configs .rh-cart-product-meta-label::after { content: ''; }
.rh-cart-product-configs .rh-cart-product-meta-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 4px;
}
.rh-cart-product-configs ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.rh-cart-product-configs li {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-size: 12.5px;
}
.rh-cart-product-configs li i { width: 13px; height: 13px; opacity: 0.5; flex-shrink: 0; }
.rh-cart-product-configs li strong { font-weight: 600; }

@media (max-width: 640px) {
    .rh-cart-product-meta { gap: 6px 0; flex-direction: column; }
}

/* === DOMÍNIO no carrinho — layout label:value, sem ciano =================
   Antes: title + (domain ciano) | (R$X / 1 Ano / Renovação X) | actions
   Agora: title + (domain roxo) | R$X | actions
          + linha abaixo: Período: 1 ano · Renovação: R$X/ano
=========================================================================== */
.rh-cart-domain-name {
    font-family: 'JetBrains Mono', 'SF Mono', Consolas, monospace;
    font-size: 13px;
    font-weight: 600;
    margin-top: 2px;
    /* overflow-wrap: anywhere — quebra só quando o conteúdo de fato
       não cabe (não a cada caractere como break-all faria). */
    overflow-wrap: anywhere;
    word-break: normal;
    text-transform: none;
    letter-spacing: 0;
}
html[data-theme="light"] .rh-cart-domain-name { color: #6a1ab0; }
html[data-theme="dark"]  .rh-cart-domain-name { color: #b855ff; }

.rh-cart-domain-addons {
    font-size: 12px;
    margin-top: 4px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
}
html[data-theme="light"] .rh-cart-domain-addons { color: rgba(13, 10, 31, 0.55); }
html[data-theme="dark"]  .rh-cart-domain-addons { color: rgba(255, 255, 255, 0.55); }

/* Preço — só o R$X agora (período/renovação saíram pra meta abaixo) */
.rh-cart-domain-price {
    text-align: right;
}
.rh-cart-domain-price strong {
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
}
html[data-theme="light"] .rh-cart-domain-price strong { color: #0d0a1f; }
html[data-theme="dark"]  .rh-cart-domain-price strong { color: #ffffff; }

/* Meta info abaixo do header — Período / Renovação como key:value */
.rh-cart-domain-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 24px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px dashed;
}
html[data-theme="light"] .rh-cart-domain-meta { border-top-color: rgba(13, 10, 31, 0.08); }
html[data-theme="dark"]  .rh-cart-domain-meta { border-top-color: rgba(255, 255, 255, 0.08); }

.rh-cart-domain-meta-row {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    font-size: 13px;
}
.rh-cart-domain-meta-label {
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
}
html[data-theme="light"] .rh-cart-domain-meta-label { color: rgba(13, 10, 31, 0.55); }
html[data-theme="dark"]  .rh-cart-domain-meta-label { color: rgba(255, 255, 255, 0.55); }

.rh-cart-domain-meta-label::after {
    content: ':';
    margin-left: 0;
}

.rh-cart-domain-meta-value {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
html[data-theme="light"] .rh-cart-domain-meta-value { color: #0d0a1f; }
html[data-theme="dark"]  .rh-cart-domain-meta-value { color: #ffffff; }

.rh-cart-domain-meta-value small {
    font-size: 11.5px;
    font-weight: 500;
    margin-left: 2px;
}
html[data-theme="light"] .rh-cart-domain-meta-value small { color: rgba(13, 10, 31, 0.50); }
html[data-theme="dark"]  .rh-cart-domain-meta-value small { color: rgba(255, 255, 255, 0.50); }

/* Mobile: meta empilha em linhas */
@media (max-width: 640px) {
    .rh-cart-domain-meta { gap: 6px 0; flex-direction: column; }
}

/* Summary sidebar specifics */
/* Empty cart button — agora dentro do header do summary, neutro,
   hover amber pra sinalizar destrutivo (sem rosa/vermelho). */
.rh-summary-clear {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: transparent;
    border: 1px solid;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    margin-left: auto;
    transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
    padding: 0;
    font-family: inherit;
}
html[data-theme="light"] .rh-summary-clear {
    border-color: rgba(13, 10, 31, 0.10);
    color: rgba(13, 10, 31, 0.45);
}
html[data-theme="light"] .rh-summary-clear:hover {
    background: rgba(217, 119, 6, 0.08);
    border-color: rgba(217, 119, 6, 0.30);
    color: #b45309;
}
html[data-theme="dark"] .rh-summary-clear {
    border-color: rgba(255, 255, 255, 0.10);
    color: rgba(255, 255, 255, 0.45);
}
html[data-theme="dark"] .rh-summary-clear:hover {
    background: rgba(245, 158, 11, 0.10);
    border-color: rgba(245, 158, 11, 0.30);
    color: #fbbf24;
}
.rh-summary-clear i { width: 14px; height: 14px; }

/* Force Poppins em TODO o resumo (algumas <strong>/h2 antigas vinham de
   herança Bootstrap em outro font-family) */
.rollin-summary,
.rollin-summary *,
.rollin-summary-head,
.rollin-summary-head * {
    font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif !important;
}

/* === Seção de itens do total (subtotal/desconto/impostos) === */
.rh-os-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 4px 0 14px;
}
.rh-os-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 13.5px;
    line-height: 1.4;
}
.rh-os-line-discount {
    color: #006d5b;
}
html[data-theme="dark"] .rh-os-line-discount { color: #01fad5; }
.rh-os-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-transform: none;
    letter-spacing: 0;
    font-weight: 500;
}
.rh-os-label i { width: 14px; height: 14px; opacity: 0.8; }
html[data-theme="light"] .rh-os-label { color: rgba(13, 10, 31, 0.65); }
html[data-theme="dark"]  .rh-os-label { color: rgba(255, 255, 255, 0.65); }
.rh-os-value {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}
html[data-theme="light"] .rh-os-value { color: #0d0a1f; }
html[data-theme="dark"]  .rh-os-value { color: #ffffff; }

/* === Total Hoje — headliner === */
.rh-os-grand {
    margin: 4px 0 14px;
    padding: 16px 18px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(106, 26, 176, 0.06), rgba(184, 85, 255, 0.04));
    border: 1px solid rgba(106, 26, 176, 0.18);
}
html[data-theme="dark"] .rh-os-grand {
    background: linear-gradient(135deg, rgba(138, 43, 214, 0.10), rgba(184, 85, 255, 0.06));
    border-color: rgba(184, 85, 255, 0.22);
}
.rh-os-grand-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}
.rh-os-grand-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: rgba(106, 26, 176, 0.85);
}
html[data-theme="dark"] .rh-os-grand-label { color: rgba(184, 85, 255, 0.85); }
.rh-os-grand-value {
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    color: #6a1ab0;
}
html[data-theme="dark"] .rh-os-grand-value { color: #d4a8ff; }
.rh-os-grand-hint {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 8px 0 0;
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1.4;
    text-transform: none;
}
.rh-os-grand-hint i { width: 12px; height: 12px; flex-shrink: 0; }
html[data-theme="light"] .rh-os-grand-hint { color: rgba(13, 10, 31, 0.55); }
html[data-theme="dark"]  .rh-os-grand-hint { color: rgba(255, 255, 255, 0.55); }

/* === Renovação automática (recurring) === */
.rh-os-renewal {
    padding: 12px 0 14px;
    border-top: 1px dashed;
}
html[data-theme="light"] .rh-os-renewal { border-top-color: rgba(13, 10, 31, 0.10); }
html[data-theme="dark"]  .rh-os-renewal { border-top-color: rgba(255, 255, 255, 0.10); }
.rh-os-renewal-head {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 8px;
}
.rh-os-renewal-head i { width: 13px; height: 13px; }
html[data-theme="light"] .rh-os-renewal-head { color: rgba(13, 10, 31, 0.55); }
html[data-theme="dark"]  .rh-os-renewal-head { color: rgba(255, 255, 255, 0.55); }
.rh-os-renewal-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.rh-os-renewal-item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    font-size: 13px;
}
.rh-os-renewal-amount {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
html[data-theme="light"] .rh-os-renewal-amount { color: rgba(13, 10, 31, 0.85); }
html[data-theme="dark"]  .rh-os-renewal-amount { color: rgba(255, 255, 255, 0.85); }
.rh-os-renewal-period {
    font-size: 11.5px;
    text-transform: lowercase;
    font-weight: 500;
}
html[data-theme="light"] .rh-os-renewal-period { color: rgba(13, 10, 31, 0.50); }
html[data-theme="dark"]  .rh-os-renewal-period { color: rgba(255, 255, 255, 0.50); }

.rollin-recurring-box {
    padding: var(--space-sm) var(--space-md);
    background: rgba(255,255,255,0.02);
    border-radius: var(--radius-sm);
    margin: var(--space-sm) 0;
}

.rollin-recurring-label {
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    margin-bottom: 4px;
}

.rollin-recurring-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 12px;
}

.rollin-recurring-list > span {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    color: var(--text-secondary);
}

.rollin-recurring-list .cost {
    color: var(--text-primary);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.rollin-recurring-list small {
    color: var(--text-muted);
    font-size: 11px;
}

.rollin-express-wrap {
    margin-top: var(--space-md);
    padding-top: var(--space-md);
    border-top: 1px dashed var(--border-subtle);
}

.rollin-express-divider {
    text-align: center;
    margin: 10px 0;
    color: var(--text-dim);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
}

.rollin-continue-shopping {
    display: flex !important;
    align-items: center;
    gap: 6px;
}

/* ============================================================
   rh-ci-* — Rollin Cart Item — estrutura nova mobile-first.
   Substitui rollin-cart-item legado pra cart items que usam o
   markup novo (article.rh-ci). Flex card simples, min-width:0
   nos lugares certos, sem grid mágico, sem !important.
   Poppins forçado pra consistência com Astro.
   ============================================================ */
.rh-ci, .rh-ci * {
    font-family: 'Poppins', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.rh-ci {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 18px 20px;
    background: var(--bg-glass);
    border: 1px solid var(--border-subtle);
    border-radius: 16px;
    transition: border-color 180ms ease;
}
.rh-ci:hover { border-color: var(--border-default); }

.rh-ci-icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(106, 26, 176, 0.10);
    color: #6a1ab0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
[data-theme="dark"] .rh-ci-icon {
    background: rgba(138, 43, 214, 0.16);
    color: #b855ff;
}

/* min-width: 0 é o segredo: deixa o body encolher abaixo do
   min-content do conteúdo, evitando squeeze de outras colunas */
.rh-ci-body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.rh-ci-title {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    margin: 0;
    color: var(--text-primary);
    /* sem word-break — quebra natural por espaços, normal */
    overflow-wrap: break-word;
    word-break: normal;
}

.rh-ci-sub {
    font-family: 'JetBrains Mono', 'SF Mono', Consolas, monospace;
    font-size: 12.5px;
    font-weight: 600;
    margin: 0;
    color: #6a1ab0;
    /* anywhere = quebra só se REALMENTE não couber, nunca caractere a caractere */
    overflow-wrap: anywhere;
    word-break: normal;
}
[data-theme="dark"] .rh-ci-sub { color: #b855ff; }

.rh-ci-addons {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    font-size: 12px;
    margin: 4px 0 0;
    color: var(--text-muted);
}

.rh-ci-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 8px 0 0;
    padding-top: 8px;
    border-top: 1px dashed rgba(13, 10, 31, 0.08);
}
[data-theme="dark"] .rh-ci-meta { border-top-color: rgba(255, 255, 255, 0.08); }

.rh-ci-meta-row {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 13px;
    margin: 0;
}
.rh-ci-meta-row dt {
    font-weight: 500;
    color: var(--text-muted);
    margin: 0;
    flex-shrink: 0;
}
.rh-ci-meta-row dt::after { content: ':'; }
.rh-ci-meta-row dd {
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    font-variant-numeric: tabular-nums;
}
.rh-ci-meta-row dd small {
    font-size: 11.5px;
    font-weight: 500;
    margin-left: 2px;
    color: var(--text-muted);
}

.rh-ci-details { margin-top: 10px; }

.rh-ci-aside {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
}

.rh-ci-tools {
    display: inline-flex;
    gap: 6px;
}
.rh-ci-tool {
    width: 32px;
    height: 32px;
    aspect-ratio: 1;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-subtle);
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
    text-decoration: none;
}
[data-theme="light"] .rh-ci-tool {
    background: rgba(13, 10, 31, 0.03);
    border-color: rgba(13, 10, 31, 0.10);
}
.rh-ci-tool:hover {
    color: var(--text-primary);
    border-color: var(--border-default);
}
.rh-ci-tool-danger:hover {
    color: #ef4444;
    border-color: rgba(239, 68, 68, 0.40);
    background: rgba(239, 68, 68, 0.08);
}

.rh-ci-price {
    text-align: right;
}
.rh-ci-price strong {
    display: block;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}
.rh-ci-price span {
    display: block;
    font-size: 11.5px;
    font-weight: 500;
    margin-top: 3px;
    color: var(--text-muted);
}

/* Eyebrow — categoria/grupo do produto acima/abaixo do título */
.rh-ci-eyebrow {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    margin: 2px 0 0;
}

/* Domain value em mono pra produtos */
.rh-ci-meta-mono {
    font-family: 'JetBrains Mono', 'SF Mono', Consolas, monospace !important;
    font-size: 12.5px !important;
    color: #6a1ab0 !important;
}
[data-theme="dark"] .rh-ci-meta-mono { color: #b855ff !important; }

/* Config options */
.rh-ci-configs {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed rgba(13, 10, 31, 0.06);
}
[data-theme="dark"] .rh-ci-configs { border-top-color: rgba(255, 255, 255, 0.06); }
.rh-ci-configs-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    margin: 0 0 6px;
}
.rh-ci-configs ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.rh-ci-configs li {
    font-size: 12.5px;
    color: var(--text-secondary);
}
.rh-ci-configs li strong {
    color: var(--text-primary);
    font-weight: 600;
}

/* Qty input */
.rh-ci-qty {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    padding: 8px 10px;
    background: rgba(13, 10, 31, 0.03);
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    align-self: flex-start;
}
[data-theme="dark"] .rh-ci-qty {
    background: rgba(255, 255, 255, 0.03);
}
.rh-ci-qty label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    margin: 0;
}
.rh-ci-qty input {
    width: 64px;
    height: 30px;
    padding: 0 8px;
    border: 1px solid var(--border-subtle);
    background: var(--bg-glass);
    color: var(--text-primary);
    border-radius: 6px;
    font-family: inherit;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
    text-align: center;
}
.rh-ci-qty-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 12px;
    border-radius: 8px;
    border: none;
    background: rgba(106, 26, 176, 0.08);
    color: #6a1ab0;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 160ms ease;
}
.rh-ci-qty-btn:hover { background: rgba(106, 26, 176, 0.14); }
[data-theme="dark"] .rh-ci-qty-btn {
    background: rgba(184, 85, 255, 0.14);
    color: #b855ff;
}

/* Sub-items (product addons inline) */
.rh-ci-subitems {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px dashed rgba(13, 10, 31, 0.06);
    display: flex;
    flex-direction: column;
    gap: 6px;
}
[data-theme="dark"] .rh-ci-subitems { border-top-color: rgba(255, 255, 255, 0.06); }
.rh-ci-subitem {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    font-size: 12.5px;
}
.rh-ci-subitem-info {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
}
.rh-ci-subitem-info strong {
    color: var(--text-primary);
    font-weight: 600;
}
.rh-ci-subitem-info span {
    color: var(--text-muted);
    font-size: 11.5px;
}
.rh-ci-subitem-price {
    color: var(--text-primary);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}

/* Mobile (≤640px): aside vai pra baixo do body, full width */
@media (max-width: 640px) {
    .rh-ci {
        padding: 16px;
        flex-wrap: wrap;
        gap: 12px;
    }
    .rh-ci-icon {
        width: 40px;
        height: 40px;
    }
    .rh-ci-title { font-size: 14.5px; }
    .rh-ci-aside {
        width: 100%;
        flex-direction: row-reverse;
        align-items: center;
        justify-content: space-between;
        padding-top: 12px;
        border-top: 1px dashed rgba(13, 10, 31, 0.08);
    }
    [data-theme="dark"] .rh-ci-aside { border-top-color: rgba(255, 255, 255, 0.08); }
    .rh-ci-price strong { font-size: 19px; }
}

/* ============================================================
   LEGACY rollin-cart-item — Mobile tweaks (mantido pra products
   e addons que ainda usam essa estrutura)
   ============================================================ */
/* Mobile tweaks — layout em uma coluna pra evitar squeeze de colunas auto.
   O fix REAL do title-quebrando-letra-por-letra está no `minmax(0, 1fr)`
   da regra base do .rollin-cart-item-head — isso já resolve em qualquer
   viewport. Aqui só ajustamos hierarquia visual pra mobile (price abaixo,
   actions absolute no canto superior direito). */
@media (max-width: 768px) {
    .rollin-cart-item {
        padding: 18px 16px;
    }
    .rollin-cart-item-head {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
        padding-right: 78px; /* reserva espaço pros actions absolute */
    }
    .rollin-cart-item-price {
        text-align: left;
        align-items: flex-start;
        flex-direction: row;
        gap: 10px;
        flex-wrap: wrap;
        white-space: normal;
    }
    .rollin-cart-item-actions {
        position: absolute;
        top: 14px;
        right: 14px;
    }
    .rollin-cart-subitem { grid-template-columns: auto 1fr; }
    .rollin-cart-subitem-price { grid-column: 1 / -1; text-align: left; }
}

/* =============================================================
   CHECKOUT — account select, gateways, secure note
   ============================================================= */

.rollin-account-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--space-sm);
}

.rollin-account-card {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 10px;
    padding: var(--space-md);
    background: rgba(255,255,255,0.03);
    border: 1.5px solid var(--border-subtle);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: transform 140ms ease, border-color 140ms ease, background 140ms ease, color 140ms ease;
    position: relative;
    align-items: start;
    margin: 0;
}

.rollin-account-card:hover {
    background: rgba(255,255,255,0.05);
    border-color: var(--border-default);
}

.rollin-account-card.active,
.rollin-account-card:has(input:checked) {
    background: linear-gradient(135deg, rgba(250,44,104,0.08), rgba(80,2,174,0.05));
    border-color: var(--accent-pink);
}

.rollin-account-card.disabled {
    opacity: 0.5;
    pointer-events: none;
}

.rollin-account-card input[type="radio"] {
    accent-color: var(--accent-pink);
    width: 18px;
    height: 18px;
    margin-top: 2px;
    flex-shrink: 0;
}

.rollin-account-card-body {
    min-width: 0;
}

.rollin-account-card-body strong {
    display: block;
    color: var(--text-primary);
    font-weight: 600;
    font-size: var(--fs-sm);
    margin-bottom: 4px;
}

.rollin-account-card-body small {
    display: block;
    color: var(--text-muted);
    font-size: var(--fs-xs);
    line-height: 1.6;
}

.rollin-account-card-body i[data-lucide] {
    color: var(--accent-pink);
    width: 18px;
    height: 18px;
    margin-bottom: 6px;
}

.rollin-account-card-tag { display: flex; flex-direction: column; gap: 4px; align-items: flex-end; }

.rollin-account-new {
    grid-column: 1 / -1;
    border-style: dashed;
    text-align: center;
}

.rollin-account-new .rollin-account-card-body {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    grid-column: 2 / 3;
}

/* Already registered / New account toggles */
.rollin-checkout-signup-wrap {
    padding: 0;
    background: transparent;
    border: none;
}

.rollin-checkout-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    padding: 14px var(--space-lg);
    background: var(--bg-glass);
    /* backdrop-filter removido — perf killer */
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    cursor: pointer;
    margin-bottom: var(--space-sm);
    transition: transform 140ms ease, border-color 140ms ease, background 140ms ease, color 140ms ease;
}

.rollin-checkout-toggle:hover {
    border-color: var(--border-default);
    background: var(--bg-card-hover);
}

.rollin-checkout-toggle > div {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-primary);
    font-weight: 600;
    font-size: var(--fs-sm);
}

.rollin-checkout-toggle > div i { color: var(--accent-cyan); }

.circleactive {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid var(--border-strong);
    position: relative;
    flex-shrink: 0;
    transition: transform 140ms ease, border-color 140ms ease, background 140ms ease, color 140ms ease;
}

.rah-login .circleactive::after,
.activite-logreg-form:has(~ div:not(.w-hidden)) .circleactive::after {
    content: '';
    position: absolute;
    inset: 3px;
    background: var(--gradient-primary);
    border-radius: 50%;
}

.rollin-checkout-toggle + div:not(.w-hidden) {
    padding: var(--space-md) 0;
}

/* Apply credit */
.rollin-credit-box {
    padding: var(--space-md);
    background: rgba(6,230,194,0.05);
    border: 1px solid rgba(6,230,194,0.2);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-md);
}

.rollin-credit-box .rollin-radio-option {
    margin-bottom: 8px;
}

.rollin-credit-box .rollin-radio-option:last-child {
    margin-bottom: 0;
}

/* Payment gateways */
.rollin-gateways-container {
    padding: var(--space-md);
    background: rgba(255,255,255,0.02);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-md);
}

.rollin-gateway-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-sm);
}

.rollin-gateway-card {
    cursor: pointer;
    margin: 0;
}

.rollin-gateway-card input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.rollin-gateway-card-content {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px var(--space-md);
    background: rgba(255,255,255,0.03);
    border: 1.5px solid var(--border-subtle);
    border-radius: var(--radius-md);
    transition: transform 140ms ease, border-color 140ms ease, background 140ms ease, color 140ms ease;
}

.rollin-gateway-card-content i {
    color: var(--text-muted);
    font-size: 20px;
    transition: color var(--transition-fast);
}

.rollin-gateway-card-content strong {
    color: var(--text-primary);
    font-size: var(--fs-sm);
    font-weight: 600;
    flex: 1;
}

.rollin-gateway-card input:checked ~ .rollin-gateway-card-content {
    background: linear-gradient(135deg, rgba(250,44,104,0.08), rgba(80,2,174,0.05));
    border-color: var(--accent-pink);
}

.rollin-gateway-card input:checked ~ .rollin-gateway-card-content i {
    color: var(--accent-pink);
}

/* Credit Card container */
.rollin-cc-container {
    padding: var(--space-md);
    background: rgba(255,255,255,0.02);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    margin-top: var(--space-md);
}

.existing-cc-grid {
    display: grid;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}

/* Secure transaction message */
.rollin-secure-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: var(--space-md);
    background: rgba(6,230,194,0.06);
    border: 1px solid rgba(6,230,194,0.18);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    font-size: var(--fs-xs);
    line-height: 1.6;
}

.rollin-secure-note > i {
    color: var(--accent-cyan);
    font-size: 18px;
    flex-shrink: 0;
    margin-top: 2px;
}

.rollin-secure-note strong {
    color: var(--accent-cyan);
    font-family: 'SF Mono', monospace;
    font-size: 11px;
}

/* =============================================================
   ORDER SUMMARY (injected via AJAX)
   ============================================================= */

.rollin-os-product {
    margin-bottom: var(--space-sm);
    padding-bottom: var(--space-sm);
    border-bottom: 1px dashed var(--border-subtle);
}

.rollin-os-product-name {
    font-size: var(--fs-base);
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.3;
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.rollin-os-qty {
    color: var(--accent-pink);
    font-size: var(--fs-sm);
}

.rollin-os-product-group {
    font-size: var(--fs-xs);
    color: var(--text-muted);
    margin-top: 4px;
}

.rollin-os-line {
    display: flex;
    justify-content: space-between;
    gap: var(--space-sm);
    align-items: flex-start;
    padding: 6px 0;
    font-size: 13px;
    color: var(--text-secondary);
}

.rollin-os-line > span {
    flex: 1;
    min-width: 0;
    word-break: break-word;
}

.rollin-os-line strong {
    color: var(--text-primary);
    font-weight: 600;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.rollin-os-line strong small {
    display: block;
    font-weight: 400;
    color: var(--text-muted);
    font-size: 11px;
}

.rollin-os-line-sub {
    color: var(--text-muted);
    padding-left: var(--space-sm);
    font-size: 12px;
}

.rollin-os-line-sub i {
    width: 12px;
    height: 12px;
    color: var(--text-dim);
}

.rollin-os-line-addon {
    color: var(--accent-cyan);
}

.rollin-os-line-addon i {
    color: var(--accent-cyan);
    width: 12px;
    height: 12px;
}

.rollin-os-line-tax {
    color: var(--text-muted);
}

.rollin-os-totals {
    margin-top: var(--space-sm);
    padding-top: var(--space-sm);
    border-top: 1px solid var(--border-subtle);
}

.rollin-os-grand {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: var(--space-md);
    padding: var(--space-md);
    /* Roxo (sem rosa) pra destacar o total — alinhado com brand. */
    background: linear-gradient(135deg, rgba(106, 26, 176, 0.06), rgba(184, 85, 255, 0.05));
    border: 1px solid rgba(106, 26, 176, 0.20);
    border-radius: var(--radius-md);
}

.rollin-os-grand-label {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
}

.rollin-os-grand-value {
    font-size: var(--fs-xl);
    font-weight: 800;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}

.rollin-os-line-renewal {
    padding: 10px 0;
    border-bottom: 1px dashed var(--border-subtle);
}

.rollin-os-line-renewal:last-child { border-bottom: none; }

.rollin-os-renewal-info {
    flex: 1;
    min-width: 0;
}

.rollin-os-renewal-info div {
    color: var(--text-primary);
    font-size: 13px;
    line-height: 1.3;
    word-break: break-all;
}

.rollin-os-renewal-info small {
    color: var(--text-muted);
    font-size: 11px;
}

.rollin-os-renewal-price {
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.rollin-os-renewal-price div {
    font-size: 11px;
    color: var(--text-muted);
}

.rollin-os-renewal-price strong {
    color: var(--accent-cyan);
    font-variant-numeric: tabular-nums;
}

.rollin-os-remove {
    display: inline-flex;
    width: 24px;
    height: 24px;
    align-items: center;
    justify-content: center;
    color: var(--text-dim);
    border-radius: var(--radius-sm);
    transition: transform 140ms ease, border-color 140ms ease, background 140ms ease, color 140ms ease;
    margin-top: 4px;
}

.rollin-os-remove:hover {
    color: var(--accent-pink);
    background: rgba(250,44,104,0.08);
}

.rollin-os-remove i { width: 14px; height: 14px; }

/* =============================================================
   SIDEBAR CATEGORIES (dropdown do header)
   ============================================================= */
.rollin-sidebar-panel {
    padding: var(--space-md);
    border-bottom: 1px solid var(--border-subtle);
}
.rollin-sidebar-panel:last-child { border-bottom: none; }
.rollin-sidebar-head { margin-bottom: var(--space-sm); }
.rollin-sidebar-title { font-size: 11px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; margin: 0; display: flex; align-items: center; gap: 6px; }
.rollin-sidebar-badge { display: inline-flex; padding: 2px 8px; background: rgba(250, 44, 104, 0.15); color: var(--accent-pink); border-radius: var(--radius-full); font-size: 10px; font-weight: 700; letter-spacing: 0; text-transform: none; }
.rollin-sidebar-body { color: var(--text-muted); font-size: var(--fs-xs); padding: 6px 0; }
.rollin-sidebar-list { display: flex; flex-direction: column; gap: 2px; }
.rollin-sidebar-link { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border-radius: var(--radius-sm); color: var(--text-secondary) !important; font-size: var(--fs-sm); font-weight: 500; text-decoration: none; transition: transform 140ms ease, border-color 140ms ease, background 140ms ease, color 140ms ease; background: transparent; border: none; }
.rollin-sidebar-link:hover { background: rgba(255, 255, 255, 0.04); color: var(--text-primary) !important; padding-left: 16px; }
.rollin-sidebar-link.active { background: rgba(250, 44, 104, 0.1); color: var(--accent-pink) !important; border-left: 2px solid var(--accent-pink); padding-left: 10px; }
.rollin-sidebar-link.disabled { opacity: 0.4; pointer-events: none; }
.rollin-sidebar-footer { padding-top: var(--space-sm); margin-top: var(--space-sm); border-top: 1px dashed var(--border-subtle); font-size: var(--fs-xs); color: var(--text-muted); }

/* Collapsed (mobile) */
.rollin-sidebar-collapsed {
    display: none;
    flex-direction: column;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}
@media (max-width: 991px) {
    .rollin-sidebar-collapsed { display: flex; }
}
.rollin-sidebar-mobile-select { padding: 0; }
.rollin-currency-form {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 10px 14px;
    background: var(--bg-glass);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
}
.rollin-currency-label { display: inline-flex; align-items: center; gap: 6px; color: var(--text-muted); font-size: var(--fs-xs); font-weight: 600; margin: 0; white-space: nowrap; }
.rollin-currency-label i { width: 14px; height: 14px; color: var(--accent-cyan); }
.rollin-currency-select {
    flex: 1;
    padding: 6px 10px !important;
    height: auto !important;
    font-size: var(--fs-sm) !important;
    color: var(--text-primary) !important;
    background: var(--bg-glass) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: var(--radius-sm) !important;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: right 10px center !important;
    padding-right: 28px !important;
}
.rollin-currency-select option {
    color: var(--text-primary);
    background: var(--bg-glass);
}
html[data-theme="light"] .rollin-currency-select option {
    color: #0d0a1f;
    background: #ffffff;
}
html[data-theme="dark"] .rollin-currency-select option {
    color: #ffffff;
    background: #16002a;
}


/* =============================================================
   STORE DROPDOWN — Categorias / Ações (substitui Bootstrap)
   ============================================================= */

.rollin-store-drop {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 14px;
    margin-bottom: 12px;
    overflow: hidden;
    transition: border-color 200ms ease, box-shadow 200ms ease;
}
.rollin-store-drop[open] {
    border-color: rgba(138,43,214,0.4);
    box-shadow: 0 6px 20px rgba(138,43,214,0.18);
}
[data-theme="light"] .rollin-store-drop {
    background: #ffffff;
    border-color: rgba(13,10,31,0.10);
    box-shadow: 0 2px 8px rgba(13,10,31,0.04);
}
[data-theme="light"] .rollin-store-drop[open] {
    border-color: rgba(106,26,176,0.35);
    box-shadow: 0 8px 24px rgba(106,26,176,0.12);
}

.rollin-store-drop-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    cursor: pointer;
    list-style: none;
    user-select: none;
    transition: background 150ms ease;
    -webkit-tap-highlight-color: transparent;
}
.rollin-store-drop-trigger::-webkit-details-marker { display: none; }
.rollin-store-drop-trigger::marker { content: ""; }
.rollin-store-drop-trigger:hover { background: rgba(138,43,214,0.06); }
[data-theme="light"] .rollin-store-drop-trigger:hover { background: rgba(106,26,176,0.04); }

.rollin-store-drop-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-primary);
}
.rollin-store-drop-label i {
    color: var(--rh-cyan, var(--accent-cyan));
    font-size: 14px;
}
[data-theme="light"] .rollin-store-drop-label i { color: var(--rh-purple, var(--accent-pink)); }

.rollin-store-drop-badge {
    display: inline-flex;
    padding: 2px 9px;
    background: linear-gradient(135deg, #8a2bd6, #6a1ab0);
    color: #fff;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.rollin-store-drop-chev {
    color: var(--text-muted);
    flex-shrink: 0;
    transition: transform 220ms cubic-bezier(.2,.7,.2,1);
}
.rollin-store-drop[open] .rollin-store-drop-chev {
    transform: rotate(180deg);
    color: var(--rh-purple, var(--accent-pink));
}

.rollin-store-drop-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 4px 8px 10px;
    border-top: 1px solid rgba(255,255,255,0.06);
    animation: store-drop-in 220ms ease-out;
}
[data-theme="light"] .rollin-store-drop-list { border-top-color: rgba(13,10,31,0.06); }

@keyframes store-drop-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.rollin-store-drop-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 14px;
    margin: 0;
    border-radius: 10px;
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-secondary) !important;
    font-size: 13.5px;
    font-weight: 500;
    text-decoration: none !important;
    cursor: pointer;
    transition: transform 150ms ease, border-color 150ms ease, background 150ms ease;
    text-align: left;
    width: 100%;
    font-family: inherit;
}
.rollin-store-drop-item:hover {
    background: rgba(138,43,214,0.10);
    color: var(--text-primary) !important;
    border-color: rgba(138,43,214,0.2);
    text-decoration: none !important;
    padding-left: 18px;
}
.rollin-store-drop-item.active {
    background: linear-gradient(135deg, rgba(138,43,214,0.18), rgba(1,250,213,0.06));
    color: var(--text-primary) !important;
    border-color: rgba(138,43,214,0.4);
    font-weight: 700;
}
.rollin-store-drop-item.active::before {
    content: "";
    width: 4px;
    height: 18px;
    background: linear-gradient(180deg, #8a2bd6, #01fad5);
    border-radius: 2px;
    margin-right: 4px;
}
.rollin-store-drop-item.disabled {
    opacity: 0.4;
    pointer-events: none;
}
[data-theme="light"] .rollin-store-drop-item:hover {
    background: rgba(106,26,176,0.07);
    border-color: rgba(106,26,176,0.18);
    color: #0d0a1f !important;
}
[data-theme="light"] .rollin-store-drop-item.active {
    background: linear-gradient(135deg, rgba(106,26,176,0.10), rgba(255,255,255,0.6));
    border-color: rgba(106,26,176,0.3);
}

.rollin-store-drop-item-badge {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--text-muted);
    background: rgba(255,255,255,0.06);
    padding: 2px 8px;
    border-radius: 999px;
    flex-shrink: 0;
}
[data-theme="light"] .rollin-store-drop-item-badge {
    background: rgba(13,10,31,0.06);
    color: rgba(13,10,31,0.55);
}

.rollin-store-drop-footer {
    padding: 10px 16px;
    font-size: 11.5px;
    color: var(--text-muted);
    border-top: 1px solid rgba(255,255,255,0.06);
}
[data-theme="light"] .rollin-store-drop-footer { border-top-color: rgba(13,10,31,0.06); }

/* Esconde os panel-heading/panel-body bootstrappy se ainda restar algum em outras telas */
.rollin-sidebar-collapsed .panel,
.rollin-sidebar-collapsed .card,
.rollin-sidebar-mobile-select .panel,
.rollin-sidebar-mobile-select .card {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.rollin-sidebar-collapsed .panel-heading,
.rollin-sidebar-collapsed .card-header,
.rollin-sidebar-mobile-select .panel-heading,
.rollin-sidebar-mobile-select .card-header {
    display: none !important;
}

/* =============================================================
   PROMO BANNER + CATEGORY CHIPS (mobile-first, app-like)
   ============================================================= */

/* === Banner promo === */
.rollin-promo {
    position: relative;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 22px 26px;
    margin: 0 0 24px;
    border-radius: 16px;
    overflow: hidden;
    background:
        radial-gradient(ellipse 80% 60% at 100% 0%, rgba(1, 250, 213, 0.22) 0%, transparent 60%),
        linear-gradient(135deg, #6a1ab0 0%, #2a0855 100%);
    color: #ffffff;
    box-shadow:
        0 1px 2px rgba(106, 26, 176, 0.20),
        0 12px 32px rgba(106, 26, 176, 0.22);
}

.rollin-promo-mesh {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px);
    background-size: 18px 18px;
    pointer-events: none;
    -webkit-mask-image: radial-gradient(ellipse at top right, #000 30%, transparent 75%);
    mask-image: radial-gradient(ellipse at top right, #000 30%, transparent 75%);
}

.rollin-promo-content {
    position: relative;
    flex: 1;
    min-width: 0;
}

.rollin-promo-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.rollin-promo-pulse {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #19f29c;
    box-shadow: 0 0 8px #19f29c;
}

.rollin-promo-title {
    font-size: 22px;
    font-weight: 800;
    margin: 0 0 4px;
    letter-spacing: -0.02em;
    line-height: 1.15;
    color: #ffffff;
}

.rollin-promo-text {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.78);
    margin: 0;
    line-height: 1.5;
    max-width: 540px;
}

.rollin-promo-cta {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 11px 18px;
    border-radius: 999px;
    background: #ffffff;
    color: #6a1ab0 !important;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none !important;
    flex-shrink: 0;
    transition: transform 180ms ease, box-shadow 180ms ease;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.20);
}
.rollin-promo-cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
    color: #6a1ab0 !important;
}

@media (max-width: 640px) {
    .rollin-promo {
        flex-direction: column;
        align-items: flex-start;
        padding: 18px 20px;
        gap: 14px;
    }
    .rollin-promo-title { font-size: 18px; }
    .rollin-promo-text { font-size: 12.5px; }
    .rollin-promo-cta {
        width: 100%;
        justify-content: center;
        padding: 12px 18px;
    }
}

/* Quando o promo está DENTRO do sidebar narrow (.rollin-store-aside),
   força layout vertical + tamanhos compactos pra não cortar o título.
   FORA do media query — aplica em qualquer largura quando dentro do aside. */
.rollin-store-aside .rollin-promo {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 20px !important;
    gap: 12px !important;
    margin: 0 0 16px !important;
    /* Garante que o banner expande pra caber TODO conteúdo (texto + CTA) — sem
       max-height ou overflow:hidden cortando o subtitle/botão Aproveitar. */
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}
.rollin-store-aside .rollin-promo-content {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: visible !important;
}
.rollin-store-aside .rollin-promo-mesh {
    /* Mesh sutil — limita pra não interferir no cálculo de altura */
    pointer-events: none;
    z-index: 0;
}
.rollin-store-aside .rollin-promo-content,
.rollin-store-aside .rollin-promo-cta {
    position: relative;
    z-index: 1;
}
.rollin-store-aside .rollin-promo-title {
    font-size: 17px !important;
    line-height: 1.2 !important;
    word-break: normal !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    margin-bottom: 6px !important;
}
.rollin-store-aside .rollin-promo-text {
    font-size: 12.5px !important;
    line-height: 1.5 !important;
    max-width: 100% !important;
    /* Sem clamp/ellipsis — deixa wrap natural */
    display: block !important;
    -webkit-line-clamp: unset !important;
    overflow: visible !important;
    text-overflow: clip !important;
}
.rollin-store-aside .rollin-promo-tag {
    align-self: flex-start;
    font-size: 9.5px !important;
    padding: 3px 8px !important;
    margin-bottom: 4px !important;
}
.rollin-store-aside .rollin-promo-cta {
    width: 100% !important;
    justify-content: center !important;
    padding: 11px 16px !important;
    font-size: 12.5px !important;
    margin-top: 4px;
}

/* === Category filter chips (horizontal scroll, app-like) === */
.rollin-cat-chips {
    margin: 0 0 28px;
    position: relative;
}

.rollin-cat-chips::after {
    /* Fade na direita pra indicar overflow scroll */
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 32px;
    height: 100%;
    pointer-events: none;
    background: linear-gradient(90deg, transparent 0%, var(--rh-page-bg, #fafafc) 100%);
}
[data-theme="dark"] .rollin-cat-chips::after {
    background: linear-gradient(90deg, transparent 0%, #0a0014 100%);
}

.rollin-cat-chips-track {
    display: flex;
    align-items: center;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 4px 32px 4px 0;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.rollin-cat-chips-track::-webkit-scrollbar { display: none; }

.rollin-cat-chip {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 999px;
    background: #ffffff;
    color: #0d0a1f !important;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none !important;
    border: 1px solid rgba(13, 10, 31, 0.10);
    transition: background 160ms ease, color 160ms ease, border-color 160ms ease, transform 160ms ease;
    scroll-snap-align: start;
    white-space: nowrap;
    box-shadow: 0 1px 2px rgba(13, 10, 31, 0.04);
}
[data-theme="dark"] .rollin-cat-chip {
    background: rgba(255, 255, 255, 0.04);
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.10);
    box-shadow: none;
}

.rollin-cat-chip:hover {
    background: rgba(138, 43, 214, 0.08);
    border-color: rgba(138, 43, 214, 0.30);
    color: #6a1ab0 !important;
    text-decoration: none !important;
}
[data-theme="dark"] .rollin-cat-chip:hover {
    background: rgba(138, 43, 214, 0.18);
    border-color: rgba(138, 43, 214, 0.5);
    color: #ffffff !important;
}

.rollin-cat-chip.is-active {
    background: linear-gradient(135deg, #8a2bd6 0%, #6a1ab0 100%);
    color: #ffffff !important;
    border-color: transparent;
    box-shadow:
        0 1px 2px rgba(138, 43, 214, 0.20),
        0 4px 12px rgba(138, 43, 214, 0.32);
}
.rollin-cat-chip.is-active:hover {
    color: #ffffff !important;
    transform: translateY(-1px);
}

.rollin-cat-chip.is-disabled {
    opacity: 0.4;
    pointer-events: none;
}

.rollin-cat-chip-badge {
    font-size: 10.5px;
    font-weight: 800;
    background: rgba(138, 43, 214, 0.12);
    color: #6a1ab0;
    padding: 2px 7px;
    border-radius: 999px;
}
.rollin-cat-chip.is-active .rollin-cat-chip-badge {
    background: rgba(255, 255, 255, 0.22);
    color: #ffffff;
}
[data-theme="dark"] .rollin-cat-chip-badge {
    background: rgba(138, 43, 214, 0.22);
    color: #b97aff;
}

/* Mobile: padding lateral pra não colar nas bordas */
@media (max-width: 640px) {
    .rollin-cat-chips-track {
        padding: 4px 20px 4px 0;
        margin: 0 -16px;
        padding-left: 16px;
        padding-right: 36px;
    }
    .rollin-cat-chip {
        padding: 9px 14px;
        font-size: 12.5px;
    }
}

/* =============================================================
   STORE LAYOUT — Sidebar (desktop) + Top compact (mobile)
   ============================================================= */
.rollin-store-shell {
    padding: 32px 24px 80px;
    min-height: 70vh;
    max-width: 1320px;
    margin: 0 auto;
}

.rollin-store-wrap {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 32px;
    align-items: start;
}

/* Sidebar — sticky, sem scroll constraint (cresce naturalmente no flow da página).
   Antes tinha max-height: calc(100vh - 110px) + overflow-y: auto que dava aquele
   scroll feio interno. Agora a sticky position basta — o sidebar fica fixo no
   topo enquanto rola, mas sem cropping próprio. */
.rollin-store-aside {
    position: sticky;
    top: 88px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    /* sem max-height nem overflow-y — flow natural */
}

/* Força Poppins em todos os elementos do sidebar (alguns linkavam pra fonte
   sistema via inheritance Bootstrap em <a>/<nav>/<h4>) */
.rollin-store-aside,
.rollin-store-aside *,
.rollin-aside-block,
.rollin-aside-block *,
.rollin-aside-title,
.rollin-aside-link,
.rollin-aside-link *,
.rollin-aside-help,
.rollin-aside-help * {
    font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif !important;
}

.rollin-aside-block {
    background: #ffffff;
    border: 1px solid rgba(13, 10, 31, 0.08);
    border-radius: 16px;
    padding: 18px 16px;
    box-shadow: 0 1px 2px rgba(13, 10, 31, 0.04);
}
[data-theme="dark"] .rollin-aside-block {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: none;
}

.rollin-aside-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(13, 10, 31, 0.5);
    margin: 0 0 12px;
    padding: 0 6px;
}
.rollin-aside-title i,
.rollin-aside-title svg { width: 13px; height: 13px; opacity: 0.85; }
.rollin-aside-title-text { display: contents; }
[data-theme="dark"] .rollin-aside-title { color: rgba(255, 255, 255, 0.5); }

/* Desktop (≥992px): <details>/<summary> também colapsável.
   User decide quando abrir, igual mobile. Chevron visível, cursor pointer. */
@media (min-width: 992px) {
    .rollin-aside-block-collapsible {
        padding: 0;
        overflow: hidden;
    }
    .rollin-aside-block-collapsible > summary {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        padding: 14px 16px;
        margin: 0;
        cursor: pointer;
        list-style: none;
        user-select: none;
    }
    .rollin-aside-block-collapsible > summary::-webkit-details-marker { display: none; }
    .rollin-aside-block-collapsible > summary::marker { content: ''; }
    .rollin-aside-block-collapsible > summary:hover {
        background: rgba(138, 43, 214, 0.04);
    }
    [data-theme="dark"] .rollin-aside-block-collapsible > summary:hover {
        background: rgba(184, 85, 255, 0.06);
    }
    .rollin-aside-chev {
        flex-shrink: 0;
        opacity: 0.55;
        transition: transform 220ms cubic-bezier(.32,.72,0,1);
    }
    .rollin-aside-block-collapsible[open] > summary .rollin-aside-chev {
        transform: rotate(180deg);
    }
    .rollin-aside-block-collapsible[open] > .rollin-aside-nav {
        padding: 6px 10px 14px;
        border-top: 1px solid rgba(13, 10, 31, 0.06);
    }
    [data-theme="dark"] .rollin-aside-block-collapsible[open] > .rollin-aside-nav {
        border-top-color: rgba(255, 255, 255, 0.06);
    }
}

/* Action links (Domínio & Carrinho): com ícone à esquerda, estilo "ferramenta" */
.rollin-aside-link-action {
    gap: 10px !important;
}
.rollin-aside-link-action .rollin-aside-icon {
    width: 16px; height: 16px;
    flex-shrink: 0;
    opacity: 0.7;
    transition: opacity 0.15s ease;
}
.rollin-aside-link-action:hover .rollin-aside-icon { opacity: 1; }
.rollin-aside-link-action.is-active .rollin-aside-icon { opacity: 1; }
.rollin-aside-link-action span:not(.rollin-aside-badge) { flex: 1; }

.rollin-aside-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.rollin-aside-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 10px;
    color: rgba(13, 10, 31, 0.78);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.rollin-aside-link:hover {
    background: rgba(138, 43, 214, 0.08);
    color: #6a1ab0;
    text-decoration: none;
    transform: translateX(2px);
}
.rollin-aside-link.is-active {
    background: linear-gradient(135deg, #8a2bd6 0%, #6a1ab0 100%);
    color: #ffffff;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(138, 43, 214, 0.28);
}
.rollin-aside-link.is-active:hover {
    color: #ffffff;
    transform: none;
}
.rollin-aside-link.is-disabled {
    opacity: 0.45;
    pointer-events: none;
}
[data-theme="dark"] .rollin-aside-link { color: rgba(255, 255, 255, 0.78); }
[data-theme="dark"] .rollin-aside-link:hover {
    background: rgba(138, 43, 214, 0.18);
    color: #d8b8ff;
}

.rollin-aside-badge {
    font-size: 10px;
    font-weight: 800;
    padding: 2px 7px;
    background: rgba(138, 43, 214, 0.12);
    color: #6a1ab0;
    border-radius: 999px;
    line-height: 1.4;
}
.rollin-aside-link.is-active .rollin-aside-badge {
    background: rgba(255, 255, 255, 0.22);
    color: #ffffff;
}
[data-theme="dark"] .rollin-aside-badge {
    background: rgba(138, 43, 214, 0.22);
    color: #d8b8ff;
}

/* Help card no rodapé do sidebar */
.rollin-aside-help {
    background: linear-gradient(135deg, rgba(138, 43, 214, 0.08) 0%, rgba(1, 250, 213, 0.06) 100%);
    border: 1px solid rgba(138, 43, 214, 0.18);
    border-radius: 16px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
}
[data-theme="dark"] .rollin-aside-help {
    background: linear-gradient(135deg, rgba(138, 43, 214, 0.18) 0%, rgba(1, 250, 213, 0.08) 100%);
    border-color: rgba(138, 43, 214, 0.32);
}

.rollin-aside-help-icon {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    box-shadow: 0 2px 6px rgba(138, 43, 214, 0.18);
}
[data-theme="dark"] .rollin-aside-help-icon {
    background: rgba(255, 255, 255, 0.1);
    box-shadow: none;
}

.rollin-aside-help-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.rollin-aside-help-body strong {
    font-size: 13.5px;
    font-weight: 700;
    color: #0d0a1f;
}
.rollin-aside-help-body span {
    font-size: 12.5px;
    color: rgba(13, 10, 31, 0.65);
    line-height: 1.4;
}
[data-theme="dark"] .rollin-aside-help-body strong { color: #ffffff; }
[data-theme="dark"] .rollin-aside-help-body span { color: rgba(255, 255, 255, 0.65); }

.rollin-aside-help-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 16px;
    background: #6a1ab0;
    color: #ffffff;
    border: none;
    border-radius: 999px;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
[data-theme="dark"] .rollin-aside-help-cta { background: #8a2bd6; }
.rollin-aside-help-cta:hover {
    background: #5710a0;
    color: #ffffff;
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(106, 26, 176, 0.32);
}

/* Main */
.rollin-store-main {
    min-width: 0;
}

.rollin-store-pagehead {
    margin: 0 0 28px;
    padding: 0;
}
.rollin-store-pagetitle {
    font-size: clamp(24px, 3.4vw, 36px);
    font-weight: 800;
    letter-spacing: -0.022em;
    color: #0d0a1f;
    margin: 0 0 8px;
    line-height: 1.15;
}
[data-theme="dark"] .rollin-store-pagetitle { color: #ffffff; }
.rollin-store-pagedesc {
    color: rgba(13, 10, 31, 0.65);
    font-size: 15px;
    line-height: 1.55;
    margin: 0 0 16px;
    max-width: 640px;
}
[data-theme="dark"] .rollin-store-pagedesc { color: rgba(255, 255, 255, 0.65); }

.rollin-store-pagehead .rollin-trust-row {
    display: flex;
    justify-content: flex-start;
    margin-top: 14px;
}

/* Plans grid — máximo 3 colunas no desktop, 2 no tablet, 1 no mobile.
   `minmax(0, 1fr)` permite que cards encolham livremente sem overflow horizontal,
   diferente do `minmax(260px, 1fr)` antigo que causava clipping na 3a coluna. */
.rollin-plans-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    margin: 0 0 48px;
}
@media (max-width: 1100px) {
    .rollin-plans-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
    .rollin-plans-grid { grid-template-columns: 1fr; }
}

/* Group features (Incluso em todos os planos) */
.rollin-group-features {
    margin-top: 32px;
    padding: 28px;
    background: #ffffff;
    border: 1px solid rgba(13, 10, 31, 0.08);
    border-radius: 18px;
    box-shadow: 0 1px 2px rgba(13, 10, 31, 0.04);
}
[data-theme="dark"] .rollin-group-features {
    background: rgba(255, 255, 255, 0.03);
    border-color: rgba(255, 255, 255, 0.08);
    box-shadow: none;
}
.rollin-section-title {
    font-size: 18px;
    font-weight: 700;
    color: #0d0a1f;
    margin: 0 0 18px;
    letter-spacing: -0.012em;
}
[data-theme="dark"] .rollin-section-title { color: #ffffff; }
.rollin-features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px 18px;
}
.rollin-feature-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: rgba(13, 10, 31, 0.78);
}
[data-theme="dark"] .rollin-feature-item { color: rgba(255, 255, 255, 0.78); }

/* =============================================================
   MOBILE — app-like (sidebar vira topo compact, scroll chips)
   ============================================================= */
@media (max-width: 991px) {
    .rollin-store-shell {
        padding: 16px 0 60px;
    }
    .rollin-store-wrap {
        grid-template-columns: minmax(0, 1fr);
        gap: 18px;
    }
    .rollin-store-aside {
        position: static;
        max-height: none;
        overflow: visible;
        padding: 0 16px;
        gap: 12px;
    }

    /* Mobile: blocks colapsáveis com dropdown nativo (<details>).
       Trocou scroll horizontal infame por dropdown UX-friendly. */
    .rollin-aside-block,
    .rollin-aside-block-collapsible {
        padding: 0;
        border-radius: 14px;
        overflow: hidden;
    }
    /* Summary clicável estilizado como botão de dropdown */
    .rollin-aside-block-collapsible > summary {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        padding: 14px 16px;
        margin: 0;
        cursor: pointer;
        list-style: none;
        user-select: none;
        -webkit-tap-highlight-color: transparent;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0.10em;
        text-transform: uppercase;
        color: rgba(13, 10, 31, 0.65);
    }
    [data-theme="dark"] .rollin-aside-block-collapsible > summary {
        color: rgba(255, 255, 255, 0.65);
    }
    .rollin-aside-block-collapsible > summary::-webkit-details-marker { display: none; }
    .rollin-aside-block-collapsible > summary::marker { content: ''; }
    .rollin-aside-title-text {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        flex: 1;
        min-width: 0;
    }
    .rollin-aside-title-text i,
    .rollin-aside-title-text svg { width: 14px; height: 14px; opacity: 0.9; flex-shrink: 0; }
    .rollin-aside-chev {
        flex-shrink: 0;
        opacity: 0.55;
        transition: transform 220ms cubic-bezier(.32,.72,0,1);
    }
    .rollin-aside-block-collapsible[open] > summary .rollin-aside-chev {
        transform: rotate(180deg);
    }
    /* Conteúdo: vertical stack, full-width, separador top */
    .rollin-aside-block-collapsible[open] > .rollin-aside-nav {
        flex-direction: column;
        gap: 4px;
        overflow: visible;
        margin: 0;
        padding: 6px 10px 14px;
        border-top: 1px solid rgba(13, 10, 31, 0.06);
    }
    [data-theme="dark"] .rollin-aside-block-collapsible[open] > .rollin-aside-nav {
        border-top-color: rgba(255, 255, 255, 0.06);
    }
    /* :not(.is-active) — preserva o gradient roxo + texto branco do
       link atualmente selecionado. Sem isso o item current ficava com
       background transparent e parecia uma caixa vazia. */
    .rollin-aside-block-collapsible .rollin-aside-link:not(.is-active) {
        flex: 0 0 auto;
        padding: 11px 14px;
        font-size: 14px;
        border-radius: 10px;
        background: transparent;
        border: none;
        color: rgba(13, 10, 31, 0.78);
    }
    [data-theme="dark"] .rollin-aside-block-collapsible .rollin-aside-link:not(.is-active) {
        color: rgba(255, 255, 255, 0.78);
    }
    .rollin-aside-block-collapsible .rollin-aside-link:not(.is-active):hover {
        background: rgba(138, 43, 214, 0.06);
        color: #6a1ab0;
        transform: none;
    }
    [data-theme="dark"] .rollin-aside-block-collapsible .rollin-aside-link:not(.is-active):hover {
        background: rgba(184, 85, 255, 0.10);
        color: #b855ff;
    }
    /* Item ativo: mantém gradient roxo + ajusta padding pra match os outros */
    .rollin-aside-block-collapsible .rollin-aside-link.is-active {
        padding: 11px 14px;
        font-size: 14px;
        border-radius: 10px;
        margin: 2px 4px;
    }

    /* Mantém suporte legado pros .rollin-aside-block que NÃO viraram details
       (caso exista algum em outra página) — chips horizontais com scroll. */
    .rollin-aside-block:not(.rollin-aside-block-collapsible) {
        padding: 14px 14px 12px;
    }
    .rollin-aside-block:not(.rollin-aside-block-collapsible) > .rollin-aside-title {
        margin-bottom: 10px;
    }
    .rollin-aside-block:not(.rollin-aside-block-collapsible) > .rollin-aside-nav {
        flex-direction: row;
        gap: 8px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        margin: 0 -14px;
        padding: 2px 14px;
    }
    .rollin-aside-block:not(.rollin-aside-block-collapsible) > .rollin-aside-nav::-webkit-scrollbar { display: none; }
    .rollin-aside-block:not(.rollin-aside-block-collapsible) .rollin-aside-link {
        flex: 0 0 auto;
        scroll-snap-align: start;
        padding: 9px 14px;
        font-size: 13px;
        border: 1px solid rgba(13, 10, 31, 0.08);
        background: rgba(13, 10, 31, 0.02);
        border-radius: 999px;
    }
    [data-theme="dark"] .rollin-aside-block:not(.rollin-aside-block-collapsible) .rollin-aside-link {
        background: rgba(255, 255, 255, 0.04);
        border-color: rgba(255, 255, 255, 0.08);
    }
    .rollin-aside-block:not(.rollin-aside-block-collapsible) .rollin-aside-link:hover { transform: none; }

    /* Help card: horizontal compact card */
    .rollin-aside-help {
        flex-direction: row;
        align-items: center;
        padding: 12px 14px;
    }
    .rollin-aside-help-body { flex: 1; }
    .rollin-aside-help-cta { white-space: nowrap; }

    /* Main */
    .rollin-store-main { padding: 0 16px; }
    .rollin-store-pagehead { margin-bottom: 20px; }
    .rollin-store-pagetitle { font-size: 24px; }
    .rollin-store-pagedesc { font-size: 14px; }

    .rollin-plans-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
        margin-bottom: 32px;
    }

    .rollin-group-features { padding: 20px 18px; border-radius: 14px; }
    .rollin-features-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 480px) {
    .rollin-store-pagetitle { font-size: 22px; }
    .rollin-store-pagehead .rollin-trust-row {
        gap: 14px;
        flex-wrap: wrap;
    }
}

/* =============================================================
   Card de plano — refinamento premium (tagline, price-row, CTA arrow)
   ============================================================= */

.rollin-plan-tagline {
    margin: 6px 0 0;
    font-size: 13px;
    line-height: 1.45;
    color: rgba(13, 10, 31, 0.55);
    font-weight: 500;
}
[data-theme="dark"] .rollin-plan-tagline { color: rgba(255, 255, 255, 0.55); }

.rollin-plan-price-row {
    display: flex;
    align-items: baseline;
    gap: 4px;
    flex-wrap: wrap;
}

.rollin-plan-feature-text {
    flex: 1;
    min-width: 0;
}

/* CTA com seta animada (mesmo hover/states do .rollin-plan-cta atual) */
.rollin-plan-cta {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.rollin-plan-cta-arrow {
    display: inline-block;
    transition: transform 180ms cubic-bezier(.2,.7,.2,1);
    font-size: 1.05em;
    line-height: 1;
}
.rollin-plan-cta:hover .rollin-plan-cta-arrow {
    transform: translateX(3px);
}

/* Featured: ribbon ainda mais visível */
.rollin-plan-card.featured {
    padding-top: 36px;
}
.rollin-plan-card.featured .rollin-plan-name {
    background: linear-gradient(135deg, #6a1ab0 0%, #8a2bd6 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
[data-theme="dark"] .rollin-plan-card.featured .rollin-plan-name {
    background: linear-gradient(135deg, #c89bff 0%, #b97aff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Cycle alinhado com baseline do preço */
.rollin-plan-price-row .rollin-plan-cycle {
    margin-left: 0;
}

/* =============================================================================
   ============================================================================
   DOMAIN REGISTER PAGE — checker, results, spotlight, suggestions, pricing
   ============================================================================
   ============================================================================= */

/* ----- DOMAIN CHECKER (input row) ----- */
.rollin-domain-checker {
    max-width: 720px;
    margin: 0 auto;
    padding: 24px;
    border-radius: 16px;
    background: var(--bg-glass);
    border: 1px solid var(--border-subtle);
    /* backdrop-filter removido — perf killer */
    /* -webkit-backdrop-filter removido */
}
[data-theme="dark"] .rollin-domain-checker {
    background: rgba(31, 0, 64, 0.5);
    border-color: rgba(255, 255, 255, 0.08);
}
[data-theme="light"] .rollin-domain-checker {
    background: #ffffff;
    border-color: rgba(13, 10, 31, 0.08);
    box-shadow: 0 4px 20px rgba(13, 10, 31, 0.06);
}

.rollin-domain-checker-form { width: 100%; }

.rollin-domain-input {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0;
    background: var(--bg-card);
    border: 1px solid var(--border-default);
    border-radius: 999px;
    padding: 4px 4px 4px 18px;
    transition: border-color 160ms ease, box-shadow 160ms ease;
}
[data-theme="dark"] .rollin-domain-input {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.10);
}
[data-theme="light"] .rollin-domain-input {
    background: #fafafc;
    border-color: rgba(13, 10, 31, 0.12);
}
.rollin-domain-input:focus-within {
    border-color: var(--rh-purple);
    box-shadow: 0 0 0 3px rgba(138, 43, 214, 0.18);
}
.rollin-domain-input > i,
.rollin-domain-input > svg {
    width: 18px; height: 18px;
    flex-shrink: 0;
    color: var(--text-muted);
}
.rollin-domain-input input.form-control {
    flex: 1 1 auto !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 12px 12px !important;
    font-size: 15px !important;
    height: auto !important;
    color: var(--text-primary) !important;
}
.rollin-domain-input input.form-control:focus { box-shadow: none !important; }
.rollin-domain-input button.domain-check-availability,
.rollin-domain-input #btnCheckAvailability {
    flex-shrink: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 10px 22px !important;
    border-radius: 999px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    background: var(--rh-purple) !important;
    color: #ffffff !important;
    border: none !important;
    cursor: pointer !important;
    transition: background 160ms ease, transform 120ms ease !important;
}
.rollin-domain-input button:hover { background: var(--rh-purple-deep) !important; transform: translateY(-1px); }
.rollin-domain-input button i, .rollin-domain-input button svg { width: 16px; height: 16px; }

@media (max-width: 640px) {
    .rollin-domain-checker { padding: 18px; }
    .rollin-domain-input {
        flex-direction: column;
        align-items: stretch;
        border-radius: 14px;
        padding: 8px;
        gap: 6px;
    }
    .rollin-domain-input input.form-control { padding: 12px 14px !important; }
    .rollin-domain-input button { width: 100%; justify-content: center; }
    .rollin-domain-input > i, .rollin-domain-input > svg { display: none; }
}

/* ----- DOMAIN SEARCH RESULT (primary lookup) ----- */
.rollin-domain-result {
    max-width: 720px;
    margin: 16px auto 0;
    padding: 22px;
    border-radius: 16px;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    text-align: center;
}
[data-theme="dark"] .rollin-domain-result {
    background: rgba(31, 0, 64, 0.4);
    border-color: rgba(255, 255, 255, 0.08);
}
[data-theme="light"] .rollin-domain-result {
    background: #ffffff;
    border-color: rgba(13, 10, 31, 0.08);
    box-shadow: 0 1px 2px rgba(13, 10, 31, 0.04);
}
.rollin-domain-result p { margin: 0 0 8px; }
.rollin-domain-result .domain-available {
    color: #01fad5;
    font-weight: 600;
    font-size: 17px;
}
[data-theme="light"] .rollin-domain-result .domain-available { color: #00a896; }
.rollin-domain-result .domain-available i,
.rollin-domain-result .domain-unavailable i,
.rollin-domain-result .domain-tld-unavailable i,
.rollin-domain-result .domain-invalid i {
    width: 18px; height: 18px; vertical-align: -3px; margin-right: 4px;
}
.rollin-domain-result .domain-unavailable,
.rollin-domain-result .domain-tld-unavailable,
.rollin-domain-result .domain-invalid {
    color: #fb923c;
    font-weight: 600;
}
.rollin-domain-result .domain-price {
    display: flex; align-items: center; justify-content: center; gap: 14px;
    margin-top: 14px; flex-wrap: wrap;
}
.rollin-domain-result .domain-price .price {
    font-size: 22px; font-weight: 800;
    color: var(--rh-purple);
}
[data-theme="dark"] .rollin-domain-result .domain-price .price { color: #b855ff; }
.rollin-domain-result .btn-add-to-cart {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 20px;
    background: var(--rh-purple);
    color: #ffffff; border: none; border-radius: 999px;
    font-weight: 600; cursor: pointer;
    transition: background 160ms ease, transform 120ms ease;
}
.rollin-domain-result .btn-add-to-cart:hover { background: var(--rh-purple-deep); transform: translateY(-1px); }

/* ----- SPOTLIGHT TLDs (.com, .com.br, .net, etc) ----- */
.rollin-spotlight-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
    max-width: 980px;
    margin: 28px auto 0;
}
.rollin-spotlight-card {
    position: relative;
    padding: 22px 18px;
    border-radius: 14px;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    text-align: center;
    transition: transform 200ms ease, border-color 200ms ease, background 200ms ease;
}
[data-theme="dark"] .rollin-spotlight-card {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
}
[data-theme="light"] .rollin-spotlight-card {
    background: #ffffff;
    border-color: rgba(13, 10, 31, 0.08);
    box-shadow: 0 1px 2px rgba(13, 10, 31, 0.04);
}
.rollin-spotlight-card:hover {
    transform: translateY(-3px);
    border-color: rgba(138, 43, 214, 0.40);
}
.rollin-spotlight-tld {
    font-family: 'JetBrains Mono', 'SF Mono', Consolas, monospace;
    font-size: 22px; font-weight: 800;
    color: var(--rh-purple);
    margin-bottom: 12px;
}
[data-theme="dark"] .rollin-spotlight-tld { color: #b855ff; }
.rollin-spotlight-badge {
    position: absolute; top: 8px; right: 8px;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.05em;
}
.spotlight-tld-hot { background: rgba(249,115,22,0.15); color: #fb923c; border: 1px solid rgba(249,115,22,0.30); }
.spotlight-tld-new { background: rgba(1,250,213,0.12); color: #01fad5; border: 1px solid rgba(1,250,213,0.30); }
.spotlight-tld-sale { background: rgba(138,43,214,0.15); color: #b855ff; border: 1px solid rgba(138,43,214,0.30); }
.rollin-spotlight-card .price {
    font-size: 16px; font-weight: 700;
    color: var(--text-primary);
    display: block; margin: 4px 0 10px;
}
.rollin-spotlight-card .btn {
    width: 100%; padding: 8px 12px; font-size: 13px;
    border-radius: 999px;
}
.rollin-spotlight-card .btn-primary {
    background: var(--rh-purple) !important; color: #ffffff !important; border: none !important;
}
.rollin-spotlight-card .btn-ghost {
    background: transparent !important;
    border: 1px solid var(--border-default) !important;
    color: var(--text-muted) !important;
}

/* ----- DOMAIN SUGGESTIONS list ----- */
.rollin-domain-suggestions,
.rollin-domain-suggestions h3,
.rollin-domain-suggestions p,
.rollin-domain-suggestions span,
.rollin-domain-suggestions a,
.rollin-domain-suggestions button,
.rollin-domain-suggestions .btn {
    font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif !important;
}
/* Apenas o nome do domínio mantém mono */
.rollin-domain-suggestions .rollin-suggestion-name,
.rollin-domain-suggestions .rollin-suggestion-name span {
    font-family: 'JetBrains Mono','SF Mono',Consolas,monospace !important;
}
.rollin-domain-suggestions {
    max-width: 980px;
    margin: 32px auto 0;
    border-radius: 16px;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    overflow: hidden;
}
[data-theme="dark"] .rollin-domain-suggestions {
    background: rgba(31,0,64,0.40);
    border-color: rgba(255,255,255,0.08);
}
[data-theme="light"] .rollin-domain-suggestions {
    background: #ffffff;
    border-color: rgba(13,10,31,0.08);
    box-shadow: 0 1px 2px rgba(13,10,31,0.04);
}
.rollin-domain-suggestions-head {
    display: flex; align-items: center; gap: 10px;
    padding: 18px 22px;
    border-bottom: 1px solid var(--border-subtle);
}
[data-theme="dark"] .rollin-domain-suggestions-head { border-bottom-color: rgba(255,255,255,0.06); }
[data-theme="light"] .rollin-domain-suggestions-head { border-bottom-color: rgba(13,10,31,0.06); }
.rollin-domain-suggestions-head h3 {
    margin: 0; font-size: 16px; font-weight: 700;
    color: var(--text-primary);
}
.rollin-domain-suggestions-head i { width: 18px; height: 18px; color: var(--rh-purple); }
.rollin-suggestions-loader {
    text-align: center; padding: 40px 20px;
    color: var(--text-muted);
}
/* IMPORTANTE: NUNCA usar !important em `display` aqui — antler usa
   inline style="display:none" no template + clones >10, e .show() limpa
   o inline. !important em CSS bloquearia esse mecanismo, fazendo TODOS
   os clones aparecerem (perdia o cap de 10 do antler).
   Usamos especificidade 0,2,0 (.rollin-domain-suggestions + classe) para
   vencer .list-group-item (0,1,0) do Bootstrap e .suggested-domains .actions
   (0,2,0) do antler (sai por source order — nosso CSS carrega depois). */
.rollin-domain-suggestions .rollin-suggestion-item {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 12px;
    padding: 14px 22px;
    border-bottom: 1px solid var(--border-subtle);
    transition: background 160ms ease;
    background: transparent;
}
.rollin-domain-suggestions .rollin-suggestion-name {
    flex: 1 1 auto;
    min-width: 0;
}
.rollin-domain-suggestions .rollin-suggestion-actions {
    flex: 0 0 auto;
    float: none; /* anula .suggested-domains .actions { float: right } do antler */
}
/* Limita a 10 sugestões — esconde o botão "carregar mais" */
.rollin-suggestions-more,
#domainSuggestions ~ .more-suggestions,
.suggested-domains .more-suggestions { display: none !important; }
[data-theme="dark"] .rollin-suggestion-item { border-bottom-color: rgba(255,255,255,0.05) !important; }
[data-theme="light"] .rollin-suggestion-item { border-bottom-color: rgba(13,10,31,0.05) !important; }
.rollin-suggestion-item:last-child { border-bottom: none !important; }
[data-theme="dark"] .rollin-suggestion-item:hover { background: rgba(138,43,214,0.06) !important; }
[data-theme="light"] .rollin-suggestion-item:hover { background: rgba(106,26,176,0.04) !important; }
.rollin-suggestion-name {
    font-family: 'JetBrains Mono','SF Mono',Consolas,monospace;
    font-size: 15px; font-weight: 600;
    color: var(--text-primary);
    word-break: break-all;
}
/* Garante visibilidade das spans (antler popula via .html()) — evita conflito
   com regras Bootstrap/antler que possam tentar esconder ou mudar display */
.rollin-suggestion-name .domain,
.rollin-suggestion-name .extension {
    display: inline !important;
    visibility: visible !important;
    opacity: 1 !important;
}
.rollin-suggestion-name .domain { color: var(--text-primary); }
.rollin-suggestion-name .extension { color: var(--rh-purple); font-weight: 700; }
[data-theme="dark"] .rollin-suggestion-name .extension { color: #b855ff; }

/* Disclaimer dentro do panel de sugestões — fix de overflow no rodapé.
   .rollin-domain-input-hint base é display:flex (pra suportar ícones em
   outros contextos), mas no panel de sugestões precisa ser block + padding
   pro texto não sair cortado pelo overflow:hidden do panel. */
.rollin-domain-suggestions .rollin-domain-input-hint {
    display: block !important;
    padding: 14px 22px 18px;
    margin: 0;
    text-align: left;
}
.rollin-suggestion-promo {
    display: inline-flex; gap: 4px; margin-left: 8px;
    font-size: 10px; text-transform: uppercase; font-weight: 700;
}
.rollin-suggestion-promo .sales-group-hot { color: #fb923c; }
.rollin-suggestion-promo .sales-group-new { color: #01fad5; }
.rollin-suggestion-promo .sales-group-sale { color: #b855ff; }
.rollin-suggestion-actions {
    display: flex; align-items: center; gap: 10px;
}
.rollin-suggestion-actions .price {
    font-weight: 700; color: var(--text-primary);
    font-size: 14px;
}
.rollin-suggestion-actions .btn {
    padding: 8px 16px; font-size: 13px; font-weight: 600;
    border-radius: 999px;
}
.rollin-suggestions-more {
    text-align: center; padding: 14px 20px;
    border-top: 1px solid var(--border-subtle);
}
[data-theme="dark"] .rollin-suggestions-more { border-top-color: rgba(255,255,255,0.06); }
[data-theme="light"] .rollin-suggestions-more { border-top-color: rgba(13,10,31,0.06); }
.rollin-suggestions-more a {
    color: var(--rh-purple); font-weight: 600; text-decoration: none;
    display: inline-flex; align-items: center; gap: 6px;
}
[data-theme="dark"] .rollin-suggestions-more a { color: #b855ff; }

/* ----- FEATURED TLDs (logo grid) ----- */
.rollin-featured-tlds {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
    max-width: 980px;
    margin: 0 auto;
}
.rollin-featured-tld {
    padding: 16px 12px;
    border-radius: 12px;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    text-align: center;
    transition: transform 180ms ease;
}
[data-theme="dark"] .rollin-featured-tld {
    background: rgba(255,255,255,0.03);
    border-color: rgba(255,255,255,0.06);
}
[data-theme="light"] .rollin-featured-tld {
    background: #ffffff;
    border-color: rgba(13,10,31,0.06);
}
.rollin-featured-tld:hover { transform: translateY(-2px); }
.rollin-featured-tld-img img { max-width: 50px; height: auto; opacity: 0.9; }
.rollin-featured-tld-price {
    margin-top: 8px;
    font-size: 13px;
    color: var(--text-secondary);
}
.rollin-featured-tld-price strong {
    display: block; font-size: 16px; color: var(--text-primary);
}
.rollin-featured-tld-price small { color: var(--text-muted); font-size: 11px; }

/* ----- TLD CATEGORY FILTERS ----- */
.rollin-tld-filters {
    display: inline-flex; flex-wrap: wrap;
    gap: 8px; justify-content: center;
    margin-top: 12px;
}
.rollin-tld-filter {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 16px;
    border-radius: 999px;
    font-size: 13px; font-weight: 500;
    text-decoration: none;
    transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}
[data-theme="dark"] .rollin-tld-filter {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.70);
}
[data-theme="dark"] .rollin-tld-filter:hover,
[data-theme="dark"] .rollin-tld-filter.active {
    background: rgba(138,43,214,0.20);
    border-color: rgba(138,43,214,0.45);
    color: #ffffff;
}
[data-theme="light"] .rollin-tld-filter {
    background: #ffffff;
    border: 1px solid rgba(13,10,31,0.10);
    color: rgba(13,10,31,0.70);
}
[data-theme="light"] .rollin-tld-filter:hover,
[data-theme="light"] .rollin-tld-filter.active {
    background: rgba(106,26,176,0.10);
    border-color: rgba(106,26,176,0.40);
    color: #4a0e80;
}
.rollin-tld-filter-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 22px; height: 18px;
    padding: 0 6px;
    border-radius: 999px;
    background: rgba(138,43,214,0.18);
    color: #b855ff;
    font-size: 11px; font-weight: 700;
}
[data-theme="light"] .rollin-tld-filter-count {
    background: rgba(106,26,176,0.10);
    color: #4a0e80;
}

/* ----- PRICING TABLE ----- */
.rollin-table-wrap {
    border-radius: 16px;
    overflow: hidden;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    max-width: 980px; margin: 0 auto;
}
[data-theme="dark"] .rollin-table-wrap {
    background: rgba(31,0,64,0.40);
    border-color: rgba(255,255,255,0.08);
}
[data-theme="light"] .rollin-table-wrap {
    background: #ffffff;
    border-color: rgba(13,10,31,0.08);
    box-shadow: 0 1px 2px rgba(13,10,31,0.04);
}
.rollin-table-scroll { overflow-x: auto; }
.rollin-table.table {
    width: 100%; margin: 0; border: none;
    background: transparent;
}
.rollin-table thead th {
    padding: 14px 18px;
    font-size: 11px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.06em;
    text-align: left;
    border-bottom: 1px solid var(--border-subtle);
}
[data-theme="dark"] .rollin-table thead th {
    background: rgba(255,255,255,0.02);
    color: rgba(255,255,255,0.55);
    border-bottom-color: rgba(255,255,255,0.06);
}
[data-theme="light"] .rollin-table thead th {
    background: #fafafc;
    color: rgba(13,10,31,0.55);
    border-bottom-color: rgba(13,10,31,0.08);
}
.rollin-table tbody td {
    padding: 14px 18px;
    font-size: 14px;
    border-bottom: 1px solid var(--border-subtle);
    color: var(--text-primary);
}
[data-theme="dark"] .rollin-table tbody td { border-bottom-color: rgba(255,255,255,0.04); }
[data-theme="light"] .rollin-table tbody td { border-bottom-color: rgba(13,10,31,0.05); }
.rollin-table tbody tr:last-child td { border-bottom: none; }
[data-theme="dark"] .rollin-table tbody tr:hover { background: rgba(138,43,214,0.05); }
[data-theme="light"] .rollin-table tbody tr:hover { background: rgba(106,26,176,0.03); }
.rollin-tld-sale-group {
    display: inline-block; margin-left: 8px;
    padding: 2px 8px; border-radius: 999px;
    font-size: 10px; font-weight: 700; text-transform: uppercase;
}
.tld-sale-group-hot { background: rgba(249,115,22,0.15); color: #fb923c; }
.tld-sale-group-new { background: rgba(1,250,213,0.12); color: #01fad5; }
.tld-sale-group-sale { background: rgba(138,43,214,0.15); color: #b855ff; }

/* ----- DOMAIN PROMO BOXES (Adicionar Hospedagem / Transferir Domínio) -----
   Padrão idêntico aos dept cards: roxo da marca, theme-agnostic, sem rosa/ciano. */
.rollin-domain-promo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 14px;
    margin: 28px auto 0;
    max-width: 980px;
}
.rollin-domain-promo {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 22px 26px;
    border-radius: 16px;
    border: 1px solid;
    text-decoration: none !important;
    transition: transform 200ms ease, border-color 200ms ease, background 200ms ease, box-shadow 200ms ease;
    position: relative;
    overflow: hidden;
}
[data-theme="dark"] .rollin-domain-promo {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
    color: #ffffff !important;
}
[data-theme="light"] .rollin-domain-promo {
    background: #ffffff;
    border-color: rgba(13, 10, 31, 0.08);
    color: #0d0a1f !important;
    box-shadow: 0 1px 2px rgba(13, 10, 31, 0.04);
}
.rollin-domain-promo:hover {
    transform: translateY(-3px);
}
[data-theme="dark"] .rollin-domain-promo:hover {
    border-color: rgba(138, 43, 214, 0.45);
    background: rgba(255, 255, 255, 0.06);
}
[data-theme="light"] .rollin-domain-promo:hover {
    border-color: rgba(106, 26, 176, 0.35);
    box-shadow: 0 12px 28px rgba(13, 10, 31, 0.10);
}

/* Top accent bar — gradiente roxo, aparece no hover */
.rollin-domain-promo::before {
    content: '';
    position: absolute;
    top: 0; right: 0; left: 0;
    height: 3px;
    background: linear-gradient(90deg, #b855ff 0%, #6a1ab0 100%);
    opacity: 0;
    transition: opacity 200ms ease;
}
.rollin-domain-promo:hover::before { opacity: 1; }

/* Ícone do card — roxo translúcido, vira sólido no hover */
.rollin-domain-promo-icon {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 200ms ease, color 200ms ease, transform 200ms ease;
}
[data-theme="dark"] .rollin-domain-promo-icon {
    background: rgba(138, 43, 214, 0.14);
    color: #b855ff;
}
[data-theme="light"] .rollin-domain-promo-icon {
    background: rgba(106, 26, 176, 0.10);
    color: #6a1ab0;
}
[data-theme="dark"] .rollin-domain-promo:hover .rollin-domain-promo-icon {
    background: #b855ff;
    color: #ffffff;
    transform: rotate(-4deg) scale(1.05);
}
[data-theme="light"] .rollin-domain-promo:hover .rollin-domain-promo-icon {
    background: #6a1ab0;
    color: #ffffff;
    transform: rotate(-4deg) scale(1.05);
}
.rollin-domain-promo-icon i,
.rollin-domain-promo-icon svg {
    width: 24px;
    height: 24px;
}

.rollin-domain-promo-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.rollin-domain-promo-body h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.01em;
}
.rollin-domain-promo-body strong {
    font-size: 14px;
    font-weight: 600;
}
[data-theme="dark"] .rollin-domain-promo-body strong { color: rgba(255, 255, 255, 0.85); }
[data-theme="light"] .rollin-domain-promo-body strong { color: rgba(13, 10, 31, 0.85); }
.rollin-domain-promo-body p {
    margin: 0;
    font-size: 12px;
    line-height: 1.5;
}
[data-theme="dark"] .rollin-domain-promo-body p { color: rgba(255, 255, 255, 0.60); }
[data-theme="light"] .rollin-domain-promo-body p { color: rgba(13, 10, 31, 0.60); }

/* Arrow lateral — roxo, anima no hover */
.rollin-domain-promo-arrow {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    transition: transform 200ms ease, color 200ms ease;
}
[data-theme="dark"] .rollin-domain-promo-arrow { color: #b855ff; }
[data-theme="light"] .rollin-domain-promo-arrow { color: #6a1ab0; }
.rollin-domain-promo:hover .rollin-domain-promo-arrow {
    transform: translateX(6px);
}

@media (max-width: 640px) {
    .rollin-domain-promo {
        padding: 18px;
    }
    .rollin-domain-promo-arrow { display: none; }
}

/* =============================================================================
   ============================================================================
   CONFIGURE PRODUCT DOMAIN — passo 2 (escolha de domínio)
   ============================================================================
   ============================================================================= */

.rollin-domain-page {
    max-width: 920px;
    margin: 0 auto;
    padding: 32px 16px 80px;
    box-sizing: border-box;
}
.rollin-domain-inner {
    width: 100%;
}

.rollin-domain-hero {
    text-align: center;
    margin-bottom: 36px;
}
.rollin-domain-hero .rollin-eyebrow {
    margin-bottom: 12px;
}
.rollin-domain-hero-title {
    font-size: clamp(28px, 4vw, 38px);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin: 0 0 12px;
}
[data-theme="dark"] .rollin-domain-hero-title { color: #ffffff; }
[data-theme="light"] .rollin-domain-hero-title { color: #0d0a1f; }
.rollin-domain-hero-subtitle {
    font-size: 15px;
    line-height: 1.55;
    max-width: 580px;
    margin: 0 auto;
}
[data-theme="dark"] .rollin-domain-hero-subtitle { color: rgba(255, 255, 255, 0.65); }
[data-theme="light"] .rollin-domain-hero-subtitle { color: rgba(13, 10, 31, 0.65); }

/* RADIO CARDS */
.rollin-domain-choices {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-bottom: 28px;
}
.rollin-domain-choice {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 20px;
    border-radius: 14px;
    border: 1px solid;
    cursor: pointer;
    transition: transform 180ms ease, border-color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}
[data-theme="dark"] .rollin-domain-choice {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.10);
    color: #ffffff;
}
[data-theme="light"] .rollin-domain-choice {
    background: #ffffff;
    border-color: rgba(13, 10, 31, 0.10);
    color: #0d0a1f;
    box-shadow: 0 1px 2px rgba(13, 10, 31, 0.04);
}
.rollin-domain-choice:hover { transform: translateY(-2px); }
[data-theme="dark"] .rollin-domain-choice:hover { border-color: rgba(138, 43, 214, 0.40); background: rgba(255, 255, 255, 0.06); }
[data-theme="light"] .rollin-domain-choice:hover { border-color: rgba(106, 26, 176, 0.30); box-shadow: 0 8px 20px rgba(13, 10, 31, 0.08); }

.rollin-domain-choice input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 1px; height: 1px;
}
.rollin-domain-choice.option-selected {
    border-width: 2px;
    padding: 17px 19px;
}
[data-theme="dark"] .rollin-domain-choice.option-selected {
    border-color: #b855ff;
    background: rgba(138, 43, 214, 0.12);
}
[data-theme="light"] .rollin-domain-choice.option-selected {
    border-color: #6a1ab0;
    background: rgba(106, 26, 176, 0.04);
    box-shadow: 0 4px 16px rgba(106, 26, 176, 0.12);
}

.rollin-domain-choice-icon {
    flex-shrink: 0;
    width: 48px; height: 48px;
    border-radius: 12px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(138, 43, 214, 0.14);
    color: #b855ff;
    transition: background 180ms ease, color 180ms ease, transform 200ms ease;
}
[data-theme="light"] .rollin-domain-choice-icon { background: rgba(106, 26, 176, 0.10); color: #6a1ab0; }
.rollin-domain-choice-icon i, .rollin-domain-choice-icon svg { width: 22px; height: 22px; }
.rollin-domain-choice-icon--cyan { background: rgba(1, 250, 213, 0.12); color: #01fad5; }
[data-theme="light"] .rollin-domain-choice-icon--cyan { background: rgba(0, 168, 150, 0.10); color: #006d5b; }
.rollin-domain-choice-icon--orange { background: rgba(249, 115, 22, 0.14); color: #fb923c; }
[data-theme="light"] .rollin-domain-choice-icon--orange { background: rgba(249, 115, 22, 0.10); color: #c2410c; }

.rollin-domain-choice.option-selected .rollin-domain-choice-icon {
    transform: rotate(-4deg) scale(1.05);
}
[data-theme="dark"] .rollin-domain-choice.option-selected .rollin-domain-choice-icon { background: #b855ff; color: #ffffff; }
[data-theme="light"] .rollin-domain-choice.option-selected .rollin-domain-choice-icon { background: #6a1ab0; color: #ffffff; }

.rollin-domain-choice-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.rollin-domain-choice-body strong { font-size: 15px; font-weight: 700; line-height: 1.3; }
.rollin-domain-choice-body em { font-size: 13px; font-style: normal; line-height: 1.45; }
[data-theme="dark"] .rollin-domain-choice-body em { color: rgba(255, 255, 255, 0.60); }
[data-theme="light"] .rollin-domain-choice-body em { color: rgba(13, 10, 31, 0.60); }

.rollin-domain-choice-check {
    flex-shrink: 0;
    width: 24px; height: 24px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    border: 2px solid;
    transition: background 180ms ease, border-color 180ms ease;
}
[data-theme="dark"] .rollin-domain-choice-check { border-color: rgba(255, 255, 255, 0.20); }
[data-theme="light"] .rollin-domain-choice-check { border-color: rgba(13, 10, 31, 0.18); }
.rollin-domain-choice-check i, .rollin-domain-choice-check svg { width: 14px; height: 14px; opacity: 0; color: #ffffff; }
[data-theme="dark"] .rollin-domain-choice.option-selected .rollin-domain-choice-check { background: #b855ff; border-color: #b855ff; }
[data-theme="light"] .rollin-domain-choice.option-selected .rollin-domain-choice-check { background: #6a1ab0; border-color: #6a1ab0; }
.rollin-domain-choice.option-selected .rollin-domain-choice-check i,
.rollin-domain-choice.option-selected .rollin-domain-choice-check svg { opacity: 1; }

/* INPUT DINÂMICO */
.rollin-domain-inputs { margin-bottom: 24px; }
/* Wrapper SEM border/card — evita "rings nested". Apenas spacing.
   A única borda visual é a do próprio input. */
.rollin-domain-input-group {
    display: none;
    padding: 0;
    border: none;
    background: transparent;
    box-shadow: none;
    overflow: visible;
}

.rollin-domain-input-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 12px;
}
[data-theme="dark"] .rollin-domain-input-label { color: rgba(255, 255, 255, 0.85); }
[data-theme="light"] .rollin-domain-input-label { color: rgba(13, 10, 31, 0.80); }
.rollin-domain-input-label i, .rollin-domain-input-label svg { width: 16px; height: 16px; color: #6a1ab0; }
[data-theme="dark"] .rollin-domain-input-label i, [data-theme="dark"] .rollin-domain-input-label svg { color: #b855ff; }

/* Layout: input independente (esquerda) + botão independente (direita) com gap.
   Sem wrapper border — elimina o efeito visual de "input dentro de input".
   IMPORTANTE: !important pra vencer a regra antiga em linha ~3100 que tem
   border + focus-within ring (era do domain-checker da página domainregister). */
.rollin-domain-input-group .rollin-domain-input,
.rollin-domain-inputs .rollin-domain-input {
    position: relative !important;
    display: flex !important;
    align-items: stretch !important;
    gap: 12px !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
}
.rollin-domain-input-group .rollin-domain-input:focus-within,
.rollin-domain-inputs .rollin-domain-input:focus-within {
    box-shadow: none !important;
    border: none !important;
}

/* Ícone prefix dentro do input — absolute pra não roubar largura */
.rollin-domain-input-prefix {
    position: absolute;
    top: 0;
    left: 18px;
    bottom: 0;
    width: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 2;
    font-size: 16px;
    font-weight: 600;
}
.rollin-domain-input-prefix i,
.rollin-domain-input-prefix svg {
    width: 18px !important;
    height: 18px !important;
}
[data-theme="dark"] .rollin-domain-input-prefix { color: rgba(255, 255, 255, 0.50); }
[data-theme="light"] .rollin-domain-input-prefix { color: rgba(13, 10, 31, 0.45); }

/* === Select "Escolha um domínio do carrinho" — visualmente um dropdown ====
   Wrapper dedicado em volta do <select> pra chevron ficar DENTRO da área
   visual do select (à direita do texto), não perdido perto do botão "Uso". */
.rh-cart-select-host {
    position: relative;
    flex: 1 1 auto;
    display: inline-flex;
    align-items: stretch;
    min-width: 0;
}
.rh-cart-select-chev {
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}
.rh-cart-select-chev i,
.rh-cart-select-chev svg {
    width: 18px; height: 18px;
}
html[data-theme="light"] .rh-cart-select-chev { color: rgba(13, 10, 31, 0.50); }
html[data-theme="dark"]  .rh-cart-select-chev { color: rgba(255, 255, 255, 0.55); }

/* Tira a setinha nativa, vai usar nossa (chevron Lucide à direita) */
.rh-cart-select,
select.rh-cart-select.rollin-domain-input-field {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    cursor: pointer;
    padding-right: 44px !important; /* espaço pro chevron interno */
    background-image: none !important;
    width: 100%;
}
/* Options — força cores legíveis em ambos os temas (Chrome/Firefox/Edge respeitam) */
.rh-cart-select option,
select.rollin-domain-cart-select option {
    background-color: #ffffff;
    color: #0d0a1f;
    font-family: 'JetBrains Mono', 'SF Mono', Consolas, monospace;
    padding: 10px 14px;
}
html[data-theme="dark"] .rh-cart-select option,
html[data-theme="dark"] select.rollin-domain-cart-select option {
    background-color: #1f0040;
    color: #ffffff;
}
.rh-cart-select option:checked,
.rh-cart-select option:hover,
select.rollin-domain-cart-select option:checked,
select.rollin-domain-cart-select option:hover {
    background-color: #6a1ab0;
    color: #ffffff;
}

/* Mobile: select host em flex column com botão abaixo */
@media (max-width: 640px) {
    .rh-cart-select-host { width: 100%; }
}

/* O input principal — UM único campo arredondado, padding limpo (sem prefix icon) */
.rollin-domain-input-field {
    flex: 1 1 auto !important;
    height: 56px !important;
    padding: 0 20px !important;
    border-radius: 14px !important;
    border: 1px solid !important;
    font-size: 15px !important;
    font-family: 'JetBrains Mono', 'SF Mono', Consolas, monospace !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    width: 100% !important;
    outline: none !important;
    transition: border-color 180ms ease, box-shadow 180ms ease, background 180ms ease !important;
}
[data-theme="dark"] .rollin-domain-input-field {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(255, 255, 255, 0.10) !important;
    color: #ffffff !important;
}
[data-theme="light"] .rollin-domain-input-field {
    background: #ffffff !important;
    border-color: rgba(13, 10, 31, 0.12) !important;
    color: #0d0a1f !important;
}
.rollin-domain-input-field:hover {
    border-color: rgba(106, 26, 176, 0.30) !important;
}
[data-theme="dark"] .rollin-domain-input-field:hover {
    border-color: rgba(184, 85, 255, 0.35) !important;
}
/* Focus: SÓ border-color (sem box-shadow ring) — elimina o efeito visual
   de "input dentro de input" que o focus ring de 3px criava */
.rollin-domain-input-field:focus {
    border-color: #6a1ab0 !important;
    border-width: 2px !important;
    padding: 0 19px !important;
    box-shadow: none !important;
}
[data-theme="dark"] .rollin-domain-input-field:focus {
    border-color: #b855ff !important;
    box-shadow: none !important;
}
.rollin-domain-input-field::placeholder {
    opacity: 0.50;
    font-family: inherit;
}

/* Hidden inputs/selects que o WHMCS scripts.min.js usa internamente */
.rollin-domain-tld-hidden {
    position: absolute !important;
    opacity: 0 !important;
    pointer-events: none !important;
    width: 1px !important;
    height: 1px !important;
}

/* Subdomain mode: select visível como segundo elemento */
.rollin-domain-subdomain-select {
    flex: 0 0 160px !important;
    height: 56px !important;
    padding: 0 14px !important;
    border-radius: 14px !important;
    border: 1px solid !important;
    font-size: 14px !important;
    font-family: 'JetBrains Mono', 'SF Mono', Consolas, monospace !important;
    box-sizing: border-box !important;
    cursor: pointer;
    outline: none !important;
}
[data-theme="dark"] .rollin-domain-subdomain-select {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: rgba(255, 255, 255, 0.10) !important;
    color: #ffffff !important;
}
[data-theme="light"] .rollin-domain-subdomain-select {
    background: #ffffff !important;
    border-color: rgba(13, 10, 31, 0.12) !important;
    color: #0d0a1f !important;
}

/* Cart select: usa o input field style mas é um select */
.rollin-domain-cart-select {
    padding-left: 20px !important;
    cursor: pointer;
}

/* Botão DIREITA — RUNDED COMPLETAMENTE, separado do input */
.rollin-domain-input-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 28px;
    height: 56px;
    background: #6a1ab0;
    color: #ffffff;
    border: none;
    border-radius: 14px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: background 160ms ease, transform 120ms ease, box-shadow 160ms ease;
    box-shadow: 0 4px 14px rgba(106, 26, 176, 0.25);
}
.rollin-domain-input-btn:hover {
    background: #5710a0;
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(106, 26, 176, 0.35);
}
[data-theme="dark"] .rollin-domain-input-btn {
    background: #8a2bd6;
    box-shadow: 0 4px 14px rgba(138, 43, 214, 0.30);
}
[data-theme="dark"] .rollin-domain-input-btn:hover {
    background: #6a1ab0;
    box-shadow: 0 8px 20px rgba(138, 43, 214, 0.40);
}
.rollin-domain-input-btn i,
.rollin-domain-input-btn svg {
    width: 16px;
    height: 16px;
}

/* TLD suggestion chips embaixo do input */
.rollin-domain-tld-suggest {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin: 14px 0 0;
    font-size: 12px;
}
[data-theme="dark"] .rollin-domain-tld-suggest { color: rgba(255, 255, 255, 0.60); }
[data-theme="light"] .rollin-domain-tld-suggest { color: rgba(13, 10, 31, 0.60); }
.rollin-domain-tld-suggest > i,
.rollin-domain-tld-suggest > svg {
    width: 14px; height: 14px;
    color: #fb923c;
}
[data-theme="dark"] .rollin-domain-tld-suggest > i,
[data-theme="dark"] .rollin-domain-tld-suggest > svg {
    color: #fdba74;
}
.rollin-domain-tld-chip {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 999px;
    border: 1px solid;
    font-family: 'JetBrains Mono', 'SF Mono', Consolas, monospace;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    background: transparent;
    transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}
[data-theme="dark"] .rollin-domain-tld-chip {
    border-color: rgba(184, 85, 255, 0.30);
    color: #b855ff;
}
[data-theme="dark"] .rollin-domain-tld-chip:hover {
    background: rgba(138, 43, 214, 0.18);
    border-color: rgba(184, 85, 255, 0.50);
}
[data-theme="light"] .rollin-domain-tld-chip {
    border-color: rgba(106, 26, 176, 0.25);
    color: #6a1ab0;
}
[data-theme="light"] .rollin-domain-tld-chip:hover {
    background: rgba(106, 26, 176, 0.08);
    border-color: rgba(106, 26, 176, 0.45);
    color: #4a0e80;
}

/* Alert de erro — banner clean com ícone + título + mensagem + close */
.rollin-domain-alert {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 18px;
    border-radius: 12px;
    border: 1px solid;
    margin: 0 0 24px;
    animation: rh-alert-in 220ms ease;
}
@keyframes rh-alert-in {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}
[data-theme="dark"] .rollin-domain-alert {
    background: rgba(220, 38, 38, 0.08);
    border-color: rgba(220, 38, 38, 0.30);
    color: #fca5a5;
}
[data-theme="light"] .rollin-domain-alert {
    background: rgba(220, 38, 38, 0.05);
    border-color: rgba(220, 38, 38, 0.25);
    color: #991b1b;
}
.rollin-domain-alert > i,
.rollin-domain-alert > svg {
    flex-shrink: 0;
    width: 22px; height: 22px;
    margin-top: 1px;
}
.rollin-domain-alert-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.rollin-domain-alert-body strong {
    font-size: 14px;
    font-weight: 700;
}
.rollin-domain-alert-body span {
    font-size: 13px;
    line-height: 1.5;
    opacity: 0.9;
}
.rollin-domain-alert-close {
    flex-shrink: 0;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 2px;
    color: inherit;
    opacity: 0.6;
    transition: opacity 140ms ease;
}
.rollin-domain-alert-close:hover { opacity: 1; }
.rollin-domain-alert-close i,
.rollin-domain-alert-close svg {
    width: 16px; height: 16px;
}

.rollin-domain-input-hint {
    display: flex; align-items: center; gap: 8px;
    margin: 12px 0 0;
    font-size: 12px; line-height: 1.5;
}
[data-theme="dark"] .rollin-domain-input-hint { color: rgba(255, 255, 255, 0.55); }
[data-theme="light"] .rollin-domain-input-hint { color: rgba(13, 10, 31, 0.60); }
.rollin-domain-input-hint i, .rollin-domain-input-hint svg { width: 14px; height: 14px; flex-shrink: 0; opacity: 0.7; }

.rollin-domain-free-hint {
    display: flex; align-items: center; gap: 10px;
    padding: 14px 18px;
    border-radius: 12px;
    margin: 0 0 24px;
    font-size: 13px; line-height: 1.5;
}
[data-theme="dark"] .rollin-domain-free-hint {
    background: rgba(1, 250, 213, 0.08);
    border: 1px solid rgba(1, 250, 213, 0.25);
    color: rgba(255, 255, 255, 0.85);
}
[data-theme="light"] .rollin-domain-free-hint {
    background: rgba(0, 168, 150, 0.06);
    border: 1px solid rgba(0, 168, 150, 0.25);
    color: rgba(13, 10, 31, 0.85);
}
.rollin-domain-free-hint strong { font-weight: 700; }
.rollin-domain-free-hint i, .rollin-domain-free-hint svg { width: 18px; height: 18px; flex-shrink: 0; color: #006d5b; }
[data-theme="dark"] .rollin-domain-free-hint i, [data-theme="dark"] .rollin-domain-free-hint svg { color: #01fad5; }

/* RESULTADOS */
.rollin-domain-results { margin-top: 32px; }
.rollin-domain-result-card {
    padding: 24px;
    border-radius: 16px;
    border: 1px solid;
    text-align: center;
    margin-bottom: 20px;
}
[data-theme="dark"] .rollin-domain-result-card {
    background: rgba(31, 0, 64, 0.40);
    border-color: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}
[data-theme="light"] .rollin-domain-result-card {
    background: #ffffff;
    border-color: rgba(13, 10, 31, 0.08);
    color: #0d0a1f;
    box-shadow: 0 1px 2px rgba(13, 10, 31, 0.04);
}
/* Esconde paragrafos de status por padrão — antler/scripts.js faz .show() conforme o resultado.
   Sem isso, ambos (.domain-available e .domain-unavailable) ficam visíveis e o
   placeholder ":domain" aparece literalmente.
   NOTA: NÃO incluir .domain-price aqui — ele é <div> e precisa de display:flex.
   Para esse, usar style="display:none" inline no TPL (jQuery .show() limpa o
   inline e cai pro CSS flex). */
.rollin-domain-result-card .domain-available,
.rollin-domain-result-card .domain-unavailable,
.rollin-domain-result-card .domain-tld-unavailable,
.rollin-domain-result-card .domain-invalid,
.rollin-domain-result-card .domain-error,
.rollin-domain-result-card .transfer-eligible,
.rollin-domain-result-card .transfer-not-eligible,
.rollin-domain-result-card .domain-contact-support {
    display: none;
}

.rollin-domain-result-card .domain-available { color: #006d5b; font-weight: 600; font-size: 17px; }
[data-theme="dark"] .rollin-domain-result-card .domain-available { color: #01fad5; }
.rollin-domain-result-card .domain-unavailable,
.rollin-domain-result-card .domain-checker-unavailable { color: #c2410c; font-weight: 600; }
[data-theme="dark"] .rollin-domain-result-card .domain-unavailable,
[data-theme="dark"] .rollin-domain-result-card .domain-checker-unavailable { color: #fb923c; }
.rollin-domain-result-card .domain-price {
    display: flex; align-items: center; justify-content: center; gap: 14px;
    margin-top: 16px; flex-wrap: wrap; font-size: 15px;
}
.rollin-domain-result-card .domain-price .price {
    font-size: 22px; font-weight: 800; color: #6a1ab0;
}
[data-theme="dark"] .rollin-domain-result-card .domain-price .price { color: #b855ff; }

/* CTA primário dentro do card de resultado de busca de domínio.
   Espelha o estado do #btnDomainContinue lá embaixo via JS bridge —
   evita user ter que fazer scroll pra encontrar o botão de adicionar. */
.rh-primary-add-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 16px;
    padding: 13px 26px;
    border-radius: 999px;
    background: linear-gradient(135deg, #8a2bd6 0%, #6a1ab0 100%);
    color: #ffffff !important;
    border: none;
    font-family: 'Poppins', system-ui, sans-serif;
    font-size: 14.5px;
    font-weight: 700;
    letter-spacing: -0.01em;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(138, 43, 214, 0.32);
    transition: transform 160ms ease, box-shadow 160ms ease, background 220ms ease;
    -webkit-tap-highlight-color: transparent;
}
.rh-primary-add-btn:hover {
    background: linear-gradient(135deg, #9b3deb 0%, #7a26c8 100%);
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(138, 43, 214, 0.42);
}
.rh-primary-add-btn:active {
    transform: translateY(0) scale(0.985);
    transition-duration: 80ms;
}
.rh-primary-add-btn svg {
    flex-shrink: 0;
}

.rollin-domain-continue { text-align: center; margin-top: 32px; }
.rollin-domain-continue-btn {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 14px 32px;
    border-radius: 999px;
    background: #6a1ab0;
    color: #ffffff;
    border: none;
    font-family: inherit;
    font-size: 15px; font-weight: 700;
    cursor: pointer;
    transition: background 160ms ease, transform 120ms ease, box-shadow 160ms ease;
    box-shadow: 0 8px 22px rgba(106, 26, 176, 0.25);
}
/* CRÍTICO: .w-hidden precisa vencer .rollin-domain-continue-btn pra esconder
   o botão até a AJAX do domain check rodar. Sem !important no display, a
   regra de display:inline-flex acima ganhava por source order, deixando o
   botão sempre visível e disabled — confundia o user. */
.rollin-domain-continue-btn.w-hidden {
    display: none !important;
}
[data-theme="dark"] .rollin-domain-continue-btn { background: #8a2bd6; box-shadow: 0 8px 22px rgba(138, 43, 214, 0.30); }
.rollin-domain-continue-btn:hover:not(:disabled) {
    background: #5710a0;
    transform: translateY(-1px);
    box-shadow: 0 12px 28px rgba(106, 26, 176, 0.35);
}
.rollin-domain-continue-btn:disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; }
.rollin-domain-continue-btn i, .rollin-domain-continue-btn svg { width: 18px; height: 18px; }

/* Show/hide dos input-groups é gerenciado pelo antler/scripts.js (linhas 2697-2702):
   - Init: mostra o grupo do radio default-checked
   - Click: hide all + show o grupo do radio clicado
   Removi o body:has() que existia aqui — ele forçava o browser a recomputar
   o seletor a CADA mutation no DOM (e durante AJAX com 4 spotlight TLDs spinning,
   isso travava o navegador). */

@media (max-width: 640px) {
    .rollin-domain-page { padding: 20px 0 60px; }
    .rollin-domain-choice { padding: 14px 16px; gap: 12px; }
    .rollin-domain-choice-icon { width: 40px; height: 40px; }
    .rollin-domain-input-group { padding: 18px; }
    .rollin-domain-input { flex-direction: column; }
    .rollin-domain-tld, .rollin-domain-tld-input { flex: 1 1 100% !important; }
    .rollin-domain-input-btn { width: 100%; }
}

/* =============================================================
   DOMAIN TRANSFER FORM — cart.php?a=add&domain=transfer
   ============================================================= */
.rollin-transfer-page {
    padding: 40px 16px 80px;
}
.rollin-transfer-hero {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 40px;
}
.rollin-transfer-card {
    max-width: 640px;
    margin: 0 auto;
    padding: 32px;
    background: var(--bg-glass);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg, 16px);
    box-shadow: 0 8px 32px rgba(13, 10, 31, 0.06);
}
html[data-theme="dark"] .rollin-transfer-card {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.32);
}
.rollin-transfer-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
}
.rollin-transfer-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.rollin-transfer-label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--text-muted);
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin: 0;
}
.rollin-transfer-label i {
    width: 14px;
    height: 14px;
}
html[data-theme="light"] .rollin-transfer-label i { color: #6a1ab0; }
html[data-theme="dark"]  .rollin-transfer-label i { color: var(--accent-cyan); }
.rollin-transfer-label--with-help {
    justify-content: space-between;
}
.rollin-transfer-label-text {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.rollin-transfer-help {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: var(--fs-xs);
    text-transform: none;
    letter-spacing: normal;
    font-weight: 600;
    cursor: help;
    text-decoration: none;
}
html[data-theme="light"] .rollin-transfer-help { color: #6a1ab0; }
html[data-theme="dark"]  .rollin-transfer-help { color: var(--accent-cyan); }
.rollin-transfer-help i {
    width: 12px;
    height: 12px;
}
.rollin-transfer-help:hover {
    text-decoration: underline;
}

.rollin-transfer-input {
    width: 100%;
    padding: 12px 16px !important;
    height: auto !important;
    background: var(--bg-glass) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: var(--radius-md) !important;
    color: var(--text-primary) !important;
    font-size: var(--fs-base) !important;
    font-family: inherit;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.rollin-transfer-input::placeholder {
    color: var(--text-muted);
    opacity: 0.7;
}
.rollin-transfer-input:focus {
    outline: none !important;
    border-color: color-mix(in srgb, var(--accent-purple) 55%, transparent) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-purple) 18%, transparent) !important;
}

.rollin-transfer-alert {
    margin: 0;
    border-radius: var(--radius-md);
    padding: 12px 16px;
    font-size: var(--fs-sm);
}
.rollin-transfer-alert:empty,
.rollin-transfer-alert.w-hidden {
    display: none !important;
}

.rollin-transfer-captcha {
    margin: var(--space-sm) 0;
}

.rollin-transfer-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 4px;
}

.rollin-transfer-submit {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px !important;
    border-radius: var(--radius-md) !important;
    font-weight: 600 !important;
    font-size: var(--fs-base) !important;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.rollin-transfer-submit:hover {
    transform: translateY(-1px);
}
.rollin-transfer-submit i {
    width: 16px;
    height: 16px;
}

.rollin-transfer-disclaimer {
    text-align: center;
    font-size: var(--fs-xs);
    color: var(--text-muted);
    margin-top: var(--space-lg);
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 640px) {
    .rollin-transfer-actions { justify-content: stretch; }
    .rollin-transfer-submit { width: 100%; justify-content: center; }
}

/* =============================================================
   MOBILE-FIRST OVERRIDES (≤ 540px)
   Recupera o espaço lateral desperdiçado em phones, força stacking
   dos grids 2-col e reduz padding interno dos cards.
   ============================================================= */
@media (max-width: 540px) {
    /* Wrapper page: padding lateral mais enxuto */
    .rollin-cart-page {
        padding: 24px 12px 56px;
    }

    /* Container Bootstrap dentro do orderform: full-width */
    .rollin-cart-page > .container,
    .rollin-cart-page .container {
        max-width: 100%;
        padding-left: 0;
        padding-right: 0;
        width: 100%;
    }

    /* HERO: tipografia menor + sem padding lateral extra */
    .rollin-cart-hero { padding: 12px 0 8px; }
    .rollin-cart-hero-title { font-size: clamp(22px, 6.5vw, 28px); }
    .rollin-cart-hero-subtitle { font-size: 14px; line-height: 1.5; }
    .rollin-domain-hero-title { font-size: clamp(22px, 6.5vw, 28px); }
    .rollin-domain-hero-subtitle { font-size: 14px; line-height: 1.5; }

    /* Cards de ciclo de pagamento — stack em uma coluna */
    .rh-cp-cycles {
        grid-template-columns: 1fr !important;
        gap: 8px;
    }
    .rh-cp-cycle { padding: 14px 16px; }
    .rh-cp-cycle-price { font-size: var(--fs-xl); }
    .rh-cp-cycle-meta { font-size: var(--fs-xs); }

    /* Features (specs chips) — uma coluna garantida */
    .rh-cp-features {
        grid-template-columns: 1fr !important;
        gap: 6px;
    }
    .rh-cp-feature { padding: 10px 12px; font-size: 13px; }

    /* Plans grid (Mensal/Anual quando vem como plano grande) */
    .rollin-plans-grid {
        grid-template-columns: 1fr !important;
        gap: 12px;
        max-width: 100%;
        margin: 16px 0;
    }
    .rollin-plan-card { padding: 20px 18px; }
    .rollin-plan-price { font-size: var(--fs-2xl); }

    /* Config sections: padding interno reduzido */
    .rollin-config-section {
        padding: 20px 16px;
        border-radius: var(--radius-md);
    }
    .rollin-config-section-head h3 { font-size: var(--fs-base); }

    /* Cards Rollin genéricos: padding e bordas mobile-friendly */
    .rollin-cart-card,
    .rollin-cart-summary,
    .rollin-transfer-card {
        padding: 20px 16px;
        border-radius: var(--radius-md);
    }
    .rollin-cart-summary h3 { font-size: var(--fs-base); }

    /* Disclaimer e textos auxiliares: padding zerado */
    .rollin-transfer-disclaimer { padding: 0 8px; }

    /* Cycle toggle (pílulas Mensal/Anual): full-width */
    .rollin-cycle-options {
        display: flex !important;
        width: 100%;
    }
    .rollin-cycle-opt { flex: 1 1 0; justify-content: center; }

    /* Linked accounts / addons / recomendações: grids 2+col viram 1 col */
    .rollin-addons-grid,
    .rollin-recommendations-grid,
    .rollin-linkedaccounts-grid {
        grid-template-columns: 1fr !important;
        gap: 10px;
    }
}

/* Phones MUITO pequenos (≤ 380px, ex: iPhone SE 1ª gen) */
@media (max-width: 380px) {
    .rollin-cart-page { padding: 20px 8px 48px; }
    .rollin-cart-card,
    .rollin-cart-summary,
    .rollin-transfer-card,
    .rollin-config-section { padding: 16px 12px; }
    .rh-cp-cycle { padding: 12px 14px; }
    .rh-cp-feature { padding: 8px 10px; font-size: 12.5px; }
}