/* Styly pro kontejner běžícího pruhu - ZŮSTÁVÁ STEJNÝ */

.psp-ticker-wrapper {

    display: flex;

    align-items: center;

    background-color: #d6d6d6;

    padding: 8px 15px;

    font-size: 16px;

    color: #444;

    overflow: hidden;

    white-space: nowrap;

    border-radius: 24px;

    margin: 7px auto;

    width: 100%;

    box-sizing: border-box;

}



/* Vnitřní kontejner pro animované položky - ZMĚNA */

.psp-ticker-inner {

    display: flex; /* Už nepotřebujeme pevnou šířku, přizpůsobí se obsahu */

    animation: psp-ticker-scroll 130s linear infinite;

}



/* Jedna položka v tickeru - ZŮSTÁVÁ STEJNÝ */

.psp-ticker-item {

    padding-right: 30px;

    flex-shrink: 0;

}



/* Odkazy a hover efekty - ZŮSTÁVAJÍ STEJNÉ */

.psp-ticker-item a {

    color: #444;

    text-decoration: none;

    transition: color 0.2s ease-in-out;

}

.psp-ticker-item a:hover {

    color: #000000;

}



/* Definice animace pro posuv - ZÁSADNÍ ZMĚNA */

@keyframes psp-ticker-scroll {

    0% {

        transform: translateX(0);

    }

    100% {

        /* Posuneme kontejner o 50% jeho šířky, což je přesně délka jedné sady položek */

        transform: translateX(-50%);

    }

}

<?php // Přidejte tyto styly do souboru style.css vaší šablony ?>

<style>

.katalog-form-wrapper { background: #f9f9f9; padding: 25px; border-radius: 8px; margin: 20px 0 30px 0; }

.katalog-form-title { text-align: center; margin-top: 0; margin-bottom: 20px; }

.katalog-form { display: flex; flex-wrap: wrap; gap: 15px; align-items: flex-end; }

.form-group { flex: 1; min-width: 200px; }

.form-group label { display: block; margin-bottom: 5px; font-weight: bold; }

.katalog-select { width: 100%; padding: 8px; border-radius: 4px; border: 1px solid #ccc; }

.katalog-submit-button { padding: 8px 20px; }

</style>