/* ============================================
   RoboReklama Brand Colors System
   Based on Official Brand Guidelines
   ============================================ */

:root {
    /* Primary Brand Colors */
    --robo-blue: #2573D1;          /* Primary Blue from brandbook */
    --robo-purple: #915D73;        /* Muted Purple from brandbook */
    
    /* Secondary Colors */
    --dark-grey: #32210D;          /* Dark Grey for text */
    --light-grey: #F1F1F1;         /* Light Grey for backgrounds */
    --white: #FFFFFF;              /* Pure White */
    
    /* Gradients - More subtle and professional */
    --brand-gradient: linear-gradient(135deg, #2573D1 0%, #6B92D1 100%);
    --brand-gradient-hover: linear-gradient(135deg, #1E5BA8 0%, #5780C1 100%);
    --subtle-gradient: linear-gradient(135deg, rgba(37, 115, 209, 0.08) 0%, rgba(145, 93, 115, 0.05) 100%);
    
    /* Functional Colors */
    --success: #10B981;
    --warning: #F59E0B;
    --error: #EF4444;
    --info: #3B82F6;
    
    /* Text Colors */
    --text-primary: #32210D;       /* Dark Grey for main text */
    --text-secondary: #6B7280;     /* Medium Grey for secondary text */
    --text-light: #9CA3AF;         /* Light Grey for hints */
    --text-white: #FFFFFF;         /* White text on dark backgrounds */
    
    /* Background Colors */
    --bg-primary: #FFFFFF;
    --bg-secondary: #F9FAFB;
    --bg-tertiary: #F3F4F6;
    --bg-dark: #1F2937;
    
    /* Border Colors */
    --border-light: #E5E7EB;
    --border-medium: #D1D5DB;
    --border-dark: #9CA3AF;
    
    /* Shadow Colors */
    --shadow-sm: 0 1px 2px rgba(50, 33, 13, 0.05);
    --shadow-md: 0 4px 6px rgba(50, 33, 13, 0.07);
    --shadow-lg: 0 10px 15px rgba(50, 33, 13, 0.1);
    --shadow-xl: 0 20px 25px rgba(50, 33, 13, 0.1);
    
    /* Brand Specific Shadows */
    --shadow-blue: 0 4px 14px rgba(37, 115, 209, 0.15);
    --shadow-blue-hover: 0 8px 20px rgba(37, 115, 209, 0.25);
}

/* ============================================
   Override Previous Neon/Cyberpunk Styles
   ============================================ */

/* Navigation Bar */
.navbar {
    background: var(--white) !important;
    border-bottom: 1px solid var(--border-light);
    box-shadow: var(--shadow-sm);
}

.navbar .logo {
    color: var(--robo-blue) !important;
    font-weight: 700;
}

.navbar .logo:hover {
    color: var(--robo-purple) !important;
}

.nav-link {
    color: var(--text-primary) !important;
    font-weight: 500;
}

.nav-link:hover,
.nav-link.active {
    color: var(--robo-blue) !important;
}

/* Primary Buttons */
.btn-primary {
    background: var(--brand-gradient) !important;
    color: var(--white) !important;
    border: none !important;
    box-shadow: var(--shadow-md);
    font-weight: 600;
}

.btn-primary:hover {
    background: var(--brand-gradient-hover) !important;
    box-shadow: var(--shadow-blue-hover);
    transform: translateY(-1px);
}

/* Outline Buttons */
.btn-outline {
    background: transparent !important;
    color: var(--robo-blue) !important;
    border: 2px solid var(--robo-blue) !important;
}

.btn-outline:hover {
    background: var(--robo-blue) !important;
    color: var(--white) !important;
    box-shadow: var(--shadow-blue);
}

/* Hero Section */
.hero {
    background: var(--brand-gradient) !important;
}

.hero h1,
.hero p {
    color: var(--white) !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Feature Cards */
.feature-card {
    background: var(--white) !important;
    border: 1px solid var(--border-light) !important;
    box-shadow: var(--shadow-sm);
}

.feature-card:hover {
    border-color: var(--robo-blue) !important;
    box-shadow: var(--shadow-blue);
}

.feature-icon {
    background: var(--subtle-gradient) !important;
    color: var(--robo-blue) !important;
}

/* Robot Cards */
.robot-card {
    background: var(--white) !important;
    border: 1px solid var(--border-light) !important;
    box-shadow: var(--shadow-md);
}

.robot-card:hover {
    border-color: var(--robo-blue) !important;
    box-shadow: var(--shadow-blue-hover);
    transform: translateY(-2px);
}

.robot-card .badge {
    background: var(--robo-blue) !important;
    color: var(--white) !important;
}

.robot-card .badge.premium {
    background: var(--robo-purple) !important;
}

/* Pricing Cards */
.pricing-card {
    background: var(--white) !important;
    border: 1px solid var(--border-light) !important;
    box-shadow: var(--shadow-md);
}

.pricing-card.featured {
    border: 2px solid var(--robo-blue) !important;
    box-shadow: var(--shadow-blue);
}

.pricing-card .price {
    color: var(--robo-blue) !important;
    font-weight: 700;
}

/* Stats Section */
.stats-item .stats-number {
    background: var(--brand-gradient) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* Remove all neon glows and cyberpunk effects */
.neon-text,
.glitch-text,
.holographic,
.cyber-grid,
.neon-glow {
    animation: none !important;
    text-shadow: none !important;
    box-shadow: none !important;
}

/* Forms and Inputs */
input,
textarea,
select {
    border: 1px solid var(--border-light) !important;
    color: var(--text-primary) !important;
    background: var(--white) !important;
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--robo-blue) !important;
    box-shadow: 0 0 0 3px rgba(37, 115, 209, 0.1) !important;
    outline: none !important;
}

/* Footer */
footer {
    background: var(--bg-secondary) !important;
    border-top: 1px solid var(--border-light);
    color: var(--text-secondary) !important;
}

footer a {
    color: var(--text-secondary) !important;
}

footer a:hover {
    color: var(--robo-blue) !important;
}

/* Modal Overlay */
.booking-modal {
    background: rgba(50, 33, 13, 0.5) !important;
    backdrop-filter: blur(4px);
}

/* Modal Header */
.modal-header {
    background: var(--brand-gradient) !important;
}

/* Calendar Styles */
.calendar-day:hover:not(.disabled):not(.booked) {
    background: var(--robo-blue) !important;
    color: var(--white) !important;
    border-color: var(--robo-blue) !important;
}

.calendar-day.selected {
    background: var(--robo-blue) !important;
    color: var(--white) !important;
}

.calendar-day.today {
    border: 2px solid var(--robo-blue) !important;
}

/* Robot Selection Cards in Modal */
.robot-card-compact:hover {
    border-color: var(--robo-blue) !important;
    box-shadow: var(--shadow-blue) !important;
}

.robot-card-compact.selected {
    background: var(--subtle-gradient) !important;
    border-color: var(--robo-blue) !important;
}

.robot-card-compact.selected::after {
    background: var(--robo-blue) !important;
}

.robot-icon-compact {
    background: var(--brand-gradient) !important;
}

.robot-price-compact {
    color: var(--robo-blue) !important;
}

/* Booking Button in Modal */
.btn-book {
    background: var(--brand-gradient) !important;
    color: var(--white) !important;
    box-shadow: var(--shadow-md);
}

.btn-book:hover:not(:disabled) {
    background: var(--brand-gradient-hover) !important;
    box-shadow: var(--shadow-blue-hover);
}

/* Summary Section */
.booking-summary-compact {
    background: var(--subtle-gradient) !important;
    border: 1px solid var(--robo-blue) !important;
}

.summary-row.total .summary-value {
    background: var(--brand-gradient) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}

/* Contact Page Hero */
.contact-hero {
    background: var(--brand-gradient) !important;
}

/* Pricing Hero */
.pricing-hero {
    background: var(--brand-gradient) !important;
}

/* Robots Page Hero */
.robots-hero {
    background: var(--brand-gradient) !important;
}

/* Remove all animated backgrounds and particles */
.animated-bg,
.particles,
.floating-shapes,
.cyber-bg {
    display: none !important;
}

/* Text Colors Throughout */
h1, h2, h3, h4, h5, h6 {
    color: var(--text-primary) !important;
}

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

/* Links */
a {
    color: var(--robo-blue) !important;
    text-decoration: none;
}

a:hover {
    color: var(--robo-purple) !important;
}

/* Floating conversion cards */
.conversion-card {
    background: var(--white) !important;
    border: 1px solid var(--border-light) !important;
    box-shadow: var(--shadow-lg) !important;
}

.conversion-metric {
    color: var(--robo-blue) !important;
}

/* Remove rainbow and neon animations */
@keyframes none {
    to { transform: none; }
}

.rainbow-text,
.neon-pulse,
.cyber-glitch {
    animation: none !important;
}

/* Professional hover effects only */
.card:hover,
.feature-card:hover,
.robot-card:hover,
.pricing-card:hover {
    transform: translateY(-4px);
    transition: all 0.3s ease;
}

/* Clean, professional shadows */
.card,
.feature-card,
.robot-card,
.pricing-card {
    transition: all 0.3s ease;
}

/* Typography adjustments for brand */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--text-primary);
    background: var(--bg-primary);
}

/* Ensure high contrast for accessibility */
.btn-primary,
.btn-book,
.badge {
    font-weight: 600;
    letter-spacing: 0.025em;
}

/* Clean professional gradients only where needed */
.hero,
.stats-section,
.cta-section {
    position: relative;
    overflow: hidden;
}

.hero::before,
.stats-section::before,
.cta-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--subtle-gradient);
    opacity: 0.05;
    pointer-events: none;
}