/* 999PAY Platform-Specific Theme - Green Trust */

:root {
    /* Override primary color for PAY */
    --platform-primary: #10b981;
    --platform-primary-light: #34d399;
    --platform-primary-dark: #059669;

    /* Platform-specific gradients */
    --platform-gradient: linear-gradient(135deg, #10b981 0%, #06b6d4 100%);
    --platform-glow: rgba(16, 185, 129, 0.3);
}

/* Hero section with platform color */
.hero-section,
.main-hero {
    background: linear-gradient(135deg,
        rgba(16, 185, 129, 0.1) 0%,
        rgba(6, 182, 212, 0.05) 100%
    );
}

/* Navigation active states */
nav a.active,
.nav-link.active {
    color: var(--platform-primary) !important;
    border-bottom: 2px solid var(--platform-primary);
}

/* Primary buttons */
.btn-primary,
button.primary,
.create-invoice-btn,
.send-payment-btn {
    background: var(--platform-gradient);
    box-shadow: 0 4px 20px var(--platform-glow);
}

.btn-primary:hover,
button.primary:hover {
    box-shadow: 0 6px 30px var(--platform-glow);
    transform: translateY(-2px);
}

/* Card accents */
.payment-card:hover,
.invoice-card:hover,
.card:hover {
    border-color: var(--platform-primary);
    box-shadow: 0 8px 30px var(--platform-glow);
}

/* Stats and highlights */
.stat-value,
.highlight,
.amount {
    color: var(--platform-primary-light);
}

/* Platform badge */
.platform-badge {
    position: fixed;
    top: 80px;
    right: 20px;
    background: var(--platform-gradient);
    color: white;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    z-index: 100;
    box-shadow: 0 4px 15px var(--platform-glow);
}

.platform-badge::before {
    content: "💰 999PAY";
}

/* Loading states */
.skeleton,
.loading {
    background: linear-gradient(
        90deg,
        rgba(16, 185, 129, 0.1) 25%,
        rgba(16, 185, 129, 0.2) 50%,
        rgba(16, 185, 129, 0.1) 75%
    );
}

/* Focus states */
input:focus,
textarea:focus,
select:focus {
    border-color: var(--platform-primary);
    box-shadow: 0 0 0 3px var(--platform-glow);
}

/* Success states */
.success,
.notification.success,
.payment-success {
    background: linear-gradient(135deg,
        rgba(16, 185, 129, 0.2) 0%,
        rgba(6, 182, 212, 0.2) 100%
    );
    border-left: 4px solid var(--platform-primary);
}

/* Payment status indicators */
.status-paid,
.status-completed {
    background: var(--platform-primary);
    color: white;
}

.status-pending {
    background: rgba(16, 185, 129, 0.2);
    color: var(--platform-primary);
}