/**
 * Bilingual profile inputs, account (Profile / Edit Profile) page details and
 * single guide page details.
 *
 * Written with logical properties so one stylesheet serves RTL and LTR. Loaded on
 * Become a Guide, the guide dashboard, Profile, Edit Profile and single guide pages.
 */

/* An Arabic and an English value side by side; they stack when space is narrow. */
.legacy-bilingual-pair {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
	gap: 0.75rem;
	inline-size: 100%;
	min-inline-size: 0;
}

.legacy-bilingual-pair__item {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	min-inline-size: 0;
}

.legacy-bilingual-pair__item input,
.legacy-bilingual-pair__item textarea {
	inline-size: 100%;
	box-sizing: border-box;
}

.legacy-language-label {
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.3;
	opacity: 0.75;
}

/*
 * Length-limited field (the short bio): the sentence that names the limit, and
 * the live counter under each language's control. Logical properties and the
 * design tokens only, so one rule serves RTL and LTR, light and dark.
 */
.legacy-field-limit-hint {
	margin-block: 0.15rem 0.5rem;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--lg-muted);
}

.legacy-field-counter {
	align-self: flex-end;
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.3;
	/* Digits read left to right in both languages. */
	direction: ltr;
	font-variant-numeric: tabular-nums;
	color: var(--lg-muted);
}

/*
 * Over the limit: the save will refuse it, so it is called out, not only
 * greyed. The change is not transitioned: it is a statement about what is in
 * the field right now, and it has to be true the instant the field changes.
 */
.legacy-field-counter.is-over {
	color: var(--lg-danger);
}

/* Repeater rows: the pair takes the space and Remove sits at the row's end. */
.legacy-bilingual-row > .legacy-bilingual-pair {
	flex: 1 1 auto;
}

.legacy-bilingual-row > .guide-repeater-remove {
	flex: 0 0 auto;
}

.become-guide-page .form-group .legacy-bilingual-row,
.guide-dashboard-profile-page .legacy-bilingual-row {
	align-items: flex-end;
}

/* Single guide: the RTL arrows point forward in LTR too, as on tour cards. */
html:not([dir="rtl"]) .guide-single-page .main-btn .fa-chevron-left,
html:not([dir="rtl"]) .guide-single-page .cta-sec .btn-i .fa-arrow-left {
	transform: scaleX(-1);
}

html:not([dir="rtl"]) .guide-single-page .main-btn:hover .fa-chevron-left,
html:not([dir="rtl"]) .guide-single-page .cta-sec .btn-i:hover .fa-arrow-left {
	transform: scaleX(-1) rotate(25deg);
}

/* Profile / Edit Profile: the language switch sits with the account buttons as a secondary (outline) button. */
.some-info-user-sec .wrap .btn-side {
	flex-wrap: wrap;
}

.some-info-user-sec .wrap .btn-side .update-profile-btn.profile-language-switch {
	/* Inset outline: same size as the filled buttons beside it. */
	box-shadow: inset 0 0 0 1.5px var(--lg-accent);
	background-color: transparent;
	color: var(--lg-brand);
}

.some-info-user-sec .wrap .btn-side .update-profile-btn.profile-language-switch:hover,
.some-info-user-sec .wrap .btn-side .update-profile-btn.profile-language-switch:focus-visible {
	background-color: var(--lg-accent);
	color: var(--lg-on-accent);
}

.some-info-user-sec .wrap .btn-side .update-profile-btn.profile-language-switch:hover i,
.some-info-user-sec .wrap .btn-side .update-profile-btn.profile-language-switch:focus-visible i {
	color: inherit;
}

/* Profile: the RTL arrows point forward in LTR too, as on tour cards. */
html:not([dir="rtl"]) .profile-page .main-btn .fa-chevron-left {
	transform: scaleX(-1);
}

html:not([dir="rtl"]) .profile-page .main-btn:hover .fa-chevron-left {
	transform: scaleX(-1) rotate(25deg);
}