/* Rows and columns */
.forminator-custom-form .forminator-row,
.form-row {
    display: flex;
    column-gap: var(--wp--preset--spacing--3);
    width: 100%;
    margin-bottom: var(--wp--preset--spacing--3);
}

.forminator-custom-form .forminator-col,
.form-row .form-field {
    width: 100%;
}

/* Labels */
.forminator-custom-form .forminator-row label {
    display: block;
    margin-bottom: var(--wp--preset--spacing--1);
    font-size: var(--wp--preset--font-size--p-small);
}

.forminator-custom-form .forminator-row label .forminator-required {
    color: var(--wp--preset--color--danger-text);
}

/* Regular input */
.forminator-custom-form input:not([type="checkbox"]),
.forminator-custom-form .forminator-field-select select,
.forminator-custom-form textarea,
.form-row .form-field select {
    resize: none;

    width: 100%;
    padding: var(--wp--preset--spacing--1) var(--wp--preset--spacing--2);
    border: 1px solid var(--wp--preset--color--bg-dark);
    border-radius: var(--wp--custom--border-radius);

    font-size: var(--wp--preset--font-size--p-small);
    color: var(--wp--preset--color--text) !important;

    appearance: none;
    background-color: var(--wp--preset--color--bg-light);

    transition: box-shadow 0.2s ease-in-out;
}

.forminator-custom-form input:focus,
.forminator-custom-form select:focus,
.form-row .form-field select:focus {
    box-shadow: 0 0 10px 0 oklch(0.7 var(--wp--preset--color--primary-ch));;
}

/* Datepicker */
#ui-datepicker-div.ui-datepicker.ui-widget {
    background-color: var(--wp--preset--color--bg-light);
}

#ui-datepicker-div.ui-datepicker.ui-widget *:is(input, select, a, span) {
    font-size: calc(var(--wp--preset--font-size--p-small) * 0.9) !important;
}

.ui-datepicker .ui-datepicker-header {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    justify-content: center;

    border: none;

    background-color: var(--wp--preset--color--bg-light);
}

.ui-datepicker .ui-datepicker-header .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-header .ui-datepicker-next {
    position: initial;

    display: flex;
    align-items: center;

    width: initial;
    height: initial;
    padding: 0.5rem;

    line-height: initial !important;

    transition: background-color 0.2s ease-in-out;
}

.ui-datepicker .ui-datepicker-header .ui-datepicker-prev.ui-state-hover,
.ui-datepicker .ui-datepicker-header .ui-datepicker-next.ui-state-hover {
    border: initial;
    font-weight: inherit;
}

.ui-datepicker .ui-datepicker-header .ui-datepicker-prev {
    grid-column: 1;
    grid-row: 1;
}

.ui-datepicker .ui-datepicker-header .ui-datepicker-title {
    grid-column: 2;
    grid-row: 1;
}

.ui-datepicker .ui-datepicker-header .ui-datepicker-next {
    grid-column: 3;
    grid-row: 1;
}

.ui-datepicker .ui-datepicker-header .ui-datepicker-prev::before,
.ui-datepicker .ui-datepicker-header .ui-datepicker-next::before {
    font-family: 'Material Symbols Outlined';
    font-size: 18px;
    font-variation-settings: 'opsz' 18;
}

.ui-datepicker .ui-datepicker-header .ui-datepicker-prev::before {
    content: 'arrow_back';
}

.ui-datepicker .ui-datepicker-header .ui-datepicker-next::before {
    content: 'arrow_forward';
}

.ui-datepicker .ui-datepicker-header .ui-datepicker-prev .ui-icon,
.ui-datepicker .ui-datepicker-header .ui-datepicker-next .ui-icon {
    display: none;
}

.ui-datepicker .ui-datepicker-header .ui-datepicker-title select {
    width: fit-content;
    margin: 0 var(--wp--preset--spacing--1);
    border: none;

    font-weight: bold;
    text-transform: capitalize;
}

.ui-datepicker .ui-datepicker-header select {
    appearance: none;
}

.ui-datepicker .ui-datepicker-calendar th:nth-child(1) span::after {
    content: "a";
}

.ui-datepicker .ui-datepicker-calendar th:nth-child(2) span::after {
    content: "i";
}

.ui-datepicker .ui-datepicker-calendar th:nth-child(3) span::after {
    content: "o";
}

.ui-datepicker .ui-datepicker-calendar th:nth-child(4) span::after {
    content: "o";
}

.ui-datepicker .ui-datepicker-calendar th:nth-child(5) span::after {
    content: "r";
}

.ui-datepicker .ui-datepicker-calendar th:nth-child(6) span::after {
    content: "a";
}

.ui-datepicker .ui-datepicker-calendar th:nth-child(7) span::after {
    content: "o";
}

.ui-datepicker .ui-datepicker-calendar td a,
.ui-datepicker .ui-datepicker-calendar td span {
    padding: var(--wp--preset--spacing--1);
    border: none;
    border-radius: var(--wp--custom--border-radius);

    color: var(--wp--preset--color--text);
    text-align: center;

    background-color: transparent;

    transition: background-color 0.2s ease-in-out;
}

.ui-datepicker .ui-datepicker-calendar td a:hover {
    background-color: var(--wp--preset--color--bg-dark);
}

.ui-datepicker .ui-datepicker-calendar td.ui-datepicker-current-day a {
    color: var(--wp--preset--color--bg-light);
    background-color: var(--wp--preset--color--primary);
}

.forminator-custom-form .forminator-checkbox-label {
    padding-left: var(--wp--preset--spacing--1);
}

/* Error messages */
.forminator-custom-form .forminator-error-message,
.forminator-custom-form .forminator-description,
.form-row .form-field .form-error-message {
    display: block;

    margin-top: var(--wp--preset--spacing--1);
    padding: var(--wp--preset--spacing--1);
    border-radius: var(--wp--custom--border-radius);

    font-size: calc(var(--wp--preset--font-size--p-small) * 0.8);
}

.forminator-custom-form .forminator-error-message,
.form-row .form-field .form-error-message {
    color: var(--wp--preset--color--danger-text);
    background-color: var(--wp--preset--color--danger-bg);
}

.forminator-custom-form .forminator-response-message {
    margin: var(--wp--preset--spacing--1) 0;
    padding: var(--wp--preset--spacing--1);
    border-radius: var(--wp--custom--border-radius);
    font-size: calc(var(--wp--preset--font-size--p-small) * 0.8);
}

.forminator-custom-form .forminator-response-message p {
    font-size: calc(var(--wp--preset--font-size--p-small) * 0.8);
    line-height: initial !important;
}

.forminator-custom-form .forminator-description,
.forminator-custom-form .forminator-response-message.forminator-loading {
    color: var(--wp--preset--color--text);
    background-color: var(--wp--preset--color--bg-dark);
}

.forminator-custom-form .forminator-response-message.forminator-success {
    color: var(--wp--preset--color--success-text);
    background-color: var(--wp--preset--color--success-bg);

}

.forminator-custom-form .forminator-response-message.forminator-error {
    display: none;
}

/* Buttons */
.forminator-custom-form .forminator-button {
    cursor: pointer;

	display: block;

    width: 100%;
	margin-top: var(--wp--preset--spacing--3);
	padding: var(--wp--preset--spacing--1);
	border: none;
	border-radius: var(--wp--custom--border-radius);

	font-size: var(--wp--preset--font-size--p-small);
	font-weight: bold;
	color: var(--wp--preset--color--bg-light);
	text-align: center;
	text-transform: lowercase;

	background-color: oklch(0.7 var(--wp--preset--color--primary-ch));

	transition: background-color 0.2s ease-in-out;
}

.forminator-custom-form .forminator-button:hover {
	background-color: oklch(0.5 var(--wp--preset--color--primary-ch));
}