/*
 * Cradis InstaPay Panel — Checkout Styles
 * TASK-007B (Rich): Panel + Beneficiary + FX + QR + Link + Instructions + Receipt.
 * TASK-008: Transaction ID field.
 * SPEC-024 §6: ONLY cradis-instapay- prefix (trailing dash) for every selector.
 * Font sizes use explicit px (not rem/em) to prevent theme base-font override.
 *
 * Palette matches the site's existing teal brand (see cradis-snippet-6 / 25 / 27 / 15):
 *   #18B2A8  primary teal      #e5f3fd  light blue tint
 *   #31A8A7  button teal       #e2e8f0  neutral border
 */

/* ── Typography & Global ────────────────────────────────────────────────── */
.woocommerce-checkout #payment ul.payment_methods li.payment_method_cradis_instapay,
.woocommerce-checkout #payment ul.payment_methods li.payment_method_cradis_instapay *,
li.payment_method_cradis_instapay,
li.payment_method_cradis_instapay *,
.cradis-instapay-panel,
.cradis-instapay-panel * {
	font-family: 'IBM Plex Sans Arabic', 'Cairo', 'Tajawal', sans-serif !important;
}

/* ── WooCommerce Payment Method Box Override ────────────────────────────── */
/* Use highly specific selectors to beat theme and default WooCommerce styles */
.woocommerce-checkout #payment ul.payment_methods li.payment_method_cradis_instapay,
#payment ul.payment_methods li.payment_method_cradis_instapay,
li.payment_method_cradis_instapay {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	border: 1.5px solid #e2e8f0 !important;
	background: #fff !important;
	box-sizing: border-box !important;
	transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.woocommerce-checkout #payment ul.payment_methods li.payment_method_cradis_instapay:has(input[type="radio"]:checked),
#payment ul.payment_methods li.payment_method_cradis_instapay:has(input[type="radio"]:checked),
li.payment_method_cradis_instapay:has(input[type="radio"]:checked) {
	border-color: #18B2A8 !important;
	box-shadow: 0 4px 16px rgba(24, 178, 168, 0.08) !important;
}

/* Custom Radio Button styling */
.woocommerce-checkout #payment ul.payment_methods li.payment_method_cradis_instapay input[type="radio"],
#payment ul.payment_methods li.payment_method_cradis_instapay input[type="radio"],
li.payment_method_cradis_instapay input[type="radio"] {
	appearance: none !important;
	-webkit-appearance: none !important;
	width: 22px !important;
	height: 22px !important;
	border: 2px solid #cbd5e1 !important;
	border-radius: 50% !important;
	outline: none !important;
	margin: 0 0 0 12px !important; /* Spacing next to label in RTL */
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	cursor: pointer !important;
	background: #fff !important;
	box-sizing: border-box !important;
	order: 1 !important;
	transition: all 0.2s ease !important;
}

.woocommerce-checkout #payment ul.payment_methods li.payment_method_cradis_instapay input[type="radio"]:checked,
#payment ul.payment_methods li.payment_method_cradis_instapay input[type="radio"]:checked,
li.payment_method_cradis_instapay input[type="radio"]:checked {
	border-color: #18B2A8 !important;
	background: #18B2A8 !important;
	box-shadow: inset 0 0 0 4px #fff !important;
}

.woocommerce-checkout #payment ul.payment_methods li.payment_method_cradis_instapay input[type="radio"]:checked::before,
#payment ul.payment_methods li.payment_method_cradis_instapay input[type="radio"]:checked::before,
li.payment_method_cradis_instapay input[type="radio"]:checked::before {
	display: none !important; /* We use inset box-shadow instead */
}

/* Gateway Label */
.woocommerce-checkout #payment ul.payment_methods li.payment_method_cradis_instapay > label,
#payment ul.payment_methods li.payment_method_cradis_instapay > label,
li.payment_method_cradis_instapay > label {
	order: 2 !important;
	flex-grow: 1 !important;
	display: flex !important;
	justify-content: space-between !important;
	align-items: center !important;
	font-weight: 700 !important;
	color: #141417 !important;
	cursor: pointer !important;
	margin: 0 !important;
}

/* Gateway Logo */
.woocommerce-checkout #payment ul.payment_methods li.payment_method_cradis_instapay > label img,
#payment ul.payment_methods li.payment_method_cradis_instapay > label img,
li.payment_method_cradis_instapay > label img {
	width: auto !important;
	max-height: 100% !important;
	display: inline-block !important;
	margin: 0 !important;
}

/* Description / Payment Box */
.woocommerce-checkout #payment ul.payment_methods li.payment_method_cradis_instapay .payment_box.payment_method_cradis_instapay,
#payment ul.payment_methods li.payment_method_cradis_instapay .payment_box.payment_method_cradis_instapay,
li.payment_method_cradis_instapay .payment_box.payment_method_cradis_instapay {
	order: 3 !important;
	width: 100% !important;
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin: 0 !important;
}

/* Hide WooCommerce standard arrow/pseudo elements on the payment box */
.woocommerce-checkout #payment ul.payment_methods li.payment_method_cradis_instapay .payment_box::before,
.woocommerce-checkout #payment ul.payment_methods li.payment_method_cradis_instapay .payment_box::after,
li.payment_method_cradis_instapay .payment_box::before,
li.payment_method_cradis_instapay .payment_box::after {
	display: none !important;
}

/* Force hide payment box when not checked (bulletproof fallback for WC JS) */
li.payment_method_cradis_instapay input[type="radio"]:not(:checked) ~ .payment_box.payment_method_cradis_instapay {
	display: none !important;
}

/* WooCommerce payment box paragraph (Description text) */
.woocommerce-checkout #payment ul.payment_methods li.payment_method_cradis_instapay .payment_box > p,
li.payment_method_cradis_instapay .payment_box > p {
	color: #1a1a1a !important;
	line-height: 1.6 !important;
	margin: 0 !important;
	text-align: right !important;
}

/* ── Panel container ──────────────────────────────────────────────────────── */
.cradis-instapay-panel {
	direction: rtl !important;
	background: transparent !important;
	border: none !important;
	border-radius: 0 !important;
	padding: 0 !important;
	margin-top: 0 !important;
	box-sizing: border-box !important;
	max-width: 100%;
}

/* ── Beneficiary / FX rows ────────────────────────────────────────────────── */
.cradis-instapay-beneficiary-block {
	display: flex !important;
	flex-direction: column !important;
	gap: 20px !important;
}

.cradis-instapay-row {
	display: flex !important;
	align-items: center !important;
	flex-wrap: wrap !important;
	justify-content: flex-start !important;
}

.cradis-instapay-bullet {
	display: inline-block !important;
	width: 10px !important;
	height: 10px !important;
	border-radius: 50% !important;
	background: #31A8A7 !important;
	flex: 0 0 auto !important;
}

.cradis-instapay-label {
	color: #4A5568 !important;
	white-space: nowrap !important;
	font-weight: 700 !important;
}

.cradis-instapay-value {
	font-weight: 700 !important;
	color: #1a1a1a !important;
	word-break: break-word !important;
}

.cradis-instapay-phone,
.cradis-instapay-id,
.cradis-instapay-account-name {
	letter-spacing: 0.4px !important;
	unicode-bidi: isolate !important;
}

/* ── Copy button ──────────────────────────────────────────────────────────── */
.cradis-instapay-copy-btn {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	cursor: pointer !important;
	font-weight: 700 !important;
	color: #fff !important;
	background: #18B2A8 !important;
	border: none !important;
	border-radius: 6px !important;
	transition: background 0.15s ease, opacity 0.15s ease !important;
	user-select: none !important;
	white-space: nowrap !important;
	line-height: 1.4 !important;
}

.cradis-instapay-copy-btn:hover,
.cradis-instapay-copy-btn:focus {
	background: #128B83 !important;
	outline: 2px solid #128B83 !important;
	outline-offset: 2px !important;
}

.cradis-instapay-copy-btn:active {
	opacity: 0.8 !important;
}

.cradis-instapay-copy-btn.cradis-instapay-copied {
	background: #22c55e !important;
}

/* ── QR Code (007B) — REMOVED in TASK-013 ──────────────────────────────────── */
/* QR HTML is no longer rendered. Selectors kept as hidden stubs so any
   object-cached HTML from before the deploy does not produce layout errors. */
.cradis-instapay-qr-block,
.cradis-instapay-qr-intro,
.cradis-instapay-qr-toggle,
.cradis-instapay-qr-image-wrap,
.cradis-instapay-qr-image {
	display: none !important;
}


/* ── Payment Link / Open InstaPay CTA (TASK-013) ─────────────────────────── */
.cradis-instapay-link-block {
	text-align: center !important;
	margin-top: 4px !important;
	margin-bottom: 4px !important;
}

/* Legacy anchor — not rendered in new template; kept for backward-compat */
.cradis-instapay-payment-link {
	display: inline-block !important;
	font-weight: 700 !important;
	color: #fff !important;
	background: #18B2A8 !important;
	border-radius: 6px !important;
	text-decoration: none !important;
	transition: background 0.15s ease !important;
}

.cradis-instapay-payment-link:hover,
.cradis-instapay-payment-link:focus {
	background: #128B83 !important;
	color: #fff !important;
	outline: 2px solid #128B83 !important;
	outline-offset: 2px !important;
}

/* Open InstaPay CTA button — TASK-013 */
.cradis-instapay-open-btn {
	display: block !important;
	width: 100% !important;
	box-sizing: border-box !important;
	text-align: center !important;
	font-weight: 700 !important;
	color: #fff !important;
	background: #18B2A8 !important;
	border: none !important;
	border-radius: 8px !important;
	text-decoration: none !important;
	transition: background 0.18s ease, box-shadow 0.18s ease !important;
	cursor: pointer !important;
	line-height: 1.4 !important;
	letter-spacing: 0.02em !important;
}

.cradis-instapay-open-btn:hover,
.cradis-instapay-open-btn:focus {
	background: #128B83 !important;
	color: #fff !important;
	box-shadow: 0 4px 14px rgba(24, 178, 168, 0.35) !important;
	outline: 2px solid #128B83 !important;
	outline-offset: 2px !important;
	text-decoration: none !important;
}

.cradis-instapay-open-btn:active {
	opacity: 0.88 !important;
}


/* ── Instructions (007B) ─────────────────────────────────────────────────── */
.cradis-instapay-instructions {
	font-weight: 500 !important;
	line-height: 1.7 !important;
	color: #1a1a1a !important;
	text-align: center !important;
	background: #e5f3fd !important;
	border: none !important;
}

/* ── Transaction ID (TASK-008) ───────────────────────────────────────────── */
.cradis-instapay-txn-block {
	margin-top: 18px !important;
}

.cradis-instapay-txn-label {
	display: flex !important;
	align-items: center !important;
	font-weight: 700 !important;
	color: #1a1a1a !important;
}

.cradis-instapay-txn-input {
	display: block !important;
	width: 100% !important;
	border: 1px solid #e2e8f0 !important;
	border-radius: 6px !important;
	box-sizing: border-box !important;
	color: #131313 !important;
	background: #fff !important;
	transition: border-color 0.15s ease !important;
	text-align: right !important;
}

.cradis-instapay-txn-input::placeholder {
	color: #999 !important;
}

.cradis-instapay-txn-input:focus {
	outline: none !important;
	border-color: #18B2A8 !important;
	box-shadow: 0 0 0 2px rgba(24, 178, 168, 0.2) !important;
}

/* ── Receipt Upload (007B) ────────────────────────────────────────────────── */
.cradis-instapay-receipt-block {
	margin-top: 18px !important;
}

.cradis-instapay-receipt-label {
	display: flex !important;
	align-items: center !important;
	font-weight: 700 !important;
	color: #1a1a1a !important;
}

.cradis-instapay-receipt-control {
	position: relative !important;
	display: flex !important;
	flex-direction: row-reverse !important;
	align-items: center !important;
	gap: 0 !important;
	border: none !important;
	padding: 0 !important;
	background: transparent !important;
}

.cradis-instapay-receipt-filename {
	flex-grow: 1 !important;
	border: 1px solid #e2e8f0 !important;
	border-radius: 6px 0 0 6px !important; /* Right corners square, left corners rounded */
	border-right: none !important;
	background: #fff !important;
	color: #888 !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	white-space: nowrap !important;
	text-align: right !important;
	direction: rtl !important;
	box-sizing: border-box !important;
	display: inline-flex !important;
	align-items: center !important;
}

.cradis-instapay-receipt-button {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex: 0 0 auto !important;
	font-weight: 700 !important;
	color: #fff !important;
	background: #31A8A7 !important; /* Button teal */
	border-radius: 0 6px 6px 0 !important; /* Right corners rounded, left corners square */
	cursor: pointer !important;
	transition: background 0.15s ease !important;
	box-sizing: border-box !important;
	margin: 0 !important;
}

.cradis-instapay-receipt-button:hover {
	background: #288f8e !important;
}

.cradis-instapay-receipt-input {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

.cradis-instapay-receipt-input:focus-visible + .cradis-instapay-receipt-button,
.cradis-instapay-receipt-button:has(+ .cradis-instapay-receipt-input:focus-visible) {
	outline: 2px solid #288f8e !important;
	outline-offset: 2px !important;
}

.cradis-instapay-receipt-hint {
	margin: 6px 0 10px 0 !important;
	font-size: 13px !important;
	color: #666 !important;
	line-height: 1.6 !important;
	text-align: right !important;
	direction: rtl !important;
}

.cradis-instapay-upload-status {
	margin: 6px 0 0 0 !important;
	font-size: 13px !important;
	color: #555 !important;
	min-height: 1.2em !important;
}

/* ── Support footer ───────────────────────────────────────────────────────── */
.cradis-instapay-support-note {
	color: #4A5568 !important;
	text-align: center !important;
	border: none !important;
	padding: 0 !important;
	font-weight: 600 !important;
}

.cradis-instapay-support-email {
	color: #18B2A8 !important;
	font-weight: 700 !important;
	text-decoration: none !important;
}

.cradis-instapay-support-email::before {
	content: "[ " !important;
	color: #4A5568 !important;
	font-weight: normal !important;
}

.cradis-instapay-support-email::after {
	content: " ]" !important;
	color: #4A5568 !important;
	font-weight: normal !important;
}

.cradis-instapay-support-email:hover,
.cradis-instapay-support-email:focus {
	text-decoration: underline !important;
}

/* ── Responsive States ────────────────────────────────────────────────────── */

/* ── Desktop View (screen > 768px) - Column takes 1/3 width, so it is narrow ── */
@media (min-width: 769px) {
	.woocommerce-checkout #payment ul.payment_methods li.payment_method_cradis_instapay,
	#payment ul.payment_methods li.payment_method_cradis_instapay,
li.payment_method_cradis_instapay {
		padding: 16px !important;
		border-radius: 10px !important;
	}

	.woocommerce-checkout #payment ul.payment_methods li.payment_method_cradis_instapay input[type="radio"]:checked ~ .payment_box.payment_method_cradis_instapay,
	#payment ul.payment_methods li.payment_method_cradis_instapay input[type="radio"]:checked ~ .payment_box.payment_method_cradis_instapay,
li.payment_method_cradis_instapay input[type="radio"]:checked ~ .payment_box.payment_method_cradis_instapay,
li.payment_method_cradis_instapay:has(input[type="radio"]:checked) .payment_box.payment_method_cradis_instapay {
		margin-top: 12px !important;
		padding-top: 12px !important;
		border-top: 1px solid #e2e8f0 !important;
	}
li.payment_method_cradis_instapay > label {
		font-size: 15px !important;
	}
li.payment_method_cradis_instapay > label img {
		height: 28px !important;
	}
li.payment_method_cradis_instapay .payment_box > p {
		font-size: 14px !important;
		margin-bottom: 15px !important;
	}

	.cradis-instapay-beneficiary-block {
		gap: 20px !important;
	}

	.cradis-instapay-row {
		gap: 6px !important;
	}

	.cradis-instapay-bullet {
		width: 8px !important;
		height: 8px !important;
		margin-left: 5px !important;
	}

	.cradis-instapay-label {
		font-size: 14px !important;
	}

	.cradis-instapay-value {
		font-size: 14px !important;
	}

	.cradis-instapay-copy-btn {
		padding: 4px 10px !important;
		font-size: 12px !important;
		margin-right: 6px !important;
		height: 28px !important;
	}

	.cradis-instapay-open-btn {
		padding: 11px 20px !important;
		font-size: 14px !important;
		margin-top: 10px !important;
		margin-bottom: 4px !important;
	}

	.cradis-instapay-instructions {
		padding: 12px 16px !important;
		font-size: 14px !important;
		border-radius: 10px !important;
		margin-top: 14px !important;
		margin-bottom: 14px !important;
	}

	.cradis-instapay-txn-label,
	.cradis-instapay-receipt-label {
		font-size: 14px !important;
		margin-bottom: 8px !important;
		gap: 6px !important;
	}

	.cradis-instapay-txn-input {
		padding: 10px 12px !important;
		font-size: 14px !important;
		height: 42px !important;
	}

	.cradis-instapay-receipt-filename {
		padding: 10px 12px !important;
		font-size: 14px !important;
		height: 42px !important;
	}

	.cradis-instapay-receipt-button {
		padding: 10px 16px !important;
		font-size: 14px !important;
		height: 42px !important;
	}

	.cradis-instapay-support-note {
		font-size: 14px !important;
		margin-top: 18px !important;
	}
}

/* ── Tablet View (481px to 768px) - Column takes 100% width, so it is wide ── */
@media (min-width: 481px) and (max-width: 768px) {
	.woocommerce-checkout #payment ul.payment_methods li.payment_method_cradis_instapay,
	#payment ul.payment_methods li.payment_method_cradis_instapay,
li.payment_method_cradis_instapay {
		padding: 22px !important;
		border-radius: 12px !important;
	}

	.woocommerce-checkout #payment ul.payment_methods li.payment_method_cradis_instapay input[type="radio"]:checked ~ .payment_box.payment_method_cradis_instapay,
	#payment ul.payment_methods li.payment_method_cradis_instapay input[type="radio"]:checked ~ .payment_box.payment_method_cradis_instapay,
li.payment_method_cradis_instapay input[type="radio"]:checked ~ .payment_box.payment_method_cradis_instapay,
li.payment_method_cradis_instapay:has(input[type="radio"]:checked) .payment_box.payment_method_cradis_instapay {
		margin-top: 16px !important;
		padding-top: 16px !important;
		border-top: 1px solid #e2e8f0 !important;
	}
li.payment_method_cradis_instapay > label {
		font-size: 17px !important;
	}
li.payment_method_cradis_instapay > label img {
		height: 32px !important;
	}
li.payment_method_cradis_instapay .payment_box > p {
		font-size: 15px !important;
		margin-bottom: 20px !important;
	}

	.cradis-instapay-beneficiary-block {
		gap: 20px !important;
	}

	.cradis-instapay-row {
		gap: 8px !important;
	}

	.cradis-instapay-bullet {
		width: 10px !important;
		height: 10px !important;
		margin-left: 6px !important;
	}

	.cradis-instapay-label {
		font-size: 15px !important;
	}

	.cradis-instapay-value {
		font-size: 15px !important;
	}

	.cradis-instapay-copy-btn {
		padding: 5px 12px !important;
		font-size: 13px !important;
		margin-right: 8px !important;
		height: 32px !important;
	}

	.cradis-instapay-open-btn {
		padding: 13px 20px !important;
		font-size: 15px !important;
		margin-top: 12px !important;
		margin-bottom: 4px !important;
	}

	.cradis-instapay-instructions {
		padding: 14px 18px !important;
		font-size: 15px !important;
		border-radius: 12px !important;
		margin-top: 18px !important;
		margin-bottom: 18px !important;
	}

	.cradis-instapay-txn-label,
	.cradis-instapay-receipt-label {
		font-size: 15px !important;
		margin-bottom: 10px !important;
		gap: 8px !important;
	}

	.cradis-instapay-txn-input {
		padding: 11px 14px !important;
		font-size: 15px !important;
		height: 46px !important;
	}

	.cradis-instapay-receipt-filename {
		padding: 11px 14px !important;
		font-size: 15px !important;
		height: 46px !important;
	}

	.cradis-instapay-receipt-button {
		padding: 11px 18px !important;
		font-size: 15px !important;
		height: 46px !important;
	}

	.cradis-instapay-support-note {
		font-size: 15px !important;
		margin-top: 20px !important;
	}
}

/* ── Mobile View (screen <= 480px) - Narrow screen ── */
@media (max-width: 480px) {
	.woocommerce-checkout #payment ul.payment_methods li.payment_method_cradis_instapay,
	#payment ul.payment_methods li.payment_method_cradis_instapay,
li.payment_method_cradis_instapay {
		padding: 14px !important;
		border-radius: 8px !important;
	}

	.woocommerce-checkout #payment ul.payment_methods li.payment_method_cradis_instapay input[type="radio"]:checked ~ .payment_box.payment_method_cradis_instapay,
	#payment ul.payment_methods li.payment_method_cradis_instapay input[type="radio"]:checked ~ .payment_box.payment_method_cradis_instapay,
li.payment_method_cradis_instapay input[type="radio"]:checked ~ .payment_box.payment_method_cradis_instapay,
li.payment_method_cradis_instapay:has(input[type="radio"]:checked) .payment_box.payment_method_cradis_instapay {
		margin-top: 10px !important;
		padding-top: 10px !important;
		border-top: 1px solid #e2e8f0 !important;
	}
li.payment_method_cradis_instapay > label {
		font-size: 14px !important;
	}
li.payment_method_cradis_instapay > label img {
		height: 24px !important;
	}
li.payment_method_cradis_instapay .payment_box > p {
		font-size: 13px !important;
		margin-bottom: 12px !important;
	}

	.cradis-instapay-beneficiary-block {
		gap: 20px !important;
	}

	.cradis-instapay-row {
		gap: 6px !important;
	}

	.cradis-instapay-bullet {
		width: 8px !important;
		height: 8px !important;
		margin-left: 5px !important;
	}

	.cradis-instapay-label {
		font-size: 13px !important;
	}

	.cradis-instapay-value {
		font-size: 13px !important;
	}

	.cradis-instapay-copy-btn {
		justify-content: center !important;
		margin-right: 0 !important;
		margin-top: 5px !important;
		padding: 5px !important;
		font-size: 12px !important;
		height: 28px !important;
	}

	.cradis-instapay-open-btn {
		padding: 10px 16px !important;
		font-size: 13px !important;
		margin-top: 10px !important;
		margin-bottom: 4px !important;
	}

	.cradis-instapay-instructions {
		padding: 10px 12px !important;
		font-size: 13px !important;
		border-radius: 8px !important;
		margin-top: 12px !important;
		margin-bottom: 12px !important;
	}

	.cradis-instapay-txn-label,
	.cradis-instapay-receipt-label {
		font-size: 13px !important;
		margin-bottom: 6px !important;
		gap: 6px !important;
	}

	.cradis-instapay-txn-input {
		padding: 9px 11px !important;
		font-size: 14px !important;
		height: 38px !important;
	}

	.cradis-instapay-receipt-control {
		flex-direction: row-reverse !important;
		align-items: stretch !important;
	}

	.cradis-instapay-receipt-filename {
		width: 100% !important;
		border-radius: 6px 0 0 6px !important;
		border-right:none !important;
		border-bottom:  1px solid #e2e8f0 !important;
		text-align: center !important;
		justify-content: center !important;
		height: 38px !important;
		font-size: 13px !important;
	}

	.cradis-instapay-receipt-button {
		width: 30% !important;
		border-radius: 0 6px 6px 0 !important;
		text-align: center !important;
		justify-content: center !important;
		height: 38px !important;
		font-size: 13px !important;
	}

	.cradis-instapay-support-note {
		font-size: 13px !important;
		margin-top: 14px !important;
	}
}