/* ============================================= */
/* --- 1. Global Setup & CSS Variables --- */
/* ============================================= */
html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--color-bg);
    color: var(--color-text);
    font-family: 'Manrope', sans-serif;
    transition: background-color 0.3s, color 0.3s;
}

/* ============================================= */
/* --- 2. Homepage Premium Styles --- */
/* ============================================= */

/* --- Hero Section Gradient --- */
.hero-bg-gradient {
    background-image: radial-gradient(at 27% 37%, hsla(215, 98%, 61%, 0.1) 0px, transparent 50%),
                      radial-gradient(at 97% 21%, hsla(125, 98%, 72%, 0.1) 0px, transparent 50%),
                      radial-gradient(at 52% 99%, hsla(355, 98%, 61%, 0.1) 0px, transparent 50%);
}

html.dark .hero-bg-gradient-dark {
    background-image: radial-gradient(at 27% 37%, hsla(215, 98%, 61%, 0.2) 0px, transparent 50%),
                      radial-gradient(at 97% 21%, hsla(125, 98%, 72%, 0.2) 0px, transparent 50%),
                      radial-gradient(at 52% 99%, hsla(355, 98%, 61%, 0.2) 0px, transparent 50%);
}

/* --- Feature Icon Style --- */
.feature-icon {
    @apply w-16 h-16 rounded-full flex items-center justify-center mx-auto;
    @apply ring-8 ring-white dark:ring-gray-800;
}

/* --- "How it Works" Step Number --- */
.how-it-works-step {
    @apply w-12 h-12 flex items-center justify-center;
    @apply text-xl font-bold text-blue-600 bg-white dark:text-blue-300 dark:bg-gray-700;
    @apply rounded-full shadow-lg border border-gray-200 dark:border-gray-600;
}

/* --- Use Case Card --- */
.use-case-card {
    @apply p-6 rounded-xl shadow-lg bg-white/30 dark:bg-gray-700/30 backdrop-blur-md border border-white/20 dark:border-gray-600/30;
    @apply text-left;
}
.use-case-icon {
    @apply w-14 h-14 rounded-lg flex items-center justify-center;
}

/* --- FAQ Item --- */
.faq-item {
    @apply p-6 rounded-xl bg-white dark:bg-gray-700/50 border border-[var(--color-border)];
}

/* --- Homepage Scroll Animations --- */
[data-scroll-animate] {
    opacity: 0;
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
[data-scroll-animate="fade-in"] { transform: translateY(20px); }
[data-scroll-animate="fade-in-up"] { transform: translateY(30px); }
[data-scroll-animate="fade-in-right"] { transform: translateX(-30px); }
[data-scroll-animate="fade-in-left"] { transform: translateX(30px); }
[data-scroll-animate="zoom-in"] { transform: scale(0.95); }

[data-scroll-animate].is-visible {
    opacity: 1;
    transform: none;
}


/* ============================================= */
/* --- 3. Dashboard Premium Form Styles --- */
/* ============================================= */

/* --- Premium Form Inputs (for wallet, account, etc.) --- */
.form-input-premium, .form-select-premium {
    @apply w-full p-3 border rounded-lg bg-gray-50 dark:bg-gray-700 border-gray-300 dark:border-gray-600 text-gray-900 dark:text-white focus:ring-blue-500 focus:border-blue-500 transition-colors;
}
.form-input-premium[readonly] {
    @apply bg-gray-100 dark:bg-gray-600 opacity-70 cursor-not-allowed;
}
.form-select-premium {
    @apply appearance-none;
}

/* --- Premium Buttons (for wallet, account, etc.) --- */
.btn-premium {
    @apply w-full md:w-auto inline-flex justify-center rounded-lg border border-transparent shadow-sm px-5 py-3 bg-blue-500 text-base font-bold text-white hover:bg-blue-600 transition-colors;
    @apply focus:outline-none focus:ring-2 focus:ring-offset-2 dark:focus:ring-offset-gray-800;
}
.btn-premium.focus\:ring-blue-500 { @apply focus:ring-blue-500; }
.btn-premium.bg-green-500 { @apply bg-green-500 hover:bg-green-600; }
.btn-premium.focus\:ring-green-500 { @apply focus:ring-green-500; }

/* --- Premium Tab Buttons (for wallet, account) --- */
.tab-btn-premium {
    @apply flex-1 flex justify-center items-center py-3 px-4 text-center font-medium rounded-md cursor-pointer transition-all;
    @apply text-gray-600 dark:text-gray-300;
}
.tab-btn-premium:hover {
    @apply bg-gray-300/50 dark:bg-gray-700/50;
}
.tab-btn-premium.tab-active-premium {
    @apply bg-white dark:bg-gray-900 text-blue-600 dark:text-blue-400 shadow;
}

/* ============================================= */
/* --- 4. My Proxies Page Styles (Modals, etc.) --- */
/* ============================================= */

/* --- Badge Colors --- */
.badge-active { @apply bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300; }
.badge-expires-soon { @apply bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-300; }
.badge-expired { @apply bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-300; }
.badge-gray { @apply bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300; }
.badge-blue { @apply bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300; }
.badge-purple { @apply bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-300; }

/* --- ISP Logo --- */
.isp-logo {
    min-width: 20px; /* Prevents squishing */
    background: #f3f4f6; /* A light fallback bg */
}

/* --- View Toggle --- */
.view-toggle-btn {
    @apply text-gray-500 dark:text-gray-400;
}
.view-toggle-btn.active {
    @apply bg-white dark:bg-gray-900 text-blue-600 dark:text-blue-400 shadow;
}

/* --- Radio Buttons (for Refund modal) --- */
.radio-option-premium {
    @apply flex items-center p-4 bg-gray-100 dark:bg-gray-700 rounded-lg cursor-pointer transition-all duration-200 ease-in-out border-2 border-transparent hover:border-blue-400 dark:hover:border-blue-500;
}
.radio-option-premium input[type="radio"] {
    @apply hidden; /* Hide default radio */
}
.radio-custom {
    @apply w-5 h-5 border-2 rounded-full flex-shrink-0 flex items-center justify-center transition-all duration-200 ease-in-out;
    border-color: var(--color-border);
}
.radio-custom::after {
    content: '';
    @apply w-3 h-3 rounded-full bg-blue-600 dark:bg-blue-400 opacity-0 transition-opacity duration-200 ease-in-out;
}
.radio-option-premium input[type="radio"]:checked + .radio-custom {
    border-color: #2563eb; /* blue-600 */
}
.radio-option-premium input[type="radio"]:checked + .radio-custom::after {
    @apply opacity-100;
}
.radio-label-premium {
    @apply ml-3 text-lg font-medium text-gray-900 dark:text-white;
}


/* ============================================= */
/* --- 5. UNIQUE Proxy Page Modal Styles (THE FIX) --- */
/* ============================================= */

.action-modal-container {
    @apply fixed inset-0 z-50 overflow-y-auto;
}

.action-modal-overlay {
    @apply fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity dark:bg-gray-900 dark:bg-opacity-75;
}

.action-modal-content {
    @apply relative mx-auto my-8 max-w-lg w-full bg-white dark:bg-gray-800 rounded-xl shadow-xl border border-gray-200 dark:border-gray-700;
}

.action-modal-header {
    @apply flex items-center justify-between p-5 border-b border-gray-200 dark:border-gray-700;
}

.action-modal-title {
    @apply text-xl font-semibold text-gray-900 dark:text-white;
}

.action-modal-close-btn {
    @apply text-gray-400 hover:text-gray-600 dark:hover:text-gray-200;
}

.action-modal-body {
    @apply p-6 space-y-4;
}

.action-modal-footer {
    @apply flex justify-end items-center space-x-3 px-6 py-4 bg-gray-50 dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 rounded-b-xl;
}

/* Base button styles */
.action-modal-btn {
    @apply inline-flex justify-center rounded-lg border border-transparent shadow-sm px-5 py-2.5 text-base font-medium text-white transition-colors sm:w-auto sm:text-sm;
    @apply focus:outline-none focus:ring-2 focus:ring-offset-2 dark:focus:ring-offset-gray-800;
}

/* --- Colored Buttons (from your screenshots) --- */
.action-modal-btn.btn-blue {
    @apply bg-blue-600 hover:bg-blue-700 focus:ring-blue-500;
}
.action-modal-btn.btn-orange {
    @apply bg-orange-500 hover:bg-orange-600 focus:ring-orange-500;
}
.action-modal-btn.btn-red {
    @apply bg-red-600 hover:bg-red-700 focus:ring-red-500;
}

.action-modal-cancel-btn {
    @apply inline-flex justify-center rounded-lg border border-gray-300 dark:border-gray-600 shadow-sm px-5 py-2.5 bg-white dark:bg-gray-800 text-base font-medium text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors sm:w-auto sm:text-sm;
}

/* Input style for modals */
.action-modal-input {
    @apply w-full p-3 border rounded-lg bg-gray-50 dark:bg-gray-700 border-gray-300 dark:border-gray-600 text-gray-900 dark:text-white focus:ring-blue-500 focus:border-blue-500 transition-colors;
}
.action-modal-input[readonly] {
    @apply bg-gray-100 dark:bg-gray-600 opacity-70 cursor-not-allowed;
}

/* Select style for modals */
.action-modal-select {
    @apply w-full p-3 border rounded-lg bg-gray-50 dark:bg-gray-700 border-gray-300 dark:border-gray-600 text-gray-900 dark:text-white focus:ring-blue-500 focus:border-blue-500 transition-colors;
    @apply appearance-none;
}
/* ============================================= */
/* --- 6. UNIQUE Wallet Page Styles (THE FIX) --- */
/* ============================================= */

.wallet-card {
    @apply p-6 rounded-xl shadow-lg bg-white/30 dark:bg-gray-700/30 backdrop-blur-md border border-white/20 dark:border-gray-600/30;
}

.wallet-tab-btn {
    @apply py-4 px-6 text-center text-sm font-medium border-b-2 flex items-center;
}
.wallet-tab-btn.active {
    @apply border-blue-500 text-blue-600 dark:border-blue-400 dark:text-blue-300;
}
.wallet-tab-btn.inactive {
    @apply border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 dark:text-gray-400 dark:hover:text-gray-300 dark:hover:border-gray-600;
}

.wallet-input {
    @apply w-full p-3 border rounded-lg bg-gray-50 dark:bg-gray-700 border-gray-300 dark:border-gray-600 text-gray-900 dark:text-white focus:ring-blue-500 focus:border-blue-500 transition-colors;
}

.wallet-button {
    @apply w-full inline-flex justify-center rounded-lg border border-transparent shadow-sm px-5 py-3 text-base font-bold text-white transition-colors;
    @apply focus:outline-none focus:ring-2 focus:ring-offset-2 dark:focus:ring-offset-gray-800;
}
.wallet-button.btn-blue {
    @apply bg-blue-600 hover:bg-blue-700 focus:ring-blue-500;
}
.wallet-button.btn-green {
    @apply bg-green-600 hover:bg-green-700 focus:ring-green-500;
}
.wallet-button.btn-purple {
    @apply bg-purple-600 hover:bg-purple-700 focus:ring-purple-500;
}
.wallet-button:disabled {
    @apply bg-gray-400 dark:bg-gray-600 cursor-not-allowed;
}

.preset-amount-btn {
     @apply w-full p-4 border rounded-lg text-lg font-bold text-center text-[var(--color-text)] border-[var(--color-border)] hover:border-blue-500 hover:bg-blue-50 dark:hover:bg-gray-700;
}
.preset-amount-btn.active {
    @apply bg-blue-100 dark:bg-blue-900 border-blue-500;
}