/**
 * FAQ Tabs Accordion Widget Styles
 *
 * Tabbed FAQ sections with accordion functionality
 * Features responsive tab grid and search filtering
 *
 * @package DrYazdani
 * @since 1.0.0
 */

/* =============================
   Section Container
   ============================= */
.dryazdani-faq-tabs {
	padding-block: var(--dryazdani-space-8, 2rem) var(--dryazdani-space-12, 3rem);
	background-color: var(--dryazdani-bg-white, #FFFFFF);
}

@media (min-width: 640px) {
	.dryazdani-faq-tabs {
		padding-block: var(--dryazdani-space-12, 3rem);
	}
}

.dryazdani-faq-tabs__container {
	max-width: 1200px;
	margin-inline: auto;
	padding-inline: var(--dryazdani-space-4, 1rem);
}

@media (min-width: 640px) {
	.dryazdani-faq-tabs__container {
		padding-inline: var(--dryazdani-space-6, 1.5rem);
	}
}

@media (min-width: 1024px) {
	.dryazdani-faq-tabs__container {
		padding-inline: var(--dryazdani-space-12, 3rem);
	}
}

/* =============================
   Tab Navigation
   ============================= */
.dryazdani-faq-tabs__nav {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--dryazdani-space-2, 0.5rem);
	margin-block-end: var(--dryazdani-space-8, 2rem);
	width: 100%;
	background: rgb(245, 245, 245);
    padding: 0.35rem;
    border-radius: 6px;
}

@media (min-width: 768px) {
	.dryazdani-faq-tabs__nav {
		grid-template-columns: repeat(5, 1fr);
		margin-block-end: var(--dryazdani-space-12, 3rem);
	}
}

/* =============================
   Tab Buttons
   ============================= */
.dryazdani-faq-tabs__tab-button {
	padding: var(--dryazdani-space-2, 0.5rem) var(--dryazdani-space-3, 0.75rem);
	font-size: 0.75rem;
	font-weight: var(--dryazdani-font-medium, 500);
	color: var(--dryazdani-text-body, #717171);
	background-color: var(--dryazdani-bg-white, #FFFFFF);
	border: 1px solid rgba(44, 44, 44, 0.2);
	cursor: pointer;
	transition: all 0.2s ease;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	box-shadow: none !important;
}

@media (min-width: 640px) {
	.dryazdani-faq-tabs__tab-button {
		padding: var(--dryazdani-space-3, 0.75rem);
		font-size: 0.875rem;
	}
}

@media (min-width: 768px) {
	.dryazdani-faq-tabs__tab-button {
		font-size: 1rem;
	}
}

/* Hover state */
.dryazdani-faq-tabs__tab-button:hover {
	color: var(--dryazdani-text-primary, #2C2C2C);
	border-color: var(--dryazdani-primary, #D4AF37);
}

/* Active state */
.dryazdani-faq-tabs__tab-button.active {
	color: var(--dryazdani-text-primary, #2C2C2C);
	background-color: var(--dryazdani-bg-light, #FAFAFA);
	border-color: var(--dryazdani-primary, #D4AF37);
	font-weight: var(--dryazdani-font-semibold, 600);
}

/* Focus state */
.dryazdani-faq-tabs__tab-button:focus {
	outline: 0;
	outline-offset: 2px;
}

/* =============================
   Tab Content/Panels
   ============================= */
.dryazdani-faq-tabs__content {
	position: relative;
}

.dryazdani-faq-tabs__panel {
	display: none;
}

.dryazdani-faq-tabs__panel.active {
	display: block;
	animation: fadeIn 0.3s ease-in-out;
}

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

/* =============================
   Accordion Container
   ============================= */
.dryazdani-faq-tabs__accordion {
	display: flex;
	flex-direction: column;
	gap: var(--dryazdani-space-4, 1rem);
}

/* =============================
   Accordion Items
   ============================= */
.dryazdani-faq-tabs__accordion-item {
	background-color: var(--dryazdani-bg-light, #FAFAFA);
	overflow: hidden;
	transition: opacity 0.2s ease, max-height 0.2s ease;
}

/* Hidden state (for search filtering) */
.dryazdani-faq-tabs__accordion-item.hidden {
	display: none;
}

/* =============================
   Accordion Trigger (Question Button)
   ============================= */
.dryazdani-faq-tabs__trigger {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--dryazdani-space-4, 1rem);
	padding: var(--dryazdani-space-4, 1rem) var(--dryazdani-space-8, 2rem);
	background: none;
	border: none;
	cursor: pointer;
	text-align: start;
	box-shadow: none !important;
	transition: color 0.2s ease;
}

.dryazdani-faq-tabs__trigger:hover,
.dryazdani-faq-tabs__trigger:focus {
	background-color: rgba(212, 175, 55, 0.05);
}

.dryazdani-faq-tabs__trigger:focus {
	outline: 0;
	outline-offset: -2px;
}

/* =============================
   Question Text
   ============================= */
.dryazdani-faq-tabs__question {
	flex: 1;
	font-size: 1rem;
	font-weight: var(--dryazdani-font-medium, 500);
	font-family: var(--dryazdani-font-heading);
	color: var(--dryazdani-text-primary, #2C2C2C);
	line-height: var(--dryazdani-leading-relaxed, 1.6);
	transition: color 0.2s ease;
}

@media (min-width: 640px) {
	.dryazdani-faq-tabs__question {
		font-size: 1.125rem;
	}
}

.dryazdani-faq-tabs__trigger:hover .dryazdani-faq-tabs__question {
	color: var(--dryazdani-primary, #D4AF37);
	text-decoration: underline !important;
}

/* =============================
   Chevron Icon
   ============================= */
.dryazdani-faq-tabs__icon {
	flex-shrink: 0;
	width: 1.25rem;
	height: 1.25rem;
	color: var(--dryazdani-text-body, #717171);
	transition: transform 0.3s ease, color 0.2s ease;
}

.dryazdani-faq-tabs__icon svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* Rotate icon when open */
.dryazdani-faq-tabs__accordion-item.is-open .dryazdani-faq-tabs__icon {
	transform: rotate(180deg);
	color: var(--dryazdani-primary, #D4AF37);
}

/* =============================
   Answer Wrapper (Collapsible Container)
   ============================= */
.dryazdani-faq-tabs__answer-wrapper {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.3s ease, padding 0.3s ease;
}

.dryazdani-faq-tabs__accordion-item.is-open .dryazdani-faq-tabs__answer-wrapper {
	max-height: 1000px;
	padding-block: var(--dryazdani-space-4, 1rem);
}

.dryazdani-faq-tabs__answer {
	padding-inline: var(--dryazdani-space-8, 2rem);
	font-size: 0.938rem;
	line-height: var(--dryazdani-leading-relaxed, 1.75);
	color: var(--dryazdani-text-body, #717171);
}

.dryazdani-faq-tabs__answer p {
	margin: 0 !important;
}

@media (min-width: 640px) {
	.dryazdani-faq-tabs__answer {
		font-size: 1rem;
	}
}

/* =============================
   Empty State
   ============================= */
.dryazdani-faq-tabs__empty {
	padding: var(--dryazdani-space-12, 3rem);
	text-align: center;
	color: var(--dryazdani-text-muted, #999999);
	font-style: italic;
}

/* =============================
   No Results Message
   ============================= */
.dryazdani-faq-tabs__no-results {
	padding: var(--dryazdani-space-12, 3rem);
	text-align: center;
	color: var(--dryazdani-text-body, #717171);
}

.dryazdani-faq-tabs__no-results.hidden {
	display: none;
}

.dryazdani-faq-tabs__no-results p {
	margin: 0;
	font-size: 1.125rem;
}

/* =============================
   RTL Adjustments
   ============================= */
[dir="rtl"] .dryazdani-faq-tabs__icon {
	/* Icon automatically rotates with transform */
}

/* =============================
   Accessibility
   ============================= */
/* Focus-visible for better keyboard navigation */
.dryazdani-faq-tabs__tab-button:focus-visible {
	outline: 0;
	outline-offset: 2px;
}

.dryazdani-faq-tabs__trigger:focus-visible {
	outline: 0;
	outline-offset: -2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
	.dryazdani-faq-tabs__tab-button {
		border-width: 2px;
	}
	
	.dryazdani-faq-tabs__accordion-item {
		border: 2px solid rgba(44, 44, 44, 0.2);
	}
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
	.dryazdani-faq-tabs__tab-button,
	.dryazdani-faq-tabs__trigger,
	.dryazdani-faq-tabs__icon,
	.dryazdani-faq-tabs__answer-wrapper,
	.dryazdani-faq-tabs__accordion-item {
		transition: none;
	}
	
	.dryazdani-faq-tabs__panel.active {
		animation: none;
	}
	
	@keyframes fadeIn {
		from, to {
			opacity: 1;
			transform: translateY(0);
		}
	}
}

/* =============================
   Print Styles
   ============================= */
@media print {
	.dryazdani-faq-tabs__nav {
		display: none;
	}
	
	.dryazdani-faq-tabs__panel {
		display: block !important;
	}
	
	.dryazdani-faq-tabs__accordion-item {
		break-inside: avoid;
	}
	
	.dryazdani-faq-tabs__answer-wrapper {
		max-height: none !important;
		overflow: visible !important;
	}
}