@charset "utf-8";
/*
CSS per template SPECIALI
*/
:root {
	--container: 320px
}
@media (min-width:480px) {:root{--container: 420px}}
@media (min-width:690px) {:root{--container: 600px}}
@media (min-width:1000px) {:root{--container: 100%}}



.req {color: red; font-weight: bold; vertical-align: super}

.product-selection     {margin-bottom: 2em}
.product-card          {position:relative; display:flex; gap: .5em; align-items:center; padding: .5em; background: #f2f2f2; margin: .5em 0; color:#171f26; appearance:none; outline:unset; border-radius:unset; cursor: pointer}
.product-card:hover    {background: #e2e2e2}
.product-card p        {text-transform: uppercase; font-size: 1.5em; font-weight: bold; margin: .25em 0; line-height: 1; letter-spacing: .025em}
.product-card img      {margin:0!important; width:auto!important; height: 80px!important}
.product-card.selected {color: #fff; background: #171f26}



.form-speciali fieldset {position: relative; border-top: solid 1px #0003; padding: 2em 0}
.form-speciali fieldset legend {padding-right: .5em; font-style: italic; text-transform: uppercase; font-size: 16px}
.sizes img.scheme_w_labels {width:100vw; max-width:100vw; margin-left: calc((var(--container) - 100vw) / 2); position: absolute; top: 0}


@media (max-width: 767px) {
	.form-speciali {font-size: .8em}
	
	.sizes img.scheme {display:none}
	.sizes label:first-of-type {margin-top: calc(100vw * .4)}
}
@media (min-width: 768px) {
	.product-selection {display: flex}
	.product-card      {flex-direction:column; margin: 0 .5em 0 0}
	.product-card img  {height: 160px!important}
	
	.product-card.selected::after {content:'';position:absolute;display:block;left:0;right:0;bottom:-24px;border-top:solid 24px #171f26;border-left:solid 88px transparent; border-right:solid 88px transparent; border-bottom: solid 0px transparent}
	
	.sizes img.scheme_w_labels {display:none}
	
	.form-speciali fieldset {border: solid 1px #0003; margin: 1em 0; padding: 1em}
	.form-speciali fieldset legend {padding: 0 .5em .2em .5em}
	
}


.form-speciali          {display: none; transition: opacity .3s ease-in-out}
.form-speciali.selected {display: block}
.form-speciali.loading {pointer-events: none; opacity: .4}


/* Progress indicator durante la generazione del PDF / invio email */
.speciali-loader {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 9999;
	background: rgba(23, 31, 38, .55);
	-webkit-backdrop-filter: blur(2px);
	backdrop-filter: blur(2px);
}
.speciali-loader.is-active {
	display: flex;
	align-items: center;
	justify-content: center;
}
.speciali-loader-box {
	background: #fff;
	border-radius: .5em;
	padding: 2em 2.5em;
	max-width: 90vw;
	width: 360px;
	text-align: center;
	box-shadow: 0 12px 40px 0 #0004;
}
.speciali-spinner {
	width: 48px;
	height: 48px;
	margin: 0 auto 1em auto;
	border: 4px solid #e2e2e2;
	border-top-color: #00275d;
	border-radius: 50%;
	animation: speciali-spin .9s linear infinite;
}
@keyframes speciali-spin { to { transform: rotate(360deg); } }
.speciali-loader-msg  {margin: 0 0 .35em 0; font-weight: bold; font-size: 18px; color: #171f26}
.speciali-loader-hint {margin: 0; font-size: 13px; color: #5a5a5a}
@media (prefers-reduced-motion: reduce) {
	.speciali-spinner {animation-duration: 2s}
}


.form-speciali .result {min-height:10px}
.form-speciali .result :is(.success,.errors) {padding: 1em; border-radius: .5em}
.form-speciali .result h4 {text-transform:none; font-family: 'Barlow'; font-weight: 500; font-size: 24px}
.form-speciali .result .success {background: #c9f28c}
.form-speciali .result .success .download-request {background: #00275d; color: #fff!important}
.form-speciali .result .errors  {background: #ffd280}




.form-speciali .field-container {display:block;margin:1em 0 .5em 0;position: relative;z-index: 5}
.form-speciali div.field-container {margin-bottom:2em}
.form-speciali .field-container.hidden  {display:none; pointer-events: none}
.form-speciali .quote {text-transform: none}
.form-speciali .nice-label {text-transform: none}
.form-speciali input[type="number"] {appearance:textfield}

.field-container.validation-error :is(input,textarea) {border: solid 2px orange}
.field-container.validation-error::after {display:block;position:static;content:attr(error-text);font-size:12px;letter-spacing:.05em;text-transform:none;color:orangered}


.field-container.img .toggle-group {display: flex; flex-wrap: wrap; gap:20px; margin-top:10px}
.field-container.img .toggle-group label {position: relative;min-width: 130px;text-align: center}
.field-container.img .toggle-group label img {margin-bottom:0}
.field-container.img .toggle-group label span {display: block; text-align:center; padding-bottom:12px}
.field-container.img .toggle-group label input {appearance:none;display:block;position:absolute;background:#0000;top:0;left:0;right:0;bottom:0;border:none;outline:none;padding:0;margin:0;cursor:pointer}
.field-container.img .toggle-group label input+span::after {display:block;content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:#fff;border-radius:4px;box-shadow:0 4px 16px 0 #0002;z-index:-1;box-sizing:border-box}

.field-container.img .toggle-group label input:hover+span::after {border:solid 1px var(--metallo-duro); background: #2a70b311; box-shadow:0 6px 20px 1px #0003}
.field-container.img .toggle-group label input:checked+span::after {border:solid 2px var(--metallo-duro)!important; background: #2a70b311}



/* Campi stile material design con label che si sposta */

label.field-container .label-wrap {position:absolute; font-size:14px; left: 12px; top: 6px; border-radius: 4px; padding: 0 8px; background: #f5f5f5; transition: top .2s ease-out, transform .2s ease-out, font-size .2s ease-out, padding .2s ease-out}


label.field-container:is(.filled,.has-placeholder) .label-wrap {top: -12px; font-size: 11px; padding: 0 8px}
label.field-container:is(.filled,.has-placeholder) .label-wrap .req {vertical-align: unset}
label.field-container         .label-wrap :is(.quote,.nice-label) {color: #0a0a0a}
label.field-container.onfocus .label-wrap :is(.quote,.nice-label) {color: #00275d}



/* Impostazioni specifiche per alcuni campi */
.field-container.endmills-teeth label      {padding-top: 12px}
.field-container.endmills-shape label      {padding-top: 6px}
.field-container.endmills-shank label      {padding: 0 6px}
.field-container.endmills-shank label span {margin-top: -8px}
.field-container.endmills-helix label span {margin-top: -8px}

.field-container.reamers-head-cutting label {min-width:150px; padding: 12px 6px 0 6px}
.field-container.reamers-helix label        {padding:0 6px}

.field-container.drills-shank label      {padding:6px 6px 0 6px}
.field-container.drills-inter-cool label {padding:6px 6px 0 6px}

.field-container:is(.endmills-coating,.drills-coating,.reamers-coating) label {text-transform: none}



/* Posizioni dei campi sul disegno della fresa */

@media (min-width: 768px) {
	
	.sizes .field-container input[type="number"] {padding:6px 8px}
	.sizes label.field-container .label-wrap {left: 6px; top: 1px; padding: 0 2px}
	.sizes label.field-container:is(.filled,.has-placeholder) .label-wrap {top: -12px; font-size: 12px; padding: 0 8px}
	
	.form-speciali .sizes .field-container {position: absolute; cursor:pointer}
	.sizes input {width: 180px}
	
	/* posizioni */
	.endmills-tip-diameter    {top: 23%;  left: 88%}
	.endmills-center-diameter {top:  2%;  left: 32%}
	.endmills-shank-diameter  {top: 22%;  left:  1%}
	.endmills-cutter-length   {top: 39%;  left: 71%}
	.endmills-center-length   {top: 50%;  left: 50%}
	.endmills-total-length    {top: 62%;  left: 29%}
	
	.reamers-tip-diameter     {top: 23%;  left: 85%}
	.reamers-center-diameter  {top:  2%;  left: 17%}
	.reamers-shank-diameter   {top: 23%;  left:  1%}
	.reamers-cutter-length    {top: 40%;  left: 58%}
	.reamers-center-length    {top: 55%;  left: 41%}
	.reamers-total-length     {top: 66%;  left: 18%}
	
	.drills-tip-diameter      {top: 22%;  left: 81%}
	.drills-center-diameter   {top:  2%;  left: 19%}
	.drills-shank-diameter    {top: 23%;  left:  0%}
	.drills-cutter-length     {top: 38%;  left: 66%}
	.drills-center-length     {top: 49%;  left: 45%}
	.drills-total-length      {top: 64%;  left: 23%}
	.drills-angle-alpha	      {top:  8%;  left: 51%}
	.drills-angle-beta        {top: 34%;  left: 94%}
	
	/* dimensioni */
	.sizes input[name="tip-diameter"] {width:130px} /* tutti i tip-diameter */
	[lang="it-IT"] .sizes .reamers-tip-diameter input {width:120px} /* solo il tip-diameter di reamers */
	
}


@media (min-width: 1280px) {
	
	.endmills-tip-diameter    {top: 30%;  left: 89%}
	.endmills-center-diameter {top:  2%;  left: 44%}
	.endmills-shank-diameter  {top: 31%;  left:  1%}
	.endmills-cutter-length   {top: 45%;  left: 71%}
	.endmills-center-length   {top: 60%;  left: 60%}
	.endmills-total-length    {top: 75%;  left: 43%}
	
	.reamers-tip-diameter     {top: 30%;  left: 85%}
	.reamers-center-diameter  {top:  2%;  left: 29%}
	.reamers-shank-diameter   {top: 30%;  left:  1%}
	.reamers-cutter-length    {top: 46%;  left: 59%}
	.reamers-center-length    {top: 60%;  left: 49%}
	.reamers-total-length     {top: 75%;  left: 36%}
	
	.drills-tip-diameter      {top: 30%;  left: 82%}
	.drills-center-diameter   {top:  2%;  left: 30%}
	.drills-shank-diameter    {top: 30%;  left:  1%}
	.drills-cutter-length     {top: 45%;  left: 66%}
	.drills-center-length     {top: 60%;  left: 52%}
	.drills-total-length      {top: 75%;  left: 37%}
	.drills-angle-alpha	      {top: 14%;  left: 46%}
	.drills-angle-beta        {top: 30%;  left: 94%}
	
	
	
}


@media (min-width: 1920px) {
	
	.endmills-tip-diameter    {top: 32%;  left: 89%}
	.endmills-center-diameter {top:  2%;  left: 47%}
	.endmills-shank-diameter  {top: 31%;  left:  1%}
	.endmills-cutter-length   {top: 48%;  left: 73%}
	.endmills-center-length   {top: 63%;  left: 60%}
	.endmills-total-length    {top: 79%;  left: 43%}
	
	.reamers-tip-diameter     {top: 32%;  left: 85%}
	.reamers-center-diameter  {top:  2%;  left: 32%}
	.reamers-shank-diameter   {top: 32%;  left:  1%}
	.reamers-cutter-length    {top: 50%;  left: 62%}
	.reamers-center-length    {top: 65%;  left: 51%}
	.reamers-total-length     {top: 80%;  left: 36%}
	
	.drills-tip-diameter      {top: 32%;  left: 83%}
	.drills-center-diameter   {top:  2%;  left: 33%}
	.drills-shank-diameter    {top: 32%;  left:  1%}
	.drills-cutter-length     {top: 49%;  left: 66%}
	.drills-center-length     {top: 64%;  left: 54%}
	.drills-total-length      {top: 79%;  left: 37%}
	.drills-angle-alpha	      {top: 16%;  left: 48%}
	.drills-angle-beta        {top: 32%;  left: 93%}
	
	
	
}