:root {
	--ma-card-accent: #0f5a4a;
	--ma-card-accent-text: #ffffff;
}

.ma-card-grid {
	display: grid;
	grid-template-columns: repeat(var(--ma-columns, 4), minmax(0, 1fr));
	align-items: stretch;
	gap: 16px;
}
@media (max-width: 900px) {
	.ma-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
	.ma-card-grid { grid-template-columns: minmax(0, 1fr); }
}

.ma-card {
	min-width: 0;
	display: flex !important;
	flex-direction: column !important;
	height: 100% !important;
	background: #fff;
	border: 1px solid #e5e5e2;
	border-radius: 14px;
	padding: 18px;
	text-align: center;
	font-family: inherit;
}

.ma-card__media { margin-bottom: 12px; }
.ma-card__media img { width: 100%; height: auto; border-radius: 10px; display: block; }

.ma-card__title { font-size: 16px; font-weight: 700; margin: 0 0 6px; color: #1c1c1a; }
.ma-card__desc { font-size: 13px; color: #6b6b66; margin-bottom: 10px; }

.ma-card__price { font-size: 18px; font-weight: 800; color: var(--ma-card-accent); margin-bottom: 14px; }
.ma-card__price del { opacity: 0.6; font-weight: 400; font-size: 14px; }

/* Variation buttons */
.ma-card__options { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.ma-card__opt {
	display: flex; align-items: center; justify-content: space-between;
	background: #fff; border: 1.5px solid #e5e5e2; border-radius: 10px;
	padding: 10px 14px; font-family: inherit; font-size: 13.5px; font-weight: 600;
	color: #1c1c1a; cursor: pointer; transition: border-color .15s ease, background .15s ease;
}
.ma-card__opt:hover { border-color: var(--ma-card-accent); }
.ma-card__opt.is-selected { border-color: var(--ma-card-accent); background: rgba(15,90,74,.06); }
.ma-card__opt strong { color: var(--ma-card-accent); }

/* Amount pills + custom input */
.ma-card__amounts { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; min-width: 0; }
.ma-card__amount-btn {
	flex: 1 1 auto; min-width: 44px; background: #fff; border: 1.5px solid #e5e5e2;
	border-radius: 10px; padding: 9px 6px; font-family: inherit; font-size: 12.5px;
	font-weight: 700; color: #1c1c1a; cursor: pointer; transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.ma-card__amount-btn:hover { border-color: var(--ma-card-accent); }
.ma-card__amount-btn.is-selected { border-color: var(--ma-card-accent); background: var(--ma-card-accent); color: var(--ma-card-accent-text); }

.ma-card__custom-label {
	display: block; text-align: right; font-size: 12.5px; font-weight: 700;
	color: #1c1c1a; margin-bottom: 6px;
}
.ma-card__custom-hint { font-weight: 400; color: #8a8a84; font-size: 11.5px; }

.ma-card__amount-input {
	display: block; width: 100%; box-sizing: border-box; padding: 10px 12px; margin-bottom: 14px;
	border: 1.5px solid #e5e5e2; border-radius: 10px; font-family: inherit; font-size: 13.5px;
	color: #1c1c1a; text-align: center;
}
.ma-card__amount-input:focus { outline: none; border-color: var(--ma-card-accent); }

.ma-card__amount-wrap { margin-bottom: 14px; text-align: right; }

.ma-card__error { color: #b32d2e; font-size: 12.5px; margin: 0 0 10px; }

/* Two action buttons — pinned to the bottom of the card, regardless of how
   much content (price tiers, description, etc.) sits above it, so buttons
   stay aligned across cards of different content heights in the same grid row */
.ma-card__actions { display: flex !important; gap: 8px; min-width: 0; margin-top: auto !important; padding-top: 14px; }
.ma-card__btn {
	flex: 1; min-width: 0; border-radius: 10px; padding: 12px 8px; font-family: inherit;
	font-size: 13px; font-weight: 700; cursor: pointer; border: 1.5px solid transparent;
	transition: filter .2s ease, background .2s ease;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ma-card__btn--outline {
	background: #fff; border-color: var(--ma-card-accent); color: var(--ma-card-accent);
}
.ma-card__btn--outline:hover { background: rgba(15,90,74,.06); }

.ma-card__btn--solid {
	background: var(--ma-card-accent); color: var(--ma-card-accent-text);
}
.ma-card__btn--solid:hover { filter: brightness(0.9); }

.ma-card__btn.is-loading { opacity: .7; pointer-events: none; }

@media (max-width: 480px) {
	.ma-card { padding: 14px; }
	.ma-card__actions { flex-direction: column; }
}

/* Dedicate ("اهداء") field — hidden by default, self-contained so the card
   works correctly on any site/theme without relying on external CSS. */
.ma-card__dedicate { margin-bottom: 12px; }
.ma-card__dedicate .qd-dedicate-toggle {
	display: flex; align-items: center; gap: 8px; cursor: pointer;
	font-size: 13px; color: #1F2A24;
}
.ma-card__dedicate .qd-dedicate-toggle input[type="checkbox"] {
	width: 16px; height: 16px; margin: 0; accent-color: var(--ma-card-accent);
}
.ma-card__dedicate-name-wrap {
	display: none;
	max-height: 0;
	overflow: hidden;
	opacity: 0;
	transition: max-height .2s ease, opacity .2s ease;
}
.ma-card__dedicate-name-wrap.qd-open {
	display: block;
	max-height: 60px;
	opacity: 1;
	margin-top: 8px;
}
.ma-card__dedicate-name {
	width: 100%; box-sizing: border-box; border: 1px solid #E3DFD3; border-radius: 8px;
	padding: 10px 12px; font-family: inherit; font-size: 13.5px; color: #1F2A24;
}
.ma-card__dedicate-name:focus { outline: none; border-color: var(--ma-card-accent); }