/* BOOTSTRAP CUSTOM STYLES - SHOPIFY SPY */
/* Mantengo el tema oscuro y colores de marca sobre Bootstrap */

:root {
    --graphite-bg: #18191A;
    --graphite-bg-light: #242526;
    --mint-accent: #589516;
    --text-primary: #E4E6EB;
    --text-secondary: #B0B3B8;
    --border-color: #3A3B3C;
    --font-sans: 'Poppins', sans-serif;
}

/* Override Bootstrap body styles */
body {
    background-color: var(--graphite-bg) !important;
    color: var(--text-primary) !important;
    font-family: var(--font-sans) !important;
    line-height: 1.6 !important;
}

/* Bootstrap Dark Theme Overrides */
.bg-dark {
    background-color: var(--graphite-bg) !important;
}

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

.text-light {
    color: var(--text-primary) !important;
}

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

/* Bootstrap Navbar Dark Override */
.navbar-dark {
    background-color: rgba(24, 25, 26, 0.95) !important;
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border-color);
}

.navbar-dark .navbar-brand,
.navbar-dark .navbar-nav .nav-link {
    color: var(--text-primary) !important;
}

.navbar-dark .navbar-nav .nav-link:hover {
    color: var(--mint-accent) !important;
}

/* Bootstrap Card Dark Theme */
.card {
    background-color: var(--graphite-bg-light) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
}

.card-header {
    background-color: var(--graphite-bg) !important;
    border-bottom: 1px solid var(--border-color) !important;
}

/* Bootstrap Button Customizations */
.btn-primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    border: none !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3) !important;
}

.btn-primary:hover {
    background: linear-gradient(135deg, #764ba2 0%, #667eea 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4) !important;
}

.btn-success {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%) !important;
    border: none !important;
    color: #fff !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 2px 8px rgba(56, 239, 125, 0.3) !important;
}

.btn-success:hover {
    background: linear-gradient(135deg, #38ef7d 0%, #11998e 100%) !important;
    border: none !important;
    color: #fff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(56, 239, 125, 0.4) !important;
}

/* Nuevos estilos para botones outline mejorados */
.btn-outline-light {
    border: 2px solid rgba(255, 255, 255, 0.6) !important;
    color: rgba(255, 255, 255, 0.9) !important;
    background: transparent !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
}

.btn-outline-light:hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.2) 100%) !important;
    border-color: rgba(255, 255, 255, 0.8) !important;
    color: #fff !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.2) !important;
    backdrop-filter: blur(10px) !important;
}

.btn-outline-success {
    border: 2px solid #38ef7d !important;
    color: #38ef7d !important;
    background: transparent !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
}

.btn-outline-success:hover {
    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%) !important;
    border-color: #38ef7d !important;
    color: #fff !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(56, 239, 125, 0.3) !important;
}

.btn-outline-danger {
    border: 2px solid #ff6b6b !important;
    color: #ff6b6b !important;
    background: transparent !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
}

.btn-outline-danger:hover {
    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%) !important;
    border-color: #ff6b6b !important;
    color: #fff !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(255, 107, 107, 0.3) !important;
}

/* Bootstrap Form Controls Dark */
.form-control {
    background-color: var(--graphite-bg-light) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
}

.form-control:focus {
    background-color: var(--graphite-bg-light) !important;
    border-color: var(--mint-accent) !important;
    box-shadow: 0 0 0 0.2rem rgba(88, 149, 22, 0.25) !important;
    color: var(--text-primary) !important;
}

.form-select {
    background-color: var(--graphite-bg-light) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
}

/* Bootstrap Modal Dark */
.modal-content {
    background-color: var(--graphite-bg-light) !important;
    border: 1px solid var(--border-color) !important;
}

.modal-header {
    border-bottom: 1px solid var(--border-color) !important;
}

.modal-footer {
    border-top: 1px solid var(--border-color) !important;
}

/* Custom Spacing and Utilities */
.gradient-bg {
    background: radial-gradient(circle at top, rgba(0, 245, 160, 0.1), transparent 40%), var(--graphite-bg);
}

.glass-effect {
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.accent-color {
    color: var(--mint-accent) !important;
}

.brand-gradient {
    background: linear-gradient(90deg, #3a7bd5, #00d2ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Preserve existing animations and effects */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.fade-in {
    animation: fadeIn 0.6s ease-out;
}

/* Override Bootstrap container for full-width sections */
.hero-container {
    max-width: 100% !important;
    padding: 0 !important;
}

/* Responsive text utilities */
@media (max-width: 768px) {
    .display-1, .display-2, .display-3 {
        font-size: calc(1.5rem + 1.5vw) !important;
    }
}

/* =================== TEXT CONTRAST FIXES =================== */

/* Bootstrap text utility classes - mejor contraste en fondos oscuros */
.text-success {
    color: #a3e9c0 !important;
}

.text-danger {
    color: #ffb3b3 !important;
}

.text-warning {
    color: #ffd43b !important;
}

.text-info {
    color: #9eeaf9 !important;
}

/* Text utilities específicamente en cards y modales */
.card .text-success, .modal .text-success {
    color: #b8f5d0 !important;
}

.card .text-danger, .modal .text-danger {
    color: #ffcccc !important;
}

.card .text-warning, .modal .text-warning {
    color: #ffe066 !important;
}

.card .text-muted {
    color: #b0b3b8 !important;
}

/* Alert fixes globales */
.alert-success {
    background-color: rgba(25, 135, 84, 0.2) !important;
    border-color: rgba(25, 135, 84, 0.4) !important;
    color: #a3e9c0 !important;
    font-weight: 500 !important;
}

.alert-danger {
    background-color: rgba(220, 53, 69, 0.2) !important;
    border-color: rgba(220, 53, 69, 0.4) !important;
    color: #f5a6a6 !important;
    font-weight: 500 !important;
}

.alert-warning {
    background-color: rgba(255, 193, 7, 0.2) !important;
    border-color: rgba(255, 193, 7, 0.4) !important;
    color: #ffe066 !important;
    font-weight: 500 !important;
}

.alert-info {
    background-color: rgba(13, 202, 240, 0.2) !important;
    border-color: rgba(13, 202, 240, 0.3) !important;
    color: #9eeaf9 !important;
    font-weight: 500 !important;
}