/**
 * Whop Payment Gateway - Frontend Styles
 *
 * @package Whop_Payment_Gateway
 */

/* Whop Status Badges */
.whop-status-badge {
	display: inline-block;
	padding: 4px 10px;
	border-radius: 3px;
	font-size: 12px;
	font-weight: 500;
	text-transform: capitalize;
}

.whop-status-badge.whop-status-success {
	background: #d7f7e0;
	color: #006908;
}

.whop-status-badge.whop-status-error {
	background: #fcf0f1;
	color: #8a1e23;
}

.whop-status-badge.whop-status-warning {
	background: #fcf9e8;
	color: #8a6c07;
}

.whop-status-badge.whop-status-info {
	background: #e7f5fe;
	color: #0a4b78;
}

.whop-status-badge.whop-status-default {
	background: #f0f0f1;
	color: #50575e;
}

/* Thank You Page */
.whop-thankyou-info {
	background: #f8f8f8;
	border: 1px solid #e0e0e0;
	border-radius: 4px;
	padding: 20px;
	margin: 20px 0;
}

.whop-thankyou-info h2 {
	margin-top: 0;
	margin-bottom: 15px;
	font-size: 1.2em;
}

.whop-thankyou-info p {
	margin-bottom: 10px;
}

.whop-thankyou-info code {
	background: #fff;
	padding: 2px 6px;
	border: 1px solid #ddd;
	border-radius: 3px;
	font-size: 13px;
}

.whop-thankyou-info .button {
	margin-top: 10px;
}

/* Order Details */
.whop-details {
	margin-top: 20px;
}

.whop-details th {
	text-align: left;
	padding-right: 20px;
	font-weight: 600;
}

.whop-details code {
	background: #f5f5f5;
	padding: 2px 6px;
	border-radius: 3px;
	font-size: 12px;
}

/* My Account - Memberships */
.woocommerce-account .whop-discord-connected {
	display: inline-block;
	padding: 3px 8px;
	background: #5865F2;
	color: #fff;
	border-radius: 3px;
	font-size: 11px;
}

/* Checkout - Whop Payment */
.payment_method_whop {
	padding: 15px 0;
}

.payment_method_whop .payment_box {
	padding: 15px;
	background: #f8f9fa;
	border-radius: 4px;
}

.payment_method_whop .whop-saved-methods {
	margin-top: 10px;
	padding: 10px;
	background: #e8f4fd;
	border-radius: 4px;
	font-size: 13px;
}

/* Whop Logo */
.payment_method_whop img {
	max-height: 24px;
	vertical-align: middle;
	margin-left: 5px;
}

/* Processing State */
.whop-processing {
	position: relative;
	opacity: 0.7;
	pointer-events: none;
}

.whop-processing::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 24px;
	height: 24px;
	margin: -12px 0 0 -12px;
	border: 3px solid #f3f3f3;
	border-top: 3px solid #3498db;
	border-radius: 50%;
	animation: whop-spin 1s linear infinite;
}

@keyframes whop-spin {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

/* Responsive Adjustments */
@media screen and (max-width: 768px) {
	.whop-thankyou-info {
		padding: 15px;
	}

	.woocommerce-account .woocommerce-MyAccount-content .whop-details {
		display: block;
	}

	.woocommerce-account .woocommerce-MyAccount-content .whop-details tr {
		display: block;
		margin-bottom: 10px;
	}

	.woocommerce-account .woocommerce-MyAccount-content .whop-details th,
	.woocommerce-account .woocommerce-MyAccount-content .whop-details td {
		display: block;
		padding: 5px 0;
	}
}