/**
 * کامپوننت‌های پایه‌ی رابط کاربری غذا.
 * این کلاس‌ها در سراسر قالب (هدر، کارت محصول، سبد خرید، چک‌اوت و ...) استفاده می‌شوند
 * تا ظاهر کل سایت یکدست بماند.
 */

/* ===== دکمه‌ها ===== */

.ghaza-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var( --ghaza-space-2 );
	border: 1px solid transparent;
	border-radius: var( --ghaza-radius-md );
	padding: var( --ghaza-space-3 ) var( --ghaza-space-5 );
	font-size: var( --ghaza-font-size-body );
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
	transition: background-color var( --ghaza-transition-fast ), border-color var( --ghaza-transition-fast ), color var( --ghaza-transition-fast ), transform var( --ghaza-transition-fast );
	text-decoration: none;
}

.ghaza-btn:active {
	transform: translateY( 1px );
}

.ghaza-btn--primary {
	background-color: var( --ghaza-primary );
	color: #ffffff;
}

.ghaza-btn--primary:hover,
.ghaza-btn--primary:focus {
	background-color: var( --ghaza-primary-dark );
	color: #ffffff;
}

.ghaza-btn--accent {
	background-color: var( --ghaza-accent );
	color: #1a1a1a;
}

.ghaza-btn--accent:hover,
.ghaza-btn--accent:focus {
	background-color: var( --ghaza-accent-hover );
	color: #1a1a1a;
}

.ghaza-btn--outline {
	background-color: transparent;
	border-color: var( --ghaza-border );
	color: var( --ghaza-text );
}

.ghaza-btn--outline:hover,
.ghaza-btn--outline:focus {
	border-color: var( --ghaza-primary );
	color: var( --ghaza-primary );
}

.ghaza-btn--ghost {
	background-color: transparent;
	color: var( --ghaza-primary );
}

.ghaza-btn--ghost:hover,
.ghaza-btn--ghost:focus {
	background-color: var( --ghaza-background );
}

.ghaza-btn--sm {
	padding: var( --ghaza-space-2 ) var( --ghaza-space-4 );
	font-size: var( --ghaza-font-size-small );
}

.ghaza-btn--lg {
	padding: var( --ghaza-space-4 ) var( --ghaza-space-6 );
	font-size: var( --ghaza-font-size-body-lg );
}

.ghaza-btn--block {
	display: flex;
	width: 100%;
}

.ghaza-btn--icon {
	padding: var( --ghaza-space-3 );
	border-radius: var( --ghaza-radius-full );
}

.ghaza-btn:disabled,
.ghaza-btn[aria-disabled="true"] {
	opacity: 0.5;
	cursor: not-allowed;
	pointer-events: none;
}

/* ===== فرم‌ها ===== */

.ghaza-field {
	display: flex;
	flex-direction: column;
	gap: var( --ghaza-space-2 );
	margin-bottom: var( --ghaza-space-4 );
}

.ghaza-label {
	font-size: var( --ghaza-font-size-small );
	font-weight: 600;
	color: var( --ghaza-text );
}

.ghaza-input,
.ghaza-select,
.ghaza-textarea {
	width: 100%;
	border: 1px solid var( --ghaza-border );
	border-radius: var( --ghaza-radius-md );
	padding: var( --ghaza-space-3 ) var( --ghaza-space-4 );
	background-color: var( --ghaza-surface );
	color: var( --ghaza-text );
	transition: border-color var( --ghaza-transition-fast );
}

.ghaza-input:focus,
.ghaza-select:focus,
.ghaza-textarea:focus {
	border-color: var( --ghaza-primary );
	outline: none;
}

.ghaza-field--error .ghaza-input,
.ghaza-field--error .ghaza-select,
.ghaza-field--error .ghaza-textarea {
	border-color: var( --ghaza-danger );
}

.ghaza-field__error-message {
	font-size: var( --ghaza-font-size-caption );
	color: var( --ghaza-danger );
}

.ghaza-textarea {
	min-height: 120px;
	resize: vertical;
}

/* کنترل تعداد (Quantity Selector) - در کارت محصول و سبد خرید استفاده می‌شود */
.ghaza-qty {
	display: inline-flex;
	align-items: center;
	border: 1px solid var( --ghaza-border );
	border-radius: var( --ghaza-radius-md );
	overflow: hidden;
}

.ghaza-qty__btn {
	border: none;
	background-color: var( --ghaza-surface );
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: var( --ghaza-font-size-body-lg );
}

.ghaza-qty__btn:hover {
	background-color: var( --ghaza-background );
}

.ghaza-qty__input {
	width: 36px;
	border: none;
	text-align: center;
	-moz-appearance: textfield;
}

.ghaza-qty__input::-webkit-outer-spin-button,
.ghaza-qty__input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

/* ===== کارت ===== */

.ghaza-card {
	background-color: var( --ghaza-surface );
	border: 1px solid var( --ghaza-border );
	border-radius: var( --ghaza-radius-lg );
	overflow: hidden;
	transition: box-shadow var( --ghaza-transition-base ), transform var( --ghaza-transition-base );
}

.ghaza-card--hoverable:hover {
	box-shadow: var( --ghaza-shadow-md );
	transform: translateY( -2px );
}

.ghaza-card__body {
	padding: var( --ghaza-space-4 );
}

/* ===== بج و چیپ ===== */

.ghaza-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: var( --ghaza-radius-sm );
	padding: 2px var( --ghaza-space-2 );
	font-size: var( --ghaza-font-size-caption );
	font-weight: 700;
	line-height: 1.6;
}

.ghaza-badge--sale {
	background-color: var( --ghaza-danger );
	color: #ffffff;
}

.ghaza-badge--new {
	background-color: var( --ghaza-primary );
	color: #ffffff;
}

.ghaza-badge--success {
	background-color: rgba( 46, 158, 91, 0.12 );
	color: var( --ghaza-success );
}

.ghaza-badge--warning {
	background-color: rgba( 242, 201, 76, 0.18 );
	color: #8a6d1a;
}

.ghaza-badge--out-of-stock {
	background-color: var( --ghaza-text-secondary );
	color: #ffffff;
}

.ghaza-chip {
	display: inline-flex;
	align-items: center;
	gap: var( --ghaza-space-1 );
	border: 1px solid var( --ghaza-border );
	border-radius: var( --ghaza-radius-full );
	padding: var( --ghaza-space-1 ) var( --ghaza-space-3 );
	font-size: var( --ghaza-font-size-small );
	background-color: var( --ghaza-surface );
	cursor: pointer;
}

.ghaza-chip--active {
	background-color: var( --ghaza-primary );
	border-color: var( --ghaza-primary );
	color: #ffffff;
}

/* ===== آلرت ===== */

.ghaza-alert {
	display: flex;
	align-items: flex-start;
	gap: var( --ghaza-space-3 );
	border-radius: var( --ghaza-radius-md );
	padding: var( --ghaza-space-4 );
	font-size: var( --ghaza-font-size-small );
	border: 1px solid transparent;
}

.ghaza-alert--success {
	background-color: rgba( 46, 158, 91, 0.1 );
	border-color: rgba( 46, 158, 91, 0.3 );
	color: var( --ghaza-success );
}

.ghaza-alert--warning {
	background-color: rgba( 242, 201, 76, 0.15 );
	border-color: rgba( 242, 201, 76, 0.4 );
	color: #8a6d1a;
}

.ghaza-alert--danger {
	background-color: rgba( 225, 75, 75, 0.1 );
	border-color: rgba( 225, 75, 75, 0.3 );
	color: var( --ghaza-danger );
}

/* ===== تولتیپ ===== */

.ghaza-tooltip {
	position: relative;
}

.ghaza-tooltip__content {
	position: absolute;
	bottom: calc( 100% + 6px );
	right: 50%;
	transform: translateX( 50% );
	background-color: var( --ghaza-text );
	color: #ffffff;
	font-size: var( --ghaza-font-size-caption );
	padding: var( --ghaza-space-2 ) var( --ghaza-space-3 );
	border-radius: var( --ghaza-radius-sm );
	white-space: nowrap;
	opacity: 0;
	pointer-events: none;
	transition: opacity var( --ghaza-transition-fast );
	z-index: var( --ghaza-z-toast );
}

.ghaza-tooltip:hover .ghaza-tooltip__content,
.ghaza-tooltip:focus-within .ghaza-tooltip__content {
	opacity: 1;
}

/* ===== مودال / شیت پایین (Bottom Sheet) ===== */

.ghaza-modal-overlay {
	position: fixed;
	inset: 0;
	background-color: rgba( 0, 0, 0, 0.5 );
	z-index: var( --ghaza-z-modal );
	display: none;
}

.ghaza-modal-overlay.is-open {
	display: block;
}

.ghaza-modal {
	background-color: var( --ghaza-surface );
	border-radius: var( --ghaza-radius-lg );
	max-width: 480px;
	width: 92%;
	margin: 10vh auto 0;
	padding: var( --ghaza-space-5 );
	box-shadow: var( --ghaza-shadow-lg );
}

/* در موبایل، مودال به شکل Bottom Sheet نمایش داده می‌شود */
.ghaza-bottom-sheet {
	position: fixed;
	bottom: 0;
	right: 0;
	left: 0;
	background-color: var( --ghaza-surface );
	border-radius: var( --ghaza-radius-lg ) var( --ghaza-radius-lg ) 0 0;
	padding: var( --ghaza-space-5 );
	box-shadow: var( --ghaza-shadow-lg );
	z-index: var( --ghaza-z-modal );
	max-height: 85vh;
	overflow-y: auto;
}