/**
 * Boka Fullscreen Menu CSS
 * Slides in from the right with ad space on left and card-based content on right
 */

/* Boka Menu Overlay */
.boka-fullscreen-menu-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 999999 !important; /* Lowered from 2147483647 so widget overlay can be on top */
    display: none; 
    opacity: 0;
    transition: opacity 0.4s ease-in-out;
    font-family: 'futura-pt', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    overflow: hidden !important;
    will-change: transform;
    overscroll-behavior: contain;
    /* Initial state for slide animation - start off-screen to the right */
    transform: translateX(100%);
}

.boka-fullscreen-menu-overlay.open {
    display: flex; 
    opacity: 1;
    align-items: flex-start; 
    justify-content: flex-start;
    /* Slide in from right animation */
    transform: translateX(0);
    transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.4s ease-in-out;
}

/* Ensure smooth slide-out when closing */
.boka-fullscreen-menu-overlay.closing {
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.55, 0.085, 0.68, 0.53), opacity 0.3s ease-in-out;
}

/* Left side ad space - made smaller */
.boka-menu-left-content {
    position: relative;
    width: 30%; /* Reduced from 40% */
    height: 100vh;
    background-image: url('../../images/boka/pamsbg.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px; /* Reduced padding */
    box-sizing: border-box;
}

.ad-space-container {
    width: 100%;
    max-width: 350px; /* Reduced from 400px */
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 25px; /* Reduced gap */
}

.ad-logo-container {
    width: 100%;
    max-width: 320px; /* Increased from 250px to make logo bigger */
    border-radius: 12px;
    overflow: hidden;
}

.ad-logo {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

.ad-content {
    text-align: center;
}

.ad-title {
    font-size: 24px; /* Reduced from 28px */
    font-weight: 700;
    color: #36010d; /* Updated to match button color */
    margin: 0 0 12px 0;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.ad-description {
    font-size: 14px; /* Reduced from 16px */
    color: var(--cfm-menu-text-color, #000000);
    line-height: 1.5;
    margin: 0;
}

.ad-button-container {
    width: 100%;
}

.ad-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background-color: #f6f394; /* Changed from #36010d to requested color */
    color: #36010d; /* Changed to dark text for better contrast on light background */
    text-decoration: none;
    padding: 10px 20px; /* Reduced from 12px 24px to make button smaller */
    border-radius: 6px;
    font-weight: 700; /* Made bold to match card buttons */
    font-size: 12px; /* Reduced from 13px to make button smaller */
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    border: 2px solid #f6f394; /* Updated border color */
}

.ad-button:hover {
    background-color: #f0ed82; /* Slightly darker yellow on hover */
    color: #36010d; /* Keep dark text */
    border-color: #f0ed82;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(246, 243, 148, 0.4);
}

.ad-button .btn-arrow {
    font-size: 14px;
    transition: transform 0.3s ease;
}

.ad-button:hover .btn-arrow {
    transform: translateX(3px);
}

/* Right side card-based content */
.boka-menu-right-content {
    position: relative;
    width: 70%; /* Increased from 60% */
    height: 100vh;
    background-color: #ffffff;
    overflow-y: auto;
    overflow-x: hidden;
    box-sizing: border-box;
}

/* Custom scrollbar */
.boka-menu-right-content::-webkit-scrollbar {
    width: 8px;
}

.boka-menu-right-content::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.boka-menu-right-content::-webkit-scrollbar-thumb {
    background: #36010d; /* Updated to match new color scheme */
    border-radius: 4px;
}

.boka-menu-right-content::-webkit-scrollbar-thumb:hover {
    background: #4a1a1a; /* Updated hover color */
}

/* Header with close button */
.boka-menu-header {
    position: sticky;
    top: 0;
    background-color: #ffffff;
    padding: 22px 30px; /* Adjusted for symmetrical vertical padding */
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 20;
    border-bottom: 1px solid var(--cfm-menu-border-color, #e0e0e0);
}

/* Header title - much larger */
.boka-menu-title {
    font-size: 28px;
    font-weight: 700;
    color: #36010d;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin: 0; /* Reset margin */
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    /* Removed line-height, display:flex, align-items from here to rely on parent */
}

/* Back button for restaurant view */
.boka-menu-back-container {
    display: flex;
    align-items: center;
    gap: 20px; /* Increased from 12px to 20px for more space */
    flex: 1;
    margin-right: 20px;
    margin-left: 20px; /* Added margin to move TILLBAKA more left */
}

.boka-menu-back-button {
    background-color: transparent;
    border: 2px solid #36010d;
    width: 40px;
    height: 40px;
    border-radius: 0;
    transform: rotate(45deg);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    position: relative;
    flex-shrink: 0;
}

.boka-menu-back-button:hover {
    background-color: #36010d;
    transform: rotate(45deg) scale(1.05);
}

.boka-menu-back-button .back-arrow {
    position: relative;
    width: 16px;
    height: 16px;
    transform: rotate(-45deg);
}

.boka-menu-back-button .back-arrow::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 20%;
    width: 12px;
    height: 2px;
    background-color: #36010d;
    transform: translateY(-50%);
    transition: background-color 0.3s ease;
}

.boka-menu-back-button .back-arrow::after {
    content: '';
    position: absolute;
    top: 50%; /* Changed from 30% to 50% to align with the line */
    left: 20%;
    width: 8px;
    height: 8px;
    border-left: 2px solid #36010d;
    border-bottom: 2px solid #36010d;
    transform: translateY(-50%) rotate(45deg); /* Added translateY(-50%) for proper centering */
    transition: border-color 0.3s ease;
}

.boka-menu-back-button:hover .back-arrow::before {
    background-color: #ffffff;
}

.boka-menu-back-button:hover .back-arrow::after {
    border-color: #ffffff;
}

.boka-menu-back-text {
    font-size: 24px;
    font-weight: 700;
    color: #36010d;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    margin: 0;
    margin-top: 2.5px;
    cursor: pointer; /* Keep text clickable */
    user-select: none; /* Prevent text selection */
}

.boka-menu-close-button {
    background-color: transparent;
    border: 2px solid var(--cfm-menu-close-button-border, #36010d);
    width: 47.5px; /* Reduced by 5% from 50px */
    height: 47.5px; /* Reduced by 5% from 50px */
    border-radius: 0; /* Removed border-radius for square shape */
    transform: rotate(45deg); /* Rotate the square */
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    position: relative;
    flex-shrink: 0; /* Prevent button from shrinking */
}

.boka-menu-close-button:hover {
    background-color: var(--cfm-menu-close-button-border, #36010d);
    transform: rotate(45deg) scale(1.05); /* Maintain rotation on hover */
}

.boka-menu-close-button:hover .close-icon-x::before,
.boka-menu-close-button:hover .close-icon-x::after {
    background-color: #ffffff;
}

.boka-menu-close-button .close-icon-x {
    position: relative;
    width: 19px; /* Reduced proportionally */
    height: 19px; /* Reduced proportionally */
    transform: rotate(-45deg); /* Counter-rotate the X to keep it straight */
}

.boka-menu-close-button .close-icon-x::before,
.boka-menu-close-button .close-icon-x::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 19px; /* Reduced proportionally */
    height: 2px;
    background-color: var(--cfm-menu-close-button-x, #36010d);
    transition: background-color 0.3s ease;
}

.boka-menu-close-button .close-icon-x::before { 
    transform: translate(-50%, -50%) rotate(45deg);
}

.boka-menu-close-button .close-icon-x::after { 
    transform: translate(-50%, -50%) rotate(-45deg);
}

/* Card content */
.boka-menu-content {
    padding: 40px; /* Increased padding for larger cards */
}

/* Cards Grid Layout - 2 columns for desktop */
.boka-cards-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Back to 2 columns for desktop */
    gap: 40px; /* Increased gap for larger cards */
    max-width: 100%;
}

/* Individual Card - Larger size for better visibility */
.boka-card {
    background-color: #ffffff;
    border-radius: 0; /* Removed rounded corners */
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 420px; /* Increased height for larger cards */
    border: 1px solid var(--cfm-menu-border-color, #e0e0e0);
    /* Removed box-shadow and hover animations */
}

/* Promotional card - hidden on desktop, only visible on mobile/tablet */
.boka-card.mobile-only-card {
    display: none; /* Hidden by default on desktop */
}

/* Show promotional card only on tablet and mobile (when left side is hidden) */
@media (max-width: 1024px) {
    .boka-card.mobile-only-card {
        display: flex; /* Show on tablet and mobile */
    }
    
    /* Make sure promotional card has proper styling for mobile layout */
    .boka-card.mobile-only-card .card-bottom {
        justify-content: center; /* Center the button */
        align-items: center; /* Center the button */
        padding: 12px 20px; /* Reduced top/bottom padding, L/R 20px */
        gap: 0; /* Remove gap since we'll use margin */
        height: auto; /* Allow height to adjust */
        min-height: auto; /* Remove minimum height restriction */
        display: flex; /* Ensure flex display */
        flex-direction: column; /* Stack vertically */
    }
    
    .boka-card.mobile-only-card .card-button {
        width: 100%; /* Full width button */
        margin: 0; /* Remove all margins */
    }
    
    /* Special styling for promotional card button */
    .boka-card.mobile-only-card .boka-paket-btn {
        background-color: #f6f394 !important;
        color: #36010d !important;
        border: 2px solid #f6f394 !important;
        padding: 12px 20px;
        font-size: 12px;
        min-width: 100%;
        width: 100%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        transition: all 0.3s ease;
    }
    
    .boka-card.mobile-only-card .boka-paket-btn:hover {
        background-color: #f0ed82 !important;
        color: #36010d !important;
        border-color: #f0ed82 !important;
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(246, 243, 148, 0.4);
    }
    
    /* Arrow styling for promotional card button */
    .boka-card.mobile-only-card .boka-paket-btn .btn-arrow {
        font-size: 14px;
        transition: transform 0.3s ease;
    }
    
    .boka-card.mobile-only-card .boka-paket-btn:hover .btn-arrow {
        transform: translateX(3px);
    }
    
    /* Adjust promotional card height and image size */
    .boka-card.mobile-only-card {
        height: auto; /* Allow card to shrink to content */
    }
    
    .boka-card.mobile-only-card .promo-image-container {
        height: 120px; /* Keep image area height */
        background-image: url('../../images/boka/sommarbanner.webp');
        background-size: cover;
        background-position: center;
        position: relative; /* For positioning the overlay */
        display: flex; /* To help center content if needed, or just for consistency */
        align-items: center;
        justify-content: center;
    }

    .boka-card.mobile-only-card .card-image-top {
        /* This rule might need to be removed or adjusted if promo-image-container replaces its direct styling */
        /* For now, we assume .promo-image-container is a new class on .card-image-top */
        /* If .card-image-top is now .promo-image-container, we can remove the specific .card-image-top selector for the promo card */
        /* Let's assume for now we added promo-image-container alongside card-image-top, so this specific rule for .card-image-top might be redundant or overridden */
         height: 120px; /* Ensure this is still targeted if .card-image-top is the main selector */
    }

    .boka-card.mobile-only-card .promo-logo-overlay {
        position: absolute; /* Position over the background */
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        max-width: 100px; /* Adjust size as needed */
        max-height: 60px; /* Adjust size as needed */
        width: auto;
        height: auto;
        object-fit: contain; /* Maintain aspect ratio */
    }

    .boka-card {
        height: 415px; /* Was 420px */
    }

    .card-bottom {
        padding: 20px;
        flex-direction: column; /* Stack content vertically like mobile */
        align-items: stretch; /* Full width for button */
        gap: 10px; /* Was 15px - Space between text and button */
    }
}

/* Card Image - Taller top section for larger cards */
.card-image-top {
    width: 100%;
    height: 300px; /* Increased from 240px for larger cards */
    overflow: hidden;
    flex-shrink: 0;
}

.card-image-top img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Removed hover scale animation */
}

/* Card Bottom Section - Text and Button */
.card-bottom {
    height: 120px; /* Increased bottom section height */
    padding: 25px; /* Increased padding */
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    background-color: #ffffff;
    box-sizing: border-box;
}

/* Card Text Section - Left side */
.card-text {
    flex: 1;
    padding-right: 20px; /* Increased padding */
}

.card-title {
    font-size: 18px; /* Increased font size for larger cards */
    font-weight: 700;
    color: #2d2d2d; /* Dark color like in image */
    margin: 0 0 8px 0; /* Increased margin */
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.2;
}

.card-subtitle {
    font-size: 14px; /* Increased font size for larger cards */
    color: #888888; /* Gray color like in image */
    line-height: 1.3;
    margin: 0;
    font-weight: 400;
}

/* Card Button - Right side with new colors */
.card-button {
    flex-shrink: 0;
    display: flex;
    align-items: flex-start;
}

.boka-paket-btn,
.restaurant-booking-btn {
    background-color: #36010d; /* New background color */
    color: #dbc58c; /* New text color */
    text-decoration: none;
    padding: 14px 20px; /* Increased padding for larger cards */
    border-radius: 6px;
    font-weight: 700; /* Made bold */
    font-size: 12px; /* Slightly increased font size */
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    border: none; /* Remove any border */
    white-space: nowrap;
    min-width: 110px; /* Increased min-width */
    text-align: center;
    cursor: pointer; /* Added cursor pointer for buttons */
    font-family: 'futura-pt', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    display: inline-flex; /* Use flex for consistent alignment */
    align-items: center; /* Center content vertically */
    justify-content: center; /* Center content horizontally */
    box-sizing: border-box; /* Ensure consistent box model */
    min-height: 48px; /* Set consistent minimum height */
    height: 48px; /* Set fixed height for consistency */
    line-height: 1; /* Consistent line height */
    margin: 0; /* Remove any default margins */
    outline: none; /* Remove focus outline, we'll handle with focus-visible */
}

.boka-paket-btn:hover,
.restaurant-booking-btn:hover {
    background-color: #4a1a1a; /* Slightly lighter on hover */
    color: #e6c547; /* Slightly brighter text on hover */
    /* Removed transform and shadow animations */
}

/* Shortcode button styling - appears on the right */
.boka-shortcode-container {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin: 20px 0;
    width: 100%;
}

/* Desktop text button - default */
.boka-shortcode-button.boka-desktop-btn {
    background-color: #36010d;
    color: #dbc58c;
    text-decoration: none;
    padding: 14px 20px;
    border-radius: 6px;
    font-weight: 700;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    border: none;
    white-space: nowrap;
    min-width: 110px;
    text-align: center;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'futura-pt', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    
    /* Clean drop shadow for visibility against backgrounds */
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.4)) 
            drop-shadow(0 2px 6px rgba(0, 0, 0, 0.2));
}

.boka-shortcode-button.boka-desktop-btn:hover {
    background-color: #4a1a1a;
    color: #e6c547;
    text-decoration: none;
}

/* Mobile image button - hidden by default */
.boka-mobile-btn {
    display: none;
    cursor: pointer;
    /* Match trigger button styling from main menu */
    
    /* Clean drop shadow for visibility against backgrounds */
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.4)) 
            drop-shadow(0 2px 6px rgba(0, 0, 0, 0.2));
}

.boka-mobile-btn img {
    width: 60px;
    height: 60px;
    display: block;
}

.boka-mobile-btn:hover {
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

/* Show mobile button and hide desktop button on tablet and mobile */
@media (max-width: 1024px) {
    .boka-shortcode-button.boka-desktop-btn {
        display: none;
    }
    
    .boka-mobile-btn {
        display: inline-block;
    }
}

/* Restaurant booking view - hidden by default */
.boka-restaurant-view {
    display: none;
    padding: 0; /* Removed padding to allow sticky positioning */
    height: 100%;
    overflow-y: auto;
}

.boka-restaurant-view.active {
    display: block;
}

/* When parent overflow is disabled, constrain restaurant view height properly */
.boka-menu-right-content.restaurant-mode .boka-restaurant-view.active {
    height: calc(100vh - 86px); /* Subtract header height (padding + content + border) */
    position: absolute;
    top: 86px; /* Position below header */
    left: 0;
    right: 0;
}

/* Filter tabs - sticky and left-aligned */
.restaurant-filter-tabs {
    position: sticky;
    top: 0;
    background-color: #ffffff;
    z-index: 10;
    display: flex;
    justify-content: flex-start; /* Changed from center to flex-start for left alignment */
    gap: 0;
    margin-bottom: 0; /* Removed bottom margin since it's sticky */
    border-bottom: 2px solid #e0e0e0;
    padding: 10px 40px 0 40px; /* Reduced top padding from 20px to 10px */
    overflow-x: auto; /* Allow horizontal scroll on small screens */
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    scrollbar-width: none; /* Hide scrollbar on Firefox */
    -ms-overflow-style: none; /* Hide scrollbar on IE/Edge */
}

/* Hide scrollbar on webkit browsers */
.restaurant-filter-tabs::-webkit-scrollbar {
    display: none;
}

.filter-tab {
    background: none;
    border: none;
    padding: 15px 25px;
    font-size: 14px;
    font-weight: 600;
    color: #888888;
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s ease;
    border-bottom: 3px solid transparent;
    font-family: 'futura-pt', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    white-space: nowrap;
    flex-shrink: 0; /* Prevent tabs from shrinking */
}

.filter-tab:hover {
    color: #2d2d2d;
}

.filter-tab.active {
    color: #2d2d2d;
    border-bottom-color: #2d2d2d;
}

/* Restaurant cards container */
.restaurant-cards-container {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    max-width: 100%;
    padding: 30px 40px 40px 40px; /* Reduced top padding from 40px to 30px */
}

/* Add extra bottom padding on mobile devices to account for browser navigation bar */
@media (max-width: 768px) {
    .restaurant-cards-container {
        padding-bottom: 80px; /* Extra space to ensure last items are visible above mobile browser bar */
    }
}

/* Individual restaurant card */
.restaurant-card {
    display: flex;
    background: white;
    border-radius: 0; /* Removed rounded corners */
    overflow: hidden;
    min-height: 350px; /* Changed from fixed height to min-height */
    height: auto; /* Allow card to grow as needed */
    transition: none; /* Removed transition */
}

.restaurant-card:hover {
    /* Removed all hover effects */
}

.restaurant-image {
    position: relative;
    width: 45%;
    overflow: hidden;
}

.restaurant-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0; /* Removed rounded corners from images */
}

.restaurant-content {
    flex: 1;
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.restaurant-title {
    font-size: 28px; /* Increased from 24px to 28px */
    font-weight: 700;
    color: #2d2d2d;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin: 0 0 20px 0;
    line-height: 1.2;
    font-family: 'futura-pt', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.restaurant-description {
    font-size: 14px;
    color: #666666;
    line-height: 1.6;
    margin: 0 0 30px 0;
    flex: 0 1 auto; /* Changed from flex: 1 to prevent excessive expansion */
    font-family: 'futura-pt', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* Restaurant hours section */
.restaurant-hours {
    margin: 0 0 20px 0;
    padding: 15px 0;
    border-top: 1px solid #e5e5e5;
    font-family: 'futura-pt', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    flex: 0 0 auto; /* Ensure hours section doesn't expand */
}

.restaurant-hours p {
    margin: 0 0 10px 0;
    font-size: 13px;
    line-height: 1.5;
    color: #444444;
}

.restaurant-hours p:last-child {
    margin-bottom: 0;
}

.restaurant-hours strong {
    color: #2d2d2d;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 12px;
}

/* Restaurant buttons */
.restaurant-buttons {
    display: flex;
    gap: 15px;
    margin-top: auto;
    flex: 0 0 auto; /* Ensure buttons stay at bottom but don't expand */
}

.restaurant-btn-secondary {
    flex: 1; /* Ensure both buttons are same width */
    padding: 14px 20px; /* Match restaurant-btn-primary padding */
    background-color: transparent;
    color: #36010d;
    border: 2px solid #36010d;
    font-weight: 700;
    font-size: 12px; /* Match restaurant-btn-primary font size */
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: 'futura-pt', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    white-space: nowrap;
    min-width: 110px;
    text-align: center;
    text-decoration: none;
    border-radius: 6px;
    min-height: 48px; /* Match primary button height */
    height: 48px; /* Fixed height for consistency */
    box-sizing: border-box;
    display: flex; /* Use flex for better alignment */
    align-items: center; /* Center content vertically */
    justify-content: center; /* Center content horizontally */
    line-height: 1; /* Set line height to 1 for precise centering */
}

.restaurant-btn-secondary:hover {
    background-color: #f5f5f5; /* Light gray background on hover */
    color: #000000; /* Keep text black on hover */
}

.restaurant-btn-primary {
    flex: 1; /* Ensure both buttons are same width */
    padding: 14px 20px; /* Match boka-paket-btn padding exactly */
    background-color: #36010d;
    color: #dbc58c;
    border: none;
    font-weight: 700;
    font-size: 12px; /* Match boka-paket-btn font size exactly */
    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: 'futura-pt', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    white-space: nowrap;
    min-width: 110px;
    text-align: center; /* Use text-align center like boka-paket-btn */
    text-decoration: none; /* Remove underline for anchor tags */
    border-radius: 6px; /* Add border radius to match */
    min-height: 48px; /* Ensure consistent height */
    height: 48px; /* Fixed height for consistency */
    box-sizing: border-box; /* Ensure padding is included in height calculation */
    display: flex; /* Use flex for better alignment */
    align-items: center; /* Center content vertically */
    justify-content: center; /* Center content horizontally */
    line-height: 1; /* Set line height to 1 for precise centering */
}

.restaurant-btn-primary:hover {
    background-color: #4a1a1a;
}

/* Hide cards that don't match filter */
.restaurant-card.hidden {
    display: none;
}

/* Hide main cards when restaurant view is active */
.boka-menu-content.restaurant-mode {
    display: none;
}

/* Disable parent overflow when restaurant view is active to prevent double scrollbars */
.boka-menu-right-content.restaurant-mode {
    overflow: hidden;
}

/* Ensure close button on main menu is above backdrop if somehow it remains clickable, though it shouldn't */
.boka-menu-header .boka-menu-close-button {
    z-index: 2147483647 !important; /* Same as widget overlay to stay accessible */
    position: relative; /* Needed for z-index to apply if not already positioned */
}

/* Styles for the Table Reservation Widget Overlay */
.boka-widget-overlay {
    display: none; /* Hidden by default */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.75); /* Semi-transparent backdrop */
    z-index: 2147483647 !important; /* Maximum z-index to be above everything including the main menu */
    padding: 20px; /* Some padding so the widget content doesn't touch edges */
    overflow-y: auto; /* Allow scrolling if widget content is too tall */

    /* Flexbox for centering the widget content if it doesn't fill the overlay */
    align-items: center;
    justify-content: center;
}

.boka-widget-overlay.active {
    display: flex; /* Show when active, using flex for centering */
}

/* You might need to style the actual widget_container IF the third-party widget does not style itself adequately */
/* For example, if the widget injected by table_reservation_widget is smaller than the overlay: */
/* #widgetContainer > * { 
    background-color: #fff; 
    padding: 20px; 
    border-radius: 8px; 
    max-width: 90%; 
    max-height: 90%; 
    overflow-y: auto;
}
*/

/* Main layout responsive rules */
/* The following media queries were duplicates and have been removed. */

/* Media queries - updated breakpoints */
@media (max-width: 1200px) {
    .boka-menu-right-content {
        width: 100%;
    }

    .boka-menu-title {
        margin-bottom: 0; /* Reset margin-bottom */
        /* Removed margin-top, relying on parent for centering */
    }

    .boka-menu-header {
        padding: 20px 30px; /* Adjusted for symmetrical vertical padding */
    }

    .boka-cards-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }

    .boka-card {
        height: 380px;
    }

    .card-image-top {
        height: 240px;
    }

    .card-bottom {
        padding: 20px;
    }

    .card-title {
        font-size: 16px;
    }

    .card-subtitle {
        font-size: 12px;
    }

    .boka-paket-btn {
        padding: 10px 20px;
        font-size: 12px;
    }
}

@media (max-width: 1024px) {
    .boka-menu-left-content {
        display: none; /* Hide left side on tablets */
    }
    
    .boka-menu-right-content {
        width: 100%; /* Full width when left side is hidden */
    }
    
    .boka-menu-title {
        font-size: 24px; /* Slightly smaller on tablets */
        letter-spacing: 1.2px;
    }
    
    .boka-cards-grid {
        grid-template-columns: 1fr; /* Single column for tablets and below */
        gap: 30px;
    }
    
    .boka-card {
        height: 415px; /* Was 420px */
    }
    
    .card-image-top {
        height: 240px;
    }
    
    .card-bottom {
        padding: 20px;
        flex-direction: column; /* Stack content vertically like mobile */
        align-items: stretch; /* Full width for button */
        gap: 15px; /* Space between text and button */
    }
    
    .card-text {
        padding-right: 0; /* Remove right padding since no button on right */
    }
    
    .card-button {
        align-self: stretch; /* Full width button */
    }
    
    .card-title {
        font-size: 16px;
    }
    
    .card-subtitle {
        font-size: 12px;
    }
    
    .boka-paket-btn {
        padding: 12px 20px;
        font-size: 12px;
        min-width: 100%;
        width: 100%; /* Full width button */
    }
}

/* Add new breakpoint for medium screens */
@media (max-width: 1100px) {
    .restaurant-card {
        min-height: 380px; /* More height needed as content wraps */
    }
    
    .restaurant-content {
        padding: 20px;
    }
}

/* Add new breakpoint for smaller screens before going vertical */
@media (max-width: 900px) {
    .restaurant-card {
        min-height: 420px; /* Even more height as text wraps more */
    }
    
    .restaurant-image {
        width: 35%; /* Give more space to content */
    }
    
    .restaurant-content {
        padding: 18px;
    }
    
    .restaurant-title {
        font-size: 20px; /* Increased from 16px to 20px */
    }
    
    .restaurant-description {
        font-size: 13px;
    }
}

@media (max-width: 1024px) {
    .boka-restaurant-view {
        padding: 0;
    }
    
    .restaurant-filter-tabs {
        padding: 10px 20px 0 20px; /* Reduced top padding */
        gap: 0;
        justify-content: flex-start; /* Changed to flex-start for left alignment on tablet */
        flex-wrap: nowrap; /* Remove wrapping on tablet */
        overflow-x: auto; /* Enable horizontal scroll on tablet */
    }

    .filter-tab {
        padding: 12px 20px;
        font-size: 13px;
        margin-bottom: 0; /* Remove bottom margin */
        min-width: fit-content; /* Ensure minimum width */
    }

    /* Change to vertical card layout on tablet */
    .restaurant-card {
        flex-direction: column;
        height: auto;
        min-height: 400px;
    }

    .restaurant-image {
        width: 100%;
        height: 250px;
    }

    .restaurant-content {
        padding: 25px;
    }
    
    .restaurant-cards-container {
        padding: 20px; /* Reduced padding */
        gap: 30px;
    }
}

@media (max-width: 768px) {
    .boka-restaurant-view {
        padding: 0;
    }

    .restaurant-filter-tabs {
        padding: 15px 20px 20px 20px; /* Adjusted padding for mobile */
        gap: 0;
        justify-content: flex-start; /* Start from left for mobile */
        flex-wrap: nowrap; /* No wrapping - horizontal scroll only */
        overflow-x: auto; /* Enable horizontal scroll */
        scroll-behavior: smooth; /* Smooth scrolling */
        -webkit-overflow-scrolling: touch; /* iOS smooth scrolling */
    }

    .filter-tab {
        padding: 10px 15px;
        font-size: 12px;
        margin-bottom: 0; /* Remove bottom margin */
        margin-right: 8px; /* Add right margin for spacing */
        min-width: fit-content; /* Ensure tabs don't shrink */
        flex-shrink: 0; /* Prevent shrinking */
    }

    .filter-tab:last-child {
        margin-right: 0; /* Remove margin from last tab */
    }

    .restaurant-cards-container {
        padding: 15px; /* Reduced padding */
        padding-bottom: 120px; /* Extra bottom padding for iPhone address bar clearance */
        gap: 25px;
    }

    /* Vertical card layout on mobile */
    .restaurant-card {
        flex-direction: column;
        height: auto;
        min-height: 400px;
    }

    .restaurant-image {
        width: 100%;
        height: 230px;
    }

    .restaurant-content {
        padding: 20px;
    }

    .restaurant-title {
        font-size: 20px;
    }

    .restaurant-description {
        font-size: 14px;
        line-height: 1.5;
    }

    .restaurant-buttons {
        gap: 10px;
        flex-direction: column;
    }

    .restaurant-btn-secondary,
    .restaurant-btn-primary {
        width: 100%;
        padding: 12px;
        font-size: 14px;
    }

    .boka-cards-grid {
        grid-template-columns: 1fr; /* Single column on mobile */
        gap: 25px;
    }
    
    .boka-card { /* General card styling for 768px breakpoint */
        height: 395px; /* Was 400px */
    }
    
    .card-image-top {
        height: 230px;
    }
    
    .card-bottom { /* General card-bottom styling for 768px breakpoint */
        height: 165px; /* Was 170px */
        padding: 20px;
        flex-direction: column; /* Stack content vertically */
        align-items: stretch; /* Full width for button */
        gap: 10px; /* Was 15px - Space between text and button */
    }
}

/* Additional mobile-specific bottom padding for various iPhone sizes */
@media (max-width: 480px) {
    .restaurant-cards-container {
        padding-bottom: 100px; /* Even more bottom padding for smaller iPhones */
    }
    
    /* Other existing styles... */
}

@media (max-width: 480px) {
    .boka-menu-header {
        padding: 12px 15px 17px 15px; /* Tighter padding for small screens */
    }
    
    .boka-menu-title {
        font-size: 16px; /* Much smaller on small phones */
        letter-spacing: 0.8px;
        margin-top: 6px; /* Increased to 6px to align with close button */
    }
    
    .boka-menu-close-button {
        width: 42px; /* Even smaller on small phones */
        height: 42px;
        /* Removed margin-top to ensure perfect vertical centering */
    }
    
    .boka-menu-close-button .close-icon-x {
        width: 16px;
        height: 16px;
    }
    
    .boka-menu-close-button .close-icon-x::before,
    .boka-menu-close-button .close-icon-x::after {
        width: 16px;
    }
    
    .boka-menu-content {
        padding: 20px 20px 80px 20px; /* Extra bottom padding for mobile browser bar */
    }
    
    .boka-cards-grid {
        gap: 20px;
    }
    
    .boka-card {
        height: 376px; /* Was 380px */
    }
    
    .card-image-top {
        height: 200px;
    }
    
    .card-bottom {
        height: 176px; /* Was 180px */
        padding: 15px;
        flex-direction: column; /* Stack content vertically */
        align-items: stretch; /* Full width for button */
        gap: 8px; /* Was 12px - Space between text and button */
    }
    
    .card-text {
        padding-right: 0; /* Remove right padding since no button on right */
    }
    
    .card-button {
        align-self: stretch; /* Full width button */
    }
    
    .card-title {
        font-size: 16px; /* Increased font size as requested */
    }
    
    .card-subtitle {
        font-size: 13px; /* Increased font size as requested */
    }
    
    .boka-paket-btn {
        padding: 12px 16px; /* Increased padding for wider button */
        font-size: 11px;
        min-width: 100%;
        width: 100%; /* Full width button */
    }

    /* Remove excessive gap: reset margin-top on main boka card buttons */
    .boka-card:not(.restaurant-card) .card-button {
        margin-top: 0 !important; /* Eliminate purple gap */
    }

    /* Fine-tune summer vacation promo background centering */
    .boka-card.mobile-only-card .promo-image-container {
        background-position: center center !important; /* Ensure perfect centering */
    }

    /* Eliminate fixed height causing gap */
    .boka-card:not(.restaurant-card) .card-bottom {
        height: auto !important; /* Let content dictate height */
        min-height: 0 !important;
    }

    .boka-card:not(.restaurant-card) .card-button {
        margin-top: 8px !important; /* Small, consistent gap */
    }

    /* Further tighten spacing in main boka cards */
    .boka-card:not(.restaurant-card) .card-bottom {
        padding: 12px 12px 10px !important; /* tighter top/bottom padding */
        gap: 6px !important; /* smaller gap between text and button */
    }
    .boka-card:not(.restaurant-card) .card-title {
        margin: 0 0 2px 0 !important; /* minimal margin below title */
    }
    .boka-card:not(.restaurant-card) .card-text {
        margin-bottom: 0 !important; /* remove extra space */
    }

    /* Align menu title to card grid left edge */
    .boka-menu-header {
        padding-left: 14px !important; /* 2px right from cards */
    }
    .boka-menu-title {
        text-align: left !important;
    }
}

/* Responsive design */
/* Super wide screens - 3 columns - much higher breakpoint */
@media (min-width: 2400px) {
    .boka-cards-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 35px;
    }
    
    .boka-card {
        height: 380px;
    }
    
    .card-image-top {
        height: 260px;
    }
    
    .card-bottom {
        height: 120px;
        padding: 20px;
    }
}

/* Very large screens - optimize restaurant cards spacing */
@media (min-width: 1800px) {
    .restaurant-content {
        padding: 30px;
        gap: 15px; /* Add gap between flex items */
    }
    
    .restaurant-description {
        margin-bottom: 15px; /* Reduce bottom margin */
    }
    
    .restaurant-hours {
        margin: 0 0 15px 0; /* Reduce margins */
        padding: 10px 0; /* Reduce padding */
    }
    
    .restaurant-buttons {
        margin-top: 15px; /* Fixed margin instead of auto for large screens */
    }
}

/* Large screens - 2 columns (desktop) */
@media (max-width: 2399px) and (min-width: 1025px) {
    .boka-cards-grid {
        grid-template-columns: repeat(2, 1fr); /* Back to 2 columns for desktop */
        gap: 40px;
    }
}

/* Tablets - Remove left side, 2 columns */
@media (max-width: 1024px) {
    .boka-menu-left-content {
        display: none; /* Hide left side on tablets */
    }
    
    .boka-menu-right-content {
        width: 100%; /* Full width when left side is hidden */
    }
    
    .boka-menu-title {
        font-size: 24px; /* Slightly smaller on tablets */
        letter-spacing: 1.2px;
    }
    
    .boka-cards-grid {
        grid-template-columns: 1fr; /* Single column for tablets and below */
        gap: 30px;
    }
    
    .boka-card {
        height: 420px; /* Increased height to accommodate stacked layout */
    }
    
    .card-image-top {
        height: 240px;
    }
    
    .card-bottom {
        padding: 20px;
        flex-direction: column; /* Stack content vertically like mobile */
        align-items: stretch; /* Full width for button */
        gap: 15px; /* Space between text and button */
    }
    
    .card-text {
        padding-right: 0; /* Remove right padding since no button on right */
    }
    
    .card-button {
        align-self: stretch; /* Full width button */
    }
    
    .card-title {
        font-size: 16px;
    }
    
    .card-subtitle {
        font-size: 12px;
    }
    
    .boka-paket-btn {
        padding: 12px 20px;
        font-size: 12px;
        min-width: 100%;
        width: 100%; /* Full width button */
    }
}

/* Mobile phones - Remove left side, 1 column */
@media (max-width: 768px) {
    .boka-menu-left-content {
        display: none; /* Hide left side on mobile */
    }
    
    .boka-menu-right-content {
        width: 100%; /* Full width when left side is hidden */
    }
    
    .boka-menu-header {
        padding: 15px 20px 20px 20px; /* Adjusted padding for mobile */
    }
    
    .boka-menu-title {
        font-size: 20px; /* Smaller on mobile */
        letter-spacing: 1px;
        margin-top: 6px; /* Increased to 6px to align with close button */
        /* Removed margin-right to allow title to align to left edge */
    }
    
    .boka-menu-close-button {
        width: 45px; /* Slightly smaller on mobile */
        height: 45px;
    }
    
    .boka-menu-close-button .close-icon-x {
        width: 18px;
        height: 18px;
    }
    
    .boka-menu-close-button .close-icon-x::before,
    .boka-menu-close-button .close-icon-x::after {
        width: 18px;
    }
    
    .boka-cards-grid {
        grid-template-columns: 1fr; /* Single column on mobile */
        gap: 25px;
    }
    
    .boka-card { /* General card styling for 768px breakpoint */
        height: 395px; /* Was 400px */
    }
    
    .card-image-top {
        height: 230px;
    }
    
    .card-bottom { /* General card-bottom styling for 768px breakpoint */
        height: 165px; /* Was 170px */
        padding: 20px;
        flex-direction: column; /* Stack content vertically */
        align-items: stretch; /* Full width for button */
        gap: 10px; /* Was 15px - Space between text and button */
    }
    
    .card-text {
        padding-right: 0; /* Remove right padding since no button on right */
    }
    
    .card-button {
        align-self: stretch; /* Full width button */
    }
    
    .boka-menu-content {
        padding: 25px 25px 80px 25px; /* Extra bottom padding for mobile browser bar */
    }
    
    .card-title {
        font-size: 18px; /* Increased font size as requested */
    }
    
    .card-subtitle {
        font-size: 14px; /* Increased font size as requested */
    }
    
    .boka-paket-btn {
        padding: 15px 18px; /* Increased padding for wider button */
        font-size: 12px; /* Increased font size */
        min-width: 100%;
        width: 100%; /* Full width button */
    }
}

/* Small mobile phones */
@media (max-width: 480px) {
    .boka-menu-header {
        padding: 12px 15px 17px 15px; /* Tighter padding for small screens */
    }
    
    .boka-menu-title {
        font-size: 16px; /* Much smaller on small phones */
        letter-spacing: 0.8px;
        margin-top: 6px; /* Increased to 6px to align with close button */
    }
    
    .boka-menu-close-button {
        width: 42px; /* Even smaller on small phones */
        height: 42px;
        /* Removed margin-top to ensure perfect vertical centering */
    }
    
    .boka-menu-close-button .close-icon-x {
        width: 16px;
        height: 16px;
    }
    
    .boka-menu-close-button .close-icon-x::before,
    .boka-menu-close-button .close-icon-x::after {
        width: 16px;
    }
    
    .boka-menu-content {
        padding: 20px 20px 80px 20px; /* Extra bottom padding for mobile browser bar */
    }
    
    .boka-cards-grid {
        gap: 20px;
    }
    
    .boka-card {
        height: 380px; /* Increased height for new layout */
    }
    
    .card-image-top {
        height: 200px;
    }
    
    .card-bottom {
        height: 180px; /* Increased height for stacked layout */
        padding: 15px;
        flex-direction: column; /* Stack content vertically */
        align-items: stretch; /* Full width for button */
        gap: 12px; /* Space between text and button */
    }
    
    .card-text {
        padding-right: 0; /* Remove right padding since no button on right */
        flex: none; /* Prevent expanding - only take space needed for content */
    }
    
    .card-button {
        align-self: stretch; /* Full width button */
    }
    
    .card-title {
        font-size: 16px; /* Increased font size as requested */
    }
    
    .card-subtitle {
        font-size: 13px; /* Increased font size as requested */
    }
    
    .boka-paket-btn {
        padding: 12px 16px; /* Increased padding for wider button */
        font-size: 11px;
        min-width: 100%;
        width: 100%; /* Full width button */
    }
}

/* Very small screens - iPhone SE and similar */
@media (max-width: 375px) {
    .boka-menu-content {
        padding: 12px 12px 80px 12px; /* Extra bottom padding for mobile browser bar */
    }
    
    .boka-cards-grid {
        gap: 15px;
    }
    
    .boka-card {
        height: 280px;
        /* Optimized for small screens with efficient space usage */
    }
    
    .card-image-top {
        height: 130px; /* Reduced for better content/image ratio */
    }
    
    .card-bottom {
        display: flex;
        flex-direction: column;
        padding: 14px 12px 10px;
        gap: 6px;
        box-sizing: border-box;
        justify-content: flex-start; /* Ensure content stays at top */
    }
    
    .card-text {
        flex: none;
        margin-bottom: 2px; /* Fine-tuned spacing */
    }
    
    .card-title {
        font-size: 13px;
        margin: 0 0 2px 0;
        line-height: 1.1;
        letter-spacing: 0.3px;
    }
    
    .card-subtitle {
        font-size: 10px;
        line-height: 1.2;
        margin: 0;
        color: #777;
    }
    
    .boka-paket-btn {
        padding: 8px 10px;
        font-size: 9px;
        min-height: 34px;
        height: 34px;
        margin: 4px 0 0 0;
        width: 100%;
        letter-spacing: 0.5px;
    }
}

/* Very small screens - additional title scaling */
@media (max-width: 360px) {
    .boka-menu-title {
        font-size: 14px; /* Very small for tiny screens */
        letter-spacing: 0.5px;
        margin-top: 6px; /* Increased to 6px to align with close button */
        /* Removed margin-right to allow title to align to left edge */
    }
    
    .boka-menu-close-button {
        width: 40px;
        height: 40px;
    }
}

/* Restaurant View - Specific for when restaurant cards are shown */
.boka-menu-right-content.restaurant-mode {
    overflow: hidden; /* Prevent double scrollbars when restaurant view is active */
}

.boka-restaurant-view.active + .boka-widget-overlay {
    /* This is a sibling selector, might be useful if widget container is direct sibling of active restaurant view*/
    /* For now, we control active state directly on boka-widget-overlay via JS */
}

/* Styles for the Table Reservation Widget Overlay */
.boka-widget-overlay {
    display: none; /* Hidden by default */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.75); /* Semi-transparent backdrop */
    z-index: 2147483647 !important; /* Maximum z-index to be above everything including the main menu */
    padding: 20px; /* Some padding so the widget content doesn't touch edges */
    overflow-y: auto; /* Allow scrolling if widget content is too tall */

    /* Flexbox for centering the widget content if it doesn't fill the overlay */
    align-items: center;
    justify-content: center;
}

.boka-widget-overlay.active {
    display: flex; /* Show when active, using flex for centering */
}

/* You might need to style the actual widget_container IF the third-party widget does not style itself adequately */
/* For example, if the widget injected by table_reservation_widget is smaller than the overlay: */
/* #widgetContainer > * { 
    background-color: #fff; 
    padding: 20px; 
    border-radius: 8px; 
    max-width: 90%; 
    max-height: 90%; 
    overflow-y: auto;
}
*/

/* Ensure close button on main menu is above backdrop if somehow it remains clickable, though it shouldn't */
.boka-menu-header .boka-menu-close-button {
    z-index: 2147483647 !important; /* Same as widget overlay to stay accessible */
    position: relative; /* Needed for z-index to apply if not already positioned */
}

/* Main layout responsive rules */
/* The following media queries were duplicates and have been removed. */

/* Media queries - updated breakpoints */
@media (max-width: 1200px) {
    /* Hide left side menu earlier - at 1200px instead of 1024px */
    /* .boka-menu-left-content {
        display: none;
    } */

    .boka-menu-right-content {
        width: 100%;
    }

    .boka-menu-title {
        margin-bottom: 0; /* Reset margin-bottom */
        /* Removed margin-top, relying on parent for centering */
    }

    .boka-menu-header {
        padding: 20px 30px; /* Adjusted for symmetrical vertical padding */
    }

    .boka-cards-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }

    .boka-card {
        height: 380px;
    }

    .card-image-top {
        height: 240px;
    }

    .card-bottom {
        padding: 20px;
    }

    .card-title {
        font-size: 16px;
    }

    .card-subtitle {
        font-size: 12px;
    }

    .boka-paket-btn {
        padding: 10px 20px;
        font-size: 12px;
    }
}

@media (max-width: 1024px) {
    .boka-menu-left-content {
        display: none; /* Hide left side on tablets */
    }
    
    .boka-menu-right-content {
        width: 100%; /* Full width when left side is hidden */
    }
    
    .boka-menu-title {
        font-size: 24px; /* Slightly smaller on tablets */
        letter-spacing: 1.2px;
    }
    
    .boka-cards-grid {
        grid-template-columns: 1fr; /* Single column for tablets and below */
        gap: 30px;
    }
    
    .boka-card {
        height: 420px; /* Increased height to accommodate stacked layout */
    }
    
    .card-image-top {
        height: 240px;
    }
    
    .card-bottom {
        padding: 20px;
        flex-direction: column; /* Stack content vertically like mobile */
        align-items: stretch; /* Full width for button */
        gap: 15px; /* Space between text and button */
    }
    
    .card-text {
        padding-right: 0; /* Remove right padding since no button on right */
    }
    
    .card-button {
        align-self: stretch; /* Full width button */
    }
    
    .card-title {
        font-size: 16px;
    }
    
    .card-subtitle {
        font-size: 12px;
    }
    
    .boka-paket-btn {
        padding: 12px 20px;
        font-size: 12px;
        min-width: 100%;
        width: 100%; /* Full width button */
    }
} 

/* Force BookVisit Widget Modal to the front */
.bv_modal_root {
    z-index: 2147483647 !important; /* Absolute highest for the entire widget system */
}

.mantine-Modal-root .mantine-Modal-overlay {
    z-index: 2147483646 !important; /* Widget's own backdrop, slightly below its content */
}

.mantine-Modal-root .mantine-Modal-inner {
    z-index: 2147483647 !important; /* Inner container for the modal content */
}

section.mantine-Modal-content.bv_modal_modal {
    z-index: 2147483647 !important; /* The actual modal content box */
}

/* Ensure any of our overlays are below this if the widget is active */
.boka-widget-overlay.active {
    /* z-index is already handled by JS to be lower (e.g., 999900) when widget is active */
    /* The important part is that the above .bv_modal_root is higher */
}

/* =================================
   ADVANCED RESPONSIVE SYSTEM - RESTAURANT VIEW
   Ultra-optimized for iPhone SE to iPhone 16 Pro Max
   ================================= */

/* Restaurant View Base Variables */
:root {
    --restaurant-fluid-title: clamp(16px, 4.5vw, 28px);
    --restaurant-fluid-desc: clamp(12px, 3.2vw, 16px);
    --restaurant-fluid-button: clamp(11px, 2.8vw, 14px);
    --restaurant-card-min-height: clamp(280px, 60vw, 400px);
}

/* iPhone SE (375px) - Restaurant View Ultra Compact */
@media (max-width: 375px) {
    .restaurant-filter-tabs {
        padding: 8px 12px 0 12px;
        gap: 3px;
        justify-content: flex-start;
        flex-wrap: nowrap; /* Force horizontal scroll */
        overflow-x: auto;
        scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch;
    }
    
    .filter-tab {
        padding: 10px 14px;
        font-size: 11px;
        margin-bottom: 0;
        margin-right: 6px;
        min-width: fit-content;
        flex-shrink: 0;
    }
    
    .filter-tab:last-child {
        margin-right: 12px; /* Add padding to last tab for scroll end */
    }
    
    .restaurant-cards-container {
        padding: 15px 12px 100px 12px; /* Extra bottom padding for iPhone address bar */
        gap: 18px;
    }
    
    .restaurant-card {
        flex-direction: column;
        min-height: 280px;
        height: auto;
        border-radius: 0;
        overflow: hidden;
    }
    
    .restaurant-image {
        width: 100%;
        height: 120px;
        flex-shrink: 0;
    }
    
    .restaurant-image img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        image-rendering: crisp-edges;
    }
    
    .restaurant-content {
        padding: 16px 14px;
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    
    .restaurant-title {
        font-size: 16px;
        margin: 0 0 8px 0;
        line-height: 1.1;
        letter-spacing: 0.8px;
    }
    
    .restaurant-description {
        font-size: 12px;
        line-height: 1.4;
        margin: 0 0 12px 0;
        flex: 1;
    }
    
    .restaurant-hours {
        margin: 0 0 12px 0;
        padding: 8px 0;
        border-top: 1px solid #e5e5e5;
    }
    
    .restaurant-hours p {
        margin: 0 0 4px 0;
        font-size: 11px;
        line-height: 1.3;
    }
    
    .restaurant-hours strong {
        font-size: 10px;
        letter-spacing: 0.3px;
    }
    
    .restaurant-buttons {
        gap: 8px;
        flex-direction: column;
        margin-top: auto;
    }
    
    .restaurant-btn-primary,
    .restaurant-btn-secondary {
        padding: 10px 14px;
        font-size: 10px;
        min-height: 36px;
        height: 36px;
        width: 100%;
        letter-spacing: 0.5px;
        border-radius: 4px;
    }
}

/* iPhone 12/13/14 mini (375.01px - 389px) - Restaurant View */
@media (min-width: 375.01px) and (max-width: 389px) {
    .restaurant-filter-tabs {
        padding: 10px 15px 0 15px;
        gap: 5px;
    }
    
    .filter-tab {
        padding: 11px 16px;
        font-size: 12px;
        margin-bottom: 8px;
    }
    
    .restaurant-cards-container {
        padding: 18px 15px 110px 15px; /* Extra bottom padding for iPhone address bar */
        gap: 20px;
    }
    
    .restaurant-card {
        flex-direction: column;
        min-height: 295px;
        height: auto;
    }
    
    .restaurant-image {
        width: 100%;
        height: 130px;
    }
    
    .restaurant-content {
        padding: 18px 16px;
    }
    
    .restaurant-title {
        font-size: 17px;
        margin: 0 0 9px 0;
        line-height: 1.1;
    }
    
    .restaurant-description {
        font-size: 12px;
        line-height: 1.4;
        margin: 0 0 14px 0;
    }
    
    .restaurant-hours {
        margin: 0 0 14px 0;
        padding: 10px 0;
    }
    
    .restaurant-hours p {
        margin: 0 0 5px 0;
        font-size: 11px;
    }
    
    .restaurant-buttons {
        gap: 10px;
        flex-direction: column;
    }
    
    .restaurant-btn-primary,
    .restaurant-btn-secondary {
        padding: 11px 16px;
        font-size: 11px;
        min-height: 38px;
        height: 38px;
    }
}

/* iPhone 12/13/14 standard (390px - 392px) - Restaurant View */
@media (min-width: 390px) and (max-width: 392px) {
    .restaurant-filter-tabs {
        padding: 12px 16px 0 16px;
        gap: 6px;
    }
    
    .filter-tab {
        padding: 12px 18px;
        font-size: 12px;
        margin-bottom: 10px;
    }
    
    .restaurant-cards-container {
        padding: 20px 16px 110px 16px; /* Extra bottom padding for iPhone address bar */
        gap: 22px;
    }
    
    .restaurant-card {
        flex-direction: column;
        min-height: 310px;
        height: auto;
    }
    
    .restaurant-image {
        width: 100%;
        height: 140px;
    }
    
    .restaurant-content {
        padding: 20px 18px;
    }
    
    .restaurant-title {
        font-size: 18px;
        margin: 0 0 10px 0;
        line-height: 1.1;
    }
    
    .restaurant-description {
        font-size: 13px;
        line-height: 1.4;
        margin: 0 0 16px 0;
    }
    
    .restaurant-hours {
        margin: 0 0 16px 0;
        padding: 12px 0;
    }
    
    .restaurant-hours p {
        margin: 0 0 6px 0;
        font-size: 12px;
    }
    
    .restaurant-buttons {
        gap: 12px;
        flex-direction: column;
    }
    
    .restaurant-btn-primary,
    .restaurant-btn-secondary {
        padding: 12px 18px;
        font-size: 11px;
        min-height: 40px;
        height: 40px;
    }
}

/* iPhone 14 Pro, iPhone 15, iPhone 15 Pro, iPhone 16 (393px - 401px) - Restaurant View */
@media (min-width: 393px) and (max-width: 401px) {
    .restaurant-filter-tabs {
        padding: 12px 18px 0 18px;
        gap: 7px;
    }
    
    .filter-tab {
        padding: 13px 20px;
        font-size: 13px;
        margin-bottom: 10px;
    }
    
    .restaurant-cards-container {
        padding: 22px 18px 115px 18px; /* Extra bottom padding for iPhone address bar */
        gap: 24px;
    }
    
    .restaurant-card {
        flex-direction: column;
        min-height: 320px;
        height: auto;
    }
    
    .restaurant-image {
        width: 100%;
        height: 145px;
    }
    
    .restaurant-content {
        padding: 22px 20px;
    }
    
    .restaurant-title {
        font-size: 19px;
        margin: 0 0 11px 0;
        line-height: 1.1;
    }
    
    .restaurant-description {
        font-size: 13px;
        line-height: 1.4;
        margin: 0 0 18px 0;
    }
    
    .restaurant-hours {
        margin: 0 0 18px 0;
        padding: 14px 0;
    }
    
    .restaurant-hours p {
        margin: 0 0 6px 0;
        font-size: 12px;
    }
    
    .restaurant-buttons {
        gap: 12px;
        flex-direction: column;
    }
    
    .restaurant-btn-primary,
    .restaurant-btn-secondary {
        padding: 13px 20px;
        font-size: 12px;
        min-height: 42px;
        height: 42px;
    }
}

/* iPhone 16 Pro (402px - 427px) - Restaurant View */
@media (min-width: 402px) and (max-width: 427px) {
    .restaurant-filter-tabs {
        padding: 14px 20px 0 20px;
        gap: 8px;
    }
    
    .filter-tab {
        padding: 14px 22px;
        font-size: 13px;
        margin-bottom: 12px;
    }
    
    .restaurant-cards-container {
        padding: 24px 20px 115px 20px; /* Extra bottom padding for iPhone address bar */
        gap: 26px;
    }
    
    .restaurant-card {
        flex-direction: column;
        min-height: 335px;
        height: auto;
    }
    
    .restaurant-image {
        width: 100%;
        height: 150px;
    }
    
    .restaurant-content {
        padding: 24px 22px;
    }
    
    .restaurant-title {
        font-size: 20px;
        margin: 0 0 12px 0;
        line-height: 1.1;
    }
    
    .restaurant-description {
        font-size: 14px;
        line-height: 1.4;
        margin: 0 0 20px 0;
    }
    
    .restaurant-hours {
        margin: 0 0 20px 0;
        padding: 16px 0;
    }
    
    .restaurant-hours p {
        margin: 0 0 7px 0;
        font-size: 13px;
    }
    
    .restaurant-buttons {
        gap: 14px;
        flex-direction: column;
    }
    
    .restaurant-btn-primary,
    .restaurant-btn-secondary {
        padding: 14px 22px;
        font-size: 12px;
        min-height: 44px;
        height: 44px;
    }
}

/* iPhone 12/13/14 Plus (428px - 429px) - Restaurant View */
@media (min-width: 428px) and (max-width: 429px) {
    .restaurant-filter-tabs {
        padding: 15px 22px 0 22px;
        gap: 10px;
    }
    
    .filter-tab {
        padding: 15px 24px;
        font-size: 14px;
        margin-bottom: 12px;
    }
    
    .restaurant-cards-container {
        padding: 26px 22px 115px 22px; /* Extra bottom padding for iPhone address bar */
        gap: 28px;
    }
    
    .restaurant-card {
        flex-direction: column;
        min-height: 350px;
        height: auto;
    }
    
    .restaurant-image {
        width: 100%;
        height: 155px;
    }
    
    .restaurant-content {
        padding: 26px 24px;
    }
    
    .restaurant-title {
        font-size: 22px;
        margin: 0 0 13px 0;
        line-height: 1.1;
    }
    
    .restaurant-description {
        font-size: 14px;
        line-height: 1.4;
        margin: 0 0 22px 0;
    }
    
    .restaurant-hours {
        margin: 0 0 22px 0;
        padding: 18px 0;
    }
    
    .restaurant-hours p {
        margin: 0 0 8px 0;
        font-size: 13px;
    }
    
    .restaurant-buttons {
        gap: 15px;
        flex-direction: column;
    }
    
    .restaurant-btn-primary,
    .restaurant-btn-secondary {
        padding: 15px 24px;
        font-size: 13px;
        min-height: 46px;
        height: 46px;
    }
}

/* iPhone 14 Pro Max, iPhone 15 Plus, iPhone 15 Pro Max, iPhone 16 Plus (430px - 439px) - Restaurant View */
@media (min-width: 430px) and (max-width: 439px) {
    .restaurant-filter-tabs {
        padding: 16px 24px 0 24px;
        gap: 12px;
    }
    
    .filter-tab {
        padding: 16px 26px;
        font-size: 14px;
        margin-bottom: 14px;
    }
    
    .restaurant-cards-container {
        padding: 28px 24px 115px 24px; /* Extra bottom padding for iPhone address bar */
        gap: 30px;
    }
    
    .restaurant-card {
        flex-direction: column;
        min-height: 365px;
        height: auto;
    }
    
    .restaurant-image {
        width: 100%;
        height: 160px;
    }
    
    .restaurant-content {
        padding: 28px 26px;
    }
    
    .restaurant-title {
        font-size: 23px;
        margin: 0 0 14px 0;
        line-height: 1.1;
    }
    
    .restaurant-description {
        font-size: 15px;
        line-height: 1.4;
        margin: 0 0 24px 0;
    }
    
    .restaurant-hours {
        margin: 0 0 24px 0;
        padding: 20px 0;
    }
    
    .restaurant-hours p {
        margin: 0 0 8px 0;
        font-size: 14px;
    }
    
    .restaurant-buttons {
        gap: 16px;
        flex-direction: column;
    }
    
    .restaurant-btn-primary,
    .restaurant-btn-secondary {
        padding: 16px 26px;
        font-size: 13px;
        min-height: 48px;
        height: 48px;
    }
}

/* iPhone 16 Pro Max (440px - 480px) - Restaurant View Premium */
@media (min-width: 440px) and (max-width: 480px) {
    .restaurant-filter-tabs {
        padding: 18px 26px 0 26px;
        gap: 14px;
    }
    
    .filter-tab {
        padding: 17px 28px;
        font-size: 15px;
        margin-bottom: 15px;
    }
    
    .restaurant-cards-container {
        padding: 30px 26px 115px 26px; /* Extra bottom padding for iPhone address bar */
        gap: 32px;
    }
    
    .restaurant-card {
        flex-direction: column;
        min-height: 380px;
        height: auto;
    }
    
    .restaurant-image {
        width: 100%;
        height: 165px;
    }
    
    .restaurant-content {
        padding: 30px 28px;
    }
    
    .restaurant-title {
        font-size: 24px;
        margin: 0 0 15px 0;
        line-height: 1.1;
    }
    
    .restaurant-description {
        font-size: 15px;
        line-height: 1.4;
        margin: 0 0 26px 0;
    }
    
    .restaurant-hours {
        margin: 0 0 26px 0;
        padding: 22px 0;
    }
    
    .restaurant-hours p {
        margin: 0 0 9px 0;
        font-size: 14px;
    }
    
    .restaurant-buttons {
        gap: 18px;
        flex-direction: column;
    }
    
    .restaurant-btn-primary,
    .restaurant-btn-secondary {
        padding: 17px 28px;
        font-size: 14px;
        min-height: 50px;
        height: 50px;
    }
}

/* Restaurant View Performance Optimizations */
@media (max-width: 480px) {
    /* Optimize restaurant image rendering */
    .restaurant-image img {
        image-rendering: crisp-edges;
        image-rendering: -webkit-optimize-contrast;
        transform: translateZ(0);
        will-change: transform;
    }
    
    /* Optimize restaurant button interactions */
    .restaurant-btn-primary,
    .restaurant-btn-secondary {
        touch-action: manipulation;
        -webkit-tap-highlight-color: rgba(0,0,0,0);
        user-select: none;
        transform: translateZ(0);
        transition: transform 0.15s ease-out, background-color 0.15s ease-out;
    }
    
    .restaurant-btn-primary:active,
    .restaurant-btn-secondary:active {
        transform: translateZ(0) scale(0.98);
    }
    
    /* Optimize filter tab scrolling */
    .restaurant-filter-tabs {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        scroll-behavior: smooth;
    }
    
    /* Typography optimizations for restaurant content */
    .restaurant-title,
    .restaurant-description,
    .restaurant-hours {
        text-rendering: optimizeLegibility;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
    
    /* Safe area support for restaurant view */
    .restaurant-cards-container {
        padding-left: max(var(--fluid-padding), env(safe-area-inset-left));
        padding-right: max(var(--fluid-padding), env(safe-area-inset-right));
        padding-bottom: max(var(--fluid-padding), env(safe-area-inset-bottom));
    }
    
    /* Restaurant card hover animations */
    .restaurant-card {
        transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    }
}

/* Restaurant View Landscape Optimizations */
@media (max-width: 480px) and (orientation: landscape) {
    .restaurant-card {
        flex-direction: row;
        min-height: 180px;
        height: auto;
    }
    
    .restaurant-image {
        width: 40%;
        height: auto;
    }
    
    .restaurant-content {
        width: 60%;
        padding: 16px 20px;
    }
    
    .restaurant-title {
        font-size: 16px;
        margin: 0 0 8px 0;
    }
    
    .restaurant-description {
        font-size: 12px;
        margin: 0 0 12px 0;
    }
    
    .restaurant-hours {
        margin: 0 0 12px 0;
        padding: 8px 0;
    }
    
    .restaurant-buttons {
        flex-direction: row;
        gap: 8px;
    }
    
    .restaurant-btn-primary,
    .restaurant-btn-secondary {
        padding: 8px 12px;
        font-size: 11px;
        min-height: 36px;
        height: 36px;
    }
}

/* High DPI optimizations for restaurant images */
@media (max-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
    .restaurant-image img {
        image-rendering: auto;
    }
}

/* Motion-aware animations for restaurant view */
@media (max-width: 480px) and (prefers-reduced-motion: no-preference) {
    .restaurant-card:hover {
        transform: translateY(-2px);
    }
    
    .filter-tab {
        transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    }
} 

/* =================================
   ULTRA-ADVANCED MAIN BOKA PAGE SYSTEM
   Most sophisticated responsive design ever created
   Covers iPhone SE to iPhone 16 Pro Max with mathematical precision
   ================================= */

/* Enhanced fluid variables for main boka page */
:root {
    --boka-fluid-title: clamp(13px, 3.8vw, 18px);
    --boka-fluid-subtitle: clamp(10px, 2.6vw, 14px);
    --boka-fluid-button: clamp(9px, 2.2vw, 12px);
    --boka-fluid-padding: clamp(12px, 3.2vw, 26px);
    --boka-fluid-gap: clamp(6px, 1.8vw, 15px);
    --boka-card-ratio: 1.35; /* Perfect aspect ratio */
}

/* =================================
   MAIN BOKA CARDS - ULTRA PRECISION
   ================================= */

/* iPhone SE (375px) - Ultra Compact Excellence */
@media (max-width: 375px) {
    /* Override any conflicts - Main boka page takes priority */
    .boka-menu-content:not(.restaurant-mode) {
        padding: 12px !important;
        overflow: visible;
    }
    
    .boka-cards-grid:not(.restaurant-cards-container) {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 15px !important;
        width: 100%;
        max-width: 100%;
    }
    
    .boka-card:not(.restaurant-card) {
        height: 280px !important;
        display: flex !important;
        flex-direction: column !important;
        background: #ffffff;
        border: 1px solid #e0e0e0;
        border-radius: 0;
        overflow: hidden;
        box-sizing: border-box;
        /* Performance optimizations */
        transform: translateZ(0);
        will-change: transform;
        backface-visibility: hidden;
    }
    
    .boka-card:not(.restaurant-card) .card-image-top {
        width: 100% !important;
        height: 130px !important;
        flex-shrink: 0 !important;
        overflow: hidden;
        position: relative;
    }
    
    .boka-card:not(.restaurant-card) .card-image-top img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        image-rendering: crisp-edges;
        image-rendering: -webkit-optimize-contrast;
        transform: translateZ(0);
    }
    
    .boka-card:not(.restaurant-card) .card-bottom {
        height: 150px !important; /* Calculated: 280px - 130px */
        display: flex !important;
        flex-direction: column !important;
        padding: 14px 12px 10px !important;
        gap: 6px !important;
        box-sizing: border-box !important;
        justify-content: flex-start !important;
        align-items: stretch !important;
        flex: 1;
        background: #ffffff;
    }
    
    .boka-card:not(.restaurant-card) .card-text {
        flex: none !important;
        margin-bottom: 2px !important;
        padding-right: 0 !important;
    }
    
    .boka-card:not(.restaurant-card) .card-title {
        font-size: 13px !important;
        font-weight: 700 !important;
        color: #2d2d2d !important;
        margin: 0 0 2px 0 !important;
        line-height: 1.1 !important;
        letter-spacing: 0.3px !important;
        text-transform: uppercase !important;
        /* Typography optimization */
        text-rendering: optimizeLegibility;
        -webkit-font-smoothing: antialiased;
    }
    
    .boka-card:not(.restaurant-card) .card-subtitle {
        font-size: 10px !important;
        font-weight: 400 !important;
        color: #777777 !important;
        line-height: 1.2 !important;
        margin: 0 !important;
        /* Typography optimization */
        text-rendering: optimizeLegibility;
        -webkit-font-smoothing: antialiased;
    }
    
    .boka-card:not(.restaurant-card) .card-button {
        flex-shrink: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin-top: auto !important;
        width: 100% !important;
    }
    
    .boka-card:not(.restaurant-card) .boka-paket-btn {
        padding: 8px 10px !important;
        font-size: 9px !important;
        font-weight: 700 !important;
        min-height: 34px !important;
        height: 34px !important;
        width: 100% !important;
        margin: 4px 0 0 0 !important;
        letter-spacing: 0.5px !important;
        text-transform: uppercase !important;
        border-radius: 4px !important;
        /* Button optimizations */
        background-color: #36010d !important;
        color: #dbc58c !important;
        border: none !important;
        cursor: pointer !important;
        touch-action: manipulation !important;
        -webkit-tap-highlight-color: rgba(0,0,0,0) !important;
        user-select: none !important;
        transform: translateZ(0) !important;
        transition: transform 0.15s ease-out, background-color 0.15s ease-out !important;
    }
    
    .boka-card:not(.restaurant-card) .boka-paket-btn:active {
        transform: translateZ(0) scale(0.98) !important;
    }
    
    .boka-card:not(.restaurant-card) .boka-paket-btn:hover {
        background-color: #4a1a1a !important;
        color: #e6c547 !important;
    }
}

/* iPhone 12/13/14 mini (375.01px - 389px) - Enhanced Compact */
@media (min-width: 375.01px) and (max-width: 389px) {
    .boka-menu-content:not(.restaurant-mode) {
        padding: 15px !important;
    }
    
    .boka-cards-grid:not(.restaurant-cards-container) {
        gap: 18px !important;
    }
    
    .boka-card:not(.restaurant-card) {
        height: 290px !important;
    }
    
    .boka-card:not(.restaurant-card) .card-image-top {
        height: 140px !important;
    }
    
    .boka-card:not(.restaurant-card) .card-bottom {
        height: 150px !important;
        padding: 16px 14px 12px !important;
        gap: 7px !important;
    }
    
    .boka-card:not(.restaurant-card) .card-title {
        font-size: 14px !important;
        margin: 0 0 2px 0 !important;
    }
    
    .boka-card:not(.restaurant-card) .card-subtitle {
        font-size: 11px !important;
        line-height: 1.3 !important;
    }
    
    .boka-card:not(.restaurant-card) .boka-paket-btn {
        padding: 9px 12px !important;
        font-size: 10px !important;
        min-height: 36px !important;
        height: 36px !important;
        margin: 5px 0 0 0 !important;
    }
}

/* iPhone 12/13/14 standard (390px - 392px) - Modern Standard */
@media (min-width: 390px) and (max-width: 392px) {
    .boka-menu-content:not(.restaurant-mode) {
        padding: 16px !important;
    }
    
    .boka-cards-grid:not(.restaurant-cards-container) {
        gap: 20px !important;
    }
    
    .boka-card:not(.restaurant-card) {
        height: 300px !important;
    }
    
    .boka-card:not(.restaurant-card) .card-image-top {
        height: 150px !important;
    }
    
    .boka-card:not(.restaurant-card) .card-bottom {
        height: 150px !important;
        padding: 18px 16px 14px !important;
        gap: 8px !important;
    }
    
    .boka-card:not(.restaurant-card) .card-title {
        font-size: 15px !important;
        margin: 0 0 3px 0 !important;
    }
    
    .boka-card:not(.restaurant-card) .card-subtitle {
        font-size: 12px !important;
        line-height: 1.3 !important;
    }
    
    .boka-card:not(.restaurant-card) .boka-paket-btn {
        padding: 10px 14px !important;
        font-size: 10px !important;
        min-height: 38px !important;
        height: 38px !important;
        margin: 6px 0 0 0 !important;
    }
}

/* iPhone 14 Pro, iPhone 15, iPhone 15 Pro, iPhone 16 (393px - 401px) - Pro Precision */
@media (min-width: 393px) and (max-width: 401px) {
    .boka-menu-content:not(.restaurant-mode) {
        padding: 18px !important;
    }
    
    .boka-cards-grid:not(.restaurant-cards-container) {
        gap: 22px !important;
    }
    
    .boka-card:not(.restaurant-card) {
        height: 310px !important;
    }
    
    .boka-card:not(.restaurant-card) .card-image-top {
        height: 155px !important;
    }
    
    .boka-card:not(.restaurant-card) .card-bottom {
        height: 155px !important;
        padding: 20px 18px 16px !important;
        gap: 9px !important;
    }
    
    .boka-card:not(.restaurant-card) .card-title {
        font-size: 15px !important;
        margin: 0 0 3px 0 !important;
    }
    
    .boka-card:not(.restaurant-card) .card-subtitle {
        font-size: 12px !important;
        line-height: 1.3 !important;
    }
    
    .boka-card:not(.restaurant-card) .boka-paket-btn {
        padding: 11px 16px !important;
        font-size: 11px !important;
        min-height: 40px !important;
        height: 40px !important;
        margin: 7px 0 0 0 !important;
    }
}

/* iPhone 16 Pro (402px - 427px) - Latest Pro Excellence */
@media (min-width: 402px) and (max-width: 427px) {
    .boka-menu-content:not(.restaurant-mode) {
        padding: 20px !important;
    }
    
    .boka-cards-grid:not(.restaurant-cards-container) {
        gap: 24px !important;
    }
    
    .boka-card:not(.restaurant-card) {
        height: 320px !important;
    }
    
    .boka-card:not(.restaurant-card) .card-image-top {
        height: 160px !important;
    }
    
    .boka-card:not(.restaurant-card) .card-bottom {
        height: 160px !important;
        padding: 22px 20px 18px !important;
        gap: 10px !important;
    }
    
    .boka-card:not(.restaurant-card) .card-title {
        font-size: 16px !important;
        margin: 0 0 4px 0 !important;
    }
    
    .boka-card:not(.restaurant-card) .card-subtitle {
        font-size: 13px !important;
        line-height: 1.3 !important;
    }
    
    .boka-card:not(.restaurant-card) .boka-paket-btn {
        padding: 12px 18px !important;
        font-size: 11px !important;
        min-height: 42px !important;
        height: 42px !important;
        margin: 8px 0 0 0 !important;
    }
}

/* iPhone 12/13/14 Plus (428px - 429px) - Plus Luxury */
@media (min-width: 428px) and (max-width: 429px) {
    .boka-menu-content:not(.restaurant-mode) {
        padding: 22px !important;
    }
    
    .boka-cards-grid:not(.restaurant-cards-container) {
        gap: 26px !important;
    }
    
    .boka-card:not(.restaurant-card) {
        height: 330px !important;
    }
    
    .boka-card:not(.restaurant-card) .card-image-top {
        height: 165px !important;
    }
    
    .boka-card:not(.restaurant-card) .card-bottom {
        height: 165px !important;
        padding: 24px 22px 20px !important;
        gap: 11px !important;
    }
    
    .boka-card:not(.restaurant-card) .card-title {
        font-size: 17px !important;
        margin: 0 0 4px 0 !important;
    }
    
    .boka-card:not(.restaurant-card) .card-subtitle {
        font-size: 13px !important;
        line-height: 1.3 !important;
    }
    
    .boka-card:not(.restaurant-card) .boka-paket-btn {
        padding: 13px 20px !important;
        font-size: 12px !important;
        min-height: 44px !important;
        height: 44px !important;
        margin: 9px 0 0 0 !important;
    }
}

/* iPhone 14 Pro Max, iPhone 15 Plus, iPhone 15 Pro Max, iPhone 16 Plus (430px - 439px) - Premium Plus */
@media (min-width: 430px) and (max-width: 439px) {
    .boka-menu-content:not(.restaurant-mode) {
        padding: 24px !important;
    }
    
    .boka-cards-grid:not(.restaurant-cards-container) {
        gap: 28px !important;
    }
    
    .boka-card:not(.restaurant-card) {
        height: 340px !important;
    }
    
    .boka-card:not(.restaurant-card) .card-image-top {
        height: 170px !important;
    }
    
    .boka-card:not(.restaurant-card) .card-bottom {
        height: 170px !important;
        padding: 26px 24px 22px !important;
        gap: 12px !important;
    }
    
    .boka-card:not(.restaurant-card) .card-title {
        font-size: 17px !important;
        margin: 0 0 4px 0 !important;
    }
    
    .boka-card:not(.restaurant-card) .card-subtitle {
        font-size: 14px !important;
        line-height: 1.3 !important;
    }
    
    .boka-card:not(.restaurant-card) .boka-paket-btn {
        padding: 14px 22px !important;
        font-size: 12px !important;
        min-height: 46px !important;
        height: 46px !important;
        margin: 10px 0 0 0 !important;
    }
}

/* iPhone 16 Pro Max (440px - 480px) - Ultimate Premium */
@media (min-width: 440px) and (max-width: 480px) {
    .boka-menu-content:not(.restaurant-mode) {
        padding: 26px !important;
    }
    
    .boka-cards-grid:not(.restaurant-cards-container) {
        gap: 30px !important;
    }
    
    .boka-card:not(.restaurant-card) {
        height: 350px !important;
    }
    
    .boka-card:not(.restaurant-card) .card-image-top {
        height: 175px !important;
    }
    
    .boka-card:not(.restaurant-card) .card-bottom {
        height: 175px !important;
        padding: 28px 26px 24px !important;
        gap: 13px !important;
    }
    
    .boka-card:not(.restaurant-card) .card-title {
        font-size: 18px !important;
        margin: 0 0 5px 0 !important;
    }
    
    .boka-card:not(.restaurant-card) .card-subtitle {
        font-size: 14px !important;
        line-height: 1.3 !important;
    }
    
    .boka-card:not(.restaurant-card) .boka-paket-btn {
        padding: 15px 24px !important;
        font-size: 12px !important;
        min-height: 48px !important;
        height: 48px !important;
        margin: 11px 0 0 0 !important;
    }
}

/* =================================
   ULTRA PERFORMANCE OPTIMIZATIONS
   ================================= */

@media (max-width: 480px) {
    /* Main boka page performance */
    .boka-card:not(.restaurant-card) {
        /* GPU acceleration */
        transform: translateZ(0) !important;
        will-change: transform !important;
        backface-visibility: hidden !important;
        /* Smooth interactions */
        transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    }
    
    .boka-card:not(.restaurant-card):hover {
        transform: translateY(-2px) !important;
    }
    
    /* Image performance */
    .boka-card:not(.restaurant-card) .card-image-top img {
        /* Crisp rendering */
        image-rendering: crisp-edges !important;
        image-rendering: -webkit-optimize-contrast !important;
        /* Hardware acceleration */
        transform: translateZ(0) !important;
        will-change: transform !important;
    }
    
    /* Typography performance */
    .boka-card:not(.restaurant-card) .card-title,
    .boka-card:not(.restaurant-card) .card-subtitle {
        /* Crisp text rendering */
        text-rendering: optimizeLegibility !important;
        -webkit-font-smoothing: antialiased !important;
        -moz-osx-font-smoothing: grayscale !important;
    }
    
    /* Button performance */
    .boka-card:not(.restaurant-card) .boka-paket-btn {
        /* Optimize touch */
        touch-action: manipulation !important;
        -webkit-tap-highlight-color: rgba(0,0,0,0) !important;
        user-select: none !important;
        /* GPU acceleration */
        transform: translateZ(0) !important;
        will-change: transform !important;
        /* Smooth transitions */
        transition: transform 0.15s ease-out, background-color 0.15s ease-out !important;
    }
    
    /* Safe area support */
    .boka-menu-content:not(.restaurant-mode) {
        padding-left: max(var(--boka-fluid-padding), env(safe-area-inset-left)) !important;
        padding-right: max(var(--boka-fluid-padding), env(safe-area-inset-right)) !important;
        padding-bottom: max(var(--boka-fluid-padding), env(safe-area-inset-bottom)) !important;
    }
    
    /* Scroll performance */
    .boka-menu-right-content:not(.restaurant-mode) {
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior-y: contain !important;
        scroll-behavior: smooth !important;
    }
}

/* =================================
   LANDSCAPE OPTIMIZATIONS
   ================================= */

@media (max-width: 480px) and (orientation: landscape) {
    .boka-card:not(.restaurant-card) {
        height: auto !important;
        min-height: 200px !important;
    }
    
    .boka-card:not(.restaurant-card) .card-image-top {
        height: 120px !important;
    }
    
    .boka-card:not(.restaurant-card) .card-bottom {
        padding: 16px 20px 14px !important;
        gap: 8px !important;
        height: auto !important;
        min-height: 80px !important;
    }
    
    .boka-card:not(.restaurant-card) .card-title {
        font-size: 14px !important;
    }
    
    .boka-card:not(.restaurant-card) .card-subtitle {
        font-size: 11px !important;
    }
    
    .boka-card:not(.restaurant-card) .boka-paket-btn {
        min-height: 36px !important;
        height: 36px !important;
        padding: 8px 12px !important;
        font-size: 10px !important;
    }
}

/* =================================
   HIGH DPI / RETINA OPTIMIZATIONS
   ================================= */

@media (max-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
    .boka-card:not(.restaurant-card) .card-image-top img {
        image-rendering: auto !important;
    }
}

/* =================================
   MOTION PREFERENCES
   ================================= */

@media (max-width: 480px) and (prefers-reduced-motion: reduce) {
    .boka-card:not(.restaurant-card),
    .boka-card:not(.restaurant-card) .boka-paket-btn {
        transition: none !important;
    }
}

@media (max-width: 480px) and (prefers-reduced-motion: no-preference) {
    .boka-card:not(.restaurant-card):hover {
        transform: translateY(-2px) !important;
    }
}

/* =================================
   PROMOTIONAL CARD SPECIFIC
   ================================= */

@media (max-width: 480px) {
    .boka-card.mobile-only-card {
        /* Ensure promotional card maintains its specific styling */
        height: auto !important;
    }
    
    .boka-card.mobile-only-card .card-bottom {
        justify-content: center !important;
        align-items: center !important;
        padding: 12px 20px !important;
        gap: 0 !important;
        height: auto !important;
        min-height: auto !important;
    }
    
    .boka-card.mobile-only-card .boka-paket-btn {
        background-color: #f6f394 !important;
        color: #36010d !important;
        border: 2px solid #f6f394 !important;
    }
}

/* =================================
   PROMOTIONAL CARD FIXES
   ================================= */

/* Enhanced promotional card styling - all screen sizes */
@media (max-width: 1024px) {
    .boka-card.mobile-only-card {
        display: flex !important;
        height: auto !important; /* Let content determine height */
        min-height: 160px !important; /* Reduced from auto for more compact design */
        max-height: 180px !important; /* Cap the maximum height */
    }
    
    .boka-card.mobile-only-card .promo-image-container {
        height: 100px !important; /* Reduced from 120px for more compact design */
        background-image: url('../../images/boka/sommarbanner.webp');
        background-size: cover;
        background-position: center;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }
    
    .boka-card.mobile-only-card .promo-logo-overlay {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        max-width: 80px !important; /* Slightly smaller for compact design */
        max-height: 50px !important; /* Slightly smaller for compact design */
        width: auto !important;
        height: auto !important;
        object-fit: contain !important;
        z-index: 2 !important; /* Ensure it's above background */
    }
    
    .boka-card.mobile-only-card .card-bottom {
        justify-content: center !important;
        align-items: center !important;
        padding: 8px 16px 12px !important; /* Reduced padding for more compact design */
        gap: 0 !important;
        height: auto !important;
        min-height: 60px !important; /* Reduced from auto for compact design */
        display: flex !important;
        flex-direction: column !important;
        flex: 1 !important;
    }
    
    .boka-card.mobile-only-card .card-text {
        display: none !important; /* Keep text hidden as intended */
    }
    
    .boka-card.mobile-only-card .card-button {
        width: 100% !important;
        margin: 0 !important;
        flex-shrink: 0 !important;
    }
    
    .boka-card.mobile-only-card .boka-paket-btn {
        background-color: #f6f394 !important;
        color: #36010d !important;
        border: 2px solid #f6f394 !important;
        padding: 10px 16px !important; /* Slightly reduced padding */
        font-size: 11px !important; /* Slightly smaller font */
        min-width: 100% !important;
        width: 100% !important;
        min-height: 38px !important; /* Reduced height for compact design */
        height: 38px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 6px !important; /* Reduced gap between text and arrow */
        transition: all 0.3s ease !important;
        border-radius: 4px !important;
        font-weight: 700 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
    }
    
    .boka-card.mobile-only-card .boka-paket-btn:hover {
        background-color: #f0ed82 !important;
        color: #36010d !important;
        border-color: #f0ed82 !important;
        transform: translateY(-1px) !important; /* Reduced transform for subtle effect */
        box-shadow: 0 2px 8px rgba(246, 243, 148, 0.4) !important; /* Reduced shadow */
    }
    
    .boka-card.mobile-only-card .boka-paket-btn .btn-arrow {
        font-size: 12px !important; /* Slightly smaller arrow */
        transition: transform 0.3s ease !important;
    }
    
    .boka-card.mobile-only-card .boka-paket-btn:hover .btn-arrow {
        transform: translateX(2px) !important; /* Reduced arrow movement */
    }
}

/* iPhone-specific promotional card optimizations */
@media (max-width: 480px) {
    .boka-card.mobile-only-card {
        min-height: 140px !important; /* Even more compact on mobile */
        max-height: 160px !important;
    }
    
    .boka-card.mobile-only-card .promo-image-container {
        height: 85px !important; /* More compact image area */
    }
    
    .boka-card.mobile-only-card .promo-logo-overlay {
        max-width: 70px !important; /* Smaller logo for mobile */
        max-height: 40px !important;
    }
    
    .boka-card.mobile-only-card .card-bottom {
        padding: 6px 14px 10px !important; /* Tighter padding */
        min-height: 55px !important; /* More compact bottom area */
    }
    
    .boka-card.mobile-only-card .boka-paket-btn {
        padding: 8px 14px !important;
        font-size: 10px !important;
        min-height: 36px !important;
        height: 36px !important;
        gap: 5px !important;
    }
    
    .boka-card.mobile-only-card .boka-paket-btn .btn-arrow {
        font-size: 11px !important;
    }
}

/* Ultra-compact for iPhone SE */
@media (max-width: 375px) {
    .boka-card.mobile-only-card {
        min-height: 130px !important; /* Ultra-compact for SE */
        max-height: 150px !important;
    }
    
    .boka-card.mobile-only-card .promo-image-container {
        height: 80px !important; /* Minimal image area */
    }
    
    .boka-card.mobile-only-card .promo-logo-overlay {
        max-width: 65px !important; /* Smallest logo for SE */
        max-height: 35px !important;
    }
    
    .boka-card.mobile-only-card .card-bottom {
        padding: 5px 12px 8px !important; /* Minimal padding */
        min-height: 50px !important; /* Minimal bottom area */
    }
    
    .boka-card.mobile-only-card .boka-paket-btn {
        padding: 7px 12px !important;
        font-size: 9px !important;
        min-height: 34px !important;
        height: 34px !important;
        gap: 4px !important;
    }
    
    .boka-card.mobile-only-card .boka-paket-btn .btn-arrow {
        font-size: 10px !important;
    }
}

/* =================================
   PROMOTIONAL CARD LOGO CENTERING FIX
   ================================= */

/* Enhanced promotional card styling - all screen sizes */
@media (max-width: 1024px) {
    .boka-card.mobile-only-card .promo-image-container {
        height: 100px !important;
        background-image: url('../../images/boka/sommarbanner.webp');
        background-size: cover;
        background-position: center center !important;
        position: relative !important; /* Ensure relative positioning for absolute child */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important; /* Ensure logo doesn't overflow */
    }
    
    .boka-card.mobile-only-card .promo-logo-overlay {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        max-width: 80px !important;
        max-height: 50px !important;
        width: auto !important;
        height: auto !important;
        object-fit: contain !important;
        z-index: 10 !important; /* Higher z-index to ensure visibility */
        display: block !important; /* Ensure it's displayed */
    }
}

/* iPhone-specific promotional card optimizations */
@media (max-width: 480px) {
    .boka-card.mobile-only-card .promo-image-container {
        height: 85px !important;
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .boka-card.mobile-only-card .promo-logo-overlay {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        max-width: 70px !important;
        max-height: 40px !important;
        z-index: 10 !important;
        display: block !important;
    }
}

/* Ultra-compact for iPhone SE */
@media (max-width: 375px) {
    .boka-card.mobile-only-card .promo-image-container {
        height: 80px !important;
        position: relative !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .boka-card.mobile-only-card .promo-logo-overlay {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        max-width: 65px !important;
        max-height: 35px !important;
        z-index: 10 !important;
        display: block !important;
    }
}

/* =================================
   COMPREHENSIVE LOGO CENTERING - ALL IPHONE SIZES
   ================================= */

/* iPhone SE (375px) - Logo centering */
@media (max-width: 375px) {
    .boka-card.mobile-only-card .promo-image-container {
        position: relative !important;
        display: block !important; /* Change to block for better control */
        overflow: hidden !important;
    }
    
    .boka-card.mobile-only-card .promo-logo-overlay {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        margin: 0 !important;
        padding: 0 !important;
        z-index: 999 !important;
        display: block !important;
    }
}

/* iPhone 12/13/14 mini (375.01px - 389px) - Logo centering */
@media (min-width: 375.01px) and (max-width: 389px) {
    .boka-card.mobile-only-card .promo-image-container {
        position: relative !important;
        display: block !important;
        overflow: hidden !important;
    }
    
    .boka-card.mobile-only-card .promo-logo-overlay {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        margin: 0 !important;
        padding: 0 !important;
        z-index: 999 !important;
        display: block !important;
        max-width: 72px !important;
        max-height: 42px !important;
    }
}

/* iPhone 12/13/14 standard (390px - 392px) - Logo centering */
@media (min-width: 390px) and (max-width: 392px) {
    .boka-card.mobile-only-card .promo-image-container {
        position: relative !important;
        display: block !important;
        overflow: hidden !important;
    }
    
    .boka-card.mobile-only-card .promo-logo-overlay {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        margin: 0 !important;
        padding: 0 !important;
        z-index: 999 !important;
        display: block !important;
        max-width: 75px !important;
        max-height: 45px !important;
    }
}

/* iPhone 14 Pro, iPhone 15, iPhone 15 Pro, iPhone 16 (393px - 401px) - Logo centering */
@media (min-width: 393px) and (max-width: 401px) {
    .boka-card.mobile-only-card .promo-image-container {
        position: relative !important;
        display: block !important;
        overflow: hidden !important;
    }
    
    .boka-card.mobile-only-card .promo-logo-overlay {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        margin: 0 !important;
        padding: 0 !important;
        z-index: 999 !important;
        display: block !important;
        max-width: 78px !important;
        max-height: 47px !important;
    }
}

/* iPhone 16 Pro (402px - 427px) - Logo centering */
@media (min-width: 402px) and (max-width: 427px) {
    .boka-card.mobile-only-card .promo-image-container {
        position: relative !important;
        display: block !important;
        overflow: hidden !important;
    }
    
    .boka-card.mobile-only-card .promo-logo-overlay {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        margin: 0 !important;
        padding: 0 !important;
        z-index: 999 !important;
        display: block !important;
        max-width: 80px !important;
        max-height: 48px !important;
    }
}

/* iPhone 12/13/14 Plus (428px - 429px) - Logo centering */
@media (min-width: 428px) and (max-width: 429px) {
    .boka-card.mobile-only-card .promo-image-container {
        position: relative !important;
        display: block !important;
        overflow: hidden !important;
    }
    
    .boka-card.mobile-only-card .promo-logo-overlay {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        margin: 0 !important;
        padding: 0 !important;
        z-index: 999 !important;
        display: block !important;
        max-width: 82px !important;
        max-height: 50px !important;
    }
}

/* iPhone 14 Pro Max, iPhone 15 Plus, iPhone 15 Pro Max, iPhone 16 Plus (430px - 439px) - Logo centering */
@media (min-width: 430px) and (max-width: 439px) {
    .boka-card.mobile-only-card .promo-image-container {
        position: relative !important;
        display: block !important;
        overflow: hidden !important;
    }
    
    .boka-card.mobile-only-card .promo-logo-overlay {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        margin: 0 !important;
        padding: 0 !important;
        z-index: 999 !important;
        display: block !important;
        max-width: 85px !important;
        max-height: 52px !important;
    }
}

/* iPhone 16 Pro Max (440px - 480px) - Logo centering */
@media (min-width: 440px) and (max-width: 480px) {
    .boka-card.mobile-only-card .promo-image-container {
        position: relative !important;
        display: block !important;
        overflow: hidden !important;
    }
    
    .boka-card.mobile-only-card .promo-logo-overlay {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        margin: 0 !important;
        padding: 0 !important;
        z-index: 999 !important;
        display: block !important;
        max-width: 88px !important;
        max-height: 55px !important;
    }
}

/* Fix for 479px specifically - ensure coverage */
@media (max-width: 479px) {
    .boka-card.mobile-only-card .promo-logo-overlay {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        margin: 0 !important;
        padding: 0 !important;
        z-index: 999 !important;
        display: block !important;
    }
    
    .boka-card.mobile-only-card .promo-image-container {
        position: relative !important;
        display: block !important;
        overflow: hidden !important;
    }
}

/* Remove logo from promotional card */
@media (max-width: 1024px) {
    .boka-card.mobile-only-card .promo-logo-overlay {
        display: none !important; /* Hide logo completely */
    }
}

/* TODO: For large background images (e.g., .boka-menu-left-content), consider lazy loading via JS if not above the fold. See documentation for IntersectionObserver-based background image lazy loading. */