/**
 * Branike Button — Frontend styles  v1.5.19
 *  - v1.5.19: Shine, Glow, Fill, Scramble efekty; .bb-is-tracking (tilt/magnetic fix); full-width v skupine
 *  - v1.5.17: hover ikona swap (.bb-button__icon-wrap)
 *
 * Architektura:
 *  - CSS custom properties pre farby (--bb-btn-*)
 *  - BEM triedy: .bb-button, .bb-button--variant, .bb-button--size, .bb-button--shape
 *  - Efekty: .bb-button--fx-tilt, .bb-button--fx-magnetic, .bb-button--fx-dual-text, .bb-button--fx-loading
 *  - prefers-reduced-motion: disable transitions + transforms
 */

/* ── Reset a base ─────────────────────────────────────────────────────────── */
.bb-button {
    --bb-btn-bg:          #0073aa;
    --bb-btn-color:       #ffffff;
    --bb-btn-border:      var( --bb-btn-bg );   /* auto-dedí z bgColor — bez potreby zvlášť nastaviť */
    /* Hover default = stmavenie vlastnej farby (nie modrý placeholder). Render prepíše inline pri user výbere. */
    --bb-btn-hover-bg:    color-mix(in srgb, var(--bb-btn-bg) 85%, #000);
    --bb-btn-hover-color: var(--bb-btn-color, #ffffff);

    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             0.4em;
    text-decoration: none;
    cursor:          pointer;
    border:          2px solid var(--bb-btn-border);
    font-family:     inherit;
    font-weight:     600;
    line-height:     1.2;
    white-space:     nowrap;
    transition:      background 0.22s ease, color 0.22s ease,
                     border-color 0.22s ease, transform 0.22s ease,
                     box-shadow 0.22s ease;
    position:        relative;
    overflow:        hidden;
    -webkit-tap-highlight-color: transparent;
    user-select:     none;
}

.bb-button:focus-visible {
    outline:        3px solid var(--bb-btn-border);
    outline-offset: 3px;
}

/* ── Varianty ─────────────────────────────────────────────────────────────── */
.bb-button--solid {
    background: var(--bb-btn-bg);
    color:      var(--bb-btn-color);
}

.bb-button--solid:hover,
.bb-button--solid:focus-visible {
    background:   var(--bb-btn-hover-bg);
    color:        var(--bb-btn-hover-color);
    border-color: var(--bb-btn-hover-bg);
}

.bb-button--outline {
    background:   transparent;
    color:        var(--bb-btn-color, var(--bb-btn-border));
    border-color: var(--bb-btn-border);
    /* Default hover pre outline = vyplnenie farbou rámika (ak user nenastavil vlastný hover). */
    --bb-btn-hover-bg:    var(--bb-btn-border);
    --bb-btn-hover-color: var(--bb-btn-color, #ffffff);
}

.bb-button--outline:hover,
.bb-button--outline:focus-visible {
    background:   var(--bb-btn-hover-bg);
    color:        var(--bb-btn-hover-color);
    border-color: var(--bb-btn-hover-bg);
}

.bb-button--ghost {
    background:   transparent;
    color:        var(--bb-btn-color, var(--bb-btn-bg));   /* override textu, inak sleduje primárnu farbu */
    border-color: transparent;
    /* Default hover pre ghost = jemný 10% tint (ak user nenastavil vlastný hover). */
    --bb-btn-hover-bg:    color-mix(in srgb, var(--bb-btn-bg) 10%, transparent);
    --bb-btn-hover-color: var(--bb-btn-bg);
}

.bb-button--ghost:hover,
.bb-button--ghost:focus-visible {
    background:   var(--bb-btn-hover-bg);
    color:        var(--bb-btn-hover-color);
    border-color: transparent;
}

.bb-button--link {
    background:   transparent;
    color:        var(--bb-btn-color, var(--bb-btn-border, #0073aa));
    border-color: transparent;
    padding-left: 0;
    padding-right: 0;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.bb-button--link:hover,
.bb-button--link:focus-visible {
    background:     transparent;
    border-color:   transparent;
    text-decoration-thickness: 2px;
}

/* ── Veľkosti ─────────────────────────────────────────────────────────────── */
.bb-button--sm  { padding: 0.4em 0.9em;  font-size: 0.8125rem; }
.bb-button--md  { padding: 0.6em 1.25em; font-size: 0.9375rem; }
.bb-button--lg  { padding: 0.75em 1.6em; font-size: 1.0625rem; }
.bb-button--xl  { padding: 0.9em 2em;    font-size: 1.1875rem; }

/* ── Tvary ────────────────────────────────────────────────────────────────── */
.bb-button--square  { border-radius: 0; }
.bb-button--rounded { border-radius: 6px; }
.bb-button--pill    { border-radius: 9999px; }

/* ── Celá šírka ───────────────────────────────────────────────────────────── */
.bb-button--full { width: 100%; }

/* V buttons skupine: vlastný riadok (flex-wrap kontajner) */
.bb-buttons .bb-button--full { flex: 0 0 100%; }

/* ── Ikona ────────────────────────────────────────────────────────────────── */
.bb-button__icon {
    flex-shrink: 0;
    font-size:   1.1em;
    line-height: 1;
}

/* ── Hover ikona (swap) ───────────────────────────────────────────────────── */
/*
 * Dve ikony v inline-grid wrapperi — obe v rovnakej grid bunke.
 * Base ikona viditeľná, hover ikona skrytá pod ňou (translateY + opacity).
 * Hover/focus: base vyletí hore, hover prilieta zdola — GPU-only (transform/opacity).
 */
.bb-button__icon-wrap {
    display:     inline-grid;
    flex-shrink: 0;
    overflow:    hidden;
}

.bb-button__icon-wrap .bb-button__icon {
    grid-area:   1 / 1;
    transition:  transform 0.22s ease, opacity 0.22s ease;
    will-change: transform, opacity;
}

.bb-button__icon--hover {
    opacity:   0;
    transform: translateY(70%);
}

@media (hover: hover) {
    .bb-button:hover .bb-button__icon--base,
    .bb-button:focus-visible .bb-button__icon--base {
        opacity:   0;
        transform: translateY(-70%);
    }

    .bb-button:hover .bb-button__icon--hover,
    .bb-button:focus-visible .bb-button__icon--hover {
        opacity:   1;
        transform: translateY(0);
    }
}

/* ── Dual text efekt ──────────────────────────────────────────────────────── */
/*
 * Tlačidlo zostáva flex-direction:row — ikona + text v normálnom toku.
 * .bb-button__dual je absolútne pozicovaný (inset:0) — zakrýva celé tlačidlo.
 * Overlay obsahuje aj ikonu (hoverIcon ak je nastavená, inak základná).
 * Hover: base text+ikona slideUp + fade-out, dual slideUp zdola + fade-in.
 * POZOR: selektory cielia PRIAMYCH potomkov (>) — ikona VO VNÚTRI
 * .bb-button__dual sa nesmie animovať spolu s base ikonou.
 */
.bb-button--fx-dual-text > .bb-button__text,
.bb-button--fx-dual-text > .bb-button__icon {
    display:     inline-block;
    transition:  transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
                 opacity   0.22s ease;
    will-change: transform;
}

.bb-button--fx-dual-text > .bb-button__dual {
    position:        absolute;
    inset:           0;
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             0.4em;
    transform:       translateY(110%);
    opacity:         0;
    transition:      transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
                     opacity   0.22s ease;
    will-change:     transform;
    white-space:     nowrap;
}

@media (hover: hover) {
    .bb-button--fx-dual-text:hover > .bb-button__text,
    .bb-button--fx-dual-text:hover > .bb-button__icon {   /* base ikona + text skĺznu nahor spolu */
        transform: translateY(-110%);
        opacity:   0;
    }

    .bb-button--fx-dual-text:hover > .bb-button__dual {
        transform: translateY(0);
        opacity:   1;
    }
}

/* ── Loading state efekt ──────────────────────────────────────────────────── */
.bb-button__spinner {
    display:       none;
    width:         1em;
    height:        1em;
    border:        2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation:     bb-spin 0.65s linear infinite;
    flex-shrink:   0;
}

.bb-button--is-loading .bb-button__text {
    opacity: 0.5;
}

.bb-button--is-loading .bb-button__spinner {
    display: inline-block;
}

.bb-button--is-loading {
    pointer-events: none;
    cursor:         wait;
}

@keyframes bb-spin {
    to { transform: rotate(360deg); }
}

/* ── Tilt 3D ──────────────────────────────────────────────────────────────── */
.bb-button--fx-tilt {
    transform-style: preserve-3d;
    will-change:     transform;
}

/* ── Magnetic ─────────────────────────────────────────────────────────────── */
.bb-button--fx-magnetic {
    will-change: transform;
}

/* Počas JS sledovania myši: transition na transform VYPNUTÁ —
 * inak by 0.22s ease "naháňal" každý mousemove a efekt by nebol vidieť.
 * Na mouseleave JS triedu odstráni → plná transition odpruží späť. */
.bb-button--fx-tilt.bb-is-tracking,
.bb-button--fx-magnetic.bb-is-tracking {
    transition: background 0.22s ease, color 0.22s ease, border-color 0.22s ease;
}

/* ── Shine — záblesk prejde tlačidlom ─────────────────────────────────────── */
.bb-button--fx-shine::before {
    content:        '';
    position:       absolute;
    top:            0;
    bottom:         0;
    left:           0;
    width:          40%;
    background:     linear-gradient(105deg,
                        transparent,
                        rgba(255, 255, 255, 0.45) 50%,
                        transparent);
    transform:      translateX(-150%) skewX(-18deg);
    will-change:    transform;
    pointer-events: none;
}

@media (hover: hover) {
    .bb-button--fx-shine:hover::before,
    .bb-button--fx-shine:focus-visible::before {
        animation: bb-shine 0.75s ease;
    }
}

@keyframes bb-shine {
    to { transform: translateX(400%) skewX(-18deg); }
}

/* ── Glow — pulzujúca žiara (pre hlavné CTA) ──────────────────────────────── */
/* Statický box-shadow na pseudo elemente, animuje sa LEN opacity = GPU.     */
.bb-button--fx-glow {
    overflow: visible;   /* žiara musí presahovať tlačidlo */
}

.bb-button--fx-glow::after {
    content:        '';
    position:       absolute;
    inset:          0;
    border-radius:  inherit;
    box-shadow:     0 0 16px 2px var(--bb-btn-bg),
                    0 0 36px 6px var(--bb-btn-bg);
    opacity:        0.25;
    z-index:        -1;
    animation:      bb-glow-pulse 2.2s ease-in-out infinite;
    will-change:    opacity;
    pointer-events: none;
}

@keyframes bb-glow-pulse {
    0%, 100% { opacity: 0.2; }
    50%      { opacity: 0.65; }
}

/* ── Fill — smerové vyplnenie ─────────────────────────────────────────────── */
/* ::before sa scale-ne zo strany kde vstúpil kurzor (JS → data-bb-from).    */
.bb-button--fx-fill::before {
    content:        '';
    position:       absolute;
    inset:          0;
    background:     var(--bb-btn-hover-bg);
    transform:      scaleX(0);
    transform-origin: left center;
    transition:     transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
    will-change:    transform;
    pointer-events: none;
    z-index:        0;
}

.bb-button--fx-fill[data-bb-from="right"]::before  { transform-origin: right center; }
.bb-button--fx-fill[data-bb-from="top"]::before    { transform: scaleY(0); transform-origin: center top; }
.bb-button--fx-fill[data-bb-from="bottom"]::before { transform: scaleY(0); transform-origin: center bottom; }

/* Obsah nad fill vrstvou */
.bb-button--fx-fill > * {
    position: relative;
    z-index:  1;
}

@media (hover: hover) {
    .bb-button--fx-fill:hover::before,
    .bb-button--fx-fill:focus-visible::before {
        transform: scale(1);
    }

    /* Solid: base pozadie zostáva — vyplnenie kreslí pseudo element */
    .bb-button--fx-fill.bb-button--solid:hover,
    .bb-button--fx-fill.bb-button--solid:focus-visible {
        background:   var(--bb-btn-bg);
        border-color: var(--bb-btn-hover-bg);
    }
}

/* ── Popup / Modal ────────────────────────────────────────────────────────── */
/*
 * Wrapper — inline-block, neovplyvňuje flow ostatného obsahu.
 * Modal — fixed overlay, flex centrovaný, z-index 9999.
 * Dialog animácia: fade + scale 0.9→1 (GPU: opacity + transform).
 * prefers-reduced-motion: animácia vypnutá (instant show).
 */
.bb-popup-wrap {
    display:  inline-block;
    position: relative;
}

.bb-popup {
    position:        fixed;
    inset:           0;
    z-index:         9999;
    display:         flex;
    align-items:     center;
    justify-content: center;
    padding:         1rem;
}

.bb-popup[hidden] {
    display: none;
}

.bb-popup__overlay {
    position:   absolute;
    inset:      0;
    background: rgba(0, 0, 0, 0.55);
    cursor:     pointer;
}

.bb-popup__dialog {
    position:   relative;
    background: var(--bb-surface, #fff);
    border-radius: 8px;
    max-height: 90dvh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    width:      100%;
    animation:  bb-popup-in 0.22s cubic-bezier(0.22, 1, 0.36, 1) both;
    will-change: transform, opacity;
}

/* Veľkosti */
.bb-popup--sm   .bb-popup__dialog { max-width: 400px; }
.bb-popup--md   .bb-popup__dialog { max-width: 600px; }
.bb-popup--lg   .bb-popup__dialog { max-width: 900px; }
.bb-popup--fullscreen .bb-popup__dialog {
    max-width:    none;
    width:        100%;
    height:       100dvh;
    max-height:   100dvh;
    border-radius: 0;
}

.bb-popup__body {
    padding: 2rem;
}

.bb-popup__close {
    position:        absolute;
    top:             0.65rem;
    right:           0.65rem;
    background:      transparent;
    border:          none;
    cursor:          pointer;
    font-size:       1.1rem;
    line-height:     1;
    color:           var(--bb-text-muted, #555);
    padding:         0.3rem;
    border-radius:   4px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    transition:      background 0.15s ease, color 0.15s ease;
    z-index:         1;
}

.bb-popup__close:hover {
    background: color-mix(in srgb, var(--bb-text, #000) 8%, transparent);
    color:      var(--bb-text, #000);
}

.bb-popup__close:focus-visible {
    outline:        2px solid #0073aa;
    outline-offset: 2px;
}

@keyframes bb-popup-in {
    from {
        opacity:   0;
        transform: scale(0.9);
    }
    to {
        opacity:   1;
        transform: scale(1);
    }
}

/* ── prefers-reduced-motion ───────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .bb-button,
    .bb-button__text,
    .bb-button__icon,
    .bb-button__dual,
    .bb-button__spinner {
        transition:  none !important;
        animation:   none !important;
        transform:   none !important;
    }

    /* Dual text: žiadny swap — base text zostáva (frontend.js skrýva dual) */

    /* Hover ikona — bez animácie, len okamžitý swap cez opacity */
    .bb-button__icon--hover                  { opacity: 0; }
    .bb-button:hover .bb-button__icon--base  { opacity: 0; }
    .bb-button:hover .bb-button__icon--hover { opacity: 1; }

    /* Popup dialog — bez animácie, instant show */
    .bb-popup__dialog {
        animation: none;
    }

    /* Shine / Glow / Fill — pseudo elementy vypnuté */
    .bb-button--fx-shine::before,
    .bb-button--fx-glow::after,
    .bb-button--fx-fill::before {
        display:   none;
        animation: none;
    }

    /* Fill fallback — štandardná hover zmena pozadia */
    .bb-button--fx-fill.bb-button--solid:hover {
        background:   var(--bb-btn-hover-bg);
        border-color: var(--bb-btn-hover-bg);
    }
}

/* ── Block Styles ─────────────────────────────────────────────── */

/* is-style-pill — maximálne zaoblenie */
.bb-button.is-style-pill {
    border-radius: 9999px !important;
}

/* is-style-outline-thick — hrubý border 3px */
.bb-button.is-style-outline-thick {
    background:   transparent !important;
    border-width: 3px !important;
    border-color: var(--bb-btn-bg, #0EA5E9) !important;
    color:        var(--bb-btn-bg, #0EA5E9) !important;
}
.bb-button.is-style-outline-thick:hover {
    background:   var(--bb-btn-bg, #0EA5E9) !important;
    color:        #fff !important;
}

/* is-style-ghost-border — ghost s ohraničením pri hoveri */
.bb-button.is-style-ghost-border {
    background:    transparent !important;
    border-color:  transparent !important;
    color:         var(--bb-btn-bg, #0EA5E9) !important;
    box-shadow:    inset 0 0 0 0 var(--bb-btn-bg, #0EA5E9);
    transition:    box-shadow .22s ease, color .22s ease, background .22s ease;
}
.bb-button.is-style-ghost-border:hover {
    box-shadow: inset 0 0 0 2px var(--bb-btn-bg, #0EA5E9) !important;
}