/*
 * Decorto Product Trust Box — frontend styles.
 *
 * Design goals:
 *  - Premium, minimal, modern card matching a typical WooCommerce /
 *    Astra storefront palette (soft neutrals + a single accent color).
 *  - Rounded corners, subtle shadow, generous spacing.
 *  - Fully responsive (desktop / tablet / mobile) using a fluid grid.
 *  - RTL-first (the plugin's primary audience is a Persian storefront)
 *    but degrades safely if a theme forces LTR contexts.
 *
 * Colors are driven by CSS custom properties injected inline from PHP
 * (see Decorto_TB_Assets::build_dynamic_css_vars()), with sensible
 * fallbacks defined here in case the variables are ever missing.
 */

.decorto-tb-card {
	--decorto-tb-bg: #ffffff;
	--decorto-tb-border: #e5e7eb;
	--decorto-tb-accent: #2c7a4b;
	--decorto-tb-text: #3a3a3a;
	--decorto-tb-muted-text: #767676;

	box-sizing: border-box;
	direction: rtl;
	text-align: right;
	background: var( --decorto-tb-bg );
	border: 1px solid var( --decorto-tb-border );
	border-radius: 14px;
	box-shadow: 0 2px 10px rgba( 0, 0, 0, 0.04 ), 0 1px 2px rgba( 0, 0, 0, 0.03 );
	padding: 18px 20px;
	margin: 0 0 20px;
	font-family: inherit;
	color: var( --decorto-tb-text );
	max-width: 100%;
}

.decorto-tb-card *,
.decorto-tb-card *::before,
.decorto-tb-card *::after {
	box-sizing: border-box;
}

/* ---------------------------------------------------------------------
 * Header: store icon + seller title.
 * ------------------------------------------------------------------- */
.decorto-tb-header {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 14px;
}

.decorto-tb-store-title {
	font-size: 15px;
	font-weight: 600;
	color: var( --decorto-tb-text );
	line-height: 1.4;
}

/* ---------------------------------------------------------------------
 * Icon sizing — icons inherit color via currentColor and are tinted
 * with the accent color for visual consistency.
 * ------------------------------------------------------------------- */
.decorto-tb-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	flex: 0 0 auto;
	color: var( --decorto-tb-accent );
}

.decorto-tb-icon svg {
	width: 100%;
	height: 100%;
	display: block;
}

.decorto-tb-icon--small {
	width: 18px;
	height: 18px;
}

.decorto-tb-icon--store {
	width: 26px;
	height: 26px;
}

/* ---------------------------------------------------------------------
 * Trust stats row (satisfaction / performance / orders).
 * ------------------------------------------------------------------- */
.decorto-tb-stats {
	list-style: none;
	margin: 0 0 4px;
	padding: 0;
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: 10px 14px;
}

.decorto-tb-stat {
	display: flex;
	align-items: center;
	gap: 8px;
	background: rgba( 0, 0, 0, 0.015 );
	border-radius: 10px;
	padding: 8px 10px;
}

.decorto-tb-stat-text {
	font-size: 13px;
	font-weight: 500;
	line-height: 1.4;
	color: var( --decorto-tb-text );
}

/* ---------------------------------------------------------------------
 * Divider between the stats row and the sections below.
 * ------------------------------------------------------------------- */
.decorto-tb-divider {
	height: 1px;
	background: var( --decorto-tb-border );
	margin: 14px 0;
}

/* ---------------------------------------------------------------------
 * Shipping / guarantee sections.
 * ------------------------------------------------------------------- */
.decorto-tb-section {
	margin-bottom: 12px;
}

.decorto-tb-section:last-child {
	margin-bottom: 0;
}

.decorto-tb-section-title {
	font-size: 13px;
	font-weight: 600;
	color: var( --decorto-tb-muted-text );
	margin: 0 0 8px;
	text-transform: none;
}

.decorto-tb-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 7px;
}

.decorto-tb-list-item {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	line-height: 1.5;
	color: var( --decorto-tb-text );
}

/* ---------------------------------------------------------------------
 * Responsive tweaks.
 * ------------------------------------------------------------------- */

/* Tablet: keep 3 columns but tighten spacing a touch. */
@media ( max-width: 782px ) {
	.decorto-tb-card {
		padding: 16px 16px;
	}

	.decorto-tb-stats {
		gap: 8px 10px;
	}
}

/* Mobile: stack the stats vertically for readability. */
@media ( max-width: 480px ) {
	.decorto-tb-card {
		padding: 14px;
		border-radius: 12px;
	}

	.decorto-tb-stats {
		grid-template-columns: 1fr;
	}

	.decorto-tb-store-title {
		font-size: 14px;
	}

	.decorto-tb-stat-text,
	.decorto-tb-list-item {
		font-size: 12.5px;
	}
}

/* ---------------------------------------------------------------------
 * LTR fallback — if a theme/template forces LTR direction somewhere,
 * keep the card internally consistent rather than visually broken.
 * ------------------------------------------------------------------- */
.decorto-tb-card[dir='rtl'] {
	unicode-bidi: isolate;
}