/* ==========================================================================
   Atlas Form Styles
   --------------------------------------------------------------------------
   Styles for labels, inputs, checkboxes, radios, range, and HubSpot form
   overrides. Uses CSS custom properties set in theme_overrides.hubl.css.
   ========================================================================== */

/* Labels */
.form-label,
label,
.hs-form-field > label,
.hs-form-field label,
.hs-field-desc,
.hs-form label,
.hs-form .hs-form-field > label,
form label {
  color: var(--atlas-label-color);
  font-weight: var(--atlas-label-font-weight) !important;
}

/* HubSpot form layout resets */
.hs-form fieldset {
  max-width: none !important;
}

.hs-form fieldset.form-columns-1 .hs-input:not([type="checkbox"]):not([type="radio"]) {
  width: 100% !important;
}

.hs-form fieldset.form-columns-2 .hs-input:not([type="checkbox"]):not([type="radio"]) {
  width: 100% !important;
}

/* Form Controls */
.form-control, .form-select, input[type="text"], input[type="email"],
input[type="password"], input[type="file"], input[type="tel"], input[type="number"],
input[type="search"], input[type="url"], textarea, select,
.hs-input:not([type="checkbox"]):not([type="radio"]) {
	display: block;
	width: 100%;
	padding: var(--atlas-input-padding);
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	color: var(--atlas-input-color);
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-color: var(--atlas-input-background);
	background-clip: padding-box;
	border: var(--atlas-input-border-width) solid var(--atlas-input-border-color);
	border-radius: var(--atlas-input-border-radius);
	transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;

	&::placeholder {
		color: var(--atlas-input-placeholder-color);
		opacity: 1;
	}

	&:focus {
		color: var(--atlas-input-color);
		background-color: var(--atlas-input-background);
		border-color: var(--atlas-input-focus-border-color);
		outline: 0;
		box-shadow: none;
	}

	&:disabled {
		color: var(--atlas-input-disabled-color);
		background-color: var(--atlas-input-disabled-background);
		opacity: 1;
	}
}

.form-select {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3E%3C/svg%3E");
	background-position: right .75rem center;
	background-repeat: no-repeat;
	background-size: 16px 12px;
	padding-right: 2.25rem;
}

/* Checkboxes and Radios */
.form-check-input, input[type="checkbox"], input[type="radio"],
.hs-form input[type="checkbox"], .hs-form input[type="radio"],
.hs-form .hs-input[type="checkbox"], .hs-form .hs-input[type="radio"] {
	--atlas-form-check-bg: var(--atlas-input-background);
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-color: var(--atlas-form-check-bg);
	background-image: var(--atlas-form-check-bg-image);
	background-position: 50%;
	background-repeat: no-repeat;
	background-size: contain;
	border: var(--atlas-input-border-width) solid var(--atlas-input-border-color);
	flex-shrink: 0;
	height: 1em !important;
	width: 1em !important;
	margin-top: .25em;
	vertical-align: top;

	&[type="checkbox"] {
		border-radius: .25em;

		&:checked {
			background-color: var(--atlas-form-accent);
			border-color: var(--atlas-form-accent);
			background-image: var(--atlas-form-check-bg-svg);
		}
	}

	&[type="radio"] {
		border-radius: 50%;

		&:checked {
			background-color: var(--atlas-form-accent);
			border-color: var(--atlas-form-accent);
			background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='2' fill='%23fff'/%3E%3C/svg%3E");
		}
	}

	&:focus {
		border-color: var(--atlas-input-focus-border-color);
		box-shadow: none;
		outline: 0;
	}

	&:disabled {
		opacity: .5;
		cursor: not-allowed;
	}
}

/* Range Input */
.form-range, input[type="range"] {
	width: 100%;
	height: 1.5rem;
	padding: 0;
	background-color: transparent;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;

	&:focus {
		outline: 0;
	}

	&::-webkit-slider-thumb {
		width: 1rem;
		height: 1rem;
		margin-top: -0.25rem;
		background-color: var(--atlas-form-accent);
		border: 0;
		border-radius: 1rem;
		-webkit-appearance: none;
		appearance: none;
		cursor: pointer;
	}

	&::-moz-range-thumb {
		width: 1rem;
		height: 1rem;
		background-color: var(--atlas-form-accent);
		border: 0;
		border-radius: 1rem;
		-moz-appearance: none;
		appearance: none;
		cursor: pointer;
	}

	&::-webkit-slider-runnable-track {
		width: 100%;
		height: 0.5rem;
		color: transparent;
		cursor: pointer;
		background-color: var(--atlas-input-border-color);
		border-color: transparent;
		border-radius: 1rem;
	}

	&::-moz-range-track {
		width: 100%;
		height: 0.5rem;
		color: transparent;
		cursor: pointer;
		background-color: var(--atlas-input-border-color);
		border-color: transparent;
		border-radius: 1rem;
	}
}

/* Progress Bar */
.progress {
	display: flex;
	height: 1rem;
	overflow: hidden;
	font-size: 0.75rem;
	background-color: #e9ecef;
	border-radius: var(--atlas-input-border-radius);
}

.progress-bar {
	display: flex;
	flex-direction: column;
	justify-content: center;
	overflow: hidden;
	color: var(--atlas-form-accent-contrast);
	text-align: center;
	white-space: nowrap;
	background-color: var(--atlas-form-accent);
	transition: width 0.6s ease;
}

/* Spinner */
.spinner-border {
	display: inline-block;
	width: 2rem;
	height: 2rem;
	vertical-align: -0.125em;
	border: 0.25em solid currentColor;
	border-right-color: transparent;
	border-radius: 50%;
	animation: spinner-border 0.75s linear infinite;
}

.spinner-border-sm {
	width: 1rem;
	height: 1rem;
	border-width: 0.2em;
}

@keyframes spinner-border {
	to {
		transform: rotate(360deg);
	}
}

/* ==========================================================================
   Form Layout — title (5/12) + form (7/12) side by side
   ========================================================================== */

.hs_cos_wrapper_type_form {
  display: grid;
  grid-template-columns: 5fr 7fr;
  column-gap: var(--bs-gutter-x, 1.5rem);
  align-items: start;
}

/* Title and optional richtext description stay in column 1 */
.hs_cos_wrapper.form-title,
.hs_cos_wrapper_type_form > .hs-richtext {
  grid-column: 1;
}

/* Title typography from theme setting */
.hs_cos_wrapper.form-title {
  font-size: var(--atlas-form-title-font-size, var(--atlas-h3-font-size));
  font-weight: var(--atlas-form-title-font-weight, var(--atlas-h3-font-weight));
  margin-top: 0;
  line-height: 1.2;
}

/* Form occupies column 2 and spans all rows */
.hs_cos_wrapper_type_form > .hs-form,
.hs_cos_wrapper_type_form > form {
  grid-column: 2;
  grid-row: 1 / -1;
}

@media (max-width: 767.98px) {
  .hs_cos_wrapper_type_form {
    grid-template-columns: 1fr;
  }

  .hs_cos_wrapper.form-title,
  .hs_cos_wrapper_type_form > .hs-richtext,
  .hs_cos_wrapper_type_form > .hs-form,
  .hs_cos_wrapper_type_form > form {
    grid-column: 1;
    grid-row: auto;
  }
}