/**
*
* @link              https://nikkjadav.com
* @since             1.0.0
* @package           Smartquote
*
* @wordpress-plugin
* Plugin Name:       SmartQuote
* Plugin URI:        https://nikkjadav.com
* Description:       SmartQuote is a powerful plugin designed to enhance B2B and customer-specific pricing workflows in WordPress
* Version:           1.0.0
* Author:            Nikk J
* Author URI:        https://nikkjadav.com/
* License:           GPL-2.0+
* License URI:       http://www.gnu.org/licenses/gpl-2.0.txt
* Text Domain:       smartquote
*/

/* .smartquote-dashboard-container h1,
.smartquote-dashboard-container h2,
.smartquote-dashboard-container h3,
.smartquote-dashboard-container h4,
.smartquote-dashboard-container h5,
.smartquote-dashboard-container h6 {
	font-style: italic;
	font-weight: 500 !important;
} */

.smartquote-dashboard-container .btn {
	font-family: "Avenir", sans-serif !important;
}

.sq-divider {
	margin: 10px 0 !important;
}

.smartquote-dashboard-container {
	display: flex;
	margin: 40px auto;
	background: #fff;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
	border-radius: 0;
	overflow: hidden;
}

.smartquote-dashboard-container .sq-chat-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	margin: 15px 0;
}

.smartquote-dashboard-container .sq-chat-header h4 {
	padding: 0;
	margin: 0;
}

.smartquote-dashboard-container .back2quote {
	background: #000;
	padding: 5px 20px;
	border-radius: 100px;
	color: #fff !important;
	font-size: 20px;
	font-weight: 500;
	line-height: 1.4;
	border: 2px solid #000;
	transition: all 0.3s ease-in-out;
}

.smartquote-dashboard-container .back2quote:hover {
	background: #fff;
	border-color: #000;
	color: #000 !important;
}

.smartquote-sidebar {
	width: 250px;
	background: #f9f9f9;
	border-right: 1px solid #ddd;
}

.smartquote-sidebar ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.smartquote-sidebar li {
	padding: 15px 20px;
	cursor: pointer;
	font-weight: 500;
	font-family: "Avenir", Sans-serif;
	color: #000;
	border-bottom: 1px solid #eee;
	transition: 0.2s all ease-in-out;
}

.smartquote-sidebar li.active,
.smartquote-sidebar li:hover {
	background: #000;
	color: #fff;
	border-bottom: 1px solid #000;
}

.smartquote-content {
	flex: 1;
	padding: 30px;
}

.smartquote-content .tab-content {
	display: none;
}

.smartquote-content .tab-content.active {
	display: block;
}

.smartquote-content .tab-content .form-row,
.login-form,
.register-form-wrapper .form-row,
#quote-popup-wrapper .form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	--space: 30px;
	gap: var(--space);
	margin-bottom: var(--space);
}

.smartquote-content .tab-content .form-row .form-group label,
.login-form form label,
.register-form-wrapper form label {
	margin-bottom: 10px;
	font-size: 16px;
}

.smartquote-content .tab-content h3 {
	margin-bottom: 40px;
}

.smartquote-content .tab-content button,
.login-form form input[type="submit"],
.register-form-wrapper form input[type="submit"] {
	padding: 10px 30px !important;
}

.smartquote-content .tab-content .button-row {
	display: flex;
	gap: 30px;
}

.smartquote-content .tab-content .form-row .form-group input,
.login-form form input,
.register-form-wrapper form input {
	padding: 12px 15px;
	outline: none;
	border: 1px solid #000;
	width: 100%;
	border-radius: 3px;
}

#sq-password-msg.error {
	color: #d9534f;
}

#sq-password-msg.success {
	color: #5cb85c;
}

/* Backdrop */
.quote-popup-backdrop {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	display: none;
	z-index: 999;
}

/* Popup wrapper */
#quote-popup-wrapper {
	background: #fff;
	padding: 20px;
	border-radius: 8px;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.3);
	z-index: 1000;
	display: none;
}

/* Close button wrapper */
.close-wrapper {
	position: fixed;
	top: 20px;
	right: 20px;
	z-index: 1001;
	display: none;
}

.close-wrapper .close-popup {
	background: none;
	border: none;
	cursor: pointer;
}

.sq-auth-tabs {
	border: 2px solid #000;
	padding: 10px;
	border-radius: 100px;
	display: flex;
	align-content: center;
	justify-content: center;
	gap: 10px;
	max-width: fit-content;
	margin: 0px auto 50px;
}

.sq-auth-tabs a {
	background: transparent;
	color: #000;
	border-radius: 100px;
	padding: 10px 40px;
	display: inline-block;
	font-weight: 500;
}

.sq-auth-tabs a.active,
.sq-auth-tabs a:hover {
	background-color: #000 !important;
	color: #fff !important;
}

.sq-login-form-main.active,
.sq-register-form-main.active {
	display: block;
}

.sq-login-form-main,
.sq-register-form-main {
	display: none;
}

.login-form {
	display: flex;
	flex-direction: column;
	justify-content: center;
	max-width: 500px;
	margin: 0px auto;
}

.login-form h3 {
	margin-bottom: 20px;
	color: #000;
}

/* Chat Quote */

.sq-chat-wrapper {
	height: 700px;
	width: 100%;
	background-repeat: no-repeat;
}

.sq-chat {
	height: 100%;
	display: flex;
	flex-direction: column;
	gap: 30px;
	width: 100%;
}

.sq-chat-input {
	width: 100%;
	font: inherit;
	color: #000;
	outline: none;
	padding: 10px 65px 10px 10px;
	background: rgba(255, 255, 255, 0.2);
	backdrop-filter: blur(10px);
	border-radius: 10px;
	border: 2px solid #ccc;
	transition: background 200ms;
	height: 54px;

	/* ✅ Added for WhatsApp-like input */
	min-height: 54px; /* default height */
	max-height: 150px; /* cap like WhatsApp */
	resize: none; /* prevent manual resize */
	overflow-y: auto; /* vertical scroll only if needed */
	overflow-x: hidden; /* no horizontal scroll */
	line-height: 1.5;
	box-sizing: border-box;
	white-space: pre-wrap; /* wrap text properly */
	word-wrap: break-word;
}

.sq-chat-input:focus {
	background: rgba(255, 255, 255, 0.25);
}

.sq-chat-input::placeholder {
	color: #00000040;
}

.sq-messages {
	height: 100%;
	display: flex;
	flex-direction: column;
	gap: 10px;
	overflow-y: auto;
	padding: 0;
	scrollbar-width: 5px;
	scrollbar-color: rgb(114 114 114 / 30%) transparent;
}

.sq-messages::-webkit-scrollbar {
	width: 5px;
}

.sq-messages::-webkit-scrollbar-track {
	background: transparent;
}

.sq-messages::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, 0.3);
	border-radius: 10px;
}

.sq-messages::-webkit-scrollbar-thumb:hover {
	background: rgba(255, 255, 255, 0.35);
}

.sq-messages::-webkit-scrollbar-thumb:active {
	background: rgba(255, 255, 255, 0.4);
}

.sq-message {
	overflow-wrap: break-word;
	background: #efefef;
	backdrop-filter: blur(10px);
	border-radius: 10px;
	border: 1px solid rgba(255, 255, 255, 0.18);
	color: #000;
	padding: 10px 25px;
	max-width: 80%;
	width: fit-content;
}

.sq-message.self {
	margin-left: auto;
	background: #000;
	--dir: 1 !important;
	color: #fff;
}

.animate {
	--dir: -1;
	animation: message 100ms;
	z-index: 1;
}

.smartquote-dashboard-container .write {
	position: relative;
}

.smartquote-dashboard-container .smartquote-content .sq-send-chat {
	display: flex;
	align-items: center;
	justify-content: center;
	background: #000;
	color: #fff !important;
	border: 2px solid #000;
	border-radius: 8px;
	width: 48px;
	height: 38px;
	padding: 0 !important;
	transition: all 0.3s ease-in-out;
	position: absolute;
	right: 10px;
	bottom: 10px;
}

.smartquote-dashboard-container .sq-send-chat:hover {
	background: #fff;
	border-color: #000;
	color: #000 !important;
}

.product-images-wrapper {
	width: 100%;
	height: 100%;
	min-height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: #212529;
	color: #212529;
}

.product__slider-box {
	display: flex;
	align-items: center;
	justify-content: center;
}

.product__slider-box img {
	width: 100% !important;
	height: 600px !important;
	object-fit: cover;
	object-position: center;
	border-radius: 20px;
}

.nav__slider {
	/* max-width: 500px; */
	width: 100%;
	margin: auto;
	margin-top: 20px;
}

.nav__slider-item {
	border: 1px solid #f0f0f0;
	border-radius: 10px;
	margin: 0 5px;
	width: 100px !important;
	height: 100px;
	overflow: hidden;
	margin-bottom: 10px;
	transition: all 0.3s ease-in-out;
}

.nav__slider-item.slick-current {
	box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}

.nav__slider-box {
	display: flex;
	align-items: center;
	justify-content: center;
}

.nav__slider img {
	object-fit: cover;
	object-position: center;
	border-radius: 20px;
	height: 100px !important;
	width: 100px;
}

.slick-dots li.slick-active button:before {
	color: #fff;
}

.slick-dots li button:before {
	color: #fff;
}

@keyframes message {
	from {
		transform: translate(calc(var(--dir) * 200%), 300px) scale(0);
	}

	to {
		transform: translate(0, 0) scale(1);
	}
}

/* Responsive */
@media only screen and (max-width: 1024px) {
	.smartquote-dashboard-container {
		flex-direction: column;
	}

	.smartquote-sidebar {
		width: 100%;
		display: flex;
		overflow-x: auto;
		border-right: none;
		border-bottom: 1px solid #eee;
	}

	.smartquote-sidebar ul {
		display: flex;
		flex-wrap: wrap;
	}

	.smartquote-sidebar li {
		flex: 1;
		text-align: center;
		white-space: nowrap;
		border-bottom: none;
		border-right: 1px solid #eee;
	}

	.smartquote-sidebar li.active,
	.smartquote-sidebar li:hover {
		border-bottom: none;
		border-right: 1px solid #000;
	}
}

@media only screen and (max-width: 991px) {
	.smartquote-content .tab-content h3 {
		margin-bottom: 30px;
	}
}

@media only screen and (max-width: 767px) {
	.smartquote-content {
		padding: 20px;
	}

	.smartquote-content .tab-content .form-row,
	.login-form,
	.register-form-wrapper .form-row,
	#quote-popup-wrapper .form-row {
		grid-template-columns: 1fr;
		--space: 20px;
	}

	.smartquote-content .tab-content .button-row {
		gap: 20px;
	}

	.smartquote-content .tab-content h3 {
		margin-bottom: 20px;
	}

	.sq-chat {
		gap: 10px;
	}

	.smartquote-dashboard-container .sq-chat-header {
		flex-direction: column;
		align-items: flex-start;
	}

	.product__slider-box img {
		height: 400px !important;
	}
}

@media only screen and (max-width: 540px) {
	.smartquote-sidebar ul {
		width: 100%;
		flex-direction: column;
	}
}