/* rl-form — RentLife custom forms */

.rl-form-wrap {
	--rl-color-primary:   var(--global-palette3);
	--rl-color-accent: var(--global-palette2);
	--rl-color-error:     #c0392b;
	--rl-color-valid:     #27ae60;
	--rl-color-border:    #d0d7de;
	--rl-color-bg:        #ffffff;
	--rl-color-label:     #374151;
	--rl-color-input-bg:  #F5F5F5;
	--rl-color-placeholders: #999;
	--rl-color-muted:     #6b7280;
	--rl-radius:          6px;
	--rl-transition:      0.18s ease;
	font-family:          inherit;
	color:                var(--rl-color-label);
}

.rl-form {
	margin-bottom: 0 !important;
}

/* Progress bar */

.rl-form__progress {
	position:         relative;
	height:           5px;
	background:       var(--rl-color-border);
	border-radius:    0;
	margin-bottom:    1.75rem;
	overflow:         visible;
}

.rl-form__progress-bar {
	height:           100%;
	background:       var(--rl-color-accent);
	border-radius:    0;
	transition:       width 0.35s ease;
	width:            0%;
}

.rl-form__progress-label {
	right:            0;
	top:              calc(100% + 6px);
	font-size:        0.7rem;
	color:            var(--rl-color-muted);
	text-transform: uppercase;
	margin-bottom: 1rem;
	display: block;
	letter-spacing: 0.4px;
}

/* Step header */

.rl-step-header-wrapper {
	background: var(--global-palette9);
	padding: 0 0 2.25rem 0;
}

.rl-step-header {
	display:     flex;
	align-items: center;
	gap:         1.65rem;
	margin-bottom: 0;
}

.rl-step-header__icon {
	flex-shrink: 0;
	width:       47px;
	height:      47px;
	display:     flex;
	align-items: center;
	justify-content: center;
	border-radius: 0;
	color:       var(--rl-color-primary);
	border: 1px solid #d5cbcb;
}

.rl-step-header__icon svg {
	width:  1.5rem;
	height: 1.5rem;
}

.rl-step-header__title {
	margin: 0 0 0.25rem;
	font-size: 1.72rem;
	font-weight: 400;
	color: var(--rl-color-primary);
	line-height: 1;
	text-transform: inherit;
	margin-bottom: 0.4rem !important;
}

.rl-step-header__desc {
	margin:    0;
	font-size: 1.01rem;
	color:     var(--global-palette6);
}

/* Form row — 12-column grid */

.rl-form__row {
	display:               grid;
	grid-template-columns: repeat(12, 1fr);
	gap:                   0.9rem;
	padding: 40px 32px 0;
}

/* Field sizing */

.rl-field--size-full    { grid-column: span 12; }
.rl-field--size-half    { grid-column: span 6; }
.rl-field--size-third   { grid-column: span 4; }
.rl-field--size-quarter { grid-column: span 3; }

@media (max-width: 640px) {
	.rl-field--size-half,
	.rl-field--size-third,
	.rl-field--size-quarter { grid-column: span 12; }
}

/* Field */

.rl-field {
	display:        flex;
	flex-direction: column;
	gap:            0.25rem;
}

.rl-field__label {
	font-size:   0.875rem;
	font-weight: 500;
	color:       var(--rl-color-label);
	display:     flex;
	align-items: center;
	gap:         0.3rem;
}

p.rl-field__description {
	margin-bottom: 0.4rem;
	font-size: 0.85rem;
}

.rl-field.rl-field--radio {
	gap: 0;
	margin-bottom: 0.5rem;
}

/* Tooltip */

.rl-field__tip {
	position:    relative;
	display:     inline-flex;
	align-items: center;
	color:       var(--rl-color-muted);
	cursor:      help;
	line-height: 1;
}

.rl-field__tip svg {
	width:  0.875rem;
	height: 0.875rem;
	flex-shrink: 0;
}

.rl-field__tip-text {
	position:   absolute;
	bottom:     calc(100% + 8px);
	left:       50%;
	transform:  translateX(-50%);
	background: var(--rl-color-primary);
	color:      #fff;
	font-size:  0.85rem;
	font-weight: 400;
	line-height: 1.4;
	padding:    0.4rem 0.65rem;
	border-radius: var(--rl-radius);
	width:      max-content;
	max-width:  220px;
	white-space: normal;
	pointer-events: none;
	opacity:    0;
	transition: opacity 0.18s ease;
	z-index:    100;
}

.rl-field__tip-text::after {
	content:      '';
	position:     absolute;
	top:          100%;
	left:         50%;
	transform:    translateX(-50%);
	border:       5px solid transparent;
	border-top-color: var(--rl-color-primary);
}

.rl-field__tip:hover .rl-field__tip-text,
.rl-field__tip:focus .rl-field__tip-text,
.rl-field__tip:focus-within .rl-field__tip-text {
	opacity: 1;
}

.rl-field__req {
	color: var(--rl-color-error);
	color: var(--global-palette2, #2B6CB0);
}

/* Inputs */

.rl-field__input {
	width:            100%;
	border:           1.5px solid var(--rl-color-border);
	background:       var(--rl-color-input-bg);
	color:            inherit;
	font-family:      inherit;
	transition:       border-color var(--rl-transition), box-shadow var(--rl-transition);
	box-sizing:       border-box;
	appearance:       none;
	-webkit-appearance: none;
}

.rl-field__input[type="text"],
.rl-field__input[type="email"],
.rl-field__input[type="phone"],
.rl-field__input[type="tel"],
.rl-field__input[type="url"],
.rl-field__input[type="number"],
select.rl-field__input {
	border-radius: 0;
	padding: 0.59rem 0.75rem;
	border: 1px solid #e3e3e3;
}

.rl-field__input:focus,
.rl-field__input[type="text"]:focus,
.rl-field__input[type="email"]:focus,
.rl-field__input[type="phone"]:focus,
.rl-field__input[type="tel"]:focus,
.rl-field__input[type="number"]:focus,
.rl-field__input[type="url"]:focus {
	outline:       none !important;
	border-color:  var(--rl-color-accent) !important;
	box-shadow:    0 0 0 3px color-mix(in srgb, var(--rl-color-accent) 18%, transparent) !important;
	background:    var(--rl-color-bg);
	border: 1px solid var(--global-palette9);
}

.rl-field__input[type="number"] {
	-moz-appearance: textfield;
}

.rl-field__input[type="number"]::-webkit-outer-spin-button,
.rl-field__input[type="number"]::-webkit-inner-spin-button {
	-webkit-appearance: none;
  margin: 0;
}

select.rl-field__input {
	appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 100%;
  cursor: pointer;

	background-image: url('data:image/svg+xml;charset=US-ASCII,<svg xmlns="http://www.w3.org/2000/svg" width="292.4" height="292.4" viewBox="0 0 292.4 292.4"><path fill="%23959698" d="M287 69.4a17.6 17.6 0 0 0-13-5.4H18.4c-5 0-9.3 1.8-12.9 5.4A17.6 17.6 0 0 0 0 82.2c0 5 1.8 9.3 5.4 12.9l128 127.9c3.6 3.6 7.8 5.4 12.8 5.4s9.2-1.8 12.8-5.4L287 95c3.5-3.5 5.4-7.8 5.4-12.8 0-5-1.9-9.2-5.5-12.8z"/></svg>');
  background-repeat: no-repeat;

  background-position: right 15px top 50%;
  background-size: 9px auto;
}

select.rl-field__input:has(option:checked[value=""]) {
	color: var(--rl-color-placeholders);
}

.rl-field__textarea {
	resize:   vertical;
	min-height: 90px;
}

textarea.rl-field__input {
	border-radius: 0;
	border: 1px solid var(--global-palette9);
	background: var(--global-palette9);
}

.rl-field__select {
	background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat:   no-repeat;
	background-position: right 0.75rem center;
	padding-right:       2.25rem;
	cursor:              pointer;
}

.rl-field__select--multi {
	background-image: none;
	padding-right:    0.75rem;
	min-height:       90px;
}

/* Choices (radio / checkbox) */

.rl-choice-group {
	display:   flex;
	flex-wrap: wrap;
	gap:       0.5rem;
}

.rl-choice {
	display:     flex;
	align-items: center;
	gap:         0.4rem;
	cursor:      pointer;
	font-size:   16px;
	padding:     0.59rem 0.75rem;
	border:      1.5px solid var(--global-palette9);
	border-radius: 0;
	transition:  border-color var(--rl-transition), background var(--rl-transition);
	background: var(--global-palette9);
}

.rl-choice span {
	margin-left: 0.5rem;
}


.rl-choice-group-basic,
.rl-choice-group-basic-full {
	margin-top: 0.6rem;
}

.rl-choice-group-alt {
	margin-top: 0.3rem;
}

.rl-choice-group-basic .rl-choice,
.rl-choice-group-basic-full .rl-choice {
	min-width: 135px;
	padding-left: 1rem;
}

.rl-choice-group-basic-full .rl-choice {
	flex-grow: 1;
}

.rl-choice input[type="radio"],
.rl-choice input[type="checkbox"] {
	accent-color: var(--rl-color-accent);
	accent-color: var(--global-palette-highlight);
	width:        14px;
	height:       14px;
	cursor:       pointer;
	flex-shrink:  0;
}

.rl-field__input_radio {
	appearance: none;
	-webkit-appearance: none;
	width: 20px;
	height: 20px;
	border: 1px solid var(--global-palette-highlight);
	border-radius: 50%;
	cursor: pointer;
	background: transparent;
	flex-shrink: 0;
	transition: background-color 0.2s ease;
	position: relative;
}


.rl-field__input_radio:checked {
	background: radial-gradient(circle, var(--global-palette-highlight) 50%, transparent 50%);
}

.rl-choice:hover {
	border-color: var(--global-palette3);
	background: var(--global-palette3);
	color: #fff;
}

.rl-choice:has(input:checked) {
	border-color: var(--global-palette3);
	background: var(--global-palette3);
	color: #fff;
}

.rl-choice-group.rl-choice-group-boxed-2,
.rl-choice-group.rl-choice-group-boxed-3,
.rl-choice-group.rl-choice-group-boxed-4 {
	display: grid;
	margin-top: 0.7rem;
}

.rl-choice-group.rl-choice-group-boxed-2 .rl-choice,
.rl-choice-group.rl-choice-group-boxed-3 .rl-choice,
.rl-choice-group.rl-choice-group-boxed-4 .rl-choice {
	flex-direction: column;
	align-items: flex-start;
	aspect-ratio: 1 / 1;
	justify-content: space-between;
	padding: 1.5rem 1.1rem 0.9rem 1.2rem;
}

.rl-choice-group.rl-choice-group-boxed-2 .rl-choice span,
.rl-choice-group.rl-choice-group-boxed-3 .rl-choice span,
.rl-choice-group.rl-choice-group-boxed-4 .rl-choice span {
	margin-left: 0;
}

.rl-choice-group.rl-choice-group-boxed-3 {
	grid-template-columns: auto auto auto;
}

.rl-choice-group.rl-choice-group-boxed-4 {
	grid-template-columns: auto auto auto auto;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}



.rl-field--checkbox .rl-field__description {
	font-size: 13px;
	margin-bottom: 0;
}

.rl-field--checkbox .rl-choice__label {
	/* display: none !important; */
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--rl-color-label) !important;
}

.rl-field--checkbox .rl-choice {
	padding: 0 !important;
	background: none !important;
	border: none !important;
	transition: none;
	align-items: flex-start;
}

.rl-field--checkbox .rl-field__label {
	/* margin-left: 2.35rem; */
	margin-top: 0.3rem;
	margin-bottom: 0.3rem;
}

.rl-field--checkbox .rl-choice input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	width: 23px;
	height: 23px;
	border: 1.5px solid var(--rl-color-border);
	border-radius: 0;
	background: var(--rl-color-input-bg);
	cursor: pointer;
	flex-shrink: 0;
	transition: background var(--rl-transition), border-color var(--rl-transition);
	transition: none;
	position: relative;
	top: 4px;
}

.rl-field--checkbox .rl-choice:has(input:checked) input[type="checkbox"] {
	background-color: var(--global-palette3);
	border-color: var(--global-palette3);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none'%3E%3Cpolyline points='2,6 5,9 10,3' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 11px 11px;
}

/* Validation states */

.rl-field.is-invalid .rl-field__input,
.rl-field.is-invalid .rl-choice-group {
	border-color: var(--rl-color-error);
}

.rl-field.is-invalid .rl-field__input:focus {
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--rl-color-error) 18%, transparent);
}

.rl-field.is-valid .rl-field__input {
	/* border-color: var(--rl-color-valid); */
}

.rl-field__error {
	font-size:  0.8125rem;
	color:      var(--rl-color-error);
	min-height: 1.1em;
}


.rl-choice-group-alt .rl-choice {
	flex-direction: column;
	align-items: flex-start;
	gap: 1.2rem;
	padding: 0.89rem 1.3rem 0.69rem 1.3rem;
	flex-grow: 1;
	flex-shrink: 1;
}

.rl-choice-group-alt .rl-choice .rl-choice__label {
	margin-left: 0;
}


/* Navigation */

.rl-form__nav {
	display:         flex;
	justify-content: space-between;
	align-items:     center;
	gap:             0.75rem;
	margin-top:      1.5rem;
	padding: 0 32px;
}

.rl-btn[hidden] { display: none; }

.rl-field--hidden { display: none !important; }

.rl-field[data-rl-depends] {
	transition: opacity 0.2s ease;
	opacity: 0;
}
.rl-field[data-rl-depends].rl-field--visible {
	transition: opacity 0.4s ease;
	opacity: 1;
}

.rl-btn {
	display:       inline-flex;
	align-items:   center;
	gap:           0.4rem;
	padding:       0 1.5rem;
	font-size:     11px;
	letter-spacing: 0.4px;
	font-weight:   500;
	text-transform: uppercase;
	border:        none;
	border-radius: 0;
	cursor:        pointer;
	transition:    background var(--rl-transition), opacity var(--rl-transition);
	position: relative;
	flex-grow: 1;
}

.rl-btn_label {
	flex-grow: 1;
}

.rl-btn_icon-wrap {
	width: 40px;
	height: 40px;
	border-left: 0.15rem solid #E3E3E3;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-left: 1rem;
	flex-grow: 0;
	flex-shrink: 0;
}

.rl-btn_icon-wrap svg {
	width: 18px;
}

.rl-btn--next,
.rl-btn--submit {
	color:      #fff;
	margin-left: auto;
	padding-right: 0;
}

.rl-btn--prev {
	padding-left: 0;
}

.rl-btn--prev .rl-btn_icon-wrap {
	margin-left: 0;
	margin-right: 1rem;
	border-left: none;
	border-right: 0.15rem solid #E3E3E3;
}

.rl-btn--next:hover,
.rl-btn--submit:hover {
	background: var(--global-palette-highlight);
	color: var(--global-palette3, #1A202C);
}

.rl-btn--next:disabled,
.rl-btn--submit:disabled {
	opacity: 0.6;
	cursor:  not-allowed;
}

/* .rl-btn--prev {
	background: transparent;
	color:      var(--rl-color-muted);
	border:     1.5px solid var(--rl-color-border);
	padding-left: 0;
}

.rl-btn--prev:hover {
	border-color: var(--rl-color-accent);
	color:        var(--rl-color-accent);
} */

/* Loading state */

.rl-form.is-loading {
	pointer-events: none;
	opacity:        0.7;
}

.rl-form.is-loading .rl-btn--submit .rl-btn_icon-wrap svg{
	opacity: 0;
}

.rl-form.is-loading .rl-btn--submit {
	background: var(--global-palette-highlight);
	color: var(--global-palette3, #1A202C);
}

.rl-form.is-loading .rl-btn--submit::after {
	content:          '';
	display:          inline-block;
	width:            0.95rem;
	height:           0.95rem;
	border:           2px solid rgba(255,255,255,0.4);
	border-top-color: #fff;
	border-radius:    50%;
	animation:        rl-spin 0.65s linear infinite;
	position: absolute;
	right: 12px;
}

@keyframes rl-spin {
	to { transform: rotate(360deg); }
}

/* Messages */

.rl-form__success {
	padding:       1.25rem 1.5rem;
	background:    color-mix(in srgb, var(--rl-color-valid) 10%, transparent);
	border:        1.5px solid var(--rl-color-valid);
	border-radius: 0;
	color:         #1a6636;
	font-size:     0.9375rem;
	margin-top:    0.5rem;
}

.rl-form__success-wrap {
	padding: 0 32px;
}
.rl-form__success-wrap .rl-form__success {
	margin-top: 1rem;
}

.rl-form__global-error {
	padding:       0.85rem 1.25rem;
	background:    color-mix(in srgb, var(--rl-color-error) 8%, transparent);
	border:        1.5px solid var(--rl-color-error);
	border-radius: 0;
	color:         var(--rl-color-error);
	font-size:     0.875rem;
	margin-top:    0.75rem;
}

.rl-form__global-error-wrap {
	padding: 0 32px;
}

/* Hidden step */

.rl-form__step--hidden {
	display: none;
}

/* Turnstile */

.rl-form__turnstile {
	margin-top: 1rem;
}

.rl-form__turnstile[hidden] { display: none; }

/* Flatpickr integration */

.flatpickr-calendar {
	border-radius: var(--rl-radius) !important;
	box-shadow: 0 8px 24px rgba(0,0,0,0.12) !important;
}

/* FilePond integration */

.rl-field__filepond .filepond--root {
	font-family: inherit;
	font-size: 0.9375rem;
	margin-bottom: 0;
}

.rl-field__filepond .filepond--panel-root {
	background-color: var(--rl-color-input-bg);
	border: 1px solid var(--rl-color-border);
	border-radius: 0;
	background-color: #D4D4D4 !important;
	border-color: #cfcfcf !important;
}

.rl-field__filepond .filepond--drop-label label {
	color: var(--rl-color-muted);
	cursor: pointer;
}

.rl-field__filepond .filepond--label-action {
	color: var(--rl-color-accent);
	text-decoration-color: var(--rl-color-accent);
}

.rl-field__filepond .filepond--item-panel {
	border-radius: 0;
}

.rl-field__filepond .filepond--file-action-button {
	cursor: pointer;
}

/* .rl-field__filepond .filepond--file-action-button:hover {
	background-color: rgba(0, 0, 0, 0.20);
	border-color: rgba(0, 0, 0, 0.20) !important;
	box-shadow: 0px 15px 25px -7px rgba(0,0,0,0.1) !important;
} */

.rl-field.is-invalid .rl-field__filepond .filepond--panel-root {
	border-color: var(--rl-color-error);
}


[data-filepond-item-state=processing-complete] .filepond--item-panel {
	background-color: var(--global-palette1) !important;
}

.rl-field--html h5.rl-html__title {
	margin-top: 1.5rem;
	margin-bottom: 0.9rem;
	color: #6C6E70;
	text-transform: uppercase;
	font-size: 11px;
	letter-spacing: 0.4px;
	border-top: 1px solid #cdcdcd;
	padding-top: 1.9rem;
}

.rl-field--html hr {
	border-bottom: 1px solid #cdcdcd;
	margin-bottom: 0.9rem;
	margin-top: 0.9rem;
}

.rl-field--html.no-border .rl-html__title {
	border-top: none !important;
}

.rl-field--html.no-margin .rl-html__title {
	margin-top: 0 !important;
	padding-top: 0 !important;
}


.flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange, .flatpickr-day.selected.inRange, .flatpickr-day.startRange.inRange, .flatpickr-day.endRange.inRange, .flatpickr-day.selected:focus, .flatpickr-day.startRange:focus, .flatpickr-day.endRange:focus, .flatpickr-day.selected:hover, .flatpickr-day.startRange:hover, .flatpickr-day.endRange:hover, .flatpickr-day.selected.prevMonthDay, .flatpickr-day.startRange.prevMonthDay, .flatpickr-day.endRange.prevMonthDay, .flatpickr-day.selected.nextMonthDay, .flatpickr-day.startRange.nextMonthDay, .flatpickr-day.endRange.nextMonthDay,
.flatpickr-day.inRange, .flatpickr-day.prevMonthDay.inRange, .flatpickr-day.nextMonthDay.inRange, .flatpickr-day.today.inRange, .flatpickr-day.prevMonthDay.today.inRange, .flatpickr-day.nextMonthDay.today.inRange, .flatpickr-day:hover, .flatpickr-day.prevMonthDay:hover, .flatpickr-day.nextMonthDay:hover, .flatpickr-day:focus, .flatpickr-day.prevMonthDay:focus, .flatpickr-day.nextMonthDay:focus,
.flatpickr-day.today:hover, .flatpickr-day.today:focus {
	background-color: var(--global-palette2);
	border-color: var(--global-palette2);
	color: #fff;
}

.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year {
	font-weight: 400;
	font-size: 18px;
}

.flatpickr-months .flatpickr-prev-month:hover svg, .flatpickr-months .flatpickr-next-month:hover svg {
	fill: var(--global-palette2);
}

.flatpickr-calendar {
	padding: 0;
	padding-bottom: 0.5rem;
}

.flatpickr-day.flatpickr-disabled, .flatpickr-day.flatpickr-disabled:hover {
	cursor: not-allowed;
	color: rgba(57,57,57,0.1);
	background: transparent;
	border-color: transparent;
}