/**
 * Preferred Source on Google — card styles.
 *
 * Pixel-matched to the Figma frame (myBayut 2.0, 3812-1118 "Banner - Bayut"):
 *   card: 16px padding, 12px gap, 1px #DBDBDB border, 16px radius, #FFF
 *   icon (Google "G"): 50 x 51
 *   copy: 18px / weight 600 / #222, ~8px between wrapped lines
 * Figma specifies 'Google Sans Flex'; that face isn't licensed on the site, so
 * the copy uses the theme stack — Lato for Latin (renders 700, the nearest to
 * the 600 spec), Arabic-DroidKufi for Arabic — chosen per glyph from one rule.
 * The card is one click target and inherits LTR/RTL from its sidebar; it grows
 * to a third line rather than truncating.
 */

.widget_preferred_source .preferred-source-card-wrap,
.preferred-source-card-wrap {
	margin: 0 0 0px;
}

.preferred-source-card {
	box-sizing: border-box;
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 12px;
	width: 100%;
	padding: 16px;
	background: #ffffff;
	border: 1px solid #dbdbdb;
	border-radius: 16px;
	text-decoration: none;
	color: #222222;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
	-webkit-tap-highlight-color: transparent;
}

.preferred-source-card:hover,
.preferred-source-card:focus-visible {
	border-color: #c4c4c4;
	box-shadow: 0 1px 6px rgba(0, 0, 0, 0.07);
	text-decoration: none;
	color: #222222;
}

.preferred-source-card:focus-visible {
	outline: 2px solid #4285f4;
	outline-offset: 2px;
}

.preferred-source-card__icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 51px;
}

.preferred-source-card__icon img {
	display: block;
	width: 50px;
	height: 51px;
}

.preferred-source-card__text {
	flex: 1 1 auto;
	min-width: 0;
	/* Latin (Add, Google, ...) in Lato; Arabic falls through to DroidKufi. */
	font-family: 'Lato', 'Arabic-DroidKufi', sans-serif;
	font-size: 18px;
	line-height: 28px; /* 18px copy + ~8px row gap, per the Figma auto-layout */
	font-weight: 600;  /* Lato has no 600; renders as 700 (nearest heavier)   */
	color: #222222;
	word-break: break-word;
}

/* Inline brand lockup: 23.61px tall in Figma, centred on the copy. */
.preferred-source-card__brand {
	display: inline-block;
	height: 23.61px;
	width: auto;
	vertical-align: middle;
}

[dir="rtl"] .preferred-source-card__text,
.rtl .preferred-source-card__text {
	text-align: right;
}

/* When the card is dropped into a shortcode/HTML block, WordPress' wpautop
   wraps it in empty <p></p> siblings that inherit the theme's 8px paragraph
   margin, adding stray space above and below the card. Collapse them.
   (Not needed when the card is placed via the plugin's own widget, which
   outputs the markup directly and never runs through wpautop.) */
.preferred-source-card-wrap + p:empty {
	margin: 0;
	height: 0;
}
p:empty:has(+ .preferred-source-card-wrap) {
	margin: 0;
	height: 0;
}

/* Narrower sidebars / mobile: scale the whole card down proportionally. */
@media (max-width: 767px) {
	.preferred-source-card {
		gap: 10px;
		padding: 14px;
	}
	.preferred-source-card__icon,
	.preferred-source-card__icon img {
		width: 44px;
		height: 45px;
	}
	.preferred-source-card__text {
		font-size: 16px;
		line-height: 25px;
	}
	.preferred-source-card__brand {
		height: 21px;
	}
}