/**
 * CCS Quote System — Premium Quote form styles.
 * Modern UI, glassmorphism, floating labels, vibrant focus states, responsive.
 *
 * @package CCS_Quote_System
 */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Inter:wght@400;500;600&display=swap');

/* Unified form: service type dropdown + Transport / Meals / Support panels */
.ccs-unified-quote-form .ccs-service-type-field {
	margin-bottom: 2.5rem;
}

.ccs-unified-quote-form .ccs-service-type-select {
	min-width: 12rem;
}

.ccs-unified-quote-form .ccs-panel {
	margin-top: 0;
	animation: ccsSlideUpFade 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.ccs-unified-quote-form .ccs-panel-hidden {
	display: none !important;
}

@keyframes ccsSlideUpFade {
	from { opacity: 0; transform: translateY(20px); }
	to { opacity: 1; transform: translateY(0); }
}

@keyframes ccsPulseRing {
	0% { box-shadow: 0 0 0 0 rgba(240, 92, 33, 0.4); }
	70% { box-shadow: 0 0 0 10px rgba(240, 92, 33, 0); }
	100% { box-shadow: 0 0 0 0 rgba(240, 92, 33, 0); }
}

@keyframes ccsFloat {
	0% { transform: translateY(0px); }
	50% { transform: translateY(-6px); }
	100% { transform: translateY(0px); }
}

.ccs-quote-form {
	--ccs-form-gap: 2rem;
	--ccs-form-label-color: #64748b;
	--ccs-form-border: 2px solid transparent;
	--ccs-form-bg: rgba(255, 255, 255, 0.85);
	--ccs-form-radius: 16px;
	--ccs-form-focus-ring: 0 8px 32px rgba(240, 92, 33, 0.15);
	--ccs-form-error-color: #ef4444;
	
	--ccs-brand-primary: #f05c21;
	--ccs-brand-primary-hover: #d94b15;
	--ccs-brand-primary-light: #fff5f2;
	--ccs-brand-secondary: #301b4d;
	--ccs-brand-secondary-hover: #1e1131;

	max-width: 52rem;
	margin: 3rem auto;
	font-family: 'Inter', system-ui, -apple-system, sans-serif;
	font-size: 1rem;
	line-height: 1.6;
	color: #1e293b;
	
	/* Glassmorphism background */
	background: rgba(255, 255, 255, 0.6);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	padding: 3.5rem 4rem;
	border-radius: 24px;
	box-shadow: 
		0 20px 40px -10px rgba(0,0,0,0.1), 
		inset 0 0 0 1px rgba(255,255,255,0.5),
		0 0 80px rgba(240, 92, 33, 0.05); /* Soft primary glow */
	position: relative;
	overflow: hidden;
}

/* Add a subtle decorative blob in the background */
.ccs-quote-form::before {
	content: '';
	position: absolute;
	top: -150px;
	right: -150px;
	width: 400px;
	height: 400px;
	background: radial-gradient(circle, rgba(240,92,33,0.12) 0%, rgba(240,92,33,0) 70%);
	border-radius: 50%;
	z-index: -1;
	pointer-events: none;
}

.ccs-quote-form::after {
	content: '';
	position: absolute;
	bottom: -100px;
	left: -100px;
	width: 300px;
	height: 300px;
	background: radial-gradient(circle, rgba(48,27,77,0.08) 0%, rgba(48,27,77,0) 70%);
	border-radius: 50%;
	z-index: -1;
	pointer-events: none;
}

/* Reset nested form containers to avoid double-boxing (container inside container) */
.ccs-unified-quote-form .ccs-panel .ccs-quote-form {
	padding: 0;
	margin: 0;
	background: transparent;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	box-shadow: none;
	border: none;
	border-radius: 0;
	overflow: visible;
}

.ccs-unified-quote-form .ccs-panel .ccs-quote-form::before,
.ccs-unified-quote-form .ccs-panel .ccs-quote-form::after {
	display: none;
}

@media (max-width: 768px) {
	.ccs-quote-form {
		padding: 2rem;
		margin: 1.5rem auto;
		border-radius: 20px;
	}
}

.ccs-quote-form *,
.ccs-quote-form *::before,
.ccs-quote-form *::after {
	box-sizing: border-box;
}

.ccs-shared-inputs,
.ccs-panel-fields {
	display: grid;
	grid-template-columns: 1fr 1fr;
	row-gap: var(--ccs-form-gap);
	column-gap: 1.5rem;
}

/* 2-Step Form Layout & Hiding duplicated fields */
#ccs-unified-quote-form .ccs-hide-unified {
	display: none !important;
}
.ccs-hide-unified.ccs-update-mode {
	display: contents;
 }
 .ccs-meals-form{
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
 }
 .ccs-meals-form .ccs-hide-unified{
	display: flex;
    flex-direction: column;
    gap: 1.5rem;
 }
@media (max-width: 640px) {
	.ccs-shared-inputs,
	.ccs-hide-unified,
	.ccs-panel-fields {
		grid-template-columns: 1fr;
	}
}

/* Make single wide fields span 2 columns */
.ccs-field.ccs-service-type-field,
.ccs-panel-fields .ccs-field.ccs-field-address,
.ccs-panel-fields .ccs-field.ccs-field-wide,
.ccs-submit-wrap {
	grid-column: 1 / -1;
}

/* Creative Floating Label Inputs */
.ccs-quote-form .ccs-field {
	display: flex;
	flex-direction: column;
	position: relative;
	margin-bottom: 0rem; /* Handled by grid gap */
}
#ccs-panel-meals .ccs-quote-form .ccs-field {
	margin-bottom: 2rem;
}
.ccs-quote-form .ccs-field label {
	font-weight: 500;
	font-size: 0.95rem;
	color: var(--ccs-form-label-color);
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	/* margin-bottom: 0.6rem; */
	display: block;
	font-family: 'Outfit', sans-serif;
	letter-spacing: 0.01em;
	text-transform: uppercase;
}

.ccs-quote-form .ccs-field label .ccs-required {
	color: var(--ccs-form-error-color);
	margin-left: 2px;
	opacity: 0.8;
}

/* Map preview above address fields (browser key only) */
.ccs-map-wrapper {
	width: 100%;
	margin-bottom: 0.75rem;
	border-radius: var(--ccs-form-radius);
	overflow: hidden;
	box-shadow: 0 10px 25px rgba(15, 23, 42, 0.25);
	border: 1px solid rgba(148, 163, 184, 0.5);
	background: #f8fafc;
}

.ccs-map-canvas {
	width: 100%;
	height: 220px;
}

/* Address autocomplete dropdown (server-side proxy) */
.ccs-address-suggestions {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	margin-top: 4px;
	background: var(--ccs-form-bg);
	border: 1px solid rgba(226, 232, 240, 0.9);
	border-radius: var(--ccs-form-radius);
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
	max-height: 240px;
	overflow-y: auto;
	z-index: 100;
	list-style: none;
	padding: 0;
}
.ccs-address-suggestion {
	padding: 0.75rem 1.25rem;
	font-size: 0.95rem;
	color: #0f172a;
	cursor: pointer;
	border-bottom: 1px solid rgba(226, 232, 240, 0.6);
	transition: background 0.15s ease;
}
.ccs-address-suggestion:last-child {
	border-bottom: none;
}
.ccs-address-suggestion:hover,
.ccs-address-suggestion:focus {
	background: var(--ccs-brand-primary-light);
	outline: none;
}

/* Inputs styling */
.ccs-quote-form input[type="text"],
.ccs-quote-form input[type="email"],
.ccs-quote-form input[type="tel"],
.ccs-quote-form input[type="date"],
.ccs-quote-form input[type="time"],
.ccs-quote-form input[type="number"],
.ccs-quote-form select,
.ccs-quote-form textarea {
	width: 100%;
	min-height: 58px;
	padding: 1rem 1.25rem;
	background-color: var(--ccs-form-bg);
	border: 1px solid rgba(226, 232, 240, 0.9);
	border-radius: var(--ccs-form-radius);
	font-size: 1.05rem;
	font-family: inherit;
	color: #0f172a;
	transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
	box-shadow: 0 2px 4px rgba(0,0,0,0.01) inset;
}

/* Disable bottom-only focus bar; rely on full border instead */
.ccs-quote-form .ccs-field::after {
	display: none !important;
}

/* Custom bottom border line effect on focus */
.ccs-quote-form .ccs-field::after {
	content: '';
	position: absolute;
	bottom: 0px;
	left: 50%;
	width: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--ccs-brand-primary), #ff8a5a);
	transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
	transform: translateX(-50%);
	border-radius: 0 0 var(--ccs-form-radius) var(--ccs-form-radius);
	z-index: 2;
	pointer-events: none;
}

.ccs-quote-form .ccs-field:focus-within::after {
	width: 100%;
}

.ccs-quote-form input:hover:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
.ccs-quote-form select:hover,
.ccs-quote-form textarea:hover {
	background-color: rgba(255, 255, 255, 1);
	border-color: rgba(203, 213, 225, 1);
}

.ccs-quote-form input:focus:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
.ccs-quote-form select:focus,
.ccs-quote-form textarea:focus {
	outline: none;
	background-color: #ffffff;
	border-color: rgba(240, 92, 33, 0.4);
	box-shadow: var(--ccs-form-focus-ring);
	transform: translateY(-2px);
}

.ccs-quote-form input::placeholder {
	color: #94a3b8;
	font-weight: 400;
}

.ccs-quote-form input.error,
.ccs-quote-form select.error,
.ccs-quote-form textarea.error {
	border-color: var(--ccs-form-error-color);
	background-color: #fef2f2;
	animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both;
}

@keyframes shake {
  10%, 90% { transform: translate3d(-1px, 0, 0); }
  20%, 80% { transform: translate3d(2px, 0, 0); }
  30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
  40%, 60% { transform: translate3d(4px, 0, 0); }
}

.ccs-quote-form textarea {
	min-height: 140px;
	resize: vertical;
	padding-top: 1.2rem;
}

.ccs-quote-form select {
	cursor: pointer;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%2364748b'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 1.25rem center;
	background-size: 1.2em;
	padding-right: 3rem;
}

/* Checkbox - Modern Toggle Style */
.ccs-quote-form .ccs-field-checkbox {
	flex-direction: row;
	align-items: center;
	padding: 1rem 1.25rem;
	background: var(--ccs-form-bg);
	border-radius: var(--ccs-form-radius);
	border: 1px solid rgba(226, 232, 240, 0.8);
	transition: all 0.3s ease;
	cursor: pointer;
	min-height: 58px;
}

.ccs-quote-form .ccs-field-checkbox:hover {
	border-color: var(--ccs-brand-primary);
	background: #ffffff;
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0,0,0,0.03);
}

/* Custom checkbox: persistent :checked look; theme-safe */
.ccs-quote-form .ccs-field-checkbox input[type="checkbox"] {
	-webkit-appearance: none;
	appearance: none;
	width: 24px;
	height: 24px;
	margin-right: 1.25rem;
	cursor: pointer;
	flex-shrink: 0;
	border-radius: 6px;
	min-height: auto;
	box-shadow: none;
	border: 2px solid #cbd5e1;
	background-color: #fff;
	background-image: none;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 14px 14px;
	transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
	vertical-align: middle;
}

.ccs-quote-form .ccs-field-checkbox input[type="checkbox"]:hover {
	background-color: #fff;
	border-color: rgba(240, 92, 33, 0.45);
	transform: none;
	box-shadow: none;
}

.ccs-quote-form .ccs-field-checkbox input[type="checkbox"]:focus {
	outline: none;
	background-color: #fff;
	border-color: var(--ccs-brand-primary);
	box-shadow: 0 0 0 3px rgba(240, 92, 33, 0.2);
	transform: none;
}

.ccs-quote-form .ccs-field-checkbox input[type="checkbox"]:checked {
	background-color: var(--ccs-brand-primary);
	border-color: var(--ccs-brand-primary);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
	animation: ccsPulseRing 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.ccs-quote-form .ccs-field-checkbox input[type="checkbox"]:checked:hover {
	background-color: var(--ccs-brand-primary-hover);
	border-color: var(--ccs-brand-primary-hover);
}

/* Social Support form: full-width fields, start/finish time on one line */
.ccs-support-form .ccs-support-fields {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--ccs-form-gap);
	width: 100%;
}

.ccs-support-form .ccs-field-full {
	grid-column: 1 / -1;
}

.ccs-support-form .ccs-field-row.ccs-support-time-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.5rem;
	grid-column: 1 / -1;
}

.ccs-support-form .ccs-field-row .ccs-field {
	margin-bottom: 0;
}

@media (max-width: 640px) {
	.ccs-support-form .ccs-field-row.ccs-support-time-row {
		grid-template-columns: 1fr;
	}
}

.ccs-panel-support .ccs-panel-fields {
	grid-template-columns: 1fr !important;
	width: 100%;
	max-width: 100%;
}

/* Social Support panel: full width (override base .ccs-quote-form max-width) */
#ccs-panel-support .ccs-support-form,
#ccs-panel-support .ccs-support-form form.ccs-quote-form,
#ccs-panel-support .ccs-panel-fields {
	max-width: none;
	width: 100%;
	grid-template-columns: 1fr ;
}

.ccs-quote-form .ccs-field-checkbox label {
	margin-bottom: 0;
	cursor: pointer;
	font-weight: 500;
	color: #1e293b;
	flex-grow: 1;
	text-transform: uppercase;
}

/* Button with Gradient & Animation */
.ccs-quote-form .ccs-submit-wrap {
	margin-top: 1rem;
	margin-bottom: 0;
}

.ccs-quote-form button[type="submit"],
.ccs-quote-form input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 1.2rem 2.5rem;
	background: linear-gradient(135deg, var(--ccs-brand-primary) 0%, #ff7c44 100%);
	color: #fff;
	border: none;
	border-radius: var(--ccs-form-radius);
	font-size: 1.15rem;
	font-weight: 700;
	font-family: 'Outfit', sans-serif;
	letter-spacing: 0.03em;
	cursor: pointer;
	transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
	box-shadow: 0 8px 20px -6px rgba(240, 92, 33, 0.5);
	position: relative;
	overflow: hidden;
}

.ccs-quote-form button[type="submit"]::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.2) 50%, rgba(255,255,255,0) 100%);
	transition: all 0.6s ease;
}

.ccs-quote-form button[type="submit"]:hover,
.ccs-quote-form input[type="submit"]:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 28px -6px rgba(240, 92, 33, 0.6);
}

.ccs-quote-form button[type="submit"]:hover::before {
	left: 100%;
}

.ccs-quote-form button[type="submit"]:active,
.ccs-quote-form input[type="submit"]:active {
	transform: translateY(1px);
	box-shadow: 0 4px 10px -2px rgba(240, 92, 33, 0.4);
}

/* Messages */
.ccs-quote-form .ccs-message {
	padding: 1.25rem 1.75rem;
	margin-bottom: 2rem;
	border-radius: var(--ccs-form-radius);
	font-weight: 500;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	animation: ccsSlideUpFade 0.4s ease;
	font-family: 'Outfit', sans-serif;
	font-size: 1.05rem;
}

.ccs-quote-form .ccs-message.error {
	background: #fef2f2;
	border: 1px solid rgba(254, 202, 202, 0.5);
	color: var(--ccs-form-error-color);
	box-shadow: 0 4px 12px rgba(239, 68, 68, 0.1);
}

.ccs-quote-form .ccs-message.success {
	background: #f0fdf4;
	border: 1px solid rgba(187, 247, 208, 0.5);
	color: #166534;
	box-shadow: 0 4px 12px rgba(34, 197, 94, 0.1);
}

/* Step Indicators - Modern Progress Layout */
.ccs-unified-quote-form .ccs-step-indicator {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1.25rem;
	margin-bottom: 2.25rem;
	position: relative;
	padding: 1.35rem 1.5rem 1.6rem;
	/* background: linear-gradient(165deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.88) 48%, rgba(255, 250, 247, 0.75) 100%);
	border: 1px solid rgba(226, 232, 240, 0.85);
	border-radius: 20px;
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.9) inset,
		0 12px 40px -18px rgba(48, 27, 77, 0.12),
		0 4px 14px -6px rgba(240, 92, 33, 0.08); */
}

.ccs-step-indicator {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	margin-bottom: 3.5rem;
	position: relative;
	padding: 0 1rem;
}

.ccs-step {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.8rem;
	transition: color 0.4s ease;
	position: relative;
	z-index: 2;
	color: #94a3b8;
	font-weight: 600;
	font-size: 0.95rem;
	font-family: 'Outfit', sans-serif;
	letter-spacing: 0.02em;
}

.ccs-step.active {
	color: var(--ccs-brand-secondary);
}

/* Step 1 complete — matches secondary brand, check replaces number */
.ccs-step.ccs-step-done {
	color: #64748b;
}

.ccs-step.ccs-step-done .ccs-step-num {
	background: linear-gradient(145deg, var(--ccs-brand-secondary) 0%, #4a2d6e 100%);
	color: transparent;
	font-size: 0;
	box-shadow: 0 8px 22px rgba(48, 27, 77, 0.28);
	border-color: rgba(255, 255, 255, 0.2);
	transform: scale(1.02);
}

.ccs-step.ccs-step-done .ccs-step-num::after {
	content: '';
	display: block;
	width: 0.55rem;
	height: 0.9rem;
	border: solid #fff;
	border-width: 0 3px 3px 0;
	transform: rotate(45deg) translate(-1px, -2px);
	margin: auto;
}

.ccs-step-num {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3.2rem;
	height: 3.2rem;
	border-radius: 50%;
	background: rgba(241, 245, 249, 0.8);
	color: #64748b;
	font-size: 1.2rem;
	font-weight: 700;
	transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
	border: 3px solid transparent;
	box-shadow: 0 2px 5px rgba(0,0,0,0.05) inset;
}

.ccs-step.active .ccs-step-num {
	background: linear-gradient(135deg, var(--ccs-brand-primary) 0%, #ff7c44 100%);
	color: #fff;
	border-color: transparent;
	box-shadow: 0 8px 20px rgba(240, 92, 33, 0.3);
	transform: scale(1.1);
}

.ccs-step-line {
	flex: 1;
	height: 4px;
	background: #e2e8f0;
	max-width: 120px;
	border-radius: 4px;
	transition: background 0.45s ease, box-shadow 0.45s ease;
	margin-top: -2rem; /* Aligns with circles */
	position: relative;
	z-index: 1;
}

.ccs-unified-quote-form .ccs-step-line {
	height: 5px;
	border-radius: 999px;
	background: linear-gradient(90deg, #e2e8f0 0%, #f1f5f9 100%);
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset;
}

.ccs-step-line.active {
	background: linear-gradient(90deg, var(--ccs-brand-secondary), var(--ccs-brand-primary));
	box-shadow: 0 0 20px rgba(240, 92, 33, 0.25);
}

/* Service Type Cards - Premium Interactive Feel */
.ccs-field.ccs-service-type-field {
	margin-top: 1.8rem;
	margin-bottom: 3rem;
}

.ccs-section-label {
	font-size: 1.5rem;
	margin-bottom: 0.4rem;
	display: block;
	color: var(--ccs-brand-secondary);
	font-family: 'Outfit', sans-serif;
	font-weight: 800;
	letter-spacing: -0.02em;
}

.ccs-section-label .ccs-required {
	color: var(--ccs-form-error-color);
}

.ccs-service-cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
	margin-bottom: 1rem;
}

@media (max-width: 600px) {
	.ccs-service-cards {
		grid-template-columns: 1fr;
	}
}

.ccs-service-card {
	background: rgba(255, 255, 255, 0.8);
	border: 2px solid rgba(226, 232, 240, 0.8);
	border-radius: 20px;
	padding: 2.5rem 1rem;
	text-align: center;
	cursor: pointer;
	transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	position: relative;
	overflow: hidden;
}

/* Gradient border effect for active card using ::after pseudo-element mask logic */
.ccs-service-card::after {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0; bottom: 0;
	border-radius: 18px;
	padding: 3px;
	background: linear-gradient(135deg, var(--ccs-brand-primary), #ff7c44);
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	opacity: 0;
	transition: opacity 0.4s ease;
	pointer-events: none;
}

.ccs-service-card:hover {
	transform: translateY(-8px);
	box-shadow: 0 15px 30px -10px rgba(0, 0, 0, 0.08);
	background: #ffffff;
}

.ccs-service-card.active {
	background: var(--ccs-brand-primary-light);
	transform: translateY(-8px);
	box-shadow: 0 20px 40px -10px rgba(240, 92, 33, 0.2);
	border-color: transparent;
}

.ccs-service-card.active::after {
	opacity: 1;
}

.ccs-service-icon {
	color: #64748b;
	margin-bottom: 1.25rem;
	transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
	background: #f1f5f9;
	width: 76px;
	height: 76px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
}

.ccs-service-icon svg {
	width: 36px;
	height: 36px;
	transition: all 0.4s ease;
}

.ccs-service-card:hover .ccs-service-icon {
	background: #e2e8f0;
	color: var(--ccs-brand-secondary);
	transform: scale(1.05);
}

.ccs-service-card.active .ccs-service-icon {
	background: linear-gradient(135deg, var(--ccs-brand-primary) 0%, #ff7c44 100%);
	color: #ffffff;
	box-shadow: 0 10px 20px rgba(240, 92, 33, 0.3);
	animation: ccsFloat 3s ease-in-out infinite;
}

.ccs-service-label {
	font-family: 'Outfit', sans-serif;
	font-weight: 800;
	color: #334155;
	font-size: 1.2rem;
	transition: color 0.3s ease;
}

.ccs-service-card.active .ccs-service-label {
	color: var(--ccs-brand-primary);
}

/* Step Navigation Actions */
.ccs-step-actions, .ccs-step-back-wrap {
	display: flex;
	justify-content: flex-end;
	margin-top: 2rem;
	gap: 1rem;
}

.ccs-step-back-wrap {
	justify-content: flex-start;
	margin-bottom: 2.5rem;
	margin-top: 0;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid rgba(226, 232, 240, 0.5);
}

.ccs-unified-quote-form .ccs-step-back-wrap {
	margin-bottom: 1.75rem;
	padding: 0.35rem 0 1.35rem;
	border-bottom: none;
	position: relative;
}

.ccs-unified-quote-form .ccs-step-back-wrap::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent 0%, rgba(226, 232, 240, 0.9) 12%, rgba(226, 232, 240, 0.9) 88%, transparent 100%);
}

button.ccs-btn-next {
	background: linear-gradient(135deg, var(--ccs-brand-secondary) 0%, #462870 100%) !important;
	color: #fff !important;
	font-family: 'Outfit', sans-serif !important;
	font-weight: 700 !important;
	padding: 1rem 2.5rem !important;
	border-radius: var(--ccs-form-radius) !important;
	font-size: 1.15rem !important;
	border: none !important;
	cursor: pointer;
	transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
	box-shadow: 0 8px 20px -6px rgba(48, 27, 77, 0.4) !important;
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
}

button.ccs-btn-next:hover {
	transform: translateY(-3px) !important;
	box-shadow: 0 12px 25px -6px rgba(48, 27, 77, 0.5) !important;
}

button.ccs-btn-back {
	background: rgba(248, 250, 252, 0.8) !important;
	color: #475569 !important;
	border: 1px solid rgba(226, 232, 240, 0.8) !important;
	padding: 0.875rem 1.75rem !important;
	border-radius: var(--ccs-form-radius) !important;
	font-family: 'Outfit', sans-serif !important;
	font-weight: 600 !important;
	font-size: 1rem !important;
	cursor: pointer;
	transition: all 0.3s ease !important;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

.ccs-unified-quote-form button.ccs-btn-back {
	background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
	border: 1px solid rgba(203, 213, 225, 0.75) !important;
	color: var(--ccs-brand-secondary) !important;
	border-radius: 999px !important;
	padding: 0.7rem 1.35rem 0.7rem 1.1rem !important;
	font-size: 0.9375rem !important;
	letter-spacing: 0.01em;
	box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04), 0 1px 0 rgba(255, 255, 255, 0.9) inset !important;
}

button.ccs-btn-back:hover {
	background: #ffffff !important;
	color: var(--ccs-brand-secondary) !important;
	border-color: #cbd5e1 !important;
	box-shadow: 0 4px 12px rgba(0,0,0,0.05) !important;
	transform: translateX(-4px) !important;
}

.ccs-unified-quote-form button.ccs-btn-back:hover {
	border-color: rgba(240, 92, 33, 0.35) !important;
	box-shadow: 0 6px 18px rgba(48, 27, 77, 0.08), 0 0 0 1px rgba(240, 92, 33, 0.12) !important;
}

/* Sub elements */
.ccs-field-description {
	font-size: 0.9rem;
	color: #64748b;
	margin-top: -0.25rem;
	margin-bottom: 0.75rem;
}

/* Meals table redesign */
.ccs-meals-items-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	background: rgba(255, 255, 255, 0.7);
	border-radius: var(--ccs-form-radius);
	overflow: hidden;
	border: 1px solid rgba(226, 232, 240, 0.8);
	box-shadow: 0 4px 15px rgba(0,0,0,0.02);
}

.ccs-meals-items-table th {
	font-weight: 700;
	font-family: 'Outfit', sans-serif;
	color: var(--ccs-brand-secondary);
	background: rgba(241, 245, 249, 0.8);
	padding: 1.25rem;
	text-align: left;
	font-size: 1.05rem;
	border-bottom: 2px solid #e2e8f0;
}

.ccs-meals-items-table td {
	padding: 1.25rem;
	text-align: left;
	border-bottom: 1px solid #f1f5f9;
	vertical-align: middle;
}

.ccs-meals-items-table tr:last-child td {
	border-bottom: none;
}

.ccs-meals-items-table tr:hover td {
	background: rgba(255, 255, 255, 1);
}

.ccs-meals-items-table input.ccs-meals-qty {
	max-width: 90px;
	min-height: 44px;
	padding: 0.5rem;
	text-align: center;
	border-radius: 8px;
	background: #f8fafc;
}

.ccs-meals-items-table input.ccs-meals-qty:focus {
	background: #fff;
}

/* New PlaceAutocompleteElement (gmp-place-autocomplete) styles */
.ccs-gmp-autocomplete {
	display: block;
	width: 100%;
	--gmpx-color-surface: #fff;
	--gmpx-color-on-surface: #0f172a;
	--gmpx-color-primary: #2563eb;
	--gmpx-font-family-base: 'Inter', system-ui, -apple-system, sans-serif;
	--gmpx-font-size-base: 1rem;
	border: 1px solid #e2e8f0;
	border-radius: 10px;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.ccs-gmp-autocomplete:focus-within {
	border-color: #2563eb;
	box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

/* Legacy Autocomplete overrides (fallback for existing Google Maps customers) */
.pac-container {
	z-index: 99999 !important;
	font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
	border-radius: 12px !important;
	box-shadow: 0 10px 40px -10px rgba(0,0,0,0.15) !important;
	margin-top: 4px;
	border: 1px solid rgba(226, 232, 240, 0.8) !important;
	padding: 0.25rem 0;
}
.pac-item {
	padding: 0.75rem 1.25rem !important;
	cursor: pointer;
	font-size: 1rem !important;
	border-top: none !important;
	transition: background 0.2s ease;
}
.pac-item:hover, .pac-item.pac-item-selected {
	background-color: #f1f5f9 !important;
}
.pac-item-query {
	font-size: 1rem !important;
	color: #0f172a !important;
}
.pac-icon {
	margin-top: 4px !important;
}

/* ── Meals form top (notice + spacing) ─────────────────────────────────── */
.ccs-meals-form-top {
	margin: 0 0 1.75rem;
}

.ccs-unified-quote-form #ccs-panel-meals .ccs-meals-form-top {
	animation: ccsSlideUpFade 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* ── Meals area notice ──────────────────────────────────────────────────── */
.ccs-meals-notice {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	margin: 0;
	padding: 1.15rem 1.35rem 1.15rem 1.15rem;
	background:
		linear-gradient(135deg, rgba(255, 255, 255, 0.65) 0%, transparent 42%),
		linear-gradient(160deg, #fff8f5 0%, #fff0e8 45%, #ffe8de 100%);
	border: 1px solid rgba(240, 92, 33, 0.22);
	border-left: 5px solid var(--ccs-brand-primary, #f05c21);
	border-radius: 14px;
	font-size: 1.0625rem;
	font-weight: 600;
	font-family: 'Outfit', sans-serif;
	color: #3d2818;
	line-height: 1.55;
	letter-spacing: 0.01em;
	box-shadow:
		0 1px 0 rgba(255, 255, 255, 0.85) inset,
		0 10px 36px -14px rgba(240, 92, 33, 0.2),
		0 4px 14px -8px rgba(48, 27, 77, 0.08);
	position: relative;
}

.ccs-meals-notice::before {
	content: '';
	flex-shrink: 0;
	width: 2.5rem;
	height: 2.5rem;
	margin-top: 0.1rem;
	border-radius: 12px;
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset;
	background:
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f05c21' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E") center / 1.35rem 1.35rem no-repeat,
		linear-gradient(145deg, rgba(240, 92, 33, 0.16) 0%, rgba(240, 92, 33, 0.05) 100%);
}