@theme {
  --color-primary: #0052FF;
  --color-success: #22c55e;
  --shadow-payment: 0 4px 15px rgba(0, 82, 255, 0.3);
}

.enhanced-payment-container {
  @apply my-6 font-sans;
}

.payment-signin-section {
  @apply mb-6;
}

.signin-prompt {
  @apply bg-gradient-to-br from-blue-50 to-indigo-50 border-2 border-blue-500 rounded-2xl p-6 text-center;
}

.signin-content h3 {
  @apply text-gray-800 mb-3 text-lg font-semibold;
}

.signin-content p {
  @apply text-gray-600 mb-5 leading-relaxed;
}

.signin-icon {
  @apply text-4xl mb-4;
}

.signin-btn {
  @apply bg-gradient-to-r from-blue-600 to-blue-500 text-white border-none px-7 py-3.5 rounded-xl text-base font-semibold flex items-center gap-2 mx-auto transition-all shadow-payment hover:-translate-y-0.5 hover:shadow-2xl hover:from-blue-700 hover:to-blue-600;
}

.user-info {
  @apply flex items-center bg-gradient-to-r from-blue-50 to-cyan-50 border-2 border-green-500 rounded-xl p-4 gap-3;
}

.user-avatar {
  @apply w-10 h-10 rounded-full bg-gradient-to-r from-blue-600 to-blue-500 text-white flex items-center justify-center text-lg;
}

.user-details {
  @apply flex-1;
}

.user-address {
  @apply font-semibold text-gray-800 text-base;
}

.user-status {
  @apply text-green-500 text-sm font-medium;
}

.disconnect-btn {
  @apply bg-red-500 text-white border-none px-4 py-2 rounded-lg text-sm cursor-pointer transition-all hover:bg-red-600 hover:-translate-y-0.5;
}

.payment-methods-grid {
  @apply grid grid-cols-1 md:grid-cols-3 gap-4 mb-6;
}

.payment-btn {
  @apply relative bg-white border-2 border-gray-200 rounded-2xl p-5 cursor-pointer transition-all text-left flex flex-col gap-3 min-h-[140px];
}

.payment-btn:hover:not(:disabled) {
  @apply border-indigo-500 -translate-y-0.5 shadow-2xl;
}

.payment-btn:disabled {
  @apply opacity-60 cursor-not-allowed !translate-y-0 !shadow-none;
}

.featured-btn {
  @apply border-blue-500 bg-gradient-to-br from-white to-blue-50 scale-[1.02] shadow-xl;
}

.featured-btn:not(:disabled) {
  @apply shadow-2xl;
}

.featured-btn:hover:not(:disabled) {
  @apply border-blue-500 shadow-2xl;
}

.btn-ribbon {
  @apply absolute -top-2 right-4 bg-gradient-to-r from-yellow-400 to-orange-500 text-black px-3 py-1 rounded-full text-xs font-bold;
}

.btn-pricing {
  @apply flex items-center gap-2 my-2;
}

.btn-price {
  @apply text-2xl font-extrabold text-gray-800 flex items-center gap-2;
}

.discount-badge {
  @apply bg-gradient-to-r from-green-500 to-green-600 text-white px-2 py-1 rounded-full text-xs font-semibold;
}

.btn-features {
  @apply flex flex-wrap gap-2 mt-2;
}

.feature {
  @apply text-xs text-green-600 bg-green-100 px-2 py-1 rounded-lg border border-green-200;
}

/* Specific button variants */
.card-btn {
  @apply border-indigo-500;
}

.card-btn .btn-icon {
  @apply text-indigo-500;
}

.crypto-btn {
  @apply border-amber-500;
}

.crypto-btn .btn-icon {
  @apply text-amber-500;
}

.cashapp-btn {
  @apply border-green-500;
}

.cashapp-btn .btn-icon {
  @apply text-green-500;
}

/* Status and modal styles (abridged for brevity—add full if needed) */
.status-message {
  @apply p-4 rounded-xl flex items-center gap-3 font-medium;
}

.status-loading { @apply bg-gray-100 text-gray-700 border border-gray-300; }
.status-success { @apply bg-green-50 text-green-800 border border-green-200; }
.status-error { @apply bg-red-50 text-red-800 border border-red-200; }
.status-info { @apply bg-blue-50 text-blue-800 border border-blue-200; }

.payment-success {
  @apply text-center p-8 bg-gradient-to-br from-green-50 to-emerald-50 border-2 border-green-500 rounded-2xl;
}

.success-icon {
  @apply text-5xl mb-4;
}

.payment-success h3 {
  @apply text-green-800 mb-4 text-2xl;
}

.download-btn {
  @apply bg-gradient-to-r from-green-500 to-green-600 text-white px-6 py-3 rounded-xl text-base font-semibold cursor-pointer transition-all hover:-translate-y-0.5 hover:shadow-lg mt-4;
}

/* Responsive & Dark Mode */
@media (max-width: 768px) {
  .payment-methods-grid { @apply grid-cols-1 gap-3; }
  .featured-btn { @apply scale-100; }
  .btn-features { @apply flex-col gap-1; }
  .signin-prompt { @apply p-4; }
  .signin-content h3 { @apply text-base; }
  .signin-btn { @apply px-5 py-3 text-sm; }
}

@media (prefers-color-scheme: dark) {
  .payment-btn { @apply bg-gray-800 border-gray-600 text-white; }
  .btn-title { @apply text-white; }
  .btn-subtitle { @apply text-gray-400; }
  .featured-btn { @apply bg-gradient-to-br from-gray-800 to-gray-700; }
  .signin-prompt { @apply bg-gradient-to-br from-gray-800 to-gray-700 border-blue-500; }
  .signin-content h3 { @apply text-white; }
  .signin-content p { @apply text-gray-400; }
}