/**
 * DreamFast Product Answers — frontend styles.
 *
 * Phase 6 design polish. Three theme-friendly styles (Clean / Card / Minimal),
 * responsive and mobile-first, RTL-ready via CSS logical properties, and
 * accessible (visible focus, real buttons). Lightweight and dependency-free.
 *
 * Honors the --dfpa-accent custom property (set inline only when an accent
 * color is configured) and the open/closed state managed by the accordion
 * script (the [hidden] attribute on panels, aria-expanded on buttons).
 */

/* -------------------------------------------------------------------------
 * Base + design tokens
 * ---------------------------------------------------------------------- */
.dfpa-section {
	--dfpa-radius: 14px;
	--dfpa-duration: 180ms;
	--dfpa-border: rgba( 0, 0, 0, 0.1 );
	--dfpa-hover: rgba( 0, 0, 0, 0.03 );
	--dfpa-surface: #fff;

	margin-block: 32px;
	color: inherit;
	font-family: inherit;
}

.dfpa-section,
.dfpa-section *,
.dfpa-section *::before,
.dfpa-section *::after {
	box-sizing: border-box;
}

.dfpa-title {
	margin: 0 0 1rem;
	font-size: 1.5rem;
	line-height: 1.25;
	overflow-wrap: anywhere;
}

.dfpa-accordion {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* -------------------------------------------------------------------------
 * Item + question button
 * ---------------------------------------------------------------------- */
.dfpa-item {
	border: 1px solid var( --dfpa-border );
	border-radius: var( --dfpa-radius );
	overflow: hidden;
}

.dfpa-item-question {
	margin: 0;
	padding: 0;
	font-size: inherit;
	line-height: inherit;
}

.dfpa-question {
	display: flex;
	align-items: center;
	gap: 12px;
	inline-size: 100%;
	width: 100%; /* fallback for engines without logical sizing */
	margin: 0;
	padding: 14px 16px;
	-webkit-appearance: none;
	appearance: none;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0;
	box-shadow: none !important;
	color: inherit !important;
	font: inherit;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: normal;
	text-align: start;
	text-decoration: none !important;
	text-transform: none;
	text-shadow: none;
	cursor: pointer;
	opacity: 1;
	transition: background-color var( --dfpa-duration ) ease;
}

.dfpa-question__text {
	flex: 1 1 auto;
	min-inline-size: 0;
	overflow-wrap: anywhere;
}

/*
 * Isolate the accordion button from theme / WooCommerce <button> styles that
 * otherwise leak in: filled backgrounds, white-on-hover text, focus glows, and
 * faded opacity. !important is intentional — a self-contained widget needs to
 * win against high-specificity theme button rules without a specificity war.
 */
.dfpa-question:hover,
.dfpa-question:focus,
.dfpa-question:active,
.dfpa-question:focus-visible {
	color: inherit !important;
	box-shadow: none !important;
	text-decoration: none !important;
	text-shadow: none !important;
	opacity: 1 !important;
	filter: none !important;
	transform: none !important;
}

/* Only a subtle hover tint; every other state stays flat (base is transparent). */
.dfpa-question:hover {
	background-color: var( --dfpa-hover ) !important;
}

/* Mouse focus leaves no strong state; keyboard focus gets a subtle accent ring. */
.dfpa-question:focus {
	outline: none;
}

.dfpa-question:focus-visible {
	outline: 2px solid var( --dfpa-accent, currentColor ) !important;
	outline-offset: -2px;
}

/* -------------------------------------------------------------------------
 * Chevron indicator (CSS only, RTL-symmetric)
 * ---------------------------------------------------------------------- */
.dfpa-icon {
	flex: 0 0 auto;
	inline-size: 0.7em;
	block-size: 0.7em;
	color: var( --dfpa-accent, currentColor );
	opacity: 0.65;
	transition: opacity var( --dfpa-duration ) ease;
}

.dfpa-icon::before {
	content: "";
	display: block;
	inline-size: 0.5em;
	block-size: 0.5em;
	margin: 0.05em auto 0;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate( 45deg );
	transition: transform var( --dfpa-duration ) ease;
}

.dfpa-question:hover .dfpa-icon {
	opacity: 1;
}

.dfpa-question[aria-expanded="true"] .dfpa-icon::before {
	transform: rotate( -135deg );
}

/* -------------------------------------------------------------------------
 * Panel + answer
 * ---------------------------------------------------------------------- */
.dfpa-panel {
	padding-inline: 16px;
	padding-block-end: 14px;
}

.dfpa-panel[hidden] {
	display: none;
}

.dfpa-panel-inner {
	margin: 0;
	font-size: 0.9375rem; /* ~15px */
	line-height: 1.6;
	overflow-wrap: anywhere;
}

/* Subtle reveal when a panel opens (enhanced state only). */
.dfpa-has-js .dfpa-panel:not( [hidden] ) .dfpa-panel-inner {
	animation: dfpa-reveal var( --dfpa-duration ) ease;
}

@keyframes dfpa-reveal {
	from {
		opacity: 0;
		transform: translateY( -4px );
	}

	to {
		opacity: 1;
		transform: translateY( 0 );
	}
}

/* -------------------------------------------------------------------------
 * Style: Clean — hairline separators, no boxes, edge-to-edge
 * ---------------------------------------------------------------------- */
.dfpa-style-clean .dfpa-accordion {
	gap: 0;
}

.dfpa-style-clean .dfpa-item {
	border: 0;
	border-block-end: 1px solid var( --dfpa-border );
	border-radius: 0;
}

.dfpa-style-clean .dfpa-item:last-child {
	border-block-end: 0;
}

.dfpa-style-clean .dfpa-question,
.dfpa-style-clean .dfpa-panel {
	padding-inline: 0;
}

/* -------------------------------------------------------------------------
 * Style: Card — bordered cards, radius, soft shadow
 * ---------------------------------------------------------------------- */
.dfpa-style-card .dfpa-accordion {
	gap: 12px;
}

.dfpa-style-card .dfpa-item {
	background: var( --dfpa-surface );
	box-shadow: 0 1px 2px rgba( 0, 0, 0, 0.04 ), 0 2px 8px rgba( 0, 0, 0, 0.06 );
	transition: box-shadow var( --dfpa-duration ) ease;
}

.dfpa-style-card .dfpa-item:hover {
	box-shadow: 0 2px 6px rgba( 0, 0, 0, 0.06 ), 0 6px 18px rgba( 0, 0, 0, 0.08 );
}

.dfpa-style-card .dfpa-question {
	padding: 16px 18px;
}

.dfpa-style-card .dfpa-panel {
	padding-inline: 18px;
	padding-block-end: 16px;
}

/* -------------------------------------------------------------------------
 * Style: Minimal — quiet, airy, no boxes or lines
 * ---------------------------------------------------------------------- */
.dfpa-style-minimal .dfpa-accordion {
	gap: 8px;
}

.dfpa-style-minimal .dfpa-item {
	border: 0;
	border-radius: 0;
}

.dfpa-style-minimal .dfpa-question {
	padding-inline: 0;
	padding-block: 14px;
}

.dfpa-style-minimal .dfpa-panel {
	padding-inline: 0;
	padding-block-end: 18px;
}

.dfpa-style-minimal .dfpa-panel-inner {
	opacity: 0.85;
}

/* -------------------------------------------------------------------------
 * Mobile
 * ---------------------------------------------------------------------- */
@media ( max-width: 600px ) {
	.dfpa-section {
		margin-block: 24px;
	}

	.dfpa-title {
		font-size: 1.25rem;
	}

	.dfpa-question {
		padding: 12px 14px;
	}

	.dfpa-style-card .dfpa-question {
		padding: 14px;
	}

	.dfpa-panel,
	.dfpa-style-card .dfpa-panel {
		padding-inline: 14px;
	}

	.dfpa-style-clean .dfpa-question,
	.dfpa-style-clean .dfpa-panel,
	.dfpa-style-minimal .dfpa-question,
	.dfpa-style-minimal .dfpa-panel {
		padding-inline: 0;
	}
}

/* -------------------------------------------------------------------------
 * Respect reduced-motion preferences
 * ---------------------------------------------------------------------- */
@media ( prefers-reduced-motion: reduce ) {
	.dfpa-section *,
	.dfpa-section *::before {
		animation: none !important;
		transition: none !important;
	}
}