/*
 * Aval Pardakht service catalogue.
 *
 * Same visual language as the price calculator — the same Elementor palette
 * variables, the same card radius, border and shadow — so the two widgets on one
 * page read as one product rather than two plugins. Everything is scoped under
 * `.avps` so it can drop into any theme or Elementor page without leaking
 * styles, and, as the reset further down handles, without the theme leaking in.
 *
 * Direction is never set here: the wrapper carries `dir` from the site locale,
 * and every rule below is written with logical properties, so the same
 * stylesheet lays out Persian and English correctly.
 */

/*
 * Colours come from Elementor's global palette, so changing a colour in
 * «تنظیمات سراسری ← رنگ‌ها» reaches the widget without touching this file. Each
 * `var()` carries the same value as its fallback, which is what a page rendered
 * outside Elementor — or a kit whose variable names changed — falls back to.
 */
.avps {
	--ap-brand: var(--e-global-color-0e5283e, #2cb1a9);
	--ap-brand-ink: var(--e-global-color-4ef586b, #ffffff);
	--ap-brand-soft: var(--e-global-color-7773015, #009b8733);
	--ap-brand-deep: var(--e-global-color-96daee2, #053b3a);
	--ap-brand-hover: var(--e-global-color-d89df1f, #238e87);

	--ap-card: var(--e-global-color-4ef586b, #ffffff);
	--ap-text: var(--e-global-color-d7ad755, #2a353b);
	--ap-ink: var(--ap-brand-deep);
	--ap-muted: var(--e-global-color-1053bd6, #707e87);

	/* Tints of the brand rather than neutral grey, so the fields and the chips
	   sit in the palette instead of beside it. */
	--ap-field: #f1f7f6;
	--ap-border: #e2ecea;

	--ap-shadow: 0 18px 55px var(--ap-brand-soft);
	--ap-shadow-card: 0 10px 30px rgba(18, 26, 48, 0.07);
	--ap-radius: 22px;
	--ap-radius-card: 16px;
	--ap-radius-field: 12px;

	box-sizing: border-box;
	/* The wrapper carries no surface of its own: the toolbar is a card and each
	   service is a card. One white box nested inside another white box reads as
	   a rendering mistake. */
	background: transparent;
	color: var(--ap-text);
	font-family: inherit;
	line-height: 1.7;
}

/*
 * Dark styling is opt-in (`theme="dark"`) or follows the visitor's system when
 * asked for (`theme="auto"`). It is deliberately not the default: on a
 * light-only site a widget that turns dark because of an OS setting reads as
 * broken, not as a feature.
 */
.avps--dark,
.avps--auto {
	--ap-dark-card: #14201f;
	--ap-dark-text: #eef3f2;
	--ap-dark-muted: #93a3a1;
	--ap-dark-field: #1b2a29;
	--ap-dark-border: #263a38;
}

.avps--dark {
	--ap-card: var(--ap-dark-card);
	--ap-text: var(--ap-dark-text);
	--ap-ink: var(--ap-dark-text);
	--ap-muted: var(--ap-dark-muted);
	--ap-field: var(--ap-dark-field);
	--ap-border: var(--ap-dark-border);
	--ap-shadow-card: 0 10px 30px rgba(0, 0, 0, 0.45);
}

@media (prefers-color-scheme: dark) {
	.avps--auto {
		--ap-card: var(--ap-dark-card);
		--ap-text: var(--ap-dark-text);
		--ap-ink: var(--ap-dark-text);
		--ap-muted: var(--ap-dark-muted);
		--ap-field: var(--ap-dark-field);
		--ap-border: var(--ap-dark-border);
		--ap-shadow-card: 0 10px 30px rgba(0, 0, 0, 0.45);
	}
}

.avps *,
.avps *::before,
.avps *::after {
	box-sizing: inherit;
}

/*
 * The site's font, everywhere.
 *
 * `font-family: inherit` on the wrapper is not enough: a browser gives `button`
 * and `input` its own UI font by default, and that default beats an inherited
 * value because it is set on the element itself. Naming the elements is what
 * makes the widget read as part of the page rather than as an embed.
 */
.avps button,
.avps input {
	font-family: inherit;
}

/*
 * Defensive reset.
 *
 * The widget lands inside a theme that already has opinions about buttons, links
 * and inputs, and those opinions arrive with equal specificity and sometimes
 * win — a theme focus ring drawing a red border around every chip is the usual
 * symptom. These few declarations are forced because they are structural rather
 * than decorative; the `--ap-*` tokens above stay the place to change how the
 * widget looks.
 */
.avps .avps__chip,
.avps .avps__search,
.avps .avps__card-link,
.avps .avps__base-value {
	box-shadow: none !important;
	text-decoration: none !important;
	text-shadow: none !important;
	outline-color: var(--ap-brand) !important;
}

.avps .avps__chip:hover,
.avps .avps__chip:focus {
	background: var(--ap-field) !important;
	border-color: var(--ap-brand) !important;
	color: var(--ap-ink) !important;
}

.avps .avps__chip.is-active,
.avps .avps__chip.is-active:hover,
.avps .avps__chip.is-active:focus {
	background: var(--ap-brand) !important;
	border-color: var(--ap-brand) !important;
	color: var(--ap-brand-ink) !important;
}

/* A chip's label is not text to select. Dragging across one otherwise paints it
   in the theme's selection colour. */
.avps .avps__chip {
	-webkit-user-select: none;
	user-select: none;
}

.avps ::selection {
	background: var(--ap-brand-soft);
	color: var(--ap-text);
}

.avps__screen-reader {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.avps .avps__title {
	margin: 0 0 1.25rem;
	font-size: 1.15rem;
	font-weight: 700;
	text-align: center;
}

/* --------------------------------------------------------------------- *
 * Toolbar: search, then the category chips
 * --------------------------------------------------------------------- */

.avps .avps__toolbar {
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
	padding: 20px;
	background: var(--ap-card);
	border: 1px solid var(--ap-brand-soft);
	border-radius: var(--ap-radius);
	box-shadow: var(--ap-shadow);
}

.avps .avps__searchbox {
	position: relative;
}

.avps .avps__search {
	width: 100%;
	min-height: 56px;
	padding: 0.7rem 1.1rem;
	border: 1px solid transparent;
	border-radius: var(--ap-radius-field);
	background: var(--ap-field);
	color: var(--ap-text);
	font: inherit;
	font-size: 0.95rem;
	transition: border-color 0.15s ease;
}

.avps .avps__search::placeholder {
	color: var(--ap-muted);
}

.avps .avps__search:hover {
	border-color: var(--ap-border);
}

.avps .avps__search:focus {
	border-color: var(--ap-brand);
	outline: none;
}

.avps .avps__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}

.avps .avps__chip {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	min-height: 40px;
	padding: 0.35rem 0.85rem;
	border: 1px solid var(--ap-border);
	border-radius: 999px;
	background: var(--ap-field);
	color: var(--ap-ink);
	font: inherit;
	font-size: 0.88rem;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

/* A category filtered down to nothing by the search box: still readable, still
   clickable, but no longer inviting. Hiding it instead would make the chip row
   reflow on every keystroke. */
.avps .avps__chip.is-empty {
	opacity: 0.45;
}

/* --------------------------------------------------------------------- *
 * The line between the chips and the grid
 *
 * How many services are shown, and — where a whole category quotes one rate —
 * that rate, once. Seventeen AI services all priced «۲۴۱٬۳۹۵ تومان» put the
 * same number on seventeen cards; here it is stated once and the cards drop it.
 * --------------------------------------------------------------------- */

.avps .avps__summary {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0.35rem 1rem;
	margin: 1rem 0 0.85rem;
}

.avps .avps__count {
	margin: 0;
	color: var(--ap-muted);
	font-size: 0.85rem;
}

.avps .avps__base {
	/* Ahead of the count, so the category and its price sit on the start edge —
	   the right on a Persian site, the left on an English one — where reading
	   begins. The count is the secondary reading and takes the far edge. */
	order: -1;
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0;
	font-size: 0.88rem;
}

.avps .avps__base[hidden] {
	display: none;
}

.avps .avps__base-category {
	color: var(--ap-ink);
	font-weight: 700;
	unicode-bidi: isolate;
}

.avps .avps__base-label {
	color: var(--ap-muted);
}

.avps .avps__base-value {
	padding: 0.15rem 0.6rem;
	border-radius: 999px;
	background: var(--ap-brand-soft);
	color: var(--ap-brand-deep);
	font-weight: 700;
	text-decoration: none;
	unicode-bidi: isolate;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.avps .avps__base-value:hover,
.avps .avps__base-value:focus-visible {
	background: var(--ap-brand-deep);
	color: var(--ap-brand-ink);
}

.avps--dark .avps__base-category {
	color: var(--ap-dark-text);
}

.avps--dark .avps__base-value {
	color: var(--ap-dark-text);
}

.avps--dark .avps__base-value:hover,
.avps--dark .avps__base-value:focus-visible {
	background: var(--ap-brand);
}

/* --------------------------------------------------------------------- *
 * The grid
 * --------------------------------------------------------------------- */

.avps .avps__grid {
	display: grid;
	gap: 0.9rem;
	margin: 0;
	padding: 0;
	list-style: none;
	/* `auto-fill` with a floor, not a fixed column count: the column count then
	   falls out of the space the widget was actually given, which is the only
	   thing that survives being dropped into an Elementor column of unknown
	   width. The `columns` attribute sets the floor. */
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
}

.avps .avps__grid--1 {
	grid-template-columns: 1fr;
}

.avps .avps__grid--2 {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
}

.avps .avps__grid--4 {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr));
}

.avps .avps__card {
	margin: 0;
	padding: 0;
}

.avps .avps__card[hidden] {
	display: none;
}

/*
 * The whole card is the link.
 *
 * A card with a link somewhere inside it gives a visitor a small target and a
 * crawler an ambiguous one. As one `<a>` in grid flow, the media, the body and
 * the call to action stack inside it and the entire rectangle is clickable.
 */
.avps .avps__card-link {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	height: 100%;
	padding: 1rem;
	border: 1px solid var(--ap-border);
	border-radius: var(--ap-radius-card);
	background: var(--ap-card);
	box-shadow: var(--ap-shadow-card);
	color: var(--ap-text);
	transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.avps .avps__card-link:hover,
.avps .avps__card-link:focus-visible {
	border-color: var(--ap-brand);
	transform: translateY(-2px);
	box-shadow: 0 16px 38px var(--ap-brand-soft);
}

@media (prefers-reduced-motion: reduce) {
	.avps .avps__card-link {
		transition: border-color 0.15s ease;
	}

	.avps .avps__card-link:hover,
	.avps .avps__card-link:focus-visible {
		transform: none;
	}
}

.avps .avps__card-media {
	display: flex;
	align-items: center;
	justify-content: center;
	/* Never squeezed by a long service name, and never stretched to the height
	   of a two-line one. */
	flex: 0 0 auto;
	align-self: flex-start;
	width: 48px;
	height: 48px;
	padding: 5px;
	border-radius: 12px;
	background: var(--ap-field);
}

.avps .avps__card-media img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

.avps .avps__card-body {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
	/* Takes the slack, so the call to action sits on the bottom edge of every
	   card in the row no matter how short the description is. */
	flex: 1 1 auto;
	min-width: 0;
}

/* The icon and the name, side by side. The icon on a row of its own left an
   empty half-line down one side of every card, which at three columns is a
   third of the widget. */
.avps .avps__card-head {
	display: flex;
	align-items: center;
	gap: 0.6rem;
}

.avps .avps__card-heading {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.25rem;
	/* Without this the column refuses to shrink below the width of its own
	   longest word, and a long service name widens the card instead of
	   wrapping inside it. */
	min-width: 0;
}

.avps .avps__card-title {
	color: var(--ap-ink);
	font-size: 0.98rem;
	font-weight: 700;
	line-height: 1.5;
	/* A service title can be mixed — «سرویس‌های ChatGPT». `isolate` resolves it
	   on its own instead of letting it fight the surrounding line for
	   direction, which is what reorders words on screen. */
	unicode-bidi: isolate;
	overflow-wrap: anywhere;
}

.avps .avps__card-badge {
	max-width: 100%;
	padding: 0.1rem 0.5rem;
	border-radius: 999px;
	background: var(--ap-brand-soft);
	color: var(--ap-brand-deep);
	font-size: 0.72rem;
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	unicode-bidi: isolate;
}

.avps--dark .avps__card-badge {
	color: var(--ap-dark-text);
}

.avps .avps__card-summary {
	color: var(--ap-muted);
	font-size: 0.83rem;
	line-height: 1.6;
	/* Three lines, then an ellipsis, so a long description cannot make one card
	   twice the height of the row it sits in. */
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	overflow: hidden;
	unicode-bidi: isolate;
	overflow-wrap: anywhere;
}

.avps .avps__card-rate {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0.35rem;
	margin-top: auto;
	padding-top: 0.5rem;
	border-top: 1px solid var(--ap-border);
	font-size: 0.8rem;
}

.avps .avps__card-rate-name {
	color: var(--ap-muted);
	unicode-bidi: isolate;
}

.avps .avps__card-rate-value {
	color: var(--ap-ink);
	font-weight: 700;
	white-space: nowrap;
	unicode-bidi: isolate;
}

.avps .avps__card-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 40px;
	padding: 0.35rem 0.9rem;
	border-radius: var(--ap-radius-field);
	background: var(--ap-field);
	color: var(--ap-ink);
	font-size: 0.85rem;
	font-weight: 700;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.avps .avps__card-link:hover .avps__card-cta,
.avps .avps__card-link:focus-visible .avps__card-cta {
	background: var(--ap-brand-deep);
	color: var(--ap-brand-ink);
}

.avps--dark .avps__card-link:hover .avps__card-cta,
.avps--dark .avps__card-link:focus-visible .avps__card-cta {
	background: var(--ap-brand);
}

/* --------------------------------------------------------------------- *
 * List layout
 *
 * `layout="list"` — one card per row, the media, the text and the call to
 * action side by side. For a page that lists the catalogue as a directory
 * rather than showing it off as a gallery.
 * --------------------------------------------------------------------- */

.avps--list .avps__grid,
.avps--list .avps__grid--2,
.avps--list .avps__grid--3,
.avps--list .avps__grid--4 {
	grid-template-columns: 1fr;
	gap: 0.6rem;
}

.avps--list .avps__card-link {
	flex-direction: row;
	align-items: center;
	gap: 1rem;
}

.avps--list .avps__card-media {
	width: 40px;
	height: 40px;
	border-radius: 10px;
}

/* One row per service: the name and its icon take the space, and the rate and
   the button sit at the end of the same line. */
.avps--list .avps__card-body {
	flex-direction: row;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.6rem 1rem;
}

.avps--list .avps__card-head {
	flex: 1 1 14rem;
}

.avps--list .avps__card-summary {
	flex: 1 1 100%;
}

.avps--list .avps__card-summary {
	-webkit-line-clamp: 2;
	line-clamp: 2;
}

.avps--list .avps__card-rate {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

.avps--list .avps__card-cta {
	flex: 0 0 auto;
}

@media (max-width: 640px) {
	.avps--list .avps__card-link {
		flex-direction: column;
		align-items: stretch;
	}

	.avps--list .avps__card-cta {
		width: 100%;
	}
}

/* --------------------------------------------------------------------- *
 * Empty and down states
 * --------------------------------------------------------------------- */

.avps .avps__empty {
	margin: 1.5rem 0;
	padding: 1.5rem;
	border: 1px dashed var(--ap-border);
	border-radius: var(--ap-radius-card);
	color: var(--ap-muted);
	font-size: 0.9rem;
	text-align: center;
}

.avps .avps__empty[hidden] {
	display: none;
}

.avps .avps__note {
	margin: 0.9rem 0 0;
	color: var(--ap-muted);
	font-size: 0.78rem;
}

.avps--down {
	padding: 1.25rem;
	border: 1px solid var(--ap-border);
	border-radius: var(--ap-radius);
	color: var(--ap-muted);
}

.avps--down p {
	margin: 0;
}

/* --------------------------------------------------------------------- *
 * Focus
 * --------------------------------------------------------------------- */

.avps .avps__chip:focus-visible,
.avps .avps__search:focus-visible,
.avps .avps__base-value:focus-visible,
.avps .avps__card-link:focus-visible {
	outline: 2px solid var(--ap-brand);
	outline-offset: 2px;
}

/* --------------------------------------------------------------------- *
 * Narrow screens
 * --------------------------------------------------------------------- */

@media (max-width: 900px) {
	.avps .avps__toolbar {
		padding: 14px;
	}

	/* The chip row becomes one horizontal strip that scrolls, the way a tab bar
	   does. Wrapped onto four rows it is a wall of text above the list rather
	   than a control beside it. */
	.avps .avps__chips {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
		padding-bottom: 0.2rem;
	}

	.avps .avps__chips::-webkit-scrollbar {
		display: none;
	}

	.avps .avps__chip {
		flex: 0 0 auto;
	}

	.avps .avps__summary {
		justify-content: flex-start;
		gap: 0.3rem;
	}

	.avps .avps__grid,
	.avps .avps__grid--2,
	.avps .avps__grid--3,
	.avps .avps__grid--4 {
		grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr));
	}
}