/**
 * style.css - Global Design Tokens & Enterprise UI Engine
 * Putanja: /public_html/public/css/style.css
 * Verzija: 5.1 (Lead Programmer - Dark Mode Contrast & Shadow Optimization)
 * * SVRHA: Centralni stilski sustav koji osigurava vizualni integritet, 
 * responzivnost i premium korisničko iskustvo na svim uređajima.
 */



/* --- 1. GLOBALNE VARIJABLE (Design Tokens) --- */
:root {
    --primary-green: #22c55e;
    --primary-green-dark: #16a34a;
    --wa-green: #25D366;
    --slate-50: #f8fafc;
    --slate-100: #f1f5f9;
    --slate-800: #1e293b;
    --slate-900: #0f172a;
    --slate-950: #020617;
    --transition-speed: 0.5s;
    --ease-premium: cubic-bezier(0.16, 1, 0.3, 1);
}

/* --- 2. GLOBALNE POSTAVKE --- */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    transition: background-color var(--transition-speed) ease, color var(--transition-speed) ease;
}

/* --- 3. ANIMACIJE --- */

/* Pulsiranje za WhatsApp Floating Gumb */
@keyframes wa-pulse {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7); }
    70% { transform: scale(1.05); box-shadow: 0 0 0 20px rgba(37, 211, 102, 0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

.wa-float {
    animation: wa-pulse 2s infinite ease-in-out;
}

/* Suptilno pojavljivanje sadržaja */
@keyframes fadeInSlide {
    from { opacity: 0; transform: translateY(30px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-module {
    animation: fadeInSlide 1s var(--ease-premium) forwards;
}

/* --- 4. MODULARNI BLOKOVI (Grid Engine) --- */

.module-block {
    transition: all 0.7s var(--ease-premium);
    will-change: transform, box-shadow;
}

/* Hover efekt za "lebdeće" kartice */
.module-block:hover {
    transform: translateY(-12px);
}

/* DARK MODE LOGIKA ZA MODULARNE BLOKOVE 
   Budući da Studio sprema bijelu boju (#ffffff) u bazu, 
   ovdje forsiramo prebacivanje u Dark Mode varijantu. */
.dark .module-block[style*="background-color: #ffffff"],
.dark .module-block[style*="background-color: rgb(255, 255, 255)"],
.dark .module-block[style*="background-color:#ffffff"] {
    background-color: var(--slate-900) !important;
    color: var(--slate-100) !important;
    border-color: var(--slate-800) !important;
}

/* --- 5. ENTERPRISE INPUTI (Form Design) --- */

.st-input-premium {
    width: 100%;
    padding: 1.75rem;
    background: rgba(0, 0, 0, 0.03);
    border: 2px solid transparent;
    border-radius: 2rem;
    font-weight: 700;
    font-size: 1rem;
    outline: none;
    transition: all 0.4s var(--ease-premium);
}

/* FIKSIRANO: Bolja definicija polja u Dark Modu */
.dark .st-input-premium {
    background: rgba(255, 255, 255, 0.08); /* Malo vidljivija pozadina */
    border: 1px solid rgba(255, 255, 255, 0.1); /* Jasniji obrub */
    color: white;
}

.st-input-premium:focus {
    border-color: var(--primary-green);
    background: white;
    box-shadow: 0 20px 40px -15px rgba(34, 197, 94, 0.2);
    transform: scale(1.01);
}

.dark .st-input-premium:focus {
    background: var(--slate-800);
    border-color: var(--primary-green);
}

/* --- 6. TIPOGRAFIJA I SADRŽAJ --- */

h1, h2, h3, h4 {
    letter-spacing: -0.05em;
    font-style: italic;
    line-height: 1.1;
}

/* Rich Text (Prose) prilagodbe */
.prose {
    max-width: none;
    line-height: 1.8;
}

.prose p {
    margin-bottom: 1.5rem;
}

.dark .prose {
    color: #cbd5e1;
}

.dark .prose strong {
    color: white;
}

/* --- 7. RESPONZIVNE DORADE --- */

@media (max-width: 1024px) {
    .module-block {
        padding: 40px !important; /* Smanjujemo padding na tabletima */
        border-radius: 35px !important;
    }
}

@media (max-width: 640px) {
    .module-block {
        padding: 30px 20px !important; /* Smanjujemo padding na mobitelima */
        border-radius: 25px !important;
    }
    
    h1 {
        font-size: 3.5rem !important; /* Osiguravamo da H1 ne "puca" na uskim ekranima */
    }

    .wa-float {
        bottom: 20px !important;
        right: 20px !important;
    }
}

/* --- 8. UTILITY KLASE --- */

.shadow-premium {
    box-shadow: 0 40px 100px -20px rgba(0, 0, 0, 0.08);
}

/* FIKSIRANO: Dublja i dramatičnija sjena za tamni način rada */
.dark .shadow-premium {
    box-shadow: 0 40px 120px -20px rgba(0, 0, 0, 0.7);
}

.glass-effect {
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}