/* Topbar Account/Login, Cart and Back buttons (booking, cart and confirmation pages).
   Compact labelled buttons on desktop, icon-only on mobile.
   Colours come from the member theme tokens each page sets on :root (--bwkd-brand, --bwkd-card,
   --bwkd-text, --bwkd-border, --bwkd-brand-contrast), so brand colour and dark mode follow the member. */
.bwkd-utility-nav {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
}

.bwkd-utility-btn {
    position: relative;
    min-height: 36px;
    padding: 0 13px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 0;
    border-radius: 11px;
    background: color-mix(in srgb, var(--bwkd-card, #fff) 88%, transparent);
    box-shadow:
        0 2px 6px rgba(0, 0, 0, 0.06),
        0 6px 14px rgba(0, 0, 0, 0.04);
    color: var(--bwkd-brand);
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease,
        background-color 0.15s ease;
}

.bwkd-utility-btn:hover {
    color: var(--bwkd-brand);
    background: var(--bwkd-card, #fff);
    transform: translateY(-1px);
    box-shadow:
        0 3px 8px rgba(0, 0, 0, 0.08),
        0 8px 18px rgba(0, 0, 0, 0.05);
}

.bwkd-utility-btn:focus-visible {
    outline: 2px solid var(--bwkd-brand);
    outline-offset: 2px;
}

.bwkd-utility-btn:disabled {
    cursor: default;
    transform: none;
}

.bwkd-utility-btn i {
    font-size: 15px;
    line-height: 1;
}

.bwkd-cart-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--bwkd-brand);
    color: var(--bwkd-brand-contrast, #fff);
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

/* Dark mode: a hairline border keeps the button edge visible on dark backgrounds (soft shadows
   vanish there), and the label leans towards the theme text colour so dark brand colours stay legible. */
body.bwkd-dark-mode .bwkd-utility-btn {
    box-shadow:
        inset 0 0 0 1px var(--bwkd-border, rgba(255, 255, 255, 0.12)),
        0 2px 8px rgba(0, 0, 0, 0.35);
    color: color-mix(in srgb, var(--bwkd-brand) 70%, var(--bwkd-text, #fff));
}

body.bwkd-dark-mode .bwkd-utility-btn:hover {
    color: color-mix(in srgb, var(--bwkd-brand) 70%, var(--bwkd-text, #fff));
    box-shadow:
        inset 0 0 0 1px color-mix(in srgb, var(--bwkd-brand) 45%, var(--bwkd-border, #3a3a3a)),
        0 4px 12px rgba(0, 0, 0, 0.45);
}

body.bwkd-dark-mode .bwkd-cart-badge {
    box-shadow: 0 0 0 2px var(--bwkd-bg, #121212);
}

@media (max-width: 767.98px) {
    .bwkd-utility-nav {
        gap: 8px;
    }

    .bwkd-utility-btn {
        width: 36px;
        height: 36px;
        min-height: 36px;
        padding: 0;
        border-radius: 10px;
    }

    .bwkd-utility-label {
        display: none;
    }

    .bwkd-utility-btn i {
        font-size: 16px;
    }

    .bwkd-cart-badge {
        top: -5px;
        right: -5px;
        min-width: 18px;
        height: 18px;
        font-size: 9px;
    }
}