/* ==========================================================================
   Fixer FAQ Pro — Frontend Styles
   ========================================================================== */

.fxfaq-wrapper {
	--fxfaq-primary: #FF6A00;
	--fxfaq-bg: #FFFFFF;
	--fxfaq-q-bg: #F7F7F8;
	--fxfaq-q-text: #111111;
	--fxfaq-a-text: #444444;
	--fxfaq-border: #E5E5E5;
	--fxfaq-radius: 12px;
	--fxfaq-padding: 18px;
	--fxfaq-gap: 12px;
	--fxfaq-border-width: 1px;
	--fxfaq-q-size: 16px;
	--fxfaq-a-size: 14px;
	--fxfaq-line-height: 1.7;
	--fxfaq-letter-spacing: 0px;
	--fxfaq-icon-size: 16px;
	--fxfaq-shadow-blur: 10px;
	--fxfaq-font: inherit;
	--fxfaq-speed: .3s;

	font-family: var(--fxfaq-font);
	direction: rtl;
	text-align: right;
	max-width: 100%;
	box-sizing: border-box;
}
.fxfaq-wrapper *, .fxfaq-wrapper *::before, .fxfaq-wrapper *::after { box-sizing: border-box; }

.fxfaq-search { position: relative; margin-bottom: 16px; }
.fxfaq-search-input {
	width: 100%; padding: 12px 40px 12px 16px; border-radius: var(--fxfaq-radius); border: 1px solid var(--fxfaq-border);
	font-size: 14px; background: var(--fxfaq-bg); color: var(--fxfaq-q-text);
}
.fxfaq-search-icon { position: absolute; inset-inline-end: 14px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; border: 2px solid var(--fxfaq-a-text); border-radius: 50%; opacity: .5; }

.fxfaq-list { display: grid; grid-template-columns: repeat(var(--fxfaq-columns, 1), 1fr); gap: var(--fxfaq-gap); }

.fxfaq-item {
	background: var(--fxfaq-bg);
	border: var(--fxfaq-border-width) solid var(--fxfaq-border);
	border-radius: var(--fxfaq-radius);
	overflow: hidden;
	transition: box-shadow var(--fxfaq-speed) ease, border-color var(--fxfaq-speed) ease;
}
.fxfaq-item.is-open { border-color: var(--fxfaq-primary); }

.fxfaq-question {
	width: 100%; display: flex; align-items: center; gap: 12px; text-align: right;
	background: var(--fxfaq-q-bg); border: none; cursor: pointer;
	padding: var(--fxfaq-padding); font-size: var(--fxfaq-q-size); font-weight: 700; color: var(--fxfaq-q-text);
	line-height: var(--fxfaq-line-height); letter-spacing: var(--fxfaq-letter-spacing);
	transition: background var(--fxfaq-speed) ease;
}
.fxfaq-question:hover { background: color-mix(in srgb, var(--fxfaq-primary) 8%, var(--fxfaq-q-bg)); }
.fxfaq-question:focus-visible { outline: 2px solid var(--fxfaq-primary); outline-offset: -2px; }

.fxfaq-question-text { flex: 1; }
.fxfaq-icon { flex-shrink: 0; }

.fxfaq-toggle-icon { width: var(--fxfaq-icon-size); height: var(--fxfaq-icon-size); position: relative; flex-shrink: 0; }
.fxfaq-toggle-icon::before, .fxfaq-toggle-icon::after {
	content: ''; position: absolute; background: var(--fxfaq-primary); top: 50%; left: 0; width: 100%; height: 2px;
	transform: translateY(-50%); transition: transform var(--fxfaq-speed) ease;
}
.fxfaq-toggle-icon::after { transform: translateY(-50%) rotate(90deg); }
.fxfaq-item.is-open .fxfaq-toggle-icon::after { transform: translateY(-50%) rotate(0); }

.fxfaq-answer { overflow: hidden; }
.fxfaq-answer-inner {
	padding: 0 var(--fxfaq-padding) var(--fxfaq-padding);
	font-size: var(--fxfaq-a-size); color: var(--fxfaq-a-text); line-height: var(--fxfaq-line-height);
}
.fxfaq-answer-inner p:first-child { margin-top: 0; }
.fxfaq-answer-inner p:last-child { margin-bottom: 0; }

.fxfaq-load-more {
	display: block; margin: 18px auto 0; padding: 10px 28px; border-radius: 999px; border: 1px solid var(--fxfaq-border);
	background: var(--fxfaq-bg); color: var(--fxfaq-q-text); cursor: pointer; font-weight: 600;
}
.fxfaq-load-more:hover { border-color: var(--fxfaq-primary); color: var(--fxfaq-primary); }

.fxfaq-empty-search, .fxfaq-frontend-empty { text-align: center; padding: 24px; color: var(--fxfaq-a-text); opacity: .7; }

/* ==========================================================================
   Style presets — each has its own distinct layout, not just recolored.
   ========================================================================== */

/* 1. Classic Accordion */
.fxfaq-style-classic .fxfaq-item { border-radius: 8px; }

/* 2. Modern Minimal — no card backgrounds, thin divider lines only */
.fxfaq-style-modern-minimal .fxfaq-item { border: none; border-bottom: 1px solid var(--fxfaq-border); border-radius: 0; }
.fxfaq-style-modern-minimal .fxfaq-question { background: transparent; padding-inline: 4px; }
.fxfaq-style-modern-minimal .fxfaq-answer-inner { padding-inline: 4px; }

/* 3. Glassmorphism */
.fxfaq-style-glass .fxfaq-wrapper, .fxfaq-style-glass { padding: 20px; border-radius: 20px; background: linear-gradient(135deg, rgba(255,106,0,.12), rgba(0,0,0,.04)); }
.fxfaq-style-glass .fxfaq-item { background: rgba(255,255,255,.35); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,.4); }
.fxfaq-style-glass .fxfaq-question { background: transparent; }

/* 4. Card — separated cards with visible shadow */
.fxfaq-style-card .fxfaq-list { gap: calc(var(--fxfaq-gap) + 6px); }
.fxfaq-style-card .fxfaq-item { box-shadow: 0 4px var(--fxfaq-shadow-blur) rgba(0,0,0,.08); border: none; }

/* 5. Two Column */
.fxfaq-style-two-column .fxfaq-list { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 640px) { .fxfaq-style-two-column .fxfaq-list { grid-template-columns: 1fr; } }

/* 6. Numbered */
.fxfaq-style-numbered .fxfaq-list { counter-reset: fxfaq-counter; }
.fxfaq-style-numbered .fxfaq-item { counter-increment: fxfaq-counter; position: relative; }
.fxfaq-style-numbered .fxfaq-question { padding-inline-start: calc(var(--fxfaq-padding) + 34px); }
.fxfaq-style-numbered .fxfaq-question::before {
	content: counter(fxfaq-counter); position: absolute; inset-inline-start: var(--fxfaq-padding); top: 50%; transform: translateY(-50%);
	width: 26px; height: 26px; border-radius: 50%; background: var(--fxfaq-primary); color: #fff; font-size: 12px;
	display: flex; align-items: center; justify-content: center; font-weight: 800;
}

/* 7. Icon FAQ — big icon column on the right */
.fxfaq-style-icon-faq .fxfaq-question { padding-inline-start: var(--fxfaq-padding); }
.fxfaq-style-icon-faq .fxfaq-icon { width: 34px; height: 34px; border-radius: 10px; background: color-mix(in srgb, var(--fxfaq-primary) 15%, transparent); display: flex; align-items: center; justify-content: center; font-size: 16px; }

/* 8. Boxed — thick border, sharp corners */
.fxfaq-style-boxed .fxfaq-item { border-width: 2px; border-radius: 4px; border-color: var(--fxfaq-q-text); }
.fxfaq-style-boxed .fxfaq-item.is-open { border-color: var(--fxfaq-primary); }

/* 9. Gradient */
.fxfaq-style-gradient .fxfaq-item { border: none; }
.fxfaq-style-gradient .fxfaq-question { background: linear-gradient(120deg, var(--fxfaq-primary), color-mix(in srgb, var(--fxfaq-primary) 40%, #111)); color: #fff; }
.fxfaq-style-gradient .fxfaq-toggle-icon::before, .fxfaq-style-gradient .fxfaq-toggle-icon::after { background: #fff; }

/* 10. Dark */
.fxfaq-style-dark { --fxfaq-bg: #17181C; --fxfaq-q-bg: #1F2024; --fxfaq-q-text: #F2F2F3; --fxfaq-a-text: #C3C4C8; --fxfaq-border: #2C2D33; }

/* 11. Timeline — vertical line with dots */
.fxfaq-style-timeline .fxfaq-list { position: relative; padding-inline-start: 28px; }
.fxfaq-style-timeline .fxfaq-list::before { content: ''; position: absolute; inset-inline-start: 9px; top: 6px; bottom: 6px; width: 2px; background: var(--fxfaq-border); }
.fxfaq-style-timeline .fxfaq-item { position: relative; border: none; background: transparent; }
.fxfaq-style-timeline .fxfaq-item::before { content: ''; position: absolute; inset-inline-start: -28px; top: 20px; width: 10px; height: 10px; border-radius: 50%; background: var(--fxfaq-primary); }
.fxfaq-style-timeline .fxfaq-question { background: var(--fxfaq-q-bg); }

/* 12. WooCommerce Product FAQ — compact, tab-friendly */
.fxfaq-style-woo-product .fxfaq-question { padding: 14px 16px; font-size: 14px; }
.fxfaq-style-woo-product .fxfaq-answer-inner { padding: 0 16px 14px; font-size: 13px; }
.fxfaq-woo-product-faq { margin-top: 24px; }

/* ==========================================================================
   Dark mode (site theme aware, independent of the "Dark" style preset)
   ========================================================================== */
@media (prefers-color-scheme: dark) {
	.fxfaq-wrapper:not([data-force-light]) {
		--fxfaq-bg: #17181C; --fxfaq-q-bg: #1F2024; --fxfaq-q-text: #F2F2F3; --fxfaq-a-text: #C3C4C8; --fxfaq-border: #2C2D33;
	}
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 782px) {
	.fxfaq-wrapper { --fxfaq-padding: 14px; --fxfaq-q-size: 15px; --fxfaq-a-size: 13.5px; }
	.fxfaq-style-two-column .fxfaq-list,
	.fxfaq-list { grid-template-columns: 1fr !important; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	.fxfaq-wrapper * { transition: none !important; animation: none !important; }
}