/*
Theme Name: PF-795
Theme URI:	https://softfocus.com.br/
Author: Rafael Forcadell
Version: 1.0
*/


/* 
Formulários
--------------------------------------------
*/

input,
.input,
textarea,
select {
	display: block; 
	width: 100%; 
	border: 0; 
	border-radius: 0;
	background: transparent; 
	padding: 0; 
	cursor: text;
	appearance: none;
	-webkit-tap-highlight-color: transparent; 
}
input,
.input,
label.checkbox,
label.radio,
textarea,
select {
	font-family: var(--font-family); 
	font-size: var(--h4-font-size); 
	font-weight: var(--font-weight-regular); 
	line-height: 1.3em; 
	color: var(--cor-cinza-medio); 
}
select { cursor: pointer; }

.campo { margin-bottom: calc(var(--espaco) * .5); }
.campo:before { position: absolute; bottom: -4px; left: 0; width: 100%; height: 1px; background-color: var(--cor-borda); content: ""; pointer-events: none; }
.campo:hover:before { background-color: var(--cor-cinza-claro); }
.campo:focus-within:before { bottom: -6px; height: 5px; background-color: var(--cor-cinza-claro); }

.campos-em-linha { display: flex; align-items: flex-start; }
.campos-em-linha.justificado .campo { flex: 1 1 auto; }
.campos-em-linha .campo { margin-right: calc(var(--espaco) * .5); }
.campos-em-linha .campo:last-child { margin-right: 0; }

label.rotulo { display: table; }

.obrigatorio > label:after,
.obrigatorio .selecao > label:after,
label.obrigatorio:after { font-size: var(--h4-font-size); font-weight: var(--font-weight-medium); color: var(--cor-perigo); padding-left: 2px; content: "*"; }



/*
Texto
--------------------------------------------
*/

.input.texto { min-width: 120px; }



/*
Number
--------------------------------------------
*/

input[sem-setas]::-webkit-outer-spin-button,
input[sem-setas]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number][sem-setas] { -moz-appearance: textfield; }



/*
Número
--------------------------------------------
*/

.input.numero { min-width: 60px; }




/*
Checkbox
--------------------------------------------
*/

label.checkbox { display: flex; margin: 0 calc(var(--espaco) * .5) calc(var(--espaco) * .5) 0; padding: 0 0 0 30px; white-space: pre-wrap; cursor: pointer; }
label.checkbox input { position: absolute; z-index: -1; padding: 0; opacity: 0; }
label.checkbox .box { position: absolute; top: 2px; left: 0; width: 20px; height: 20px; background: transparent; border: 1px solid var(--cor-cinza-mais-claro); cursor: pointer; }
label.checkbox input:checked ~ .box {  }
label.checkbox .box:after { display: none; position: absolute; top: -9px; left: 10px; width: 7px; height: 21px; transform: rotate(45deg); border: solid var(--cor-cinza-medio); border-width: 0 2px 2px 0; content: ""; }
label.checkbox input:checked ~ .box:after { display: block; }
label.checkbox input ~ .box:before { position: absolute; top: 50%; left: 50%; width: 2px; height: 2px; margin: -1px; border-radius: 100%; background-color: rgba(0,0,0,.05); opacity: 0; content: ""; transition-property: width, height, margin; transition-duration: 100ms; transition-timing-function: ease-in-out; }
label.checkbox input:focus ~ .box:before { width: 60px; height: 60px; margin: -30px; opacity: 1; }
label.checkbox a { }

.checkboxes { margin-bottom: calc(var(--espaco) * .5); }
.checkboxes > label.rotulo { margin-bottom: 5px; }
.checkboxes label.checkbox { margin-bottom: calc(var(--espaco) * .1); }
.checkboxes .campos-em-linha label.checkbox { margin-bottom: 0; }



/*
Radio
--------------------------------------------
*/

label.radio { display: flex; margin: 0 calc(var(--espaco) * .5) calc(var(--espaco) * .5) 0; padding: 0 0 0 28px; white-space: pre-wrap; cursor: pointer; }
label.radio input { position: absolute; z-index: -1; padding: 0; opacity: 0; }
label.radio .box { position: absolute; top: 2px; left: 0; width: 20px; height: 20px; background: transparent; border: 1px solid var(--cor-cinza-mais-claro); border-radius: 100%; cursor: pointer; }
label.radio input:checked ~ .box {  }
label.radio .box:after { display: none; position: absolute; top: 50%; left: 50%; width: 10px; height: 10px; margin: -5px; border-radius: 100%; background-color: var(--cor-cinza-mais-claro);  content: ""; }
label.radio input:checked ~ .box:after { display: block; }
label.radio input ~ .box:before { position: absolute; top: 50%; left: 50%; width: 2px; height: 2px; margin: -1px; border-radius: 100%; background-color: rgba(0,0,0,.05); opacity: 0; content: ""; transition-property: width, height, margin; transition-duration: 100ms; transition-timing-function: ease-in-out; }
label.radio input:focus ~ .box:before { width: 60px; height: 60px; margin: -30px; opacity: 1; }
label.radio a { }

.radios { margin-bottom: calc(var(--espaco) * .5); }
.radios > label.rotulo { margin-bottom: 5px; }
.radios label.radio { margin-bottom: calc(var(--espaco) * .1); }
.radios .campos-em-linha label.radio { margin-bottom: 0; }



/*
Toggle
--------------------------------------------
*/

label.toggle { display: inline-flex; margin: 0 calc(var(--espaco) * .5) calc(var(--espaco) * .5) 0; padding: 0 0 0 46px; }
label.toggle,
label.toggle * { cursor: pointer; }
label.rotulo + label.toggle { margin-top: 2px; }
label.toggle input { position: absolute; z-index: -1; padding: 0; opacity: 0; }
label.toggle .switch { position: absolute; top: 50%; left: 0; width: 36px; height: 1px; background: var(--cor-borda); }
label.toggle .switch:after { position: absolute; top: 50%; left: 0; width: 16px; height: 16px; margin-top: -9px; border: 1px solid var(--cor-transparente); border-radius: 100%; background-color: var(--cor-cinza-mais-claro); content: ""; transition: left, background-color; transition-duration: 100ms; transition-timing-function: ease-in-out; }
label.toggle input:disabled ~ .switch:after { border: 1px solid var(--cor-borda); background-color: var(--cor-fundo); }
label.toggle input:checked ~ .switch:after { left: calc(100% - 18px); background-color: var(--cor-primaria-clara); }
label.toggle input ~ .switch:before { position: absolute; top: 50%; left: 50%; width: 2px; height: 2px; margin: -1px; border-radius: 100%; background-color: rgba(0,0,0,.05); opacity: 0; content: ""; transition-property: width, height, margin; transition-duration: 100ms; transition-timing-function: ease-in-out; }
label.toggle input:focus ~ .switch:before { width: 60px; height: 60px; margin: -30px; opacity: 1; }
label.toggle .ativo { position: absolute; top: 0; left: 0; opacity: 0; white-space: nowrap; visibility: hidden; transition: opacity 100ms ease-in-out; }
label.toggle input:checked ~ div .ativo { position: relative; opacity: 1; visibility: visible; }
label.toggle .inativo { opacity: 1; white-space: nowrap; visibility: visible; transition: opacity 100ms ease-in-out; }
label.toggle input:checked ~ div .inativo { position: absolute; top: 0; left: 0; opacity: 0; visibility: hidden; }
label.toggle a { margin: 0 5px; }



/* 
Select
--------------------------------------------
*/

.select {}

.select sf-opcoes { display: none; }

.select.aberto { z-index: 99; }

.select .selecao { z-index: 1; }

.select .selecao .rotulo { display: table; font-size: var(--font-size); font-weight: var(--font-weight-light); line-height: var(--line-height); } 

.select .selecao .input { padding-right: 30px; cursor: default; }
.select .selecao .input:after { position: absolute; top: 50%; right: 5px; width: 7px; height: 7px; margin-top: -4px; transform: rotate(45deg); border: solid var(--cor-cinza-medio); border-width: 0 1px 1px 0; content: ""; }
.select.aberto .selecao .input:after { margin-top: 0; transform: rotate(-135deg); }
.select .selecao .input:before { position: absolute; bottom: -4px; left: 0; width: 100%; height: 1px; background-color: var(--cor-borda); content: ""; pointer-events: none; }
.select .selecao .input:hover:before { background-color: var(--cor-cinza-claro); }
.select .selecao:focus .input:before { bottom: -6px; height: 5px; background-color: var(--cor-cinza-claro); }

.select .opcoes { display: none; position: absolute; min-width: calc(100% + 48px); margin: 15px -24px 0; }
.select.aberto .opcoes { display: block; }
.select.aberto .opcoes:before { position: absolute; z-index: 0; top: -80px; left: -1px; width: 100%; height: calc(100% + 98px); border: 1px solid var(--cor-borda); background-color: var(--cor-fundo-claro); box-shadow: 0 0 var(--sombra-blur) var(--sombra); content: ""; }
.select .opcoes.com-rolagem { margin: 15px -28px 0 -24px; }
.select .opcoes ul { margin: 0; list-style: none; }
.select .opcoes > ul { padding: 0; }
.select .opcoes > ul::-webkit-scrollbar { width: 7px; }
.select .opcoes.com-rolagem > ul { --linhas: 9; max-height: calc(var(--h1-font-size) * var(--linhas)); overflow: hidden; overflow-y: auto; overflow-y: overlay; scroll-snap-type: y proximity; scrollbar-width: thin; scrollbar-color: var(--cor-cinza-claro) var(--cor-transparente); }
.select .opcoes > ul::-webkit-scrollbar-track { background: var(--cor-transparente); border-radius: 7px; }
.select .opcoes > ul::-webkit-scrollbar-thumb { background-color: var(--cor-cinza-claro); border-radius: 7px; }
.select .opcoes li { z-index: 1; padding: 0 25px 0 24px; font-size: var(--font-size); line-height: var(--h1-font-size); white-space: nowrap; }
.select .opcoes li:hover,
.select .opcoes li:focus { background-color: var(--cor-cinza-ainda-mais-claro); }
.select .opcoes.com-rolagem li { width: calc(100% - 4px); scroll-snap-align: start; scroll-snap-stop: always; }




input:focus::placeholder,
textarea:focus::placeholder { color: transparent; }


[type=search],
[type=search]::-webkit-search-decoration,
[type=search]::-webkit-search-cancel-button,
[type=search]::-webkit-search-results-button,
[type=search]::-webkit-search-results-decoration { appearance: none; }





[type=submit] { 
	font-family: var(--font-family); 
	font-size: var(--h6-font-size); 
	font-weight: var(--font-weight-semibold); 
	line-height: var(--line-height); 
	color: var(--cor-cinza-medio);
	text-transform: uppercase;
	border: 1px solid var(--cor-cinza-mais-claro); 
	border-radius: 30px;
	padding: 18px 30px;
	background-color: transparent;
	transition: all 100ms ease-in-out;
	transition-property: border-color, background-color;
}
[type=submit],
[type=submit] * { cursor: pointer; }
[type=submit]:hover,
[type=submit]:focus { background-color: var(--cor-secundaria); border-color:  var(--cor-secundaria); }

[type=submit].pequeno { width: 24px; height: 24px; padding: 0; background-color: var(--cor-primaria-media); border: 0; border-radius: 100%; }
[type=submit].pequeno:hover,
[type=submit].pequeno:focus { background-color: var(--cor-secundaria); }
[type=submit].pequeno:hover [style*="fill:"],
[type=submit].pequeno:focus [style*="fill:"] { fill: var(--cor-cinza-escuro) !important; }



/* 
Validações
--------------------------------------------
*/

.campo.invalido .rotulo { color: var(--cor-perigo); }
/*.campo.invalido:before { background-color: var(--cor-perigo); }*/

/*.campo.invalido input,
.campo.invalido .input,
.campo.invalido label.checkbox,
.campo.invalido label.radio,
.campo.invalido textarea,
.campo.invalido select {
	color: var(--cor-perigo); 
}*/