/* // =============== | MAIN SUPREME | =============== \\ */
.main-supreme{
	width: 100%;
	max-width: 100%;
	display: flex;
	flex-wrap: wrap;
	align-content: start;
	align-items: stretch;
	overflow-x: hidden;
}
/* \\ ================================================ // */



/* // =============== | REGRAS INTERNA | ============= \\ */
.interna h2{
	width: 100%;
}
.interna hr{
	width: 100%;
}
.interna h2 + hr{
	margin-bottom: 2rem;
}

.interna form{
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	align-content: start;
	margin: 0 !important;
}

.interna form .form-control{
	min-height: 46px;
}
.interna form label{
	width: 100%;
	font-family: 'soho-medium';
	line-height: 100%;
	color: #6e6d6d;
	margin-bottom: 0.15rem;
}
.interna form footer{
	width: 100%;
	display: flex;
	margin-top: 2rem;
	flex-wrap: wrap;
}
.interna form footer > *{
	margin-right: 1rem;
	margin-top: 1rem;
}

.interna .btn-success{
	background: #00B97D;
}
.btn{
	border-radius: 6px;
	padding: 0.65rem 1.25rem;
	border: none;
	font-family: 'soho-bold';
}
.interna .btn i{
	margin-right: 0.25rem;
}

.interna .acao{
	display: flex;
	flex-wrap: nowrap;
	gap: 0.5rem;
}
.interna h3{
	width: 100%;
	font-family: 'soho-medium';
	font-size: 1.35rem;
	margin-top: 0rem;
	margin: 0rem;
}
.interna h3:not(:nth-of-type(1)){
	margin-top: 3rem;
}
/* \\ ================================================ // */


/* // ================== | TABELA | ================== \\ */
.container-table{
	width: 100%;
	max-width: 100%;
	overflow-x: auto;
	margin-top: 2rem;
}
.table-fefe th{
	background: #1a1a1a;
	color: #fff;
	font-family: 'soho-bold';
}
.table-fefe th,
.table-fefe td{
	vertical-align: middle;
}
/* \\ ================================================ // */


/* // ================== | TABELA | ================== \\ */
.card-galeria{
	display: flex;
	flex-wrap: wrap;
}
.card-galeria > main{
	width: 100%;
	height: 100%;
	display: flex;
	gap: 0.75rem;
	flex-wrap: wrap;
	background: #eee;
	padding: 1.5rem;
	border-radius: 12px;

    box-shadow: 0px 2px 1px 1px rgb(0, 0, 0, 15%);
    border: 1px solid #ccc;
}
.card-galeria .imagem{
	width: 100%;
	aspect-ratio: 16 / 10;
	border-radius: 8px;
	background: #fff;
	object-fit: contain;
	object-position: center;
	padding: 2rem;
}
.card-galeria .form-group{
	width: 100%;
}
.card-galeria a{
	width: 100%;
	display: block;
}
/* \\ ================================================ // */




/* // =========== | TOPO PADRAO PAGINAS VENDEDOR | =========== \\ */
/*
 * Topo padrao das paginas do vendedor, alinhado ao visual institucional.
 * Mantem fundo escuro, tipografia branca e espacamentos consistentes.
 */
.interna .topo-vendedor-padrao,
.home-vendedor-grazmec .home2-topo,
.listar-venda-grazmec .listar-topo,
.duvidas-vendedor .duvidas-topo,
.pontos-vendedor .pontos-topo,
.premios-vendedor .premios-topo,
.alterar-venda-grazmec .alterar-topo{
	width: 100%;
	position: relative;
	overflow: hidden;
	display: block;
	border-radius: 24px;
	padding: 2rem 1.55rem;
	margin-bottom: 1.5rem;
	border: 1px solid rgba(255, 255, 255, 0.08);
	background:
		radial-gradient(circle at top left, rgba(237, 28, 36, 0.16), transparent 36%),
		linear-gradient(90deg, #1f252b 0%, #1a1f25 100%) !important;
	box-shadow: 0 20px 50px rgba(10, 12, 14, 0.28);
	color: #fff !important;
}

.interna .topo-vendedor-padrao::before,
.home-vendedor-grazmec .home2-topo::before,
.listar-venda-grazmec .listar-topo::before,
.duvidas-vendedor .duvidas-topo::before,
.pontos-vendedor .pontos-topo::before,
.premios-vendedor .premios-topo::before,
.alterar-venda-grazmec .alterar-topo::before{
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px),
		linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px);
	background-size: 28px 28px;
	opacity: 0.22;
	pointer-events: none;
}

.interna .topo-vendedor-padrao > *,
.home-vendedor-grazmec .home2-topo > *,
.listar-venda-grazmec .listar-topo > *,
.duvidas-vendedor .duvidas-topo > *,
.pontos-vendedor .pontos-topo > *,
.premios-vendedor .premios-topo > *,
.alterar-venda-grazmec .alterar-topo > *{
	position: relative;
	z-index: 1;
}

.interna .topo-vendedor-padrao small,
.interna .topo-vendedor-padrao .selo-topo,
.interna .topo-vendedor-padrao .selo-home,
.home-vendedor-grazmec .home2-topo small,
.listar-venda-grazmec .listar-topo small,
.duvidas-vendedor .duvidas-topo small,
.pontos-vendedor .pontos-topo small,
.premios-vendedor .premios-topo small,
.alterar-venda-grazmec .alterar-topo small,
.home-vendedor-grazmec .home2-topo .selo-home,
.listar-venda-grazmec .listar-topo .selo-topo,
.alterar-venda-grazmec .alterar-topo .selo-topo{
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.42rem 0.92rem;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.10);
	border: 1px solid rgba(255, 255, 255, 0.15);
	font-size: 0.79rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	margin-bottom: 0.95rem;
	color: #f6f8fa !important;
}

.interna .topo-vendedor-padrao h2,
.home-vendedor-grazmec .home2-topo h2,
.listar-venda-grazmec .listar-topo h2,
.duvidas-vendedor .duvidas-topo h2,
.pontos-vendedor .pontos-topo h2,
.premios-vendedor .premios-topo h2,
.alterar-venda-grazmec .alterar-topo h2{
	color: #ffffff !important;
	font-size: clamp(2rem, 3.7vw, 2.8rem);
	line-height: 1.05;
	margin-bottom: 0.85rem;
	max-width: 760px;
	font-family: 'soho-bold', sans-serif;
}

.interna .topo-vendedor-padrao p,
.home-vendedor-grazmec .home2-topo p,
.listar-venda-grazmec .listar-topo p,
.duvidas-vendedor .duvidas-topo p,
.pontos-vendedor .pontos-topo p,
.premios-vendedor .premios-topo p,
.alterar-venda-grazmec .alterar-topo p{
	max-width: 770px;
	color: rgba(255, 255, 255, 0.90) !important;
	line-height: 1.75;
	font-size: 1rem;
	margin-bottom: 0;
}

.interna .topo-vendedor-padrao .topo-acoes,
.interna .topo-vendedor-padrao .acoes-topo,
.listar-venda-grazmec .listar-topo .topo-acoes,
.home-vendedor-grazmec .home2-topo .acoes-topo{
	margin-top: 1rem;
}

.interna .topo-vendedor-padrao .topo-acoes .acao-principal,
.listar-venda-grazmec .listar-topo .topo-acoes .acao-principal,
.home-vendedor-grazmec .home2-topo .acoes-topo .acao-principal{
	background: #ffffff;
	color: #e21e26 !important;
	border: 1px solid rgba(255, 255, 255, 0.12);
}

.interna .topo-vendedor-padrao .topo-acoes .acao-secundaria,
.home-vendedor-grazmec .home2-topo .acoes-topo .acao-secundaria{
	background: rgba(255, 255, 255, 0.12);
	color: #ffffff !important;
	border: 1px solid rgba(255, 255, 255, 0.16);
}

@media(max-width: 767px){
	.interna .topo-vendedor-padrao,
	.home-vendedor-grazmec .home2-topo,
	.listar-venda-grazmec .listar-topo,
	.duvidas-vendedor .duvidas-topo,
	.pontos-vendedor .pontos-topo,
	.premios-vendedor .premios-topo,
	.alterar-venda-grazmec .alterar-topo{
		border-radius: 18px !important;
		padding: 1.25rem !important;
	}
}
/* \\ ======================================================== // */

/* // ================== | X PANEL | ================= \\ */
.x_panel{
	width: 100%;
	line-height: 120%;
	display: block;
	padding: 1rem;
	background: #f2f2f2;
	border-radius: 0px 0px 8px 8px;
	color: crimson;
	box-shadow: 0px 1px 0px rgb(0,0,0,55%);
}
/* \\ ================================================ // */




/* /\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\| 992 |/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\ */
@media(min-width: 992px){

	/* // =============== | MAIN SUPREME | =============== \\ */
	.main-supreme:has(> .header-vendedor){
		flex-wrap: nowrap;
	}

	.main-supreme .interna{
		flex-wrap: nowrap;
		align-items: center;
		flex-direction: column;
		justify-content: start;
	}
	/* \\ ================================================ // */


	/* // ================== | TABELA | ================== \\ */
	.container-table > div{
		width: calc(100% + -12px);
	}
	/* \\ ================================================ // */



}



/* // ================== | SWEETALERT VENDEDOR | ================== \\ */
/* Tema visual global para os modais de confirmação e alerta da área do vendedor. */
.swal2-container.swal2-backdrop-show{
	background: rgba(25, 25, 25, 0.58) !important;
	backdrop-filter: blur(6px);
}

.swal2-popup{
	width: min(92vw, 560px) !important;
	padding: 2.2rem 2rem 1.9rem !important;
	border-radius: 24px !important;
	border: 1px solid rgba(237, 28, 36, 0.12) !important;
	background: linear-gradient(180deg, #ffffff 0%, #f7f7f7 100%) !important;
	box-shadow: 0 28px 70px rgba(0, 0, 0, 0.28) !important;
}

.swal2-title{
	color: #191919 !important;
	font-family: 'soho-bold', sans-serif !important;
	font-size: 2rem !important;
	line-height: 1.05 !important;
	margin-bottom: 0.75rem !important;
}

.swal2-html-container{
	max-width: 27rem;
	margin: 0 auto 1.65rem !important;
	color: #5e6468 !important;
	font-size: 1.05rem !important;
	line-height: 1.65 !important;
}

.swal2-icon{
	margin: 0 auto 1.35rem !important;
	transform: scale(1.06);
	border-width: 4px !important;
}

.swal2-icon.swal2-warning{
	border-color: rgba(237, 28, 36, 0.28) !important;
	color: #ED1C24 !important;
}

.swal2-icon.swal2-warning [class^='swal2-warning-line']{
	background-color: #ED1C24 !important;
}

.swal2-actions{
	width: 100%;
	margin-top: 0.15rem !important;
	gap: 0.85rem !important;
	justify-content: center !important;
}

.swal2-styled{
	min-width: 165px;
	min-height: 52px;
	margin: 0 !important;
	padding: 0.85rem 1.4rem !important;
	border: none !important;
	border-radius: 14px !important;
	box-shadow: none !important;
	font-family: 'soho-bold', sans-serif !important;
	font-size: 1rem !important;
	letter-spacing: 0.01em;
	transition: 0.25s ease !important;
}

.swal2-confirm{
	background: linear-gradient(135deg, #ED1C24 0%, #d41118 100%) !important;
}

.swal2-cancel{
	background: linear-gradient(135deg, #4d5357 0%, #191919 100%) !important;
}

.swal2-confirm:hover,
.swal2-cancel:hover{
	transform: translateY(-1px);
	box-shadow: 0 14px 28px rgba(0, 0, 0, 0.18) !important;
}

.swal2-confirm:focus,
.swal2-cancel:focus,
.swal2-close:focus{
	box-shadow: 0 0 0 4px rgba(237, 28, 36, 0.14) !important;
}

.swal2-timer-progress-bar{
	background: linear-gradient(90deg, #ED1C24 0%, #f04248 100%) !important;
}

@media(max-width: 767px){
	.swal2-popup{
		padding: 1.75rem 1.1rem 1.25rem !important;
		border-radius: 20px !important;
	}

	.swal2-title{
		font-size: 1.8rem !important;
	}

	.swal2-actions{
		gap: 0.65rem !important;
	}

	.swal2-styled{
		min-width: calc(50% - 0.35rem);
		padding-left: 0.9rem !important;
		padding-right: 0.9rem !important;
	}
}
/* \\ ========================================================== // */