/* Accepted Offer Modal - Base Styles */
	#AcceptedOfferModal .modal-dialog {
		max-width: 800px;
	}

	#AcceptedOfferModal .modal-body {
		padding: 0;
		max-height: 80vh;
		overflow-y: auto;
	}

	/* Container */
	.accepted-offer-container {
		background: #fff;
	}

	/* Steps */
	.accepted-offer-step {
		display: none;
		opacity: 0;
		transform: translateY(20px);
		transition: all 0.35s ease;
	}

		.accepted-offer-step.active {
			display: block;
			opacity: 1;
			transform: translateY(0);
		}

		.accepted-offer-step section {
			padding: 4px 32px 32px 32px;
		}

		.accepted-offer-step h2 {
			margin-top: 0;
			font-size: 20px;
			font-weight: 600;
			margin-bottom: 20px;
		}

	/* Search Row */
	.search-row {
		display: flex;
		gap: 8px;
		margin-bottom: 16px;
	}

		.search-row input {
			flex: 1;
			height: 40px;
			border: 1px solid #ddd;
			border-radius: 6px;
			padding: 0 12px;
			font-size: 14px;
		}

	/* Selected Tags Container */
	.accepted-offer-selected-tags-container {
		background: #f8f9fa;
		border: 1px solid #eee;
		border-radius: 8px;
		padding: 12px 16px;
		min-height: 56px;
		margin-bottom: 16px;
		display: flex;
		align-items: center;
	}

	.accepted-offer-selected-tags {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
		width: 100%;
	}

		.accepted-offer-selected-tags:empty::before {
			content: "No items selected";
			color: #999;
			font-size: 14px;
		}

	.accepted-offer-tag {
		background: #6c757d;
		color: white;
		padding: 6px 12px;
		border-radius: 20px;
		font-size: 13px;
		font-weight: 500;
		display: flex;
		align-items: center;
		gap: 8px;
	}

		.accepted-offer-tag .accepted-offer-remove {
			cursor: pointer;
			font-weight: bold;
			font-size: 18px;
			line-height: 1;
		}

	/* Option List */
	.accepted-offer-option-list {
		max-height: 300px;
		overflow-y: auto;
	}

	.accepted-offer-service-option {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 14px 16px;
		border: 1px solid #eee;
		border-radius: 8px;
		margin-bottom: 10px;
		cursor: pointer;
		transition: all 0.2s;
		background: white;
		position: relative;
	}

		.accepted-offer-service-option:hover {
			background: #fafafa;
			border-color: #ccc;
		}

		.accepted-offer-service-option input[type="checkbox"] {
			position: absolute;
			opacity: 0;
			cursor: pointer;
			width: 20px;
			height: 20px;
			left: 16px;
			top: 50%;
			transform: translateY(-50%);
			margin: 0;
			z-index: 10;
			pointer-events: auto !important;
		}

	.accepted-offer-checkmark {
		width: 15px;
		height: 15px;
		border: 2px solid #ccc;
		border-radius: 4px;
		margin-right: 12px;
		flex-shrink: 0;
		transition: all 0.2s;
		pointer-events: none !important;
	}

	.accepted-offer-service-option input:checked ~ .accepted-offer-checkmark {
		background: #6c757d;
		border-color: #6c757d;
	}

		.accepted-offer-service-option input:checked ~ .accepted-offer-checkmark::after {
			content: "✓";
			color: white;
			font-weight: bold;
			font-size: 10px;
			display: flex;
			align-items: center;
			justify-content: center;
			height: 100%;
		}

	.accepted-offer-service-name {
		flex: 1;
		font-weight: 500;
		pointer-events: none !important;
	}

	.accepted-offer-option-price {
		color: #666;
		font-size: 13px;
		font-weight: 500;
		pointer-events: none !important;
	}

	/* Navigation Buttons */
	.nav-buttons {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 25px;
		padding: 0 10px;
		gap: 12px;
	}

		.nav-buttons button.back,
		.nav-buttons button.next {
			flex: none !important;
			width: 90px;
			height: 44px;
			border-radius: 8px;
			font-size: 16px;
			font-weight: 500;
			border: none;
			cursor: pointer;
			transition: all 0.2s;
		}

		.nav-buttons button.back {
			background: #fff;
			color: #111;
			border: 1px solid #ddd;
		}

			.nav-buttons button.back:hover {
				background: #f5f5f5;
				border-color: #999;
			}

		.nav-buttons button.next {
			background: #000;
			color: #fff;
		}

			.nav-buttons button.next:hover {
				background: #333;
			}

	/* Delivery Section */
	.delivery-section {
		margin-top: 16px;
	}

		.delivery-section select,
		.delivery-section input {
			width: 100%;
			height: 40px;
			/* margin-bottom: 10px; */
			border: 1px solid #ddd;
			border-radius: 6px;
			padding: 0 12px;
			font-size: 14px;
		}

			.delivery-section input[type="checkbox"] {
				width: auto;
				height: auto;
				margin-right: 8px;
			}

	.toggle-group {
		display: flex;
		gap: 8px;
		margin: 12px 0;
	}

	.toggle {
		flex: 1;
		text-align: center;
		padding: 10px;
		border: 1px solid #ccc;
		border-radius: 6px;
		cursor: pointer;
		transition: all 0.2s;
	}

		.toggle:hover {
			border-color: #999;
		}

		.toggle.active {
			background: #111;
			color: #fff;
			border-color: #111;
		}

	.notice {
		color: #dc3545;
		font-size: 13px;
		margin-top: 8px;
		min-height: 20px;
	}

	/* Summary Table */
	.summary-table {
		width: 100%;
		border-collapse: collapse;
		font-size: 14px;
		margin-bottom: 20px;
	}

		.summary-table td {
			padding: 10px 8px;
			border-bottom: 1px solid #f0f0f0;
		}

		.summary-table tr:last-child td {
			border-bottom: none;
		}

	/* Total Block */
	.total-block {
		background: #f8f8f8;
		border-radius: 8px;
		padding: 20px;
		margin-top: 16px;
		font-size: 15px;
	}

	.total-row {
		display: flex;
		justify-content: space-between;
		margin-bottom: 8px;
	}

		.total-row:last-child {
			margin-bottom: 0;
			padding-top: 12px;
			border-top: 2px solid #ddd;
			margin-top: 8px;
		}

		.total-row strong {
			font-weight: 600;
		}

	/* Final Button */
	#acceptedOfferFinalBtn {
		height: 44px !important;
		line-height: 44px !important;
		padding: 0 24px !important;
		width: auto !important;
		min-width: 280px !important;
		margin-bottom: 20px;
		margin-top: 18px;
	}

	/* Success Banner */
	#acceptedOfferSuccessBanner {
		display: none;
		position: fixed;
		top: 20px;
		left: 50%;
		transform: translateX(-50%);
		background: #e9f8f1;
		color: #1e7a4c;
		padding: 12px 24px;
		border-radius: 8px;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
		font-size: 14px;
		z-index: 9999;
		opacity: 0;
		transition: opacity 0.3s;
	}

		#acceptedOfferSuccessBanner.show {
			display: block;
			opacity: 1;
		}

	/* Modal Content Styling */
	#AcceptedOfferModal .modal-content {
		border-radius: 12px !important;
		border: none !important;
	}

	#AcceptedOfferModal .modal-header {
		border-bottom: none !important;
		padding: 20px 32px;
	}

	#AcceptedOfferModal .btn-close {
		position: absolute;
		top: 12px;
		right: 15px;
		z-index: 10;
	}

	/* Fix empty white space in delivery step when details hidden */
	#acceptedOfferDeliveryDetails[style*="display: none"] {
		display: none !important;
		height: 0 !important;
		min-height: 0 !important;
		padding: 0 !important;
		margin: 0 !important;
	}

	/* Ensure active step has minimum content height */
	.accepted-offer-step.active section {
		min-height: 320px; /* adjust this value until it looks good */
		display: flex;
		flex-direction: column;
	}

	/* Make nav buttons stick near content */
	.accepted-offer-step .nav-buttons {
		margin-top: auto; /* pushes to bottom if using flex */
	}

	/* Optional: reduce overall modal body padding when pickup selected */
	input[name="acceptedOfferDeliveryType"][value="pickup"]:checked ~ #acceptedOfferDeliveryDetails[style*="display: none"] {
		& + .nav-buttons {
			margin-top: 10px;
		}
	}

	/* Add to your <style> */
#acceptedOfferStepper {
    opacity: 0;
    transition: opacity 0.5s ease;
}

#acceptedOfferStepper.visible {
    opacity: 1;
}	
		

#stepperModal .modal-dialog {
		max-width: 800px;
	}


	.city-suggestions-box {
		position: absolute;
		z-index: 1000;
	}

		.city-suggestions-box ul {
			max-height: 200px; /* tune this → 5 items ≈ 200-220px depending on padding/font */
			overflow-y: auto;
			scrollbar-width: thin;
		}

			.city-suggestions-box ul::-webkit-scrollbar {
				width: 6px;
			}

			.city-suggestions-box ul::-webkit-scrollbar-thumb {
				background: #aaa;
				border-radius: 3px;
			}

		.city-suggestions-box li:hover {
			background: #e6f3ff !important;
		}




	.accepted-offer-intro-title {
		font-size: 28px !important;
		font-weight: 700 !important;
		color: #111;
		margin-bottom: 8px !important;
		margin-top: 0 !important;
	}

	.accepted-offer-intro-subtitle {
		font-size: 18px;
		color: #1e7a4c;
		font-weight: 600;
		margin-bottom: 32px;
	}

	.accepted-offer-intro-message {
		background: #f8f9fa;
		border-radius: 12px;
		padding: 24px;
		margin-bottom: 32px;
		text-align: left;
	}

		.accepted-offer-intro-message p {
			font-size: 15px;
			line-height: 1.6;
			color: #333;
			margin-bottom: 16px;
		}

			.accepted-offer-intro-message p:last-child {
				margin-bottom: 0;
			}

	.accepted-offer-intro-note {
		font-size: 14px !important;
		color: #666 !important;
		font-style: italic;
	}

	.accepted-offer-intro-actions {
		display: flex;
		flex-direction: column;
		gap: 12px;
		margin-top: 32px;
	}

	.btn-accepted-offer-proceed {
		background: #000;
		color: #fff;
		border: none;
		border-radius: 8px;
		padding: 14px 28px;
		font-size: 16px;
		font-weight: 600;
		cursor: pointer;
		transition: all 0.2s;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
	}

		.btn-accepted-offer-proceed:hover {
			background: #333;
			transform: translateY(-2px);
			box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
		}

		.btn-accepted-offer-proceed:active {
			transform: translateY(0);
		}

	.btn-accepted-offer-cancel {
		background: transparent;
		color: #666;
		border: 1px solid #ddd;
		border-radius: 8px;
		padding: 12px 28px;
		font-size: 15px;
		font-weight: 500;
		cursor: pointer;
		transition: all 0.2s;
	}

		.btn-accepted-offer-cancel:hover {
			background: #f5f5f5;
			border-color: #999;
			color: #333;
		}

	/* Intro Screen Specific Styles */
	.accepted-offer-intro-section {
		text-align: center;
		padding: 40px 32px 50px !important;
	}

	.accepted-offer-success-icon {
		margin: 0 auto 24px;
		animation: scaleIn 0.5s ease-out;
	}

	/* Accepted Offer Specific Styles - Scoped with accepted-offer- prefix */
	#AcceptedOfferModal .modal-dialog {
		max-width: 800px;
	}

	.accepted-offer-container {
		background: #fff;
	}

	.accepted-offer-step {
		display: none;
		opacity: 0;
		transform: translateY(20px);
		transition: all 0.35s ease;
	}

		.accepted-offer-step.active {
			display: block;
			opacity: 1;
			transform: translateY(0);
		}

	.accepted-offer-selected-tags-container {
		background: #f8f9fa;
		border: 1px solid #eee;
		border-radius: 8px;
		padding: 12px 16px;
		min-height: 56px;
		margin-bottom: 16px;
		display: flex;
		align-items: center;
	}

	.accepted-offer-selected-tags {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
		width: 100%;
	}

		.accepted-offer-selected-tags:empty::before {
			content: "No items selected";
			color: #999;
			font-size: 14px;
		}

	.accepted-offer-tag {
		background: #6c757d;
		color: white;
		padding: 6px 12px;
		border-radius: 20px;
		font-size: 13px;
		font-weight: 500;
		display: flex;
		align-items: center;
		gap: 8px;
	}

		.accepted-offer-tag .accepted-offer-remove {
			cursor: pointer;
			font-weight: bold;
			font-size: 18px;
			line-height: 1;
		}

	.accepted-offer-option-list {
		max-height: 300px;
		overflow-y: auto;
	}

	.accepted-offer-service-option {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 14px 16px;
		border: 1px solid #eee;
		border-radius: 8px;
		margin-bottom: 10px;
		cursor: pointer;
		transition: all 0.2s;
		background: white;
	}

		.accepted-offer-service-option:hover {
			background: #fafafa;
			border-color: #ccc;
		}

		.accepted-offer-service-option input[type="checkbox"] {
			position: absolute;
			opacity: 0;
			cursor: pointer;
			width: 20px;
			height: 20px;
			left: 16px;
			top: 50%;
			transform: translateY(-50%);
			margin: 0;
			z-index: 10;
		}

	.accepted-offer-checkmark {
		width: 15px;
		height: 15px;
		border: 2px solid #ccc;
		border-radius: 4px;
		margin-right: 12px;
		flex-shrink: 0;
		transition: all 0.2s;
		pointer-events: none;
	}

	.accepted-offer-service-option input:checked ~ .accepted-offer-checkmark {
		background: #6c757d;
		border-color: #6c757d;
	}

		.accepted-offer-service-option input:checked ~ .accepted-offer-checkmark::after {
			content: "✓";
			color: white;
			font-weight: bold;
			font-size: 10px;
			display: flex;
			align-items: center;
			justify-content: center;
			height: 100%;
		}

	.accepted-offer-service-name {
		flex: 1;
		font-weight: 500;
		pointer-events: none;
	}

	.accepted-offer-option-price {
		color: #666;
		font-size: 13px;
		font-weight: 500;
		pointer-events: none;
	}

	#acceptedOfferFinalBtn {
		height: 44px !important;
		line-height: 44px !important;
		padding: 0 24px !important;
		width: auto !important;
		min-width: 280px !important;
		margin-top: 18px;
	}