.multistep-form {
	max-width: 800px;
	margin: 0 auto;
	padding: 20px;
}

.loader {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 30px;
	aspect-ratio: 1;
	background: #ffffff9d;
	display: grid;
	animation: l4-0 1s infinite linear;
}

.loader::before,
.loader::after {
	content: "";
	grid-area: 1/1;
	background: #1e1e1e;
	animation: inherit;
	animation-name: l4-1;
}

.loader::after {
	background: #6d6d6d;
	--s: 60deg;
}

@keyframes l4-0 {

	0%,
	20% {
		transform: rotate(0)
	}

	100% {
		transform: rotate(90deg)
	}
}

@keyframes l4-1 {
	50% {
		transform: rotate(var(--s, 30deg))
	}

	100% {
		transform: rotate(0)
	}
}
.form-step.active {
	display: block;
}

.form-group {
	margin-bottom: 1rem;
}

.form-item {
	margin-bottom: 0.75rem;
}

.error-messages {
	color: red;
	font-size: 0.875rem;
}

.error {
	border: 1px solid red;
}

.radio-group {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.radio-item ul {
	margin-top: 0.5rem;
	padding-left: 1.5rem;
}

.step-indicator {
	display: flex;
	gap: 1rem;
	margin-bottom: 1rem;
}

.step-indicator span {
	padding: 0.5rem;
}

.step-indicator span.active {
	font-weight: bold;
	border-bottom: 2px solid #000;
}

.form-navigation button {
	padding: 0.5rem 1rem;
	margin-right: 0.5rem;
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
}

.step-indicator {
	display: flex;
	justify-content: space-between;
	margin-bottom: 20px;
}

.step-indicator span {
	padding: 5px 10px;
	background: #e0e0e0;
	border-radius: 5px;
}

.step-indicator span.active {
	background: #4caf50;
	color: white;
}

.form-step.active {
	display: block;
}

.form-group {
	margin-bottom: 20px;
}

.form-item {
	margin-bottom: 15px;
	position: relative;
}

.form-item label {
	display: block;
	margin-bottom: 5px !important;
	margin: 10px;
}

.form-item input,
.form-item select,
.form-item textarea {
	width: 100%;
	padding: 8px;
	box-sizing: border-box;
	border: 2px solid #ccc !important;
	color: black;
	border-radius: 8px !important;
}

.form-item .error-messages {
	margin-top: -21px;
	margin-bottom: 26px;
}

.form-item .checkbox-group + .error-messages,
.form-item input[type="file"] + .error-messages {
	margin-top: 20px;
}

.no-arrows {
	-moz-appearance: textfield;
}

.no-arrows::-webkit-inner-spin-button,
.no-arrows::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.checkbox-group,
.radio-group {
	display: flex;
	flex-wrap: wrap;
	gap: 15px 10px;
}

.checkbox-item {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 22px;
	border: 1px solid #ccc;
	background-color: #fff;
	transition: background-color 0.3s ease;
	cursor: pointer;
	padding: 7px 15px;
	user-select: none;
}

.checkbox-item.selected {
	background-color: #d3d3d3a3;
}

.checkbox-item input[type="checkbox"] {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.radio-item {
	display: flex;
	align-items: center;
	gap: 15px 10px;
	width: 100%;
	flex-wrap: wrap;
}

.radio-item > input[type="radio"] {
	flex: 0 0 fit-content;
	margin: 0;
}

.radio-item > label {
	flex: 1 1 auto;
	margin: 0;
}

.radio-item > ul {
	flex: 0 0 100%;
	margin: 0;
	padding-left: 23px;
}

.error {
	color: #dc3545;
	font-size: 0.875em;
	display: block;
}

.note {
	font-size: 0.75em;
	color: #666;
}

button {
	padding: 10px 20px;
	background: #4caf50;
	color: white;
	border: none;
	border-radius: 5px;
	cursor: pointer;
	margin-right: 10px;
}

button[type="button"] {
	background: #ccc;
}

.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
}

.date-picker-container {
	background: #fff;
	padding: 1.5rem;
	border-radius: 8px;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	max-width: 400px;
	margin: auto;
}

.quick-buttons {
	display: flex;
	gap: 1rem;
	justify-content: center;
	margin-bottom: 1rem;
}

.quick-buttons button {
	padding: 0.5rem 1rem;
	background: #007bff;
	color: white;
	border: none;
	border-radius: 6px;
	font-size: 1rem;
	cursor: pointer;
	transition: background 0.2s ease;
}

.quick-buttons button:hover {
	background: #0056b3;
}

.selected-dates {
	margin-top: 1rem;
	padding: 1rem;
	background: #f1f1f1;
	border-radius: 6px;
	font-size: 0.9rem;
}

.flatpickr-day.pending-start {
	background: rgba(0, 123, 255, 0.3) !important;
	border-color: rgba(0, 123, 255, 0.3) !important;
	position: relative;
}

.flatpickr-day.pending-start::after {
	content: 'S';
	position: absolute;
	top: 2px;
	right: 2px;
	font-size: 0.6rem;
	color: #000;
	font-weight: bold;
}

.flatpickr-day.selected {
	background: #007bff !important;
	border-color: #007bff !important;
	position: relative;
}

.flatpickr-day.selected::after {
	content: '✓';
	position: absolute;
	top: 2px;
	right: 2px;
	font-size: 0.6rem;
	color: #fff;
	font-weight: bold;
}

.flatpickr-day:focus {
	outline: 2px solid #007bff;
	outline-offset: 2px;
}

.quick-buttons button:focus {
	outline: 2px solid #007bff;
	outline-offset: 2px;
}

.flatpickr-clear-button {
	padding: 0.3rem 0.8rem;
	background: #dc3545;
	color: white;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	font-size: 0.8rem;
	position: relative;
	z-index: 99999;
}

.flatpickr-clear-button:hover {
	background: #c82333;
}

.flatpickr-clear-button:focus {
	outline: 2px solid #007bff;
	outline-offset: 2px;
}

#step-5 h4 {
	font-weight: 800;
}

#step-5 label {
	font-weight: 500;
}

#step-5 > .form-group > .form-item:nth-child(2),
#step-5 > .form-group > .form-item:nth-child(3) {
	border: 1px solid #d3d3d3a3;
	padding: 15px 30px 30px;
	margin-bottom: 50px;
}

.step-fade-in {
	opacity: 0;
	transform: scale(0.97);
	transition: none;
	/* Initial state, no transition yet */
}

.step-fade-in-active {
	opacity: 1;
	transform: scale(1);
	transition:
		opacity 800ms ease-out,
		transform 800ms ease-out;
	transition-delay: 100ms;
	/* Delay the fade-in by 100ms after the enter phase begins */
}

.step-fade-out {
	opacity: 1;
	transform: scale(1);
	transition: none;
	/* Initial state, no transition yet */
}

.step-fade-out-active {
	opacity: 0;
	transform: scale(0.97);
	transition:
		opacity 800ms ease-in,
		transform 800ms ease-in;
}

.error-field {
	border: 2px solid #ff0000;
	/* Red border */
	background-color: #ffebee;
	/* Light red background */
}

.error-message {
	color: #ff0000;
	/* Red text */
	font-size: 0.9em;
	margin-top: 4px;
	display: block;
	/* Ensure it appears below the input */
}

.selected-files-list {
	margin-top: 0.5em;
	padding-left: 1em;
	list-style-type: disc;
	color: #333;
	font-size: 0.95rem;
}

@keyframes shake {
	0% { transform: translateX(0); }
	25% { transform: translateX(-5px); }
	50% { transform: translateX(5px); }
	75% { transform: translateX(-3px); }
	100% { transform: translateX(0); }
}

.error-highlight {
	animation: shake 0.4s ease;
	transition: all .4s ease;
}

.reveal_password {
	background-color: transparent !important;
	position: absolute;
	top: 24px;
	right: 0;
}

.reveal_password::before {
  	content: "";
  	background: url("data:image/svg+xml,%3Csvg width='800px' height='800px' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.99902 3L20.999 21M9.8433 9.91364C9.32066 10.4536 8.99902 11.1892 8.99902 12C8.99902 13.6569 10.3422 15 11.999 15C12.8215 15 13.5667 14.669 14.1086 14.133M6.49902 6.64715C4.59972 7.90034 3.15305 9.78394 2.45703 12C3.73128 16.0571 7.52159 19 11.9992 19C13.9881 19 15.8414 18.4194 17.3988 17.4184M10.999 5.04939C11.328 5.01673 11.6617 5 11.9992 5C16.4769 5 20.2672 7.94291 21.5414 12C21.2607 12.894 20.8577 13.7338 20.3522 14.5' stroke='%23cccccc' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  	background-size: 100%;
  	width: 20px;
  	height: 20px;
  	display: block;
}

.reveal_password.visible::before {
	background-image: url("data:image/svg+xml,%3Csvg width='800px' height='800px' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.0007 12C15.0007 13.6569 13.6576 15 12.0007 15C10.3439 15 9.00073 13.6569 9.00073 12C9.00073 10.3431 10.3439 9 12.0007 9C13.6576 9 15.0007 10.3431 15.0007 12Z' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' stroke='%23cccccc'/%3E%3Cpath d='M12.0012 5C7.52354 5 3.73326 7.94288 2.45898 12C3.73324 16.0571 7.52354 19 12.0012 19C16.4788 19 20.2691 16.0571 21.5434 12C20.2691 7.94291 16.4788 5 12.0012 5Z' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' stroke='%23cccccc'/%3E%3C/svg%3E");
}

@media (max-width: 600px) {

	.checkbox-row,
	.radio-item {
		width: 100%;
	}

	.step-indicator {
		flex-direction: column;
		gap: 10px;
	}
}

#step-5 .video-img-radio {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    align-items: center;
    align-content: center;
}

#step-5 .video-img-radio label {
    font-weight: 500;
    display: inline-flex;
    flex-direction: row;
    align-items: center;
}

 #multistep-signup-form input.url-hover-remove:hover::placeholder {
    color: transparent; /* Hides placeholder on hover */
  }

   #multistep-signup-form input.url-hover-remove::placeholder {
    color: #999; /* Gray placeholder */
    opacity: 1;  /* Full visibility */
}


.checkbox-item.locked {
    opacity: 0.6;
}

.checkbox-item.locked input {
    pointer-events: none;
}

.service-site-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}
.site-type-box, .service-type-box {
    display: flex;
    flex-direction: column;
    padding: 20px 50px;
    border: 1px solid #ccc;
    height: 480px;
    max-height: 100%;
    justify-content: flex-start;
    flex-wrap: nowrap;
}
.inlineFlex {
    display: flex;
    align-items: center;
}
.gallery-preview, .main-preview {
    display: none;
}