/* ============================================================
   AUDIO KAFÍČKA - UNIKÁTNÍ STYLY PRO INTERAKTIVNÍ PŘEHRÁVAČ
   ============================================================ */

:root {
    --ak-primary: #4f46e5;           /* Hlavní fialová barva */
    --ak-primary-hover: #4338ca;
    --ak-bg-white: #ffffff;          /* Pozadí karty */
    --ak-text-main: #1f2937;         /* Barva názvu */
    --ak-text-muted: #6b7280;        /* Barva času a ikonek */
    --ak-progress-track: #e5e7eb;    /* Barva nenaplněné lišty */
    --ak-shadow-soft: 0 4px 12px rgba(0, 0, 0, 0.08);
    --ak-shadow-active: 0 10px 20px rgba(0, 0, 0, 0.12);
    --ak-curve: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Hlavní obal karty */
.audiokaficka-card {
    display: flex;
    align-items: center;
    height: 60px;
    width: 220px; /* Výchozí kompaktní šířka na PC */
    background: var(--ak-bg-white);
    border-radius: 30px;
    padding: 0 6px;
    box-shadow: var(--ak-shadow-soft);
    border: 1px solid rgba(0, 0, 0, 0.08);
    transition: width 0.5s var(--ak-curve), box-shadow 0.3s ease;
    cursor: pointer;
    overflow: hidden;
    position: relative;
    box-sizing: border-box;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    margin: 10px 0;
    top:-10px;
}

/* Stav při najetí nebo přehrávání na PC */
@media (min-width: 769px) {

    .audiokaficka-card:hover, 
    .audiokaficka-card.ak-is-playing {
        width: 480px;
        box-shadow: var(--ak-shadow-active);
    }
}

/* RESPONZIVITA: Mobilní telefony */
@media (max-width: 768px) {
    
.audiokaficka-card {
        width: 100%; /* Na mobilu zabere celou šířku řádku */
        display: flex;
    }
    .audiokaficka-card.ak-active,
    .audiokaficka-card.ak-is-playing {
        width: 100%;
    }
}

/* Hlavní kulaté tlačítko Play/Pause */
.audiokaficka-main-btn {
    width: 48px;
    height: 48px;
    min-width: 48px;
    border-radius: 50%;
    background: var(--ak-primary);
    border: none;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    z-index: 5;
    transition: transform 0.2s ease;
}

.audiokaficka-main-btn:hover {
    transform: scale(1.05);
}

.audiokaficka-main-btn svg {
    width: 22px;
    height: 22px;
    fill: currentColor;
}

/* Animace pulsování při hraní */
@keyframes ak-pulse-glow {
    0% { box-shadow: 0 0 0 0 rgba(79, 70, 229, 0.4); }
    70% { box-shadow: 0 0 0 12px rgba(79, 70, 229, 0); }
    100% { box-shadow: 0 0 0 0 rgba(79, 70, 229, 0); }
}
.ak-is-playing .audiokaficka-main-btn {
    animation: ak-pulse-glow 2s infinite;
}

/* Textové informace */
.audiokaficka-info {
    margin-left: 12px;
    white-space: nowrap;
    overflow: hidden;
    flex-shrink: 0;
    margin-top: -10px;
}

.audiokaficka-title {
    font-weight: 600;
    font-size: 14px;
    color: var(--ak-text-main);
}

/* Skrytá zóna, která se rozbalí */
.audiokaficka-expanded-content {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s;
    flex-grow: 1;
}

.audiokaficka-card:hover .audiokaficka-expanded-content,
.audiokaficka-card.ak-is-playing .audiokaficka-expanded-content,
.audiokaficka-card.ak-active .audiokaficka-expanded-content {
    width: auto;
    opacity: 1;
    visibility: visible;
    margin-left: 15px;
    margin-right: 10px;
}

/* Ovládání lišty (Slider) */
.audiokaficka-progress-wrap {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    min-width: 70px;
}

.audiokaficka-slider {
    -webkit-appearance: none;
    width: 100%;
    height: 4px;
    background: var(--ak-progress-track);
    border-radius: 2px;
    outline: none;
    margin: 0;
    cursor: pointer;
}

/* "Kulička" na liště */
.audiokaficka-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    background: var(--ak-primary);
    border: 2px solid white;
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

/* Časové údaje */
.audiokaficka-time-wrap {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    color: var(--ak-text-muted);
    margin-top: 4px;
    font-family: 'Courier New', Courier, monospace; /* Monospace pro stabilní číslice */
}

/* Tlačítko Stop */
.audiokaficka-stop {
    background: #f3f4f6;
    border: none;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    color: var(--ak-text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.2s, color 0.2s;
}

.audiokaficka-stop:hover {
    background: #fee2e2;
    color: #ef4444;
}

/* Přepínání ikon (Play/Pause) */
.ak-icon-pause { display: none; }
.ak-is-playing .ak-icon-play { display: none; }
.ak-is-playing .ak-icon-pause { display: block; }


/* Animace točení */
@keyframes ak-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Skrytí ikon při načítání */
.ak-is-loading .ak-icon-play,
.ak-is-loading .ak-icon-pause {
    display: none !important;
}

/* Zobrazení spinneru */
.ak-loader {
    display: none;
    width: 20px;
    height: 20px;
    border: 3px solid rgba(255,255,255,0.3);
    border-radius: 50%;
    border-top-color: #fff;
    animation: ak-spin 0.8s linear infinite;
}

.ak-is-loading .ak-loader {
    display: block;
}