/* ============================================================================
   personalizados-nova.css — ajustes de LAYOUT da página de produto personalizado
   refatorada (produtos-personalizados-view-nova.php / ação personalizadosnovo()).
   Carregado POR CIMA de personalizados.css, escopado em .perso-nova.

   IMPORTANTE: a ÁREA DO ARQUIVO PERSONALIZADO (FilePond/webcam/QR) NÃO é tocada.
   Aqui mexemos só na SELEÇÃO DE GRADE e nos CAMPOS. Cor do tema via var(--mc-cor).

   Grade: o markup (radios + iCheck) é PRESERVADO — o JS depende dos eventos do iCheck
   (ifChecked/ifClicked) para a amarração de grade. Viramos chips SÓ por CSS: escondemos
   o quadradinho do iCheck e estilizamos o label como chip; o estado ativo usa a classe
   .checked que o próprio iCheck aplica.
   ============================================================================ */

/* selo "PERSONALIZADO" — respiro entre o ícone de check e o texto (vinham colados) */
.perso-nova h3.incaps .color-in { margin-right: 7px; }

/* ===== BARRA DE NAVEGAÇÃO (breadcrumb) + faixa de aviso =====
   A coluna do Bootstrap recua 15px de cada lado e deixava as duas mais estreitas
   que o conteúdo do produto. Zerando o recuo, ocupam a largura inteira do
   container e alinham com o título/preço/CTA abaixo. */
.perso-nova .breadcrumbDiv,
.perso-nova .rp-aviso-col { padding-left: 0; padding-right: 0; }

/* ===== SELEÇÃO DE GRADE → chips (CSS-only sobre o iCheck) ===== */

/* remove o hr herdado do .productFilter base (border-top/bottom #DDD):
   não faz sentido a linha colada abaixo do título da grade/quantidade —
   as telas novas separam por espaçamento, não por régua. */
.perso-nova .productFilterLook2 {
	border-top: 0 !important; border-bottom: 0 !important;
	padding: 0 !important;
}

/* o select de quantidade vive numa .col-lg-12 (padding 15px do Bootstrap) que o recuava
   à direita do título/chips. Zera o padding p/ alinhar à mesma margem.
   .col-lg-12 é exclusivo do bloco de quantidade — os chips de grade não usam .col-* —,
   então não mexemos no .filterBox (que .grade1/2/3 também usam p/ os chips). */
.perso-nova .productFilterLook2 .col-lg-12 {
	padding-left: 0 !important; padding-right: 0 !important;
}

/* ===== RITMO VERTICAL UNIFORME =====
   título → seu controle: 8px · controle → próximo bloco: 20px.
   Vale p/ todos os títulos .incaps (grade "MATERIAL" e "QUANTIDADE") e p/ os
   controles (linha de chips e .col-lg-12 do select). */
.perso-nova .productFilterLook2 > h3.incaps,
.perso-nova .productFilterLook2 .filterBox > h3.incaps {
	margin: 0 0 8px !important;
}

/* container das opções de uma grade: vira linha de chips que quebra.
   margin-bottom 20px = respiro p/ o próximo bloco (título "QUANTIDADE"). */
.perso-nova .grade1,
.perso-nova .grade2,
.perso-nova .grade3 {
	display: flex !important; flex-wrap: wrap; gap: 8px; margin: 0 0 20px;
}
/* cada opção (filterBox) sem largura/float herdados */
.perso-nova .grade1 .filterBox,
.perso-nova .grade2 .filterBox,
.perso-nova .grade3 .filterBox {
	width: auto; float: none; margin: 0; padding: 0;
}

/* esconde o quadradinho do iCheck (mantido no DOM para o JS, só não aparece) */
.perso-nova .grade1 .iradio_square-green,
.perso-nova .grade2 .iradio_square-green,
.perso-nova .grade3 .iradio_square-green {
	position: absolute !important; opacity: 0; width: 0; height: 0; margin: 0; overflow: hidden;
}

/* o label vira o chip */
.perso-nova .i-checks .gradePri,
.perso-nova .i-checks .gra2,
.perso-nova .i-checks .gra3 {
	display: inline-flex; align-items: center; justify-content: center;
	margin: 0; padding: 9px 16px; min-height: 40px;
	border: 1.5px solid #d6dae0; border-radius: 8px; background: #fff;
	font-size: 13.5px; font-weight: 600; color: #3a3f49; line-height: 1.2;
	cursor: pointer; user-select: none;
	transition: border-color .15s ease, color .15s ease, background .15s ease, box-shadow .15s ease;
}
.perso-nova .i-checks .gradePri:hover,
.perso-nova .i-checks .gra2:hover,
.perso-nova .i-checks .gra3:hover {
	border-color: var(--mc-cor, #2c2f36); color: var(--mc-cor, #2c2f36);
}

/* estado SELECIONADO: o iCheck põe .checked no wrapper .iradio_square-green dentro do label */
.perso-nova .i-checks .gradePri:has(.iradio_square-green.checked),
.perso-nova .i-checks .gra2:has(.iradio_square-green.checked),
.perso-nova .i-checks .gra3:has(.iradio_square-green.checked) {
	border-color: var(--mc-cor, #2c2f36); background: var(--mc-cor, #2c2f36); color: #fff;
	box-shadow: 0 2px 8px rgba(0,0,0,.12);
}

/* opção DESABILITADA (indisponível) — radio com disabled → iCheck add .disabled */
.perso-nova .i-checks .gradePri:has(.iradio_square-green.disabled),
.perso-nova .i-checks .gra2:has(.iradio_square-green.disabled),
.perso-nova .i-checks .gra3:has(.iradio_square-green.disabled) {
	opacity: .45; cursor: not-allowed; text-decoration: line-through;
	border-style: dashed; pointer-events: none;
}

/* ===== QUANTIDADE → linhas selecionáveis (cards) ===== */
/* a tabela de quantidade usa radios NATIVOS (.qtdProdutoQuantidade, fora do iCheck) com
   .change() no JS — preservamos o markup e usamos :checked nativo p/ destacar a linha. */
.perso-nova .table.align-middle { margin: 0; border: 0; }
.perso-nova .table.align-middle > thead { display: none; }     /* thead vazio */
.perso-nova .table.align-middle tbody tr {
	cursor: pointer; transition: background .15s ease;
}
/* cada <tr> vira um "card-linha": borda própria via box-shadow nas células de borda */
.perso-nova .table.align-middle tbody td {
	border: 1px solid #e4e6ea !important; border-left: 0 !important; border-right: 0 !important;
	padding: 10px 12px !important; vertical-align: middle !important; background: #fff;
}
.perso-nova .table.align-middle tbody td:first-child {
	border-left: 1px solid #e4e6ea !important; border-radius: 8px 0 0 8px; width: 40px; text-align: center;
	padding-left: 14px !important; padding-right: 4px !important;
}
.perso-nova .table.align-middle tbody td:last-child {
	border-right: 1px solid #e4e6ea !important; border-radius: 0 8px 8px 0; text-align: right;
}
/* espacinho menor entre linhas — mais compacto */
.perso-nova .table.align-middle { border-collapse: separate; border-spacing: 0 6px; }
/* radio nativo da quantidade — na cor do tema */
.perso-nova .qtdProdutoQuantidade[type="radio"] {
	width: 17px; height: 17px; margin: 0; accent-color: var(--mc-cor, #2c2f36); cursor: pointer;
}
/* linha selecionada (radio :checked) — destaca via :has */
.perso-nova .table.align-middle tbody tr:has(.qtdProdutoQuantidade:checked) td {
	border-color: var(--mc-cor, #2c2f36) !important; background: #f7f8fa;
}
.perso-nova .table.align-middle tbody tr:hover td { background: #f7f8fa; }
/* tipografia: qtd à esquerda em destaque; preço total + unitário juntos na MESMA linha à direita */
.perso-nova .table.align-middle tbody td:nth-child(2) { font-size: 15px; font-weight: 700; color: #1f2937; white-space: nowrap; }
.perso-nova .table.align-middle tbody td:last-child { line-height: 1.3; }
.perso-nova .table.align-middle tbody td:last-child span:first-child { font-size: 15px; font-weight: 800; color: #1f2937; }
.perso-nova .table.align-middle tbody td:last-child small { font-size: 12px; font-weight: 500; color: #9aa0ab; }
/* esconde o <br> entre total e unitário → ficam compactos (o unitário vira inline ao lado) */
.perso-nova .table.align-middle tbody td:last-child br { display: none; }
.perso-nova .table.align-middle tbody td:last-child small { margin-left: 6px; }

/* título "Quantidade" / "Campos Personalizados" — consistente com as outras telas novas */
.perso-nova h3.incaps {
	font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px;
	color: #6b7180; padding: 0; margin: 0 0 12px;
}

/* ===== CAMPOS PERSONALIZADOS ===== */
/* CRÍTICO: regras globais quebravam o bloco:
   - .incaps { float:left } fazia o título "Campos Personalizados" flutuar e os campos correrem ao lado;
   - .filterBox { display:inline-block; width:45% } espremia os campos em meia largura à direita.
   Neutralizamos só no nosso escopo (.perso-nova) — o bloco vira coluna full-width. */
.perso-nova .guto > .filterBox {
	display: block !important; width: 100% !important; margin: 0 !important;
}
.perso-nova .guto > .filterBox > h3.incaps {
	float: none !important; margin: 0 0 12px !important; width: auto;
}
/* bloco geral dos campos — remove o margin-top exagerado (60px inline → some) */
.perso-nova #blocos { margin-top: 12px !important; }
/* cada .bloco vem com max-height (= Altura do item, casando com a div da imagem) +
   overflow:auto inline → rola internamente quando há muitos campos. MANTEMOS isso.
   O problema era o overflow recortar a borda direita / o realce de foco (box-shadow 3px)
   dos inputs: damos padding interno (à direita p/ o scrollbar + foco) e contemos a largura. */
.perso-nova #blocos .bloco {
	width: 100% !important; box-sizing: border-box;
	padding: 3px 12px 3px 3px;        /* respiro p/ o box-shadow de foco; 12px à direita p/ o scrollbar */
	overflow-x: hidden;               /* sem rolagem horizontal — só vertical quando estoura a altura */
}
/* estado vazio ("Não existem campos personalizados…") — moderniza o .well datado do BS3:
   sem caixa cinza pesada, vira aviso suave centralizado, coerente com as telas novas. */
.perso-nova #blocos .well {
	background: #f8f9fb !important; border: 1px dashed #d6dae0 !important;
	border-radius: 10px !important; box-shadow: none !important;
	margin: 0 !important; padding: 22px 18px !important;
	text-align: center; color: #9aa0ab; font-size: 14px; line-height: 1.5;
}

/* cada campo: label (span) + input/select empilhados, com respiro uniforme */
.perso-nova #blocos > div,
.perso-nova .campo-personalizado-grupo { margin-bottom: 14px; }
.perso-nova #blocos span {
	display: block; margin-bottom: 6px; font-size: 13px; font-weight: 600; color: #3a3f49;
}
/* inputs e selects — largura total, altura e tipografia uniformes */
.perso-nova .campo-personalizado,
.perso-nova #blocos input[type="text"],
.perso-nova #blocos input[type="number"],
.perso-nova #blocos select,
.perso-nova #blocos textarea {
	width: 100%; box-sizing: border-box; height: auto; min-height: 42px;
	padding: 9px 12px; border: 1.5px solid #d6dae0; border-radius: 8px;
	font-size: 14px; color: #1f2937; background: #fff;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.perso-nova #blocos textarea { min-height: 88px; resize: vertical; }
/* foco — realce na cor do tema */
.perso-nova .campo-personalizado:focus,
.perso-nova #blocos input:focus,
.perso-nova #blocos select:focus,
.perso-nova #blocos textarea:focus {
	outline: 0; border-color: var(--mc-cor, #2c2f36); box-shadow: 0 0 0 3px rgba(0,0,0,.06);
}
/* campo obrigatório (.obrigatorio) — borda sutilmente destacada até preencher */
.perso-nova .campo-personalizado.obrigatorio { border-left-width: 3px; border-left-color: #e0a800; }
/* o "(*)" de obrigatório no label — vermelho discreto */
.perso-nova #blocos span i,
.perso-nova #blocos span .obrigatorio-ind,
.perso-nova #blocos span small { color: #c0392b; font-weight: 700; }

/* botões de ação (Adicionar / Personalizar / Baixar) — herdam a cor do tema, não azul fixo */
.perso-nova .button.btn-cart,
.perso-nova #btnComprar {
	background: var(--mc-cor, #2c2f36) !important; border-color: var(--mc-cor, #2c2f36) !important;
	color: #fff !important; border-radius: 8px; font-weight: 700;
}
.perso-nova .button.btn-cart:hover,
.perso-nova #btnComprar:hover { filter: brightness(.92); }
/* o botão de selecionar imagem de fundo faz parte da ÁREA DO ARQUIVO — NÃO mexer nele */