/* ============================================
   Appointment Page Styles
   ============================================ */

/* Modern glassmorphism card */
.pricing-card {
	background: rgba(15, 23, 42, 0.6) !important;
	backdrop-filter: blur(20px) !important;
	border: 1px solid rgba(255, 255, 255, 0.1) !important;
	border-radius: 24px !important;
	padding: 2.5rem !important;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3) !important;
}

/* Modern input styling */
.dark-input {
	background: rgba(255, 255, 255, 0.05) !important;
	border: 1.5px solid rgba(255, 255, 255, 0.1) !important;
	border-radius: 16px !important;
	padding: 0.875rem 1.25rem !important;
	font-size: 1rem !important;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
	color: #f8fafc !important;
}

.dark-input:focus {
	background: rgba(255, 255, 255, 0.08) !important;
	border-color: #2dd4bf !important;
	box-shadow: 0 0 0 4px rgba(45, 212, 191, 0.1), 0 8px 24px rgba(45, 212, 191, 0.15) !important;
	transform: translateY(-1px) !important;
	outline: none !important;
}

.dark-input.is-invalid {
	border-color: rgba(220, 38, 38, 0.5) !important;
	background: rgba(220, 38, 38, 0.05) !important;
}

.dark-input.is-invalid:focus {
	border-color: rgba(220, 38, 38, 0.8) !important;
	box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.1) !important;
}

.dark-input::placeholder {
	color: rgba(248, 250, 252, 0.4) !important;
}

.form-label {
	color: #f8fafc !important;
	font-weight: 600 !important;
	font-size: 0.9rem !important;
	letter-spacing: 0.3px !important;
	margin-bottom: 0.625rem !important;
}

.pricing-card h3 {
	font-size: 1.25rem !important;
	font-weight: 700 !important;
	color: #f8fafc !important;
	margin-bottom: 1.5rem !important;
	padding-bottom: 1rem !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
	display: flex !important;
	align-items: center !important;
	gap: 0.75rem !important;
}

.pricing-card h3 i {
	background: linear-gradient(135deg, #2dd4bf, #14b8a6) !important;
	-webkit-background-clip: text !important;
	-webkit-text-fill-color: transparent !important;
	background-clip: text !important;
	font-size: 1.35rem !important;
}

.location-toggle-group {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
}

/* When there are 3 radio buttons (contact preference), use 3 columns */
.location-toggle-group:has(input[type="radio"]:nth-of-type(3)) {
	grid-template-columns: 1fr 1fr 1fr;
}

.location-radio {
	display: none;
}

.location-btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.75rem;
	padding: 1.5rem 1rem;
	background: rgba(255, 255, 255, 0.05);
	border: 2px solid rgba(255, 255, 255, 0.1);
	border-radius: 16px;
	cursor: pointer;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	color: rgba(248, 250, 252, 0.7);
	font-weight: 500;
	font-size: 0.95rem;
}

.location-btn i {
	font-size: 1.75rem;
	transition: all 0.3s ease;
}

.location-btn:hover {
	background: rgba(255, 255, 255, 0.08);
	border-color: rgba(45, 212, 191, 0.3);
	color: #f8fafc;
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.location-radio:checked + .location-btn {
	background: rgba(45, 212, 191, 0.15);
	border-color: #2dd4bf;
	color: #2dd4bf;
	box-shadow: 0 0 0 4px rgba(45, 212, 191, 0.1);
}

.location-radio:checked + .location-btn i {
	transform: scale(1.1);
}

.btn-primary {
	background: linear-gradient(135deg, #2dd4bf 0%, #14b8a6 100%) !important;
	border: none !important;
	border-radius: 16px !important;
	padding: 1rem 2rem !important;
	font-weight: 600 !important;
	font-size: 1.05rem !important;
	letter-spacing: 0.3px !important;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
	box-shadow: 0 8px 24px rgba(45, 212, 191, 0.25) !important;
}

.btn-primary:hover:not(:disabled) {
	transform: translateY(-2px) !important;
	box-shadow: 0 12px 32px rgba(45, 212, 191, 0.35) !important;
}

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

.btn-outline {
	background: rgba(255, 255, 255, 0.05) !important;
	border: 1.5px solid rgba(255, 255, 255, 0.1) !important;
	border-radius: 16px !important;
	padding: 0.875rem 1.25rem !important;
	color: rgba(248, 250, 252, 0.7) !important;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
	font-weight: 500 !important;
}

.btn-outline:hover {
	background: rgba(255, 255, 255, 0.08) !important;
	border-color: rgba(45, 212, 191, 0.5) !important;
	color: #f8fafc !important;
}

.hero-badge {
	background: rgba(45, 212, 191, 0.1) !important;
	border: 1px solid rgba(45, 212, 191, 0.3) !important;
	border-radius: 50px !important;
	padding: 0.5rem 1.25rem !important;
	display: inline-flex !important;
	align-items: center !important;
	gap: 0.5rem !important;
	font-weight: 600 !important;
	font-size: 0.875rem !important;
	color: #2dd4bf !important;
	letter-spacing: 0.5px !important;
	text-transform: uppercase !important;
}

.pac-container {
	background-color: rgba(15, 23, 42, 0.98) !important;
	backdrop-filter: blur(20px) !important;
	border: 1px solid rgba(255, 255, 255, 0.15) !important;
	border-radius: 16px !important;
	margin-top: 8px !important;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4) !important;
}

.pac-item {
	background-color: transparent !important;
	border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
	color: #f8fafc !important;
	padding: 12px 16px !important;
	transition: all 0.2s ease !important;
}

.pac-item:hover {
	background-color: rgba(45, 212, 191, 0.1) !important;
}

.pac-item-query {
	color: #2dd4bf !important;
	font-weight: 600 !important;
}

.invalid-feedback {
	color: #ef4444 !important;
	font-size: 0.875rem !important;
	margin-top: 0.25rem !important;
}

/* Alert styles */
.alert-danger {
	background: rgba(220, 38, 38, 0.1) !important;
	border: 1px solid rgba(220, 38, 38, 0.3) !important;
}

/* Confirmation page specific styles */
.confirmation-icon-container {
	width: 80px;
	height: 80px;
}

.confirmation-icon {
	font-size: 2.5rem;
}

.info-box {
	background: rgba(44, 211, 191, 0.1);
	border-left: 3px solid #2dd4bf;
}

.service-item,
.contact-info-item,
.travel-fee-item {
	background: rgba(255, 255, 255, 0.03);
	border-left: 3px solid #2dd4bf;
}

.empty-state-box {
	background: rgba(255, 255, 255, 0.03);
}

.status-container {
	background: rgba(255, 255, 255, 0.03);
	border-top: 1px solid rgba(255, 255, 255, 0.1);
}