/**
 * FR Forms – frontend.css
 * Default frontend styles.
 */

/* Form layout */
.frforms-wrapper {
	visibility: hidden;
    container-type: inline-size;
    container-name: frforms;
}
@container frforms {

	.frforms-form {
		display: grid;
		grid-template-columns: var(--frforms-columns, repeat(4, minmax(0, 1fr)));
		gap: var(--frforms-gap, 16px);
	}
               
	.frforms-field {
		grid-column: var(--x, auto) / span var(--colspan, 1);
		grid-row: var(--y, auto) / span var(--rowspan, 1);
		margin-bottom: 0;
	}

	.frforms-style-vertical .frforms-field:not(.frforms-field-heading) {
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
		gap: 6px;
	}

	.frforms-style-vertical .frforms-field:not(.frforms-field-heading) .frforms-label {
		flex: 0 0 100%;
		margin-bottom: 0;
	}

	.frforms-style-vertical .frforms-field:not(.frforms-field-heading) .frforms-field-input:not([type="checkbox"]),
	.frforms-style-vertical .frforms-field:not(.frforms-field-heading) input:not([type="checkbox"]),
	.frforms-style-vertical .frforms-field:not(.frforms-field-heading) textarea {
		flex: 1 1 auto;
		min-width: 0;
	}

	.frforms-style-horizontal .frforms-field:not(.frforms-field-heading):not(.frforms-field-checkbox) {
		display: grid;
		grid-template-columns: minmax(120px, auto) minmax(0, 1fr);
		gap: 6px 12px;
		align-items: start;
	}

	.frforms-style-horizontal .frforms-field:not(.frforms-field-heading) .frforms-label {
		grid-column: 1;
		margin-bottom: 0;
	}

	.frforms-style-horizontal .frforms-field:not(.frforms-field-heading) .frforms-field-input,
	.frforms-style-horizontal .frforms-field:not(.frforms-field-heading) input,
	.frforms-style-horizontal .frforms-field:not(.frforms-field-heading) textarea {
		grid-column: 2; resize: vertical;
	}

	.frforms-style-horizontal .frforms-field .frforms-help {
		grid-column: 1;
	}

	.frforms-style-horizontal .frforms-field .frforms-error {
		grid-column: 2;
	}

	.frforms-style-horizontal .frforms-field-checkbox .frforms-checkbox-label {
		grid-column: 2;
	}

	/* Labels */
	.frforms-label {
		display: block;
		font-weight: 600;
		margin-bottom: 4px;
	}

	.frforms-checkbox-label {
		display: inline-flex;
		align-items: flex-start;
		gap: 8px;
		cursor: pointer;
	}

	/* Required asterisk */
	.frforms-required {
		color: #c0392b;
		margin-left: 2px;
	}

	/* Inline error messages */
	.frforms-error {
		display: block;
		color: #c0392b;
		font-size: 0.875em;
		margin-top: 3px;
	}

	/* Top-level errors box */
	.frforms-errors-top {
		background: #fdecea;
		border: 1px solid #f5c6cb;
		border-radius: 3px;
		padding: 10px 14px;
		margin-bottom: 16px;
		color: #721c24;
	}

	.frforms-errors-top ul {
		margin: 0;
		padding-left: 20px;
	}

	/* Help text */
	.frforms-help {
		display: block;
		color: #666;
		font-size: 0.85em;
		margin-top: 3px;
	}

	/* Heading field */
	.frforms-field-heading .frforms-heading-text {
		margin: 0;
	}
	.frforms-field-heading .frforms-heading-text > :first-child {
		margin-top: 0;
	}
	.frforms-field-heading .frforms-heading-text > :last-child {
		margin-bottom: 0;
	}

	.frforms-submit-row {
		grid-column: 1 / -1;
	}

	.frforms-submit {
		padding: 8px 28px;
		background: #3498db;
		color: #fff;
		border: none;
		border-radius: 3px;
		font-size: 1em;
		cursor: pointer;
		transition: background 0.15s;
	}

	.frforms-submit:hover {
		background: #2980b9;
	}

	/* Success message */
	.frforms-success {
		padding: 14px 18px;
		background: #d4edda;
		border: 1px solid #c3e6cb;
		border-radius: 3px;
		color: #155724;
		margin: 12px 0;
	}

	/* Header/footer areas */
	.frforms-header,
	.frforms-footer {
		margin-bottom: 12px;
	}

	/* Theme: nice-form */
	.frforms-theme-nice-form .frforms-label {
		margin-top: 8px;
	}

	.frforms-theme-nice-form .frforms-field-input,
	.frforms-theme-nice-form .frforms-form input[type="text"],
	.frforms-theme-nice-form .frforms-form input[type="email"],
	.frforms-theme-nice-form .frforms-form input[type="date"],
	.frforms-theme-nice-form .frforms-form input[type="time"],
	.frforms-theme-nice-form .frforms-form input[type="url"],
	.frforms-theme-nice-form .frforms-form input[type="tel"],
	.frforms-theme-nice-form .frforms-form input[type="number"],
	.frforms-theme-nice-form .frforms-form textarea {
		border-radius: 10px;
		border: 1px solid rgb(192, 196, 201);
		border-bottom-width: 2px;
		background: #fbfcff;
		padding: 10px 12px;
		font-family: inherit;
		font-size: 0.8em;
	}

	.frforms-theme-nice-form .frforms-field-input:user-invalid,
	.frforms-theme-nice-form .frforms-form input[type="text"]:user-invalid,
	.frforms-theme-nice-form .frforms-form input[type="email"]:user-invalid,
	.frforms-theme-nice-form .frforms-form input[type="date"]:user-invalid,
	.frforms-theme-nice-form .frforms-form input[type="time"]:user-invalid,
	.frforms-theme-nice-form .frforms-form input[type="url"]:user-invalid,
	.frforms-theme-nice-form .frforms-form input[type="tel"]:user-invalid,
	.frforms-theme-nice-form .frforms-form input[type="number"]:user-invalid,
	.frforms-theme-nice-form .frforms-form textarea:user-invalid {
		border-color: rgb(255, 0, 0);
	}

	.frforms-theme-nice-form .frforms-submit {
		border-radius: 10px;
		font-weight: 600;
	}



	/* Theme: bootstrap */
	.frforms-theme-bootstrap .frforms-label {
		margin-top: 8px;
	}
	.frforms-theme-bootstrap .frforms-field-input,
	.frforms-theme-bootstrap .frforms-form input[type="text"],
	.frforms-theme-bootstrap .frforms-form input[type="email"],
	.frforms-theme-bootstrap .frforms-form input[type="date"],
	.frforms-theme-bootstrap .frforms-form input[type="time"],
	.frforms-theme-bootstrap .frforms-form input[type="url"],
	.frforms-theme-bootstrap .frforms-form input[type="tel"],
	.frforms-theme-bootstrap .frforms-form input[type="number"],
	.frforms-theme-bootstrap .frforms-form textarea {
		border-radius: .25rem;
		border: 1px solid #ced4da;
		background: #fbfcff;
		padding: .375rem .75rem;
		font-family: inherit;
		font-size: .8em;
	}

	.frforms-theme-bootstrap .frforms-field-input:user-invalid,
	.frforms-theme-bootstrap .frforms-form input[type="text"]:user-invalid,
	.frforms-theme-bootstrap .frforms-form input[type="email"]:user-invalid,
	.frforms-theme-bootstrap .frforms-form input[type="date"]:user-invalid,
	.frforms-theme-bootstrap .frforms-form input[type="time"]:user-invalid,
	.frforms-theme-bootstrap .frforms-form input[type="url"]:user-invalid,
	.frforms-theme-bootstrap .frforms-form input[type="tel"]:user-invalid,
	.frforms-theme-bootstrap .frforms-form input[type="number"]:user-invalid,
	.frforms-theme-bootstrap .frforms-form textarea:user-invalid {
		border-color: #dc3545;
	}

	.frforms-theme-bootstrap .frforms-submit {
		border-radius: .25em;
		font-weight: 400;
		padding: .375rem .75rem;
		border: 1px solid transparent;
	}

	/* Theme: Material UI - filled */
	.frforms-theme-mui-filled .frforms-label {
		margin-top: 8px;
	}
	.frforms-theme-mui-filled .frforms-field-input,
	.frforms-theme-mui-filled .frforms-form input[type="text"],
	.frforms-theme-mui-filled .frforms-form input[type="email"],
	.frforms-theme-mui-filled .frforms-form input[type="date"],
	.frforms-theme-mui-filled .frforms-form input[type="time"],
	.frforms-theme-mui-filled .frforms-form input[type="url"],
	.frforms-theme-mui-filled .frforms-form input[type="tel"],
	.frforms-theme-mui-filled .frforms-form input[type="number"],
	.frforms-theme-mui-filled .frforms-form textarea {
		border: 1px solid transparent;
		border-bottom: 2px solid #6f7b8a;
		border-radius: 6px 6px 0 0;
		background: #f3f5f8;
		padding: 12px 12px 9px;
		font-family: inherit;
		font-size: 0.8em;
	}

	.frforms-theme-mui-filled .frforms-field-input:focus,
	.frforms-theme-mui-filled .frforms-form input[type="text"]:focus,
	.frforms-theme-mui-filled .frforms-form input[type="email"]:focus,
	.frforms-theme-mui-filled .frforms-form textarea:focus {
		outline: none;
		border-bottom-color: #1976d2;
		background: #eef4fb;
		box-shadow: none;
	}

	/* Theme: Material UI - outlined */
	.frforms-theme-mui-outlined .frforms-label {
		margin-top: 8px;
	}
	.frforms-theme-mui-outlined .frforms-field-input,
	.frforms-theme-mui-outlined .frforms-form input[type="text"],
	.frforms-theme-mui-outlined .frforms-form input[type="email"],
	.frforms-theme-mui-outlined .frforms-form input[type="date"],
	.frforms-theme-mui-outlined .frforms-form input[type="time"],
	.frforms-theme-mui-outlined .frforms-form input[type="url"],
	.frforms-theme-mui-outlined .frforms-form input[type="tel"],
	.frforms-theme-mui-outlined .frforms-form input[type="number"],
	.frforms-theme-mui-outlined .frforms-form textarea {
		border: 1px solid #8b97a8;
		border-radius: 8px;
		background: #fff;
		padding: 11px 13px;
		font-family: inherit;
		font-size: 0.8em;
	}

	.frforms-theme-mui-outlined .frforms-field-input:focus,
	.frforms-theme-mui-outlined .frforms-form input[type="text"]:focus,
	.frforms-theme-mui-outlined .frforms-form input[type="email"]:focus,
	.frforms-theme-mui-outlined .frforms-form textarea:focus {
		outline: none;
		border-color: #1976d2;
		box-shadow: 0 0 0 1px #1976d2;
	}

	/* Theme: Material UI - standard */
	.frforms-theme-mui-standard .frforms-label {
		margin-top: 8px;
	}
	.frforms-theme-mui-standard .frforms-field-input,
	.frforms-theme-mui-standard .frforms-form input[type="text"],
	.frforms-theme-mui-standard .frforms-form input[type="email"],
	.frforms-theme-mui-standard .frforms-form input[type="date"],
	.frforms-theme-mui-standard .frforms-form input[type="time"],
	.frforms-theme-mui-standard .frforms-form input[type="url"],
	.frforms-theme-mui-standard .frforms-form input[type="tel"],
	.frforms-theme-mui-standard .frforms-form input[type="number"],
	.frforms-theme-mui-standard .frforms-form textarea {
		border: 0;
		border-bottom: 1px solid #7e8793;
		border-radius: 0;
		background: transparent;
		padding: 8px 2px;
		font-family: inherit;
		font-size: 0.8em;
	}

	.frforms-theme-mui-standard .frforms-field-input:focus,
	.frforms-theme-mui-standard .frforms-form input[type="text"]:focus,
	.frforms-theme-mui-standard .frforms-form input[type="email"]:focus,
	.frforms-theme-mui-standard .frforms-form textarea:focus {
		outline: none;
		border-bottom-width: 2px;
		border-bottom-color: #1976d2;
		box-shadow: none;
	}
	.frforms-captcha .captcha-code {
		display: flex;
		align-items: center;
		cursor: auto;
		margin-top: 0 !important;
		flex-wrap: wrap;
	}
	#captcha-code {
		height: auto !important;
		width: 100%;
		box-sizing: border-box;
	}
}
@container frforms (max-width: 700px)
  {.frforms-form {display: inline-block;} }