/**
 * Mazadat Components
 * أزرار، بطاقات، حقول، شارات، تنبيهات.
 * مبدأ: كبيرة، واضحة، contrast عالي، لمس مريح للموبايل (44px+).
 */

/* ─── Buttons ──────────────────────────────────────────────────── */
.mazadat-btn,
.button,
button[type="submit"],
input[type="submit"],
.wc-block-components-button,
.woocommerce a.button,
.woocommerce button.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--mazadat-space-2);
	min-height: 48px;            /* لمس مريح */
	padding: 12px 28px;
	font-family: var(--mazadat-font-ar);
	font-weight: 700;
	font-size: var(--mazadat-fs-md);
	line-height: 1.2;
	border: 0;
	border-radius: var(--mazadat-radius);
	cursor: pointer;
	text-decoration: none;
	transition: all var(--mazadat-transition);
	box-shadow: var(--mazadat-shadow-sm);
}

/* Primary (Deep Green) */
.mazadat-btn,
.mazadat-btn-primary,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
	background: var(--mazadat-primary);
	color: var(--mazadat-white);
}
.mazadat-btn:hover,
.mazadat-btn-primary:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover {
	background: var(--mazadat-primary-hover);
	color: var(--mazadat-white);
	transform: translateY(-1px);
	box-shadow: var(--mazadat-shadow);
}

/* Accent (Gold) — للـ CTAs الذهبية */
.mazadat-btn-gold {
	background: var(--mazadat-accent);
	color: var(--mazadat-dark-green);
}
.mazadat-btn-gold:hover {
	background: var(--mazadat-accent-hover);
	color: var(--mazadat-white);
	box-shadow: var(--mazadat-shadow-gold);
}

/* Outline */
.mazadat-btn-outline {
	background: transparent;
	color: var(--mazadat-primary);
	border: 2px solid var(--mazadat-primary);
}
.mazadat-btn-outline:hover {
	background: var(--mazadat-primary);
	color: var(--mazadat-white);
}

/* Ghost (نص فقط) */
.mazadat-btn-ghost {
	background: transparent;
	color: var(--mazadat-primary);
	box-shadow: none;
}
.mazadat-btn-ghost:hover {
	background: rgba(19,82,53,0.08);
}

/* Danger */
.mazadat-btn-danger {
	background: var(--mazadat-danger);
	color: var(--mazadat-white);
}

/* Sizes */
.mazadat-btn-sm  { min-height: 36px; padding: 8px 18px;  font-size: var(--mazadat-fs-sm); }
.mazadat-btn-lg  { min-height: 56px; padding: 16px 36px; font-size: var(--mazadat-fs-lg); }
.mazadat-btn-xl  { min-height: 64px; padding: 20px 44px; font-size: var(--mazadat-fs-xl); }
.mazadat-btn-block { width: 100%; }

/* ─── Cards ───────────────────────────────────────────────────── */
.mazadat-card {
	background: var(--mazadat-bg-card);
	border-radius: var(--mazadat-radius-lg);
	padding: var(--mazadat-space-5);
	box-shadow: var(--mazadat-shadow);
	border: 1px solid var(--mazadat-border);
	transition: transform var(--mazadat-transition), box-shadow var(--mazadat-transition);
}
.mazadat-card:hover {
	transform: translateY(-2px);
	box-shadow: var(--mazadat-shadow-lg);
}

/* ─── Form fields ─────────────────────────────────────────────── */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="number"],
input[type="search"],
textarea,
select {
	width: 100%;
	min-height: 48px;
	padding: 12px 16px;
	font-family: var(--mazadat-font-ar);
	font-size: var(--mazadat-fs-md);
	color: var(--mazadat-text);
	background: var(--mazadat-white);
	border: 2px solid var(--mazadat-border);
	border-radius: var(--mazadat-radius);
	transition: border-color var(--mazadat-transition), box-shadow var(--mazadat-transition);
}

input:focus,
textarea:focus,
select:focus {
	outline: none;
	border-color: var(--mazadat-primary);
	box-shadow: 0 0 0 3px rgba(19,82,53,0.15);
}

/* ─── Badges ──────────────────────────────────────────────────── */
.mazadat-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 12px;
	font-size: var(--mazadat-fs-sm);
	font-weight: 600;
	border-radius: var(--mazadat-radius-pill);
	background: var(--mazadat-ivory);
	color: var(--mazadat-charcoal);
	border: 1px solid var(--mazadat-border);
}
.mazadat-badge-success { background: #E8F5E9; color: var(--mazadat-success); border-color: #C8E6C9; }
.mazadat-badge-gold    { background: #FAF1E0; color: var(--mazadat-dark-gold); border-color: #EBD8AC; }
.mazadat-badge-danger  { background: #FFEBEE; color: var(--mazadat-danger);  border-color: #FFCDD2; }

/* Trust Score badge */
.mazadat-trust-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 14px;
	background: linear-gradient(135deg, #FAF1E0 0%, #F8F7F1 100%);
	color: var(--mazadat-dark-green);
	border-radius: var(--mazadat-radius-pill);
	font-weight: 700;
	font-size: var(--mazadat-fs-sm);
	border: 1px solid var(--mazadat-accent);
}
.mazadat-trust-badge .star { color: var(--mazadat-accent); }

/* ─── Alerts ──────────────────────────────────────────────────── */
.mazadat-alert {
	padding: var(--mazadat-space-4);
	border-radius: var(--mazadat-radius);
	margin-bottom: var(--mazadat-space-4);
	border-inline-start: 4px solid var(--mazadat-info);
	background: #E3F2FD;
	color: #0D47A1;
	font-size: var(--mazadat-fs-md);
}
.mazadat-alert-success { background: #E8F5E9; color: #1B5E20; border-color: var(--mazadat-success); }
.mazadat-alert-warning { background: #FFF8E1; color: #6F4E00; border-color: var(--mazadat-warning); }
.mazadat-alert-danger  { background: #FFEBEE; color: #B71C1C; border-color: var(--mazadat-danger); }

/* ─── Auction Countdown ──────────────────────────────────────── */
.mazadat-countdown {
	display: inline-flex;
	gap: var(--mazadat-space-2);
	padding: var(--mazadat-space-3) var(--mazadat-space-4);
	background: var(--mazadat-dark-green);
	color: var(--mazadat-accent);
	border-radius: var(--mazadat-radius);
	font-family: var(--mazadat-font-num);
	font-weight: 700;
	font-size: var(--mazadat-fs-lg);
	font-variant-numeric: tabular-nums;
}

/* ─── Section heading divider ────────────────────────────────── */
.mazadat-section-heading {
	display: flex;
	align-items: center;
	gap: var(--mazadat-space-3);
	margin-bottom: var(--mazadat-space-5);
}
.mazadat-section-heading::after {
	content: '';
	flex: 1;
	height: 2px;
	background: linear-gradient(to var(--mazadat-end), var(--mazadat-accent), transparent);
	border-radius: 2px;
}