/* ==========================================================================
   firma-bar.css — the business's secondary sticky bar ("quick actions")
   ==========================================================================
   Used by the business profile (firma.php) and the offer detail
   (firma-nabidka.php), so both show the same bar: name + rating on the left,
   Uložit / Sdílet / Navigace / primary action on the right.

   Moved out of firma-profile.css (where it was lines 166–259 and part of the
   ≤768px block) so the offer page can use it WITHOUT loading the whole profile
   stylesheet — that file has ~170 generic selectors (.card, .badge,
   .empty-state, .form-input…) that would also restyle the offer page.

   Two fixes against the original:
   - top: the bar stuck at 65px while the site header is 72px (64px on small
     screens), so it slid 7px under the header. Now it uses --header-height.
   - .primary used var(--category-color) with no fallback; on a page that does
     not set it (the offer page) the button had white text on no background.
   ========================================================================== */

.quick-actions-bar {
    position: sticky;
    top: var(--header-height, 72px);
    z-index: 100;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid #e5e7eb;
    padding: 0.75rem 0;
    /* When the site header hides on scroll, main.js (ZS.header →
       updateStickyElements) sets this bar's inline style.top to 0, and back to
       --header-height when the header returns. Animate `top` with the header's
       own timing (main.css: .header uses --transition-base) so they move as one.
       Do not add a second, CSS-only mechanism here: main.js's inline top always
       wins, and two owners disagree. */
    transition: box-shadow 0.3s, top var(--transition-base, 250ms ease);
}

.quick-actions-bar.scrolled {
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

.quick-actions-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.quick-actions-left {
    display: flex;
    align-items: center;
    gap: 1rem;
    min-width: 0;
}

.quick-business-name {
    font-size: 1.125rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

/* On the offer page the name links back to the profile. */
a.quick-business-name {
    color: inherit;
    text-decoration: none;
}
a.quick-business-name:hover {
    text-decoration: underline;
}

.quick-business-name .verified-check {
    color: #10b981;
}

.quick-rating {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.875rem;
    color: #6b7280;
    white-space: nowrap;
}

.quick-rating .stars {
    color: #fbbf24;
}

.quick-actions-right {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.quick-action-btn {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 1rem;
    background: #f3f4f6;
    border: none;
    border-radius: 5px;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    text-decoration: none;
    color: inherit;
    white-space: nowrap;
}

.quick-action-btn:hover {
    background: #e5e7eb;
}

.quick-action-btn.primary {
    background: var(--category-color, var(--color-black, #111));
    color: white;
}

.quick-action-btn.primary:hover {
    filter: brightness(0.9);
}

.quick-action-btn.active {
    background: #fef2f2;
    color: #ef4444;
}

@media (max-width: 768px) {
    .quick-actions-bar {
        padding: 0.5rem 1rem;
    }

    .quick-actions-left {
        display: none;
    }

    .quick-action-btn .btn-text {
        display: none;
    }
}