/* =============================================================================
   Menu Items Loop Block — minimal styles.
   Layout/typography/spacing use Tailwind utility classes (WindPress).
   This file only holds theme-aware color tokens, dot leaders, hero and
   dynamic states that Tailwind utilities cannot express.
   ============================================================================= */

.kou-menu-items-loop,
.kou-dialog-content {
    --kou-accent: var(--kou-color-primary, var(--wp--preset--color--foreground, #111111));
    --kou-secondary: var(--kou-color-secondary, #111111);
    --kou-accent-soft: color-mix(in srgb, var(--kou-accent) 10%, transparent);
    --kou-border: color-mix(in srgb, var(--kou-secondary) 14%, transparent);
}

[v-cloak] {
    display: none !important;
}

/* Theme-aware tokens */
.kou-soft-bg {
    background-color: color-mix(in srgb, var(--kou-secondary) 5%, transparent);
}

.kou-border-soft {
    border: 1px solid var(--kou-border);
}

.kou-border-top-soft {
    border-top: 1px solid var(--kou-border);
}

.kou-border-bottom-soft {
    border-bottom: 1px solid var(--kou-border);
}

.kou-accent-bg {
    background-color: var(--kou-accent);
    color: var(--kou-color-base, #ffffff);
}

/* Hero */
.kou-menu-hero {
    position: relative;
    width: 100%;
    height: clamp(180px, 32vw, 380px);
    overflow: hidden;
}

.kou-menu-hero-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.kou-menu-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom,
            color-mix(in srgb, var(--kou-color-base, #ffffff) 20%, transparent) 0%,
            var(--kou-color-base, #ffffff) 100%);
}

/* Business info: centered card by default, translucent overlay on the left
   inside the hero so the image stays visible */
.kou-menu-hero-content {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    position: relative;
    z-index: 10;
    height: 100%;
    padding: 1rem;
}

.kou-menu-business-inner {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: center;
    text-align: center;
}

.kou-menu-hero .kou-menu-business {
    max-width: min(92%, 420px);
    background-color: rgba(0, 0, 0, 0.45);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: none;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

.kou-menu-hero .kou-menu-business-inner {
    align-items: flex-start;
    text-align: left;
}

.kou-menu-hero .kou-menu-business-link {
    color: #ffffff;
}

/* Opening hours — today chip + info button */
.kou-business-status-chip {
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    background-color: var(--kou-accent);
    color: var(--kou-color-base, #ffffff);
    font-weight: 600;
    font-size: 0.8em;
}

.kou-menu-hero .kou-business-status-chip {
    background-color: var(--kou-color-base, #ffffff);
    color: var(--kou-accent);
}

.kou-business-info-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: 1px solid var(--kou-border);
    border-radius: 999px;
    background: transparent;
    color: inherit;
    font-size: 0.8rem;
    cursor: pointer;
    opacity: 0.75;
    transition: opacity 0.15s ease, background-color 0.15s ease;
}

.kou-business-info-btn:hover {
    opacity: 1;
    background-color: var(--kou-accent-soft);
}

.kou-business-hours-row:last-child {
    border-bottom: none;
}

.kou-business-dialog {
    max-width: 460px;
}

.kou-business-dialog-content {
    padding: 1.4rem 1.5rem 1.5rem;
    text-align: left;
}

.kou-business-dialog-meta .kou-menu-business-link {
    color: inherit;
}

/* Solid panel (desktop nav + mobile categories list) */
.kou-menu-panel {
    background-color: var(--kou-color-base, #ffffff);
    color: var(--kou-secondary, #111111);
    border: 1px solid color-mix(in srgb, var(--kou-secondary) 10%, transparent);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}

/* Search filter */
.kou-menu-search-input {
    border: none;
    outline: none;
    color: var(--kou-secondary, #111111);
}

.kou-menu-search-input::placeholder {
    color: var(--kou-secondary, #111111);
    opacity: 0.5;
}

.kou-menu-search-icon {
    position: absolute;
    left: 0.9rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.9rem;
    opacity: 0.5;
    pointer-events: none;
}

/* Dietary flag icons */
.kou-flag-spicy {
    color: #dc2626;
    font-size: 0.8em;
}

.kou-flag-vegetarian {
    color: #16a34a;
    font-size: 0.8em;
}

.kou-flag-vegan {
    color: #15803d;
    font-size: 0.8em;
}

/* Oval chips over the dialog image */
.kou-details-flag-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.65rem;
    border-radius: 999px;
    background-color: rgba(255, 255, 255, 0.92);
    color: #111111;
    font-weight: 600;
    line-height: 1.4;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

/* Checkout dialog buttons */
.kou-checkout-cancel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.65rem 1rem;
    border-radius: 6px;
    background: transparent;
    color: inherit;
    font-weight: 600;
    cursor: pointer;
}

.kou-checkout-cancel:hover {
    background-color: var(--kou-accent-soft);
}

/* Icon sizing */
.kou-menu-cart-fab i {
    font-size: 1.35rem;
}

.kou-menu-cart-remove i,
.kou-menu-map-close i,
.kou-menu-cart-close i {
    font-size: 0.9rem;
}

.kou-menu-cart-empty i {
    opacity: 0.6;
}

.kou-hidden {
    display: none !important;
}

/* Category map — active state */
.kou-menu-map-link.is-active {
    opacity: 1;
    background-color: var(--kou-accent);
    color: var(--kou-color-base, #ffffff);
    font-weight: 600;
}

/* Mobile map indicator: floating vertical widget emerging from the left edge */
.kou-menu-map-indicator {
    position: fixed;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 30;
    display: block;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    line-height: 1;
}

.kou-menu-map-indicator-pill {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.6rem 0.35rem;
    border: 1px solid color-mix(in srgb, var(--kou-secondary, #111111) 10%, transparent);
    border-left: none;
    border-radius: 0 6px 6px 0;
    background-color: var(--kou-color-base, #ffffff);
    color: var(--kou-secondary, #111111);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    line-height: 1;
}

.kou-menu-map-indicator-img {
    display: none;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    object-fit: cover;
}

.kou-menu-map-indicator-img:not(.kou-hidden) {
    display: block;
}

.kou-menu-map-indicator-icon {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    background-color: color-mix(in srgb, var(--kou-secondary, #111111) 6%, transparent);
    color: var(--kou-secondary, #111111);
    font-size: 0.85rem;
    line-height: 1;
    opacity: 0.7;
    vertical-align: middle;
}

.kou-menu-map-indicator-label {
    writing-mode: vertical-rl;
    max-height: 30vh;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.85rem;
    font-weight: 600;
}

/* Mobile categories side panel + backdrop */
.kou-menu-categories-backdrop {
    position: fixed;
    inset: 0;
    z-index: 65;
    background: rgba(0, 0, 0, 0.5);
}

.kou-menu-map-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: inherit;
    font-size: 1.2rem;
    cursor: pointer;
}

@media (max-width: 1023px) {
    .kou-menu-categories-mobile {
        display: none;
    }

    .kou-menu-categories-mobile.is-open {
        display: block;
        position: fixed;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        z-index: 70;
        max-width: 70vw;
        max-height: 70vh;
        overflow-y: auto;
        border-radius: 0 10px 10px 0;
    }
}

/* =============================================================================
   MOBILE CART: floating button + bottom sheet
   ============================================================================= */

.kou-menu-cart {
    background-color: var(--kou-color-base, #ffffff);
    color: var(--kou-secondary, #111111);
    border: 1px solid color-mix(in srgb, var(--kou-secondary) 10%, transparent);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}

.kou-menu-cart-fab {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 60;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border: none;
    border-radius: 50%;
    background-color: var(--kou-accent);
    color: var(--kou-color-base, #ffffff);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    cursor: pointer;
}

.kou-menu-cart-fab-count {
    position: absolute;
    top: -4px;
    right: -4px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 999px;
    background-color: #b91c1c;
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
}

.kou-menu-cart-backdrop {
    position: fixed;
    inset: 0;
    z-index: 65;
    background: rgba(0, 0, 0, 0.5);
}

.kou-menu-cart-close {
    position: absolute;
    top: 0.5rem;
    right: 0.75rem;
    display: none;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    font-size: 1.3rem;
    cursor: pointer;
}

/* Only visible on mobile where the cart opens as a sheet */
@media (max-width: 1023px) {
    .kou-menu-cart-close {
        display: inline-flex;
    }
}

@media (max-width: 1023px) {
    .kou-menu-cart {
        display: none;
    }

    .kou-menu-cart.kou-menu-cart-mobile-open {
        display: flex;
        flex-direction: column;
        position: fixed;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        z-index: 70;
        width: min(92vw, 420px);
        max-height: calc(100dvh - 1rem);
        overflow-y: auto;
        border-radius: 10px;
    }

    .kou-menu-cart.kou-menu-cart-mobile-open .kou-menu-cart-list {
        flex: 1;
        min-height: 0;
        max-height: none;
    }
}

/* Sticky category header (Tailwind supplies position/sticky/backdrop) */
.kou-sticky-header {
    background-color: color-mix(in srgb, var(--kou-color-base, #ffffff) 88%, transparent);
}

/* Category header background image */
.kou-category-background {
    position: absolute;
    inset: 0;
    z-index: -2;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.35;
}

.kou-category-header.has-background::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: color-mix(in srgb, var(--kou-color-base, #ffffff) 55%, transparent);
}

/* Category title decorative side rules */
.kou-menu-item-category-title::before,
.kou-menu-item-category-title::after {
    content: '';
    flex: 1;
    max-width: 3rem;
    height: 2px;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--kou-accent) 35%, transparent));
}

.kou-menu-item-category-title::after {
    transform: scaleX(-1);
}

/* Items grid — column counts via --kou-grid-cols */
.kou-menu-items-grid {
    grid-template-columns: repeat(var(--kou-grid-cols, 2), minmax(0, 1fr));
}

@media (max-width: 639px) {
    .kou-menu-items-grid {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 640px) and (max-width: 1023px) {
    .kou-menu-items-grid {
        grid-template-columns: repeat(min(var(--kou-grid-cols, 2), 2), minmax(0, 1fr));
    }
}

/* Card hover (theme-aware) */
@media (hover: hover) {
    .kou-card-hover:hover {
        transform: translateY(-2px);
        border-color: color-mix(in srgb, var(--kou-accent) 24%, transparent);
        background-color: color-mix(in srgb, var(--kou-accent) 6%, transparent);
        box-shadow: 0 10px 24px color-mix(in srgb, var(--kou-accent) 14%, transparent);
    }
}

.kou-menu-item-card:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* Classic menu dot leaders */
.kou-menu-item-title-dots {
    flex: 1;
    min-width: 1rem;
    border-bottom: 2px dotted color-mix(in srgb, var(--kou-accent) 30%, transparent);
    transform: translateY(-0.28em);
}

.kou-menu-item-variant-dots {
    flex: 1;
    min-width: 0.75rem;
    border-bottom: 1px dotted color-mix(in srgb, var(--kou-accent) 25%, transparent);
    transform: translateY(-0.25em);
}

/* Image zoom hint */
.kou-image-modal-trigger::after {
    content: '+';
    position: absolute;
    right: 4px;
    bottom: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    opacity: 0;
    transition: opacity 0.18s ease;
}

.kou-image-modal-trigger:hover::after {
    opacity: 1;
}

.kou-image-modal-trigger:hover .kou-menu-item-image {
    transform: scale(1.06);
}

/* Quantity buttons */
.kou-qty-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: transparent;
    color: inherit;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.kou-qty-btn:hover {
    background-color: var(--kou-accent-soft);
}

.kou-menu-cart-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: inherit;
    font-size: 1.1rem;
    cursor: pointer;
}

.kou-menu-cart-remove:hover {
    background-color: color-mix(in srgb, #b91c1c 10%, transparent);
}

.kou-accent-bg:hover,
.kou-details-add-btn:hover,
.kou-menu-checkout-btn:hover {
    opacity: 0.9;
}

/* Details dialog — pin the add-to-cart bar as a footer inside the dialog,
   so it never scrolls out of view on smartphones */
.kou-item-details-actions {
    position: sticky;
    bottom: 0;
    z-index: 5;
    margin: 1rem -1.5rem -1.5rem;
    padding: 1rem 1.5rem;
    background-color: var(--kou-color-base, #ffffff);
}

/* Hide the scrollbar (keep scrolling) on mobile dialog content */
@media (max-width: 640px) {

    .kou-item-details-dialog .kou-dialog-content,
    .kou-checkout-dialog .kou-dialog-content {
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .kou-item-details-dialog .kou-dialog-content::-webkit-scrollbar,
    .kou-checkout-dialog .kou-dialog-content::-webkit-scrollbar {
        display: none;
    }
}

/* Details dialog variants */
.kou-item-details-variant:hover {
    background-color: var(--kou-accent-soft);
}

.kou-item-details-variant.is-selected {
    border-color: var(--kou-accent);
    background-color: var(--kou-accent-soft);
    font-weight: 600;
}

/* Line clamp fallback for browsers without Tailwind support */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {

    .kou-menu-item-card,
    .kou-menu-item-image,
    .kou-image-modal-trigger::after,
    .kou-menu-map-link,
    .kou-qty-btn {
        transition: none;
    }

    .kou-card-hover:hover {
        transform: none;
    }
}