/*
 * Aria Quote — form styles. Uses the saramad theme tokens (with fallbacks) and logical
 * properties, so the same rules serve RTL Persian.
 */

.aq {
	--aq-green: var(--sm-green, #1e4d3a);
	--aq-gold: var(--sm-gold, #c9a96e);
	--aq-line: var(--sm-line, #e3e0d6);
	--aq-muted: var(--sm-muted, #5a5a55);
	--aq-error: #a3381f;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(16rem, 21rem);
	gap: 3rem clamp(2.5rem, 5vw, 5rem);
	align-items: start;
	margin-block: 0 2rem;
}

/* ---------- Sections ---------- */

.aq-form { min-width: 0; }
.aq-sec { padding-block-end: 2.5rem; margin-block-end: 2.5rem; border-bottom: 1px solid var(--aq-line); }
.aq-sec:last-of-type { margin-block-end: 2rem; }
.aq .aq-sec__h { margin: 0; color: var(--aq-green); font-size: clamp(1.45rem, 2.4vw, 1.85rem); font-weight: 600; line-height: 1.25; }
html[lang^="fa"] .aq .aq-sec__h { font-weight: 700; line-height: 1.6; }
.aq-sec__p { margin: 0.5rem 0 0; color: var(--aq-muted); font-size: 0.98rem; }

.aq-field { min-width: 0; margin: 1.75rem 0 0; padding: 0; border: 0; }
.aq-label { display: block; margin-block-end: 0.6rem; padding: 0; color: var(--sm-ink, #2c2c2c); font-size: 0.95rem; font-weight: 600; }
.aq-label small { color: var(--aq-muted); font-size: 0.85rem; font-weight: 400; }

/* ---------- Variety cards ---------- */

.aq-vars__row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; }
.aq-var {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 0.5rem 0.5rem 1rem;
	border-radius: 14px;
	background: #fff;
	box-shadow: inset 0 0 0 1.5px var(--aq-line);
	text-align: center;
	cursor: pointer;
	transition: box-shadow 0.15s ease, background-color 0.15s ease;
}
.aq-var:hover { box-shadow: inset 0 0 0 1.5px var(--aq-gold); }
.aq-var img { display: block; width: 100%; max-width: 9rem; aspect-ratio: 1; object-fit: contain; mix-blend-mode: multiply; }
.aq-var__name { color: var(--aq-green); font-size: 1rem; font-weight: 600; line-height: 1.3; }
.aq-var__shape { margin-block-start: 0.15rem; color: var(--aq-muted); font-size: 0.82rem; }

.aq-var:has(input:checked) { background: #f2f5f1; box-shadow: inset 0 0 0 2px var(--aq-green); }
.aq-var:has(input:checked)::after {
	content: "";
	position: absolute;
	top: 0.6rem;
	inset-inline-end: 0.6rem;
	width: 1.4rem;
	height: 1.4rem;
	border-radius: 50%;
	background: var(--aq-green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10'%3E%3Cpath d='M1 5l3.5 3.5L11 1.5' fill='none' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E") no-repeat center;
}

/* Inputs stay in the accessibility tree and keyboard order; the card shows focus. */
.aq-var input, .aq-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.aq-var:has(input:focus-visible), .aq-chip:has(input:focus-visible) span { outline: 3px solid var(--aq-gold); outline-offset: 3px; }

/* ---------- Chips ---------- */

.aq-chips__row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.aq-chip { position: relative; cursor: pointer; }
.aq-chip span {
	display: inline-block;
	padding: 0.6rem 1.15rem;
	border-radius: 999px;
	background: #fff;
	box-shadow: inset 0 0 0 1.5px var(--aq-line);
	color: var(--sm-ink, #2c2c2c);
	font-size: 0.95rem;
	line-height: 1.3;
	transition: box-shadow 0.15s ease, background-color 0.15s ease;
}
.aq-chip:hover span { box-shadow: inset 0 0 0 1.5px var(--aq-gold); }
.aq-chip input:checked + span { background: var(--aq-green); box-shadow: none; color: #fff; }

/* ---------- Text fields ---------- */

.aq-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.25rem; }
.aq-field--wide { grid-column: 1 / -1; }
.aq input[type="text"], .aq input[type="email"], .aq input[type="tel"], .aq textarea {
	display: block;
	width: 100%;
	padding: 0.85rem 1rem;
	border: 0;
	border-radius: 10px;
	background: #fff;
	box-shadow: inset 0 0 0 1.5px var(--aq-line);
	color: var(--sm-ink, #2c2c2c);
	font: inherit;
	font-size: 1rem;
	line-height: 1.5;
	transition: box-shadow 0.15s ease;
}
.aq textarea { min-height: 8.5rem; resize: vertical; }
.aq ::placeholder { color: #9a988f; opacity: 1; }
.aq input:hover, .aq textarea:hover { box-shadow: inset 0 0 0 1.5px #cfcabb; }
.aq input:focus, .aq textarea:focus { outline: none; box-shadow: inset 0 0 0 2px var(--aq-green), 0 0 0 4px rgba(201, 169, 110, 0.35); }
.aq input[type="email"], .aq input[type="tel"] { direction: ltr; }
html[dir="rtl"] .aq input[type="email"], html[dir="rtl"] .aq input[type="tel"] { text-align: right; }

.aq-field.is-error input, .aq-field.is-error textarea { box-shadow: inset 0 0 0 2px var(--aq-error); }
.aq-err { margin: 0.45rem 0 0; color: var(--aq-error); font-size: 0.88rem; }
.aq-top {
	margin: 0 0 2rem;
	padding: 0.9rem 1.1rem;
	border-inline-start: 4px solid var(--aq-error);
	border-radius: 6px;
	background: #fbf1ee;
	color: var(--aq-error);
	font-weight: 600;
}

/* Honeypot: off-screen for people, still in the HTML for bots. */
.aq-hp { position: absolute; inset-inline-start: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Send ---------- */

.aq-send { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.aq-send__btn { min-width: 14rem; min-height: 3.4rem; font-size: 1.05rem; cursor: pointer; }
.aq-send p { flex: 1 1 14rem; margin: 0; color: var(--aq-muted); font-size: 0.9rem; }

/* ---------- Aside ---------- */

.aq-aside {
	position: sticky;
	top: 1.5rem;
	padding: clamp(1.75rem, 3vw, 2.5rem);
	border-radius: 20px;
	background: var(--aq-green);
	color: #fff;
}
.aq .aq-aside h2 { margin: 0 0 1.5rem; color: #fff; font-size: 1.3rem; font-weight: 600; line-height: 1.4; }
.aq-next { margin: 0 0 2rem; padding: 0; list-style: none; counter-reset: aq; }
.aq-next li {
	position: relative;
	padding-block: 0 1.25rem;
	padding-inline-start: 2.75rem;
	color: var(--sm-on-green, #bcd0c3);
	font-size: 0.95rem;
	line-height: 1.6;
	counter-increment: aq;
}
html[lang^="fa"] .aq-next li, html[lang^="zh"] .aq-next li { line-height: 1.9; }
.aq-next li::before {
	content: counter(aq);
	position: absolute;
	top: 0;
	inset-inline-start: 0;
	display: grid;
	place-items: center;
	width: 1.8rem;
	height: 1.8rem;
	border-radius: 50%;
	background: var(--aq-gold);
	color: var(--sm-green-deep, #163a2c);
	font-size: 0.85rem;
	font-weight: 600;
	line-height: 1;
}
html[lang^="fa"] .aq-next li::before { content: counter(aq, persian); }
.aq .aq-aside h3 { margin: 0 0 0.5rem; padding-block-start: 1.5rem; border-top: 1px solid rgba(255, 255, 255, 0.18); color: var(--sm-on-green, #bcd0c3); font-size: 0.9rem; font-weight: 500; }
.aq-langs { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; margin: 0; padding: 0; list-style: none; }
.aq-langs li { color: var(--sm-gold-light, #d9bc8e); font-size: 1.45rem; font-weight: 600; line-height: 1.5; }

/* ---------- Sent ---------- */

.aq-sent { grid-column: 1 / -1; max-width: 36rem; padding-block: 1rem 3rem; }
.aq-sent__mark {
	display: block;
	width: 3.5rem;
	height: 3.5rem;
	margin-block-end: 1.5rem;
	border-radius: 50%;
	background: var(--aq-green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='18'%3E%3Cpath d='M2 9l7 7L22 2' fill='none' stroke='%23d9bc8e' stroke-width='3'/%3E%3C/svg%3E") no-repeat center;
}
.aq .aq-sent h2 { margin: 0 0 0.75rem; color: var(--aq-green); font-size: clamp(1.6rem, 3vw, 2.1rem); font-weight: 600; line-height: 1.3; }
.aq-sent p { margin: 0 0 1.75rem; color: var(--aq-muted); }

/* ---------- Small screens ---------- */

@media (max-width: 960px) {
	.aq { grid-template-columns: 1fr; }
	.aq-aside { position: static; }
}

@media (max-width: 640px) {
	.aq-vars__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.aq-grid { grid-template-columns: 1fr; }
	.aq-send__btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.aq-var, .aq-chip span, .aq input, .aq textarea { transition: none; }
}