/**
 * K-Pay Developer Portal - Brand Styles
 * Colors based on K-Pay/Esicia branding
 * Esicia Blue: #0e5c91
 * Esicia Gold: #d8b93e
 */

@import url('https://fonts.googleapis.com/css2?family=Exo:wght@300;400;500;600;700&display=swap');

:root {
    /* K-Pay/Esicia Brand Colors */
    --kpay-primary: #d8b93e;          /* Esicia Gold */
    --kpay-primary-dark: #c4a635;
    --kpay-primary-light: #e5cb5e;
    --kpay-secondary: #0e5c91;         /* Esicia Blue */
    --kpay-secondary-dark: #0a4a75;
    --kpay-secondary-light: #1a7ab8;
    --kpay-dark: #0a3d5c;
    --kpay-darker: #062a40;
    --kpay-accent: #d8b93e;
    --kpay-light: #f8f9fa;
    --kpay-success: #198754;
    --kpay-warning: #ffc107;
    --kpay-danger: #dc3545;
    --kpay-info: #0dcaf0;
    
    /* Gradients */
    --kpay-gradient: linear-gradient(135deg, #d8b93e 0%, #c4a635 50%, #a08520 100%);
    --kpay-gradient-blue: linear-gradient(135deg, #0e5c91 0%, #0a4a75 50%, #083a5c 100%);
    --kpay-gradient-dark: linear-gradient(135deg, #0e5c91 0%, #0a3d5c 100%);
    
    /* Fonts */
    --font-heading: 'Exo', sans-serif;
    --font-body: 'Exo', sans-serif;
}

/* Base Typography */
body {
    font-family: var(--font-body);
}

h1, h2, h3, h4, h5, h6,
.navbar-brand,
.card-header,
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
    font-family: var(--font-heading);
}

/* Button Styles */
.btn-kpay {
    background: var(--kpay-primary);
    border-color: var(--kpay-primary);
    color: #000;
    font-family: var(--font-heading);
    font-weight: 500;
}

.btn-kpay:hover, .btn-kpay:focus {
    background: var(--kpay-primary-dark);
    border-color: var(--kpay-primary-dark);
    color: #000;
}

.btn-kpay:active {
    background: #a08520 !important;
    border-color: #a08520 !important;
}

.btn-outline-kpay {
    border-color: var(--kpay-primary);
    color: var(--kpay-primary);
    font-family: var(--font-heading);
    font-weight: 500;
}

.btn-outline-kpay:hover {
    background: var(--kpay-primary);
    border-color: var(--kpay-primary);
    color: #000;
}

.btn-kpay-blue {
    background: var(--kpay-secondary);
    border-color: var(--kpay-secondary);
    color: white;
    font-family: var(--font-heading);
    font-weight: 500;
}

.btn-kpay-blue:hover, .btn-kpay-blue:focus {
    background: var(--kpay-secondary-dark);
    border-color: var(--kpay-secondary-dark);
    color: white;
}

/* Background Colors */
.bg-kpay {
    background-color: var(--kpay-primary) !important;
}

.bg-kpay-blue {
    background-color: var(--kpay-secondary) !important;
}

.bg-kpay-dark {
    background-color: var(--kpay-dark) !important;
}

.bg-kpay-secondary {
    background-color: var(--kpay-secondary) !important;
}

.bg-kpay-gradient {
    background: var(--kpay-gradient-blue) !important;
}

/* Text Colors */
.text-kpay {
    color: var(--kpay-primary) !important;
}

.text-kpay-blue {
    color: var(--kpay-secondary) !important;
}

.text-kpay-dark {
    color: var(--kpay-dark) !important;
}

/* Border Colors */
.border-kpay {
    border-color: var(--kpay-primary) !important;
}

.border-kpay-blue {
    border-color: var(--kpay-secondary) !important;
}

/* Navbar Branding */
.navbar-kpay {
    background: var(--kpay-secondary) !important;
}

.navbar-kpay .navbar-brand {
    color: white;
    font-weight: 700;
    font-family: var(--font-heading);
}

.navbar-kpay .navbar-brand img {
    height: 40px;
}

.navbar-kpay .nav-link {
    color: rgba(255,255,255,0.85);
    font-family: var(--font-body);
}

.navbar-kpay .nav-link:hover,
.navbar-kpay .nav-link.active {
    color: var(--kpay-primary);
}

/* Card Styles */
.card-kpay {
    border: none;
    border-top: 4px solid var(--kpay-primary);
    border-radius: 12px;
    box-shadow: 0 2px 15px rgba(0,0,0,0.08);
}

.card-kpay:hover {
    box-shadow: 0 5px 25px rgba(0,0,0,0.12);
}

/* Badge Styles */
.badge-kpay {
    background: var(--kpay-primary);
    color: #000;
}

.badge-kpay-blue {
    background: var(--kpay-secondary);
    color: white;
}

/* Progress Bar */
.progress-kpay .progress-bar {
    background: var(--kpay-gradient);
}

/* Links */
a.link-kpay {
    color: var(--kpay-secondary);
    text-decoration: none;
}

a.link-kpay:hover {
    color: var(--kpay-secondary-dark);
    text-decoration: underline;
}

/* Form Controls Focus */
.form-control:focus,
.form-select:focus {
    border-color: var(--kpay-secondary);
    box-shadow: 0 0 0 0.25rem rgba(14, 92, 145, 0.25);
}

/* Test Status Badges */
.test-passed {
    background: var(--kpay-success);
    color: white;
}

.test-failed {
    background: var(--kpay-danger);
    color: white;
}

.test-pending {
    background: var(--kpay-warning);
    color: #000;
}

/* Sidebar Active */
.list-group-item.active {
    background: var(--kpay-secondary);
    border-color: var(--kpay-secondary);
}

/* Footer */
.footer-kpay {
    background: var(--kpay-darker);
    color: rgba(255,255,255,0.7);
}

.footer-kpay a {
    color: rgba(255,255,255,0.7);
}

.footer-kpay a:hover {
    color: var(--kpay-primary);
}

/* Logo Fallback Text */
.kpay-logo-text {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 1.5rem;
    color: white;
}

.kpay-logo-text span {
    color: var(--kpay-primary);
}

/* Credential Boxes */
.credential-box {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-left: 4px solid var(--kpay-primary);
    border-radius: 8px;
    padding: 15px;
    font-family: 'Courier New', monospace;
    position: relative;
}

/* Code Blocks */
pre.code-kpay {
    background: #1e1e1e;
    color: #d4d4d4;
    border-radius: 8px;
    padding: 20px;
    border-left: 4px solid var(--kpay-primary);
}

/* Status Indicators */
.status-live {
    color: var(--kpay-success);
}

.status-testing {
    color: var(--kpay-primary);
}

.status-pending {
    color: var(--kpay-secondary);
}

/* Hero Section Override */
.hero-gradient {
    background: var(--kpay-gradient-dark);
}

/* Step Numbers */
.step-number {
    background: var(--kpay-gradient) !important;
    color: #000 !important;
}

/* Progress Circle */
.progress-circle {
    background: conic-gradient(var(--kpay-primary) var(--progress, 0deg), #e9ecef 0deg);
}

/* Responsive Logo */
@media (max-width: 768px) {
    .navbar-kpay .navbar-brand img {
        height: 35px;
    }
}