/**
 * AMA FAQ — accordion + rule-based chatbot.
 *
 * @package AMAIndiaTwentySix
 */

:root {
	--ama-faq-accent: var(--ama-navy, #1a2744);
	--ama-faq-maroon: var(--ama-maroon, #8a3a2a);
	--ama-faq-border: var(--ama-border, #d6cfc4);
	--ama-faq-muted:  var(--ama-muted, #534c45);
	--ama-faq-cream:  var(--ama-cream, #f5f0e8);
}

/* ── Accordion ───────────────────────────────────────────────────────────── */
/*
 * Every value an editor can change is a custom property on .ama-faq, so the
 * Elementor controls (trait-ama-faq-accordion-style.php) each write ONE
 * declaration on the container instead of competing rules. Defaults live here.
 *
 * Was a bare list separated by bottom rules, with 4px of horizontal padding —
 * text ran into the container edges and open answers had no visible boundary.
 * Now each item is a bordered card with real padding on both the question and
 * the answer.
 */
.ama-faq {
	--ama-faq-accent: var(--ama-navy, #1a2744);

	--ama-faq-pad-x: 20px;
	--ama-faq-pad-y: 16px;
	--ama-faq-gap: 10px;
	--ama-faq-radius: 6px;
	--ama-faq-border-w: 1px;

	--ama-faq-q-bg: #fff;
	--ama-faq-q-color: var(--ama-faq-accent);
	--ama-faq-q-bg-open: var(--ama-faq-cream);
	--ama-faq-q-color-open: var(--ama-faq-q-color);

	--ama-faq-a-bg: #fff;
	--ama-faq-a-color: var(--ama-faq-muted);
}

.ama-faq__item {
	border: var(--ama-faq-border-w) solid var(--ama-faq-border);
	border-radius: var(--ama-faq-radius);
	margin-bottom: var(--ama-faq-gap);
	/* Clips the question background into the rounded corners; without it the
	   square fill shows through at each corner. */
	overflow: hidden;
}
.ama-faq__item:last-child { margin-bottom: 0; }
.ama-faq__item[hidden] { display: none; }

.ama-faq__q { margin: 0; }
.ama-faq .ama-faq__trigger {
	display: flex; align-items: center; justify-content: space-between; gap: 16px;
	width: 100%; text-align: left; border: none; cursor: pointer;
	padding: var(--ama-faq-pad-y) var(--ama-faq-pad-x);
	background: var(--ama-faq-q-bg);
	color: var(--ama-faq-q-color);
	font: inherit; font-size: 1.05rem; font-weight: 700; line-height: 1.35;
	transition: background .15s, color .15s;
}
/* Both states carry the .ama-faq prefix (0-2-0 / 0-3-0). These are <button>s
   inside an Elementor container, where parent-theme rules such as
   `.elementor-widget-container button` (0-1-1) outrank a bare single class —
   which is exactly why the closed background silently did nothing while the
   open one worked. */
.ama-faq .ama-faq__trigger[aria-expanded="true"] {
	background: var(--ama-faq-q-bg-open);
	color: var(--ama-faq-q-color-open);
}
.ama-faq__trigger:focus-visible { outline: 2px solid var(--ama-faq-maroon); outline-offset: -2px; }

.ama-faq__chev {
	flex-shrink: 0; width: 12px; height: 12px; border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .2s ease;
	margin-top: -4px;
}
.ama-faq__trigger[aria-expanded="true"] .ama-faq__chev { transform: rotate(-135deg); margin-top: 4px; }

.ama-faq__a {
	padding: var(--ama-faq-pad-y) var(--ama-faq-pad-x);
	background: var(--ama-faq-a-bg);
	color: var(--ama-faq-a-color);
	line-height: 1.75;
	/* Separates answer from question even when both share a background. */
	border-top: var(--ama-faq-border-w) solid var(--ama-faq-border);
}
.ama-faq__a[hidden] { display: none; }
.ama-faq__a > :first-child { margin-top: 0; }
.ama-faq__a > :last-child { margin-bottom: 0; }
.ama-faq__a a { color: var(--ama-faq-maroon); }

@media (max-width: 600px) {
	.ama-faq { --ama-faq-pad-x: 14px; --ama-faq-pad-y: 13px; }
	.ama-faq__trigger { font-size: 0.9375rem; }
}

/* ── Chatbot ─────────────────────────────────────────────────────────────── */
.ama-chatbot { position: fixed; right: 20px; bottom: 20px; z-index: 9998; font-family: var(--font-sans, "Plus Jakarta Sans", system-ui, sans-serif); }
.ama-chatbot[hidden] { display: none; }

.ama-chatbot__launch {
	width: 56px; height: 56px; border-radius: 50%; border: none; cursor: pointer;
	background: var(--ama-faq-accent); color: #fff;
	display: flex; align-items: center; justify-content: center;
	box-shadow: 0 6px 20px rgba(0, 0, 0, .22); transition: transform .15s ease, background .15s ease;
}
.ama-chatbot__launch:hover { background: var(--ama-faq-maroon); transform: translateY(-2px); }
.ama-chatbot.is-open .ama-chatbot__launch { transform: scale(.9); }

.ama-chatbot__panel {
	position: absolute; right: 0; bottom: 70px;
	width: 340px; max-width: calc(100vw - 32px); height: 460px; max-height: calc(100vh - 120px);
	display: flex; flex-direction: column; overflow: hidden;
	background: #fff; border: 1px solid var(--ama-faq-border); border-radius: 14px;
	box-shadow: 0 14px 40px rgba(0, 0, 0, .22);
}
.ama-chatbot__panel[hidden] { display: none; }

.ama-chatbot__head {
	display: flex; align-items: center; justify-content: space-between;
	padding: 14px 16px; background: var(--ama-faq-accent); color: #fff;
}
.ama-chatbot__title { font-weight: 700; font-size: 0.95rem; }
.ama-chatbot__close { background: none; border: none; color: #fff; font-size: 1.5rem; line-height: 1; cursor: pointer; padding: 0 4px; }

.ama-chatbot__log { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 8px; background: #faf8f5; }
.ama-chatbot__msg { max-width: 85%; padding: 9px 13px; border-radius: 12px; font-size: 0.875rem; line-height: 1.5; white-space: pre-line; }
.ama-chatbot__msg--bot  { align-self: flex-start; background: #fff; border: 1px solid var(--ama-faq-border); color: #1e2433; border-bottom-left-radius: 4px; }
.ama-chatbot__msg--user { align-self: flex-end; background: var(--ama-faq-accent); color: #fff; border-bottom-right-radius: 4px; }

.ama-chatbot__chips { display: flex; flex-wrap: wrap; gap: 6px; max-width: 100%; }
/*
 * Chips are <button>, so the Elementor Kit's `.elementor-kit-25 button` rule
 * (0,1,1) outranks a single class and was forcing the global
 * text-transform: uppercase onto them. The class is repeated to reach (0,2,0)
 * so this whole block wins without !important.
 */
.ama-chatbot__chip.ama-chatbot__chip {
	background: #fff; border: 1px solid var(--ama-faq-accent); color: var(--ama-faq-accent);
	border-radius: 14px; padding: 6px 12px; font-size: 0.8125rem; font-weight: 600; cursor: pointer;
	text-align: left; line-height: 1.3; text-transform: none;
	max-width: 100%; box-sizing: border-box;
	white-space: normal; overflow-wrap: anywhere; word-break: break-word;
}
.ama-chatbot__chip.ama-chatbot__chip:hover { background: var(--ama-faq-accent); color: #fff; }

/* Answer placeholder while the body is fetched. */
.ama-chatbot__msg.is-loading { opacity: .65; font-style: italic; }

/* Related site content: type chip + title, stacked as tappable rows. */
.ama-chatbot__results { display: flex; flex-direction: column; gap: 6px; margin: 2px 0 4px; }
a.ama-chatbot__result {
	display: flex; align-items: baseline; gap: 8px;
	padding: 8px 12px; border: 1px solid var(--ama-faq-border); border-radius: 10px;
	background: #fff; text-decoration: none; color: var(--ama-faq-accent);
}
a.ama-chatbot__result:hover,
a.ama-chatbot__result:focus-visible { border-color: var(--ama-faq-accent); background: #fff; }
a.ama-chatbot__result:focus-visible { outline: 3px solid var(--ama-faq-accent); outline-offset: 2px; }
.ama-chatbot__result-type {
	flex: 0 0 auto; font-size: 0.75rem; font-weight: 700; letter-spacing: .06em;
	text-transform: uppercase; color: #6b6459;
	background: rgba(107, 100, 89, .12); border-radius: 999px; padding: 2px 7px;
}
.ama-chatbot__result-title {
	font-size: 0.8125rem; font-weight: 600; line-height: 1.35;
	overflow-wrap: anywhere; color: var(--ama-faq-accent);
}

/* "Talk to a human" handoff — contact link + phone/email list. */
.ama-chatbot__handoff { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 4px; }
/* element+class so it beats the Elementor Kit's `a { color:<blue> }` inline rule. */
a.ama-chatbot__contact-btn {
	background: var(--ama-faq-accent); color: #fff; border-radius: 8px;
	padding: 7px 14px; font-size: 0.8125rem; font-weight: 700; text-decoration: none;
}
a.ama-chatbot__contact-btn:hover,
a.ama-chatbot__contact-btn:focus { color: #fff; filter: brightness(0.92); }

/* Search-more is the secondary action → outlined, not filled. */
a.ama-chatbot__contact-btn.ama-chatbot__search-btn {
	background: #fff; color: var(--ama-faq-accent);
	border: 1px solid var(--ama-faq-accent);
}
a.ama-chatbot__contact-btn.ama-chatbot__search-btn:hover,
a.ama-chatbot__contact-btn.ama-chatbot__search-btn:focus {
	background: var(--ama-faq-accent); color: #fff; filter: none;
}
.ama-chatbot__contact-tel {
	display: inline-flex; align-items: center; background: #fff;
	border: 1px solid var(--ama-faq-border); border-radius: 8px;
	padding: 7px 12px; font-size: 0.8125rem; font-weight: 600;
	color: var(--ama-faq-accent); text-decoration: none;
}
.ama-chatbot__contact-tel:hover { background: var(--ama-faq-accent); color: #fff; border-color: var(--ama-faq-accent); }

.ama-chatbot__form { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--ama-faq-border); background: #fff; }
.ama-chatbot__input {
	flex: 1; padding: 9px 12px; border: 1px solid var(--ama-faq-border); border-radius: 8px;
	font: inherit; font-size: 0.875rem; color: #1e2433; background: #fff;
}
.ama-chatbot__input:focus { outline: 2px solid var(--ama-faq-accent); outline-offset: 1px; border-color: var(--ama-faq-accent); }

/* Visible keyboard focus for every chatbot control (WCAG 2.4.7). */
.ama-chatbot__launch:focus-visible,
.ama-chatbot__close:focus-visible,
.ama-chatbot__send:focus-visible,
.ama-chatbot__chip:focus-visible,
.ama-chatbot__contact-btn:focus-visible,
.ama-chatbot__contact-tel:focus-visible,
.ama-faq__trigger:focus-visible {
	outline: 3px solid var(--ama-faq-accent);
	outline-offset: 2px;
}
/* On the accent-filled controls, a light halo reads better than a same-colour ring. */
.ama-chatbot__launch:focus-visible,
.ama-chatbot__close:focus-visible,
.ama-chatbot__send:focus-visible,
.ama-chatbot__contact-btn:focus-visible {
	outline-color: #fff;
	box-shadow: 0 0 0 5px var(--ama-faq-accent);
}
/* Same Elementor Kit button rule, same repeated-class fix (see chips above). */
.ama-chatbot__send.ama-chatbot__send {
	background: var(--ama-faq-accent); color: #fff; border: none; border-radius: 8px;
	padding: 0 14px; font: inherit; font-weight: 700; font-size: 0.8125rem; cursor: pointer;
	text-transform: none;
}
.ama-chatbot__send.ama-chatbot__send:hover { background: var(--ama-faq-maroon); }

@media (max-width: 480px) {
	.ama-chatbot { right: 14px; bottom: 14px; }
	.ama-chatbot__panel { width: calc(100vw - 28px); }
}

/* ── Accordion category filter ──────────────────────────────────────────── */

.ama-faq__filters {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 16px;
	justify-content: var(--ama-faq-pill-justify, flex-start);
}
/* Pills grow to share the row, so one long option no longer leaves white space
   at the end of the line. flex-basis stays auto so each pill still starts from
   its own text width — they expand proportionally rather than all becoming
   equal-width, which keeps short labels from looking oversized. */
.ama-faq__pill { flex: var(--ama-faq-pill-grow, 1) 1 auto; }
.ama-faq__pill {
	text-align: center;
	min-height: 44px;                    /* WCAG 2.5.8 touch target */
	padding: 8px 16px;
	border: 2px solid var(--ama-faq-pill-accent, var(--ama-faq-accent));
	border-radius: 4px;
	background: #fff;
	color: var(--ama-text, #1f2430);
	font: inherit;
	font-size: 0.8125rem;
	font-weight: 700;
	cursor: pointer;
	transition: background .12s, color .12s;
}
/* Repeated class (0-2-0) for the same reason the event pills need it: these are
   <button>s inside an Elementor container, where container-scoped parent-theme
   rules like `.elementor-widget-container button:hover` (0-2-1) outrank a single
   class and repaint them. */
.ama-faq__pill.ama-faq__pill--active {
	background: var(--ama-faq-pill-accent, var(--ama-faq-accent));
	color: #fff;
}
.ama-faq__pill:hover,
.ama-faq__pill:focus-visible {
	background: var(--ama-cream, #f5f0e8);
	color: var(--ama-text, #1f2430);
}
.ama-faq__pill.ama-faq__pill--active:hover,
.ama-faq__pill.ama-faq__pill--active:focus-visible {
	background: var(--ama-faq-pill-accent, var(--ama-faq-accent));
	color: #fff;
}
.ama-faq__pill:focus-visible { outline: 2px solid var(--ama-maroon, #7a2e2e); outline-offset: 2px; }

@media (max-width: 600px) {
	.ama-faq__pill { padding: 8px 12px; font-size: 0.75rem; }
}