@layer blocks {	
	.form fieldset {
		display: flex;
		flex-direction: column;
		gap: var(--spacing3);
		
		border: 0;
	}
	
	.form fieldset + fieldset {
		margin-top: var(--spacing5);
	}
	
	.form__req {
		margin-left: 0.2em;
	}

	.form__reqHint {
		margin-bottom: var(--spacing3);
		
		text-align: right;
		color: var(--form-text);
	}

	.form  .input__wrapper {
		display: flex;
		flex-direction: column;
		gap: var(--spacing1);
	}

	.form label {
		color: var(--form-label);
	}


	.form input[type="text"],
    .form input[type="email"],
    .form input[type="password"],
    .form input[type="number"],
    .form input[type="tel"],
    .form input[type="url"],
    .form input[type="date"],
    .form input[type="time"],
    .form input[type="search"],
	.form select,
	.form textarea {
		display: block;
		width: 100%;
		padding: 0.75rem;
		color: var(--form-text);
		background-color: var(--form-bg);
		border: 1px solid var(--form-border);
		border-radius: var(--form-radius);
		transition: all 0.2s ease-in-out;
		box-sizing: border-box;
	}

	.form input[type="text"]:focus,
    .form input[type="email"]:focus,
    .form input[type="password"]:focus,
    .form input[type="number"]:focus,
    .form input[type="tel"]:focus,
    .form input[type="url"]:focus,
    .form input[type="date"]:focus,
    .form input[type="time"]:focus,
    .form input[type="search"]:focus,
    .form select:focus, 
    .form textarea:focus {
		border-color: var(--form-primary);
		background-color: var(--form-bg-focus);
		outline: 0;
		box-shadow: 0 0 0 3px var(--form-focus-shadow); 
	}
	
	.input__ElementWrap {
		position: relative;
	}
	
	.input__ElementWrap select {
		appearance: none;
        -webkit-appearance: none;
	}
	
	.input__ElementWrap > img {
		position: absolute;
		right: 1em;
		top: 50%;
		transform: translateY(-50%);
		
		width: 1.2em;
		pointer-events: none;
	}
	
	.input__ElementWrap:has(select) > img {
		transform: translateY(-50%) rotate(90deg);
		width: 0.8em;
	}

	.form ::placeholder {
		color: var(--form-placeholder);
		opacity: 1;
	}

	.form textarea {
		resize: vertical;
		min-height: 120px;
	}

	.form__groupOptions {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        padding-top: 0.5rem;
        gap: var(--spacing1);
    }
    
    .form__group--checkbox input, 
    .form__group--checkboxes input {
        flex: 0 0 auto;
        transform: translateY(0.1em);
    }

    .form__groupOptions .input__wrapper,
    .form__group--inline .input__wrapper {
        flex-direction: row; 
        align-items: flex-start;
        gap: var(--spacing3);
    }

    /* SKUPNI STIL ZA OBA TIPA */
    .form input[type="checkbox"], 
	.form input[type="radio"] {
        /* Odstranimo privzeti stil brskalnika */
        appearance: none;
        -webkit-appearance: none;
        
        /* Prozorno ozadje, ko ni izbran */
        background-color: transparent; 
        
        margin: 0;
        font: inherit;
        color: currentColor;
        width: 1.35rem;
        height: 1.35rem;
        border: 1px solid var(--form-border);
        display: grid;
        place-content: center;
        cursor: pointer;
        transition: all 0.2s ease-in-out;
    }

    /* STIL ZA CHECKBOX (Zaobljen kvadrat) */
    .form input[type="checkbox"] {
        border-radius: var(--form-radius);
    }

    /* STIL ZA RADIO (Krog) */
    .form input[type="radio"] {
        border-radius: 50%;
    }

    /* STANJE: CHECKED (Ko je izbran) */
    .form input[type="checkbox"]:checked,
    .form input[type="radio"]:checked {
        background-color: var(--form-primary);
        border-color: var(--form-primary);
    }

    /* RISANJE KLJUKICE (CHECKMARK) */
    .form input[type="checkbox"]::before {
        content: "";
        width: 0.75rem;
        height: 0.75rem;
        transform: scale(0);
        transition: 120ms transform ease-in-out;
        box-shadow: inset 1em 1em var(--color__white); /* Bela barva kljukice */
        
        /* Izris oblike kljukice s CSS poligonom */
        transform-origin: center;
        clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
    }

    /* RISANJE PIKE (RADIO DOT) */
    .form input[type="radio"]::before {
        content: "";
        width: 0.6rem;
        height: 0.6rem;
        border-radius: 50%;
        transform: scale(0);
        transition: 120ms transform ease-in-out;
        box-shadow: inset 1em 1em var(--color__white); /* Bela barva pike */
        background-color: var(--color__white);
    }

    /* PRIKAZ KLJUKICE/PIKE OB IZBIRI */
    .form input[type="checkbox"]:checked::before,
    .form input[type="radio"]:checked::before {
        transform: scale(1);
    }

    /* Hover efekt na robu */
    .form input[type="checkbox"]:hover,
    .form input[type="radio"]:hover {
        border-color: var(--form-primary);
    }

    .form__groupOptions label,
    .form__group--inline label {
        color: var(--form-text);
        cursor: pointer;
        margin-top: 0.1rem; /* Fina poravnava teksta z ikono */
    }

    .form__group--inline label a {
        color: var(--form-primary);
        text-decoration: underline;
    }
    .form__group--inline label a:hover {
        color: var(--form-primary-hover);
        text-decoration: none;
    }

	.form input[type="range"] {
		width: 100%;
		height: 1.5rem;
		padding: 0;
		background: transparent;
		appearance: none;
		-webkit-appearance: none;
		border: none;
	}

	.form input[type="range"]::-webkit-slider-runnable-track {
		width: 100%;
		height: 0.5rem;
		background: transparent;
		border-radius: 1rem;
		cursor: pointer;
	}
	
	.form input[type="range"]::-moz-range-track {
		width: 100%;
		height: 0.5rem;
		background: var(--color__navy);
		border-radius: 1rem;
		cursor: pointer;
	}

	.form input[type="range"]::-webkit-slider-thumb {
		height: 1.25rem;
		width: 1.25rem;
		border-radius: 50%;
		background: var(--form-primary); 
		cursor: grab;
		-webkit-appearance: none;
		border: 2px solid var(--color__white);
		box-shadow: 0 1px 3px rgba(0,0,0,0.3);
		transition: transform 0.1s;
	}
	
	.form input[type="range"]::-webkit-slider-thumb:hover {
		transform: scale(1.1);
		background: var(--form-primary-hover);
	}

	.form input[type="range"]::-moz-range-thumb {
		height: 1.25rem;
		width: 1.25rem;
		border: 2px solid var(--color__white);
		border-radius: 50%;
		background: var(--form-primary);
		cursor: grab;
		box-shadow: 0 1px 3px rgba(0,0,0,0.3);
	}

	.form .range-val-display {
		color: var(--form-primary);
		font-family: monospace;
		font-size: 1.1em;
	}

	.form .attachmentsDropzone {
		border: 1px solid var(--form-border);
		border-radius: var(--form-radius);
		padding: 2.5rem 1.5rem;
		text-align: center;
		background-color: transparent; 
		cursor: pointer;
		transition: all 0.2s;
	}

	.form .attachmentsDropzone:hover {
		background-color: var(--form-bg-focus); 
		border-color: var(--form-primary);
	}

	.form .attachmentsHint p {
		margin: 0 0 1rem 0;
	}

	
	.form legend {
		margin-bottom: var(--spacing3);
	}

	.form hr.sep {
		border: 0;
		margin: var(--spacing4) 0;
	}

	.form h3 {
		padding-bottom: var(--spacing1);
		margin-bottom: var(--spacing3);
	}
	
	.form__status {
		display: none;
		margin-top: var(--spacing5);
	}
	
	.form__status--error {
		display: block;
		color: var(--form-error);
	}
	
   /* Ker je zgornji selektor šibkejši, bo ta spodnji "zmagal" */
    .form.was-validated input:invalid,
    .form.was-validated textarea:invalid,
    .form.was-validated select:invalid,
    .hasError input,
    .hasError textarea,
    .hasError select {
        border-color: var(--form-error);
		border-width: 2px;
    }

    /* Fokus na napaki */
    .form.was-validated input:invalid:focus,
    .form.was-validated textarea:invalid:focus,
    .form.was-validated select:invalid:focus {
        border-color: var(--form-error);
        box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.25);
    }
	
	.form .attachmentsList .attachment-item  {
		display: flex;
		align-items: center;
		gap: var(--spacing3);
	}
	
	.form .attachmentsList .btn-remove-file {
		border: 0;
		margin: 0;
		padding: 0.5em;
	}
	
	.form .attachmentsList .attachment-item.error {
		color: var(--form-error);
	}
	
	.form .bWrap {
		margin-top: var(--spacing4);
	}
}

.flatpickr-calendar {
}

.flatpickr-calendar input[type="number"] {
	-moz-appearance: textfield;
}