/* Custom Font Fallback */
@font-face {
    font-family: 'ariana';
    src: url('../fonts/Ariana\ Pro\ Regular.otf') format('opentype');
}
body {
    /* padding:0pcl */
    font-family: 'ariana', 'Segoe UI', Roboto, sans-serif;
    background-color: #ffffff;
}

/* Container adjustment */
.navbar .container {
    min-height: 100px; /* Ensure enough height for the hanging logo */
    align-items: flex-start; /* Keeps the logo pinned to the top edge */
}

.logo-label {
    display: block;
    z-index: 1050;
    text-decoration: none;
    /* Remove 'position: absolute' to let the location badge sit next to it */
    position: relative; 
    top: 0;
}
.logo-orange-bg {
    background-color: #f39200;
    padding: 25px 45px 35px 45px;
    border-bottom-left-radius: 40px; 
    border-bottom-right-radius: 40px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

/* Adjust Location Badge spacing */
.location-badge {
    /* font-family: 'a', sans-serif; */
    font-weight: 600;
    font-size: 1.1rem;
    /* Pushes the badge down slightly to align with the center of the logo or buttons */
    margin-top: 25px; 
    margin-left: 15px; /* Adds space between the badge and the logo */
}

.logo-orange-bg:hover {
    transform: translateY(5px); /* Subtle "pull" effect on hover */
}

.logo-orange-bg img {
    height: 90px; /* Scaled for the container */
    width: auto;
}

/* Ensure the nav links don't hide behind the logo on small screens */
@media (max-width: 991px) {
    .logo-orange-bg {
        padding: 15px 25px 20px 25px;
            border-bottom-left-radius: 20px; 
    border-bottom-right-radius: 20px;
    }
    .logo-orange-bg img {
        height: 40px;
    }
}

/* Adjust scrolled state to keep the label visible but clean */
.navbar.scrolled .logo-orange-bg {
    padding-top: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

/* Navbar Styling */
.navbar {
    /* padding: 0rem 0; */
    
    background: transparent; /* Keep transparent for hero overlay */
     transition: background-color 0.4s ease, box-shadow 0.4s ease;
}
#logo-top {
    transition: opacity 0.3s ease;
}
#location-badge {
    transition: opacity 0.3s ease;
}   
 
/* This class will be added via JavaScript */
.navbar.scrolled {
    /* background: linear-gradient(to right, #ffffff00, #ffffff); */
     /* Solid white */
    /* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);  */
    /* Subtle shadow for depth */
}

/* Change text and icon colors when scrolled so they don't disappear */
.navbar.scrolled .location-badge,
.navbar.scrolled .nav-link {
    color: #000000 !important;
}

/* Optional: If you want the pill buttons to change style on scroll */
.navbar.scrolled .btn-dark-capsule {
    border: 1px solid #000;
}
.nav-actions button{
    cursor: pointer;
}

/* The Main Capsule */
.btn-dark-capsule {
    background: #000000;
    color: #ffffff;
    border: none;
    border-radius: 50px;
    padding: 12px 50px 12px 10px; /* Huge left padding to make room for the floating icon */
    /* display: inline-flex; */
    /* align-items: center; */
    /* font-family: 'Ariana Pro', sans-serif; */
    font-weight: 700;
    font-size: 1.1rem;
    position: relative; /* Essential for absolute positioning of the icon */
    overflow: visible;  /* CRITICAL: allows the icon to bleed out */
    
    /* Deep Shadow */
    box-shadow: 0 12px 24px rgba(0,0,0,0.4), 
                0 4px 8px rgba(0,0,0,0.3);
    
    transition: all 0.3s ease;
}

/* The Main Capsule */
.btn-dark-capsule-1 {
    background: #000000;
    color: #ffffff;
    border: none;
    border-radius: 50px;
    padding: 12px 20px 12px 20px; /* Huge left padding to make room for the floating icon */
    /* display: inline-flex; */
    /* align-items: center; */
    /* font-family: 'Ariana Pro', sans-serif; */
    font-weight: 700;
    font-size: 1.1rem;
    position: relative; /* Essential for absolute positioning of the icon */
    overflow: visible;  /* CRITICAL: allows the icon to bleed out */
    
    /* Deep Shadow */
    box-shadow: 0 12px 24px rgba(0,0,0,0.4), 
                0 4px 8px rgba(0,0,0,0.3);
    
    transition: all 0.3s ease;
}

.btn-light-capsule {
    background: #ffffff;
    color: #000000;
    border: none;
    border-radius: 50px;
    padding: 12px 10px; /* Huge left padding to make room for the floating icon */
    display: inline-flex;
    /* align-items: center; */
    /* font-family: 'Ariana Pro', sans-serif; */
    font-weight: 700;
    font-size: 1.1rem;
    position: relative; /* Essential for absolute positioning of the icon */
    overflow: visible;  /* CRITICAL: allows the icon to bleed out */
    
     /* Inverted shadow for light button */
    box-shadow: 0 12px 24px rgba(255,255,255,0.4), 
                0 4px 8px rgba(255,255,255,0.3);
}


/* The Bleeding Icon Wrapper */


.btn-light-capsule img {
    position: absolute;
    left: -15px; /* Pulls the icon outside the left edge */
    top: 40%;
    transform: translateY(-50%); /* Centers it vertically */
    
     /* Matching background so it looks like one piece */
    color: #000000;
    font-size: 2.9rem; /* Oversized icon */
    
    /* Creating the circular 'bleed' look */
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
     /* Optional: adds thickness to the bleed */
}


/* Specific adjustment for FontAwesome icons to ensure they are huge */
/* .btn-dark-capsule img::before {
    display: block;
    line-height: 1;
}

.btn-light-capsule img::before {
    display: block;
    line-height: 1;
} */

/* Hover effect */
.btn-dark-capsule:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 35px rgba(0,0,0,0.5);
    color: #fff;
}

.btn-light-capsule:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 35px rgba(255,255,255,0.5);
    color: #000;
}

.btn-dark-capsule-sm {
    background: #000000;
    color: #ffffff;
    border: none;
    border-radius: 50%;
    padding: 8px ;
    width: 50px;
    height: 50px;   
    
    /* CRITICAL FIXES FOR THE BADGE */
    position: relative; /* Anchors the absolute positioned badge to this circle */
    overflow: visible;  /* Allows the badge to pop out over the edge safely */
 
    box-shadow: 0 12px 24px rgba(0,0,0,0.4), 
                0 4px 8px rgba(0,0,0,0.3);
    
    transition: all 0.3s ease;
}
.btn-light-capsule-sm {
    background: #ffffff;
    color: #000000;
    border: none;
    border-radius: 50%;
    padding: 8px;
    width: 50px;
    height: 50px;   
 
     /* Inverted shadow for light button */
    box-shadow: 0 12px 24px rgba(255,255,255,0.4), 
                0 4px 8px rgba(255,255,255,0.3);
    
    transition: all 0.3s ease;
}
/* .btn-dark-capsule-sm img {
    width: 20px;
    height: 20px;
} */

/* Container styling */
.custom-nav-dropdown {
    background: rgba(235, 235, 235, 0.95); /* Light grey base */
    backdrop-filter: blur(10px);
    border: none;
    border-radius: 40px; /* Big rounded corners for the box */
    padding: 20px;
    min-width: 280px;
    margin-top: 15px !important;
    box-shadow: 0 15px 35px rgba(0,0,0,0.2);
}

/* Individual Pill items */
.custom-nav-dropdown li {
    margin-bottom: 10px;
}

.custom-nav-dropdown li:last-child {
    margin-bottom: 0;
}

.custom-nav-dropdown .dropdown-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(200, 200, 200, 0.5); /* Soft grey pill */
    border-radius: 50px;
    padding: 12px 25px;
    color: #333;
    font-weight: 500;
    transition: all 0.3s ease;
}

/* Icon & Text Alignment */
.custom-nav-dropdown .dropdown-item img {
    width: 20px;
    color: #1a1a1a;
}

.custom-nav-dropdown .dropdown-item span {
    flex-grow: 1;
    text-align: right;
    font-family: 'Ariana Pro', sans-serif;
}

/* Hover State - Darken the pill */
.custom-nav-dropdown .dropdown-item:hover {
    background: #f39200;
    color: #fff;
}

.custom-nav-dropdown .dropdown-item:hover i {
    color: #fff;
}

/* Remove default Bootstrap arrow */
.no-caret::after {
    display: none;
}

/* For the Cart and Menu icons which look like custom SVG/images in your screenshot */
.nav-icon-large {
    width: 32px;
    height: auto;
    object-fit: contain;
}

/* Hero Section */
/* Hero Container Spacing */
.hero-section {
    position: relative;
    overflow: visible !important;
    /* overflow-x: hidden !important; */
    background: url('../img/wood.png') center/cover no-repeat; /* image_f1183b.jpg */
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding-top: 80px;
    z-index: 10;
}

/* Mobile Hero Treatment (Max-width 991px) */
@media (max-width: 991.98px) {
    .hero-section {
        background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('../img/wood.png') center/cover;
        padding-top: 120px;
        
    }

    /* The blurred chicken behind the text on mobile */
    .hero-mobile-bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: url('../img/chicken-hero.png') center 60% / 120% no-repeat;
        filter: blur(2px) brightness(0.6);
        z-index: 1;
    }

    .hero-container {
        position: relative;
        z-index: 2; /* Put text above the blur */
    }

    .hero-logo {
        max-width: 250px;
        margin: 0 auto;
    }

    .hero-desc {
        font-size: 1rem;
        line-height: 1.6;
        padding: 0 15px;
        font-weight: 500;
    }

    .btn-primary-orange {
        width: 80%; /* Wider button for mobile tap target */
        padding: 15px;
        font-size: 1.2rem;
    }
}

/* Ensure the hero logo is the right size */
.hero-logo {
    width: 100%;
    max-width: 450px;
    height: auto;
}

.hero-desc {
    font-family: 'Ariana Pro', sans-serif;
}
.btn-primary-orange {
    background-color: #F49D12;
    color: white;
    border-radius: 50px;
    padding: 12px 40px;
    font-weight: bold;
    border: none;
}

.btn-primary-orange:hover {
    background-color: #F49D12 ;
    transform: scale(1.05);
}

.floating-chicken {
    filter: drop-shadow(0 20px 30px rgba(0,0,0,0.5));
    animation: float 4s ease-in-out infinite;
    /* Ensure the image is large enough to be impactful */
}

/* 2. Style the creeping chicken */
.creeping-chicken {
    width: 130%; /* Make it bigger than its 6-column container */
    max-width: none; /* Allow it to exceed the column width */
    position: relative;
    
    /* Pull the image down into the next section */
    margin-bottom: -250px; 
    
    /* Move it slightly to the right to hug the edge of the screen like the Figma */
    /* margin-right: -10%;  */
    
    /* Ensure it sits on top of the next section's background */
    z-index: 90; 
    
    /* Keep your existing floating animation */
    animation: float 4s ease-in-out infinite;
    filter: drop-shadow(0 30px 50px rgba(0,0,0,0.4));
}

/* 3. Add padding to the top of the Meals Section */
/* This prevents the chicken from covering the "Meals" title too much */
.py-5.bg-light {
    padding-top: 100px !important; 
    position: relative;
    z-index: 5;
}

@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-15px); }
    100% { transform: translateY(0px); }
}


/* Search Bar Styling */
.search-wrapper {
    position: relative;
}

.search-input {
    background: #f1f1f1;
    border: none;
    border-radius: 50px;
    padding: 12px 20px 12px 50px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.search-icon {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    color: #888;
}

/* Container Card */
.meal-card {
    background: #EDEDED;
    border-radius: 30px; /* Extra rounded corners */
    padding: 12px;
    border: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.meal-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
}

/* Image Section */
.card-img-wrapper {
    position: relative;
    width: 100%;
    height: 180px;
    border-radius: 25px;
    overflow: hidden;
    margin-bottom: 15px;
}

.card-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wishlist-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    background: transparent;
    border: none;
    color: white;
    font-size: 1.2rem;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

/* Typography & Layout */
.meal-card-content {
    padding: 0 5px 10px 5px;
}

.meal-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #1a1a1a;
    margin: 0;
}

.delivery-time {
    font-size: 0.70rem;
    color: #444;
    white-space: nowrap;
}

.rating {
    font-size: 0.95rem;
    font-weight: 500;
    color: #1a1a1a;
}

.rating i {
    color: #FFC107;
    margin-right: 4px;
}

.rating-count {
    color: #6c757d;
    font-weight: 400;
}

.price {
    font-size: 1.05rem;
    font-weight: 700;
    color: #000;
}

.price .currency {
    color: #FF4D4D; /* Reddish tint for the Naira symbol */
    margin-right: 2px;
}

/* The "Add to cart" Button */
.btn-add-cart {
    background: #FFFFFF;
    border: none;
    border-radius: 50px;
    padding: 8px 20px;
    font-weight: 600;
    color: #1a1a1a;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    transition: all 0.2s ease;
    width: fit-content;
}

.btn-add-cart:hover {
    background: #fdfdfd;
    transform: scale(1.03);
    box-shadow: 0 6px 20px rgba(0,0,0,0.12);
}

.plus-icon {
    color: #FF4D4D;
    font-size: 1.2rem;
    font-weight: 400;
}
/* Modal Container Styling */
.meal-modal-content {
    background-color: #e0e0e0; /* The light grey "soft shell" */
    border-radius: 40px;
    border: none;
    overflow: hidden;
    z-index: 1051;
}

.modal-product-img {
    position: relative;
    background-color: #000; /* Placeholder for image */
    height: 300px;
    border-radius: 40px;
    margin: 10px;
}

.modal-product-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 35px;
}

/* Custom Close Button */
.modal-custom-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background-color: white;
    border-radius: 50%;
    padding: 10px;
    opacity: 0.8;
}

/* The Combined Add to Cart + Qty Pill */
.add-to-cart-pill {
    background-color: #f39200;
    color: white;
    border-radius: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 10px 8px 25px;
    font-weight: 700;
    cursor: pointer;
}

.qty-toggle-dark {
    background-color: rgba(0, 0, 0, 0.3); /* Darker orange/brown tint */
    border-radius: 40px;
    display: flex;
    align-items: center;
    padding: 5px 15px;
    gap: 10px;
}

.qty-toggle-dark button {
    background: none;
    border: none;
    color: white;
    font-weight: bold;
}

/* Circle Wishlist Button */
.btn-orange-circle {
    background-color: #f39200;
    color: white;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    border: none;
}

.btn-orange-circle:hover {
    background-color: #d68100;
    color: white;
}


/* Footer Styling */
.footer-section {
    
    background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url('../img/bg-footer.png');
    background-size: cover;
    background-position: center;
    color: #fff;
    padding: 80px 0 20px 0;
}

.contact-pill {
    display: flex;
    align-items: center;
    border: 1.5px solid #F49D12;
    border-radius: 50px;
    padding: 7px 10px;
    padding-right:50px !important;
    color: white;
    text-decoration: none;
    font-size: 0.85rem;
    transition: 0.3s;
    width: fit-content;
}

.contact-pill i {
    font-size: 1.4rem;
    margin-right: 15px;
    color: white;
}

.contact-pill:hover {
    background: #F49D12;
    /* color: #F49D12; */
}

.footer-bottom a {
    color: #F49D12;
    text-decoration: none;
    margin-left: 20px;
    font-size: 0.9rem;
}
.footer-chop-text {
    transition: transform 0.3s ease;
}
.footer-chop-text:hover{
    transform: translateY(-3px);
}

/* Breadcrumb Tweak */
.breadcrumb-item + .breadcrumb-item::before {
    content: ">";
    color: #6c757d;
}

.cart-badge {
    position: absolute;
    /* Pushes it right to the top corner edge */
    top: -8px;
    right: -8px;
    
    /* Background & text matching your theme accents */
    background-color: #f39200; /* Your brand orange */
    color: #ffffff;
    
    /* Perfect circle centering shapes */
    min-width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* Font sizing specifications */
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
    padding: 6px 6px; /* Horizontal padding for 1-2 digit numbers */
    
    /* Subtle pop shadow to lift it off the dark button */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    
    /* Prevent text selection quirks */
    user-select: none;
    pointer-events: none; 
    
    /* Hide by default until Javascript injects the real localStorage item counts */
    display: none; 
}

.cart-badge-sm {
    position: absolute;
    top: -4px;      /* Pulls it slightly above the top edge */
    right: -4px;    /* Pulls it slightly past the right edge */
    
 background-color: #f39200; /* Your brand orange */
    color: #ffffff;
    font-size: 11px;
    font-weight: bold;
    
    /* Perfect circle mechanics */
    min-width: 18px;
    height: 18px;
    border-radius: 50%;
    padding: 0 4px; /* Gives double-digit numbers a little breathing room */
    
    /* Flexbox centers the "0" perfectly inside the badge */
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* Subtle shadow to separate it from the black button */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}