@charset "utf-8";
/* CSS Document */
        .filtr-bar { margin-bottom: 5px; padding: 10px 0; border-bottom: 2px solid #dee2e6; }
        .filtr-odkaz { display: inline-block; padding: 8px 6px; margin-right: 5px; margin-bottom: 5px; background: #e9ecef; color: #495057; text-decoration: none; border-radius: 15px; font-weight: bold; }
		.aktivni { display: inline-block; padding: 8px 6px; margin-right: 5px; margin-bottom: 5px; background: #495057; color: #e9ecef; text-decoration: none; border-radius: 15px; font-weight: bold; }
        
        .galerie { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; }
        .galerie1 { 
            width: 30%; margin: 0 auto;
            @media (max-width: 900px) {
                width:100%;
            }
}
        .foto-karta { background: white; padding: 12px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.05); text-align: center; display: flex; flex-direction: column; justify-content: space-between; position: relative;}
        .foto-karta img { max-width: 100%; height: 160px; object-fit: cover; border-radius: 4px; cursor: pointer; transition: transform 0.2s; }
        .foto-karta img:hover { transform: scale(1.02); }
        .tag-kategorie { position: absolute; top: 18px; left: 18px; background: rgba(0, 0, 0, 0.7); color: white; padding: 3px 8px; font-size: 11px; border-radius: 4px; z-index: 2; }
        .btn-admin { float: right; background: #6c757d; color: white; text-decoration: none; padding: 8px 15px; border-radius: 5px; font-size: 14px; }

        .lightbox-modal { display: none; position: fixed; z-index: 9999; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.9); justify-content: center; align-items: center; user-select: none; }
        .lightbox-obsah { max-width: 85%; max-height: 85%; border-radius: 4px; }
        .lightbox-zavrit { position: absolute; top: 20px; right: 30px; color: #fff; font-size: 40px; font-weight: bold; cursor: pointer; }
        .lightbox-sipka { position: absolute; top: 50%; transform: translateY(-50%); color: #fff; font-size: 50px; font-weight: bold; padding: 15px; cursor: pointer; background: rgba(0,0,0,0.3); border-radius: 5px; }
        .sipka-vlevo { left: 20px; }
        .sipka-vpravo { right: 20px; }
		
.tag-kategorie_gal { position: absolute; bottom: 0px; left: 0px; width:100%; height:60px; background: rgba(0, 0, 0, 0.7); color: white; padding: 10px 0px; font-size: 15px; font-weight:700; border-radius: 3px; z-index: 2; }
.gal_active { color: var(--color-gold); text-decoration:underline}
.gal:hover { color: var(--color-gold); text-decoration:underline}

a.seznam_galerie {
    width: 100%;
    display: flex;
    text-align:center;
    align-items: center;
    justify-content: center;
    padding: 5px;
    background: linear-gradient(135deg, #2d2b42 0%, #1e1c30 100%); /* Jemný tmavý přechod */
    border: 1px solid rgba(255, 255, 255, 0.1); /* Nenápadný rámeček */
    border-radius: 8px; /* Elegantní zaoblení rohů */
    
    /* Textový styl */
    color: #cbd5e1; /* Příjemná světle šedá/bílá barva textu */
    text-decoration: none; /* Odstraní podtržení odkazu */
    font-family: sans-serif;
    font-size: 0.8em;
    font-weight: 500;
    text-align: center;
    
    /* Efekty */
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2), 0 2px 4px -1px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: all 0.3s ease;
    min-height: 60px;
}
.seznam_galerie:hover, a.active_gal {
   background: linear-gradient(135deg, #c5a059 0%, #a3803b 100%); /* Elegantní zlatý přechod */
    color: #0b0c10; /* Tmavé písmo pro skvělou čitelnost na zlatém podkladu */
    font-weight: 600; /* Mírně tučnější písmo při najetí */
    border-color: transparent;
    /*transform: translateY(-3px); /* Tlačítko se lehce nadzvedne */
    
    /* Zlatý zářící stín (Glow efekt) */
    box-shadow: 0 10px 20px -5px rgba(197, 160, 89, 0.4); 
}
            .custom-select-wrapper {
    position: relative;
    display: inline-block;
    width: 100%; /* Šířka podle potřeby */
}

/* Samotný select prvek */
.custom-select-wrapper select {
    width: 100%;
    padding: 12px 40px 12px 16px; /* Větší prostor vpravo pro šipku */
    font-family: 'Segoe UI', system-ui, sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #e2e8f0; /* Jemně bílý text */
    
    /* Elegantní tmavé pozadí s jemným přechodem */
    background: linear-gradient(135deg, #131926 0%, #0b0f19 100%);
    
    /* Konturovaný poloprůhledný rámeček */
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    
    /* Vypnutí výchozího vzhledu a hnusné systémové šipky */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    
    cursor: pointer;
    outline: none;
    transition: all 0.25s ease;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.2);
}

/* Efekt při najetí myší (Zvýraznění rámečku) */
.custom-select-wrapper select:hover {
    border-color: rgba(255, 255, 255, 0.2);
    background: linear-gradient(135deg, #171f30 0%, #0e1422 100%);
}

/* Aktivní stav – kliknutí (Nádherný zlatý rámeček a záře z obrázku) */
.custom-select-wrapper select:focus {
    border-color: #d1a153; 
    box-shadow: 0 0 0 3px rgba(209, 161, 83, 0.15), 0 4px 12px rgba(0, 0, 0, 0.4);
}

/* Vytvoření nové, elegantní minimalistické šipky pomocí CSS */
.custom-select-wrapper::after {
    content: "";
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    /* Nakreslení malé dolů směřující šipky */
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #94a3b8; /* Šedivá barva šipky */
    pointer-events: none; /* Kliknutí propustí skrz na select */
    transition: border-top-color 0.2s;
}

/* Změna barvy šipky, když je prvek aktivní */
.custom-select-wrapper:focus-within::after {
    border-top-color: #d1a153;
}

/* Stylování rozbalených možností uvnitř (pro Chrome/Edge/Opera) */
.custom-select-wrapper select option {
    background-color: #0f1422;
    color: #f1f5f9;
    padding: 12px;
}