/* carta.css */
body {
    background-color: var(--bg-black);
    font-family: "Merriweather", serif;
    font-optical-sizing: auto;
    font-style: normal;
    overflow-x: hidden;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.carta-title {
    color: var(--bg-orange);
    font-size: 3rem;
    font-weight: bold;
}

.card-category {
    width: 100%; /* Ensures card takes full width of its column */
    max-width: 280px; /* Limits the max width of the card */
    background-color: rgba(0, 0, 0, 0.7); /* Slightly transparent background */
    border: 2px solid var(--bg-gray);
    border-radius: 10px;
    overflow: hidden; /* Ensures image corners are rounded with card */
    transition: transform 0.2s ease-in-out, border-color 0.2s ease-in-out;
}

.card-category:hover {
    transform: translateY(-5px); /* Slight lift effect on hover */
    border-color: var(--bg-orange); /* Highlight border on hover */
}

.card-category img {
    width: 100%;
    height: 180px; /* Fixed height for consistent image size */
    object-fit: cover; /* Ensures image covers the area, cropping if necessary */
}

.card-category .card-body {
    padding: 1rem;
}

.card-title-gluck {
    color: var(--bg-orange); /* Category titles in orange */
    font-size: 1.8rem;
    font-weight: bold;
    margin-bottom: 0;
}

.carta-table {
    width: 100%; /* Make table full width within its container */
    max-width: 900px; /* Limit max width for better readability on large screens */
    border-collapse: collapse; /* Ensure borders are collapsed */
}

.carta-table th,
.carta-table td {
    padding: 10px;
    vertical-align: top; /* Align content to the top */
    border-bottom: 1px dashed rgba(255, 255, 255, 0.2); /* Light dashed separator */
}

.carta-table h2 {
    color: var(--bg-orange);
    font-size: 2rem;
    margin-bottom: 0; /* Remove default margin from h2 inside table */
}

#carta-item-subCat {
    color: var(--bg-yellow);
    font-weight: bold;
    font-size: 1.2rem;
    padding-top: 15px; /* Add some space above subcategories */
}

.carta-item p {
    color: var(--bg-orange);
    font-weight: bold; /* Make item names stand out */
    margin-bottom: 0.25rem; /* Small margin below item name */
}

.carta-item {
    color: var(--bg-white);
}

.carta-precio0 {
    color: var(--bg-white);
}
.carta-precio1 {
    color: var(--bg-yellow);
}
.carta-precio2 {
    color: var(--bg-orange);
}
.carta-precio3 {
    color: var(--bg-green);
}

/* Style for the "Atrás" button */
.btn-gluck-primary {
    background-color: var(--bg-orange);
    color: var(--bg-white);
    border: none;
    border-radius: 5px;
    padding: 10px 25px;
    font-size: 1.1rem;
    text-decoration: none;
    transition: background-color 0.3s ease;
}

.btn-gluck-primary:hover {
    background-color: var(--bg-yellow);
    color: var(--bg-black);
}

/* Responsive adjustments for the grid of cards */
@media (max-width: 575.98px) {
    /* On extra small screens, cards will naturally stack (row-cols-1) */
    .card-category {
        max-width: 80%; /* Make cards a bit wider on small phones */
    }
}

@media (min-width: 576px) and (max-width: 767.98px) {
    /* On small screens (sm), cards will display 2 per row */
}

@media (min-width: 768px) and (max-width: 991.98px) {
    /* On medium screens (md), cards will display 2 per row */
}

@media (min-width: 992px) {
    /* On large screens (lg) and up, cards will display 3 per row */
    .card-category {
        max-width: 300px; /* Slightly larger cards on larger screens */
    }
}

/* Adjustments for responsive table on smaller screens */
@media (max-width: 767.98px) {
    .carta-table {
        font-size: 0.9rem; /* Slightly reduce font size for smaller screens */
    }
    .carta-table h2 {
        font-size: 1.5rem;
    }
    .carta-item-subCat {
        font-size: 1.1rem;
    }
    /* Hide price columns for pizzas on very small screens to simplify */
    .carta-table th:nth-child(2),
    .carta-table td:nth-child(2),
    .carta-table th:nth-child(3),
    .carta-table td:nth-child(3),
    .carta-table th:nth-child(4),
    .carta-table td:nth-child(4) {
        display: table-cell; /* Default for medium */
    }

    /* For extra small screens, show only a single price column for pizzas */
    .carta-table th:nth-child(2),
    .carta-table td:nth-child(2) {
        display: none; /* Hide 'Personal' */
    }
    .carta-table th:nth-child(3),
    .carta-table td:nth-child(3) {
        display: table-cell; /* Show 'Mediana' */
        color: var(--bg-orange) !important; /* Ensure visibility */
    }
    .carta-table th:nth-child(4),
    .carta-table td:nth-child(4) {
        display: none; /* Hide 'Grande' */
    }

    /* Ensure specific price columns are styled */
    .carta-precio0,
    .carta-precio1,
    .carta-precio2,
    .carta-precio3 {
        padding-left: 5px;
        padding-right: 5px;
    }
}

/* Larger screens specific adjustments */
@media (min-width: 992px) {
    .carta-table {
        width: 70%; /* Slightly wider table on larger screens */
    }
}
@media (min-width: 992px) {
    .pizza-table { /* This class seems misplaced if it's only for pizzas.html */
        width: 100%; /* Table takes full width of its column */
    }
}

/* Styles for map and orders sections (already provided in previous response) */
.map-container {
    width: 100%;
    border: 2px solid var(--bg-gray);
    border-radius: 10px;
    overflow: hidden;
    margin-top: 15px;
}

.map-container iframe {
    width: 100%;
    height: 350px;
    display: block;
}

.orders-section {
    background-color: rgba(0, 0, 0, 0.7);
    border: 2px solid var(--bg-gray);
    border-radius: 10px;
    padding: 20px;
    margin-top: 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.orders-section .card-title-gluck {
    margin-bottom: 15px;
}

.orders-section a {
    display: flex;
    align-items: center;
    text-decoration: none;
    margin-bottom: 10px;
}

.orders-section img {
    margin-right: 10px;
}

.orders-section p {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--bg-white);
    margin-bottom: 0;
}

/* Responsive adjustments for map and orders sections */
@media (max-width: 767.98px) {
    .map-container iframe {
        height: 250px;
    }
    .orders-section {
        margin-top: 25px;
    }
    .orders-section p {
        font-size: 1.2rem;
    }
}

@media (min-width: 768px) {
    .row.justify-content-center.mt-3 > .col {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
    }
}

/* New styles for side images next to the table */
.table-side-img {
    max-height: 400px; /* Adjust height as needed to align with your table */
    width: auto; /* Maintain aspect ratio */
    object-fit: contain; /* Ensure the image fits without cropping */
    margin: 0 10px; /* Add some horizontal margin */
}

/* Adjust table max-width when side images are present */
@media (min-width: 992px) {
    .carta-table {
        max-width: none; /* Remove max-width when images are present, let col control it */
    }
}