/* DEJOIY payment moment: Razorpay pay page, its processing message, and WooCommerce's place-order overlay. */
:root { --djp-ink: #121212; --djp-lime: #D4FF3A; --djp-paper: #F3F2EE; --djp-line: #E2DFD8; --djp-muted: #5C5A55; }

/* Intro card on the pay page */
.djx-pay-intro { display: flex; gap: 16px; align-items: center; max-width: 560px; margin: 8px 0 20px; padding: 20px 22px; border-radius: 18px; background: var(--djp-ink); color: #fff; font-family: "DM Sans", system-ui, sans-serif; }
.djx-pay-mark { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: var(--djp-lime); color: var(--djp-ink); font: 800 21px/1 "Bricolage Grotesque", "DM Sans", sans-serif; letter-spacing: -.03em; }
.djx-pay-intro p { margin: 0; }
.djx-pay-kicker { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .62); }
.djx-pay-title { font: 800 22px/1.25 "Bricolage Grotesque", "DM Sans", sans-serif; }
.djx-pay-title .amount, .djx-pay-title bdi { color: var(--djp-lime); }
.djx-pay-sub { margin-top: 4px !important; font-size: 14px; color: rgba(255, 255, 255, .78); }

/* Razorpay's two buttons */
#btn-razorpay, #btn-razorpay-cancel { appearance: none; display: inline-flex; align-items: center; justify-content: center; min-height: 48px; margin: 0 10px 10px 0; padding: 0 26px; border-radius: 12px; font: 700 16px/1 "DM Sans", system-ui, sans-serif; letter-spacing: 0; text-transform: none; cursor: pointer; transition: transform .15s cubic-bezier(.16, 1, .3, 1), background .15s; }
#btn-razorpay { border: 0; background: var(--djp-ink); color: var(--djp-lime); }
#btn-razorpay:hover { background: #2A2A28; }
#btn-razorpay-cancel { border: 1px solid var(--djp-line); background: #fff; color: var(--djp-ink); }
#btn-razorpay:active, #btn-razorpay-cancel:active { transform: translateY(1px); }
#btn-razorpay:focus-visible, #btn-razorpay-cancel:focus-visible { outline: 2px solid var(--djp-ink); outline-offset: 2px; }

/* "Please wait while we are processing your payment": shown by Razorpay's script with display:block, so the
   attribute selector turns it into a calm full-screen confirmation instead of a grey strip. */
#msg-razorpay-success[style*="block"] { position: fixed; inset: 0; z-index: 999999; display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 0; margin: 0 !important; padding: 24px !important; border: 0 !important; background: var(--djp-ink) !important; color: transparent !important; font-size: 0 !important; text-align: center; }
#msg-razorpay-success[style*="block"]::before { content: ":D"; position: static; display: grid; place-items: center; width: 88px; height: 88px; margin: 0 0 26px; border-radius: 26px; background: var(--djp-lime); color: var(--djp-ink); font: 800 34px/1 "Bricolage Grotesque", "DM Sans", sans-serif; letter-spacing: -.03em; box-shadow: 0 0 0 0 rgba(212, 255, 58, .55); animation: djxpay-pulse 1.6s cubic-bezier(.16, 1, .3, 1) infinite; transform: none; }
#msg-razorpay-success[style*="block"]::after { content: "Confirming your payment\A Stay on this page. It takes a few seconds."; white-space: pre-line; color: #fff; font: 700 20px/1.6 "DM Sans", system-ui, sans-serif; }
@keyframes djxpay-pulse {
	0% { box-shadow: 0 0 0 0 rgba(212, 255, 58, .55); transform: scale(1); }
	50% { transform: scale(1.06); }
	100% { box-shadow: 0 0 0 26px rgba(212, 255, 58, 0); transform: scale(1); }
}

/* WooCommerce's overlay while the order is placed and while totals refresh */
.woocommerce .blockUI.blockOverlay, .blockUI.blockOverlay { background: rgba(243, 242, 238, .72) !important; opacity: 1 !important; }
.woocommerce .blockUI.blockOverlay::before, .woocommerce .loader::before, .blockUI.blockOverlay::before { content: "" !important; position: absolute; top: 50%; left: 50%; width: 34px !important; height: 34px !important; margin: -17px 0 0 -17px !important; border: 3px solid var(--djp-line); border-top-color: var(--djp-ink); border-radius: 50%; background: none !important; animation: djxpay-spin .8s linear infinite !important; }
@keyframes djxpay-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
	#msg-razorpay-success[style*="block"]::before, .blockUI.blockOverlay::before { animation-duration: 3s !important; }
}
@media (max-width: 520px) {
	.djx-pay-intro { padding: 16px; gap: 12px; }
	.djx-pay-title { font-size: 19px; }
	#btn-razorpay, #btn-razorpay-cancel { width: 100%; margin-right: 0; }
}