/* Hide info icon on mobile in Praktisk Info sections */
@media (max-width: 991.98px) {
    .info-icon {
        display: none !important;
    }
}

/* Responsive scaling for different screen sizes */
/* 27 inch screens (2560x1440) */
@media (min-width: 1920px) and (max-width: 2560px) {
    .arr-cards-container,
    .menu-cards,
    .people-step-split {
        transform: scale(1.1);
        transform-origin: center top;
    }
}

/* 21 inch screens (1920x1080) */
@media (min-width: 1600px) and (max-width: 1919px) {
    .arr-cards-container,
    .menu-cards,
    .people-step-split {
        transform: scale(0.95);
        transform-origin: center top;
    }
}

/* 16 inch screens (1366x768) */
@media (min-width: 1200px) and (max-width: 1599px) {
    .arr-cards-container,
    .menu-cards,
    .people-step-split {
        transform: scale(0.85);
        transform-origin: center top;
    }
}

/* 13 inch screens (1024x768) */
@media (min-width: 992px) and (max-width: 1199px) {
    .arr-cards-container,
    .menu-cards,
    .people-step-split {
        transform: scale(0.75);
        transform-origin: center top;
    }
}

/* Tablet version (768px - 991px) */
@media (min-width: 768px) and (max-width: 991.98px) {
    .arr-cards-container,
    .menu-cards,
    .people-step-split {
        transform: scale(0.65);
        transform-origin: center top;
    }
    
    /* Tablet-specific adjustments for arrangementer */
    .arr-cards-container {
        padding: 0 15px;
    }
    
    .menu-card {
        width: 200px !important;
        height: 200px !important;
    }
    
    .people-step-content {
        padding: 30px 15px;
    }
}

/* Desktop: keep cards in row with size options below each card */
@media (min-width: 768px) {
    .menu-cards .row {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: space-between !important;
    }
    
    .menu-cards .col-lg-3 {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }
    
    .menu-card {
        margin: 0 auto 20px auto !important;
    }
    
    .size-options {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        width: 100% !important;
        margin: 0 auto !important;
    }
}

/* Desktop: set card size to 360x360 */
@media (min-width: 992px){
    .container.menu-cards .menu-card{
        width: 240px !important;
        height: 240px !important;
        max-width: 240px !important;
        max-height: 240px !important;
    }
}
/* Extracted from inline styles in arrangementer.html */
.arr-cards-container{ margin-top:24px; margin-bottom:60px; max-width:1600px; margin-left:auto; margin-right:auto; padding:0 24px; }
.arr-cards-row{ gap:10px; flex-wrap:nowrap; }
/* Arrangementer Styles */

/* Mobile responsive fixes for arrangementer page */
@media (max-width: 991.98px) {
    /* Remove padding from body on mobile for arrangementer page */
    body {
        padding: 0 !important;
    }
    
    /* Remove padding from navbar container on mobile */
    .navbar .container {
        padding-right: 0 !important;
        padding-top: 12px !important;
        padding-bottom: 11px !important;
        padding-left: 12px !important;
    }
    
    /* Remove padding from navbar on mobile */
    .navbar {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
    
    /* Navbar cart square padding and height */
    .navbar-cart-square {
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
        height: 60px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    /* Mobile menu positioning - close to navbar without overlap */
    .offcanvas-body {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }
    
    /* Fix navbar sticky behavior */
    .navbar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 1050 !important;
    }
    
    /* Remove mobile gap under navbar */
    body {
        padding-top: 0 !important;
    }
}

/* (Removed custom desktop gutter overrides to align with provided file) */
.menu-card {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    transition: transform 0.3s ease;
    border: none;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    z-index: 1;
    pointer-events: none; /* Disable clicks on the whole card */
    margin-left: 0;
    margin-right: 0;
}

/* Force fixed card layout in one row and remove column padding */
.menu-cards .col-lg-3,
.menu-cards .col-md-6 {
    flex: 0 0 auto !important;
    width: auto !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.menu-card { margin-left: auto; margin-right: auto; }

/* Prevent clicks on the visual content of the card (image/overlay/title),
   but keep buttons below clickable */
.menu-card .card-overlay,
.menu-card .card-body { pointer-events: none; }

/* Remove border radius from cards */
.menu-card, .menu-card .card-body, .menu-card .card-overlay, .card, .fit-cover { border-radius: 0 !important; }

.menu-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
}

/* Mobile responsiveness (does not affect desktop) */
@media (max-width: 991.98px){
    /* Keep 2 cards per row on tablets */
    .menu-cards .col-md-6{ flex: 0 0 auto; width: 50%; }
}
@media (max-width: 767.98px){
    /* One card per row on mobile - show card then price options */
    .menu-cards .row{ 
        --bs-gutter-x: 0 !important; 
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }
    
    /* Each column becomes full width and centered */
    .menu-cards .col-md-6, 
    .menu-cards .col-lg-3{ 
        width: 100% !important; 
        padding-left: 0 !important; 
        padding-right: 0 !important; 
        margin-bottom: 40px !important; /* Space between card+options groups */
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
    }
    
    /* Card centered with max 280px width */
    .menu-card{ 
        width: 280px !important; 
        height: 280px !important;
        max-width: 280px !important;
        max-height: 280px !important;
        aspect-ratio: 1 / 1 !important; 
        margin: 0 auto 20px auto !important;
    }
    
    /* Size options directly below card, centered */
    .size-options{ 
        display: flex !important; 
        flex-direction: column !important; 
        align-items: center !important;
        gap: 12px !important; 
        margin: 0 auto !important; 
        padding: 0 20px !important; 
        width: 100% !important;
        max-width: 320px !important;
    }
    
    /* Size option buttons */
    .size-option{ 
        display: block !important; 
        width: 100% !important; 
        max-width: 280px !important; 
        margin: 0 !important; 
        transform: none !important; 
        position: relative !important; 
        box-sizing: border-box !important; 
        z-index: 6 !important;
        padding: 12px 24px !important;
        text-align: center !important;
    }
    
    .size-option.active, 
    .size-option:hover{ 
        transform: none !important; 
    }
    
    /* Adjust hero/people-step spacing */
    #people-step-arr .col-12.col-lg-5, 
    #people-step-arr .col-12.col-lg-7{ 
        width: 100%; 
    }
    
    #people-step-arr .col-12.col-lg-7{ 
        margin-top: 16px; 
    }
    
    /* Bottom bar spacing to avoid overlap */
    body{ 
        padding-bottom: 84px; 
    }
}

.menu-bg-1 {
    background-image: url('/static/img/meny1Buffet.jpg');
}

.menu-bg-2 {
    background-image: url('/static/img/meny2.jpg');
}

.menu-bg-3 {
    background-image: url('/static/img/meny3.jpg');
}

.menu-bg-4 {
    background-image: url('/static/img/meny4.jpg');
}

.card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 0;
}

.menu-card .card-body {
    position: relative;
    z-index: 2;
    color: white;
}

.course-step {
    margin-bottom: 2rem;
    display: block !important;
    visibility: visible !important;
}

.course-step.active {
    display: block !important;
    visibility: visible !important;
}

/* Single page layout for all menu items */
.menu-items-single-page {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.menu-category {
    background: transparent;
    padding: 1.5rem;
}

.menu-category h4 {
    display: none !important;
}

.items-grid {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.item {
    background: #fff;
    padding: 1rem;
    transition: all 0.3s ease;
    cursor: pointer;
    width: 100%;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    margin-bottom: 0.5rem;
}

.item:hover {
    box-shadow: 0 2px 8px rgba(0,123,255,0.15);
}

.item.selected {
    background: transparent;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border-bottom: 2px solid #b3ba8e;
}

/* Desktop only underline for selected menu items */
@media (min-width: 768px) {
    .item.selected {
        border-bottom: 2px solid #b3ba8e;
    }
}

.item.disabled {
    cursor: not-allowed;
}

.count-badge {
    background: transparent;
    border: none;
    color: black;
    font-weight: normal;
}

/* Complete Order Button */
.complete-order-btn {
    background: transparent;
    border: 2px solid #bf6d4b;
    color: #bf6d4b;
    padding: 12px 24px;
    font-size: 16px;
    font-weight: 700;
    border-radius: 0;
    transition: all 0.2s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.complete-order-btn:hover { background:#bf6d4b; color:#fff; }
.complete-order-btn:active { background:#bf6d4b; color:#fff; }

.complete-order-btn:disabled {
    background: #6c757d;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Menu Header */
.menu-header {
    background: transparent;
    padding: 2rem;
    margin-bottom: 2rem;
}

.menu-title {
    color: var(--bs-primary);
    font-weight: 700;
    font-size: 2rem;
}

.menu-price {
    font-size: 1.5rem;
    font-weight: 600;
}

.menu-description {
    font-size: 1.1rem;
    font-style: italic;
}

.course-step h4 {
    color: var(--bs-primary);
    margin-bottom: 1rem;
}

.item {
    margin-bottom: 1rem;
}

.item .card {
    transition: all 0.3s ease;
    border: 1px solid #dee2e6;
    background: #fff;
}

.item .card:hover {
    border-color: var(--bs-primary);
    transform: translateY(-2px);
}

.item.selected .card {
    border-color: var(--bs-primary);
    background-color: rgba(13, 110, 253, 0.1);
}

.item.disabled {
    pointer-events: none;
}

.btn-select-item {
    transition: all 0.3s ease;
}

.item.selected .btn-select-item {
    background-color: var(--bs-primary);
    color: white;
}

.progress {
    height: 8px;
    border-radius: 4px;
}

.progress-bar {
    transition: width 0.3s ease;
}

.menu-card.selected {
    border: 2px solid var(--bs-primary);
    box-shadow: 0 0 10px rgba(0,123,255,0.3);
    background-color: rgba(0,123,255,0.1);
}

.menu-card.selected::after {
    content: "✓";
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: var(--bs-primary);
    color: white;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: bold;
}

.menu-card:hover {
    transform: translateY(-5px) scale(1.03);
    box-shadow: 0 6px 20px rgba(0,0,0,0.18);
}

.fit-cover {
    object-fit: cover;
}

.extra-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: 1px solid #dee2e6;
}

.extra-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
}

.extra-card .card-body {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.extra-card .card-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.extra-card .card-text {
    font-size: 0.9rem;
    color: #6c757d;
    margin-bottom: 1rem;
}

.extra-card .price {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--bs-primary);
    margin-top: auto;
}

/* Size Options */
.size-options { 
    margin-bottom: 16px !important; 
    padding: 0 12px; 
}

.size-option {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 12px 0;
    transform: none !important;
    position: relative;
    box-sizing: border-box;
    z-index: 6;
}

.size-option.active, .size-option:hover { 
    transform: none !important; 
}

/* Accordion Styles */
.accordion .accordion-button { 
    background-color: #f5e1d9; 
    border: 0; 
    color: #495057; 
    border-radius: 0; 
    box-shadow: none; 
    padding: 12px 0; 
}

.accordion .accordion-button:not(.collapsed) { 
    background-color: #fcf8f2; 
    color: #495057; 
    box-shadow: none; 
}

.accordion .accordion-button::after { 
    filter: invert(35%); 
}

.accordion .accordion-header { 
    border-bottom: 1px solid #be6d4c; 
}

/* Ensure item titles are visible */
.item-title {
    color: #333;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.item-allergens {
    color: #6c757d;
    font-size: 0.875rem;
}

/* Hide hero sections when hvor mange is visible on mobile */
@media (max-width: 991.98px) {
    #people-step-arr:not([style*="display: none"]) ~ .hero-section,
    #people-step-arr:not([style*="display: none"]) ~ section[style*="background: linear-gradient"],
    #people-step-arr:not([style*="display: none"]) ~ .menu-hero,
    #people-step-arr:not([style*="display: none"]) ~ section.menu-hero,
    #people-step-arr:not([style*="display: none"]) ~ section[class*="menu-hero"] {
        display: none !important;
    }
    
    /* Hide all hero sections when people-step is visible */
    body:has(#people-step-arr:not([style*="display: none"])) .menu-hero,
    body:has(#people-step-arr:not([style*="display: none"])) section[class*="menu-hero"],
    body:has(#people-step-arr:not([style*="display: none"])) section[style*="background: linear-gradient"] {
        display: none !important;
    }
    
    /* Force hide hero sections when people-step is visible on mobile */
    #people-step-arr:not([style*="display: none"]) ~ * .menu-hero,
    #people-step-arr:not([style*="display: none"]) ~ * section[class*="menu-hero"],
    #people-step-arr:not([style*="display: none"]) ~ * section[style*="background: linear-gradient"] {
        display: none !important;
    }
    
    /* Hide hero sections when people-step is visible - more specific selectors */
    #people-step-arr:not([style*="display: none"]) ~ .hero-section,
    #people-step-arr:not([style*="display: none"]) ~ section[style*="background: linear-gradient"],
    #people-step-arr:not([style*="display: none"]) ~ .menu-hero,
    #people-step-arr:not([style*="display: none"]) ~ section.menu-hero,
    #people-step-arr:not([style*="display: none"]) ~ section[class*="menu-hero"],
    #people-step-arr:not([style*="display: none"]) ~ * .menu-hero,
    #people-step-arr:not([style*="display: none"]) ~ * section[class*="menu-hero"],
    #people-step-arr:not([style*="display: none"]) ~ * section[style*="background: linear-gradient"] {
        display: none !important;
    }
}