/* 1. Remove forced scrollbars that cause the double bar */
html {
    overflow-y: auto !important;
}

/* 2. Prevent the 15px jitter without forcing a second scrollbar */
body {
    scrollbar-gutter: stable;
    overflow-x: hidden;
}

/* 3. Ensure no height conflicts */
html, body {
    height: auto;
    min-height: 100%;
    box-sizing: border-box !important;
}

/* 1. Prevent Bootstrap's JavaScript from injecting padding-right */
body.modal-open {
    padding-right: 0 !important;
}

/* 2. If you have a fixed navbar (which usually jolts too), add this */
.fixed-top, .sticky-top, .is-fixed {
    padding-right: 0 !important;
}


:root {
    --butta-gold: #fbaf18;
    --butta-red: #b04a33;
    --butta-yellow: #ffc107;
    --butta-cream: #fdfbf7;
    --butta-dark-green: #0a3622;
}

section{
    background-color: #fdfbf7;
}

/*Loading view*/
.loading {
    opacity: 0;
    transform: translateY(10px);
}

/*Smooth scrolling*/
@keyframes card-appear {
    from {
        opacity: 0;
        transform: translateY(100px) scale(0.8);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}


#seasonals .card-body {
    padding: 0 !important;
}

.card-img-top{
    display: block;
    width: 100%;
}

.products-table-scroll {
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: auto;
}

.products-table-scroll table {
    min-width:  max-content;
}

.products-table-scroll::-webkit-scrollbar {
    height: 12px;
}

.products-table-scroll::-webkit-scrollbar-thumb {
    background-color: #6c757d;
    border-radius: 6px;
}

.products-table-scroll::-webkit-scrollbar-track {
    background-color: #e9ecef;
}

/* Ensures all thumbnails are the exact same size */
.card-img-top {
    height: 150px; /* Set a fixed height */
    object-fit: cover; /* Crops the image to fill the area without stretching */
    width: 100%;
}

.smooth-title {
    color: #faf9f6;
    filter: url(#smooth-stroke);
    /* Fallback for browsers that don't support the filter */
    -webkit-text-stroke: 1px #0a3622;
}

.card *{
    text-decoration: none !important;
}

.card-title {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
    font-size: 1.2rem;
    color: #0a3622; /* Your dark green */
    line-height: 1.2;
    margin: .75rem 0;
    /* Subtle letter spacing for a premium feel */
    letter-spacing: -0.02em;
}

/* Optional: Use the lighter font for the product description/blurb */
.card-text {
    font-family: 'Lora', serif;
    font-size: 0.95rem;
    color: #4a4a4a;
    line-height: 1.5;
}

/* Hover Overlay Styles */
.card-hover-overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.67); /* Dark with 40% opacity */
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    z-index: 7;
}

/* Show overlay and lift card on hover */
.seasonalCard:hover .card-hover-overlay {
    opacity: 1;
}

.seasonalCard {
    box-shadow: 0 13px 27px rgba(0,0,0,0.35) !important;
    transition: all 0.6s ease-in-out;
}

.seasonalCard:hover {
    transform: translateY(-5px);
    transition: all 0.6s ease-in-out,
}

/* Ensure badges stay on top of the overlay */
.seasonalCard .position-absolute.top-0.start-0 {
    z-index: 10;
}

#seasonals .price-icon {
    color: #3aa18b; /* Slightly Lighter Green */
    font-size: .9rem;
    margin-right: -.42em !important;
    padding: 0 !important;
}
.modal-dialog{
    max-height: 90vh;
}
.modal-dialog .price-icon {
    color: #3aa18b;
    font-size: 1.16rem;
    padding: 0 !important;
}


.weightPriceSection{
    margin: 0 auto !important;
}
.card-body, .card-footer {
    background-color: #fff !important;
}

.btn-close{
   position: absolute !important;
   top: 6px !important;
   right: 5px !important;
   z-index: 20;
}

.buttaBtn {
    background-color: #000;
    color: #fbaf18;
    border: .17em solid #fff;
}

    .buttaBtn:hover {
        background-color: #fbaf18;
        color: #171717;
        border: .2em solid black;
    }

    .buttaBtn:hover span.buttaBtn {
        background-color: #fbaf18;
        color: #000;
        border: .2em solid #171717;
    }

    .buttaBtn:hover .buttaBtnTxt {
        color: #000;
    }

span.buttaBtnTxt {
    color: #fff;
}

.buttaBtn:hover .bi-card-text {
    color: #000;
}

.buttaBtn .bi-card-text {
    color: #fbaf18;
}

.infoBar {
    height: 38px;
}
    /* Ensure the bar never wraps, even on tiny screens */
    .infoBar .container-fluid {
        overflow-x: auto; /* Adds a horizontal scroll only if the screen is extremely narrow */
        white-space: nowrap;
        -ms-overflow-style: none; /* IE and Edge */
        scrollbar-width: none; /* Firefox */
    }
        /* Hide scrollbar for Chrome, Safari and Opera */
        .infoBar .container-fluid::-webkit-scrollbar {
            display: none;
        }

    .infoBar a.contact i {
        color: #fee104;
    }

    .infoBar .socialMedia a:hover > i {
        color: #f89718;
        transition: color ease .7s;
    }

    .infoBar a.contact:hover > i {
        color: #f89718;
        transition: color ease .7s;
    }

    .infoBar a.contact:hover {
        color: #fee104 !important;
        transition: color ease .9s !important;
    }

/*Navigation*/
nav {
    position: static !important;
    height: auto !important;
    top: auto;
    left: auto;
    right: auto;
    z-index: 2;
    margin-bottom: 0 !important;
    padding: 0 !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.nav-link {
    font-weight: 600;
    font-size: 1.1em;
    color: #171717;
}

    .nav-link:hover {
        color: #fab121 !important;
        cursor: pointer !important;
        transition: color .6s !important;
    }

/*Container to hold the stacked images */
.logo-wrapper {
    position: relative;
    display: inline-block;
    top: -2.14em; /* Keeping your specific alignment */
    left: 6px;
}
    /* Base styling for both images */
    .logo-wrapper img {
        position: absolute;
        top: 0;
        left: 0;
        transition: opacity 0.45s ease-in-out; /* The smooth fade */
    }
/* The hover image is hidden by default */
.logo-hover {
    opacity: 0;
    z-index: 4;
}
/* The base image is visible */
.logo-base {
    opacity: 1;
    z-index: 4;
}
/* On hover, fade the top image in and the bottom one out */
.logo-wrapper:hover .logo-hover {
    opacity: 1;
}

.logo-wrapper:hover .logo-base {
    opacity: 0;
}

#logoLink {
    border: none;
    background-color: transparent;
}


/* Optional: Add a smooth transition for your SPA content */
main#content {
    min-height: calc(100vh - 106px);
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
    opacity: 1;
    transform: translateY(0);
    background-color: rgba(0,0,0, .044);
    margin-top: 0;
}

.homePage main#content{
    margin-top: 0;
}

.edit, .delete{
    text-decoration: none;
    font-size: 1.2em;
}

form#userLoginForm {
    margin-top: .4em;
}

/*Home slider*/
.carousel-item {
    height: calc(100vh - 108px);
    margin-top: 66px;
    background-position: center center; /* Centers the image */
    background-repeat: no-repeat; /* Prevents the image from repeating */
    background-size: cover; /* Ensures the image covers the entire viewport */
    background-attachment: fixed;
}

.carousel-caption {
    width: 47vw;
    padding: .35em;
    margin: 0 auto;
    border: 6px solid #000;
    background-color: rgba(0, 0, 0, .63);
    border-radius: 12px;
    color: #fff;
    font-weight: 600;
    font-size: 1.18em;
    font-style: normal;
}

.carousel-indicators [data-bs-target] {
    background-color: #fff !important;
    padding: 1.45% !important;
}

.carousel-indicators {
    width: 12%;
    position: absolute;
    bottom: -1.4em !important;
    margin: 0 auto !important;
}

.carousel-control-next,
.carousel-control-prev {
    background-color: transparent !important;
    top: 13.6% !important;
    opacity: 1 !important;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    opacity: 1 !important;
    height: 3.4em !important;
    width: 3.4em !important;
    margin-bottom: -1% !important;
    padding: 8% !important;
    background-color: rgba(0, 0, 0, 1) !important;
    border-radius: 14% !important;
}

    .carousel-control-prev-icon:hover,
    .carousel-control-next-icon:hover{
        background-color: rgba(0, 0, 0, .6) !important;
        transition: all 0.7s ease-in-out;
    }

.caption_heading {
    color: #fff;
    font-size: 1.4em;
    font-weight: 600;
    text-shadow: 0 2px 3px rgba(0, 0, 0, 0.97); /* Base shadow for instant legibility */
}

/*Footer*/
footer {
    min-height: 180px;
    height: auto;
    padding: 3.5%;
    background-color: #232323;
}

/* Add a red asterisk after required labels */
.control-label.required::after {
    content: " *";
    color: #dc3545; /* Bootstrap danger red */
    font-weight: bold;
}

/* Add (optional) text after optional labels */
.control-label.optional::after {
    content: " (optional)";
    color: #6c757d; /* Bootstrap secondary grey */
    font-size: 0.85em;
    font-weight: normal;
}

/* User Registration */
.formFieldHelp{
    font-size: .8em;
}
.form-check-label:hover,
.form-check-input:hover {
    cursor: pointer;
    color: #0d6efd;
    transition: all .3s ease;
}
form#userRegisterForm {
    padding: 3%;
    margin: 2%;
}
/* User Login */
form#userLoginForm {
    padding: 3%;
    margin: 2%;
}
/* Add a red asterisk after labels with the 'required' class */
.control-label.required::after {
    content: " *";
    color: #dc3545; /* Bootstrap danger red */
    font-weight: bold;
}
/* Ensure the info bar and navbar stay below the modal overlay */
.infoBar, .navbar {
    z-index: 3; /* Bootstrap standard for fixed-top is 1030 */
}

/* Bootstrap modal stacking should remain at the default values so the modal is clickable */
.modal {
    z-index: 1060 !important;
}

.modal-backdrop {
    z-index: 1055 !important;
}

.modal-dialog-scrollable .modal-body {
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

.productDetailsCloseBtn {
    position: absolute !important;
    top: 11px !important;
    right: 12px !important;
}

.confirm-modal .modal-content {
    border-radius: 14px;
    background: #fff;
}

.confirm-modal .modal-header {
    background: linear-gradient(135deg, #fff9ed 0%, #fff 100%);
    border-bottom: 1px solid rgba(10, 54, 34, 0.08);
    padding: 1rem 1.25rem 0.75rem;
}

.confirm-modal .modal-title {
    color: #0a3622;
}

.confirm-modal .modal-body {
    padding: 1rem 1.25rem;
    font-size: 1rem;
    line-height: 1.5;
}

.confirm-modal .modal-footer {
    padding: 0 1.25rem 1rem;
}

.confirm-modal .btn-danger {
    background-color: #b04a33;
    border-color: #b04a33;
}

.confirm-modal .btn-danger:hover {
    background-color: #963e2d;
    border-color: #963e2d;
}

#homeSeasonals .container {
    margin-top: 10%;
}

#homeSeasonals .container > h1,
#homeSeasonals .container > h2,
#homeSeasonals .container > h3,
#homeSeasonals .container > h4,
#homeSeasonals .container > h5,
#homeSeasonals .container > h6 {
    font-size: 3.6em;
}

#homeSeasonals .card-header{
    margin: 0 auto;
    padding: 0;
}
#homeCarousel {
    margin-bottom: 8% !important;
}

.badge {
    box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.044), 0 6.7px 5.3px rgba(0, 0, 0, 0.058), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.062), 0 41.8px 33.4px rgba(0, 0, 0, 0.08), 0 100px 80px rgba(0, 0, 0, 0.09);
    background: white;
    border-radius: 5px;
}

/* Hide remove button if it's the only row */
#selectionContainer .selection-row:first-child:last-child .remove-row {
    visibility: hidden;
}

.selection-row .dropdown-toggle::after {
    margin-left: auto; /* Pushes the arrow to the right */
}

.weightItem:hover {
    background-color: #0a3622; /* ButtaLove Dark Green */
    color: #faf9f6 !important;
}

    .weightItem:hover .text-success {
        color: #faf9f6 !important;
    }

#productDetailsAccordion .accordion-button.collapsed,
#productDetailsAccordion .accordion-button.collapsed::after{
    color: #978e6a !important;
}
#productDetailsAccordion .accordion-button::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fbaf18' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e") !important;
}

/* Also change the arrow color when the accordion is open/active */
#productDetailsAccordion .accordion-button:not(.collapsed) {
    color: #fbaf18 !important;
}
#productDetailsAccordion .accordion-button:not(.collapsed)::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fbaf18' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e") !important;
}

#homeSeasonals{
    padding-top: 2%;
}
#seasonals{
    padding-top: 10%;
}

#productDetailsModal .modal-header{
    padding: 0;
    margin: -.7em;
}
#productDetailsModal .modal-content {
    background-color: #fff7e8 !important;
}

#productDetailsModal .productDetailsP {
    color: #fff;
}
#productDetailsModal #Name{
    color: rgb(20, 13, 0) !important;
    padding: 4%;
}
#productDetailsModal .dropdown-toggle {
    color: #2f1600;
    background-color: transparent;
    border: 2px solid #140d00;
    transition: all .4s ease;
}
#productDetailsModal .dropdown-toggle i {
    color: rgb(20, 13, 0);
}
.btn-check:checked + .btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check) + .btn:active {
    color: #140d00;
    background-color: #fbaf18;
    border: 2px solid #140d00;
}
#productDetailsModal .dropdown-toggle:hover {
    color: #fbaf18;
    background-color: rgb(20, 13, 0);
    border: 2px solid #fff7e8 !important;
    transition: all .4s ease;
}
#productDetailsModal .dropdown-toggle:hover i {
    color: #fbaf18;
    transition: all .4s ease;
}
/* Target the <li> elements inside your size dropdown */
#productDetailsModal .dropdown-menu li:nth-child(odd){
    background-color: rgba(255,255,255,.1) !important; /* Butta Cream */
}

#productDetailsModal .dropdown-menu li:nth-child(even){
    background-color: rgba(255,255,255,.24) !important; /* Very Light Butta Yellow */
}

/* Ensure the hover state still looks great */
#productDetailsModal .dropdown-menu .weightItem:hover {
    background-color: #000 !important;
    color: #fffac5 !important;
    transition: all .4s ease;
}

#productDetailsModal .orderTotal{
    color: #fff;
}

/* Hide the 'x' if it's the only row in the container */
#selectionContainer .selection-row:first-child:last-child .remove-row {
    display: none !important;
}

.selected-text {
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.darkHighlight {
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Hide the 'x' button when only one row exists */
#selectionContainer .selection-row:first-child:last-child .remove-row {
    display: none !important;
}