/* ===================================================================
   PRISM - ORDER FORM
   ===================================================================
   The colors are NOT set here. They are set in colors.css, which
   loads after this file and survives theme updates: change the brand
   hex there and every gradient, tint, ring and shadow below follows.

   The design tokens this file is written on top of live in
   tokens.css, loaded before this one.
   =================================================================== */

/* ── Everything below is the theme itself ───────────────────────── */

/* ===================================================================
   1. Sidebar do cart — estilo do tema
   (sidebar-categories.tpl — arquivo core do WHMCS, estilar via CSS)
   =================================================================== */

/* Container do panel (Bootstrap 3 .panel ou Bootstrap 4 .card) */
.cart-sidebar .panel,
.cart-sidebar .card {
  background: #fff;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  overflow: hidden;
  box-shadow: 0 2px 8px color-mix(in srgb, var(--brand-secondary) 6%, transparent) !important;
  margin-bottom: 12px;
}

/* Header do panel */
.cart-sidebar .panel-heading,
.cart-sidebar .card-header {
  background: var(--gradiente) !important;
  padding: 11px 16px !important;
  border: none !important;
  border-radius: 0 !important;
}
.cart-sidebar .panel-title,
.cart-sidebar .panel-heading h3,
.cart-sidebar .card-header {
  color: #fff !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  margin: 0 !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.cart-sidebar .panel-title a,
.cart-sidebar .panel-title a:hover,
.cart-sidebar .panel-heading .panel-collapse-btn,
.cart-sidebar .panel-heading .panel-collapse-btn:hover {
  color: rgba(255, 255, 255, 0.85) !important;
  text-decoration: none !important;
  font-size: 0.75rem;
}

/* Lista de categorias */
.cart-sidebar .list-group {
  margin: 0;
  border-radius: 0;
}
.cart-sidebar .list-group-item {
  border-left: 3px solid transparent !important;
  border-right: none !important;
  border-top: none !important;
  border-bottom: 1px solid #eef1f8 !important;
  padding: 9px 14px !important;
  font-size: 0.83rem;
  color: #1e293b;
  transition: background 0.15s;
  background: #fff !important;
}
.cart-sidebar .list-group-item:last-child {
  border-bottom: none !important;
}
.cart-sidebar .list-group-item a {
  color: #1e293b !important;
  text-decoration: none !important;
  font-size: 0.83rem;
  display: block;
}
.cart-sidebar .list-group-item:hover {
  background: color-mix(in srgb, var(--brand-secondary) 6%, white) !important;
}
#order-standard_cart .cart-sidebar .list-group-item.active {
  background: color-mix(in srgb, var(--brand-primary) 7%, white) !important;
  border-left-color: var(--cor-primaria) !important;
  color: var(--cor-primaria) !important;
}
#order-standard_cart .cart-sidebar .list-group-item.active a,
#order-standard_cart .cart-sidebar .list-group-item.active a:hover {
  color: var(--cor-primaria) !important;
  font-weight: 700;
}

/* Ações: link "Visualizar carrinho" */
.cart-sidebar .panel-body a,
.cart-sidebar .card-body a {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.83rem;
  color: #1e293b !important;
  text-decoration: none !important;
  padding: 9px 14px;
  transition: background 0.15s;
}
.cart-sidebar .panel-body a:hover,
.cart-sidebar .card-body a:hover {
  background: color-mix(in srgb, var(--brand-secondary) 6%, white);
}

/* Seletor de moeda */
.cart-sidebar .panel-body select,
.cart-sidebar .card-body select {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid #e2e8f0;
  border-radius: 7px;
  font-size: 0.83rem;
  color: #1e293b;
  background: var(--brand-tint-1);
  margin: 8px 14px;
  width: calc(100% - 28px);
}

/* ===================================================================
   2. products.tpl — Listagem de produtos dentro de um grupo
   =================================================================== */

/* Cabeçalho do grupo */
.prism-prodlist-header {
  margin-bottom: 28px;
  padding-bottom: 20px;
  border-bottom: 1px solid #e2e8f0;
}
.prism-prodlist-title {
  font-size: 1.85rem;
  font-weight: 700;
  color: var(--cor-secundaria);
  line-height: 1.25;
  margin-bottom: 10px;
  text-align: left !important;
}
/* Remove as linhas laterais do .header-lined padrão do WHMCS */
.prism-prodlist-title::before,
.prism-prodlist-title::after {
  display: none !important;
}
.prism-prodlist-sub {
  font-size: 0.85rem;
  color: #64748b;
  line-height: 1.7;
  margin: 0;
  text-align: left !important;
}

/* Grade de produtos — CSS grid sem max-width fixo */
.prism-products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 20px;
  margin-top: 8px;
}

/* Card de produto — prefixado com #order-standard_cart para não conflitar com homepage */
#order-standard_cart .prism-prod-card {
  background: #fff;
  border: 1px solid var(--brand-tint-4);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 2px 10px color-mix(in srgb, var(--brand-secondary) 6%, transparent);
  transition: all 0.22s;
  height: auto;
}
#order-standard_cart .prism-prod-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 36px color-mix(in srgb, var(--brand-secondary) 14%, transparent);
  border-color: color-mix(in srgb, var(--brand-primary) 30%, transparent);
}
.prism-prod-accent {
  height: 4px;
  background: var(--gradiente);
  flex-shrink: 0;
}
#order-standard_cart .prism-prod-body {
  padding: 20px 22px 22px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* Nome do produto */
#order-standard_cart .prism-prod-name {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--cor-secundaria);
  margin-bottom: 10px;
  line-height: 1.3;
  text-align: left;
}
.prism-prod-stock {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 500;
  background: #f0fdf4;
  color: #16a34a;
  border: 1px solid #bbf7d0;
  border-radius: 100px;
  padding: 1px 8px;
  margin-left: 6px;
  vertical-align: middle;
}

/* Bloco de preço — logo após o nome, espaço variável vem DEPOIS dele */
.prism-prod-price-block {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 3px 6px;
  padding: 14px 0 14px;
  border-top: 1px solid #eef1f8;
  border-bottom: 1px solid #eef1f8;
  margin-bottom: 0;
}
.prism-prod-price-label {
  font-size: 0.72rem;
  color: #94a3b8;
  width: 100%;
}
.prism-prod-price-value {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--cor-primaria);
  line-height: 1;
}
.prism-prod-price-cycle {
  font-size: 0.78rem;
  color: #94a3b8;
  align-self: flex-end;
  margin-bottom: 2px;
}
.prism-prod-setup-fee {
  font-size: 0.72rem;
  color: #94a3b8;
  width: 100%;
  margin-top: 2px;
}

/* Descrição curta — abaixo do nome, antes do preço */
#order-standard_cart .prism-prod-desc {
  font-size: 0.73rem;
  color: #94a3b8;
  line-height: 1.6;
  margin-bottom: 20px;
  font-family: 'Public Sans', sans-serif;
  text-align: left;
  flex: 0 0 auto !important; /* impede que prism/custom.css aplique flex:1 aqui */
}

/* Lista de features inline (prism-features-list) — movida via JS para após o preço */
#order-standard_cart div.prism-features-list {
  flex: 1;
  font-size: 0.7rem;
  color: #374151;
  line-height: 0.8;
  margin-top: 14px;
  margin-bottom: 18px;
}
#order-standard_cart div.prism-features-list strong {
  color: #1e293b;
}

/* Lista de features — flex: 1 empurra o botão para o fundo */
.prism-prod-features {
  list-style: none;
  padding: 0;
  margin: 0 0 18px 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.prism-prod-features li {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  font-size: 0.7rem;
  color: #374151;
  line-height: 1.4;
}
.prism-prod-features li i {
  color: #22c55e;
  font-size: 0.68rem;
  margin-top: 2px;
  flex-shrink: 0;
}
.prism-prod-features li strong {
  color: #1e293b;
}

/* Prefixo da moeda (US$, R$) — renderizado via JS, menor que o valor */
.prism-price-currency {
  font-size: 0.55em;
  font-weight: 700;
  vertical-align: super;
  line-height: 0;
  margin-right: 3px;
}

/* Botão de compra — sempre no fundo do card */
.btn-prism-order {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 11px 16px;
  background: var(--gradiente);
  color: #fff !important;
  border: none;
  border-radius: 9px;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  cursor: pointer;
  text-decoration: none !important;
  transition: all 0.2s;
  margin-top: auto;
}
.btn-prism-order:hover {
  opacity: 0.88;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--brand-primary) 28%, transparent);
  color: #fff !important;
}

/* Responsivo */
@media (max-width: 767px) {
  .prism-products-grid {
    grid-template-columns: 1fr;
  }
  .prism-prodlist-title {
    font-size: 1.4rem;
  }
  #order-standard_cart .prism-prod-name {
    font-size: 1.1rem;
  }
}

/* ===================================================================
   3. complete.tpl — Confirmação de Pedido
   =================================================================== */

/* Oculta sidebar e centraliza o cart-body — exclusivo da página complete */
#order-standard_cart.prism-page-complete > .row > .cart-sidebar { display: none !important; }
#order-standard_cart.prism-page-complete > .row > .cart-body {
    width: 100% !important;
    max-width: 680px !important;
    margin: 32px auto 64px !important;
    padding: 0 16px !important;
    float: none !important;
}
#order-standard_cart.prism-page-complete .header-lined { display: none !important; }

/* ── Card principal ── */
.prism-complete-card {
    background: white;
    border-radius: 14px;
    box-shadow: 0 8px 40px color-mix(in srgb, var(--brand-secondary) 16%, transparent);
    overflow: hidden;
}

/* ── Header ── */
.prism-complete-header {
    background: linear-gradient(135deg, var(--prism-secondary) 0%, var(--prism-primary) 100%);
    padding: 24px 36px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.prism-complete-header img { height: 38px; }
.prism-status-pill {
    display: inline-block;
    padding: 5px 18px;
    border-radius: 100px;
    font-weight: 700;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}
.prism-pill-paid    { background: #22c55e; color: white; }
.prism-pill-pending { background: #f59e0b; color: white; }

/* ── Hero ── */
.prism-complete-hero {
    padding: 40px 36px 28px;
    text-align: center;
}
.prism-success-circle {
    width: 68px;
    height: 68px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px;
}
.prism-success-circle.green  { background: #22c55e; }
.prism-success-circle.yellow { background: #f59e0b; }
.prism-success-circle svg {
    width: 34px;
    height: 34px;
    stroke: white;
    fill: none;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.prism-hero-title {
    font-size: 1.55rem;
    font-weight: 700;
    color: var(--prism-secondary);
    margin-bottom: 8px;
}
.prism-hero-subtitle {
    color: #64748b;
    font-size: 0.9rem;
    line-height: 1.6;
    max-width: 420px;
    margin: 0 auto;
}

/* ── Badge número do pedido ── */
.prism-order-badge {
    background: var(--prism-light);
    border: 1px solid color-mix(in srgb, var(--brand-primary) 19%, white);
    border-radius: 10px;
    padding: 14px 24px;
    margin: 22px auto 0;
    max-width: 340px;
    text-align: center;
}
.prism-badge-label {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--prism-secondary);
    display: block;
    margin-bottom: 4px;
}
.prism-badge-value {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--prism-primary);
    letter-spacing: 0.02em;
}

/* ── Divisor ── */
.prism-divider {
    border: none;
    border-top: 1px solid var(--brand-tint-4);
    margin: 28px 0 0;
}

/* ── Área de alertas ── */
.prism-alert-area {
    padding: 20px 36px 0;
}
.prism-alert-area .alert {
    border-radius: 9px;
    font-size: 0.9rem;
    margin-bottom: 0;
}
.prism-alert-area .alert-warning a.alert-link {
    font-weight: 600;
}

/* ── Addons ── */
.prism-addons-area {
    padding: 20px 36px 0;
}
.prism-addons-area .order-confirmation-addon-output + .order-confirmation-addon-output {
    margin-top: 12px;
}

/* ── Tabela de serviços contratados ── */
.prism-order-items {
    padding: 24px 36px;
}
.prism-section-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--prism-secondary);
    margin-bottom: 10px;
}
.prism-items-table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid color-mix(in srgb, var(--brand-primary) 19%, white);
    border-radius: 10px;
    overflow: hidden;
}
.prism-items-table thead td {
    background: var(--prism-secondary);
    color: white;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 10px 16px;
}
.prism-items-table tbody td {
    padding: 11px 16px;
    font-size: 0.9rem;
    border-bottom: 1px solid #f1f5f9;
    color: #475569;
    vertical-align: top;
}
.prism-items-table tbody tr:last-child td { border-bottom: none; }
.prism-items-table tbody td small {
    color: #94a3b8;
    font-size: 0.8rem;
}
.prism-items-table .prism-grand-total td {
    background: color-mix(in srgb, var(--brand-secondary) 7%, white);
    color: var(--prism-secondary);
    font-weight: 700;
    font-size: 0.95rem;
    border-bottom: none;
}

/* ── Botões de ação ── */
.prism-complete-ctas {
    padding: 0 36px 28px;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
}
.prism-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--prism-primary);
    color: white !important;
    font-weight: 600;
    padding: 12px 28px;
    border-radius: 9px;
    text-decoration: none !important;
    font-size: 0.9rem;
    transition: all 0.2s;
    border: 2px solid var(--prism-primary);
}
.prism-btn-primary:hover {
    background: var(--prism-secondary);
    border-color: var(--prism-secondary);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px color-mix(in srgb, var(--brand-primary) 30%, transparent);
    color: white !important;
}
.prism-btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    color: var(--prism-primary) !important;
    font-weight: 600;
    padding: 12px 28px;
    border-radius: 9px;
    text-decoration: none !important;
    font-size: 0.9rem;
    border: 2px solid var(--prism-primary);
    transition: all 0.2s;
}
.prism-btn-secondary:hover {
    background: var(--prism-light);
    color: var(--prism-secondary) !important;
}

/* ── Footer ── */
.prism-complete-footer {
    background: linear-gradient(135deg, var(--prism-secondary) 0%, var(--prism-primary) 100%);
    padding: 16px 36px;
    text-align: center;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}
.prism-footer-text {
    color: rgba(255,255,255,0.7);
    font-size: 0.82rem;
    margin: 0;
    line-height: 1.5;
}
.prism-footer-text a { color: rgba(255,255,255,0.85); text-decoration: none; }
.prism-footer-text a:hover { color: white; text-decoration: underline; }

/* ── Responsivo complete ── */
@media (max-width: 520px) {
    .prism-complete-header { padding: 20px; }
    .prism-complete-hero   { padding: 32px 20px 22px; }
    .prism-alert-area,
    .prism-addons-area     { padding: 16px 20px 0; }
    .prism-order-items     { padding: 20px 20px; }
    .prism-complete-ctas   { padding: 0 20px 24px; flex-direction: column; }
    .prism-complete-footer { padding: 14px 20px; }
    .prism-btn-primary,
    .prism-btn-secondary   { justify-content: center; }
}

/* ===================================================================
   4. configureproductdomain.tpl — Seleção de Domínio
   =================================================================== */

/* Page header */
.prism-domain-header {
    margin-bottom: 28px;
    padding-bottom: 20px;
    border-bottom: 1px solid #e2e8f0;
}
.prism-domain-title {
    font-size: 1.85rem;
    font-weight: 700;
    color: var(--brand-secondary);
    margin-bottom: 8px;
    line-height: 1.25;
}
.prism-domain-title::before,
.prism-domain-title::after { display: none !important; }
.prism-domain-subtitle {
    font-size: 0.875rem;
    color: #64748b;
    line-height: 1.6;
    margin: 0;
}

/* ── Option cards ── */
.domain-selection-options .option {
    background: #fff;
    border: 1.5px solid #e2e8f0;
    border-left: 4px solid transparent;
    border-radius: 14px;
    margin-bottom: 10px;
    overflow: hidden;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-shadow: 0 1px 4px color-mix(in srgb, var(--brand-secondary) 4%, transparent);
    cursor: pointer;
}
.domain-selection-options .option:hover {
    border-color: color-mix(in srgb, var(--brand-primary) 30%, white);
    border-left-color: color-mix(in srgb, var(--brand-primary) 30%, white);
    box-shadow: 0 4px 16px color-mix(in srgb, var(--brand-secondary) 9%, transparent);
}
.domain-selection-options .option.prism-selected {
    border-color: color-mix(in srgb, var(--brand-primary) 25%, transparent);
    border-left-color: var(--cor-primaria);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand-primary) 8%, transparent);
}

/* Accent bar — seleção indicada pela borda esquerda */
.prism-opt-accent { display: none; }

/* Label row */
.prism-opt-label {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 22px;
    cursor: pointer;
    margin: 0;
    user-select: none;
    transition: background 0.15s;
}
.prism-opt-label:hover { background: var(--brand-tint-1); }

/* Hide native radio — visual replaced by .prism-opt-radio */
.prism-opt-label input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
    margin: 0;
}

/* Icon */
.prism-opt-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--brand-primary) 7%, white);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.2s;
}
.prism-opt-icon i { font-size: 1.1rem; color: var(--cor-primaria); transition: color 0.2s; }
.domain-selection-options .option.prism-selected .prism-opt-icon { background: var(--gradiente); }
.domain-selection-options .option.prism-selected .prism-opt-icon i { color: #fff; }

/* Text */
.prism-opt-text { flex: 1; min-width: 0; }
.prism-opt-name { font-size: 0.93rem; font-weight: 600; color: #1e293b; line-height: 1.3; margin-bottom: 3px; }
.prism-opt-desc { font-size: 0.78rem; color: #94a3b8; line-height: 1.5; }
.domain-selection-options .option.prism-selected .prism-opt-name { color: var(--cor-secundaria); }
.domain-selection-options .option.prism-selected .prism-opt-desc { color: #64748b; }

/* Visual radio indicator */
.prism-opt-radio {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid #cbd5e1;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.2s, background 0.2s;
}
.prism-opt-radio::after {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: transparent;
    transition: background 0.2s;
}
.domain-selection-options .option.prism-selected .prism-opt-radio {
    border-color: var(--cor-primaria);
    background: var(--cor-primaria);
}
.domain-selection-options .option.prism-selected .prism-opt-radio::after { background: #fff; }

/* Input area container
   Usa #order-standard_cart para especificidade (1,2,0) e vencer a regra global
   background: #fff !important nos .clearfix do prism/custom.css */
#order-standard_cart .domain-selection-options .domain-input-group {
    padding: 0 22px 20px !important;
    border-top: 1px solid #e2e8f0 !important;
    background: #f8f8f8 !important;
    margin: 0 !important;
}

/* Input row (flex) */
.prism-input-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 16px;
}

/* Input group: prefix + field + tld — widget contido com borda única externa */
.prism-input-group {
    display: flex;
    flex: 1;
    min-width: 0;
    background: transparent;
    border: 1.5px solid color-mix(in srgb, var(--brand-primary) 21%, white);
    border-radius: 9px;
    overflow: hidden;
    box-shadow: 0 1px 3px color-mix(in srgb, var(--brand-secondary) 6%, transparent);
}
.prism-input-prefix {
    background: #efefef;
    border: none;
    border-right: 1px solid color-mix(in srgb, var(--brand-primary) 21%, white);
    border-radius: 0;
    padding: 0 14px;
    font-size: 0.85rem;
    font-weight: 500;
    color: #64748b;
    display: flex;
    align-items: center;
    white-space: nowrap;
    height: 42px;
    flex-shrink: 0;
}
.prism-input-field.form-control {
    flex: 1 !important;
    border: none !important;
    border-radius: 0 !important;
    height: 42px !important;
    font-size: 0.88rem !important;
    color: #1e293b !important;
    background: #fff !important;
    box-shadow: none !important;
    min-width: 0;
}
.prism-input-tld.form-control {
    border: none !important;
    border-left: 1px solid color-mix(in srgb, var(--brand-primary) 21%, white) !important;
    border-radius: 0 !important;
    height: 42px !important;
    min-width: 80px;
    max-width: 110px;
    flex-shrink: 0;
    background: #efefef !important;
    font-size: 0.85rem !important;
    color: #64748b !important;
}
.prism-input-tld-text.form-control {
    border: none !important;
    border-left: 1px solid color-mix(in srgb, var(--brand-primary) 21%, white) !important;
    border-radius: 0 !important;
    height: 42px !important;
    width: 90px !important;
    flex-shrink: 0;
    background: #efefef !important;
    font-size: 0.85rem !important;
    color: #64748b !important;
}
.prism-incart-select.form-control {
    flex: 1;
    border: 1.5px solid color-mix(in srgb, var(--brand-primary) 21%, white) !important;
    border-radius: 9px !important;
    height: 42px !important;
    background: #fff !important;
}

/* Action button */
.prism-btn-domain {
    background: var(--gradiente);
    border: none;
    border-radius: 9px;
    color: #fff;
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.03em;
    padding: 0 22px;
    height: 42px;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: opacity 0.2s, transform 0.2s, box-shadow 0.2s;
}
.prism-btn-domain:hover {
    opacity: 0.88;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px color-mix(in srgb, var(--brand-primary) 30%, transparent);
}

/* Input hint */
.prism-input-hint {
    font-size: 0.75rem;
    color: #94a3b8;
    margin-top: 8px;
    margin-bottom: 0;
    display: flex;
    align-items: center;
    gap: 5px;
}
.prism-input-hint i { color: var(--cor-primaria); font-size: 0.72rem; }

/* Nota de domínio grátis */
.prism-freedomain-note {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 9px;
    padding: 10px 16px;
    font-size: 0.8rem;
    color: #166534;
}
.prism-freedomain-note i { color: #16a34a; flex-shrink: 0; }
.prism-freedomain-note strong { color: #166534; }

/* ── Área de resultados de busca ── */
#DomainSearchResults { margin-top: 24px; }

.domain-lookup-loader {
    color: #64748b;
    font-size: 0.9rem;
    padding: 20px;
    text-align: center;
}
.domain-lookup-loader i { color: var(--brand-primary); margin-right: 6px; }

#primaryLookupResult {
    background: #fff;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    padding: 20px 24px;
    box-shadow: 0 2px 10px color-mix(in srgb, var(--brand-secondary) 6%, transparent);
}
.domain-checker-available.headline {
    color: #16a34a;
    font-weight: 700;
    font-size: 1.05rem;
}
.domain-checker-unavailable.headline {
    color: #dc2626;
    font-weight: 700;
    font-size: 1.05rem;
}
.domain-price {
    margin-top: 12px;
    font-size: 0.9rem;
    color: #64748b;
}
.domain-price .price { color: var(--brand-primary); font-weight: 700; }

/* Spotlight TLDs */
.spotlight-tlds-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}
.spotlight-tld-container { flex: 1 1 100px; }
.spotlight-tld {
    background: #fff;
    border: 1.5px solid #e2e8f0;
    border-radius: 10px;
    padding: 12px 10px;
    text-align: center;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--brand-secondary);
    box-shadow: 0 1px 4px color-mix(in srgb, var(--brand-secondary) 6%, transparent);
    transition: border-color 0.2s, box-shadow 0.2s;
}
.spotlight-tld:hover {
    border-color: var(--brand-primary);
    box-shadow: 0 4px 14px color-mix(in srgb, var(--brand-primary) 12%, transparent);
}

/* Domínios sugeridos */
.suggested-domains {
    margin-top: 20px;
    background: #fff;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 4px color-mix(in srgb, var(--brand-secondary) 4%, transparent);
}
.suggested-domains .panel-heading,
.suggested-domains .card-header {
    background: linear-gradient(to right, var(--brand-secondary), var(--brand-primary)) !important;
    color: #fff !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    padding: 11px 16px !important;
    border: none !important;
}
.suggested-domains .list-group-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    font-size: 0.88rem;
    border-bottom: 1px solid #eef1f8;
}
.suggested-domains .actions .btn {
    font-size: 0.8rem;
    padding: 5px 12px;
    border-radius: 7px;
}

/* ── Botão Continuar ── */
#btnDomainContinue {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: linear-gradient(to right, var(--brand-secondary), var(--brand-primary)) !important;
    border: none !important;
    border-radius: 9px !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    padding: 13px 32px !important;
    margin-top: 24px !important;
    transition: opacity 0.2s, transform 0.2s, box-shadow 0.2s !important;
}
#btnDomainContinue:not([disabled]):hover {
    opacity: 0.88 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 20px color-mix(in srgb, var(--brand-primary) 30%, transparent) !important;
}
#btnDomainContinue[disabled] {
    opacity: 0.45 !important;
    cursor: not-allowed !important;
}

/* ── Responsivo domain ── */
@media (max-width: 767px) {
    .prism-domain-title { font-size: 1.45rem; }
    .prism-opt-label { padding: 13px 14px; }
    .domain-selection-options .domain-input-group { padding: 0 14px 16px; }
    .prism-input-row { flex-wrap: wrap; }
    .prism-btn-domain { width: 100%; justify-content: center; }
    .prism-input-group { flex: 1 1 100%; }
}

/* ===================================================================
   7. Configure Product — Layout e Estilos (configureproduct.tpl)
   =================================================================== */

/* ── Overrides de página (sidebar oculta, body full-width) ── */
.prism-page-configureproduct .cart-sidebar { display: none !important; }
.prism-page-configureproduct .cart-body {
    max-width: 100% !important;
    width: 100% !important;
    flex: 1 1 100% !important;
}

/* ── Layout de 2 colunas: corpo config + sidebar resumo ── */
.prism-cfg-layout {
    display: flex;
    gap: 18px;
    align-items: flex-start;
}
.prism-cfg-body {
    flex: 0 0 calc(68% - 20px) !important;
    width: calc(68% - 20px) !important;
    max-width: calc(68% - 20px) !important;
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.prism-cfg-sidebar {
    flex: 0 0 calc(32% + 20px) !important;
    width: calc(32% + 20px) !important;
    max-width: calc(32% + 20px) !important;
    position: sticky;
    top: 24px;
}

/* ── Bloco de seção ── */
.prism-cfg-block {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--brand-secondary) 5%, transparent);
}
.prism-cfg-block-header {
    padding: 13px 20px;
    border-bottom: none;
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--gradiente);
}
.prism-cfg-block-header i {
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.9rem;
    width: 18px;
    text-align: center;
    flex-shrink: 0;
}
.prism-cfg-block-header h3 {
    font-size: 0.82rem;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0;
}
.prism-cfg-block-body {
    padding: 18px 20px;
}

/* ── Info do produto ── */
.prism-cfg-product-name {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--cor-secundaria);
    margin-bottom: 6px;
    margin-top: 0;
}
.prism-cfg-product-desc {
    font-size: 0.85rem;
    color: #64748b;
    line-height: 1.6;
    margin: 0;
}

/* ── Billing cycle card boxes ── */
.prism-billing-cycles {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.prism-cycle-card {
    flex: 1 1 calc(33.33% - 10px);
    min-width: 110px;
    background: #fff;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    padding: 14px 14px 12px;
    cursor: pointer;
    text-align: center;
    transition: border-color 0.18s, box-shadow 0.18s, background 0.18s;
    position: relative;
    user-select: none;
    line-height: 1.4;
    overflow: visible;
}
.prism-cycle-card:hover {
    border-color: color-mix(in srgb, var(--brand-primary) 30%, white);
    box-shadow: 0 3px 12px color-mix(in srgb, var(--brand-primary) 10%, transparent);
}
.prism-cycle-card.prism-cycle-selected {
    border-color: var(--cor-primaria);
    background: color-mix(in srgb, var(--brand-primary) 7%, white);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 10%, transparent);
}
.prism-cycle-check {
    position: absolute;
    top: 8px;
    right: 9px;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    border: 2px solid #cbd5e1;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.55rem;
    color: transparent;
    transition: border-color 0.18s, background 0.18s, color 0.18s;
}
.prism-cycle-card.prism-cycle-selected .prism-cycle-check {
    border-color: var(--cor-primaria);
    background: var(--cor-primaria);
    color: #fff;
}
.prism-cycle-name {
    font-size: 0.73rem;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 5px;
}
.prism-cycle-price {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--cor-secundaria);
    word-break: break-word;
}
.prism-cycle-card.prism-cycle-selected .prism-cycle-name { color: var(--cor-primaria); }
.prism-cycle-card.prism-cycle-selected .prism-cycle-price { color: var(--cor-primaria); }

/* ── Ciclo: preço total e parcela mensal ── */
.prism-cycle-price-total {
    font-size: 1rem;
    font-weight: 700;
    color: #1e293b;
    margin: 4px 0 2px;
}
.prism-cycle-price-monthly {
    font-size: 0.78rem;
    color: #64748b;
    margin: 0;
    line-height: 1.4;
}

/* ── Savings badge ── */
.prism-savings-badge {
    position: absolute;
    top: -10px;
    right: 36px;
    background: linear-gradient(135deg, #16a34a, #15803d);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 3px 7px;
    border-radius: 20px;
    letter-spacing: 0.02em;
    box-shadow: 0 2px 6px rgba(22, 163, 74, 0.35);
    white-space: nowrap;
    animation: prismBadgePop .25s cubic-bezier(.34, 1.56, .64, 1) both;
    z-index: 4;
}
@keyframes prismBadgePop {
    from { transform: scale(0.6); opacity: 0; }
    to   { transform: scale(1);   opacity: 1; }
}

/* ── Opções configuráveis (grid interno sem quebra de row manual) ── */
.prism-cfg-options-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.prism-cfg-full-col { grid-column: 1 / -1; }

/* Override: remover margem padrão do form-group dentro do bloco */
.prism-cfg-block-body .form-group { margin-bottom: 0; }
.prism-cfg-block-body .form-control:focus {
    border-color: var(--cor-primaria) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 10%, transparent) !important;
}

/* ── Addons ── */
.prism-addons-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
/* Reutiliza as classes originais do WHMCS: panel-addon, panel-addon-selected */
#productAddonsContainer .panel-addon {
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    transition: border-color 0.18s, box-shadow 0.18s;
    background: #fff;
    cursor: pointer;
    margin: 0;
}
#productAddonsContainer .panel-addon.panel-addon-selected {
    border-color: var(--cor-primaria);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 10%, transparent);
}
#productAddonsContainer .panel-body {
    padding: 14px 16px;
    font-size: 0.85rem;
    color: #64748b;
    line-height: 1.5;
}
#productAddonsContainer .panel-body label {
    font-weight: 700;
    color: var(--cor-secundaria);
    font-size: 0.88rem;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 5px;
}
#productAddonsContainer .panel-body label input[type="checkbox"] {
    accent-color: var(--cor-primaria);
    width: 14px;
    height: 14px;
    margin-top: 2px;
    flex-shrink: 0;
}
#productAddonsContainer .panel-price {
    padding: 8px 16px;
    border-top: 1px solid #f1f5f9;
    background: var(--brand-tint-1);
    font-size: 0.8rem;
    color: var(--cor-primaria);
    font-weight: 700;
}
#productAddonsContainer .panel-add {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px;
    background: var(--gradiente);
    color: #fff;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* ── Alerta de ajuda ── */
.prism-help-alert {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 18px;
    background: #fffbeb;
    border: 1px solid #fcd34d;
    border-radius: 12px;
    font-size: 0.82rem;
    color: #92400e;
    line-height: 1.55;
}
.prism-help-alert i { color: #d97706; font-size: 1rem; flex-shrink: 0; margin-top: 1px; }
.prism-help-alert a { color: var(--cor-primaria); font-weight: 600; }

/* ── Summary card (sidebar sticky) — Gradiente azul no card inteiro ── */
/* Escopo via .prism-page-configureproduct para não conflitar com outros templates */
.prism-page-configureproduct .prism-summary-card {
    background: var(--gradiente) !important;
    border: none !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 24px color-mix(in srgb, var(--brand-secondary) 25%, transparent) !important;
}
.prism-summary-header {
    background: rgba(0, 0, 0, 0.1);
    padding: 14px 18px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.prism-summary-header i { color: rgba(255, 255, 255, 0.8); font-size: 0.95rem; }
.prism-summary-header h2 {
    color: #fff;
    font-size: 0.92rem;
    font-weight: 700;
    margin: 0;
}
.prism-summary-body { padding: 24px !important; }
#orderSummaryLoader { text-align: center; color: rgba(255, 255, 255, 0.6); padding: 6px 0 10px; }

/* ── Resumo do pedido — conteúdo (branco sobre gradiente azul) ── */
#producttotal {
    background: transparent !important;
}
#producttotal .order-summary,
#producttotal .summary-container {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
#producttotal table {
    width: 100%;
    margin-bottom: 0 !important;
    border-collapse: collapse;
}
#producttotal table td,
#producttotal table th {
    padding: 14px 0;
    border: none;
    background: transparent !important;
    vertical-align: middle;
}
#producttotal .panel-cart-item,
#producttotal .order-summary-item {
    padding: 14px 0;
    margin: 0;
}
/* produto: nome e grupo como bloco */
#producttotal span.product-name,
#producttotal span.product-group {
    display: block;
}
#producttotal span.product-name { font-weight: 700; color: #fff !important; }
#producttotal span.product-group {
    color: rgba(255,255,255,0.6) !important;
    font-size: 0.82rem !important;
    padding-bottom: 10px;
    margin-bottom: 2px;
    border-bottom: 1px solid rgba(255,255,255,0.2);
}
/* Linha do produto principal (clearfix direto filho de #producttotal) */
#producttotal > div.clearfix {
    padding: 9px 0;
    border-bottom: 1px solid rgba(255,255,255,0.18);
}
/* Cada item dentro de summary-totals (Setup Fees, Monthly, etc.) */
#producttotal .summary-totals > div.clearfix {
    padding: 9px 0;
    border-bottom: 1px solid rgba(255,255,255,0.18);
}
#producttotal .summary-totals > div.clearfix:last-child {
    border-bottom: none;
}
/* Total: separador mais visível acima */
#producttotal .total-due-today {
    border-top: 1px solid rgba(255,255,255,0.35) !important;
    padding-top: 12px !important;
    margin-top: 4px;
}
/* Tipografia branca */
#producttotal,
#producttotal table,
#producttotal .panel-body,
#producttotal td,
#producttotal th {
    font-size: 0.95rem !important;
    color: rgba(255, 255, 255, 0.85) !important;
}
#producttotal strong,
#producttotal b,
#producttotal th {
    font-weight: 600 !important;
    color: #fff !important;
}
#producttotal .total-due-today td {
    padding-top: 20px;
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    color: #fff !important;
}

/* Botão continuar — branco sobre gradiente azul */
#btnCompleteProductConfig {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
    background: #fff !important;
    border: none !important;
    border-radius: 12px !important;
    color: var(--cor-secundaria) !important;
    font-weight: 800 !important;
    font-size: 0.95rem !important;
    padding: 13px 20px !important;
    margin-top: 16px !important;
    transition: opacity 0.2s, transform 0.2s, box-shadow 0.2s !important;
}
#btnCompleteProductConfig:hover {
    opacity: 0.92 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 20px rgba(255, 255, 255, 0.3) !important;
}

/* Nota segurança — branca sobre gradiente */
.prism-summary-secure {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin-top: 10px;
    font-size: 0.71rem;
    color: rgba(255, 255, 255, 0.65);
}
.prism-summary-secure i { color: #4ade80; font-size: 0.71rem; }

/* ── Responsivo configureproduct ── */
@media (max-width: 991px) {
    .prism-cfg-layout { flex-direction: column; display: block; }
    .prism-cfg-body,
    .prism-cfg-sidebar {
        max-width: 100% !important;
        width: 100% !important;
        flex: unset !important;
        position: static;
    }
    .prism-cfg-options-grid { grid-template-columns: 1fr; }
    .prism-cfg-full-col { grid-column: 1; }
    .prism-addons-grid { grid-template-columns: 1fr; }
    .prism-billing-cycles { gap: 8px; }
    .prism-cycle-card { flex: 1 1 calc(50% - 8px); }
}

/* ===================================================================
   8. Correções globais de layout do cart
   =================================================================== */

/* ── Fix: caixa cinza do tema em volta do prism-cfg-layout ──
   prism/custom.css linha 1384 aplica background #f8f8f8 + border + padding
   em qualquer div filho direto de form dentro de .cart-body.
   Nosso .prism-cfg-layout é esse div — precisa ser transparente.
   Especificidade: (2,2,0) > regra do tema (1,4,2) por ter 2 IDs. ── */
#order-standard_cart .cart-body #frmConfigureProduct > .prism-cfg-layout {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin-bottom: 0 !important;
    box-shadow: none !important;
}

/* ── Fix: row como flexbox a partir de 768px ──
   Evita que .cart-sidebar flutue e empilhe em cima do .cart-body
   quando Bootstrap col-md não se aplica. ── */
@media (min-width: 768px) {
    #order-standard_cart > .row {
        display: flex !important;
        align-items: flex-start !important;
        flex-wrap: nowrap !important;
    }
    #order-standard_cart > .row > .cart-sidebar {
        float: none !important;
        flex-shrink: 0 !important;
        width: 220px !important;
    }
    #order-standard_cart > .row > .cart-body {
        flex: 1 1 0 !important;
        width: auto !important;
        min-width: 0 !important;
        float: none !important;
    }
}
/* Oculta sidebar de coluna abaixo de 768px (Bootstrap stacks) */
@media (max-width: 767px) {
    #order-standard_cart > .row > .cart-sidebar {
        display: none !important;
    }
}
/* Remove sidebar-collapsed do cart por completo (categorias/ações não fazem sentido na revisão).
   Sem media query = sempre oculto em qualquer breakpoint. */
#order-standard_cart .sidebar-collapsed {
    display: none !important;
}

/* ── Fix: 768-991px — cart-body em flex-column, header no topo ──
   (Sidebar-collapsed agora sempre oculto, não precisa de ordenação.) ── */
@media (min-width: 768px) and (max-width: 991px) {
    /* Oculta a sidebar de coluna — espaço todo para o conteúdo */
    #order-standard_cart > .row > .cart-sidebar {
        display: none !important;
    }
    /* cart-body: flex-column explícito com especificidade superior ao tema */
    #order-standard_cart > .row > .cart-body {
        display: flex !important;
        flex-direction: column !important;
    }
    /* Header sempre no topo */
    #order-standard_cart > .row > .cart-body > .header-lined {
        order: -10 !important;
    }
    #order-standard_cart > .row > .cart-body > form {
        order: 0 !important;
        width: 100% !important;
    }
}

/* ── Estilo dos panels dentro do sidebar-collapsed ──
   Idêntico ao .cart-sidebar para consistência visual. ── */
.sidebar-collapsed .panel,
.sidebar-collapsed .card {
    background: #fff;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    overflow: hidden;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--brand-secondary) 6%, transparent) !important;
    margin-bottom: 12px;
}
.sidebar-collapsed .panel-heading,
.sidebar-collapsed .card-header {
    background: var(--gradiente) !important;
    padding: 11px 16px !important;
    border: none !important;
    border-radius: 0 !important;
    color: #fff !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}
.sidebar-collapsed .panel-heading .panel-title,
.sidebar-collapsed .panel-heading .panel-title a {
    color: #fff !important;
    font-size: 0.82rem !important;
    font-weight: 600 !important;
}
.sidebar-collapsed .panel-body,
.sidebar-collapsed .card-body {
    padding: 4px 0 !important;
}
.sidebar-collapsed .list-group {
    margin: 0;
    border-radius: 0;
}
.sidebar-collapsed .list-group-item {
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
    border-bottom: 1px solid #eef1f8 !important;
    padding: 9px 14px !important;
    font-size: 0.83rem;
    color: #1e293b;
    background: #fff !important;
}
.sidebar-collapsed .list-group-item:last-child {
    border-bottom: none !important;
}

/* ===================================================================
   10. viewcart.tpl — Revisão do Carrinho
   =================================================================== */

/* ── Layout interno: secondary-cart-body + secondary-cart-sidebar ──
   :has() suportado em todos os browsers modernos.
   A coluna de itens expande; a sidebar de resumo tem largura fixa. ── */
/* ── Título da página: alinhado à esquerda, sem linhas decorativas ──
   prism/custom.css aplica text-align:center !important em .header-lined
   e cria linhas via .header-lined h1::before/after (display:flex no h1).
   Usamos body:has(.secondary-cart-body) para detectar o viewcart com
   especificidade (0,2,1) ou (0,2,2) — superior à (0,1,0) e (0,1,1) do tema.
   As pseudo-linhas não têm !important no tema, então display:none as apaga. ── */
body:has(.secondary-cart-body) .header-lined {
    text-align: left !important;
    padding-bottom: 16px !important;
    border-bottom: 1px solid #e2e8f0 !important;
    margin-bottom: 24px !important;
}
body:has(.secondary-cart-body) .header-lined h1 {
    display: block !important;
    text-align: left !important;
}
body:has(.secondary-cart-body) .header-lined h1::before,
body:has(.secondary-cart-body) .header-lined h1::after {
    display: none !important;
}

/* ── Layout interno: secondary-cart-body (itens) + secondary-cart-sidebar (resumo) ──
   prism/custom.css tem @media (768-1198px):
     #order-standard_cart .cart-body>* { display:block !important; }  — especificidade (1,1,0)
   O seletor abaixo tem especificidade (1,3,0) → vence com !important.
   Resultado: row é flex em todos os breakpoints ≥992px, flex-column em ≤991px. ── */
#order-standard_cart .cart-body .row:has(.secondary-cart-body) {
    display: flex !important;
    gap: 12px;
    align-items: flex-start;
    flex-wrap: nowrap !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}
#order-standard_cart .secondary-cart-body {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    width: auto !important;
    float: none !important;
}
#order-standard_cart .secondary-cart-sidebar {
    width: 330px !important;
    flex-shrink: 0 !important;
    float: none !important;
}
@media (max-width: 991px) {
    #order-standard_cart .cart-body .row:has(.secondary-cart-body) {
        flex-direction: column !important;
        gap: 0;
    }
    /* display:contents expõe os filhos diretos do secondary-cart-body
       como flex items do .row pai, permitindo reordenar via order. */
    #order-standard_cart .secondary-cart-body {
        display: contents !important;
    }
    /* Ordem: 1 form c/ itens → 2 order-summary → 3 view-cart-tabs */
    #order-standard_cart .cart-body #frmViewCart {
        order: 1 !important;
        width: 100% !important;
        margin-bottom: 0 !important;
    }
    #order-standard_cart .view-cart-gateway-checkout {
        order: 2 !important;
        width: 100% !important;
    }
    #order-standard_cart .secondary-cart-sidebar {
        order: 3 !important;
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-top: 16px !important;
    }
    #order-standard_cart .view-cart-tabs {
        order: 4 !important;
        width: 100% !important;
    }
    /* WHMCS JS aplica position:fixed + top/left inline ao #scrollingPanelContainer.
       !important é necessário para anular o inline style. */
    #scrollingPanelContainer {
        position: static !important;
        top: auto !important;
        left: auto !important;
        width: 100% !important;
    }
    /* Reduz espaço entre título e card */
    body:has(.secondary-cart-body) .header-lined {
        margin-bottom: 12px !important;
        padding-bottom: 12px !important;
    }
}

/* ── Override da caixa cinza do tema para .prism-items-card ──
   O tema aplica: background:#f8f8f8; border; padding:20px 25px em form>div.
   Especificidade (2,2,0) > tema (1,4,2) → ganha.
   Em vez de tornar transparente (o que apaga nosso background:#fff de
   menor especificidade), aplicamos aqui as propriedades do card diretamente. ── */
#order-standard_cart .cart-body #frmViewCart > .prism-items-card {
    background: #fff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 20px !important;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--brand-secondary) 6%, transparent) !important;
    overflow: hidden;
}
#order-standard_cart .cart-body #frmViewCart > .empty-cart {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin-bottom: 0 !important;
    box-shadow: none !important;
}

/* ── Card unificado para header + lista de itens ── */
.prism-items-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px color-mix(in srgb, var(--brand-secondary) 6%, transparent);
}
.prism-items-card .view-cart-items-header {
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
.prism-items-card .view-cart-items {
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}
/* Forms de promo e imposto */
#order-standard_cart .cart-body #frmViewCartPromo > .form-group,
#order-standard_cart .cart-body #frmViewCartTax > .form-group {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin-bottom: 14px !important;
    box-shadow: none !important;
}

/* ── Cabeçalho da tabela de itens ── */
.view-cart-items-header {
    background: var(--gradiente, linear-gradient(to right, var(--brand-secondary), var(--brand-primary))) !important;
    border: none !important;
    border-radius: 12px 12px 0 0 !important;
    padding: 10px 20px !important;
    font-size: 0.78rem;
    font-weight: 700;
    color: #fff !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ── Lista de itens ── */
.view-cart-items {
    background: #fff !important;
    border: 1px solid #e2e8f0 !important;
    border-top: none !important;
    border-radius: 0 0 12px 12px !important;
    overflow: hidden;
    margin-bottom: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
}
.view-cart-items .item {
    padding: 14px 20px !important;
    border-bottom: 1px solid #f1f5f9;
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transition: background 0.12s;
}
.view-cart-items .item:last-child { border-bottom: none; }
.view-cart-items .item:hover { background: #fafbfe !important; }
.view-cart-items .prism-item-sub { background: #fafbfe !important; }
.view-cart-items .prism-item-sub:hover { background: color-mix(in srgb, var(--brand-primary) 5%, white) !important; }

.view-cart-items .item-title {
    font-weight: 600;
    color: var(--cor-secundaria, var(--brand-secondary));
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 3px;
}
.view-cart-items .item-group {
    font-size: 0.78rem;
    color: #94a3b8;
    font-weight: 500;
    display: block;
}
.view-cart-items .item-domain {
    font-size: 0.8rem;
    color: #475569;
    font-family: monospace;
    display: block;
}
.view-cart-items .item-price {
    font-weight: 700;
    color: var(--cor-secundaria, var(--brand-secondary));
    text-align: right;
    padding-right: 12px;
}
.view-cart-items .item-price .cycle {
    display: block;
    font-size: 0.75rem;
    font-weight: 400;
    color: #64748b;
    margin-top: 2px;
}
.view-cart-items .item-price .renewal {
    display: block;
    font-size: 0.72rem;
    color: #94a3b8;
    margin-top: 1px;
}
.view-cart-items .btn-link.btn-xs {
    font-size: 0.75rem !important;
    color: var(--cor-primaria, var(--brand-primary)) !important;
    padding: 2px 7px !important;
    border-radius: 5px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    background: none !important;
    border: none !important;
}
.view-cart-items .btn-link.btn-xs:hover { background: color-mix(in srgb, var(--brand-primary) 7%, white) !important; }
.view-cart-items .btn-remove-from-cart { color: #cbd5e1 !important; }
.view-cart-items .btn-remove-from-cart:hover {
    color: #ef4444 !important;
    background: #fef2f2 !important;
}

/* ── Badges de tipo ── */
.prism-type-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.69rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    flex-shrink: 0;
    vertical-align: middle;
}
.prism-badge-addon    { background: #d1fae5; color: #065f46; }
.prism-badge-register { background: color-mix(in srgb, var(--brand-primary) 14%, white); color: color-mix(in srgb, var(--brand-primary) 97%, white); }
.prism-badge-transfer { background: #fce7f3; color: #be185d; }
.prism-badge-renewal  { background: #fef3c7; color: #92400e; }
.prism-badge-upgrade  { background: #f3e8ff; color: #6b21a8; }

/* ── Botão esvaziar carrinho ── */
.empty-cart {
    display: flex !important;
    justify-content: flex-end !important;
    padding: 6px 0 !important;
}
.empty-cart .btn-link {
    color: #94a3b8 !important;
    font-size: 0.82rem !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 6px 10px !important;
    border-radius: 6px !important;
}
.empty-cart .btn-link:hover {
    color: #ef4444 !important;
    background: #fef2f2 !important;
}

/* ── Promo / impostos ── */
.view-cart-tabs {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    margin-top: 20px !important;
}
.view-cart-tabs .nav-tabs {
    border-bottom: 1px solid #e2e8f0 !important;
    background: #fafbfe;
    display: flex;
    padding: 0;
    margin: 0;
    flex-wrap: nowrap;
}
.view-cart-tabs .nav-item { list-style: none; }
.view-cart-tabs .nav-link {
    padding: 12px 20px !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    color: #64748b !important;
    border: none !important;
    border-bottom: 2px solid transparent !important;
    border-radius: 0 !important;
    background: none !important;
    white-space: nowrap;
    transition: color 0.15s, border-color 0.15s;
}
.view-cart-tabs .nav-link.active {
    color: var(--cor-primaria, var(--brand-primary)) !important;
    border-bottom-color: var(--cor-primaria, var(--brand-primary)) !important;
}
.view-cart-tabs .tab-content { padding: 20px; }

/* ── Order Summary ── */
.secondary-cart-sidebar #orderSummary {
    background: #fff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 16px !important;
    overflow: hidden;
    box-shadow: 0 4px 20px color-mix(in srgb, var(--brand-secondary) 9%, transparent) !important;
    padding: 0 !important;
}
.prism-summary-heading {
    background: var(--gradiente, linear-gradient(to right, var(--brand-secondary), var(--brand-primary))) !important;
    color: #fff !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    padding: 17px 22px !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}
.prism-summary-ssl {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.75);
    display: flex;
    align-items: center;
    gap: 4px;
    font-weight: 500;
}
.secondary-cart-sidebar .summary-container {
    padding: 20px 22px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.secondary-cart-sidebar .subtotal {
    display: flex;
    justify-content: space-between;
    font-size: 0.88rem;
    color: #475569;
    padding: 0 !important;
    border: none !important;
    background: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
}
.secondary-cart-sidebar .subtotal .float-right { font-weight: 600; color: #1e293b; }
.secondary-cart-sidebar .bordered-totals {
    border-top: 1px solid #e2e8f0 !important;
    border-bottom: 1px solid #e2e8f0 !important;
    border-left: none !important;
    border-right: none !important;
    background: none !important;
    border-radius: 0 !important;
    padding: 10px 0 !important;
    box-shadow: none !important;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.secondary-cart-sidebar .bordered-totals .clearfix {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    color: #475569;
}
.secondary-cart-sidebar .bordered-totals .float-right { font-weight: 600; color: #1e293b; }
.prism-discount-val { color: #16a34a !important; }
.secondary-cart-sidebar .recurring-totals {
    background: #fff !important;
    border-radius: 10px !important;
    padding: 12px 14px !important;
    border: none !important;
    box-shadow: none !important;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    font-size: 0.84rem;
    color: #475569;
}
.secondary-cart-sidebar .recurring-totals .float-left {
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #94a3b8;
    padding-top: 2px;
    white-space: nowrap;
    margin-right: 12px;
}
.secondary-cart-sidebar .recurring-charges { text-align: right; }
.secondary-cart-sidebar .recurring-charges > span {
    display: block;
    font-size: 0.83rem;
    color: #475569;
    line-height: 1.7;
}
.secondary-cart-sidebar .recurring-charges .cost {
    font-weight: 700;
    color: #1e293b;
}
.secondary-cart-sidebar .total-due-today {
    background: var(--cor-secundaria, var(--brand-secondary)) !important;
    border-radius: 12px !important;
    padding: 14px 18px !important;
    margin-left: 5px !important;
    margin-right: 5px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    border: none !important;
    box-shadow: none !important;
}
.secondary-cart-sidebar .total-due-today .amt {
    color: #fff !important;
    font-size: 1.35rem !important;
    font-weight: 800 !important;
}
.secondary-cart-sidebar .total-due-today > span:not(.amt) {
    color: rgba(255,255,255,0.8) !important;
    font-size: 0.82rem !important;
}
.secondary-cart-sidebar .btn-checkout {
    display: flex !important;
    width: calc(100% - 10px) !important;
    margin-left: 5px !important;
    margin-right: 5px !important;
    background: linear-gradient(135deg, #16a34a, #15803d) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 13px 0 !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 10px !important;
    box-shadow: 0 4px 16px rgba(22,163,74,0.3) !important;
    text-decoration: none !important;
    margin-top: 4px;
    transition: filter 0.18s, box-shadow 0.18s;
}
.secondary-cart-sidebar .btn-checkout:hover {
    filter: brightness(1.07);
    box-shadow: 0 6px 20px rgba(22,163,74,0.38) !important;
    color: #fff !important;
}
.secondary-cart-sidebar .text-right { text-align: center !important; }
.secondary-cart-sidebar .btn-continue-shopping {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    font-size: 0.82rem !important;
    color: var(--cor-primaria, var(--brand-primary)) !important;
    margin-top: 10px !important;
    text-decoration: none !important;
}
.secondary-cart-sidebar .btn-continue-shopping:hover { text-decoration: underline !important; }
.prism-summary-secure-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 0.75rem;
    color: #94a3b8;
    margin-top: 6px;
    padding-top: 10px;
    border-top: 1px solid #f1f5f9;
}

/* ── Botão "Esvaziar carrinho" — link sutil, mesmo estilo que "Continuar comprando" ── */
.empty-cart {
    display: flex !important;
    justify-content: flex-end !important;
    padding: 6px 0 2px !important;
    margin-bottom: 16px !important;
}
.empty-cart .btn,
.empty-cart .btn-link,
#btnEmptyCart {
    -webkit-appearance: none !important;
    appearance: none !important;
    background: none !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: #94a3b8 !important;
    font-size: 0.78rem !important;
    font-weight: 500 !important;
    padding: 4px 6px !important;
    border-radius: 5px !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 5px !important;
    text-decoration: none !important;
    text-shadow: none !important;
    letter-spacing: 0 !important;
    transition: color 0.15s, background 0.15s;
}
.empty-cart .btn:hover,
.empty-cart .btn-link:hover,
#btnEmptyCart:hover {
    color: #ef4444 !important;
    background-color: #fef2f2 !important;
}

/* ── Botão de promo com gradiente ── */
#frmViewCartPromo button[type="submit"],
#frmViewCartPromo .btn-default,
#frmViewCartPromo .btn-block {
    background: var(--gradiente, linear-gradient(to right, var(--brand-secondary), var(--brand-primary))) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 11px 20px !important;
    font-weight: 600 !important;
    font-size: 0.9rem !important;
    box-shadow: none !important;
    transition: filter 0.18s;
}
#frmViewCartPromo button[type="submit"]:hover {
    filter: brightness(1.1);
}

/* ===================================================================
   9. Página de Domínio — remove caixa cinza do tema
   ───────────────────────────────────────────────────────────────────
   O tema aplica background/border/padding via:
     #order-standard_cart .cart-body form>div:not(…)  — especificidade (1,4,2)
   Os seletores abaixo têm especificidade (2,2,0) → 2 IDs batem 1 ID → ganham.
   =================================================================== */
#order-standard_cart .cart-body #frmProductDomain > .domain-selection-options,
#order-standard_cart .cart-body #frmProductDomainSelections > #DomainSearchResults {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin-bottom: 0 !important;
    box-shadow: none !important;
}

/* ===================================================================
   10b. viewcart — sidebar de categorias oculta
   ───────────────────────────────────────────────────────────────────
   A sidebar de categorias/ações (.cart-sidebar) é visível por padrão
   em ≥768px (regra da seção 8). No viewcart não faz sentido mostrá-la:
   a revisão do pedido não precisa de navegação de categorias.
   body:has(.secondary-cart-body) detecta exatamente o viewcart.tpl.
   =================================================================== */
body:has(.secondary-cart-body) #order-standard_cart > .row > .cart-sidebar {
    display: none !important;
}

/* ===================================================================
   8b. Checkout — Formulários, Campos e Gateways de Pagamento
   ───────────────────────────────────────────────────────────────────
   Regras migradas de prism/custom.css para centralizar todo o CSS
   de carrinho neste arquivo e eliminar batalhas de especificidade.
   =================================================================== */

/* Seções do formulário como cards (checkout, configureproduct)
   Especificidade (1,4,2) — overrides específicos de página usam (2,2,0) e ganham. */
#order-standard_cart .cart-body form > div:not(.text-center):not(.marketing-email-optin):not(.sub-heading):not(.clearfix) {
    background: #f8f8f8;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 20px 25px;
    margin-bottom: 20px;
    margin-top: 20px;
}
@media (max-width: 767px) {
    #order-standard_cart .cart-body form > div:not(.text-center):not(.marketing-email-optin):not(.sub-heading):not(.clearfix) {
        padding: 15px;
        margin-bottom: 15px;
    }
}

/* Botão "Complete Order" — container sem caixa */
.text-center:has(#btnCompleteOrder) {
    background: transparent !important;
    border: none !important;
    padding: 20px 0 !important;
    margin-top: 0 !important;
}

/* Card especial para Payment Details */
#order-standard_cart .cart-body form > div:has(#totalDueToday) {
    background: #f9fafb;
    border: 2px solid #e5e7eb;
}

/* Subtítulos com linhas laterais */
.sub-heading {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 5px 0 40px 0 !important;
    position: relative !important;
}
.sub-heading span {
    display: flex !important;
    align-items: center !important;
    gap: 20px !important;
    background: transparent !important;
    color: #374151 !important;
    font-size: 1.1rem !important;
    font-weight: 400 !important;
    padding: 0 !important;
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    transform: none !important;
}
.sub-heading span:before,
.sub-heading span:after {
    content: '' !important;
    flex: 1 !important;
    height: 1px !important;
    background: linear-gradient(to right, transparent, #d1d5db 20%, #d1d5db 80%, transparent) !important;
}
@media (max-width: 767px) {
    .sub-heading { margin: 15px 0 35px 0 !important; }
    .sub-heading span { font-size: 1rem !important; gap: 15px !important; }
}

/* Campos do formulário — padrão do tema */
#order-standard_cart .field,
#order-standard_cart .form-control {
    border: 1.5px solid #cbd5e1 !important;
    border-radius: 10px !important;
    background: #fff !important;
    color: #1e293b !important;
    font-size: 0.9rem !important;
    padding: 10px 14px !important;
    height: auto !important;
    box-shadow: none !important;
    transition: border-color 0.15s, box-shadow 0.15s !important;
}
#order-standard_cart .form-control:focus,
#order-standard_cart .field:focus {
    background: #fff !important;
    border-color: var(--cor-primaria, var(--brand-primary)) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 9%, transparent) !important;
    outline: none !important;
}
#order-standard_cart .form-control::placeholder,
#order-standard_cart .field::placeholder {
    color: #94a3b8 !important;
    font-size: 0.88rem !important;
}
/* Inputs com ícone: padding para não sobrepor */
#order-standard_cart .prepend-icon .field,
#order-standard_cart .prepend-icon .form-control {
    padding-left: 40px !important;
}
/* Campo de telefone: intl-tel-input adiciona bandeira + DDI (~90px) — sobrescreve o 40px */
#order-standard_cart #inputPhone {
    padding-left: 90px !important;
}
/* Ícones de campo */
#order-standard_cart .field-icon {
    color: var(--cor-primaria, var(--brand-primary)) !important;
    opacity: 0.6;
}
/* Select: mantém seta nativa */
#order-standard_cart select.form-control,
#order-standard_cart select.field {
    padding-right: 28px !important;
    cursor: pointer;
}

/* Checkbox inline */
#order-standard_cart label.checkbox-inline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 400;
    font-size: 0.9rem;
    cursor: pointer;
}
@media (max-width: 767px) {
    #order-standard_cart label.checkbox-inline { font-size: 0.82rem; }
}

/* Gateway de pagamento */
#paymentGatewaysContainer {
    background: #fff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 8px !important;
    padding: 20px 25px !important;
    margin-bottom: 20px !important;
}
@media (max-width: 767px) {
    #paymentGatewaysContainer { padding: 15px !important; }
}

/* Área de cartão de crédito */
#creditCardInputFields {
    background: #f8f9fa !important;
    border: 2px solid var(--cor-primaria, var(--brand-primary)) !important;
    border-radius: 6px !important;
    padding: 20px !important;
    margin-top: 15px !important;
}
@media (max-width: 767px) {
    #creditCardInputFields { padding: 15px !important; }
}

/* No checkout: paymentGatewayInput e clearfix sem card */
body:has(#frmCheckout) #paymentGatewayInput,
body:has(#frmCheckout) .clearfix {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Oculta sidebar e centraliza conteúdo na página de checkout */
body:has(#frmCheckout) #order-standard_cart > .row > .cart-sidebar {
    display: none !important;
}
body:has(#frmCheckout) #order-standard_cart > .row > .cart-body {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    float: none !important;
}

/* Reduz H1 dos produtos (herdado do tema; mantido para consistência) */
#order-standard_cart .products .product h1,
#order-standard_cart .products .header h1,
.header-lined h1.font-size-36 {
    font-size: 28px !important;
    font-weight: 600;
}
@media (max-width: 767px) {
    #order-standard_cart .products .product h1,
    #order-standard_cart .products .header h1,
    .header-lined h1.font-size-36 {
        font-size: 26px !important;
        font-weight: 600;
    }
}

/* ===================================================================
   11. Checkout — Layout Dois Painéis
   =================================================================== */

/* Anula o max-width 760px do old checkout quando o novo layout está ativo */
body:has(.prism-checkout-layout) #order-standard_cart > .row > .cart-body {
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Anula o estilo de card cinza gerado pela seção 8b para os novos section-cards */
#order-standard_cart .cart-body form > div.prism-section-card {
    background: #fff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 16px !important;
    padding: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 20px !important;
    box-shadow: 0 2px 10px color-mix(in srgb, var(--brand-secondary) 5%, transparent) !important;
    overflow: hidden !important;
}
/* Hook output e captcha sem card */
#order-standard_cart .cart-body form > div.prism-hook-output {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* ── Layout dois painéis ── */
.prism-checkout-layout {
    display: flex;
    gap: 28px;
    align-items: flex-start;
    margin-top: 20px;
}
.prism-checkout-main {
    flex: 1;
    min-width: 0;
}
.prism-checkout-aside {
    width: 320px;
    flex-shrink: 0;
    position: sticky;
    top: 24px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ── Section card ── */
.prism-section-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 10px color-mix(in srgb, var(--brand-secondary) 5%, transparent);
    margin-bottom: 20px;
}
.prism-section-hdr {
    padding: 14px 22px;
    border-bottom: 1px solid rgba(255,255,255,0.12);
    display: flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, var(--brand-secondary) 0%, var(--brand-primary) 100%);
}
.prism-section-num {
    width: 26px;
    height: 26px;
    background: rgba(255,255,255,0.18);
    border-radius: 50%;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.prism-section-hdr h3 {
    font-size: 0.95rem;
    font-weight: 700;
    color: #fff;
    margin: 0;
}
.prism-section-body {
    padding: 22px;
}

/* Sub-seção dentro do body */
.prism-sub-section-title {
    font-size: 0.75rem;
    font-weight: 700;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    margin: 22px 0 14px;
    padding-top: 18px;
    border-top: 1px solid color-mix(in srgb, var(--brand-secondary) 6%, white);
}

/* Remove border-right injetado pelo all.min.css do WHMCS no container de conta */
.account-select-container { border-right: none !important; }

/* ── Cards de seleção de conta ── */
.prism-acct-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.prism-acct-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    margin: 0;
    width: 100%;
}
.prism-acct-card input[type="radio"] {
    display: none;
}
.prism-acct-card:hover {
    border-color: var(--cor-primaria);
    background: color-mix(in srgb, var(--brand-primary) 4%, white);
}
.prism-acct-card--active {
    border-color: var(--cor-primaria) !important;
    background: color-mix(in srgb, var(--brand-primary) 7%, white) !important;
}
.prism-acct-card--disabled {
    opacity: 0.55;
    cursor: not-allowed;
}
.prism-acct-card--new .prism-acct-avatar {
    background: #f1f5f9;
    color: #94a3b8;
}
.prism-acct-avatar {
    width: 42px;
    height: 42px;
    background: linear-gradient(135deg, var(--brand-secondary) 0%, var(--brand-primary) 100%);
    border-radius: 10px;
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.prism-acct-info {
    flex: 1;
    min-width: 0;
}
.prism-acct-name {
    font-size: 0.9rem;
    font-weight: 600;
    color: #1e293b;
}
.prism-acct-addr {
    font-size: 0.78rem;
    color: #64748b;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.prism-acct-badges {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}
.prism-acct-badge {
    font-size: 0.68rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 20px;
}
.prism-badge-curr  { background: #eff6ff; color: color-mix(in srgb, var(--brand-primary) 97%, white); }
.prism-badge-closed { background: #fef2f2; color: #dc2626; }
.prism-acct-arrow {
    color: #cbd5e1;
    font-size: 0.7rem;
    flex-shrink: 0;
}
.prism-acct-card--active .prism-acct-arrow { color: var(--cor-primaria); }

/* ── Total de pagamento ── */
.prism-payment-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 10px;
    padding: 14px 18px;
    margin-bottom: 20px;
}
.prism-payment-total-label { font-size: 0.9rem; font-weight: 600; color: #166534; }
.prism-payment-total-value { font-size: 1.1rem; font-weight: 800; color: #15803d; }

/* ── Gateway de pagamento como tabs ── */
#paymentGatewaysContainer {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin-bottom: 16px !important;
}
.prism-gateway-label {
    font-size: 0.75rem;
    font-weight: 700;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    margin-bottom: 10px;
}
.prism-gateway-tabs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}
/* 3º (ou qualquer ímpar) sozinho na linha → ocupa as 2 colunas.
   Com um 4º gateway, ele fica ao lado do 3º normalmente. */
.prism-gateway-tabs .prism-gateway-tab:nth-child(odd):last-child {
    grid-column: 1 / -1;
}
.prism-gateway-tab {
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    padding: 12px 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: border-color 0.15s, background 0.15s;
    margin: 0;
    font-weight: 400;
}
.prism-gateway-tab:hover {
    border-color: var(--cor-primaria);
    background: color-mix(in srgb, var(--brand-primary) 4%, white);
}
.prism-gateway-tab--active {
    border-color: var(--cor-primaria) !important;
    background: color-mix(in srgb, var(--brand-primary) 7%, white) !important;
}
.prism-gateway-tab input[type="radio"] {
    accent-color: var(--cor-primaria);
    flex-shrink: 0;
}
.prism-gateway-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    flex-shrink: 0;
    background: #eff6ff;
    color: color-mix(in srgb, var(--brand-primary) 97%, white);
}
/* Nome do gateway: título + subtítulo gerados por JS */
.prism-gateway-name {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.prism-gw-title {
    font-size: 0.87rem;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.2;
}
.prism-gw-sub {
    font-size: 0.72rem;
    font-weight: 400;
    color: #64748b;
    line-height: 1.2;
}

/* ── Campos de cartão de crédito ── */
#creditCardInputFields.prism-cc-form {
    background: var(--brand-tint-1) !important;
    border: 1.5px solid color-mix(in srgb, var(--brand-primary) 15%, white) !important;
    border-radius: 14px !important;
    padding: 20px !important;
    margin-top: 16px !important;
}

/* Rótulo "Dados do cartão / Card Information" — gerado pelo template (bilíngue) */
#creditCardInputFields.prism-cc-form .prism-cc-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--cor-primaria, var(--brand-primary));
    text-transform: uppercase;
    letter-spacing: 0.07em;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid color-mix(in srgb, var(--brand-primary) 15%, white);
}
#creditCardInputFields.prism-cc-form .prism-cc-header i {
    font-size: 0.85rem;
    opacity: 0.8;
}

/* Inputs dentro do bloco CC */
#creditCardInputFields.prism-cc-form .form-control,
#creditCardInputFields.prism-cc-form .field {
    border: 1.5px solid #cbd5e1 !important;
    border-radius: 10px !important;
    background: #fff !important;
    color: #1e293b !important;
    font-size: 0.9rem !important;
    padding: 10px 14px !important;
    height: auto !important;
    box-shadow: none !important;
    transition: border-color 0.15s, box-shadow 0.15s !important;
}
/* Inputs com ícone (prepend-icon): restaura padding-left para o ícone não cobrir o placeholder */
#creditCardInputFields.prism-cc-form .prepend-icon .form-control,
#creditCardInputFields.prism-cc-form .prepend-icon .field {
    padding-left: 40px !important;
}
#creditCardInputFields.prism-cc-form .form-control:focus,
#creditCardInputFields.prism-cc-form .field:focus {
    border-color: var(--cor-primaria) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-primary) 10%, transparent) !important;
    outline: none !important;
}
#creditCardInputFields.prism-cc-form .form-control::placeholder,
#creditCardInputFields.prism-cc-form .field::placeholder {
    color: #94a3b8 !important;
    font-size: 0.88rem !important;
}

/* Ícone de campo (prepend-icon) — cor da marca */
#creditCardInputFields.prism-cc-form .field-icon {
    color: var(--cor-primaria, var(--brand-primary)) !important;
    opacity: 0.75;
}

/* Input dentro de .input-group (CVV com botão "?") */
#creditCardInputFields.prism-cc-form .input-group .form-control,
#creditCardInputFields.prism-cc-form .input-group .field {
    border-radius: 10px 0 0 10px !important;
}
/* Botão "?" do CVV */
#creditCardInputFields.prism-cc-form .input-group-btn .btn,
#creditCardInputFields.prism-cc-form .input-group-append .btn {
    border: 1.5px solid #cbd5e1 !important;
    border-left: none !important;
    border-radius: 0 10px 10px 0 !important;
    background: #f1f5f9 !important;
    color: #64748b !important;
    font-weight: 700 !important;
    font-size: 0.85rem !important;
    box-shadow: none !important;
    height: auto !important;
    padding: 0 12px !important;
    transition: background 0.15s !important;
}
#creditCardInputFields.prism-cc-form .input-group-btn .btn:hover,
#creditCardInputFields.prism-cc-form .input-group-append .btn:hover {
    background: #e2e8f0 !important;
    color: var(--cor-primaria) !important;
}

/* Radio "Inserir novo cartão" */
#creditCardInputFields.prism-cc-form ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 12px 0 !important;
}
#creditCardInputFields.prism-cc-form ul li .radio-inline {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.88rem;
    font-weight: 500;
    color: #475569;
    cursor: pointer;
}
#creditCardInputFields.prism-cc-form ul li input[type="radio"] {
    accent-color: var(--cor-primaria);
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* Seção de salvar cartão */
#creditCardInputFields.prism-cc-form #newCardSaveSettings {
    margin-top: 6px;
    padding-top: 14px;
    border-top: 1px solid #e2e8f0;
}
#creditCardInputFields.prism-cc-form #newCardSaveSettings label {
    font-size: 0.88rem;
    color: #475569;
    font-weight: 400;
}

/* Mensagem de erro — display gerenciado pelo WHMCS JS (não forçar display:block) */
#creditCardInputFields.prism-cc-form .field-error-msg {
    font-size: 0.78rem !important;
    color: #dc2626 !important;
    margin-top: 4px !important;
}

/* Stripe Elements container: Bootstrap 4 col-md-8 + offset-md-2 limitam a 66% + 16.7% margem.
   Expandindo para largura total do bloco CC sem interferir nos campos do Stripe. */
#creditCardInputFields.prism-cc-form .stripe-cards-inputs {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* ── TOS e botão de submit ── */
.prism-submit-area {
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid color-mix(in srgb, var(--brand-secondary) 6%, white);
}
.prism-tos-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 15px !important;
    color: #475569;
    margin-bottom: 14px;
    cursor: pointer;
    font-weight: 400;
}
.prism-tos-row input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--cor-primaria);
    flex-shrink: 0;
}
.prism-tos-row a { color: var(--cor-primaria); font-weight: 600; text-decoration: none; }
.prism-tos-row a:hover { text-decoration: underline; }

.prism-btn-complete {
    width: 100% !important;
    padding: 16px !important;
    background: linear-gradient(135deg, var(--brand-secondary) 0%, var(--brand-primary) 100%) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 12px !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    cursor: pointer;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px;
    transition: opacity 0.15s;
    text-decoration: none !important;
}
.prism-btn-complete:hover { opacity: 0.9; color: #fff !important; }

/* Mensagem de segurança abaixo do botão */
.prism-security-msg {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: #fefce8;
    border: 1px solid #fde68a;
    border-radius: 10px;
    padding: 12px 16px;
    font-size: 0.82rem;
    color: #92400e;
    margin-top: 14px;
}
.prism-security-msg i { color: #d97706; font-size: 1rem; flex-shrink: 0; margin-top: 1px; }

/* ── Resumo do pedido (aside) ── */
.prism-summary-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 2px 10px color-mix(in srgb, var(--brand-secondary) 6%, transparent);
}
.prism-summary-hdr {
    background: linear-gradient(135deg, var(--brand-secondary) 0%, var(--brand-primary) 100%);
    padding: 14px 20px;
}
.prism-summary-hdr h4 {
    color: #fff;
    font-size: 0.9rem;
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
.prism-summary-items { padding: 0 20px; }
.prism-summary-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid #f1f5f9;
}
.prism-summary-item:last-child { border-bottom: none; }
.prism-summary-item-info { flex: 1; min-width: 0; }
.prism-summary-item-name { font-size: 0.875rem; font-weight: 600; color: #1e293b; }
.prism-summary-item-domain { font-size: 0.75rem; color: #64748b; font-family: monospace; margin-top: 2px; }
.prism-summary-item-cycle { font-size: 0.72rem; color: #94a3b8; margin-top: 3px; }
.prism-summary-item-price { font-size: 0.9rem; font-weight: 700; color: var(--brand-secondary); flex-shrink: 0; white-space: nowrap; }
.prism-summary-actions {
    padding: 14px 20px;
    border-top: 1px solid #e2e8f0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.prism-btn-continue,
.prism-btn-empty {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    background: none;
    border: none;
    cursor: pointer;
    width: 100%;
    text-align: left;
    padding: 8px 0;
    text-decoration: none;
}
.prism-btn-continue { color: #64748b; }
.prism-btn-continue:hover { color: var(--cor-primaria); }
.prism-btn-empty { color: #dc2626; }
.prism-btn-empty:hover { text-decoration: underline; }

/* Badge de checkout seguro */
.prism-secure-badge {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 10px;
    padding: 12px 16px;
}
.prism-secure-badge i { color: #16a34a; font-size: 1rem; flex-shrink: 0; }
.prism-secure-badge span { font-size: 0.8rem; color: #166534; font-weight: 500; }

/* ── Responsivo ── */
@media (max-width: 991px) {
    .prism-checkout-layout {
        flex-direction: column;
    }
    .prism-checkout-aside {
        width: 100%;
        position: static;
        order: 2;
    }
    .prism-checkout-main {
        order: 1;
        width: 100%;
    }
}
@media (max-width: 575px) {
    .prism-acct-addr { display: none; }
    /* No mobile muito estreito, 1 gateway por linha */
    .prism-gateway-tabs { grid-template-columns: 1fr; }
    .prism-gateway-tabs .prism-gateway-tab:nth-child(odd):last-child { grid-column: auto; }
    .prism-section-body { padding: 16px; }
    .prism-payment-total { flex-direction: column; align-items: flex-start; gap: 4px; }
}

/* ================================================================
   SEÇÃO 12 — Checkout não-logado: wrappers, aviso inicial, CEP
   ================================================================ */

/* ── Wrappers dos containers (containerNewUserSignup etc.) — sem box cinza ── */
#order-standard_cart .cart-body form > #containerNewUserSignup,
#order-standard_cart .cart-body form > #containerNewUserSecurity,
#order-standard_cart .cart-body form > #containerExistingUserSignin {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 20px !important;
    border-radius: 0 !important;
}
/* Section cards dentro dos wrappers — card branco padrão */
#order-standard_cart .cart-body form #containerNewUserSignup .prism-section-card,
#order-standard_cart .cart-body form #containerNewUserSecurity .prism-section-card,
#order-standard_cart .cart-body form #containerExistingUserSignin .prism-section-card {
    background: #fff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 16px !important;
    box-shadow: 0 2px 10px color-mix(in srgb, var(--brand-secondary) 5%, transparent) !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin-bottom: 0 !important;
}

/* ── Barra "Por favor, informe..." + botão "Já registrado?" ── */
#order-standard_cart .cart-body .already-registered {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    background: var(--brand-secondary) !important;
    background: linear-gradient(135deg, var(--brand-secondary) 0%, color-mix(in srgb, var(--brand-primary) 53%, var(--brand-secondary)) 100%) !important;
    border-radius: 14px !important;
    padding: 14px 20px !important;
    margin-bottom: 20px !important;
    float: none !important;
    overflow: hidden !important;
}
#order-standard_cart .cart-body .already-registered p {
    color: rgba(255,255,255,0.85) !important;
    margin: 0 !important;
    font-size: 0.88rem !important;
    overflow: visible !important;
    flex: 1 !important;
}
#order-standard_cart .cart-body .already-registered .pull-right,
#order-standard_cart .cart-body .already-registered .float-right {
    float: none !important;
}
#btnAlreadyRegistered,
#btnNewUserSignup {
    background: rgba(255,255,255,0.12) !important;
    border: 1.5px solid rgba(255,255,255,0.5) !important;
    color: #fff !important;
    border-radius: 10px !important;
    padding: 7px 16px !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    transition: background 0.15s !important;
    flex-shrink: 0 !important;
}
#btnAlreadyRegistered:hover,
#btnNewUserSignup:hover {
    background: rgba(255,255,255,0.25) !important;
    color: #fff !important;
}
@media (max-width: 575px) {
    #order-standard_cart .cart-body .already-registered {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
    #btnAlreadyRegistered, #btnNewUserSignup { width: 100% !important; text-align: center !important; }
}

/* ── Notice do CEP (#cep-hint injetado pelo hook) ── */
#cep-hint {
    background: #eff6ff !important;
    border: 1px solid #bfdbfe !important;
    border-radius: 10px !important;
    padding: 10px 14px !important;
    margin-bottom: 14px !important;
    margin-top: 0 !important;
    font-size: 0.84rem !important;
    color: #1e40af !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 8px !important;
    line-height: 1.45 !important;
    width: 100% !important;
    position: static !important;
    float: none !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    /* Cancela estilos inline do hook */
    top: auto !important;
    left: auto !important;
    right: auto !important;
}

/* ── Bloco de destaque CPF/CNPJ ── */
.prism-cpf-block {
    background: var(--brand-tint-2);
    border: 1px solid #bfdbfe;
    border-radius: 12px;
    padding: 16px 18px 12px;
    margin-top: 12px;
    margin-bottom: 4px;
}
.prism-cpf-block-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #3b82f6;
    margin-bottom: 10px;
}
.prism-cpf-block .prism-cpf-field {
    margin-bottom: 6px;
}
.prism-cpf-block .prism-cpf-field > label {
    font-weight: 600;
    color: #1e40af;
    font-size: 0.88rem;
    margin-bottom: 6px;
}
.prism-cpf-block .prism-cpf-field .form-control {
    width: 100% !important;
    max-width: 100% !important;
}
.prism-cpf-block .field-help-text {
    color: #64748b;
    font-size: 0.8rem;
    display: block;
    margin-top: 4px;
}

/* Estado "obrigatório" quando Pix/Boleto está selecionado */
.prism-cpf-block.prism-cpf-required {
    border-color: #fbbf24;
    background: #fffbeb;
}
/* O texto vem do JS do checkout.tpl, não daqui: em ::after ele ficava preso em
   português e a loja também roda em inglês. */
.prism-cpf-block.prism-cpf-required .prism-cpf-block-label .prism-cpf-req-txt {
    color: #b45309;
    font-weight: 600;
}
/* Input com erro de validação — ID no seletor para ganhar da regra global .form-control !important */
#order-standard_cart .prism-cpf-block input.prism-input-error {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15) !important;
    background: #fff5f5 !important;
}
/* Mensagem de erro inline */
.prism-cpf-error {
    display: block;
    margin-top: 5px;
    font-size: 0.82rem;
    color: #dc2626;
    font-weight: 500;
}

/* ── Toggle ver/ocultar senha ── */
.prism-pwd-wrap {
    position: relative;
    display: block;
}
.prism-pwd-wrap .form-control { padding-right: 40px !important; }
.prism-pwd-toggle {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
    color: #cbd5e1;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    font-size: 0.85rem;
    z-index: 10;
    transition: color 0.15s;
}
.prism-pwd-toggle:hover,
.prism-pwd-toggle:focus { color: #64748b; outline: none !important; box-shadow: none !important; }

/* ── Seta dos selects do carrinho ──
   O css/all.css aplica -webkit-appearance:none em .prepend-icon .field e não
   coloca nada no lugar, então todo select do carrinho ficava sem indicação
   visual de que abre uma lista: país, país do contato de domínio e o estado
   quando o StatesDropdown.js o converte em select.

   O appearance é zerado nos três prefixos de propósito. Sem isso, um navegador
   que ignorasse a regra do all.css desenharia a seta nativa e ficariam duas.

   Chevron em SVG inline (data:), sem arquivo nem requisição extra. */
#order-standard_cart .prepend-icon select.field,
#order-standard_cart .prepend-icon select.form-control {
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    /* Os !important abaixo são obrigatórios: a regra de campos, mais acima
       neste arquivo, usa `background: #fff !important`. O shorthand zera o
       background-image, então sem !important o chevron nunca aparecia. */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    background-size: 12px 8px !important;
    background-color: #fff !important;
    padding-right: 38px !important;
    cursor: pointer;
}