:root{--gap: 12px;--b:#334155;--fg:#e5e7eb;--muted:#9ca3af;--bg:#0f172a;--panel:#111827;--acc:#3b82f6;}




.forms-submit .row{display:flex;flex-wrap:wrap;column-gap:var(--gap);row-gap:var(--gap);justify-content: space-between;}
.forms-submit .wrap {
    border: 1px solid transparent;
    padding: 4px;
    border-radius: 4px;
    background: transparent;
    display: flex;
    flex-direction: column;
    transition: border-color 0.6s 
cubic-bezier(0.4, 0, 1, 1), background 0.6s 
ease;
    /* font-size: .8em; */
    font-size: 14px;
}


*:focus-visible {
    border: 1px solid #a3a3a375 !important;
    outline: none;
}


/* Griglia 12 colonne con gap-safe */

.col{flex: 0 0 auto}
.col-1{flex-basis:calc(8.3333% - var(--gap));max-width:calc(8.3333% - var(--gap))}
.col-2{flex-basis:calc(16.6667% - var(--gap));max-width:calc(16.6667% - var(--gap))}
.col-3{flex-basis:calc(25% - var(--gap));max-width:calc(25% - var(--gap))}
.col-4{flex-basis:calc(33.3333% - var(--gap));max-width:calc(33.3333% - var(--gap))}
.col-5{flex-basis:calc(41.6667% - var(--gap));max-width:calc(41.6667% - var(--gap))}
.col-6{flex-basis:calc(50% - var(--gap));max-width:calc(50% - var(--gap))}
.col-7{flex-basis:calc(58.3333% - var(--gap));max-width:calc(58.3333% - var(--gap))}
.col-8{flex-basis:calc(66.6667% - var(--gap));max-width:calc(66.6667% - var(--gap))}
.col-9{flex-basis:calc(75% - var(--gap));max-width:calc(75% - var(--gap))}
.col-10{flex-basis:calc(83.3333% - var(--gap));max-width:calc(83.3333% - var(--gap))}
.col-11{flex-basis:calc(91.6667% - var(--gap));max-width:calc(91.6667% - var(--gap))}
.col-12{flex-basis:100%;max-width:100%}

/* Responsive Grid System */
/* Tablet breakpoint (768px) */
@media (max-width: 768px) {
	.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11 {flex-basis: 50%;max-width: calc(50% - var(--gap));}
	.col-12 { flex-basis: 100%; max-width: 100%; }
  :root{
		--gap: 0px; 
		}
}

/* Mobile breakpoint (480px) */
@media (max-width: 480px) {
	.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 { flex-basis: 100%; max-width: 100%; }
}

/* Responsive form elements */
@media (max-width: 768px) {

	.row {
		column-gap: 0px;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
}

@media (max-width: 480px) {

	.row {
		flex-direction: column;
	}
}



.radio-group .rad.inline {
	display: inline-flex;
	margin-right: 16px;
	margin-bottom: 8px;
}




.chip-icon {
	margin-right: 4px;
	font-size: 11px;
}

.chip-text {
	font-size: 12px;
}


#fieldEditor .editor label{display:block;margin: 0px 0px 3px 0px;color: #cbd5e18a;}
input, select, textarea{background: var(--bg-primary);border:1px solid #213148;color:#e5e7eb;border-radius: 4px;/* padding:8px; */width:100%;}
input[type="checkbox"],input[type="radio"]{
	width: 20px!important;
	height: 20px!important;
	min-width: 20px;
	min-height: 20px;
}

.wrap[style*="height"] {overflow-y: auto;}

[data-name^="html"] .wrap {
	display: block;
  }
  


label {
    display: flex;
    align-items: center;
    gap: 5px;
}

/* Asterisco per campi required - Input normali */
label:has(+ .input-wrapper input[required])::after,label:has(+ .input-wrapper select[required])::after, label:has(+ .input-wrapper textarea[required])::after {
    content: " *";
    color: #d14611;
    font-size: 25px;
    height: 12px;
    position: relative;
    top: -11px;
    display: block;
}


/* Asterisco per campi required - Checkbox (dentro il testo) */
label.chk:has(input[required]) span::before {
    content: "  * ";
    color: #d14611;
    font-size: 14px;
    height: 0px;
    position: relative;
    top: -10px;
    display: inline-block;
    margin-left: 2px;
    scale: 2;
    right: 3px;
}

/* Asterisco per campi required - Radio Groups (nel label superiore) */
label.lbl:has(+ .radio-group input[required])::after,
label.lbl:has(+ .input-wrapper .radio-group input[required])::after {
    content: " *";
    color: #d14611;
    font-size: 25px;
    height: 12px;
    position: relative;
    top: -11px;
    display: block;
}

/* Asterisco per campi required - Checkbox Groups (nel label superiore) */
label.lbl:has(+ .checkbox-group input[required])::after,
label.lbl:has(+ .input-wrapper .checkbox-group input[required])::after {
    content: " *";
    color: #d14611;
    font-size: 25px;
    height: 12px;
    position: relative;
    top: -11px;
    display: block;
}
/* Responsive per grid icone */
@media (max-width: 768px) {
	#editorform .icon-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

@media (max-width: 480px) {
	#editorform .icon-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.form-container {padding: var(--space-sm);border-radius: 8px;box-shadow: 0 2px 10px rgba(0,0,0,0.1);max-width: 800px;margin: var(--space-2xl) auto;/* color: #727272; */background: var(--bg-glass);}
.forms-submit__title {
    padding: var(--space-md);
    text-align: center;
}

.forms-submit__container {
    margin-bottom: var(--space-xl);
}  

label span {
    color: #fff;
    font-size: 1em;
}

.forms-submit label {
    font-size: 14px;
    padding-inline-start: 0;
}

/* Responsive form elements */
@media (max-width: 768px) {
	#formPreview input, #formPreview select, #formPreview textarea {
		font-size: 16px; /* Prevents zoom on iOS */
	}
	.row {
		/* column-gap: 0px; */
		/* display: flex; */
		/* flex-wrap: wrap; */
		/* justify-content: space-between; */
	}
}

@media (max-width: 480px) {
	#formPreview input, #formPreview select, #formPreview textarea {
		font-size: 16px;
		padding: 12px 8px; /* Larger touch targets */
	}
	.row {
		/* flex-direction: column; */
	}
}

#formPreview input, #formPreview select, #formPreview textarea {padding: 10px 8px 10px 8px;}

.radio-group .rad input[type="radio"] {
    margin-right: 8px;
    /* width: auto !important; */
    margin-bottom: 4px;
}

input[type="checkbox"], input[type="radio"] {
    margin: 4px 4px 4px 0px !important;

}

.iti__selected-flag {
    top: 24px !important;
    position: absolute;
    left: -9px;
}
.help-txt {
    font-style: italic;
    font-weight: 100;
    font-size: .8em;
}