/**
 * BHD Pay Pro — Frontend CSS
 * Pixel-perfect match with reference design
 * Light & Dark theme for QR Payment UI
 */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

/* ===== BASE RESET ===== */
.bhd-payment-wrap *,
.bhd-payment-wrap *::before,
.bhd-payment-wrap *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

.bhd-payment-wrap {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	font-size: 14px;
	line-height: 1.6;
	border-radius: 16px;
	overflow: hidden;
	margin: 24px auto;
	max-width: 980px;
}

/* ================================================================
   LIGHT THEME
   ================================================================ */
.bhd-theme-light {
	background: #ffffff;
	color: #1f2937;
	border: 1px solid #e2e8f0;
	box-shadow: 0 1px 2px rgba(0,0,0,0.05), 0 4px 12px rgba(0,0,0,0.04);
}

/* Header */
.bhd-theme-light .bhd-pay-header {
	background: #ffffff;
	border-bottom: 1px solid #e5e7eb;
}
.bhd-theme-light .bhd-header-icon { background: #eff6ff; color: #2563eb; }
.bhd-theme-light .bhd-pay-title { color: #111827; }
.bhd-theme-light .bhd-pay-subtitle { color: #6b7280; }
.bhd-theme-light .bhd-countdown { color: #2563eb; }
.bhd-theme-light .bhd-countdown-label { color: #6b7280; }

/* Amount bar */
.bhd-theme-light .bhd-amount-bar {
	background: #ffffff;
	border-bottom: 1px solid #e5e7eb;
}
.bhd-theme-light .bhd-amt-card {
	background: #ffffff;
	border: none;
}
.bhd-theme-light .bhd-amt-label { color: #6b7280; }
.bhd-theme-light .bhd-amt-value { color: #111827; }
.bhd-theme-light .bhd-amt-icon-amount,
.bhd-theme-light .bhd-amt-icon-fee,
.bhd-theme-light .bhd-amt-icon-total {
	background: #f8fafc;
	color: #475569;
	border: 1px solid #e2e8f0;
}
.bhd-theme-light .bhd-amt-total { color: #2973FC; font-weight: 800; }

/* Body */
.bhd-theme-light .bhd-section-title { color: #0f172a; }

/* QR wrap */
.bhd-theme-light .bhd-qr-frame {
	border: 1px solid #e2e8f0;
	background: #ffffff;
}

/* Bank info */
.bhd-theme-light .bhd-bank-panel {
	background: #ffffff;
	border: 1px solid #e2e8f0;
}
.bhd-theme-light .bhd-bank-panel-title { color: #0f172a; }
.bhd-theme-light .bhd-info-row {
	background: #ffffff;
	border: none;
}
.bhd-theme-light .bhd-info-label { color: #64748b; }
.bhd-theme-light .bhd-info-value { color: #0f172a; }

.bhd-theme-light .bhd-icon-user,
.bhd-theme-light .bhd-icon-card,
.bhd-theme-light .bhd-icon-bank,
.bhd-theme-light .bhd-icon-msg {
	background: #f8fafc;
	color: #475569;
	border: 1px solid #e2e8f0;
}

.bhd-theme-light .bhd-copy-btn {
	background: #f1f5f9;
	color: #64748b;
	border: none;
}
.bhd-theme-light .bhd-copy-btn:hover {
	background: #e2e8f0;
	color: #0f172a;
}

/* Warning */
.bhd-theme-light .bhd-warning-box {
	background: #fff7ed;
	border: 1px solid #fed7aa;
}
.bhd-theme-light .bhd-warning-title { color: #d97706; }
.bhd-theme-light .bhd-warning-text { color: #4b5563; }

/* QR validity */
.bhd-theme-light .bhd-qr-validity { color: #64748b; }
.bhd-theme-light .bhd-countdown-inline { color: #0f172a; }

/* Steps */
.bhd-theme-light .bhd-step-icon-1,
.bhd-theme-light .bhd-step-icon-2,
.bhd-theme-light .bhd-step-icon-3 {
	background: #f8fafc;
	color: #475569;
	border: 1px solid #e2e8f0;
}
.bhd-theme-light .bhd-step-badge {
	background: #2973FC;
	color: #ffffff;
	border: 2px solid #ffffff;
}
.bhd-theme-light .bhd-step h4 { color: #111827; }
.bhd-theme-light .bhd-step p { color: #6b7280; }

/* Support */
.bhd-theme-light .bhd-support-label { color: #6b7280; }
.bhd-theme-light .bhd-support-btn {
	background: #ffffff;
	color: #4b5563;
	border: 1px solid #e2e8f0;
}
.bhd-theme-light .bhd-support-btn:hover {
	background: #f8fafc;
	border-color: #cbd5e1;
}

/* Cancel */
.bhd-theme-light .bhd-cancel-bar {
	background: #ffffff;
	border-top: 1px solid #e5e7eb;
}
.bhd-theme-light .bhd-cancel-btn { color: #ef4444; }
.bhd-theme-light .bhd-cancel-btn:hover { color: #dc2626; }


/* ================================================================
   DARK THEME
   ================================================================ */
.bhd-theme-dark {
	background: #0f172a;
	color: #e2e8f0;
	border: 1px solid #1e293b;
	box-shadow: 0 8px 40px rgba(0,0,0,0.4);
}

/* Header */
.bhd-theme-dark .bhd-pay-header {
	background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
	border-bottom: 1px solid #1e293b;
}
.bhd-theme-dark .bhd-pay-title { color: #f1f5f9; }
.bhd-theme-dark .bhd-pay-subtitle { color: #64748b; }
.bhd-theme-dark .bhd-countdown { color: #f1f5f9; }
.bhd-theme-dark .bhd-countdown-label { color: #64748b; }

/* Amount bar */
.bhd-theme-dark .bhd-amount-bar {
	background: #1e293b;
	border-bottom: 1px solid #253047;
}
.bhd-theme-dark .bhd-amt-card {
	background: #253047;
	border: 1px solid #334155;
}
.bhd-theme-dark .bhd-amt-label { color: #94a3b8; }
.bhd-theme-dark .bhd-amt-value { color: #f1f5f9; }
.bhd-theme-dark .bhd-amt-icon-amount,
.bhd-theme-dark .bhd-amt-icon-fee,
.bhd-theme-dark .bhd-amt-icon-total {
	background: #0f172a;
	color: #94a3b8;
	border: 1px solid #334155;
}
.bhd-theme-dark .bhd-amt-total { color: #f8fafc; font-weight: 800; }

/* Body */
.bhd-theme-dark .bhd-section-title { color: #f1f5f9; }

/* QR wrap */
.bhd-theme-dark .bhd-qr-frame {
	border: 1px solid #334155;
	background: #1e293b;
}

/* Bank info */
.bhd-theme-dark .bhd-bank-panel {
	background: #1e293b;
	border: 1px solid #334155;
}
.bhd-theme-dark .bhd-bank-panel-title { color: #60a5fa; }
.bhd-theme-dark .bhd-info-row {
	background: #1e293b;
	border: none;
}
.bhd-theme-dark .bhd-info-label { color: #64748b; }
.bhd-theme-dark .bhd-info-value { color: #f1f5f9; }
.bhd-theme-dark .bhd-icon-user,
.bhd-theme-dark .bhd-icon-card,
.bhd-theme-dark .bhd-icon-bank,
.bhd-theme-dark .bhd-icon-msg {
	background: #0f172a;
	color: #94a3b8;
	border: 1px solid #334155;
}
.bhd-theme-dark .bhd-copy-btn {
	background: #334155;
	color: #94a3b8;
	border: 1px solid #475569;
}
.bhd-theme-dark .bhd-copy-btn:hover {
	background: #3b82f6;
	color: #ffffff;
	border-color: #3b82f6;
}

/* Warning */
.bhd-theme-dark .bhd-warning-box {
	background: #1c1508;
	border: 1px solid #92400e;
	border-left: 3px solid #f59e0b;
}
.bhd-theme-dark .bhd-warning-title { color: #fbbf24; }
.bhd-theme-dark .bhd-warning-text { color: #fcd34d; }

/* QR validity */
.bhd-theme-dark .bhd-qr-validity { color: #64748b; }
.bhd-theme-dark .bhd-countdown-inline { color: #60a5fa; }

/* Steps */
.bhd-theme-dark .bhd-step-icon-1,
.bhd-theme-dark .bhd-step-icon-2,
.bhd-theme-dark .bhd-step-icon-3 {
	background: #0f172a;
	color: #94a3b8;
	border: 1px solid #334155;
}
.bhd-theme-dark .bhd-step-badge {
	background: #f8fafc;
	color: #0f172a;
	border: 2px solid #0f172a;
}
.bhd-theme-dark .bhd-step h4 { color: #f1f5f9; }
.bhd-theme-dark .bhd-step p { color: #94a3b8; }

/* Support */
.bhd-theme-dark .bhd-support-label { color: #64748b; }
.bhd-theme-dark .bhd-support-btn {
	background: transparent;
	color: #94a3b8;
	border: 1px solid #334155;
}
.bhd-theme-dark .bhd-support-btn:hover {
	background: #1e293b;
	border-color: #475569;
	color: #e2e8f0;
}

/* Cancel */
.bhd-theme-dark .bhd-cancel-bar {
	background: #1a0a0a;
	border-top: 1px solid #450a0a;
}
.bhd-theme-dark .bhd-cancel-btn { color: #f87171; }
.bhd-theme-dark .bhd-cancel-btn:hover { color: #ef4444; }


/* ================================================================
   COMMON LAYOUT
   ================================================================ */

/* — Header — */
.bhd-pay-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px 32px;
}

.bhd-pay-header-left {
	display: flex;
	align-items: center;
	gap: 14px;
}

.bhd-pay-icon {
	width: 44px;
	height: 44px;
	border-radius: 10px;
	background: #2973FC;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #ffffff;
	flex-shrink: 0;
}

.bhd-pay-icon svg {
	width: 22px;
	height: 22px;
}

.bhd-pay-title {
	font-size: 18px;
	font-weight: 700;
	margin: 0;
	line-height: 1.3;
}

.bhd-pay-subtitle {
	font-size: 13px;
	margin: 2px 0 0;
	font-weight: 400;
}

.bhd-countdown-box {
	text-align: right;
}

.bhd-countdown-label {
	font-size: 12px;
	display: block;
	margin-bottom: 2px;
}

.bhd-countdown {
	font-size: 32px;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	letter-spacing: 1px;
	line-height: 1;
}

.bhd-countdown.bhd-expired {
	color: #ef4444 !important;
}


/* — Amount Bar — */
.bhd-amount-bar {
	display: flex;
	align-items: stretch;
	gap: 12px;
	padding: 16px 32px;
}

.bhd-amt-card {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 18px;
	border-radius: 12px;
}

.bhd-amt-icon {
	width: 40px;
	height: 40px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.bhd-amt-icon svg {
	width: 20px;
	height: 20px;
}

.bhd-amt-label {
	font-size: 12px;
	margin: 0;
	font-weight: 400;
}

.bhd-amt-value {
	font-size: 20px;
	font-weight: 700;
	margin: 0;
	line-height: 1.2;
}


/* — Body — */
.bhd-pay-body {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1fr);
	gap: 24px;
	padding: 28px 32px;
}

.bhd-pay-col {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.bhd-pay-col-info {
	padding: 0 24px;
	border-left: 1px solid #e5e7eb;
	border-right: 1px solid #e5e7eb;
}

.bhd-theme-dark .bhd-pay-col-info {
	border-color: #1e293b;
}

/* — QR Section (left) — */
.bhd-qr-frame {
	width: 100%;
	border-radius: 12px;
	padding: 16px;
	text-align: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
	position: relative;
	overflow: hidden;
}

.bhd-qr-scanner {
	position: absolute;
	top: 16px;
	left: 16px;
	right: 16px;
	height: 3px;
	background: #3b82f6;
	box-shadow: 0 0 10px #3b82f6, 0 0 20px #3b82f6;
	animation: qr-scan 2.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
	z-index: 10;
	border-radius: 50%;
}

@keyframes qr-scan {
	0% { top: 16px; opacity: 0; }
	15% { opacity: 1; }
	85% { opacity: 1; }
	100% { top: calc(100% - 16px - 3px); opacity: 0; }
}

.bhd-qr-frame img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 6px;
	position: relative;
	z-index: 5;
}

.bhd-qr-placeholder {
	width: 100%;
	height: 200px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	opacity: 0.5;
}

/* — Bank Info Panel — */
.bhd-bank-panel {
	border-radius: 12px;
	padding: 16px;
}

.bhd-bank-panel-title {
	font-size: 14px;
	font-weight: 600;
	margin-bottom: 14px;
}

.bhd-info-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px;
	border-radius: 10px;
	margin-bottom: 8px;
	transition: background 0.2s ease;
}

.bhd-theme-light .bhd-info-row:hover {
	background: #f1f5f9;
}

.bhd-info-icon {
	width: 36px;
	height: 36px;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.bhd-info-icon svg {
	width: 18px;
	height: 18px;
}

.bhd-info-content {
	flex: 1;
	min-width: 0;
}

.bhd-info-label {
	font-size: 13px;
	display: block;
	margin-bottom: 2px;
	font-weight: 400;
	color: #64748b;
}

.bhd-info-value {
	font-size: 15px;
	font-weight: 500;
	display: block;
	word-break: break-all;
	color: #0f172a;
}

.bhd-transfer-content {
	color: #dc2626 !important;
	font-weight: 600;
}

.bhd-copy-btn {
	width: 36px;
	height: 36px;
	border-radius: 8px;
	background: #f1f5f9;
	color: #64748b;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	flex-shrink: 0;
	transition: all 0.15s ease;
	border: none;
}

.bhd-theme-light .bhd-copy-btn:hover {
	background: #e2e8f0;
	color: #0f172a;
}

.bhd-copy-btn svg {
	width: 14px;
	height: 14px;
}

.bhd-copy-btn.bhd-copied {
	background: #22c55e !important;
	color: #ffffff !important;
	border-color: #22c55e !important;
}


/* — Warning Box — */
.bhd-warning-box {
	display: flex;
	gap: 12px;
	padding: 16px;
	border-radius: 12px;
}

.bhd-warning-icon-wrap {
	font-size: 18px;
	flex-shrink: 0;
	line-height: 1;
}

.bhd-warning-body { flex: 1; }

.bhd-warning-title {
	font-size: 13px;
	font-weight: 600;
	margin-bottom: 4px;
}

.bhd-warning-text {
	font-size: 12px;
	line-height: 1.5;
	margin: 0;
}


/* — QR Validity — */
.bhd-qr-validity {
	font-size: 13px;
	display: flex;
	align-items: center;
	gap: 6px;
	justify-content: center;
}

.bhd-qr-validity svg {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

/* — Payment Status (Loading) — */
.bhd-payment-status {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-size: 13px;
	color: #2563eb;
	font-weight: 500;
	background: #eff6ff;
	padding: 10px;
	border-radius: 8px;
	margin-top: 4px;
}

.bhd-theme-dark .bhd-payment-status {
	background: #1e3a8a;
	color: #60a5fa;
}

.bhd-spinner-icon {
	width: 16px;
	height: 16px;
	animation: bhd-spin 2s linear infinite;
}

@keyframes bhd-spin {
	100% { transform: rotate(360deg); }
}

.bhd-payment-wrap.bhd-expired .bhd-payment-status {
	background: #fef2f2;
	color: #ef4444;
}
.bhd-theme-dark.bhd-expired .bhd-payment-status {
	background: #450a0a;
	color: #fca5a5;
}

.bhd-payment-wrap.bhd-paid .bhd-payment-status {
	background: #f0fdf4;
	color: #22c55e;
}
.bhd-theme-dark.bhd-paid .bhd-payment-status {
	background: #052e16;
	color: #86efac;
}

.bhd-status-icon {
	width: 16px;
	height: 16px;
}

.bhd-countdown-inline {
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}


/* — Steps (right) — */
.bhd-steps {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.bhd-step {
	display: flex;
	gap: 12px;
	align-items: flex-start;
}

.bhd-step-icon {
	width: 44px;
	height: 44px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	position: relative;
}

.bhd-step-icon svg {
	width: 20px;
	height: 20px;
}

.bhd-step-badge {
	position: absolute;
	top: -4px;
	right: -4px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 10px;
	font-weight: 700;
	line-height: 1;
}

.bhd-step-text { flex: 1; }

.bhd-step-text h4 {
	font-size: 14px;
	font-weight: 600;
	margin: 0 0 3px;
}

.bhd-step-text p {
	font-size: 13px;
	margin: 0;
	line-height: 1.5;
}


/* — Support Buttons — */
.bhd-support-section {
	margin-top: 32px;
}

.bhd-support-label {
	font-size: 13px;
	font-weight: 500;
	margin-bottom: 12px;
	text-align: center;
}

.bhd-support-buttons {
	display: flex;
	gap: 10px;
	justify-content: center;
}

.bhd-support-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 10px 14px;
	border-radius: 10px;
	cursor: pointer;
	font-size: 13px;
	font-weight: 500;
	text-decoration: none;
	transition: all 0.15s ease;
	font-family: inherit;
	text-transform: none;
	white-space: nowrap;
}

.bhd-support-btn svg {
	width: 16px;
	height: 16px;
}


/* — Cancel — */
.bhd-cancel-bar {
	padding: 18px 32px;
	text-align: center;
}

.bhd-cancel-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border: none !important;
	background: transparent !important;
	box-shadow: none !important;
	cursor: pointer;
	font-size: 14px;
	font-weight: 500;
	font-family: inherit;
	text-transform: none;
	transition: color 0.15s ease;
	padding: 0 !important;
}

.bhd-cancel-btn svg {
	width: 16px;
	height: 16px;
}


/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 960px) {
	.bhd-payment-wrap {
		margin: 16px;
	}
	
	.bhd-pay-body {
		grid-template-columns: 1fr;
		gap: 32px;
		padding: 20px;
	}
	
	.bhd-pay-col-info {
		padding: 32px 0;
		border-left: none;
		border-right: none;
		border-top: 1px solid #e5e7eb;
		border-bottom: 1px solid #e5e7eb;
	}
	.bhd-theme-dark .bhd-pay-col-info {
		border-color: #1e293b;
	}
	
	.bhd-amount-bar {
		flex-direction: column;
		gap: 8px;
		padding: 16px 20px;
	}
	
	.bhd-pay-header {
		padding: 16px 20px;
	}
	
	.bhd-cancel-bar {
		padding: 16px 20px;
	}
	
	.bhd-support-buttons {
		flex-direction: column;
	}
	
	.bhd-support-btn {
		justify-content: center;
	}
}


/* ================================================================
   UTILITIES
   ================================================================ */

/* Copy feedback toast */
.bhd-copy-feedback {
	position: fixed;
	top: 32px;
	left: 50%;
	transform: translate(-50%, -16px);
	background: #10b981;
	color: #ffffff;
	padding: 10px 24px;
	border-radius: 40px;
	font-size: 14px;
	font-weight: 500;
	z-index: 99999;
	opacity: 0;
	transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
	pointer-events: none;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
	box-shadow: 0 10px 15px -3px rgba(16, 185, 129, 0.25), 0 4px 6px -4px rgba(16, 185, 129, 0.1);
	display: flex;
	align-items: center;
	gap: 8px;
}

.bhd-copy-feedback::before {
	content: '';
	display: inline-block;
	width: 16px;
	height: 16px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

.bhd-copy-feedback.show {
	opacity: 1;
	transform: translate(-50%, 0);
}

/* Payment confirmed overlay */
.bhd-payment-wrap.bhd-paid {
	pointer-events: none;
	opacity: 0.6;
}