/* ============================================================
   BanglaPress - WooCommerce Checkout Gateway Styles
   assets/css/checkout.css
   ============================================================ */

.mobile-banking-container {
	padding: 16px;
	background-color: #f9f9f9;
	border-radius: 10px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

ul.payment-method-list {
	list-style: none;
	padding: 0;
	margin: 0 0 12px;
}

.payment-method-item {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 10px;
	transition: filter 0.25s ease;
	flex-wrap: wrap;
}

/* ---- Payment buttons: shared base ---- */
.payment-button {
	background-color: #fff;
	border: 1px solid #d1d5db;
	border-radius: 8px;
	box-sizing: border-box;
	color: #111827;
	font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	font-size: 14px;
	font-weight: 600;
	padding: 0 14px;
	text-align: center;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
	cursor: pointer;
	user-select: none;
	-webkit-user-select: none;
	touch-action: manipulation;
	/* Fixed size on desktop, flexible on mobile */
	width: 130px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.2s, color 0.2s, transform 0.2s;
	flex-shrink: 0;
}
.payment-button:focus         { outline: 2px solid #E2126E; outline-offset: 2px; }
.payment-button:focus-visible { outline: 2px solid #E2126E; }

/* Per-operator hover colours */
.button-39:hover { background-color: #E2126E; color: #fff; } /* bKash  */
.button-40:hover { background-color: #F69220; color: #fff; } /* Nagad  */
.button-41:hover { background-color: #88288F; color: #fff; } /* Rocket */
.button-42:hover { background-color: #0054A5; color: #fff; } /* Upay   */

/* Selection effects */
.payment-button.zoom         { transform: scale(1.08); z-index: 1; }
.payment-method-item.blur    { filter: blur(1.5px); opacity: 0.7; }

/* Payment icon */
.payment-icon {
	width: 44px;
	height: 44px;
	object-fit: contain;
	flex-shrink: 0;
}

/* Payment number (revealed on selection) */
.payment-number {
	font-weight: 700;
	color: #333;
	font-size: 15px;
	display: none;
}

/* ---- Input labels ---- */
.payer-number-label,
.transaction-id-label {
	font-size: 15px;
	font-weight: 500;
	color: #222;
	margin: 10px 0 4px;
	display: block;
}

/* ---- Form inputs ---- */
.mobile-banking-form {
	margin-top: 4px;
}
.mobile-banking-form input[type="tel"],
.mobile-banking-form input[type="text"] {
	width: 100%;
	height: 42px;
	padding: 0 12px;
	border: 1px solid #d1d5db;
	border-radius: 6px;
	font-size: 14px;
	box-sizing: border-box;
	transition: border-color 0.25s, box-shadow 0.25s;
}
.mobile-banking-form input[type="tel"]:focus,
.mobile-banking-form input[type="text"]:focus {
	border-color: #E2126E;
	box-shadow: 0 0 0 3px rgba(226, 18, 110, 0.12);
	outline: none;
}
.mobile-banking-form input[type="tel"]:hover,
.mobile-banking-form input[type="text"]:hover {
	border-color: #aaa;
}

/* ---- Partial / Full payment options ---- */
.payment-options {
	display: flex;
	flex-direction: row;
	gap: 10px;
	align-items: stretch;
	margin-top: 14px;
	flex-wrap: wrap;
}
.payment-options input[type="radio"] { display: none; }
.payment-options label {
	background-color: #fff;
	border: 2px solid #333;
	box-sizing: border-box;
	color: #333;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 8px 14px;
	text-align: center;
	font-size: 14px;
	font-weight: 500;
	transition: border-color 0.2s, color 0.2s, background-color 0.2s;
	border-radius: 4px;
	flex: 1;
	min-width: 120px;
}
.payment-options label:hover { border-color: #E2126E; color: #E2126E; }
.payment-options input[type="radio"]:checked + label {
	background-color: #fff0f6;
	border-color: #E2126E;
	border-left: 4px solid #E2126E;
	color: #E2126E;
	font-weight: 700;
	box-shadow: 0 2px 6px rgba(226, 18, 110, 0.12);
}

/* ---- Responsive ---- */
@media (max-width: 600px) {
	.mobile-banking-container { padding: 12px; }

	.payment-method-item {
		flex-wrap: nowrap;   /* keep button+logo+number on ONE line */
		gap: 6px;
		overflow: hidden;
	}

	.payment-button {
		width: 80px;
		min-width: 70px;
		height: 38px;
		font-size: 12px;
		padding: 0 6px;
		flex-shrink: 0;
	}

	.payment-icon { width: 44px; height: 38px; }

	.payment-options {
		flex-direction: column;
		gap: 8px;
	}
	.payment-options label {
		width: 100%;
		min-width: auto;
		flex: none;
	}
}
@media (max-width: 380px) {
	.payment-button { height: 38px; font-size: 12px; }
}

/* ── Screenshot upload field ── */
.mobile-banking-form input[type="text"]#transaction_id {
	padding-right: 44px !important;
}
.mobile-banking-form #bp-checkout-screenshot-preview img {
	cursor: zoom-in;
	transition: opacity 0.2s;
}
.mobile-banking-form #bp-checkout-screenshot-preview img:hover { opacity: 0.85; }

/* ── Payment method item: single row, no wrap ── */
.payment-method-item {
	flex-wrap: nowrap !important;
	align-items: center !important;
	gap: 8px !important;
	overflow: hidden !important;
}

/* ── Logo: bigger, zoom cursor ── */
.payment-icon,
.bp-gw-logo {
	width: 72px !important;
	height: 60px !important;
	object-fit: contain !important;
	flex-shrink: 0 !important;
	cursor: zoom-in !important;
	border: 1px solid #eee !important;
	border-radius: 6px !important;
	background: #fff !important;
	padding: 4px !important;
	box-sizing: border-box !important;
	transition: transform 0.15s, box-shadow 0.15s !important;
	margin: 0 !important;
}
.payment-icon:hover,
.bp-gw-logo:hover {
	transform: scale(1.06) !important;
	box-shadow: 0 3px 10px rgba(0,0,0,0.14) !important;
}

/* ── Zoom badge on logo ── */
/* Zoom badge: hidden until operator selected, then shown on hover */
.bp-gw-zoom-badge {
	display: none;
	opacity: 0;
	transition: opacity 0.2s;
}
.bp-gw-logo-wrap.bp-selected .bp-gw-zoom-badge {
	display: block;
}
.bp-gw-logo-wrap.bp-selected:hover .bp-gw-zoom-badge { opacity: 1; }

/* ── Number: flex row (number + copy icon on same line) ── */
.payment-number.bp-gw-number {
	display: none; /* shown via JS as inline-flex */
	white-space: nowrap !important;
	align-items: center !important;
	gap: 5px !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	color: #111 !important;
	cursor: pointer !important;
	max-width: none !important;
	flex-shrink: 0 !important;
}
.bp-gw-num-text { white-space: nowrap; }

/* ── Checkout form labels ── */
.payer-number-label,
.transaction-id-label {
	font-weight: 700 !important;
	color: #222 !important;
	font-size: 13px !important;
}

/* ── Screenshot upload icon: no box ── */
#bp-checkout-screenshot-label {
	background: none !important;
	background-color: transparent !important;
	border: none !important;
	border-width: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin: 0 !important;
	width: auto !important;
	height: auto !important;
	color: #aaa !important;
	font-size: 22px !important;
	line-height: 1 !important;
	outline: none !important;
}
#bp-checkout-screenshot-label:hover { color: #E2126E !important; }

/* ── Checkout transaction field: room for icon ── */
.mobile-banking-form #transaction_id {
	padding-right: 44px !important;
}

/* ── Mobile: button smaller so row stays one line ── */
@media (max-width: 600px) {
	.payment-button {
		width: 80px !important;
		height: 36px !important;
		font-size: 12px !important;
		padding: 0 8px !important;
		flex-shrink: 0 !important;
	}
	.payment-icon,
	.bp-gw-logo {
		width: 48px !important;
		height: 40px !important;
	}
	.payment-method-item {
		gap: 6px !important;
	}
	.payment-number.bp-gw-number {
		font-size: 12px !important;
	}
}
@media (max-width: 380px) {
	.payment-button {
		width: 72px !important;
		font-size: 11px !important;
	}
	.payment-icon,
	.bp-gw-logo {
		width: 40px !important;
		height: 34px !important;
	}
}

/* ── Mobile only: selected operator — name shrinks to badge, number fills space ── */
@media (max-width: 768px) {
	/* Left column in op row: allow overflow to show full number */
	.bp-op-row > div:first-child {
		overflow: visible !important;
		min-width: 0;
	}

	/* Normal state: name readable */
	.bp-op-row .bp-op-name {
		font-size: 14px !important;
		font-weight: 700 !important;
		white-space: nowrap;
		flex-shrink: 0;
		transition: font-size 0.15s, background 0.15s, padding 0.15s;
	}

	/* Number: hidden by default, no clipping */
	.bp-op-row .bp-op-number {
		white-space: nowrap !important;
		overflow: visible !important;
		text-overflow: clip !important;
		max-width: none !important;
		flex: 1 1 auto !important;
	}

	/* Selected: name shrinks to small pill, number fills remaining space */
	.bp-op-row.bp-op-selected .bp-op-name {
		font-size: 10px !important;
		font-weight: 600 !important;
		color: #777 !important;
		background: #efefef !important;
		padding: 2px 7px !important;
		border-radius: 4px !important;
		white-space: nowrap !important;
		flex-shrink: 0 !important;
	}
	.bp-op-row.bp-op-selected .bp-op-number {
		display: inline-flex !important;
		font-size: 15px !important;
		font-weight: 800 !important;
		color: #111 !important;
		flex: 1 !important;
		padding-left: 6px !important;
		align-items: center !important;
		gap: 5px !important;
		white-space: nowrap !important;
		overflow: visible !important;
		max-width: none !important;
	}
}