/**
 * CK Tooltip Shortcode Styles
 * Responzivní tooltip komponenta pro WordPress
 */

/* Základní styly pro tooltip wrapper */
.ck-tooltip-wrapper {
    position: relative;
    display: inline-block;
    cursor: help;
    transition: all 0.3s ease;
}

/* Tooltip bubble - základní styly */
.ck-tooltip-bubble {
    position: absolute;
    z-index: 9999;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 12px;
    line-height: 1.4;
    white-space: nowrap;
    width: fit-content; 
    max-width: 100vw; 
    word-wrap: break-word;
    white-space: normal; /* Povolit zalomení textu */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: all 0.3s ease;
    /* Vytvoří vlastní stacking context, aby šipka mohla být pod bublinou */
}

/* Šipka pod bublinou (schovaná za okrajem) */
.ck-tooltip-bubble .ck-tooltip-arrow {
    z-index: -1; /* posune šipku za plochu bubliny */
}

/* Pokud by některé prohlížeče šipku zcela skryly (kvůli tomu, že je uvnitř rodiče),
   je možné alternativně použít menší zápornou hodnotu a přidat padding pro překrytí hrany:
   .ck-tooltip-bubble { padding: 9px 13px; }
   a šipku posunout o 1px dále. Zatím necháváme základní minimální zásah. */


/* Zobrazení tooltipu */
.ck-tooltip-wrapper:hover .ck-tooltip-bubble,
.ck-tooltip-wrapper.ck-tooltip-active .ck-tooltip-bubble {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Šipka tooltipu */
.ck-tooltip-arrow {
    position: absolute;
    width: 0;
    height: 0;
    border: 6px solid transparent;
}

/* Pozice tooltipu - TOP */
.ck-tooltip-bubble-top {
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 8px;
}

.ck-tooltip-bubble-top .ck-tooltip-arrow {
    top: calc(100% + 1px);
    left: 50%;
    transform: translateX(-50%);
    border-bottom: none;
}

/* Pozice tooltipu - BOTTOM */
.ck-tooltip-bubble-bottom {
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 8px;
}

.ck-tooltip-bubble-bottom .ck-tooltip-arrow {
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-top: none;
}

/* Pozice tooltipu - LEFT */
.ck-tooltip-bubble-left {
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    margin-right: 8px;
}

.ck-tooltip-bubble-left .ck-tooltip-arrow {
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    border-right: none;
}

/* Pozice tooltipu - RIGHT */
.ck-tooltip-bubble-right {
    left: 100%;
    top: 50%;
    transform: translateY(-50%);
    margin-left: 8px;
}

.ck-tooltip-bubble-right .ck-tooltip-arrow {
    right: 100%;
    top: 50%;
    transform: translateY(-50%);
    border-left: none;
}

/* Témata - DEFAULT */
.ck-tooltip-default .ck-tooltip-bubble {
    background-color: #FFF9CA;
    color: #4E4E4E;
    border: 1px solid #D9D194;
}

/* Šipky pro DEFAULT téma */
.ck-tooltip-default .ck-tooltip-bubble-top .ck-tooltip-arrow {
    border-top-color: #D9D194;
}

.ck-tooltip-default .ck-tooltip-bubble-bottom .ck-tooltip-arrow {
    border-bottom-color: #D9D194;
}

.ck-tooltip-default .ck-tooltip-bubble-left .ck-tooltip-arrow {
    border-left-color: #D9D194;
}

.ck-tooltip-default .ck-tooltip-bubble-right .ck-tooltip-arrow {
    border-right-color: #D9D194;
}

/* Témata - DARK */
.ck-tooltip-dark .ck-tooltip-bubble {
    background-color: #002242;
    color: #fff;
    border: 1px solid #002242;
}

/* Šipky pro DARK téma */
.ck-tooltip-dark .ck-tooltip-bubble-top .ck-tooltip-arrow {
    border-top-color: #002242;
}

.ck-tooltip-dark .ck-tooltip-bubble-bottom .ck-tooltip-arrow {
    border-bottom-color: #002242;
}

.ck-tooltip-dark .ck-tooltip-bubble-left .ck-tooltip-arrow {
    border-left-color: #002242;
}

.ck-tooltip-dark .ck-tooltip-bubble-right .ck-tooltip-arrow {
    border-right-color: #002242;
}

/* Témata - LIGHT */
.ck-tooltip-light .ck-tooltip-bubble {
    background-color: #fff;
    color: #333;
    border: 1px solid #ddd;
}

/* Šipky pro LIGHT téma */
.ck-tooltip-light .ck-tooltip-bubble-top .ck-tooltip-arrow {
    border-top-color: #fff;
}

.ck-tooltip-light .ck-tooltip-bubble-top .ck-tooltip-arrow::before {
    content: '';
    position: absolute;
    top: -7px;
    left: -6px;
    border: 6px solid transparent;
    border-top-color: #ddd;
}

.ck-tooltip-light .ck-tooltip-bubble-bottom .ck-tooltip-arrow {
    border-bottom-color: #fff;
}

.ck-tooltip-light .ck-tooltip-bubble-bottom .ck-tooltip-arrow::before {
    content: '';
    position: absolute;
    bottom: -7px;
    left: -6px;
    border: 6px solid transparent;
    border-bottom-color: #ddd;
}

.ck-tooltip-light .ck-tooltip-bubble-left .ck-tooltip-arrow {
    border-left-color: #fff;
}

.ck-tooltip-light .ck-tooltip-bubble-left .ck-tooltip-arrow::before {
    content: '';
    position: absolute;
    left: -7px;
    top: -6px;
    border: 6px solid transparent;
    border-left-color: #ddd;
}

.ck-tooltip-light .ck-tooltip-bubble-right .ck-tooltip-arrow {
    border-right-color: #fff;
}

.ck-tooltip-light .ck-tooltip-bubble-right .ck-tooltip-arrow::before {
    content: '';
    position: absolute;
    right: -7px;
    top: -6px;
    border: 6px solid transparent;
    border-right-color: #ddd;
}

/* Animace - FADE */
.ck-tooltip-fade .ck-tooltip-bubble {
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Animace - SLIDE */
.ck-tooltip-slide.ck-tooltip-top .ck-tooltip-bubble {
    transform: translateX(-50%) translateY(-10px);
    transition: all 0.3s ease;
}

.ck-tooltip-slide.ck-tooltip-top:hover .ck-tooltip-bubble,
.ck-tooltip-slide.ck-tooltip-top.ck-tooltip-active .ck-tooltip-bubble {
    transform: translateX(-50%) translateY(0);
}

.ck-tooltip-slide.ck-tooltip-bottom .ck-tooltip-bubble {
    transform: translateX(-50%) translateY(10px);
    transition: all 0.3s ease;
}

.ck-tooltip-slide.ck-tooltip-bottom:hover .ck-tooltip-bubble,
.ck-tooltip-slide.ck-tooltip-bottom.ck-tooltip-active .ck-tooltip-bubble {
    transform: translateX(-50%) translateY(0);
}

.ck-tooltip-slide.ck-tooltip-left .ck-tooltip-bubble {
    transform: translateY(-50%) translateX(-10px);
    transition: all 0.3s ease;
}

.ck-tooltip-slide.ck-tooltip-left:hover .ck-tooltip-bubble,
.ck-tooltip-slide.ck-tooltip-left.ck-tooltip-active .ck-tooltip-bubble {
    transform: translateY(-50%) translateX(0);
}

.ck-tooltip-slide.ck-tooltip-right .ck-tooltip-bubble {
    transform: translateY(-50%) translateX(10px);
    transition: all 0.3s ease;
}

.ck-tooltip-slide.ck-tooltip-right:hover .ck-tooltip-bubble,
.ck-tooltip-slide.ck-tooltip-right.ck-tooltip-active .ck-tooltip-bubble {
    transform: translateY(-50%) translateX(0);
}

/* Animace - NONE */
.ck-tooltip-none .ck-tooltip-bubble {
    transition: none;
}

/* Responzivní úpravy */
@media (max-width: 768px) {
    .ck-tooltip-bubble {
        width: 150px;
        font-size: 11px;
        padding: 6px 10px;
    }
    
    .ck-tooltip-arrow {
        border-width: 5px;
    }

    /* Mobilní úprava: větší odsazení šipky od bubliny (top varianta) */
    .ck-tooltip-bubble-top .ck-tooltip-arrow {
        top: calc(100% + 1px);
    }
    .ck-tooltip-light .ck-tooltip-bubble-top .ck-tooltip-arrow::before {
        top: -5px;
    }
}

@media (max-width: 480px) {
    .ck-tooltip-bubble {
        max-width: 120px;
        font-size: 10px;
        padding: 5px 8px;
    }
    
    .ck-tooltip-arrow {
        border-width: 4px;
    }
}

/* Speciální styly pro dlouhý obsah */
.ck-tooltip-bubble.ck-tooltip-wide {
    width: 300px;
}

.ck-tooltip-bubble.ck-tooltip-narrow {
    width: 150px;
}

/* Hover efekty pro wrapper */
.ck-tooltip-wrapper.ck-tooltip-hover-highlight:hover {
    background-color: rgba(255, 255, 0, 0.1);
    padding: 2px 4px;
    margin: -2px -4px;
    border-radius: 3px;
}

/* Ikony v tooltipu */
.ck-tooltip-content .ck-tooltip-icon {
    display: inline-block;
    margin-right: 5px;
    font-size: 14px;
    vertical-align: middle;
}

/* Loading stav */
.ck-tooltip-loading .ck-tooltip-bubble {
    background-color: #f0f0f0;
    color: #666;
}

.ck-tooltip-loading .ck-tooltip-bubble::after {
    content: "Načítání...";
}

/* Error stav */
.ck-tooltip-error .ck-tooltip-bubble {
    background-color: #ff4444;
    color: #fff;
    border-color: #cc0000;
}

.ck-tooltip-error .ck-tooltip-arrow {
    border-color: #ff4444;
}

/* Zarovnání textu (volitelný atribut align) */
.ck-tooltip-align-left .ck-tooltip-bubble .ck-tooltip-content { text-align: left; }
.ck-tooltip-align-center .ck-tooltip-bubble .ck-tooltip-content { text-align: center; }
.ck-tooltip-align-right .ck-tooltip-bubble .ck-tooltip-content { text-align: right; }
.ck-tooltip-align-justify .ck-tooltip-bubble .ck-tooltip-content { text-align: justify; }