html, body {
    height: auto; /* Increases the page height to 150% of the viewport */
    background-color: #F9EFD4;
}
  
/* Navbar container */
.navbar {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #645240; /* Dark background */
    overflow: hidden; /* Contain floats */
    padding: 10px 20px;
}

/* Navbar links */
.navbar a {
    color: #f2f2f2; /* Light text */
    text-align: end;
    padding: 10px 15px;
    margin-right: 10px;
    text-decoration: none;
    transition: background-color 0.3s;
}

/* Hover effect for links */
.navbar a:hover {
    background-color: #ddd;
    color: rgb(0, 0, 0);
}

.navbar-logo {
    display: flex;
    justify-content: center;
    width: 100px; /* Adjust the size of the image */
    height: auto; /* Maintain aspect ratio */
    margin-right: 0px;
}

.nav-links {
    display: flex;
    gap: 15px; /* Adjusts spacing between links */
}

.nav-links a {
    font-family: "DM Serif Text", serif;
    color: white;
    text-decoration: none;
    font-size: 18px;
}

/*New */
.pagination {
    display: flex;
    justify-content: flex-end; /* pushes button to the right */
    align-items: center;
    padding: 10px;
}

.cart-btn {
    background-color: #ffd000;    /* optional background */
    border: none;              /* remove default border */
    cursor: pointer;      /* shrink button padding */
    border-radius: 80px;        /* optional rounded look */
    align-items: right;
}

.tombolbelanja {
    width: 50px;   /* smaller image */
    height: auto;  /* smaller image */
    object-fit: contain;
}

/* Search container styling */
.search-container {
    padding: 5px 10px;
    margin-left: end;        /* Pushes the search bar to the right */
    display: flex;
    align-items: center;
    gap: 10px;
}

.search-container input[type="text"] {
    font-family: "DM Serif Text", serif;
    align-items: end;
    padding: 5px;
    border: none;
    border-radius: 0px;
    font-size: 16px;
}

.search-container button {
    font-family: "DM Serif Text", serif;
    background-color: #ffd000;
    border: none;
    border-radius: 50px;
    color: #fff;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s;
    padding-top: 5px;
    padding-bottom: 5px;
    align-items: end;
}

.search-container button:hover {
    background-color: #777;
}

.carousel-item h2 {
    font-family: "DM Serif Text", serif;
    color: black;
}

.carousel-item p {
    font-family: "DM Serif Text", serif;
    color: black;
}

/* This is the general carousel image style, but will be overridden by .promo-box img */
.carousel-inner img {
    max-width: 100%;  
    height: auto;    
    margin: 0 auto;  
    display: block;
}

.about-us {
    background-color: white; /* Light gray */
    display: flex;
    justify-content: center; /* Centers the cards horizontally within the container */
    padding: 20px;
}

/* Dari GPT*/
.about-us p {
    text-align: center;
    /* This line is critical for desktop readability and mobile flexibility */
    max-width: 800px; 
    margin: 0 auto;
    line-height: 1.6;
    font-family: "DM Serif Text", serif;
    color: #645240;
    /* Add padding for mobile view to prevent text from hitting screen edges */
    padding: 0 15px; 
}

.about-us img {
    /* Ensures the image never exceeds the width of its parent container */
    max-width: 100%; 
    /* Maintains the correct height-to-width ratio */
    height: auto; 
    /* Display as a block element to enable margin auto centering */
    display: block; 
    /* Center the image horizontally */
    margin: 20px auto; 
    /* Add a little space below for separation */
    margin-bottom: 25px; 
    /* Optional: Give the images a little roundness or shadow */
    border-radius: 8px; 
}

.font-pemisah h1 {
    font-family: "DM Serif Text", serif;
    align-items: center;
    text-align: center;
    color: #645240;
}

/* --- MERGED: Font Pemisah H2 --- */
.font-pemisah h2 {
    font-family: "Agbalumo", system-ui;
    font-size: 5rem;
    align-items: center;
    text-align: center;
    color: #645240;
}

/* Card container (to hold all the cards) */
/* Row container (for the 2 rows of cards) */
.card-column {
    display: flex;
    justify-content: flex-start; /* align cards to the left */
    margin-bottom: 20px; /* Space between the rows */
    margin-left: 0;
    margin-right: auto;
}

/* --- HOME PAGE MENU LAYOUT FIX: home-menu-section --- */
.home-menu-section {
    display: flex;       
    flex-wrap: wrap;     
    justify-content: center; 
    max-width: 1200px;   /* <--- CHECK/SET THIS VALUE */
    margin: 50px auto;   
    padding: 0 10px;
}

/* Card container (from OrderStyle, more specific) */
        .card-row {
            display: flex;
            justify-content: center; /* Centers cards horizontally in each row */
            margin-bottom: 20px; /* Space between the rows */
        }

        /* Card container*/
        .card {
            width: 200px; /* Width of the card */
            padding: 20px; /* Spacing inside the card */
            margin: 20px; /* Space between cards */
            border: 1px solid #ddd; /* Light border around the card */
            border-radius: 8px; /* Rounded corners */
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow */
            background-color: #ffffff; /* Background color of the card */
            font-family: 'Arial', sans-serif; /* Set the font family */
            transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth animation */
            display: inline-block; /* Allows multiple cards to be inline */
            
            text-align: center;
            justify-content: center;
            flex-direction: column;
            display: flex;
            height: auto;
        }

    /*Test */
        .card-1 {
            width: auto; /* Width of the card */
            padding: 20px; /* Spacing inside the card */
            margin: 20px; /* Space between cards */
            border: 1px solid #ddd; /* Light border around the card */
            border-radius: 8px; /* Rounded corners */
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow */
            background-color: #ffffff; /* Background color of the card */
            font-family: 'Arial', sans-serif; /* Set the font family */
            transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth animation */
            display: inline-block; /* Allows multiple cards to be inline */
            
            text-align: center;
            justify-content: center;
            flex-direction: column;
            display: flex;
            height: auto;
        }

.card-jual-row {
    display: flex;
    justify-content: center; /* Centers cards horizontally in each row */
    margin-bottom: 20px; /* Space between the rows */
}

.card-jual {
    align-items: center;
    justify-content: center;
    margin-top: 10px;
}

.card-container-wrapper {
    display: flex;
    justify-content: center;
    gap: 50px;
    margin-top: 50px;
}

.card-container {
    display: flex;
    max-width: 420px;
}

.card-jual h1 {
    font-family: "DM Serif Text", serif;
    color: #D90000;
    align-items: center;
    text-align: center;
    font-size: 5rem;
    margin-top: 50px;
}

.footer {
    padding: 2rem;
    background-color: #645240;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.footer h1 {
    color: white;
    font-family: "DM Serif Text", serif;
    font-weight: bold;
    text-decoration: none;
    text-align: center;
}

.footer p {
    color: white;
    font-family: "DM Serif Text", serif;
    text-align: center;
    font-size: 20px;
}

.footer p a {
    text-decoration: none;  /* removes underline */
    color: rgb(255, 255, 255);           /* text color */
    margin: 0 5px;          /* small spacing between links */
}

.footer p1 {
    color: white;
    font-family: "DM Serif Text", serif;
    text-align: center; 
}


.footer2 {
    padding: 1rem;
    background-color: #8d0505;
}

.footer2-text p {
    margin-top: 10px;
    color: rgb(255, 255, 255);
    font-family: "DM Serif Text", serif;
    max-width: auto;
    text-decoration: none;
}

/* --- CAROUSEL STYLING FOR PROMO SECTION (UPDATED FOR IMAGE FIT) --- */

/* Ensures the carousel container itself fills the space */
#promoCarousel {
    width: 100%;
    margin-bottom: 20px; 
}

/* The box inside each slide that provides the light gray background */
.promo-box {
    background-color: #e0e0e0; 
    /* REMOVED FIXED HEIGHT (height: 300px) */
    height: auto; /* Allow height to be determined by content (image) */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    width: 100%;
    padding: 0; /* REMOVED padding to let image fill entirely */
    margin: 0;
}

/* Styling for the actual image inside the promo-box */
.promo-box img {
    width: 100%; /* Image must fill the width of the container */
    height: auto; /* THIS IS THE KEY: Maintains the aspect ratio */
}

/* Styling for the "PROMO" text inside the box (retained for backward compatibility) */
.promo-box h1 {
    font-family: "DM Serif Text", serif;
    font-size: 4rem; 
    color: #645240; 
    margin: 0;
    padding-top: 50px; 
}

/* Customizing the Indicators (The small circles) */
.carousel-indicators {
    position: absolute;
    bottom: 20px; 
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    padding: 0;
}

/* Style for the individual indicator dots */
.carousel-indicators button {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: rgba(100, 82, 64, 0.5); 
    border: none;
    margin: 0 5px;
    opacity: 1; 
}

/* Style for the ACTIVE (current) indicator dot */
.carousel-indicators .active {
    background-color: #645240; 
}

/* --- OFFCANVAS (SIDEBAR) STYLING --- */

/* The Hamburger Button container */
.menu-toggle-btn {
    background-color: #645240; 
    border: 2px solid #ffd000; 
    border-radius: 8px; 
    width: 60px;
    height: 60px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    padding: 12px;
    cursor: pointer;
    margin-right: auto; 
}

/* The actual hamburger lines */
.hamburger-icon {
    width: 100%;
    height: 4px;
    background-color: #ffd000; 
    border-radius: 2px;
}

/* Offcanvas container */
.offcanvas {
    background-color: #645240; 
    width: 300px; 
}

/* Offcanvas Body - for the links */
.offcanvas-body {
    padding: 20px 0;
}

/* List of Links */
.offcanvas-nav-links {
    list-style: none;
    padding: 0;
    margin-bottom: 50px;
}

.offcanvas-nav-links li {
    width: 60%; 
    padding: 20px 30px; 
    border-radius: 0 50px 50px 0;
    margin-bottom: 15px; 
    transition: background-color 0.2s;
}

.offcanvas-nav-links li a {
    color: white;
    font-family: "DM Serif Text", serif;
    text-decoration: none;
    font-size: 1.5rem; 
    display: flex;
    align-items: center;
}

.offcanvas-nav-links li a img {
    width: 30px; 
    height: 30px; 
    margin-right: 15px; 
}

/* Active State (Yellow background for the current page) */
.offcanvas-nav-links li.active {
    background-color: #ffd000;
}

.offcanvas-nav-links li.active a {
    color: #645240; 
}

/* Footer Logo in Offcanvas */
.offcanvas-footer-logo {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
}

.offcanvas-footer-logo img {
    width: 100px;
}

.offcanvas-footer-logo span {
    display: block;
    color: white;
    font-family: "DM Serif Text", serif;
    font-size: 0.9rem;
}

/* Override Bootstrap Close Button for Dark Background */
.offcanvas-header .btn-close {
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffd000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
    opacity: 1;
}

/* --- ORDER PAGE STYLING (New Section) --- */

.main-content-area h1 {
    font-family: "DM Serif Text", serif;
    text-align: center;
    color: #645240;
    margin: 40px 0 30px;
    font-size: 2.5rem;
}

.main-content-area, 
.order-page-wrapper, 
.container, 
body {
    max-width: 100% !important;
    width: 100% !important;
    margin: 0 auto;
    padding: 0;
}

/* Container for the entire list */
.order-list-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
    margin: 0 auto 50px;
}

/* Single Item Card */
.order-item-card { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    padding: 15px; 
    border: 1px solid #ddd; /* Match original card border color */ 
    border-radius: 8px; /* NEW: Ensure all cards in the row are the same height */ 
    height: 100%; gap: 10px;}
    
    .order-item-card:last-child { border-bottom: none; /* No line under the last item */
}

/* Image */
.item-img img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 4px;
}

/* Details */
.item-name {
    font-family: "DM Serif Text", serif;
    font-size: 1.2rem;
    color: #645240;
    margin-bottom: 5px;
}

.item-price {
    font-family: 'Agbalumo', cursive;
    font-size: 1rem;
    color: #D90000;
}

/* Quantity Controls */
.quantity-controls {
    display: flex;
    align-items: center;
    justify-content: space-around;
    border: 1px solid #645240;
    border-radius: 5px;
    height: 35px;
    padding: 0 5px;
}

.quantity-btn {
    background: none;
    border: none;
    color: #645240;
    font-weight: bold;
    cursor: pointer;
    font-size: 1.2rem;
    padding: 0 5px;
    line-height: 1;
}

.item-quantity {
    font-family: 'Agbalumo', cursive;
    font-size: 1.1rem;
}

/* Subtotal */
.item-subtotal {
    text-align: right;
    font-family: 'Agbalumo', cursive;
    font-size: 1.1rem;
    color: #D90000;
}

/* --- ORDER SUMMARY STYLING --- */

.quantity-controls, .item-subtotal {
    width: 100%;
    max-width: 150px; /* Constrain width for a compact look */
    margin: 5px auto; /* Center it */
}

.order-summary {
    width: 90%;
    max-width: 800px;
    margin: 30px auto;
    padding: 20px;
    border-top: 3px solid #645240;
    background-color: #F0E6D8;
    border-radius: 8px;
}

.summary-line {
    display: flex;
    justify-content: space-between;
    padding: 5px 0;
    font-family: 'Agbalumo', cursive;
}

.total-line {
    font-size: 1.4rem;
    font-weight: bold;
    margin-top: 10px;
    border-top: 1px dashed #645240;
    padding-top: 10px;
    color: #D90000;
}

.checkout-btn {
    width: 100%;
    padding: 15px;
    margin-top: 20px;
    background-color: #D90000;
    color: white;
    border: none;
    border-radius: 5px;
    font-family: "DM Serif Text", serif;
    font-size: 1.4rem;
    cursor: pointer;
    transition: background-color 0.2s;
}

.checkout-btn:hover {
    background-color: #A60000;
}

/* CSS for Unavailable Items */
.unavailable-item {
    opacity: 0.6; /* Slightly fade the whole card */
    pointer-events: none; /* Crucial: Disables all mouse interaction */
}

.unavailable-item .card-title,
.unavailable-item .card-text {
    text-decoration: line-through; /* Apply strike-through to text */
    color: #6c757d !important; 
}

/* Grey out the image */
.unavailable-item img {
    filter: grayscale(80%);
}

/* --- NEW STYLES: Dimming Quantity Controls for Sold Out Items --- */

/* Dim the entire control box */
.unavailable-item .quantity-controls {
    opacity: 0.5; /* Makes the box and content look dimmed */
    pointer-events: none; /* Crucial: Prevents any mouse clicks on buttons */
}

/* Optional: Slightly grey out the button borders/text for consistency */
.unavailable-item .quantity-btn {
    border-color: #aaa; 
    color: #aaa;
}

/* Optional: Grey out the quantity number */
.unavailable-item .item-quantity {
    color: #aaa;
}


/* ========================================= */
/* --- MOBILE RESPONSIVENESS (MAX-WIDTH 767px) --- */
/* ========================================= */

@media (max-width: 767px) {
    /* --- NAVBAR ADJUSTMENTS --- */
    .navbar {
        /* Ensure the hamburger button is on the left and cart is on the right */
        justify-content: space-between;
        padding: 10px;
    }

    .navbar-logo {
        /* Make logo slightly smaller on mobile */
        width: 80px; 
    }
    
    .menu-toggle-btn {
        /* Keep the hamburger button visible and on the left */
        margin-right: 0;
        width: 50px;
        height: 50px;
        padding: 10px;
    }

    .tombolbelanja {
        /* Ensure cart icon is small and visible */
        width: 40px;
    }

    /* --- GLOBAL HEADINGS --- */
    .main-content-area h1 {
        font-size: 2rem;
        margin: 20px 0 15px;
    }

    /* --- FOOTER ADJUSTMENTS --- */
    .footer {
        padding: 1.5rem 10px;
    }

    .footer p, .footer p1 {
        /* Reduce font size for readability */
        font-size: 16px;
        margin-bottom: 5px;
    }
}



/* ========================================= */
/* --- ORDER CARD RESPONSIVENESS (MAX-WIDTH 576px - Phones) --- */
/* ========================================= */

@media (max-width: 575px) {
    /* Main Content Area */
    .order-list-container {
        width: 95%; /* Use more screen width */
        padding: 10px;
        /* The main layout is handled by the Bootstrap row/col classes in Order_view.php */
    }

    /* Single Item Card: CHANGE FROM GRID TO STACKED FLEX */
    .order-item-card {
        /* Override the desktop grid layout */
        display: flex; 
        flex-direction: column; /* Stack image, details, controls, subtotal vertically */
        align-items: center; /* Center everything horizontally */
        gap: 5px; /* Reduce vertical space */
        padding: 10px 0;
        text-align: center;
    }
    
    /* Image */
    .item-img img {
        width: 100px; /* Make the image slightly larger for better viewing */
        height: 100px;
    }

    /* Details (Name and Price) */
    .item-details {
        text-align: center;
        width: 100%;
        padding-top: 5px;
    }

    /* Quantity Controls */
    .quantity-controls {
        width: 120px; /* Keep controls compact and centered */
        margin: 5px 0;
        height: 40px;
    }

    .item-quantity {
        font-size: 1.2rem;
    }

    /* Item Subtotal */
    .item-subtotal {
        width: 100%;
        text-align: center; /* Center the price below the controls */
        margin-top: 10px;
        font-size: 1.2rem;
    }

    /* Order Summary (Final Totals) */
    .order-summary {
        width: 95%;
        padding: 15px;
        margin: 20px auto;
    }

    .total-line {
        font-size: 1.2rem;
    }

    .checkout-btn {
        font-size: 1.2rem;
        padding: 12px;
    }
}

/* --- Menu Cards Responsiveness for Home_view.php (NEW CODE) --- */

@media (max-width: 575px) {
    /* For the row containing the cards (Roti, Es Krim, Lainnya) */
    .card-row {
        /* Allows cards to wrap to the next line */
        flex-wrap: wrap; 
        /* Ensure the row uses the whole width to correctly center wrapped cards */
        width: 100%; 
    }

    /* For the individual cards */
    .card {
        /* Force two cards per row (approx. 50% - margins) */
        width: 45%; 
        /* Reduce the margin to save space */
        margin: 10px 5px; 
        /* Ensure the card content looks good on small width */
        padding: 15px 10px; 
    }

    /* FOR VERY SMALL PHONES (Optional: Stack to one card per row) */
    @media (max-width: 400px) {
        .card {
            width: 80%; /* Almost full width */
            margin: 10px auto; /* Center the single card */
        }
    }
}