/* ──────────────────────────────────────────────────────────────────────────
   TopHelpers Booking Form — style.css
   Naming: BEM-lite with .th- prefix
   Mobile-first. No external dependencies.
────────────────────────────────────────────────────────────────────────── */

:root {
	--th-primary:      #8F3985;
	--th-secondary:    #0D3659;
	--th-gray-border:  #E9E9E9;
	--th-inactive:     #7E7E7E;
	--th-label:        rgba( 0, 0, 0, 0.5 );
	--th-input-text:   #000;
	--th-tag-bg:       #E8ECF2;
	--th-tag-close:    #BDBDBD;

	--th-warning-bg:     #FEF3C7;
	--th-warning-border: #FDE68A;
	--th-warning-text:   #92400E;

	--th-radius-modal: 20px;
	--th-radius-btn:   6px;
	--th-radius-input: 8px;
	--th-transition:   150ms ease;
	--th-font:         -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, sans-serif;
}

/* ── Reset ──────────────────────────────────────────────────────────────── */

.th-modal-overlay *,
.th-modal-overlay *::before,
.th-modal-overlay *::after {
	box-sizing: border-box;
}

/* ── Modal overlay ──────────────────────────────────────────────────────── */

.th-modal-body-lock {
	overflow: hidden;
}

/*
 * Explicitly re-enforce the HTML `hidden` attribute.
 * Without this, the author-level `display: flex` rule below overrides the
 * browser's UA-stylesheet `[hidden] { display: none }`, leaving the overlay
 * as an invisible but click-intercepting full-screen layer.
 */
.th-modal-overlay[hidden] {
	display: none;
}

.th-modal-overlay {
	position:        fixed;
	inset:           0;
	z-index:         99990;
	display:         flex;
	align-items:     center;
	justify-content: center;
	padding:         16px;
	background:      rgba( 0, 0, 0, 0 );
	transition:      background 240ms ease;
}

.th-modal-overlay--open {
	background: rgba( 0, 0, 0, 0.72 );
}

/* White card */
.th-modal-box {
	position:        relative;
	width:           100%;
	max-width:       720px;
	max-height:      92dvh;
	overflow:        hidden;
	display:         flex;
	flex-direction:  column;
	background:      #fff;
	border-radius:   var( --th-radius-modal );
	box-shadow:      0 24px 64px rgba( 0, 0, 0, 0.2 );

	transform:  translateY( 20px );
	opacity:    0;
	transition: transform 280ms cubic-bezier( .34, 1.2, .64, 1 ),
	            opacity   220ms ease;
}

.th-modal-overlay--open .th-modal-box {
	transform: translateY( 0 );
	opacity:   1;
}

/* Scroll happens inside the booking wrapper, not the outer box */
#th-booking-wrapper {
	flex:       1;
	min-height: 0;
	overflow-y: auto;
}

#th-booking-wrapper::-webkit-scrollbar       { width: 5px; }
#th-booking-wrapper::-webkit-scrollbar-track { background: transparent; }
#th-booking-wrapper::-webkit-scrollbar-thumb { background: var( --th-gray-border ); border-radius: 99px; }

/* ── Modal header ───────────────────────────────────────────────────────── */

.th-modal-header {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	gap:             12px;
	height:          76px; /* 80px total minus 4px progress bar */
	padding:         0 40px;
}

.th-modal-title {
	font-family: var( --th-font );
	font-size:   20px;
	font-weight: 700;
	color:       #000;
	line-height: 1.25;
	margin:      0;
	flex:        1;
}

.th-modal-close {
	flex-shrink:     0;
	display:         flex;
	align-items:     center;
	justify-content: center;
	width:           32px;
	height:          32px;
	border:          none;
	border-radius:   50%;
	background:      transparent;
	color:           #aaa;
	font-size:       18px;
	line-height:     1;
	cursor:          pointer;
	padding:         0;
	transition:      color var( --th-transition ), background var( --th-transition );
}

.th-modal-close:hover {
	color:      #000;
	background: var( --th-gray-border );
}

.th-modal-close:focus-visible {
	outline:        2px solid var( --th-primary );
	outline-offset: 2px;
}

/* ── Progress bar ───────────────────────────────────────────────────────── */

.th-modal-progress {
	height:     4px;
	background: var( --th-gray-border );
	overflow:   hidden;
}

.th-modal-progress__fill {
	height:     100%;
	width:      0%;
	background: var( --th-secondary );
	transition: width 380ms cubic-bezier( .4, 0, .2, 1 );
}

/* ── Form wrapper ───────────────────────────────────────────────────────── */

#th-booking-wrapper {
	font-family: var( --th-font );
	color:       var( --th-input-text );
	font-size:   18px;
	line-height: 1.5;
	padding:     40px 0;
}

/* ── Step animation ─────────────────────────────────────────────────────── */

.th-step--active {
	animation: th-fade-in 200ms ease both;
}

@keyframes th-fade-in {
	from { opacity: 0; transform: translateY( 8px ); }
	to   { opacity: 1; transform: translateY( 0 );   }
}

/* ── Step body ──────────────────────────────────────────────────────────── */

.th-step__body {
	display:        flex;
	flex-direction: column;
	padding:        0 40px;
	gap:            0;
}

/* Steps with radio button lists have no horizontal padding on the body —
   each .th-service-row carries its own 40px padding-x instead. */
.th-step__body:has( > .th-service-list ) {
	padding-left:  0;
	padding-right: 0;
}

/* ── Field groups ───────────────────────────────────────────────────────── */

.th-field-group {
	margin-bottom: 25px;
}

.th-field-group:last-child {
	margin-bottom: 0;
}

/* Label */
.th-label {
	display:       block;
	font-size:     12px;
	font-weight:   500;
	color:         var( --th-label );
	margin-bottom: 8px;
}

/* Inputs & selects */
.th-input,
.th-select {
	display:       block;
	width:         100%;
	height:        50px;
	padding:       0 16px;
	font-size:     18px;
	font-family:   var( --th-font );
	color:         var( --th-input-text );
	background:    #fff;
	border:        1.5px solid var( --th-gray-border );
	border-radius: var( --th-radius-input );
	outline:       none;
	transition:    border-color var( --th-transition ), box-shadow var( --th-transition );
	appearance:    none;
	-webkit-appearance: none;
}

.th-select {
	background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%237E7E7E' d='M0 0l6 8 6-8z'/%3E%3C/svg%3E");
	background-repeat:   no-repeat;
	background-position: right 16px center;
	padding-right:       44px;
	cursor:              pointer;
}

.th-input:focus,
.th-select:focus {
	border-color: var( --th-secondary );
	box-shadow:   0 0 0 3px rgba( 13, 54, 89, 0.1 );
}

.th-input::placeholder {
	color: var( --th-label );
}

/* ── Service / radio list ───────────────────────────────────────────────── */

.th-service-list {
	display:        flex;
	flex-direction: column;
}

/* ── Help-type radio list (side by side) ────────────────────────────────── */

.th-help-type-list {
	display: flex;
	gap:     16px;
}

.th-help-type-list .th-service-row {
	flex:          1;
	border:        1px solid var( --th-gray-border );
	border-radius: var( --th-radius-input );
	padding:       22px 24px;
}

.th-help-type-list .th-service-row:has( .th-service-row__input:checked ) {
	border-color: var( --th-secondary );
}

.th-service-row {
	display:       flex;
	align-items:   center;
	gap:           14px;
	padding:       22px 40px;
	cursor:        pointer;
	border-bottom: 1px solid var( --th-gray-border );
}

/* Custom radio button */
.th-service-row__input {
	flex-shrink:  0;
	width:        20px;
	height:       20px;
	cursor:       pointer;
	appearance:   none;
	-webkit-appearance: none;
	border:       2px solid var( --th-inactive );
	border-radius: 50%;
	background:   #fff;
	transition:   border-color var( --th-transition ), background var( --th-transition );
	position:     relative;
}

.th-service-row__input:checked {
	border-color: var( --th-secondary );
}

.th-service-row__input:checked::after {
	content:       '';
	position:      absolute;
	inset:         3px;
	border-radius: 50%;
	background:    var( --th-secondary );
}

.th-service-row__label {
	font-size:   18px;
	font-weight: 400;
	color:       var( --th-input-text );
	user-select: none;
	flex:        1;
}

/* Coming-soon notice */
.th-coming-soon {
	margin:   14px 40px 0;
	padding:  12px 16px;
	background:    var( --th-warning-bg );
	border:        1px solid var( --th-warning-border );
	border-radius: var( --th-radius-input );
}

.th-coming-soon p {
	margin:    0;
	font-size: 14px;
	color:     var( --th-warning-text );
}

/* ── Step 9 · Priced load rows ──────────────────────────────────────────── */

.th-service-row--priced {
	justify-content: space-between;
}

.th-service-row__price {
	font-size:   18px;
	font-weight: 700;
	color:       var( --th-secondary );
	flex-shrink: 0;
}

/* ── Container visual (step 9) ──────────────────────────────────────────── */

.th-junk-visual {
	display:         flex;
	justify-content: center;
	padding:         0 40px;
	margin-bottom:   20px;
}

.th-junk-load-img {
	width:         100%;
	max-width:     340px;
	height:        auto;
	object-fit:    contain;
}

/* ── Heavy items loading (Step 5) ───────────────────────────────────────── */

.th-heavy-loading {
	display:        flex;
	flex-direction: column;
	align-items:    center;
	gap:            12px;
	padding:        40px 0;
	color:          var( --th-label );
	font-size:      14px;
}

.th-heavy-loading[hidden] {
	display: none;
}

.th-heavy-loading p {
	margin: 0;
}

.th-spinner {
	width:         36px;
	height:        36px;
	border:        3px solid var( --th-gray-border );
	border-top-color: var( --th-primary );
	border-radius: 50%;
	animation:     th-spin 0.75s linear infinite;
}

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

/* Re-enforce `hidden` — overridden by `display: grid` on .th-heavy-cols. */
.th-heavy-cols[hidden] {
	display: none;
}

/* ── Heavy items (Step 5) ───────────────────────────────────────────────── */

/* Selected tag strip */
.th-selected-tags {
	display:       flex;
	flex-wrap:     wrap;
	gap:           15px;
	margin-bottom: 20px;
}

.th-selected-tag {
	display:       inline-flex;
	align-items:   center;
	gap:           6px;
	height:        36px;
	padding:       0 12px;
	background:    var( --th-tag-bg );
	border-radius: var( --th-radius-btn );
	font-size:     16px;
	font-weight:   500;
	color:         var( --th-secondary );
	white-space:   nowrap;
}

.th-tag-remove {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	border:          none;
	background:      transparent;
	color:           var( --th-tag-close );
	font-size:       16px;
	line-height:     1;
	cursor:          pointer;
	padding:         0;
	transition:      color var( --th-transition );
}

.th-tag-remove:hover {
	color: var( --th-secondary );
}

/* Two-column grid */
.th-heavy-cols {
	display:               grid;
	grid-template-columns: 1fr 1fr;
	gap:                   24px 32px;
	flex:                  1;
	min-height:            0;
	overflow-y:            auto;
	padding-right:         4px;
}

@media ( max-width: 520px ) {
	.th-heavy-cols { grid-template-columns: 1fr; }
}

/*
 * Step 5 — lock the booking wrapper from scrolling so only the items grid
 * scrolls. Search input and selected-item tags remain pinned above the grid.
 */
.th-modal-box:has( [data-step="5"].th-step--active ) #th-booking-wrapper {
	overflow-y: hidden;
	display:    flex;
	flex-direction: column;
}

[data-step="5"].th-step--active {
	flex:           1;
	min-height:     0;
	display:        flex;
	flex-direction: column;
}

[data-step="5"].th-step--active .th-step__body {
	flex:       1;
	min-height: 0;
}

[data-step="5"].th-step--active .th-field-group,
[data-step="5"].th-step--active .th-selected-tags,
[data-step="5"].th-step--active .th-heavy-loading {
	flex-shrink: 0;
}

.th-heavy-empty {
	color:      rgba(0,0,0,0.4);
	font-size:  14px;
	text-align: center;
	padding:    24px 0;
}

.th-item-category {
	margin-bottom: 20px;
}

.th-item-category__title {
	font-size:   14px;
	font-weight: 700;
	color:       var( --th-input-text );
	margin:      0 0 10px;
	display:     flex;
	align-items: center;
	gap:         6px;
}

/* Checkbox row */
.th-item-row {
	display:     flex;
	align-items: center;
	gap:         10px;
	padding:     4px 0;
	cursor:      pointer;
}

/* Custom checkbox */
.th-item-row__input {
	flex-shrink:  0;
	width:        18px;
	height:       18px;
	cursor:       pointer;
	appearance:   none;
	-webkit-appearance: none;
	border:        2px solid var( --th-inactive );
	border-radius: 3px;
	background:    #fff;
	transition:    border-color var( --th-transition ), background var( --th-transition );
	position:      relative;
}

.th-item-row__input:checked {
	border-color: var( --th-secondary );
	background:   #fff;
}

.th-item-row__input:checked::after {
	content:       '';
	position:      absolute;
	inset:         3px;
	border-radius: 1px;
	background:    var( --th-secondary );
}

.th-item-row__label {
	font-size:   16px;
	color:       var( --th-input-text );
	user-select: none;
}


/* ── Navigation (footer) ────────────────────────────────────────────────── */

/* Re-enforce `hidden` — overridden by the `display: inline-flex` rule below. */
.th-btn[hidden] {
	display: none;
}

/* Re-enforce `hidden` — overridden by the `display: flex` rule above. */
.th-item-row[hidden] {
	display: none;
}

.th-nav {
	display:         flex;
	align-items:     center;
	justify-content: flex-end;
	gap:             20px;
	padding:         28px 40px 40px;
	flex-shrink:     0;
	border-top:      none;
}

.th-btn {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	width:           170px;
	height:          50px;
	font-size:       16px;
	font-weight:     600;
	font-family:     var( --th-font );
	border:          none;
	border-radius:   var( --th-radius-btn );
	cursor:          pointer;
	outline:         none;
	transition:      background var( --th-transition ), opacity var( --th-transition ),
	                 box-shadow var( --th-transition );
	line-height:     1;
	white-space:     nowrap;
}

.th-btn:focus-visible {
	box-shadow: 0 0 0 3px rgba( 143, 57, 133, 0.25 );
}

/* Primary — "Next" / "Submit" */
.th-btn--primary {
	background: var( --th-primary );
	color:      #fff;
	border:     none;
}

.th-btn--primary:hover:not( :disabled ) {
	background: #7a2f72;
}

.th-btn--primary:disabled {
	opacity: .4;
	cursor:  not-allowed;
}

/* Secondary — "Back" */
.th-btn--secondary {
	background: transparent;
	color:      var( --th-inactive );
	border:     1.5px solid var( --th-inactive );
}

.th-btn--secondary:hover {
	background:   rgba( 126, 126, 126, 0.08 );
	border-color: var( --th-inactive );
}

/* ── Google Places autocomplete ─────────────────────────────────────────── */

.pac-container {
	z-index:       99999 !important;
	border-radius: var( --th-radius-input );
	box-shadow:    0 4px 20px rgba( 0, 0, 0, .12 );
	border:        1px solid var( --th-gray-border );
	margin-top:    4px;
	font-family:   var( --th-font );
}

.pac-item {
	padding:   10px 14px;
	font-size: 14px;
	cursor:    pointer;
}

.pac-item:hover,
.pac-item-selected { background: #fafafa; }

.pac-item-query { font-size: 14px; color: var( --th-input-text ); }

/* ── Responsive ─────────────────────────────────────────────────────────── */

/* ── Phone validation ───────────────────────────────────────────────────── */

.th-input--error {
	border-color: #d94040;
	box-shadow:   0 0 0 3px rgba( 217, 64, 64, 0.12 );
}

.th-field-error {
	display:    block;
	margin-top: 6px;
	font-size:  12px;
	color:      #d94040;
}

/* ── Deliveries: contact details step ───────────────────────────────────── */

.th-contacts-heading {
	font-size:     16px;
	font-weight:   600;
	color:         var( --th-secondary );
	margin:        0 0 16px;
}

.th-contacts-heading:not( :first-child ) {
	margin-top: 28px;
}

.th-dropoff-contacts {
	margin-top: 28px;
}

.th-contacts-row {
	display:   grid;
	grid-template-columns: 1fr 1fr;
	gap:       16px;
}

.th-contacts-row .th-field-group {
	margin-bottom: 0;
}

.th-label--sm {
	font-size:   11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

@media ( max-width: 540px ) {
	.th-contacts-row {
		grid-template-columns: 1fr;
	}
}

@media ( max-width: 640px ) {
	.th-modal-header {
		height:  auto;
		padding: 16px 20px;
	}

	.th-modal-title {
		font-size: 17px;
	}

	#th-booking-wrapper {
		padding: 24px 0;
	}

	.th-step__body {
		padding: 0 20px;
	}

	.th-step__body:has( > .th-service-list ) {
		padding: 0;
	}

	.th-service-row {
		padding: 14px 20px;
	}

	.th-junk-visual {
		padding: 0 20px;
	}

	.th-coming-soon {
		margin: 14px 20px 0;
	}

	.th-nav {
		padding:         24px 20px;
		justify-content: space-between;
	}

	.th-btn {
		width:    calc( 50% - 10px );
		font-size: 15px;
	}
}