.atr-store-top,
.atr-benefits-page,
.atr-taptap-page,
.atr-auth,
.atr-store-application-form-wrap {
	color: #07111f;
	font-family: "Inter", Arial, Helvetica, sans-serif;
	font-weight: 400;
}

.atr-store-top *,
.atr-store-top *::before,
.atr-store-top *::after,
.atr-benefits-page *,
.atr-benefits-page *::before,
.atr-benefits-page *::after,
.atr-taptap-page *,
.atr-taptap-page *::before,
.atr-taptap-page *::after,
.atr-auth *,
.atr-auth *::before,
.atr-auth *::after,
.atr-store-application-form-wrap *,
.atr-store-application-form-wrap *::before,
.atr-store-application-form-wrap *::after {
	box-sizing: border-box;
	letter-spacing: 0;
}

.atr-benefits-shell {
	/* Public pages must use homepage shell metrics. */
	width: min(1220px, calc(100% - 48px));
	max-width: 1220px;
	margin: 0 auto;
}

.atr-store-top {
	padding: 48px 0 18px;
	background: #fff;
}

.atr-store-top__inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 260px;
	gap: 46px;
	align-items: center;
}

.atr-store-top__copy span {
	display: inline-flex;
	margin: 0 0 12px;
	color: #12b844;
	font-size: 13px;
	font-weight: 950;
	line-height: 1.2;
	text-transform: uppercase;
}

.atr-store-top__copy h1 {
	max-width: 620px;
	margin: 0;
	color: #07111f;
	font-size: 44px;
	font-weight: 950;
	line-height: 1.08;
}

.atr-store-top__copy p {
	max-width: 560px;
	margin: 16px 0 0;
	color: #647084;
	font-size: 17px;
	font-weight: 650;
	line-height: 1.55;
}

.atr-store-top__copy a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	margin-top: 24px;
	padding: 0 22px;
	border-radius: 8px;
	background: #12b844;
	color: #fff;
	font-size: 15px;
	font-weight: 900;
	line-height: 1;
	text-decoration: none;
}

.atr-store-top__visual {
	justify-self: end;
	display: grid;
	place-items: center;
	width: min(100%, 240px);
	aspect-ratio: 1;
}

.atr-store-top__visual img {
	display: block;
	width: 200px;
	height: 200px;
	object-fit: contain;
}

.atr-benefits-section {
	padding: 34px 0 56px;
	background: #fff;
}

.atr-benefits-title {
	margin: 0 0 38px;
	color: #07111f;
	font-size: 38px;
	font-weight: 950;
	line-height: 1.1;
	text-align: center;
}

.atr-benefits-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
}

.atr-benefit-card {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: 170px;
	overflow: hidden;
	padding: 24px;
	border-radius: 8px;
	background: #f4f6fa;
}

.atr-benefit-card img {
	position: absolute;
	top: 18px;
	right: 22px;
	width: 58px;
	height: 58px;
	object-fit: contain;
}

.atr-benefit-card strong {
	display: block;
	color: #07111f;
	font-size: 28px;
	font-weight: 950;
	line-height: 1;
}

.atr-benefit-card span {
	display: block;
	margin-top: 10px;
	color: #07111f;
	font-size: 16px;
	font-weight: 550;
	line-height: 1.35;
}

.atr-benefits-form-section {
	padding: 54px 0 76px;
	background: #f7f9fc;
}

.atr-benefits-form-grid {
	display: grid;
	grid-template-columns: minmax(0, 0.65fr) minmax(420px, 1fr);
	gap: 54px;
	align-items: start;
}

.atr-benefits-form-copy h2 {
	margin: 0;
	color: #07111f;
	font-size: 34px;
	font-weight: 950;
	line-height: 1.12;
}

.atr-benefits-form-copy p {
	max-width: 430px;
	margin: 14px 0 0;
	color: #647084;
	font-size: 16px;
	font-weight: 650;
	line-height: 1.55;
}

.atr-store-application__notice {
	margin: 0 0 18px;
	padding: 14px 16px;
	border: 1px solid #ffd6d6;
	border-radius: 8px;
	background: #fff4f4;
	color: #a22525;
	font-weight: 800;
}

.atr-store-application__notice--success {
	border-color: #ccefd7;
	background: #effbf3;
	color: #08752a;
}

.atr-store-application-form {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	padding: 28px;
	border-radius: 8px;
	background: #fff;
	box-shadow: 0 16px 38px rgba(7, 17, 31, 0.07);
}

.atr-store-application-form label {
	display: grid;
	gap: 8px;
	margin: 0;
	color: #101725;
	font-weight: 850;
}

.atr-store-application-form label span {
	font-size: 14px;
}

.atr-store-application-form input,
.atr-store-application-form select,
.atr-store-application-form textarea {
	width: 100%;
	min-height: 50px;
	border: 1px solid #dfe6ee;
	border-radius: 8px;
	background: #fff;
	color: #101725;
	font: inherit;
	outline: 0;
	padding: 13px 14px;
}

.atr-store-application-form input:focus,
.atr-store-application-form select:focus,
.atr-store-application-form textarea:focus {
	border-color: #12b844;
	box-shadow: 0 0 0 3px rgba(18, 184, 68, 0.15);
}

.atr-store-application-form textarea {
	min-height: 112px;
	resize: vertical;
}

.atr-store-application-form button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: max-content;
	min-width: 160px;
	min-height: 50px;
	border: 0;
	border-radius: 8px;
	background: #12b844;
	color: #fff;
	font: inherit;
	font-size: 16px;
	font-weight: 900;
	line-height: 1;
	cursor: pointer;
}

.atr-panel {
	display: grid;
	gap: 22px;
	width: min(1220px, calc(100% - 48px));
	max-width: 1220px;
	margin: 0 auto;
	padding: 34px 0 70px;
	color: #101725;
	font-family: "Inter", Arial, Helvetica, sans-serif;
	font-weight: 500;
}

.atr-panel *,
.atr-panel *::before,
.atr-panel *::after {
	box-sizing: border-box;
}

/* Account navigation — desktop row.
   One line, no wrapping: the old flex-wrap version broke into ragged rows whose shape
   depended on label length. Logout is pushed to the far right, away from the destinations. */
.atr-account-nav {
	display: flex;
	flex-wrap: nowrap;
	gap: 8px;
	align-items: center;
	padding: 8px;
	border: 1px solid #e6edf4;
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 14px 40px rgba(16, 23, 37, 0.06);
	overflow-x: auto;
	scrollbar-width: none;
}

.atr-account-nav::-webkit-scrollbar {
	display: none;
}

/* The hub is navigated through the list below, so the row would only duplicate it. */
.atr-account-nav.is-hub {
	display: none;
}

.atr-account-nav__row {
	display: flex;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.atr-account-nav a {
	display: inline-flex;
	gap: 8px;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 16px;
	border-radius: 10px;
	color: #3b4658;
	font-size: 14px;
	font-weight: 800;
	line-height: 1;
	white-space: nowrap;
	text-decoration: none;
}

.atr-account-nav a.is-active {
	background: #12b844;
	color: #fff;
}

.atr-account-nav__new {
	border: 1px solid #d7f4e1;
	background: #f2fbf5;
	color: #0a8f33;
}

.atr-account-nav__logout {
	margin-left: auto;
	border: 1px solid #ffd6d6;
	background: #fff7f7;
	color: #b42318;
}

/* Higher specificity than `.atr-account-nav a` above, which would otherwise re-show it. */
.atr-account-nav a.atr-account-nav__back {
	display: none;
}

.atr-account-nav.is-sub a.atr-account-nav__back {
	display: inline-flex;
	gap: 2px;
	padding-left: 6px;
	background: none;
	color: #3b4658;
}

.atr-account-nav__icon {
	width: 18px;
	height: 18px;
	flex: none;
}

/* Hover only where a real pointer exists — on touch :hover sticks after a tap and makes
   the visitor think they are on a page they are not. */
@media (hover: hover) {
	.atr-account-nav a:hover {
		background: #12b844;
		color: #fff;
	}

	.atr-account-nav__logout:hover {
		border-color: #f04438;
		background: #f04438;
		color: #fff;
	}
}

/* Account hub — the menu on /kabinet/. Same list on both breakpoints: a card here, and
   edge-to-edge rows on mobile (see the block at the end of this file). */
.atr-account-hub {
	display: grid;
	gap: 16px;
	width: min(560px, 100%);
}

.atr-account-hub__cta {
	display: flex;
	gap: 8px;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	border-radius: 10px;
	background: #12b844;
	color: #fff;
	font-size: 15px;
	font-weight: 900;
	text-decoration: none;
}

.atr-account-hub__cta .atr-account-nav__icon {
	width: 20px;
	height: 20px;
	stroke-width: 2.4;
}

.atr-account-hub__group-label {
	margin: 0 0 6px;
	color: #98a2b3;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.atr-account-hub__list {
	margin: 0;
	padding: 0;
	border: 1px solid #e6edf4;
	border-radius: 12px;
	background: #fff;
	list-style: none;
	overflow: hidden;
}

.atr-account-hub__list li + li a {
	border-top: 1px solid #f0f3f7;
}

.atr-account-hub__list a {
	display: grid;
	grid-template-columns: 20px 1fr auto 16px;
	gap: 12px;
	align-items: center;
	min-height: 52px;
	padding: 0 16px;
	color: #1d2939;
	font-size: 15px;
	font-weight: 800;
	text-decoration: none;
}

.atr-account-hub__list .atr-account-nav__icon {
	width: 20px;
	height: 20px;
	color: #7a8699;
}

.atr-account-hub__count {
	color: #98a2b3;
	font-size: 14px;
	font-style: normal;
	font-weight: 800;
}

/* Pinned to the last column: rows without a count have one child fewer, so
   auto-placement dropped the chevron into the count column and it sat out of line. */
.atr-account-hub__list a > .atr-account-nav__icon:last-child {
	grid-column: 4;
	color: #c6cedb;
}

.atr-account-hub__list a.is-logout,
.atr-account-hub__list a.is-logout .atr-account-nav__icon {
	color: #d3372b;
}

.atr-account-hub__list a.is-logout > .atr-account-nav__icon:last-child {
	display: none;
}

@media (hover: hover) {
	.atr-account-hub__list a:hover {
		background: #f8fafc;
	}
}



.atr-panel-hero {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 28px;
	border: 1px solid #dce8df;
	border-radius: 8px;
	background: linear-gradient(135deg, #f1fbf4 0%, #fff8de 100%);
	color: #fff;
	overflow: hidden;
}

.atr-panel-hero--compact {
	padding: 24px;
}

.atr-panel-hero span {
	display: inline-flex;
	margin-bottom: 8px;
	color: #0b9f3a;
	font-size: 13px;
	font-weight: 900;
	text-transform: uppercase;
}

.atr-panel-hero h2 {
	margin: 0 0 8px;
	color: #101725;
	font-size: clamp(26px, 4vw, 38px);
	line-height: 1.08;
}

.atr-panel-hero p {
	max-width: 680px;
	margin: 0;
	color: #526071;
	font-weight: 650;
	line-height: 1.55;
}

.atr-panel-hero a,
.atr-panel-submit,
.atr-panel-login a,
.atr-panel-card a,
.atr-shop-card a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 46px;
	padding: 0 18px;
	border: 0;
	border-radius: 8px;
	background: #ffd43b;
	color: #101725;
	font-size: 15px;
	font-weight: 900;
	text-decoration: none;
	cursor: pointer;
}

.atr-profile-panel .atr-panel-hero {
	border-color: #e6edf4;
	background: #fff;
	box-shadow: 0 14px 40px rgba(16, 23, 37, 0.06);
}

.atr-profile-identity {
	display: flex;
	align-items: center;
	gap: 16px;
	min-width: 0;
}

.atr-profile-avatar {
	display: grid;
	place-items: center;
	width: 72px;
	height: 72px;
	flex: 0 0 auto;
	border-radius: 18px;
	background: #e8fff0;
	color: #0b8f35;
	font-size: 30px;
	font-weight: 950;
	text-transform: uppercase;
}

.atr-profile-avatar img,
.atr-profile-image-preview img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.atr-profile-identity h2 {
	margin-bottom: 4px;
}

.atr-profile-identity p {
	margin: 0;
	color: #667085;
	font-size: 14px;
	font-weight: 750;
	overflow-wrap: anywhere;
}

.atr-panel-stats,
.atr-panel-grid,
.atr-shop-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px;
}

.atr-panel-grid,
.atr-shop-grid {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.atr-shop-grid {
	grid-template-columns: minmax(0, 1fr);
}

.atr-panel-stats div,
.atr-panel-card,
.atr-shop-card,
.atr-panel-empty,
.atr-panel-login,
.atr-panel-form,
.atr-application-list div {
	border: 1px solid #e6edf4;
	border-radius: 8px;
	background: #fff;
	box-shadow: 0 14px 40px rgba(16, 23, 37, 0.06);
}

.atr-panel-stats div {
	padding: 18px;
}

.atr-panel-stats strong {
	display: block;
	font-size: 30px;
	line-height: 1;
}

.atr-panel-stats span {
	display: block;
	margin-top: 8px;
	color: #687386;
	font-weight: 750;
}

.atr-profile-panel .atr-panel-stats div {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	min-height: 86px;
}

.atr-profile-panel .atr-panel-stats strong {
	font-size: 28px;
}

.atr-profile-panel .atr-panel-stats span {
	margin-top: 0;
	text-align: right;
}

.atr-profile-panel.is-shop-account .atr-panel-stats {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.atr-profile-panel.is-shop-account .atr-panel-stats div:nth-child(4) {
	display: none;
}

.atr-profile-panel .atr-panel-grid {
	grid-template-columns: minmax(0, 1.15fr) repeat(2, minmax(0, 0.9fr));
}

.atr-profile-panel .atr-panel-card {
	display: grid;
	align-content: start;
	min-height: 154px;
}

.atr-profile-panel .atr-panel-card a {
	align-self: end;
	justify-self: start;
	min-height: 38px;
	margin-top: 10px;
	background: #e8fff0;
	color: #0b8f35;
}

.atr-shop-account-summary {
	color: #344054 !important;
	font-weight: 850;
}

.atr-profile-panel.is-shop-account .atr-panel-grid .atr-panel-card:nth-child(2) p:not(.atr-shop-account-summary) {
	display: none;
}

/* Account details form: one column, photo centred at the top. The old two-column layout
   (aside + fields) and the lock/unlock states are gone — fields are editable on arrival and
   the save button carries the unsaved state instead. */
.atr-profile-form {
	display: grid;
	width: min(560px, 100%);
	padding: 0;
	overflow: hidden;
}

.atr-profile-form::before {
	content: none;
	display: none;
}

.atr-profile-photo {
	display: grid;
	place-items: center;
	padding: 24px 22px;
	border-bottom: 1px solid #eef2f7;
	background: #f8fafc;
}

.atr-profile-form .atr-panel-form-grid {
	grid-template-columns: minmax(0, 1fr);
	padding: 20px 22px;
}

.atr-profile-image-field {
	position: relative;
	display: grid;
	justify-items: center;
	gap: 10px;
	cursor: pointer;
}

.atr-profile-image-preview {
	display: grid;
	place-items: center;
	width: 96px;
	height: 96px;
	overflow: hidden;
	border: 1px solid #cfeedd;
	border-radius: 50%;
	background: #e8fff0;
	color: #0b8f35;
	font-size: 36px;
	font-weight: 950;
	text-transform: uppercase;
}

/* A quiet link under the photo, not a dashed drop-zone box — the whole circle is the target. */
.atr-profile-image-field em {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	color: #0a8f33;
	font: inherit;
	font-size: 14px;
	font-style: normal;
	font-weight: 800;
}

.atr-profile-image-input {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.atr-locked-input[readonly] {
	background: #eef3f7;
	color: #667085;
	cursor: not-allowed;
}

.atr-panel-field__hint {
	margin-top: 4px;
	color: #98a2b3;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.35;
}

.atr-account-section-title {
	margin: 0;
	font-size: 17px;
	font-weight: 950;
	line-height: 1.2;
}

/* Both selectors on purpose: `.atr-panel-form { padding: 28px }` sits further down the
   file at equal specificity and would otherwise win. */
.atr-panel-form.atr-password-form {
	width: min(560px, 100%);
	padding: 0;
	overflow: hidden;
}

.atr-password-form .atr-panel-form-grid {
	grid-template-columns: minmax(0, 1fr);
	padding: 20px 22px;
}

/* Show/hide password. The button sits inside the field, and the input gets room on the
   right so the value never runs underneath it. */
.atr-password-input {
	position: relative;
	display: block;
}

.atr-panel-field--password .atr-password-input input {
	width: 100%;
	padding-right: 52px;
}

.atr-password-toggle {
	position: absolute;
	top: 50%;
	right: 4px;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	transform: translateY(-50%);
	border: 0;
	border-radius: 8px;
	background: none;
	color: #7a8699;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}

.atr-password-toggle .atr-account-nav__icon {
	width: 20px;
	height: 20px;
}

/* One icon at a time: eye when hidden, crossed-out eye once revealed. */
.atr-password-toggle .atr-account-nav__icon:last-child,
.atr-password-toggle.is-revealed .atr-account-nav__icon:first-child {
	display: none;
}

.atr-password-toggle.is-revealed .atr-account-nav__icon:last-child {
	display: block;
}

.atr-password-toggle.is-revealed {
	color: #0a8f33;
}

.atr-profile-form-actions {
	display: grid;
	gap: 10px;
	margin: 0;
	padding: 0 22px 22px;
}

.atr-profile-form .atr-panel-submit {
	width: 100%;
	margin: 0;
}

/* Inert until a field actually changes: that is the signal that something is unsaved.
   The disabled state is applied by frontend.js, never in the markup, so a script failure
   still leaves a form you can submit. */
.atr-panel-submit[disabled] {
	background: #e4e9f0;
	color: #98a2b3;
	box-shadow: none;
	cursor: default;
}

.atr-profile-form .atr-panel-field:has(input[name="user_password"]),
.atr-profile-form .atr-panel-field:has(input[name="user_password_confirm"]) {
	display: none;
}

.atr-panel-card,
.atr-shop-card,
.atr-panel-empty,
.atr-panel-login {
	padding: 22px;
}

.atr-panel-card h3,
.atr-shop-card h3,
.atr-panel-subtitle {
	margin: 0 0 12px;
	font-size: 20px;
}

.atr-panel-card p,
.atr-shop-card p,
.atr-panel-empty p,
.atr-panel-login p {
	margin: 0 0 10px;
	color: #5d687a;
}

.atr-panel-form {
	position: relative;
	padding: 28px;
	overflow: hidden;
}

.atr-panel-form-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}

.atr-panel-field {
	display: grid;
	gap: 8px;
	align-content: start;
	font-weight: 850;
}

/* display:grid above outranks the browser's [hidden] rule, so JS setting .hidden on a
   field (the rent-only "Qiymət qeydi") did nothing until this line existed. */
.atr-panel-field[hidden] {
	display: none;
}

.atr-panel-field span {
	color: #1c2635;
	font-size: 14px;
	line-height: 1.25;
}

.atr-panel-field--wide {
	grid-column: 1 / -1;
}

.atr-category-picker {
	display: contents;
}

.atr-panel-field input,
.atr-panel-field select,
.atr-panel-field textarea {
	width: 100%;
	min-height: 54px;
	border: 1px solid #dfe6ee;
	border-radius: 8px;
	background: #fbfcfe;
	color: #101725;
	font: inherit;
	font-size: 15px;
	outline: 0;
	padding: 14px 15px;
}

.atr-input-suffix {
	position: relative;
}

.atr-input-suffix input {
	padding-right: 58px;
}

.atr-input-suffix span {
	position: absolute;
	top: 50%;
	right: 15px;
	color: #5f6b7a;
	font-size: 13px;
	font-weight: 800;
	line-height: 1;
	pointer-events: none;
	transform: translateY(-50%);
}

.atr-panel-field textarea {
	resize: vertical;
	min-height: 132px;
	line-height: 1.5;
}

.atr-panel-field input:focus,
.atr-panel-field select:focus,
.atr-panel-field textarea:focus {
	border-color: #12b844;
	box-shadow: 0 0 0 3px rgba(18, 184, 68, 0.14);
}

.atr-panel-field input:disabled,
.atr-panel-field select:disabled {
	background: #f5f7fa;
	color: #344054;
	opacity: 1;
	cursor: default;
}

.atr-panel-submit {
	margin-top: 18px;
	background: #12b844;
	color: #fff;
	box-shadow: 0 12px 24px rgba(18, 184, 68, 0.22);
}

.atr-panel-notice {
	padding: 14px 16px;
	border-radius: 12px;
	background: #e8fff0;
	color: #087a2b;
	font-weight: 850;
	transition: opacity 0.28s ease, transform 0.28s ease;
}

.atr-panel-notice--error {
	background: #fff1f1;
	color: #c32929;
}

.atr-panel-notice.is-dismissing {
	opacity: 0;
	transform: translateY(-6px);
}

.atr-panel-listings {
	display: grid;
	gap: 12px;
}

.atr-panel-listing {
	display: grid;
	grid-template-columns: 116px minmax(0, 1fr);
	gap: 16px;
	align-items: center;
	padding: 12px;
	border: 1px solid #e6edf4;
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 14px 40px rgba(16, 23, 37, 0.05);
}

.atr-panel-listing img {
	width: 116px;
	aspect-ratio: 4 / 3;
	border-radius: 10px;
	object-fit: cover;
	background: #eef3f6;
}

.atr-panel-listing span {
	color: #12b844;
	font-size: 13px;
	font-weight: 900;
}

.atr-panel-listing h3 {
	margin: 4px 0;
	font-size: 18px;
}

.atr-panel-listing h3 a {
	color: #101725;
	text-decoration: none;
}

.atr-panel-listing p {
	margin: 0;
	font-weight: 900;
}

.atr-panel-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	margin-top: 12px;
}

.atr-panel-actions a,
.atr-panel-actions button,
.atr-inline-form button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 36px;
	padding: 0 12px;
	border: 1px solid #dfe6ee;
	border-radius: 8px;
	background: #fff;
	color: #101725;
	font: inherit;
	font-size: 13px;
	font-weight: 850;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
}

.atr-panel-actions button:hover,
.atr-panel-actions a:hover,
.atr-inline-form button:hover {
	border-color: #12b844;
	color: #0c8c33;
}

.atr-panel-actions form,
.atr-inline-form {
	margin: 0;
}

.atr-panel-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
	margin-top: 18px;
}

.atr-panel-pagination a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	height: 38px;
	border: 1px solid #dfe6ee;
	border-radius: 8px;
	background: #fff;
	color: #101725;
	font-size: 13px;
	font-weight: 900;
	text-decoration: none;
}

.atr-panel-pagination a.is-active,
.atr-panel-pagination a:hover {
	border-color: #12b844;
	background: #12b844;
	color: #fff;
}

/* Listing image slots — same pattern as the Tap Tap form. The first slot is the cover,
   so it gets the room; the rest sit beside it. */
.atr-uploads {
	display: grid;
	grid-template-columns: 1.6fr 1fr 1fr 1fr;
	gap: 8px;
	margin-top: 10px;
}

.atr-upload {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	height: 148px;
	overflow: hidden;
	padding: 8px;
	border: 2px dashed #b9d9c6;
	border-radius: 12px;
	background: #f2faf5;
	color: #0c8c33;
	cursor: pointer;
	text-align: center;
}

.atr-upload input[type="file"] {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
}

.atr-upload-icon {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: #12b844;
	color: #fff;
	font-size: 21px;
	font-weight: 800;
	line-height: 1;
}

.atr-upload:not(.is-primary) .atr-upload-icon {
	width: 30px;
	height: 30px;
	font-size: 18px;
}

.atr-upload strong {
	position: relative;
	z-index: 1;
	font-size: 12.5px;
	font-weight: 800;
}

.atr-upload.has-preview {
	border-style: solid;
	border-color: #cfe0ec;
}

.atr-upload.has-preview .atr-upload-icon,
.atr-upload.has-preview strong {
	display: none;
}

.atr-upload.is-working {
	opacity: 0.6;
}

.atr-upload img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* .atr-upload img sets display:block, which beats the browser's [hidden] rule. */
.atr-upload img[hidden] {
	display: none;
}

.atr-upload-clear {
	position: absolute;
	top: 6px;
	right: 6px;
	z-index: 2;
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(7, 17, 31, 0.62);
	color: #fff;
	font-size: 17px;
	line-height: 1;
	cursor: pointer;
}

.atr-upload-clear[hidden] {
	display: none;
}

.atr-upload-hint {
	margin: 8px 0 0;
	color: #7b8798;
	font-size: 12.5px;
	font-weight: 600;
}

.atr-panel-field small {
	display: block;
	margin-top: 8px;
	color: #667085;
	font-size: 12px;
	font-weight: 700;
}

.atr-upload-progress {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin: 4px 0 16px;
}

.atr-upload-progress[hidden] {
	display: none;
}

.atr-upload-progress span {
	flex: 1;
	height: 10px;
	overflow: hidden;
	border-radius: 999px;
	background: #e7edf4;
}

.atr-upload-progress em {
	display: block;
	width: 0;
	height: 100%;
	border-radius: inherit;
	background: #12b844;
	transition: width .18s ease;
}

.atr-upload-progress strong {
	min-width: 42px;
	color: #101725;
	font-size: 13px;
	font-weight: 900;
	text-align: right;
}

.atr-upload-progress small {
	flex-basis: 100%;
	color: #344054;
	font-size: 12px;
	font-weight: 800;
}

.atr-shop-profile-media {
	position: relative;
	display: grid;
	grid-column: 1 / -1;
	margin: -6px -6px 4px;
	overflow: hidden;
	border: 1px solid #e6edf4;
	border-radius: 8px;
	background: #f4f7fb;
}

.atr-shop-package-card {
	display: grid;
	grid-column: 1 / -1;
	grid-template-columns: minmax(180px, 1fr) 2fr;
	gap: 14px;
	align-items: stretch;
	padding: 16px;
	border: 1px solid #dcefe4;
	border-radius: 8px;
	background: #f6fff8;
}

.atr-shop-package-card > div {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.atr-shop-package-card > div span,
.atr-shop-package-card li span {
	color: #667085;
	font-size: 12px;
	font-weight: 800;
}

.atr-shop-package-card strong {
	color: #101725;
	font-size: 22px;
	font-weight: 950;
}

.atr-shop-package-card small {
	color: #344054;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.45;
}

.atr-shop-package-card ul {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.atr-shop-package-card li {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 74px;
	padding: 10px;
	border: 1px solid #dcefe4;
	border-radius: 8px;
	background: #fff;
}

.atr-shop-package-card li b {
	color: #0c8c33;
	font-size: 17px;
	font-weight: 950;
}

.atr-shop-cover-preview {
	position: relative;
	min-height: 238px;
	background: linear-gradient(135deg, #e8fff0, #fff8de);
	overflow: hidden;
}

.atr-shop-cover-preview img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.atr-shop-profile-row {
	position: relative;
	display: flex;
	align-items: end;
	gap: 18px;
	min-height: 84px;
	padding: 0 22px 18px;
	background: #fff;
}

.atr-shop-avatar-preview {
	position: relative;
	display: grid;
	place-items: center;
	width: 112px;
	height: 112px;
	margin-top: -52px;
	border: 5px solid #fff;
	border-radius: 18px;
	background: #e8fff0;
	color: #0b8f35;
	font-size: 42px;
	font-weight: 950;
	overflow: hidden;
	box-shadow: 0 18px 34px rgba(16, 23, 37, 0.14);
}

.atr-shop-avatar-preview img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.atr-shop-media-button,
.atr-shop-avatar-button {
	position: absolute;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 34px;
	padding: 0 12px;
	border-radius: 8px;
	background: rgba(16, 23, 37, 0.82);
	color: #fff;
	font-size: 12px;
	font-weight: 900;
	cursor: pointer;
}

.atr-shop-media-button {
	right: 16px;
	bottom: 16px;
}

.atr-shop-avatar-button {
	right: 6px;
	bottom: 6px;
	min-height: 30px;
	padding: 0 9px;
	font-size: 11px;
}

.atr-shop-media-button input,
.atr-shop-avatar-button input {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.atr-shop-profile-title {
	min-width: 0;
	padding-bottom: 4px;
}

.atr-shop-profile-title span {
	display: inline-flex;
	margin-bottom: 6px;
	color: #12b844;
	font-size: 12px;
	font-weight: 900;
	text-transform: uppercase;
}

.atr-shop-profile-title h3 {
	margin: 0;
	font-size: 24px;
	line-height: 1.15;
}

.atr-shop-upload-progress {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 10px;
	align-items: center;
	padding: 12px 16px;
	border-top: 1px solid #e6edf4;
	background: #fff;
}

.atr-shop-upload-progress[hidden] {
	display: none;
}

.atr-shop-upload-progress span {
	height: 9px;
	overflow: hidden;
	border-radius: 999px;
	background: #e6edf4;
}

.atr-shop-upload-progress em {
	display: block;
	height: 100%;
	border-radius: inherit;
	background: #12b844;
	transition: width 0.16s ease;
}

.atr-shop-upload-progress strong {
	min-width: 40px;
	color: #101725;
	font-size: 13px;
	font-weight: 900;
	text-align: right;
}

.atr-shop-edit-form {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	align-items: start;
}

.atr-shop-edit-form > input[type="hidden"] {
	display: none;
}

.atr-shop-edit-form .atr-shop-card__top,
.atr-shop-edit-form .atr-shop-listings,
.atr-shop-edit-form .atr-panel-actions {
	grid-column: 1 / -1;
}

.atr-shop-edit-form .atr-shop-card__top,
.atr-shop-edit-form .atr-shop-listings {
	display: none;
}

.atr-shop-edit-form > .atr-panel-field:nth-of-type(2) {
	grid-column: 1 / -1;
}

.atr-shop-edit-form > .atr-panel-field:nth-of-type(2) textarea {
	min-height: 104px;
}

.atr-shop-edit-form > .atr-panel-field:nth-of-type(n+6):nth-of-type(-n+9) {
	padding: 14px;
	border: 1px solid #e6edf4;
	border-radius: 8px;
	background: #fbfcfe;
}

.atr-shop-edit-form input[type="file"] {
	padding: 12px;
	background: #fff;
}

.atr-shop-edit-form > .atr-panel-field:has(input[name="shop_logo_file"]:not([data-atr-shop-media-input])),
.atr-shop-edit-form > .atr-panel-field:has(input[name="shop_cover_file"]:not([data-atr-shop-media-input])) {
	display: none;
}

.atr-shop-listings {
	display: grid;
	gap: 8px;
	padding: 14px;
	border: 1px solid #e6edf4;
	border-radius: 8px;
	background: #fbfcfe;
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.atr-shop-listings strong {
	grid-column: 1 / -1;
	color: #101725;
	font-size: 14px;
}

.atr-shop-listings a {
	justify-content: flex-start;
	min-height: 34px;
	padding: 0;
	background: transparent;
	box-shadow: none;
	color: #1b5fb8;
}

.atr-shop-card__top {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-bottom: 12px;
}

.atr-shop-card__top img {
	width: 58px;
	height: 58px;
	border-radius: 12px;
	object-fit: cover;
	background: #eef3f6;
}

.atr-shop-card__top span {
	color: #12b844;
	font-size: 12px;
	font-weight: 900;
	text-transform: uppercase;
}

.atr-application-list {
	display: grid;
	gap: 10px;
}

/* ---------------------------------------------------------------------------
 * Messages. Desktop is a two-pane board; the mobile list/thread switch lives at
 * the end of this file with the rest of the account overrides.
 * ------------------------------------------------------------------------ */

.atr-messages {
	display: grid;
	grid-template-columns: minmax(280px, 0.36fr) minmax(0, 1fr);
	gap: 16px;
	align-items: stretch;
	min-height: 0;
}

.atr-msg-list,
.atr-msg-thread {
	display: flex;
	flex-direction: column;
	min-width: 0;
	overflow: hidden;
	border: 1px solid #e6edf4;
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 14px 40px rgba(16, 23, 37, 0.06);
}

.atr-msg-list .atr-account-screen-title {
	margin: 0;
	padding: 16px 18px;
	border-bottom: 1px solid #eef3f6;
	font-size: 17px;
}

.atr-msg-threads {
	flex: 1 1 auto;
	overflow-y: auto;
	max-height: 620px;
}

/* Row ------------------------------------------------------------------- */

.atr-msg-row {
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr) auto;
	gap: 12px;
	align-items: center;
	padding: 13px 16px;
	border-bottom: 1px solid #f1f5f8;
	color: #101725;
	text-decoration: none;
}

.atr-msg-row:last-child {
	border-bottom: 0;
}

.atr-msg-row:hover {
	background: #f7fafc;
}

.atr-msg-row.is-active {
	background: #f1fbf4;
}

.atr-msg-row__body {
	display: grid;
	gap: 2px;
	min-width: 0;
}

.atr-msg-row__top {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	min-width: 0;
}

.atr-msg-row__top strong {
	overflow: hidden;
	font-size: 14px;
	font-weight: 800;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.atr-msg-row__top time {
	flex: 0 0 auto;
	color: #8d99ab;
	font-size: 12px;
	font-weight: 700;
}

.atr-msg-row__listing,
.atr-msg-row__snippet {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.atr-msg-row__listing {
	color: #0c8c33;
	font-size: 12px;
	font-weight: 750;
}

.atr-msg-row__snippet {
	color: #6b7789;
	font-size: 13px;
	font-weight: 600;
}

/* Unread carries weight and colour, not just a dot — the dot alone is easy to miss. */
.atr-msg-row.is-unread .atr-msg-row__top strong,
.atr-msg-row.is-unread .atr-msg-row__snippet {
	color: #0a1220;
	font-weight: 850;
}

.atr-msg-row__badge {
	display: grid;
	place-items: center;
	min-width: 22px;
	height: 22px;
	padding: 0 6px;
	border-radius: 999px;
	background: #12b844;
	color: #fff;
	font-size: 12px;
	font-weight: 900;
}

.atr-msg-avatar {
	display: grid;
	place-items: center;
	overflow: hidden;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: #e9f7ee;
	color: #0c8c33;
	font-size: 17px;
	font-weight: 900;
}

.atr-msg-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Thread pane ----------------------------------------------------------- */

.atr-msg-thread__head {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 16px;
	border-bottom: 1px solid #eef3f6;
	background: #fff;
}

.atr-msg-thread__head .atr-msg-avatar {
	width: 38px;
	height: 38px;
	font-size: 15px;
}

.atr-msg-thread__who {
	display: grid;
	gap: 1px;
	min-width: 0;
}

.atr-msg-thread__who strong {
	overflow: hidden;
	font-size: 15px;
	font-weight: 850;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.atr-msg-thread__who a,
.atr-msg-thread__who span {
	overflow: hidden;
	color: #0c8c33;
	font-size: 12.5px;
	font-weight: 750;
	text-decoration: none;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* The back link is a mobile affordance; desktop already shows the list beside this. */
.atr-msg-back {
	display: none;
	align-items: center;
	gap: 2px;
	margin-left: -6px;
	color: #101725;
	font-size: 14px;
	font-weight: 800;
	text-decoration: none;
}

.atr-msg-back svg {
	width: 20px;
	height: 20px;
}

.atr-msg-bubbles {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 8px;
	min-height: 320px;
	max-height: 520px;
	overflow-y: auto;
	padding: 18px;
	background: #f7f9fc;
}

/* Short conversations sit next to the composer rather than floating at the top.
   margin-top:auto rather than justify-content:flex-end — the latter makes the
   overflowing top of a long thread unreachable in a scrolling flex container. */
.atr-msg-bubbles > :first-child {
	margin-top: auto;
}

.atr-msg-day {
	display: grid;
	place-items: center;
	margin: 6px 0;
}

.atr-msg-day span {
	padding: 3px 12px;
	border-radius: 999px;
	background: #e7ecf3;
	color: #66738a;
	font-size: 11.5px;
	font-weight: 800;
}

.atr-msg-bubble {
	align-self: flex-start;
	max-width: min(520px, 82%);
	padding: 9px 13px 7px;
	border-radius: 14px 14px 14px 4px;
	background: #fff;
	box-shadow: 0 6px 16px rgba(16, 23, 37, 0.06);
}

.atr-msg-bubble.is-mine {
	align-self: flex-end;
	border-radius: 14px 14px 4px;
	background: #e3f9ea;
}

.atr-msg-bubble p {
	margin: 0;
	color: #101725;
	font-size: 14.5px;
	font-weight: 550;
	line-height: 1.45;
	overflow-wrap: anywhere;
}

/* Small and quiet: at the old size the timestamp read as part of the message. */
.atr-msg-bubble time {
	display: block;
	margin-top: 2px;
	color: #93a0b1;
	font-size: 11px;
	font-weight: 600;
	text-align: right;
}

.atr-msg-composer {
	display: flex;
	align-items: flex-end;
	gap: 10px;
	padding: 12px 14px;
	border-top: 1px solid #eef3f6;
	background: #fff;
}

.atr-msg-composer textarea {
	flex: 1 1 auto;
	min-height: 44px;
	max-height: 140px;
	border: 1px solid #dfe6ee;
	border-radius: 22px;
	padding: 11px 16px;
	background: #f7f9fc;
	color: #101725;
	font: inherit;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
	resize: none;
	outline: 0;
}

.atr-msg-composer textarea:focus {
	border-color: #12b844;
	background: #fff;
	box-shadow: 0 0 0 3px rgba(18, 184, 68, 0.13);
}

.atr-msg-composer button {
	display: grid;
	flex: 0 0 auto;
	place-items: center;
	width: 44px;
	height: 44px;
	border: 0;
	border-radius: 50%;
	background: #12b844;
	color: #fff;
	cursor: pointer;
}

.atr-msg-composer button:disabled {
	opacity: 0.55;
	cursor: not-allowed;
}

.atr-msg-closed,
.atr-msg-error {
	margin: 0;
	padding: 14px 16px;
	border-top: 1px solid #eef3f6;
	color: #6b7789;
	font-size: 13px;
	font-weight: 700;
	text-align: center;
}

.atr-msg-error {
	color: #b42318;
	background: #fdeceb;
}

.atr-msg-empty {
	display: grid;
	place-items: center;
	gap: 8px;
	padding: 54px 24px;
	text-align: center;
}

.atr-msg-empty svg {
	width: 40px;
	height: 40px;
	color: #b6c2d1;
}

.atr-msg-empty strong {
	font-size: 16px;
	font-weight: 900;
}

.atr-msg-empty p {
	max-width: 320px;
	margin: 0;
	color: #7b8798;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.5;
}

.atr-msg-empty__cta {
	margin-top: 6px;
	padding: 10px 18px;
	border-radius: 8px;
	background: #12b844;
	color: #fff;
	font-size: 14px;
	font-weight: 850;
	text-decoration: none;
}

.atr-msg-empty--pick {
	flex: 1 1 auto;
	align-content: center;
	color: #97a3b4;
}

.atr-application-list div {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 16px;
}

.atr-panel-login {
	display: grid;
	gap: 10px;
	max-width: 520px;
	margin: 0 auto;
	text-align: center;
}

@media (max-width: 900px) {
	.atr-panel-hero,
	.atr-panel-stats,
	.atr-panel-grid,
	.atr-shop-grid {
		grid-template-columns: 1fr;
	}

	.atr-profile-panel .atr-panel-grid,
	.atr-profile-form {
		grid-template-columns: 1fr;
	}

	.atr-profile-form-actions {
		margin: 0;
	}

	.atr-panel-hero {
		display: grid;
	}

	.atr-panel-form-grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 720px) {
	/* Cover on its own row, the other three underneath — four across is unreadable
	   at 390px. */
	.atr-uploads {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 7px;
	}

	.atr-upload {
		height: 104px;
	}

	.atr-upload.is-primary {
		grid-column: 1 / -1;
		height: 168px;
	}

	.atr-shop-package-card {
		grid-template-columns: 1fr;
	}

	.atr-shop-package-card ul {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.atr-shop-edit-form,
	.atr-shop-listings {
		grid-template-columns: 1fr;
	}

	.atr-shop-cover-preview {
		min-height: 176px;
	}

	.atr-shop-profile-row {
		align-items: center;
		padding: 0 16px 16px;
	}

	.atr-shop-avatar-preview {
		width: 88px;
		height: 88px;
		margin-top: -38px;
		border-radius: 16px;
		font-size: 32px;
	}

	.atr-shop-profile-title h3 {
		font-size: 20px;
	}

	.atr-shop-edit-form > .atr-panel-field:nth-of-type(n+6):nth-of-type(-n+9) {
		padding: 0;
		border: 0;
		background: transparent;
	}
}

@media (max-width: 560px) {
	.atr-panel {
		width: min(100% - 28px, 430px);
	}

	.atr-panel-hero,
	.atr-panel-form,
	.atr-panel-card,
	.atr-shop-card,
	.atr-panel-empty {
		padding: 18px;
	}

	.atr-profile-identity {
		align-items: flex-start;
	}

	.atr-profile-avatar {
		width: 58px;
		height: 58px;
		border-radius: 14px;
		font-size: 24px;
	}

	.atr-profile-form {
		padding: 0;
	}

	.atr-panel-listing {
		grid-template-columns: 88px minmax(0, 1fr);
	}

	.atr-panel-listing img {
		width: 88px;
	}
}

.atr-taptap-page {
	width: min(1220px, calc(100% - 48px));
	max-width: 1220px;
	margin: 0 auto;
	padding: 42px 0 70px;
}

.atr-taptap-hero {
	display: grid;
	grid-template-columns: minmax(0, 0.8fr) minmax(420px, 1fr);
	gap: 36px;
	align-items: start;
	padding: 34px;
	border: 1px solid rgba(18, 184, 68, 0.16);
	border-radius: 8px;
	background:
		linear-gradient(135deg, rgba(233, 251, 239, 0.96), rgba(255, 248, 224, 0.96)),
		#f7fff9;
	box-shadow: 0 18px 44px rgba(7, 17, 31, 0.07);
}

.atr-taptap-hero__copy {
	padding: 10px 0;
}

.atr-taptap-hero__copy span {
	display: inline-flex;
	margin: 0 0 14px;
	color: #12b844;
	font-size: 13px;
	font-weight: 950;
	line-height: 1.2;
	text-transform: uppercase;
}

.atr-taptap-hero__copy h2 {
	max-width: 560px;
	margin: 0;
	color: #07111f;
	font-size: 42px;
	font-weight: 950;
	line-height: 1.08;
}

.atr-taptap-hero__copy p {
	max-width: 520px;
	margin: 18px 0 0;
	color: #40506a;
	font-size: 17px;
	font-weight: 650;
	line-height: 1.55;
}

.atr-taptap-hero__stat {
	display: inline-grid;
	grid-template-columns: auto auto;
	gap: 8px;
	align-items: end;
	margin-top: 22px;
	padding: 10px 14px;
	border: 1px solid rgba(18, 184, 68, 0.16);
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.72);
}

.atr-taptap-hero__stat strong {
	color: #07111f;
	font-size: 28px;
	font-weight: 950;
	line-height: 1;
}

.atr-taptap-hero__stat small {
	color: #647084;
	font-size: 13px;
	font-weight: 850;
	line-height: 1;
}

.atr-taptap-create-wrap {
	display: grid;
	gap: 14px;
}

.atr-taptap-create {
	border-radius: 8px;
}

.atr-taptap-create summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 72px;
	padding: 16px 18px;
	border: 1px solid rgba(18, 184, 68, 0.2);
	border-radius: 8px;
	background: #12b844;
	color: #fff;
	cursor: pointer;
	box-shadow: 0 14px 30px rgba(18, 184, 68, 0.24);
	list-style: none;
}

.atr-taptap-create summary::-webkit-details-marker {
	display: none;
}

.atr-taptap-create summary::after {
	content: "+";
	display: grid;
	place-items: center;
	flex: 0 0 34px;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.18);
	font-size: 24px;
	font-weight: 800;
	line-height: 1;
}

.atr-taptap-create[open] summary {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

.atr-taptap-create[open] summary::after {
	content: "-";
}

.atr-taptap-create summary span {
	display: block;
	min-width: 0;
}

.atr-taptap-create summary strong {
	display: block;
	font-size: 18px;
	font-weight: 950;
	line-height: 1.1;
}

.atr-taptap-create summary small {
	display: block;
	margin-top: 5px;
	color: rgba(255, 255, 255, 0.86);
	font-size: 13px;
	font-weight: 750;
	line-height: 1.2;
}

.atr-taptap-form {
	display: grid;
	gap: 16px;
	padding: 24px;
	border: 1px solid rgba(223, 230, 238, 0.8);
	border-top: 0;
	border-radius: 8px;
	border-top-left-radius: 0;
	border-top-right-radius: 0;
	background: #fff;
	box-shadow: 0 16px 38px rgba(7, 17, 31, 0.08);
}

.atr-taptap-notice {
	padding: 13px 15px;
	border: 1px solid #ffd6d6;
	border-radius: 8px;
	background: #fff4f4;
	color: #a22525;
	font-size: 14px;
	font-weight: 850;
}

.atr-taptap-notice--success {
	border-color: #ccefd7;
	background: #effbf3;
	color: #08752a;
}

.atr-taptap-form label {
	display: grid;
	gap: 8px;
	margin: 0;
	color: #101725;
	font-weight: 850;
}

.atr-taptap-form label span {
	font-size: 13px;
}

.atr-taptap-form input,
.atr-taptap-form select,
.atr-taptap-form textarea {
	width: 100%;
	min-height: 50px;
	border: 1px solid #dfe6ee;
	border-radius: 8px;
	background: #fff;
	color: #101725;
	font: inherit;
	outline: 0;
	padding: 13px 14px;
}

.atr-taptap-form textarea {
	min-height: 112px;
	resize: vertical;
	line-height: 1.45;
}

.atr-taptap-form input:focus,
.atr-taptap-form select:focus,
.atr-taptap-form textarea:focus {
	border-color: #12b844;
	box-shadow: 0 0 0 3px rgba(18, 184, 68, 0.15);
}

.atr-taptap-form__main input {
	min-height: 58px;
	font-size: 17px;
	font-weight: 750;
}

.atr-taptap-form__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
}

.atr-taptap-form__note {
	grid-column: 1 / -1;
}

.atr-taptap-form button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: max-content;
	min-width: 210px;
	min-height: 52px;
	border: 0;
	border-radius: 8px;
	background: #12b844;
	color: #fff;
	font: inherit;
	font-size: 16px;
	font-weight: 950;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 12px 24px rgba(18, 184, 68, 0.24);
}

.atr-taptap-results {
	margin-top: 36px;
}

.atr-taptap-results__head {
	display: flex;
	align-items: end;
	justify-content: space-between;
	gap: 20px;
	margin-bottom: 18px;
}

.atr-taptap-results__head h2 {
	margin: 0;
	color: #07111f;
	font-size: 30px;
	font-weight: 950;
	line-height: 1.1;
}

.atr-taptap-results__head span {
	color: #647084;
	font-size: 14px;
	font-weight: 850;
}

.atr-taptap-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
}

.atr-taptap-card,
.atr-taptap-empty {
	border: 1px solid #e7edf3;
	border-radius: 8px;
	background: #fff;
	box-shadow: 0 12px 28px rgba(7, 17, 31, 0.05);
}

.atr-taptap-card {
	display: grid;
	align-content: start;
	gap: 12px;
	min-height: 210px;
	padding: 20px;
}

.atr-taptap-card__chip {
	justify-self: start;
	display: inline-flex;
	align-items: center;
	min-height: 26px;
	padding: 0 10px;
	border-radius: 999px;
	background: #e9fbef;
	color: #08752a;
	font-size: 12px;
	font-weight: 950;
}

.atr-taptap-card h3 {
	margin: 0;
	color: #07111f;
	font-size: 20px;
	font-weight: 950;
	line-height: 1.2;
}

.atr-taptap-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.atr-taptap-card__meta span {
	display: inline-flex;
	align-items: center;
	min-height: 28px;
	padding: 0 10px;
	border-radius: 999px;
	background: #f4f7fb;
	color: #40506a;
	font-size: 12px;
	font-weight: 850;
}

.atr-taptap-card p {
	margin: 0;
	color: #566579;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.45;
}

.atr-taptap-card small {
	align-self: end;
	color: #8a96a8;
	font-size: 12px;
	font-weight: 800;
}

.atr-taptap-empty {
	display: grid;
	gap: 8px;
	place-items: center;
	min-height: 190px;
	padding: 30px;
	text-align: center;
}

.atr-taptap-empty strong {
	color: #07111f;
	font-size: 22px;
	font-weight: 950;
}

.atr-taptap-empty span {
	color: #647084;
	font-size: 15px;
	font-weight: 700;
}

.atr-taptap-pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin-top: 24px;
}

.atr-taptap-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	min-height: 40px;
	padding: 0 13px;
	border: 1px solid #dfe6ee;
	border-radius: 8px;
	background: #fff;
	color: #40506a;
	font-size: 14px;
	font-weight: 900;
	text-decoration: none;
}

.atr-taptap-pagination .page-numbers.current {
	border-color: #12b844;
	background: #12b844;
	color: #fff;
}

body.aletrent-email-auth-page .atg-main {
	padding-top: 0;
	padding-bottom: 0;
}

body.aletrent-email-auth-page .atg-account-auth,
body.aletrent-email-auth-page .atg-account-auth .entry-content {
	margin: 0;
	padding: 0;
}

body.aletrent-email-auth-page .atg-account-auth .entry-content > *:first-child {
	margin-top: 0;
}

.atr-auth {
	width: min(100% - 28px, 448px);
	margin: 42px auto 64px;
	color: #07111f;
	font-family: "Inter", Arial, Helvetica, sans-serif;
}

.atr-auth__card {
	padding: 28px;
	border: 1px solid #e3e9f2;
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 14px 34px rgba(7, 17, 31, 0.07);
}

.atr-auth__top {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 18px;
	margin-bottom: 24px;
}

.atr-auth__brand {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	color: #07111f;
	text-decoration: none;
}

.atr-auth__brand img {
	display: block;
	width: auto;
	max-width: 168px;
	height: 38px;
	object-fit: contain;
}

.atr-auth__brand span {
	display: inline-grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border-radius: 8px;
	background: #12b844;
	color: #fff;
	font-size: 18px;
	font-weight: 950;
	line-height: 1;
}

.atr-auth__brand strong {
	font-size: 20px;
	font-weight: 950;
	line-height: 1;
	letter-spacing: 0;
}

.atr-auth h1 {
	margin: 0;
	color: #07111f;
	font-size: 30px;
	font-weight: 950;
	line-height: 1.15;
}

.atr-auth__intro {
	margin: 10px 0 26px;
	color: #52617a;
	font-size: 15px;
	font-weight: 650;
	line-height: 1.6;
}

.atr-auth__form,
.atr-auth__resend {
	display: grid;
	gap: 18px;
	margin: 0;
}

.atr-auth__resend {
	margin-top: 22px;
	padding-top: 20px;
	border-top: 1px solid #e3e9f2;
}

.atr-auth__field {
	display: grid;
	gap: 8px;
	margin: 0;
	color: #3b322d;
	font-size: 15px;
	font-weight: 750;
}

.atr-auth__field > span:first-child {
	display: block;
	line-height: 1.2;
}

.atr-auth__password {
	position: relative;
	display: block;
}

.atr-auth__field input {
	width: 100%;
	height: 44px;
	margin: 0;
	padding: 0 14px;
	border: 1px solid #dce4ee;
	border-radius: 14px;
	background: #eef5ff;
	color: #07111f;
	font: inherit;
	font-size: 14px;
	font-weight: 650;
	line-height: 1;
	outline: 0;
	transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.atr-auth__password input {
	padding-right: 46px;
}

.atr-auth__password button {
	position: absolute;
	top: 50%;
	right: 10px;
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: #52617a;
	cursor: pointer;
	transform: translateY(-50%);
}

.atr-auth__password button::before,
.atr-auth__password button::after {
	content: "";
	position: absolute;
}

.atr-auth__password button::before {
	width: 18px;
	height: 11px;
	border: 2px solid currentColor;
	border-radius: 50%;
}

.atr-auth__password button::after {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
}

.atr-auth__password button[aria-pressed="true"]::after {
	width: 19px;
	height: 2px;
	border-radius: 999px;
	background: currentColor;
	transform: rotate(-35deg);
}

.atr-auth__password button:hover,
.atr-auth__password button:focus {
	background: #dfeafb;
	color: #07111f;
	outline: 0;
}

.atr-auth__field input::placeholder {
	color: #9aa7ba;
	font-weight: 650;
	opacity: 1;
}

.atr-auth__field input:focus {
	border-color: #12b844;
	background: #fff;
	box-shadow: 0 0 0 4px rgba(18, 184, 68, 0.14);
}

.atr-auth__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 42px;
	margin: 4px 0 0;
	padding: 0 18px;
	border: 0;
	border-radius: 8px;
	background: #12b844;
	color: #fff;
	font: inherit;
	font-size: 15px;
	font-weight: 950;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
	box-shadow: 0 14px 26px rgba(18, 184, 68, 0.22);
}

.atr-auth__button:hover,
.atr-auth__button:focus {
	background: #0fa13a;
	color: #fff;
	transform: translateY(-1px);
}

.atr-auth__button:focus {
	outline: 0;
	box-shadow: 0 0 0 4px rgba(18, 184, 68, 0.18), 0 14px 26px rgba(18, 184, 68, 0.22);
}

.atr-auth__foot {
	margin: 14px 0 0;
	color: #52617a;
	font-size: 14px;
	font-weight: 650;
	line-height: 1.5;
}

.atr-auth__forgot {
	margin: 20px 0 0;
	font-size: 14px;
	font-weight: 850;
	line-height: 1.4;
}

.atr-auth__foot a,
.atr-auth__forgot a,
.atr-auth__link-button {
	border: 0;
	background: transparent;
	color: #07111f;
	font: inherit;
	font-size: 14px;
	font-weight: 850;
	line-height: 1.3;
	text-decoration: none;
	cursor: pointer;
}

.atr-auth__foot a:hover,
.atr-auth__foot a:focus,
.atr-auth__forgot a:hover,
.atr-auth__forgot a:focus,
.atr-auth__link-button:hover,
.atr-auth__link-button:focus {
	color: #12a63f;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.atr-auth__notice {
	margin: 0 0 18px;
	padding: 13px 14px;
	border: 1px solid #dce4ee;
	border-radius: 14px;
	background: #f7f9fc;
	color: #40506a;
	font-size: 14px;
	font-weight: 800;
	line-height: 1.4;
}

.atr-auth__notice--success {
	border-color: #ccefd7;
	background: #effbf3;
	color: #08752a;
}

.atr-auth__notice--error {
	border-color: #ffd4d4;
	background: #fff4f4;
	color: #a22525;
}

@media (max-width: 980px) {
	.atr-store-top__inner {
		grid-template-columns: 1fr;
		gap: 26px;
	}

	.atr-store-top__visual {
		justify-self: center;
	}

	.atr-benefits-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.atr-benefits-form-grid {
		grid-template-columns: 1fr;
	}

	.atr-taptap-hero {
		grid-template-columns: 1fr;
	}

	.atr-taptap-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

}

@media (max-width: 620px) {
	.atr-benefits-shell {
		width: min(100% - 28px, 430px);
	}

	.atr-store-top {
		padding-top: 34px;
	}

	.atr-store-top__copy h1 {
		font-size: 34px;
	}

	.atr-store-top__copy p {
		font-size: 16px;
	}

	.atr-store-top__copy a {
		width: 100%;
	}

	.atr-store-top__visual {
		width: 190px;
	}

	.atr-store-top__visual img {
		width: 170px;
		height: 170px;
	}

	.atr-benefits-section {
		padding-top: 26px;
	}

	.atr-benefits-title {
		margin-bottom: 26px;
		font-size: 32px;
	}

	.atr-benefits-grid,
	.atr-store-application-form {
		grid-template-columns: 1fr;
	}

	.atr-benefit-card {
		min-height: 150px;
	}

	.atr-benefits-form-copy h2 {
		font-size: 30px;
	}

	.atr-store-application-form {
		padding: 22px;
	}

	.atr-store-application-form button {
		width: 100%;
	}

	.atr-taptap-page {
		width: min(100% - 28px, 430px);
		padding: 28px 0 46px;
	}

	.atr-taptap-hero {
		gap: 22px;
		padding: 20px;
	}

	.atr-taptap-hero__copy h2 {
		font-size: 28px;
	}

	.atr-taptap-hero__copy p {
		font-size: 15px;
	}

	.atr-taptap-create summary {
		align-items: flex-start;
		min-height: 64px;
	}

	.atr-taptap-create summary span {
		display: block;
	}

	.atr-taptap-create summary strong {
		font-size: 16px;
	}

	.atr-taptap-create summary small {
		font-size: 12px;
	}

	.atr-taptap-form {
		padding: 18px;
	}

	.atr-taptap-form__grid,
	.atr-taptap-grid {
		grid-template-columns: 1fr;
	}

	.atr-taptap-form button {
		width: 100%;
	}

	.atr-taptap-results__head {
		align-items: start;
		flex-direction: column;
		gap: 6px;
	}

	.atr-taptap-results__head h2 {
		font-size: 26px;
	}

}

/* ==========================================================================
   Account area, mobile. Kept at the end of the file on purpose: several of these
   override .atr-profile-panel rules of equal specificity defined further up, and a
   media query adds no specificity of its own.
   ========================================================================== */

@media (max-width: 760px) {
	/* --- Reclaim the horizontal space -------------------------------------------------
	   At 390px the panel was only 314px wide: the Elementor container adds 14px margin
	   + 10px padding per side and .atr-panel adds another 14px, then every inner card
	   adds its own. Flatten all of it and let one 16px gutter do the work. */
	body.aletrent-account-page .atg-elementor-main .elementor-element.e-con,
	body.aletrent-account-page .atg-elementor-main .e-con-inner {
		width: 100%;
		max-width: none;
		margin-inline: 0;
		padding-inline: 0;
	}

	/* .atr-panel ships width: min(1220px, calc(100% - 48px)) for the desktop gutter. */
	body.aletrent-account-page .atr-panel {
		width: 100%;
		max-width: none;
		margin-inline: 0;
		padding: 14px 0 20px;
		gap: 16px;
	}

	/* Identity: avatar, name, e-mail. A plain header row, not a card. */
	body.aletrent-account-page .atr-profile-panel .atr-panel-hero {
		display: block;
		min-height: 0;
		padding: 2px 16px 0;
		border: 0;
		border-radius: 0;
		background: none;
		box-shadow: none;
	}

	body.aletrent-account-page .atr-profile-identity {
		display: grid;
		grid-template-columns: 52px 1fr;
		gap: 12px;
		align-items: center;
	}

	body.aletrent-account-page .atr-profile-avatar {
		width: 52px;
		height: 52px;
		min-width: 0;
		border-radius: 50%;
		font-size: 20px;
	}

	body.aletrent-account-page .atr-profile-avatar img {
		width: 100%;
		height: 100%;
		border-radius: 50%;
		object-fit: cover;
	}

	body.aletrent-account-page .atr-panel-hero h2 {
		margin: 0;
		font-size: 17px;
		line-height: 1.25;
		overflow-wrap: anywhere;
	}

	body.aletrent-account-page .atr-panel-hero p {
		margin: 2px 0 0;
		color: #687386;
		font-size: 13px;
		font-weight: 600;
		overflow-wrap: anywhere;
	}

	/* Account details screen: a title, then the form. Nothing else. */
	body.aletrent-account-page .atr-account-screen-title {
		margin: 0;
		padding: 0 16px;
		font-size: 19px;
		line-height: 1.2;
	}

	body.aletrent-account-page .atr-profile-form,
	body.aletrent-account-page .atr-password-form {
		width: 100%;
		padding: 0;
		border-radius: 0;
		border-inline: 0;
		box-shadow: none;
	}

	body.aletrent-account-page .atr-profile-form .atr-panel-form-grid,
	body.aletrent-account-page .atr-password-form .atr-panel-form-grid {
		padding: 18px 16px;
	}

	body.aletrent-account-page .atr-account-section-title {
		padding: 0 16px;
		font-size: 16px;
	}

	body.aletrent-account-page .atr-profile-photo {
		padding: 20px 16px;
	}

	/* Deliberately not sticky. A pinned bar sat on top of the last field, and for five
	   fields the scroll back down is cheaper than stacking a second fixed bar over the
	   bottom nav. */
	body.aletrent-account-page .atr-profile-form-actions {
		padding: 0 16px 20px;
	}

	body.aletrent-account-page .atr-profile-form .atr-panel-submit {
		min-height: 50px;
	}

	/* Sub-pages keep just a way back to the hub; the bottom nav covers everything else. */
	.atr-account-nav.is-sub {
		padding: 0;
		border: 0;
		background: none;
		box-shadow: none;
		overflow: visible;
	}

	.atr-account-nav.is-sub .atr-account-nav__new,
	.atr-account-nav.is-sub .atr-account-nav__row,
	.atr-account-nav.is-sub .atr-account-nav__logout {
		display: none;
	}

	.atr-account-nav.is-sub a.atr-account-nav__back {
		min-height: 44px;
		padding: 0 12px 0 6px;
		font-size: 14px;
	}

	/* Full width, and the list goes edge-to-edge: no card, no radius, no shadow.
	   Only the CTA keeps a gutter, because a button touching both edges reads as a bar. */
	.atr-account-hub {
		width: 100%;
		gap: 18px;
	}

	.atr-account-hub__cta {
		margin: 0 16px;
		min-height: 50px;
		border-radius: 12px;
	}

	.atr-account-hub__group-label {
		padding: 0 16px;
	}

	.atr-account-hub__list {
		border-inline: 0;
		border-radius: 0;
		border-top: 1px solid #eaeef3;
		border-bottom: 1px solid #eaeef3;
	}
}

/* ==========================================================================
   Auth screens (login / register / verification), mobile.
   Kept at the end for the same reason as the account block: these override
   .atr-auth rules of equal specificity defined earlier in the file.
   ========================================================================== */

@media (max-width: 760px) {
	/* Flat, not a card floating on a page. The site header already frames the screen,
	   so a second bordered box around the form just nests boxes. */
	.atr-auth {
		width: 100%;
		margin: 0 0 32px;
	}

	.atr-auth__card {
		padding: 24px 16px 28px;
		border: 0;
		border-radius: 0;
		background: none;
		box-shadow: none;
	}

	/* The header two rows up already shows the logo. */
	.atr-auth__top {
		display: none;
	}

	.atr-auth h1 {
		margin-top: 4px;
	}

	/* The tinted fill read as an input while it sat on the white card; on the page's grey
	   background it just looks muddy. White reads as "type here" against grey. */
	.atr-auth__field input {
		height: 50px;
		background: #fff;
		font-size: 16px;
	}
}

/* ---------------------------------------------------------------------------
 * Messages — mobile.
 *
 * Kept at the end of the file on purpose: these rules share specificity with the
 * .atr-msg-* base block above and a media query adds none, so higher up they get
 * silently overridden. Same reason as the account block.
 *
 * The screen switch is driven by .is-thread-open, which PHP sets from ?thread= —
 * one signal for both the CSS here and the bottom-nav visibility filter.
 * ------------------------------------------------------------------------ */

@media (max-width: 900px) {
	.atr-messages {
		grid-template-columns: 1fr;
		gap: 0;
	}

	/* The thread screen has its own "‹ Mesajlar" link; the account nav's "‹ Hesab"
	   stacked on top of it made two back links on one screen. */
	.atr-messages-panel.is-thread-open .atr-account-nav {
		display: none;
	}

	/* Only one pane at a time; the other is not rendered smaller, it is gone. */
	.atr-messages .atr-msg-thread {
		display: none;
	}

	.atr-messages.is-thread-open .atr-msg-list {
		display: none;
	}

	.atr-messages.is-thread-open .atr-msg-thread {
		display: flex;
	}

	/* Edge to edge: a card inset inside a phone screen wastes the width the
	   snippets need. */
	.atr-msg-list,
	.atr-msg-thread {
		border: 0;
		border-radius: 0;
		background: transparent;
		box-shadow: none;
	}

	.atr-msg-list .atr-account-screen-title {
		padding: 4px 4px 12px;
		border-bottom: 0;
		font-size: 20px;
	}

	.atr-msg-threads {
		max-height: none;
		border-radius: 12px;
		background: #fff;
	}

	.atr-msg-row {
		padding: 12px 14px;
	}

	/* The conversation owns the viewport: sticky header, scrolling log, pinned
	   composer. dvh so iOS browser chrome cannot push the composer off-screen. */
	.atr-messages.is-thread-open .atr-msg-thread {
		height: calc(100vh - 150px);
		height: calc(100dvh - 150px);
		min-height: 420px;
	}

	.atr-msg-thread__head {
		position: sticky;
		top: 0;
		z-index: 2;
		flex: 0 0 auto;
		margin: 0 -4px;
		padding: 10px 14px;
		border-radius: 0;
	}

	.atr-msg-back {
		display: inline-flex;
	}

	/* The name is already in the header; the back link makes the row wide enough
	   that the listing link needs the room more. */
	.atr-msg-thread__head .atr-msg-avatar {
		width: 34px;
		height: 34px;
	}

	.atr-msg-bubbles {
		flex: 1 1 auto;
		min-height: 0;
		max-height: none;
		margin: 0 -4px;
		padding: 14px;
	}

	.atr-msg-bubble {
		max-width: 84%;
	}

	.atr-msg-composer {
		position: sticky;
		bottom: 0;
		z-index: 2;
		flex: 0 0 auto;
		margin: 0 -4px;
		padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
	}

	/* Below 16px iOS zooms the page when the field takes focus. */
	.atr-msg-composer textarea {
		min-height: 42px;
		font-size: 16px;
	}

	.atr-msg-empty {
		padding: 40px 20px;
	}
}

/* Live character counter, bottom right of its field — out of the reading path but next to
   the corner your eye lands on when you stop typing. */
.atr-field-counter {
	display: block;
	margin-top: 6px;
	color: #7b8798;
	font-size: 12.5px;
	font-weight: 700;
	text-align: right;
}

.atr-field-counter.is-warning {
	color: #b26a00;
}

.atr-field-counter.is-ok {
	color: #0c8c33;
}

/* ---------------------------------------------------------------------------
 * Seçilmişlər cards. Own class rather than the shared .atr-panel-listing so
 * Elanlarım, which uses that class with different actions, is left alone.
 * ------------------------------------------------------------------------ */

.atr-fav-list {
	display: grid;
	gap: 12px;
	margin-top: 14px;
}

.atr-fav-card {
	display: grid;
	grid-template-columns: 132px minmax(0, 1fr);
	gap: 14px;
	min-height: 138px;
	overflow: hidden;
	border: 1px solid #e6edf4;
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 10px 26px rgba(16, 23, 37, 0.05);
}

.atr-fav-card__media {
	position: relative;
	display: block;
	overflow: hidden;
	background: #eef3f6;
}

/* Taken out of the layout on purpose. While the image was a normal in-flow child its
   aspect ratio set the row height, so one portrait photo made its card twice as tall as
   the others. Absolute + cover means the text decides the height and the photo fills it. */
.atr-fav-card__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.atr-fav-card__type {
	position: absolute;
	top: 8px;
	left: 8px;
	display: inline-flex;
	align-items: center;
	min-height: 22px;
	padding: 0 9px;
	border-radius: 6px;
	background: #12b844;
	color: #fff;
	font-size: 11px;
	font-weight: 900;
	text-transform: uppercase;
}

.atr-fav-card__type.is-rent {
	background: #ffbf12;
	color: #101725;
}

.atr-fav-card__body {
	display: grid;
	align-content: start;
	gap: 6px;
	padding: 12px 14px 12px 0;
	min-width: 0;
}

.atr-fav-card__body h3 {
	margin: 0;
	font-size: 15px;
	font-weight: 850;
	line-height: 1.3;
}

.atr-fav-card__body h3 a {
	display: -webkit-box;
	overflow: hidden;
	color: #101725;
	text-decoration: none;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.atr-fav-card__price {
	display: flex;
	align-items: baseline;
	gap: 5px;
	margin: 0;
}

.atr-fav-card__price strong {
	color: #0a1220;
	font-size: 17px;
	font-weight: 950;
}

.atr-fav-card__price span {
	color: #0c8c33;
	font-size: 13px;
	font-weight: 800;
}

.atr-fav-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 12px;
	margin: 0;
	color: #7b8798;
	font-size: 12.5px;
	font-weight: 650;
}

.atr-fav-card__meta span {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.atr-fav-card__meta svg {
	width: 14px;
	height: 14px;
}

.atr-fav-card__remove {
	margin-top: 2px;
}

/* Spelled out rather than a bare "Çıxar": on this screen "remove" alone does not
   say remove from what. */
.atr-fav-card__remove button {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 34px;
	padding: 0 12px;
	border: 1px solid #f2cfcc;
	border-radius: 8px;
	background: #fdf3f2;
	color: #b42318;
	font: inherit;
	font-size: 12.5px;
	font-weight: 800;
	cursor: pointer;
}

.atr-fav-card__remove svg {
	width: 15px;
	height: 15px;
	fill: currentColor;
}

.atr-fav-empty {
	display: grid;
	place-items: center;
	gap: 8px;
	margin-top: 14px;
	padding: 54px 24px;
	border: 1px solid #e6edf4;
	border-radius: 12px;
	background: #fff;
	text-align: center;
}

.atr-fav-empty svg {
	width: 40px;
	height: 40px;
	color: #b6c2d1;
}

.atr-fav-empty strong {
	font-size: 16px;
	font-weight: 900;
}

.atr-fav-empty p {
	max-width: 320px;
	margin: 0;
	color: #7b8798;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.5;
}

.atr-fav-empty__cta {
	margin-top: 6px;
	padding: 10px 18px;
	border-radius: 8px;
	background: #12b844;
	color: #fff;
	font-size: 14px;
	font-weight: 850;
	text-decoration: none;
}

@media (max-width: 560px) {
	.atr-fav-card {
		grid-template-columns: 108px minmax(0, 1fr);
		gap: 12px;
		min-height: 124px;
	}

	.atr-fav-card__body {
		padding: 11px 12px 11px 0;
	}

	.atr-fav-card__price strong {
		font-size: 16px;
	}
}

.atr-fav-pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
	margin-top: 16px;
}

.atr-fav-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 38px;
	min-height: 38px;
	padding: 0 12px;
	border: 1px solid #e6edf4;
	border-radius: 8px;
	background: #fff;
	color: #344054;
	font-size: 13.5px;
	font-weight: 800;
	text-decoration: none;
}

.atr-fav-pagination .page-numbers.current {
	border-color: #12b844;
	background: #12b844;
	color: #fff;
}

.atr-fav-pagination .page-numbers.dots {
	border-color: transparent;
	background: transparent;
}