/**
 * 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 ===== */
.bhdpaypro-frontend-scope.bhd-payment-wrap *,  .bhdpaypro-frontend-scope.bhd-payment-wrap *::before,  .bhdpaypro-frontend-scope.bhd-payment-wrap *::after{
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}  .bhdpaypro-frontend-scope.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
   ================================================================ */
.bhdpaypro-frontend-scope.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 */
.bhdpaypro-frontend-scope.bhd-theme-light .bhd-pay-header{
	background: #ffffff;
	border-bottom: 1px solid #e5e7eb;
} .bhdpaypro-frontend-scope.bhd-theme-light .bhd-header-icon{ background: #eff6ff; color: #2563eb; } .bhdpaypro-frontend-scope.bhd-theme-light .bhd-pay-title{ color: #111827; } .bhdpaypro-frontend-scope.bhd-theme-light .bhd-pay-subtitle{ color: #6b7280; } .bhdpaypro-frontend-scope.bhd-theme-light .bhd-countdown{ color: #2563eb; } .bhdpaypro-frontend-scope.bhd-theme-light .bhd-countdown-label{ color: #6b7280; }  /* Amount bar */
.bhdpaypro-frontend-scope.bhd-theme-light .bhd-amount-bar{
	background: #ffffff;
	border-bottom: 1px solid #e5e7eb;
} .bhdpaypro-frontend-scope.bhd-theme-light .bhd-amt-card{
	background: #ffffff;
	border: none;
} .bhdpaypro-frontend-scope.bhd-theme-light .bhd-amt-label{ color: #6b7280; } .bhdpaypro-frontend-scope.bhd-theme-light .bhd-amt-value{ color: #111827; } .bhdpaypro-frontend-scope.bhd-theme-light .bhd-amt-icon-amount,  .bhdpaypro-frontend-scope.bhd-theme-light .bhd-amt-icon-fee,  .bhdpaypro-frontend-scope.bhd-theme-light .bhd-amt-icon-total{
	background: #f8fafc;
	color: #475569;
	border: 1px solid #e2e8f0;
} .bhdpaypro-frontend-scope.bhd-theme-light .bhd-amt-total{ color: #2973FC; font-weight: 800; }  /* Body */
.bhdpaypro-frontend-scope.bhd-theme-light .bhd-section-title{ color: #0f172a; }  /* QR wrap */
.bhdpaypro-frontend-scope.bhd-theme-light .bhd-qr-frame{
	border: 1px solid #e2e8f0;
	background: #ffffff;
}  /* Bank info */
.bhdpaypro-frontend-scope.bhd-theme-light .bhd-bank-panel{
	background: #ffffff;
	border: 1px solid #e2e8f0;
} .bhdpaypro-frontend-scope.bhd-theme-light .bhd-bank-panel-title{ color: #0f172a; } .bhdpaypro-frontend-scope.bhd-theme-light .bhd-info-row{
	background: #ffffff;
	border: none;
} .bhdpaypro-frontend-scope.bhd-theme-light .bhd-info-label{ color: #64748b; } .bhdpaypro-frontend-scope.bhd-theme-light .bhd-info-value{ color: #0f172a; }  .bhdpaypro-frontend-scope.bhd-theme-light .bhd-icon-user,  .bhdpaypro-frontend-scope.bhd-theme-light .bhd-icon-card,  .bhdpaypro-frontend-scope.bhd-theme-light .bhd-icon-bank,  .bhdpaypro-frontend-scope.bhd-theme-light .bhd-icon-msg{
	background: #f8fafc;
	color: #475569;
	border: 1px solid #e2e8f0;
}  .bhdpaypro-frontend-scope.bhd-theme-light .bhd-copy-btn{
	background: #f1f5f9;
	color: #64748b;
	border: none;
} .bhdpaypro-frontend-scope.bhd-theme-light .bhd-copy-btn:hover{
	background: #e2e8f0;
	color: #0f172a;
}  /* Warning */
.bhdpaypro-frontend-scope.bhd-theme-light .bhd-warning-box{
	background: #fff7ed;
	border: 1px solid #fed7aa;
} .bhdpaypro-frontend-scope.bhd-theme-light .bhd-warning-title{ color: #d97706; } .bhdpaypro-frontend-scope.bhd-theme-light .bhd-warning-text{ color: #4b5563; }  /* QR validity */
.bhdpaypro-frontend-scope.bhd-theme-light .bhd-qr-validity{ color: #64748b; } .bhdpaypro-frontend-scope.bhd-theme-light .bhd-countdown-inline{ color: #0f172a; }  /* Steps */
.bhdpaypro-frontend-scope.bhd-theme-light .bhd-step-icon-1,  .bhdpaypro-frontend-scope.bhd-theme-light .bhd-step-icon-2,  .bhdpaypro-frontend-scope.bhd-theme-light .bhd-step-icon-3{
	background: #f8fafc;
	color: #475569;
	border: 1px solid #e2e8f0;
} .bhdpaypro-frontend-scope.bhd-theme-light .bhd-step-badge{
	background: #2973FC;
	color: #ffffff;
	border: 2px solid #ffffff;
} .bhdpaypro-frontend-scope.bhd-theme-light .bhd-step h4{ color: #111827; } .bhdpaypro-frontend-scope.bhd-theme-light .bhd-step p{ color: #6b7280; }  /* Support */
.bhdpaypro-frontend-scope.bhd-theme-light .bhd-support-label{ color: #6b7280; } .bhdpaypro-frontend-scope.bhd-theme-light .bhd-support-btn{
	background: #ffffff;
	color: #4b5563;
	border: 1px solid #e2e8f0;
} .bhdpaypro-frontend-scope.bhd-theme-light .bhd-support-btn:hover{
	background: #f8fafc;
	border-color: #cbd5e1;
}  /* Cancel */
.bhdpaypro-frontend-scope.bhd-theme-light .bhd-cancel-bar{
	background: #ffffff;
	border-top: 1px solid #e5e7eb;
} .bhdpaypro-frontend-scope.bhd-theme-light .bhd-cancel-btn{ color: #ef4444; } .bhdpaypro-frontend-scope.bhd-theme-light .bhd-cancel-btn:hover{ color: #dc2626; }   /* ================================================================
   DARK THEME
   ================================================================ */
.bhdpaypro-frontend-scope.bhd-theme-dark{
	background: #0f172a;
	color: #e2e8f0;
	border: 1px solid #1e293b;
	box-shadow: 0 8px 40px rgba(0,0,0,0.4);
}  /* Header */
.bhdpaypro-frontend-scope.bhd-theme-dark .bhd-pay-header{
	background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
	border-bottom: 1px solid #1e293b;
} .bhdpaypro-frontend-scope.bhd-theme-dark .bhd-pay-title{ color: #f1f5f9; } .bhdpaypro-frontend-scope.bhd-theme-dark .bhd-pay-subtitle{ color: #64748b; } .bhdpaypro-frontend-scope.bhd-theme-dark .bhd-countdown{ color: #f1f5f9; } .bhdpaypro-frontend-scope.bhd-theme-dark .bhd-countdown-label{ color: #64748b; }  /* Amount bar */
.bhdpaypro-frontend-scope.bhd-theme-dark .bhd-amount-bar{
	background: #1e293b;
	border-bottom: 1px solid #253047;
} .bhdpaypro-frontend-scope.bhd-theme-dark .bhd-amt-card{
	background: #253047;
	border: 1px solid #334155;
} .bhdpaypro-frontend-scope.bhd-theme-dark .bhd-amt-label{ color: #94a3b8; } .bhdpaypro-frontend-scope.bhd-theme-dark .bhd-amt-value{ color: #f1f5f9; } .bhdpaypro-frontend-scope.bhd-theme-dark .bhd-amt-icon-amount,  .bhdpaypro-frontend-scope.bhd-theme-dark .bhd-amt-icon-fee,  .bhdpaypro-frontend-scope.bhd-theme-dark .bhd-amt-icon-total{
	background: #0f172a;
	color: #94a3b8;
	border: 1px solid #334155;
} .bhdpaypro-frontend-scope.bhd-theme-dark .bhd-amt-total{ color: #f8fafc; font-weight: 800; }  /* Body */
.bhdpaypro-frontend-scope.bhd-theme-dark .bhd-section-title{ color: #f1f5f9; }  /* QR wrap */
.bhdpaypro-frontend-scope.bhd-theme-dark .bhd-qr-frame{
	border: 1px solid #334155;
	background: #1e293b;
}  /* Bank info */
.bhdpaypro-frontend-scope.bhd-theme-dark .bhd-bank-panel{
	background: #1e293b;
	border: 1px solid #334155;
} .bhdpaypro-frontend-scope.bhd-theme-dark .bhd-bank-panel-title{ color: #60a5fa; } .bhdpaypro-frontend-scope.bhd-theme-dark .bhd-info-row{
	background: #1e293b;
	border: none;
} .bhdpaypro-frontend-scope.bhd-theme-dark .bhd-info-label{ color: #64748b; } .bhdpaypro-frontend-scope.bhd-theme-dark .bhd-info-value{ color: #f1f5f9; } .bhdpaypro-frontend-scope.bhd-theme-dark .bhd-icon-user,  .bhdpaypro-frontend-scope.bhd-theme-dark .bhd-icon-card,  .bhdpaypro-frontend-scope.bhd-theme-dark .bhd-icon-bank,  .bhdpaypro-frontend-scope.bhd-theme-dark .bhd-icon-msg{
	background: #0f172a;
	color: #94a3b8;
	border: 1px solid #334155;
} .bhdpaypro-frontend-scope.bhd-theme-dark .bhd-copy-btn{
	background: #334155;
	color: #94a3b8;
	border: 1px solid #475569;
} .bhdpaypro-frontend-scope.bhd-theme-dark .bhd-copy-btn:hover{
	background: #3b82f6;
	color: #ffffff;
	border-color: #3b82f6;
}  /* Warning */
.bhdpaypro-frontend-scope.bhd-theme-dark .bhd-warning-box{
	background: #1c1508;
	border: 1px solid #92400e;
	border-left: 3px solid #f59e0b;
} .bhdpaypro-frontend-scope.bhd-theme-dark .bhd-warning-title{ color: #fbbf24; } .bhdpaypro-frontend-scope.bhd-theme-dark .bhd-warning-text{ color: #fcd34d; }  /* QR validity */
.bhdpaypro-frontend-scope.bhd-theme-dark .bhd-qr-validity{ color: #64748b; } .bhdpaypro-frontend-scope.bhd-theme-dark .bhd-countdown-inline{ color: #60a5fa; }  /* Steps */
.bhdpaypro-frontend-scope.bhd-theme-dark .bhd-step-icon-1,  .bhdpaypro-frontend-scope.bhd-theme-dark .bhd-step-icon-2,  .bhdpaypro-frontend-scope.bhd-theme-dark .bhd-step-icon-3{
	background: #0f172a;
	color: #94a3b8;
	border: 1px solid #334155;
} .bhdpaypro-frontend-scope.bhd-theme-dark .bhd-step-badge{
	background: #f8fafc;
	color: #0f172a;
	border: 2px solid #0f172a;
} .bhdpaypro-frontend-scope.bhd-theme-dark .bhd-step h4{ color: #f1f5f9; } .bhdpaypro-frontend-scope.bhd-theme-dark .bhd-step p{ color: #94a3b8; }  /* Support */
.bhdpaypro-frontend-scope.bhd-theme-dark .bhd-support-label{ color: #64748b; } .bhdpaypro-frontend-scope.bhd-theme-dark .bhd-support-btn{
	background: transparent;
	color: #94a3b8;
	border: 1px solid #334155;
} .bhdpaypro-frontend-scope.bhd-theme-dark .bhd-support-btn:hover{
	background: #1e293b;
	border-color: #475569;
	color: #e2e8f0;
}  /* Cancel */
.bhdpaypro-frontend-scope.bhd-theme-dark .bhd-cancel-bar{
	background: #1a0a0a;
	border-top: 1px solid #450a0a;
} .bhdpaypro-frontend-scope.bhd-theme-dark .bhd-cancel-btn{ color: #f87171; } .bhdpaypro-frontend-scope.bhd-theme-dark .bhd-cancel-btn:hover{ color: #ef4444; }   /* ================================================================
   COMMON LAYOUT
   ================================================================ */
.bhdpaypro-frontend-scope /* — Header — */
.bhd-pay-header{
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px 32px;
}  .bhdpaypro-frontend-scope .bhd-pay-header-left{
	display: flex;
	align-items: center;
	gap: 14px;
}  .bhdpaypro-frontend-scope .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;
}  .bhdpaypro-frontend-scope .bhd-pay-icon svg{
	width: 22px;
	height: 22px;
}  .bhdpaypro-frontend-scope .bhd-pay-title{
	font-size: 18px;
	font-weight: 700;
	margin: 0;
	line-height: 1.3;
}  .bhdpaypro-frontend-scope .bhd-pay-subtitle{
	font-size: 13px;
	margin: 2px 0 0;
	font-weight: 400;
}  .bhdpaypro-frontend-scope .bhd-countdown-box{
	text-align: right;
}  .bhdpaypro-frontend-scope .bhd-countdown-label{
	font-size: 12px;
	display: block;
	margin-bottom: 2px;
}  .bhdpaypro-frontend-scope .bhd-countdown{
	font-size: 32px;
	font-weight: 800;
	font-variant-numeric: tabular-nums;
	letter-spacing: 1px;
	line-height: 1;
}  .bhdpaypro-frontend-scope .bhd-countdown.bhd-expired{
	color: #ef4444 !important;
}   /* — Amount Bar — */
.bhdpaypro-frontend-scope .bhd-amount-bar{
	display: flex;
	align-items: stretch;
	gap: 12px;
	padding: 16px 32px;
}  .bhdpaypro-frontend-scope .bhd-amt-card{
	flex: 1;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 18px;
	border-radius: 12px;
}  .bhdpaypro-frontend-scope .bhd-amt-icon{
	width: 40px;
	height: 40px;
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}  .bhdpaypro-frontend-scope .bhd-amt-icon svg{
	width: 20px;
	height: 20px;
}  .bhdpaypro-frontend-scope .bhd-amt-label{
	font-size: 12px;
	margin: 0;
	font-weight: 400;
}  .bhdpaypro-frontend-scope .bhd-amt-value{
	font-size: 20px;
	font-weight: 700;
	margin: 0;
	line-height: 1.2;
}   /* — Body — */
.bhdpaypro-frontend-scope .bhd-pay-body{
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1fr);
	gap: 24px;
	padding: 28px 32px;
}  .bhdpaypro-frontend-scope .bhd-pay-col{
	display: flex;
	flex-direction: column;
	gap: 16px;
}  .bhdpaypro-frontend-scope .bhd-pay-col-info{
	padding: 0 24px;
	border-left: 1px solid #e5e7eb;
	border-right: 1px solid #e5e7eb;
}  .bhdpaypro-frontend-scope.bhd-theme-dark .bhd-pay-col-info{
	border-color: #1e293b;
}  /* — QR Section (left) — */
.bhdpaypro-frontend-scope .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;
}  .bhdpaypro-frontend-scope .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; }}   .bhdpaypro-frontend-scope .bhd-qr-frame img{
	width: 100%;
	height: auto;
	display: block;
	border-radius: 6px;
	position: relative;
	z-index: 5;
}  .bhdpaypro-frontend-scope .bhd-qr-placeholder{
	width: 100%;
	height: 200px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	opacity: 0.5;
}  /* — Bank Info Panel — */
.bhdpaypro-frontend-scope .bhd-bank-panel{
	border-radius: 12px;
	padding: 16px;
}  .bhdpaypro-frontend-scope .bhd-bank-panel-title{
	font-size: 14px;
	font-weight: 600;
	margin-bottom: 14px;
}  .bhdpaypro-frontend-scope .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;
}  .bhdpaypro-frontend-scope.bhd-theme-light .bhd-info-row:hover{
	background: #f1f5f9;
}  .bhdpaypro-frontend-scope .bhd-info-icon{
	width: 36px;
	height: 36px;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}  .bhdpaypro-frontend-scope .bhd-info-icon svg{
	width: 18px;
	height: 18px;
}  .bhdpaypro-frontend-scope .bhd-info-content{
	flex: 1;
	min-width: 0;
}  .bhdpaypro-frontend-scope .bhd-info-label{
	font-size: 13px;
	display: block;
	margin-bottom: 2px;
	font-weight: 400;
	color: #64748b;
}  .bhdpaypro-frontend-scope .bhd-info-value{
	font-size: 15px;
	font-weight: 500;
	display: block;
	word-break: normal;
	color: #0f172a;
}  .bhdpaypro-frontend-scope .bhd-transfer-content{
	color: #dc2626 !important;
	font-weight: 600;
}  .bhdpaypro-frontend-scope .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;
}  .bhdpaypro-frontend-scope.bhd-theme-light .bhd-copy-btn:hover{
	background: #e2e8f0;
	color: #0f172a;
}  .bhdpaypro-frontend-scope .bhd-copy-btn svg{
	width: 14px;
	height: 14px;
}  .bhdpaypro-frontend-scope .bhd-copy-btn.bhd-copied{
	background: #22c55e !important;
	color: #ffffff !important;
	border-color: #22c55e !important;
}   /* — Warning Box — */
.bhdpaypro-frontend-scope .bhd-warning-box{
	display: flex;
	gap: 12px;
	padding: 16px;
	border-radius: 12px;
}  .bhdpaypro-frontend-scope .bhd-warning-icon-wrap{
	font-size: 18px;
	flex-shrink: 0;
	line-height: 1;
}  .bhdpaypro-frontend-scope .bhd-warning-body{ flex: 1; }  .bhdpaypro-frontend-scope .bhd-warning-title{
	font-size: 13px;
	font-weight: 600;
	margin-bottom: 4px;
}  .bhdpaypro-frontend-scope .bhd-warning-text{
	font-size: 12px;
	line-height: 1.5;
	margin: 0;
}   /* — QR Validity — */
.bhdpaypro-frontend-scope .bhd-qr-validity{
	font-size: 13px;
	display: flex;
	align-items: center;
	gap: 6px;
	justify-content: center;
}  .bhdpaypro-frontend-scope .bhd-qr-validity svg{
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}  /* — Payment Status (Loading) — */
.bhdpaypro-frontend-scope .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;
}  .bhdpaypro-frontend-scope.bhd-theme-dark .bhd-payment-status{
	background: #1e3a8a;
	color: #60a5fa;
}  .bhdpaypro-frontend-scope .bhd-spinner-icon{
	width: 16px;
	height: 16px;
	animation: bhd-spin 2s linear infinite;
}

@keyframes bhd-spin {
	100% { transform: rotate(360deg); }}   .bhdpaypro-frontend-scope.bhd-payment-wrap.bhd-expired .bhd-payment-status{
	background: #fef2f2;
	color: #ef4444;
} .bhdpaypro-frontend-scope.bhd-theme-dark.bhd-expired .bhd-payment-status{
	background: #450a0a;
	color: #fca5a5;
}  .bhdpaypro-frontend-scope.bhd-payment-wrap.bhd-paid .bhd-payment-status{
	background: #f0fdf4;
	color: #22c55e;
} .bhdpaypro-frontend-scope.bhd-theme-dark.bhd-paid .bhd-payment-status{
	background: #052e16;
	color: #86efac;
}  .bhdpaypro-frontend-scope .bhd-status-icon{
	width: 16px;
	height: 16px;
}  .bhdpaypro-frontend-scope .bhd-countdown-inline{
	font-weight: 700;
	font-variant-numeric: tabular-nums;
} /* — Steps (right) — */
.bhdpaypro-frontend-scope .bhd-steps{
	display: flex;
	flex-direction: column;
	gap: 24px;
}  .bhdpaypro-frontend-scope .bhd-step{
	display: flex;
	gap: 12px;
	align-items: flex-start;
}  .bhdpaypro-frontend-scope .bhd-step-icon{
	width: 44px;
	height: 44px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	position: relative;
}  .bhdpaypro-frontend-scope .bhd-step-icon svg{
	width: 20px;
	height: 20px;
}  .bhdpaypro-frontend-scope .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;
}  .bhdpaypro-frontend-scope .bhd-step-text{ flex: 1; }  .bhdpaypro-frontend-scope .bhd-step-text h4{
	font-size: 14px;
	font-weight: 600;
	margin: 0 0 3px;
}  .bhdpaypro-frontend-scope .bhd-step-text p{
	font-size: 13px;
	margin: 0;
	line-height: 1.5;
}   /* — Support Buttons — */
.bhdpaypro-frontend-scope .bhd-support-section{
	margin-top: 32px;
}  .bhdpaypro-frontend-scope .bhd-support-label{
	font-size: 13px;
	font-weight: 500;
	margin-bottom: 12px;
	text-align: center;
}  .bhdpaypro-frontend-scope .bhd-support-buttons{
	display: flex;
	gap: 10px;
	justify-content: center;
}  .bhdpaypro-frontend-scope .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;
}  .bhdpaypro-frontend-scope .bhd-support-btn svg{
	width: 16px;
	height: 16px;
}   /* — Cancel — */
.bhdpaypro-frontend-scope .bhd-cancel-bar{
	padding: 18px 32px;
	text-align: center;
}  .bhdpaypro-frontend-scope .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;
}  .bhdpaypro-frontend-scope .bhd-cancel-btn svg{
	width: 16px;
	height: 16px;
}


/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 960px) {  .bhdpaypro-frontend-scope.bhd-payment-wrap{
		margin: 16px;
	}    .bhdpaypro-frontend-scope .bhd-pay-body{
		grid-template-columns: 1fr;
		gap: 32px;
		padding: 20px;
	}    .bhdpaypro-frontend-scope .bhd-pay-col-info{
		padding: 32px 0;
		border-left: none;
		border-right: none;
		border-top: 1px solid #e5e7eb;
		border-bottom: 1px solid #e5e7eb;
	}  .bhdpaypro-frontend-scope.bhd-theme-dark .bhd-pay-col-info{
		border-color: #1e293b;
	}    .bhdpaypro-frontend-scope .bhd-amount-bar{
		flex-direction: column;
		gap: 8px;
		padding: 16px 20px;
	}    .bhdpaypro-frontend-scope .bhd-pay-header{
		padding: 16px 20px;
	}    .bhdpaypro-frontend-scope .bhd-cancel-bar{
		padding: 16px 20px;
	}    .bhdpaypro-frontend-scope .bhd-support-buttons{
		flex-direction: column;
	}    .bhdpaypro-frontend-scope .bhd-support-btn{
		justify-content: center;
	}}/* ================================================================
   UTILITIES
   ================================================================ */
/* Copy feedback toast */
.bhdpaypro-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;
}.bhdpaypro-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;
}.bhdpaypro-copy-feedback.show{
	opacity: 1;
	transform: translate(-50%, 0);
}  /* Payment confirmed overlay */
.bhdpaypro-frontend-scope.bhd-payment-wrap.bhd-paid{
	pointer-events: none;
	opacity: 0.6;
}