/* Shared modal polish for Focus and Photo grid */

body.menu-layout-focus #itemModal .modal-dialog,
body.menu-layout-grid #itemModal .modal-dialog,
body.menu-layout-wide #itemModal .modal-dialog,
body.menu-layout-focus #cartModal .modal-dialog,
body.menu-layout-grid #cartModal .modal-dialog,
body.menu-layout-wide #cartModal .modal-dialog,
body.menu-layout-focus #reviewModal .modal-dialog,
body.menu-layout-grid #reviewModal .modal-dialog ,
body.menu-layout-wide #reviewModal .modal-dialog {
    margin: 1.75rem auto;
    max-width: 560px;
    display: flex;
    align-items: center;
    min-height: calc(100% - 3.5rem);
}

body.menu-layout-focus #itemModal .modal-content,
body.menu-layout-grid #itemModal .modal-content,
body.menu-layout-wide #itemModal .modal-content,
body.menu-layout-focus #cartModal .modal-content,
body.menu-layout-grid #cartModal .modal-content,
body.menu-layout-wide #cartModal .modal-content,
body.menu-layout-focus #reviewModal .modal-content,
body.menu-layout-grid #reviewModal .modal-content ,
body.menu-layout-wide #reviewModal .modal-content {
    border-radius: 18px;
    max-height: min(88vh, 900px);
    overflow: auto;
    width: 100%;
    margin: 0 auto;
    animation: menuSheetIn 200ms ease;
}

@media (max-width: 767.98px) {
    body.menu-layout-focus #itemModal .modal-dialog,
    body.menu-layout-grid #itemModal .modal-dialog,
    body.menu-layout-wide #itemModal .modal-dialog,
    body.menu-layout-focus #cartModal .modal-dialog,
    body.menu-layout-grid #cartModal .modal-dialog,
    body.menu-layout-wide #cartModal .modal-dialog,
    body.menu-layout-focus #reviewModal .modal-dialog,
    body.menu-layout-grid #reviewModal .modal-dialog ,
    body.menu-layout-wide #reviewModal .modal-dialog {
        margin: 0.75rem auto;
        max-width: calc(100% - 1.5rem);
        min-height: calc(100% - 1.5rem);
        align-items: center;
    }

    body.menu-layout-focus #itemModal .modal-content,
    body.menu-layout-grid #itemModal .modal-content,
    body.menu-layout-wide #itemModal .modal-content,
    body.menu-layout-focus #cartModal .modal-content,
    body.menu-layout-grid #cartModal .modal-content,
    body.menu-layout-wide #cartModal .modal-content,
    body.menu-layout-focus #reviewModal .modal-content,
    body.menu-layout-grid #reviewModal .modal-content ,
    body.menu-layout-wide #reviewModal .modal-content {
        border-radius: 18px;
        max-height: 85vh;
    }
}

@keyframes menuSheetIn {
    from { transform: translateY(12px); opacity: 0.6; }
    to { transform: translateY(0); opacity: 1; }
}

body.menu-layout-focus #itemModal .item-modal-content,
body.menu-layout-grid #itemModal .item-modal-content ,
body.menu-layout-wide #itemModal .item-modal-content {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

body.menu-layout-focus #itemModal .modal-image,
body.menu-layout-grid #itemModal .modal-image ,
body.menu-layout-wide #itemModal .modal-image {
    width: 100%;
    max-height: 42vh;
    object-fit: cover;
    border-radius: 16px;
}

body.menu-layout-focus #itemModal .modal-name,
body.menu-layout-grid #itemModal .modal-name ,
body.menu-layout-wide #itemModal .modal-name {
    font-size: 1.35rem;
}

body.menu-layout-focus #itemModal .modal-price-single,
body.menu-layout-grid #itemModal .modal-price-single ,
body.menu-layout-wide #itemModal .modal-price-single {
    color: var(--primary);
    background: transparent;
    font-size: 1.45rem;
    font-weight: 700;
    text-align: center;
    margin: 4px 0 8px;
}

body.menu-layout-focus #itemModal .modal-price-size,
body.menu-layout-grid #itemModal .modal-price-size ,
body.menu-layout-wide #itemModal .modal-price-size {
    color: var(--muted, #64748b);
}

body.menu-layout-focus #itemModal .modal-description,
body.menu-layout-grid #itemModal .modal-description ,
body.menu-layout-wide #itemModal .modal-description {
    color: var(--muted, #64748b);
    font-size: 0.92rem;
    line-height: 1.45;
}

body.menu-layout-focus #itemModal .modal-order-btn,
body.menu-layout-grid #itemModal .modal-order-btn,
body.menu-layout-wide #itemModal .modal-order-btn,
body.menu-layout-focus #cartModal .checkout-btn,
body.menu-layout-grid #cartModal .checkout-btn ,
body.menu-layout-wide #cartModal .checkout-btn {
    position: sticky;
    bottom: 0;
    min-height: 48px;
    border-radius: 14px;
    font-weight: 700;
}

body.menu-layout-focus #itemModal .qty-btn,
body.menu-layout-grid #itemModal .qty-btn,
body.menu-layout-wide #itemModal .qty-btn,
body.menu-layout-focus #cartModal .qty-btn,
body.menu-layout-grid #cartModal .qty-btn ,
body.menu-layout-wide #cartModal .qty-btn {
    min-width: 44px;
    min-height: 44px;
}

body.menu-layout-focus #cartModal .cart-item,
body.menu-layout-grid #cartModal .cart-item ,
body.menu-layout-wide #cartModal .cart-item {
    border-radius: 14px;
    padding: 10px;
    background: var(--surface, var(--light, #f8f8f8));
    margin-bottom: 10px;
}

body.menu-layout-focus #reviewModal .star-rating i,
body.menu-layout-grid #reviewModal .star-rating i,
body.menu-layout-wide #reviewModal .star-rating i,
body.menu-layout-focus #reviewModal .stars i,
body.menu-layout-grid #reviewModal .stars i ,
body.menu-layout-wide #reviewModal .stars i {
    color: var(--highlight, #A6843D);
    font-size: 1.55rem;
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

body.menu-layout-focus #reviewModal .nav-tabs .nav-link,
body.menu-layout-grid #reviewModal .nav-tabs .nav-link ,
body.menu-layout-wide #reviewModal .nav-tabs .nav-link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    font-weight: 600;
}

body.menu-layout-focus .cart-count,
body.menu-layout-grid .cart-count ,
body.menu-layout-wide .cart-count {
    transition: transform 180ms ease;
}

body.menu-layout-focus .cart-count.bump,
body.menu-layout-grid .cart-count.bump ,
body.menu-layout-wide .cart-count.bump {
    transform: scale(1.25);
}

body.menu-layout-focus #itemModal .modal-image-container:has(img[data-full$=".png" i]) {
    background:
        radial-gradient(circle at 50% 42%, #fff 0%, color-mix(in srgb, var(--brand) 20%, #e7f0e4) 100%);
}

body.menu-layout-grid #itemModal .modal-image-container:has(img[data-full$=".png" i]) ,
body.menu-layout-wide #itemModal .modal-image-container:has(img[data-full$=".png" i]) {
    background:
        radial-gradient(85% 62% at 50% 30%, #fff 0%, color-mix(in srgb, var(--highlight) 22%, #eef2ea) 100%);
}

body.menu-layout-focus #itemModal .modal-image[data-full$=".png" i],
body.menu-layout-grid #itemModal .modal-image[data-full$=".png" i] ,
body.menu-layout-wide #itemModal .modal-image[data-full$=".png" i] {
    object-fit: contain;
    padding: 16px;
    background: transparent;
}

@media (prefers-reduced-motion: reduce) {
    body.menu-layout-focus #itemModal .modal-content,
    body.menu-layout-grid #itemModal .modal-content,
    body.menu-layout-wide #itemModal .modal-content,
    body.menu-layout-focus #cartModal .modal-content,
    body.menu-layout-grid #cartModal .modal-content,
    body.menu-layout-wide #cartModal .modal-content,
    body.menu-layout-focus #reviewModal .modal-content,
    body.menu-layout-grid #reviewModal .modal-content ,
    body.menu-layout-wide #reviewModal .modal-content {
        animation: none;
    }
}

/* Full-width and Focus: the detail photo spans the popup. */
body.menu-layout-wide #itemModal .modal-image,
body.menu-layout-focus #itemModal .modal-image,
body.menu-layout-wide #itemModal .modal-image[data-full$=".png" i],
body.menu-layout-focus #itemModal .modal-image[data-full$=".png" i] {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    max-height: none;
    margin: 0;
    padding: 0;
    object-fit: cover;
    border-radius: 0;
    background: transparent;
}