/* ==========================================================================
   Hospital Donation Plugin — Frontend Styles
   Modern, clean, fully responsive
   ========================================================================== */

.hdp-wrapper {
	--hdp-primary: #0f766e;
	--hdp-primary-dark: #0b544e;
	--hdp-primary-light: #ccfbf1;
	--hdp-accent: #f97316;
	--hdp-success: #16a34a;
	--hdp-danger: #dc2626;
	--hdp-text: #1f2937;
	--hdp-muted: #6b7280;
	--hdp-border: #e5e7eb;
	--hdp-bg: #f8fafc;
	--hdp-radius: 16px;
	--hdp-shadow: 0 10px 30px rgba(15, 118, 110, 0.08), 0 2px 8px rgba(0,0,0,0.04);

	font-family: "Hind Siliguri", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans Bengali", Roboto, sans-serif;
	max-width: 640px;
	margin: 24px auto;
	padding: 0 16px;
	box-sizing: border-box;
}
.hdp-wrapper *, .hdp-wrapper *::before, .hdp-wrapper *::after { box-sizing: border-box; }
.hdp-wrapper input, .hdp-wrapper button, .hdp-wrapper select, .hdp-wrapper textarea {
	font-family: inherit;
}

.hdp-card {
	background: #fff;
	border-radius: var(--hdp-radius);
	box-shadow: var(--hdp-shadow);
	padding: 32px 28px;
	position: relative;
	overflow: hidden;
}
.hdp-card::before {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 5px;
	background: linear-gradient(90deg, var(--hdp-primary), var(--hdp-accent));
}

/* Progress bar */
.hdp-progress {
	height: 6px;
	background: var(--hdp-border);
	border-radius: 999px;
	overflow: hidden;
	margin-bottom: 14px;
}
.hdp-progress-bar {
	height: 100%;
	width: 25%;
	background: linear-gradient(90deg, var(--hdp-primary), var(--hdp-accent));
	border-radius: 999px;
	transition: width 0.35s ease;
}
.hdp-steps-label {
	display: flex;
	justify-content: space-between;
	margin-bottom: 24px;
}
.hdp-step-dot {
	width: 30px; height: 30px;
	border-radius: 50%;
	background: var(--hdp-bg);
	color: var(--hdp-muted);
	display: flex; align-items: center; justify-content: center;
	font-size: 13px; font-weight: 700;
	border: 2px solid var(--hdp-border);
	transition: all 0.25s ease;
}
.hdp-step-dot.active {
	background: var(--hdp-primary);
	border-color: var(--hdp-primary);
	color: #fff;
	transform: scale(1.1);
}
.hdp-step-dot.done {
	background: var(--hdp-success);
	border-color: var(--hdp-success);
	color: #fff;
}

/* Step visibility */
.hdp-step { display: none; animation: hdpFadeIn 0.35s ease; }
.hdp-step.hdp-active { display: block; }
@keyframes hdpFadeIn {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: translateY(0); }
}

.hdp-title {
	font-family: "Baloo Da 2", "Hind Siliguri", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans Bengali", Roboto, sans-serif;
	font-size: 23px;
	font-weight: 700;
	color: var(--hdp-text);
	margin: 0 0 4px;
}
.hdp-subtitle {
	font-size: 14px;
	color: var(--hdp-muted);
	margin: 0 0 22px;
}

/* Type selection cards */
.hdp-type-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}
.hdp-type-card {
	background: var(--hdp-bg);
	border: 2px solid var(--hdp-border);
	border-radius: 14px;
	padding: 24px 16px;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 6px;
	cursor: pointer;
	transition: all 0.2s ease;
}
.hdp-type-card:hover { border-color: var(--hdp-primary); transform: translateY(-2px); }
.hdp-type-card.selected {
	border-color: var(--hdp-primary);
	background: var(--hdp-primary-light);
	box-shadow: 0 4px 14px rgba(15,118,110,0.15);
}
.hdp-type-icon { font-size: 34px; }
.hdp-type-title { font-family: "Baloo Da 2", "Hind Siliguri", sans-serif; font-weight: 700; font-size: 15.5px; color: var(--hdp-text); }
.hdp-type-desc { font-size: 12.5px; color: var(--hdp-muted); }

/* Amount quick chips */
.hdp-amount-quick {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 16px;
}
.hdp-amount-chip {
	padding: 10px 18px;
	border-radius: 999px;
	border: 2px solid var(--hdp-border);
	background: #fff;
	font-weight: 600;
	font-size: 13.5px;
	cursor: pointer;
	transition: all 0.2s ease;
	color: var(--hdp-text);
}
.hdp-amount-chip:hover { border-color: var(--hdp-primary); }
.hdp-amount-chip.selected {
	background: var(--hdp-primary);
	border-color: var(--hdp-primary);
	color: #fff;
}

.hdp-input-group {
	position: relative;
	display: flex;
	align-items: center;
}
.hdp-currency-prefix {
	position: absolute;
	left: 16px;
	font-weight: 700;
	color: var(--hdp-primary);
	font-size: 16px;
}
.hdp-input-group .hdp-input { padding-left: 40px; }

.hdp-input {
	width: 100%;
	padding: 13px 16px;
	border: 2px solid var(--hdp-border);
	border-radius: 10px;
	font-size: 15px;
	color: var(--hdp-text);
	background: #fff;
	transition: border-color 0.2s ease;
}
.hdp-input:focus {
	outline: none;
	border-color: var(--hdp-primary);
	box-shadow: 0 0 0 3px rgba(15,118,110,0.12);
}

.hdp-field { margin-bottom: 18px; }
.hdp-field label {
	display: block;
	font-weight: 600;
	font-size: 13.5px;
	margin-bottom: 6px;
	color: var(--hdp-text);
}
.hdp-required { color: var(--hdp-danger); }
.hdp-optional { color: var(--hdp-muted); font-weight: 500; font-size: 12px; }

/* Product grid */
.hdp-product-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
	margin-bottom: 8px;
	max-height: 420px;
	overflow-y: auto;
	padding: 4px;
}
.hdp-product-card {
	border: 2px solid var(--hdp-border);
	border-radius: 14px;
	overflow: hidden;
	cursor: pointer;
	background: #fff;
	transition: all 0.2s ease;
}
.hdp-product-card:hover { transform: translateY(-2px); border-color: var(--hdp-primary); }
.hdp-product-card.selected {
	border-color: var(--hdp-primary);
	box-shadow: 0 4px 14px rgba(15,118,110,0.18);
}
.hdp-product-img {
	width: 100%;
	height: 110px;
	object-fit: cover;
	background: var(--hdp-bg);
}
.hdp-product-img-placeholder {
	width: 100%;
	height: 110px;
	display: flex; align-items: center; justify-content: center;
	background: var(--hdp-bg);
	font-size: 30px;
}
.hdp-product-body { padding: 10px 12px; }
.hdp-product-name { font-weight: 700; font-size: 13.5px; color: var(--hdp-text); margin-bottom: 2px; }
.hdp-product-price { font-weight: 700; font-size: 13.5px; color: var(--hdp-primary); }

/* Summary box */
.hdp-summary-box {
	background: var(--hdp-primary-light);
	border-radius: 12px;
	padding: 14px 16px;
	margin-bottom: 20px;
	font-size: 14px;
	color: var(--hdp-primary-dark);
	font-weight: 600;
}

/* Payment methods grid */
.hdp-methods-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
	margin-bottom: 18px;
}
.hdp-method-card {
	border: 2px solid var(--hdp-border);
	border-radius: 12px;
	padding: 14px 12px;
	display: flex;
	align-items: center;
	gap: 10px;
	cursor: pointer;
	background: #fff;
	transition: all 0.2s ease;
}
.hdp-method-card:hover { border-color: var(--hdp-primary); }
.hdp-method-card.selected {
	border-color: var(--hdp-primary);
	background: var(--hdp-primary-light);
}
.hdp-method-icon {
	width: 34px; height: 34px;
	border-radius: 8px;
	object-fit: contain;
	background: var(--hdp-bg);
}
.hdp-method-icon-placeholder {
	width: 34px; height: 34px;
	border-radius: 8px;
	background: var(--hdp-bg);
	display: flex; align-items: center; justify-content: center;
	font-size: 16px;
}
.hdp-method-name { font-weight: 600; font-size: 13.5px; color: var(--hdp-text); }

.hdp-payment-details {
	background: var(--hdp-bg);
	border-radius: 12px;
	padding: 16px;
	margin-bottom: 16px;
	animation: hdpFadeIn 0.3s ease;
}
.hdp-payment-info-box {
	background: #fff;
	border: 1px dashed var(--hdp-primary);
	border-radius: 10px;
	padding: 14px;
	margin-bottom: 14px;
	font-size: 13.5px;
	line-height: 1.9;
	color: var(--hdp-text);
}
.hdp-payment-info-box strong { color: var(--hdp-primary-dark); }

/* পেমেন্ট তথ্য বাম দিকে, কিউআর কোড ডান দিকে */
.hdp-payment-info-flex {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
}
.hdp-payment-info-text { flex: 1; min-width: 0; }
.hdp-payment-info-qr {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
}
.hdp-qr-img {
	width: 96px;
	height: 96px;
	object-fit: contain;
	background: #fff;
	border: 1px solid var(--hdp-border);
	border-radius: 8px;
	padding: 4px;
}
.hdp-qr-caption {
	font-size: 10.5px;
	color: var(--hdp-muted);
	text-align: center;
	line-height: 1.3;
}
@media (max-width: 420px) {
	.hdp-payment-info-flex { flex-direction: column; align-items: flex-start; }
	.hdp-payment-info-qr { align-self: center; }
}

.hdp-error-msg {
	color: var(--hdp-danger);
	font-size: 13.5px;
	font-weight: 600;
	margin-bottom: 10px;
	min-height: 18px;
}

/* Navigation buttons */
.hdp-nav {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	margin-top: 24px;
}
.hdp-btn {
	padding: 13px 24px;
	border-radius: 10px;
	font-weight: 700;
	font-size: 14.5px;
	border: none;
	cursor: pointer;
	transition: all 0.2s ease;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}
.hdp-btn-primary { background: var(--hdp-primary); color: #fff; flex: 1; }
.hdp-btn-primary:hover { background: var(--hdp-primary-dark); }
.hdp-btn-outline { background: #fff; color: var(--hdp-text); border: 2px solid var(--hdp-border); }
.hdp-btn-outline:hover { border-color: var(--hdp-primary); }
.hdp-btn-success { background: var(--hdp-success); color: #fff; flex: 1; }
.hdp-btn-success:hover { background: #128a3e; }
.hdp-btn:disabled { opacity: 0.6; cursor: not-allowed; }

.hdp-spinner {
	width: 16px; height: 16px;
	border: 2.5px solid rgba(255,255,255,0.4);
	border-top-color: #fff;
	border-radius: 50%;
	animation: hdpSpin 0.7s linear infinite;
	display: inline-block;
}
@keyframes hdpSpin { to { transform: rotate(360deg); } }

/* Thank you page */
.hdp-thankyou-wrapper {
	max-width: 560px;
	margin: 40px auto;
	padding: 0 16px;
	font-family: "Hind Siliguri", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans Bengali", Roboto, sans-serif;
}
.hdp-thankyou-card {
	background: #fff;
	border-radius: 20px;
	box-shadow: 0 10px 30px rgba(15,118,110,0.1);
	padding: 40px 30px;
	text-align: center;
}
.hdp-thankyou-icon {
	font-size: 56px;
	margin-bottom: 12px;
	animation: hdpPop 0.5s ease;
}
@keyframes hdpPop {
	0% { transform: scale(0); }
	70% { transform: scale(1.15); }
	100% { transform: scale(1); }
}
.hdp-thankyou-title { font-family: "Baloo Da 2", "Hind Siliguri", sans-serif; font-size: 27px; font-weight: 700; color: #0f766e; margin: 0 0 12px; }
.hdp-thankyou-message { font-size: 15px; color: #4b5563; line-height: 1.8; margin-bottom: 26px; }
.hdp-thankyou-details {
	background: #f8fafc;
	border-radius: 14px;
	padding: 18px 20px;
	text-align: left;
	margin-bottom: 26px;
}
.hdp-thankyou-row {
	display: flex;
	justify-content: space-between;
	padding: 8px 0;
	border-bottom: 1px solid #e5e7eb;
	font-size: 13.5px;
}
.hdp-thankyou-row:last-child { border-bottom: none; }
.hdp-status-success { color: #16a34a; }

/* Responsive */
@media (max-width: 480px) {
	.hdp-card { padding: 22px 16px; }
	.hdp-title { font-size: 19px; }
	.hdp-type-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
	.hdp-type-card { padding: 16px 10px; }
	.hdp-type-icon { font-size: 26px; }
	.hdp-product-grid { grid-template-columns: 1fr 1fr; }
	.hdp-methods-grid { grid-template-columns: 1fr; }
	.hdp-nav { flex-direction: column-reverse; }
	.hdp-btn { width: 100%; }
}