/**
 * CryptoPay Payment Common Styles
 * Shared styles across all 4 phases
 *
 * @package CryptoPay
 * @subpackage Styles
 * @since 1.0.0
 */

/* ========================================
   RESET & BASE
   ======================================== */

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ========================================
   CONTAINER & BOX
   ======================================== */

.cryptopay-payment-wrapper {
	display: flex;
	justify-content: center;
	align-items: center;
	min-height: 100vh;
	background: #f3f4f6;
	padding: 1rem;
}

.cryptopay-payment-box {
	width: 100%;
	max-width: 28rem;
	background: white;
	border-radius: 0.5rem;
	box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
}

/* ========================================
   PHASE MANAGEMENT
   ======================================== */

/* Loading state - hide everything until JavaScript determines correct phase */
.cryptopay-loading .cryptopay-phase {
	display: none !important;
	opacity: 0;
}

.cryptopay-phase {
	display: none;
	position: relative;
	z-index: 1;
	opacity: 1;
	transition: opacity 0.15s ease-in;
}

.cryptopay-phase.active {
	display: block;
	z-index: 10;
}