/*
Theme Name:     Hub Child
Theme URI:      https://bhc-riyadh.com/
Description:    A child theme of the Hub theme
Author:         Your Name
Author URI:     https://bhc-riyadh.com/
Template:       hub
Version:        1.0.0
*/

/* Custom CSS below */
.lqd-back-to-top {
	left: 50px;
	right: auto;
}

.wpcf7-field-group {
	display: flex;
	gap: 15px;
}

.wpcf7-field-group > p {
	display: flex;
	align-items: center;
	gap: 10px;
}

@media only screen and (max-width: 768px) {
	.wpcf7-field-group {
		flex-wrap: wrap;
	}
	.child-form-control {
		width: 100% !important;
	}
	.lqd-contact-form .wpcf7-form-control-wrap {
    margin: auto;
}

.wpcf7-field-group-add, .wpcf7-field-group-remove {
	margin-bottom: 10px;
}
}

.wpcf7-field-group-add, .wpcf7-field-group-remove {
	color: #fff;
  font-size: 36px !important;
  line-height: 36px !important;
  padding: 10px 22px !important;
}

/* Chatbot Styles */
		#chatbot-container {
			position: relative;
			max-width: 100%;
			margin: 0 auto;
		}

		.chatbot-toggle {
			position: fixed;
			bottom: 90px;
			right: 30px;
			width: 55px;
			height: 55px;
			background-color: #007bff;
			border-radius: 50%;
			border: none;
			cursor: pointer;
			box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
			z-index: 1000;
			display: flex;
			align-items: center;
			justify-content: center;
			transition: all 0.3s ease;
		}

		.chatbot-toggle:hover {
			background-color: #0056b3;
			transform: scale(1.1);
		}

		.chatbot-toggle img {
			width: 35px;
			height: 35px;
			border-radius: 50%;
		}

		.chatbot-window {
			position: fixed;
			bottom: 155px;
			right: 20px;
			width: 350px;
			background: white;
			border-radius: 10px;
			box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
			display: none;
			flex-direction: column;
			z-index: 999;
			overflow: hidden;
		}

		.chatbot-header {
			background: linear-gradient(135deg, #007bff, #0056b3);
			color: white;
			font-weight: bold;
			position: relative;
			display: flex;
    	align-items: center;
    	justify-content: space-between;
    	padding: 15px;
		}

		.chatbot-messages {
			flex: 1;
			padding: 15px;
			overflow-y: auto;
			background: #f8f9fa;
			min-height: 0;
			max-height: calc(500px - 52px - 124px);
		}

		.message {
			margin-bottom: 15px;
			display: flex;
			align-items: flex-start;
		}

		.message.user {
			justify-content: flex-end;
		}

		.message.bot {
			justify-content: flex-start;
		}

		.message-content {
			max-width: 80%;
			padding: 10px 15px;
			border-radius: 18px;
			word-wrap: break-word;
		}

		.message.user .message-content {
			background: #007bff;
			color: white;
			border-bottom-right-radius: 5px;
		}

		.message.bot .message-content {
			background: white;
			color: #333;
			border: 1px solid #e0e0e0;
			border-bottom-left-radius: 5px;
		}

		.chatbot-starters {
			padding: 15px 15px 8px 15px;
			border-top: 1px solid #e0e0e0;
			background: white;
			flex-shrink: 0;
			position: relative;
		}

		.starter-buttons {
			display: flex;
			flex-wrap: wrap;
			gap: 8px;
			margin-bottom: 15px;
		}

		.starter-btn {
			background: #f8f9fa;
			border: 1px solid #dee2e6;
			border-radius: 20px;
			padding: 8px 15px;
			font-size: 14px;
			cursor: pointer;
			transition: all 0.3s ease;
			height: 40px;
		}

		.starter-btn:hover {
			background: #007bff;
			color: white;
			border-color: #007bff;
		}

		.chatbot-input-container {
			display: flex;
			align-items: center;
			gap: 10px;
		}

		.chatbot-input {
			flex: 1;
			border: 1px solid #dee2e6;
			border-radius: 25px;
			padding: 10px 15px;
			outline: none;
			font-size: 14px;
			height: 45px;
		}

		.emoji-btn {
			background: none;
			border: none;
			font-size: 20px;
			cursor: pointer;
			padding: 5px;
			border-radius: 50%;
			transition: background 0.3s ease;
			line-height: 15px;
		}

		.emoji-btn:hover {
			background: #f8f9fa;
		}

		.send-btn {
			background: #007bff;
			border: none;
			border-radius: 50%;
			width: 40px;
			height: 40px;
			color: white;
			cursor: pointer;
			display: flex;
			align-items: center;
			justify-content: center;
			transition: background 0.3s ease;
		}

		.send-btn:hover {
			background: #0056b3;
		}

		.emoji-picker {
			position: absolute;
			bottom: 60px;
			right: 50px;
			background: white;
			border: 1px solid #dee2e6;
			border-radius: 10px;
			padding: 10px;
			box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
			display: none;
			max-width: 250px;
			z-index: 1001;
		}

		.emoji-grid {
			display: grid;
			grid-template-columns: repeat(6, 1fr);
			gap: 5px;
		}

		.emoji-item {
			background: none;
			border: none;
			font-size: 20px;
			cursor: pointer;
			padding: 5px;
			border-radius: 5px;
			transition: background 0.3s ease;
		}

		.emoji-item:hover {
			background: #f8f9fa;
		}

		.typing-indicator {
			display: none;
			align-items: center;
			gap: 5px;
			padding: 10px 15px;
			background: white;
			border: 1px solid #e0e0e0;
			border-radius: 18px;
			border-bottom-left-radius: 5px;
			max-width: 80px;
		}

		.typing-dot {
			width: 8px;
			height: 8px;
			background: #999;
			border-radius: 50%;
			animation: typing 1.4s infinite ease-in-out;
		}

		.typing-dot:nth-child(1) {
			animation-delay: -0.32s;
		}

		.typing-dot:nth-child(2) {
			animation-delay: -0.16s;
		}

		@keyframes typing {

			0%,
			80%,
			100% {
				transform: scale(0);
			}

			40% {
				transform: scale(1);
			}
		}

		/* Mobile Responsiveness */
		@media (max-width: 768px) {
			.chatbot-window {
				width: calc(100vw - 40px);
				height: calc(100vh - 180px);
				bottom: 155px;
				right: 20px;
				left: 20px;
			}

			.chatbot-messages {
				max-height: calc(100vh - 140px - 125px - 124px);
			}

			.chatbot-toggle {
				width: 55px;
				height: 55px;
				bottom: 90px;
				right: 30px;
			}

			.chatbot-toggle img {
				width: 30px;
				height: 30px;
			}

			.starter-buttons {
/* 				flex-direction: column; */
			}

			.starter-btn {
/* 				width: 100%; */
				text-align: center;
			}

			.emoji-picker {
				right: 10px;
				left: 10px;
				max-width: none;
			}
		}

		@media (max-width: 480px) {
			.chatbot-window {
				width: calc(100vw - 20px);
				height: calc(100vh - 180px);
/* 				bottom: 80px; */
				right: 10px;
				left: 10px;
			}

			.chatbot-messages {
				max-height: calc(100vh - 120px - 125px - 124px);
			}

			.chatbot-toggle {
				width: 50px;
				height: 50px;
				bottom: 90px;
				right: 30px;
			}

			.message-content {
				max-width: 90%;
				font-size: 14px;
			}

			.chatbot-input {
				font-size: 16px;
				/* Prevents zoom on iOS */
			}
		}

		/* iOS specific fixes */
		@supports (-webkit-touch-callout: none) {
			.chatbot-input {
				font-size: 16px;
				-webkit-appearance: none;
				border-radius: 25px;
			}
		}

		/* Android specific fixes */
		@media screen and (-webkit-min-device-pixel-ratio: 0) {
			.chatbot-input:focus {
				outline: none;
				border-color: #007bff;
			}
		}