/* Rosocar .new — custom styles extracted from aidesigner canvas
 * Palette: zinc-900 (black), white, zinc-100 (grey), red-600 (brand).
 * Paired with Tailwind CDN + Inter/Outfit + Phosphor icons (see inc/header.php).
 */

body { background-color: #FAFAFA; }

.hide-scroll::-webkit-scrollbar { display: none; }
.hide-scroll { -ms-overflow-style: none; scrollbar-width: none; }

/* Custom Range Slider — brand red */
input[type=range] {
    -webkit-appearance: none;
    width: 100%;
    background: transparent;
}
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    background: #ffffff;
    border: 2px solid #dc2626; /* brand-600 */
    cursor: pointer;
    margin-top: -8px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: 4px;
    cursor: pointer;
    background: #e4e4e7;
    border-radius: 2px;
}

/* Custom Checkbox — brand red */
.custom-check:checked {
    background-color: #dc2626;
    border-color: #dc2626;
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
}

/* Glass layer projection — used by fixed nav */
.glass-panel {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(228, 228, 231, 0.6);
}

/* Car card hover physics */
.car-card-img-wrapper img { transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); }
.car-card:hover .car-card-img-wrapper img { transform: scale(1.05); }

/* CMS body styles — Tailwind CDN doesn't ship the typography plugin,
   so `.prose` is a no-op. Replicate the essentials manually for content
   from the legacy `text` table (financovani, o-nas, pravni-ujednani, …). */
.prose h1, .prose h2, .prose h3, .prose h4 {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    color: #18181b;
    line-height: 1.25;
    margin-top: 1.4em;
    margin-bottom: 0.6em;
}
.prose h1 { font-size: 1.9em; }
.prose h2 { font-size: 1.5em; }
.prose h3 { font-size: 1.25em; }
.prose h4 { font-size: 1.1em; }
.prose p { margin-top: 0.9em; margin-bottom: 0.9em; line-height: 1.7; }
.prose strong { color: #18181b; font-weight: 600; }
.prose a { color: #dc2626; text-decoration: underline; text-underline-offset: 2px; }
.prose a:hover { color: #b91c1c; }
.prose ul, .prose ol { margin: 1em 0; padding-left: 1.6em; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose ul ul, .prose ol ol, .prose ul ol, .prose ol ul { margin: 0.4em 0; }
.prose li { margin: 0.35em 0; line-height: 1.6; }
.prose li > p { margin: 0.25em 0; }
.prose blockquote {
    border-left: 4px solid #e4e4e7;
    padding-left: 1em;
    color: #52525b;
    font-style: italic;
    margin: 1em 0;
}
.prose hr { border: 0; border-top: 1px solid #e4e4e7; margin: 1.5em 0; }
.prose img { max-width: 100%; height: auto; border-radius: 8px; margin: 1em 0; }
.prose code { background: #f4f4f5; padding: 0.1em 0.35em; border-radius: 4px; font-size: 0.9em; }
.prose address { font-style: normal; line-height: 1.7; margin: 0.9em 0; }
.prose-lg { font-size: 1.05em; }