/*------------------------------------------------------------------------
# com_testimonial_fader - Testimonial Fader
# ------------------------------------------------------------------------
# author    JoomlaX
# copyright Copyright (C) 2011 - 2025 JoomlaX. All Rights Reserved.
# @license - http://www.gnu.org/licenses/gpl-2.0.html GNU/GPL
# Websites: https://joomlax.com
# Technical Support:  https://support.joomlax.com
-------------------------------------------------------------------------*/

/* CSS Variables */
:root {
	/* Testimonial Block */
	--jx-tf-bg-color: #E0DEDF;
	--jx-tf-text-color: #333333;
	--jx-tf-font-size: 14px;
	--jx-tf-line-height: 16px;
	--jx-tf-padding: 10px 50px;
	--jx-tf-font-style: italic;
	--jx-tf-border-radius: 5px;
	--jx-tf-quote-color: #dddddd;
	--jx-tf-quote-size: 80px;
	--jx-tf-quote-top: 0;
	--jx-tf-quote-left: 10px;
	--jx-tf-quote-right: 10px;
	--jx-tf-quote-bottom: -0.5em;
	
	/* Author */
	--jx-tf-author-color: #333333;
	--jx-tf-author-font-size: 14px;
	--jx-tf-author-margin-top: 15px;
	--jx-tf-author-padding-left: 10px;
	
	/* Arrow */
	--jx-tf-arrow-size: 15px;
	--jx-tf-arrow-margin-left: 25px;
	
	/* Block Container */
	--jx-tf-block-padding: 10px 0;
	--jx-tf-block-margin: 0;
	--jx-tf-container-margin: 20px 0;
	
	/* Row */
	--jx-tf-row-gap: 0;
	
	/* Layout */
	--jx-tf-layout-type: grid;
	--jx-tf-columns: 1;
	--jx-tf-columns-tablet: 2;
	--jx-tf-columns-mobile: 1;
	--jx-tf-gap: 20px;
	
	/* Pagination */
	--jx-tf-pag-bg-color: #000000;
	--jx-tf-pag-hover-color: #cccccc;
	--jx-tf-pag-active-color: #cccccc;
	--jx-tf-pag-text-color: #ffffff;
	--jx-tf-pag-box-color: #ffffff;
	--jx-tf-pag-box-border-radius: 30px;
	--jx-tf-pag-box-padding: 10px;
	--jx-tf-pag-item-size: 35px;
	--jx-tf-pag-item-margin: 0 6px;
	--jx-tf-pag-item-font-size: 14px;
	--jx-tf-pag-transition: 0.3s;
	
	/* Form */
	--jx-tf-form-width: 300px;
	--jx-tf-form-padding: 0;
	--jx-tf-form-margin: 10px 0;
	--jx-tf-form-bg-color: transparent;
	
	/* Form Input */
	--jx-tf-input-padding: 10px 5px;
	--jx-tf-input-margin: 10px 0;
	--jx-tf-input-border-radius: 5px;
	--jx-tf-input-border-color: #dddddd;
	--jx-tf-input-border-width: 1px;
	--jx-tf-input-bg-color: #ffffff;
	--jx-tf-input-focus-border-color: #007bff;
	--jx-tf-input-error-border-color: #dc3545;
	--jx-tf-textarea-height: 180px;
	--jx-tf-input-font-size: 14px;
	
	/* Form Label */
	--jx-tf-label-font-size: 14px;
	--jx-tf-label-font-weight: normal;
	--jx-tf-label-margin-bottom: 5px;
	--jx-tf-required-color: #ff0000;
	
	/* Form Toolbar */
	--jx-tf-toolbar-margin-top: 10px;
	
	/* reCAPTCHA */
	--jx-tf-captcha-margin-bottom: 15px;
	
	/* Toggle Button */
	--jx-tf-toggle-bg-color: #ebebeb;
	--jx-tf-toggle-hover-color: #333333;
	--jx-tf-toggle-text-color: #343434;
	--jx-tf-toggle-hover-text-color: #ffffff;
	--jx-tf-toggle-border-radius: 5px;
	--jx-tf-toggle-padding: 10px 20px;
	--jx-tf-toggle-margin: 20px 0;
	--jx-tf-toggle-transition: 0.4s;
	--jx-tf-toggle-font-weight: bold;
	
	/* Submit Button */
	--jx-tf-submit-bg-color: #000000;
	--jx-tf-submit-hover-color: #333333;
	--jx-tf-submit-text-color: #ffffff;
	--jx-tf-submit-hover-text-color: #ffffff;
	--jx-tf-submit-padding: 10px 40px;
	--jx-tf-submit-transition: 0.3s;
	
	/* Modal */
	--jx-tf-modal-bg: rgba(0, 0, 0, 0.6);
	--jx-tf-modal-z-index: 9999;
	--jx-tf-modal-content-bg: #fefefe;
	--jx-tf-modal-content-padding: 30px;
	--jx-tf-modal-content-border-radius: 10px;
	--jx-tf-modal-content-width: 400px;
	--jx-tf-modal-content-max-width: 95%;
	--jx-tf-modal-close-size: 30px;
	--jx-tf-modal-close-color: #252525;
	--jx-tf-modal-close-top: 10px;
	--jx-tf-modal-close-right: 20px;
	--jx-tf-modal-transition: 0.3s ease;
	
	/* Error Messages */
	--jx-tf-error-bg: #F94950;
	--jx-tf-error-color: #FFFFFF;
	--jx-tf-error-padding: 10px;
	--jx-tf-error-border-radius: 3px;
	--jx-tf-form-error-color: #a94442;
	--jx-tf-form-error-bg: #f2dede;
	--jx-tf-form-error-border: #ebccd1;
	
	/* Success Messages */
	--jx-tf-success-color: #3c763d;
	--jx-tf-success-bg: #dff0d8;
	--jx-tf-success-border: #d6e9c6;
	
	/* Character Count */
	--jx-tf-char-count-font-size: 12px;
	
	/* Responsive Breakpoints */
	--jx-tf-mobile-breakpoint: 600px;
	--jx-tf-tablet-breakpoint: 768px;
}

/* Container */
.jx-testimonial-container {
	margin: var(--jx-tf-container-margin);
}

/* Testimonial Block */
.jx-testimonial-block {
	margin: 0;
	background: var(--jx-tf-bg-color);
	padding: var(--jx-tf-padding);
	position: relative;
	color: var(--jx-tf-text-color);
	border-radius: var(--jx-tf-border-radius);
	font-style: var(--jx-tf-font-style);
	font-size: var(--jx-tf-font-size);
	line-height: var(--jx-tf-line-height);
}

.jx-testimonial-block::before,
.jx-testimonial-block::after {
	content: "\201C";
	position: absolute;
	font-size: var(--jx-tf-quote-size);
	line-height: 1;
	color: var(--jx-tf-quote-color);
	font-style: normal;
	font-family: Georgia, serif;
}

.jx-testimonial-block::before {
	top: var(--jx-tf-quote-top);
	left: var(--jx-tf-quote-left);
}

.jx-testimonial-block::after {
	content: "\201D";
	right: var(--jx-tf-quote-right);
	bottom: var(--jx-tf-quote-bottom);
}

/* Testimonial Text */
.jx-testimonial-text {
	margin: 0;
}

/* Author */
.jx-testimonial-author {
	margin-top: var(--jx-tf-author-margin-top);
	padding-left: var(--jx-tf-author-padding-left);
	color: var(--jx-tf-author-color);
	font-size: var(--jx-tf-author-font-size);
}

/* Arrow Down */
.jx-testimonial-arrow {
	width: 0;
	height: 0;
	border-left: var(--jx-tf-arrow-size) solid transparent;
	border-right: var(--jx-tf-arrow-size) solid transparent;
	border-top: var(--jx-tf-arrow-size) solid var(--jx-tf-bg-color);
	margin: 0 0 0 var(--jx-tf-arrow-margin-left);
}

/* Column */
.jx-testimonial-col {
	padding: var(--jx-tf-block-padding);
	margin: 0; /* Margin removed - using gap instead */
}

/* Row - Base Styles */
.jx-testimonial-row {
	gap: var(--jx-tf-gap);
}

/* Grid Layout */
.jx-testimonial-row--grid {
	display: grid;
	grid-template-columns: repeat(var(--jx-tf-columns), 1fr);
	gap: var(--jx-tf-gap);
}

/* Flex Layout */
.jx-testimonial-row--flex {
	display: flex;
	flex-wrap: wrap;
	gap: var(--jx-tf-gap);
}

.jx-testimonial-row--flex .jx-testimonial-col {
	flex: 1 1 calc((100% / var(--jx-tf-columns)) - var(--jx-tf-gap) + (var(--jx-tf-gap) / var(--jx-tf-columns)));
	min-width: 0;
}

/* Masonry Layout */
.jx-testimonial-row--masonry {
	column-count: var(--jx-tf-columns);
	column-gap: var(--jx-tf-gap);
	column-fill: balance;
}

.jx-testimonial-row--masonry .jx-testimonial-col {
	break-inside: avoid;
	page-break-inside: avoid;
	display: inline-block;
	width: 100%;
	margin-bottom: var(--jx-tf-gap);
}

/* Responsive - Tablet */
@media screen and (max-width: 768px) {
	.jx-testimonial-row--grid {
		grid-template-columns: repeat(var(--jx-tf-columns-tablet), 1fr);
	}
	
	.jx-testimonial-row--flex .jx-testimonial-col {
		flex: 1 1 calc((100% / var(--jx-tf-columns-tablet)) - var(--jx-tf-gap) + (var(--jx-tf-gap) / var(--jx-tf-columns-tablet)));
		min-width: 0;
	}
	
	.jx-testimonial-row--masonry {
		column-count: var(--jx-tf-columns-tablet);
	}
}

/* Responsive - Mobile */
@media screen and (max-width: 600px) {
	.jx-testimonial-row--grid {
		grid-template-columns: repeat(var(--jx-tf-columns-mobile), 1fr);
	}
	
	.jx-testimonial-row--flex .jx-testimonial-col {
		flex: 1 1 calc((100% / var(--jx-tf-columns-mobile)) - var(--jx-tf-gap) + (var(--jx-tf-gap) / var(--jx-tf-columns-mobile)));
		min-width: 0;
	}
	
	.jx-testimonial-row--masonry {
		column-count: var(--jx-tf-columns-mobile);
	}
}

/* AJAX Pagination Loading Animation */
@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

.jx-testimonial-loading {
	text-align: center;
	padding: 20px;
}

.jx-testimonial-pagination a[data-ajax-pagination="1"] {
	cursor: pointer;
	transition: opacity 0.3s ease;
}

.jx-testimonial-pagination a[data-ajax-pagination="1"]:hover {
	opacity: 0.8;
}

/* Pagination */
.jx-testimonial-pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0;
}

.jx-testimonial-pagination ul {
	margin: 0;
	padding: 0;
	display: flex;
	list-style-type: none;
}

.jx-testimonial-pagination ul li a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--jx-tf-pag-item-size);
	height: var(--jx-tf-pag-item-size);
	margin: var(--jx-tf-pag-item-margin);
	background-color: var(--jx-tf-pag-bg-color);
	color: var(--jx-tf-pag-text-color);
	text-decoration: none;
	font-size: var(--jx-tf-pag-item-font-size);
	transition: background-color var(--jx-tf-pag-transition), color var(--jx-tf-pag-transition);
	font-weight: bold;
}

.jx-testimonial-pagination--round ul li a {
	border-radius: 50%;
}

.jx-testimonial-pagination ul li a:hover,
.jx-testimonial-pagination ul li a:focus {
	background-color: var(--jx-tf-pag-hover-color);
	color: var(--jx-tf-pag-text-color);
	text-decoration: none;
}

.jx-testimonial-pagination ul li a.jx-testimonial-pagination__active {
	background-color: var(--jx-tf-pag-active-color);
	color: var(--jx-tf-pag-text-color);
}

/* Navigation buttons (Previous/Next/Start/End) */
.jx-testimonial-pagination__nav {
	cursor: pointer;
}

.jx-testimonial-pagination__nav .fa {
	font-size: var(--jx-tf-pag-item-font-size);
	line-height: 1;
	display: inline-block;
}

.jx-testimonial-pagination__nav:hover .fa,
.jx-testimonial-pagination__nav:focus .fa {
	color: inherit;
}

/* Disabled state for navigation buttons (when not applicable) */
.jx-testimonial-pagination__nav:disabled,
.jx-testimonial-pagination__nav.disabled {
	opacity: 0.5;
	cursor: not-allowed;
	pointer-events: none;
}

/* Ellipsis for pagination */
.jx-testimonial-pagination__ellipsis {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0 5px;
	color: var(--jx-tf-pag-text-color);
}

.jx-testimonial-pagination__ellipsis span {
	font-size: var(--jx-tf-pag-item-font-size);
	font-weight: bold;
}

.jx-testimonial-pagination--box {
	padding: var(--jx-tf-pag-box-padding) !important;
	background: var(--jx-tf-pag-box-color);
	border-radius: var(--jx-tf-pag-box-border-radius);
}

.jx-testimonial-pagination--center {
	justify-content: center;
}

.jx-testimonial-pagination--left {
	justify-content: flex-start;
}

.jx-testimonial-pagination--right {
	justify-content: flex-end;
}

/* Form */
.jx-testimonial-form {
	padding: var(--jx-tf-form-padding);
	margin: var(--jx-tf-form-margin);
	max-width: var(--jx-tf-form-width);
	background: var(--jx-tf-form-bg-color);
}

.jx-testimonial-form input[type="text"],
.jx-testimonial-form input[type="email"] {
	margin-bottom: 5px !important;
	width: 100%;
	padding: 7px !important;
	box-sizing: border-box;
}

.jx-testimonial-form__input {
	padding: var(--jx-tf-input-padding) !important;
	margin: var(--jx-tf-input-margin) !important;
	border-radius: var(--jx-tf-input-border-radius) !important;
	border: var(--jx-tf-input-border-width) solid var(--jx-tf-input-border-color) !important;
	background-color: var(--jx-tf-input-bg-color);
	font-size: var(--jx-tf-input-font-size);
	transition: border-color var(--jx-tf-pag-transition);
}

.jx-testimonial-form__input:focus {
	outline: none;
	border-color: var(--jx-tf-input-focus-border-color) !important;
}

.jx-testimonial-form__input.jx-testimonial-form__input--error {
	border-color: var(--jx-tf-input-error-border-color) !important;
}

.jx-testimonial-form textarea {
	width: 100%;
	border-radius: var(--jx-tf-input-border-radius);
	box-sizing: border-box;
	height: var(--jx-tf-textarea-height);
	border: var(--jx-tf-input-border-width) solid var(--jx-tf-input-border-color);
	resize: vertical;
}

.jx-testimonial-form__field {
	margin-left: 0;
}

/* reCAPTCHA field spacing */
.jx-testimonial-form__field:has(#jx-testimonial-captcha),
.jx-testimonial-form__field #jx-testimonial-captcha {
	margin-bottom: var(--jx-tf-captcha-margin-bottom);
}

/* Fallback for browsers that don't support :has() */
.jx-testimonial-form__field .grecaptcha,
.jx-testimonial-form__field #jx-testimonial-captcha {
	margin-bottom: var(--jx-tf-captcha-margin-bottom);
	display: block;
	min-height: 78px; /* Minimum height for reCAPTCHA v2 */
}

.jx-testimonial-form__toolbar {
	margin-top: var(--jx-tf-toolbar-margin-top);
	clear: both;
}

.jx-testimonial-form__button {
	width: 100%;
	border: none;
	padding: 10px 40px;
}

.jx-testimonial-form__submit {
	border-radius: var(--jx-tf-input-border-radius);
	background: var(--jx-tf-submit-bg-color);
	color: var(--jx-tf-submit-text-color);
	padding: var(--jx-tf-submit-padding);
	transition: background var(--jx-tf-submit-transition), color var(--jx-tf-submit-transition);
	cursor: pointer;
}

.jx-testimonial-form__submit:hover {
	border-radius: var(--jx-tf-input-border-radius);
	background: var(--jx-tf-submit-hover-color);
	color: var(--jx-tf-submit-hover-text-color);
}

.jx-testimonial-form__submit:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.jx-testimonial-form__label {
	display: block;
	font-size: var(--jx-tf-label-font-size);
	font-weight: var(--jx-tf-label-font-weight);
	margin-bottom: var(--jx-tf-label-margin-bottom);
}

.jx-testimonial-form__required {
	color: var(--jx-tf-required-color);
}

.jx-testimonial-form__char-count {
	text-align: right;
	font-size: var(--jx-tf-char-count-font-size);
	margin-top: 5px;
}

.jx-testimonial-form__error-message {
	color: var(--jx-tf-form-error-color);
	background-color: var(--jx-tf-form-error-bg);
	border-color: var(--jx-tf-form-error-border);
	font-size: var(--jx-tf-char-count-font-size);
	padding: 5px;
	border: 1px dotted;
	margin-top: 5px;
	display: none;
}

.jx-testimonial-form__error-message--show {
	display: block;
}

/* Toggle Button */
.jx-testimonial-toggle {
	padding: var(--jx-tf-toggle-padding);
	display: inline-block;
	background: var(--jx-tf-toggle-bg-color);
	color: var(--jx-tf-toggle-text-color);
	border-radius: var(--jx-tf-toggle-border-radius);
	text-transform: uppercase;
	font-weight: var(--jx-tf-toggle-font-weight);
	transition: all var(--jx-tf-toggle-transition);
	border: none !important;
	cursor: pointer;
}

.jx-testimonial-toggle:hover,
.jx-testimonial-toggle:focus,
.jx-testimonial-toggle:active {
	background: var(--jx-tf-toggle-hover-color);
	color: var(--jx-tf-toggle-hover-text-color);
	text-decoration: none;
}

.jx-testimonial-toggle-container {
	display: none;
}

.jx-testimonial-toggle-button {
	display: flex;
	margin: var(--jx-tf-toggle-margin);
}

.jx-testimonial-toggle-button--center {
	justify-content: center;
}

.jx-testimonial-toggle-button--left {
	justify-content: flex-start;
}

.jx-testimonial-toggle-button--right {
	justify-content: flex-end;
}

/* Modal */
.jx-testimonial-modal {
	display: none;
	position: fixed;
	z-index: var(--jx-tf-modal-z-index);
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: var(--jx-tf-modal-bg);
	justify-content: center;
	align-items: center;
	opacity: 0;
	transition: opacity var(--jx-tf-modal-transition);
}

.jx-testimonial-modal--active {
	display: flex;
	opacity: 1;
}

.jx-testimonial-modal__content {
	background-color: var(--jx-tf-modal-content-bg);
	padding: var(--jx-tf-modal-content-padding);
	border-radius: var(--jx-tf-modal-content-border-radius);
	width: var(--jx-tf-modal-content-width);
	max-width: var(--jx-tf-modal-content-max-width);
	box-sizing: border-box;
	position: relative;
	margin: auto;
	max-height: 90vh;
	overflow-y: auto;
	transform: scale(0.9);
	transition: transform var(--jx-tf-modal-transition);
}

.jx-testimonial-modal--active .jx-testimonial-modal__content {
	transform: scale(1);
}

.jx-testimonial-modal__close {
	color: var(--jx-tf-modal-close-color);
	cursor: pointer;
	font-size: var(--jx-tf-modal-close-size);
	position: absolute;
	right: var(--jx-tf-modal-close-right);
	top: var(--jx-tf-modal-close-top);
	line-height: 1;
	width: var(--jx-tf-modal-close-size);
	height: var(--jx-tf-modal-close-size);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: color var(--jx-tf-pag-transition);
	z-index: 1;
}

.jx-testimonial-modal__close:hover,
.jx-testimonial-modal__close:focus {
	color: #000000;
	text-decoration: none;
}

/* Error Messages */
.jx-testimonial-error {
	background: var(--jx-tf-error-bg);
	color: var(--jx-tf-error-color);
	margin-bottom: 15px;
	padding: var(--jx-tf-error-padding);
	margin-top: 20px;
	border-radius: var(--jx-tf-error-border-radius);
	font-weight: bold;
}

.jx-testimonial-error a {
	color: var(--jx-tf-error-color);
}

.jx-testimonial-form__error {
	color: var(--jx-tf-form-error-color);
	background-color: var(--jx-tf-form-error-bg);
	border-color: var(--jx-tf-form-error-border);
	font-size: var(--jx-tf-char-count-font-size);
	padding: 5px;
	border: 1px dotted;
}

.jx-testimonial-form__success {
	color: var(--jx-tf-success-color);
	background-color: var(--jx-tf-success-bg);
	border-color: var(--jx-tf-success-border);
	font-size: var(--jx-tf-char-count-font-size);
	padding: 5px;
	border: 1px dotted;
}

/* Responsive */
@media only screen and (min-width: 360px) and (max-width: 812px) {
	.jx-testimonial-toggle {
		display: block;
		width: 100%;
	}
	
	.jx-testimonial-form__button {
		width: 100%;
	}
	
	.jx-testimonial-form {
		max-width: 100%;
	}
}

@media screen and (max-width: 768px) {
	.jx-testimonial-modal__content {
		width: 95%;
		padding: 20px;
		margin: 5% auto;
		max-height: 85vh;
	}
	
	.jx-testimonial-block {
		padding: 10px 30px;
	}
	
	.jx-testimonial-block::before {
		font-size: 60px;
		left: 5px;
	}
	
	.jx-testimonial-block::after {
		font-size: 60px;
		right: 5px;
	}
	
	.jx-testimonial-pagination ul li a {
		width: 30px;
		height: 30px;
		font-size: 12px;
		margin: 0 4px;
	}
}

@media screen and (max-width: 600px) {
	.jx-testimonial-modal__content {
		width: 100%;
		padding: 15px;
		margin: 0;
		border-radius: 0;
		max-height: 100vh;
	}
	
	.jx-testimonial-form {
		max-width: 100%;
		padding: 0;
	}
	
	.jx-testimonial-block {
		padding: 10px 20px;
		font-size: 13px;
	}
	
	.jx-testimonial-block::before,
	.jx-testimonial-block::after {
		font-size: 50px;
	}
	
	.jx-testimonial-author {
		font-size: 12px;
	}
	
	.jx-testimonial-pagination {
		flex-wrap: wrap;
	}
	
	.jx-testimonial-pagination ul li a {
		width: 28px;
		height: 28px;
		font-size: 11px;
		margin: 0 3px;
	}
}