html, body {
            height: 100%;
            scrollbar-width: none;
        }

        .form-signin {
            max-width: 330px;
            padding: 1rem;
        }

        .form-signin .form-floating:focus-within {
            z-index: 2;
        }

        /* STYLING FOR THE INPUT STACK */
        
        /* 1. Username (Top) */
        #floatingUsername {
            margin-bottom: -1px;
            border-bottom-right-radius: 0;
            border-bottom-left-radius: 0;
        }

        /* 2. Email (Middle) */
        #floatingEmail {
            margin-bottom: -1px;
            border-radius: 0;
        }

        /* 3. Password (Middle) */
        #floatingPassword {
            margin-bottom: -1px;
            border-radius: 0;
        }

        /* 4. Confirm Password (Bottom) */
        #floatingConfirmPassword {
            margin-bottom: 10px;
            border-top-left-radius: 0;
            border-top-right-radius: 0;
        }


/* Auto-hide flash error messages after 2 seconds */

.alert {
    
    animation: fade-out 1s ease-out 3.5s forwards ;
}

.alert-success { background-color: #d1e7dd !important; color: #0f5132 !important; }
.alert-danger  { background-color: #f8d7da !important; color: #842029 !important; }
.alert-info    { background-color: #cff4fc !important; color: #055160 !important; }


@keyframes fade-out {
    0% { 
        opacity: 1; 
    }
    100% { 
        opacity: 0; 
        visibility: hidden; /* Hides it from mouse clicks too */
    }

}
.terms{
  padding: 50px;
  padding-left: 100px;
  padding-right: 100px;
  
  border: 2px solid black;
  margin: 100px;
}
/* Style for the secondary legal navigation menu */
.secondary-nav ul {
    list-style: none; /* Removes the bullet points */
    padding: 0;
    margin: 0;
    display: flex; /* Arranges list items horizontally */
    flex-wrap: wrap; /* Allows wrapping on smaller screens */
    align-items: center;
    background-color: #f8f9fa; /* Light gray background for the menu bar */
    border-radius: 4px; /* Slight rounding of corners */
    border: 1px solid #dee2e6;
    padding: 8px 15px;
}

.secondary-nav li {
    font-size: 0.9rem;
    padding: 0 10px; /* Horizontal padding for spacing around text */
    white-space: nowrap; /* Prevents links from breaking */
}

/* --- THE KEY TO THE VERTICAL DIVIDER --- */
.secondary-nav li:not(:last-child)::after {
    content: "|"; /* The divider character */
    color: #6c757d; /* Gray color for the divider */
    margin-left: 15px; /* Spacing between the divider and the next link */
}

.secondary-nav a {
    text-decoration: none; /* Removes underline from links */
    color: #007bff; /* Blue color for links (Bootstrap primary color) */
}

.secondary-nav a:hover {
    color: #0056b3; /* Darker blue on hover */
}

/* Style for the current (active) page, which is not a link */
.secondary-nav li:first-child {
    font-weight: bold; /* Makes the current page stand out */
    color: #212529; /* Dark text color for the current page */
}

.card-hover-lift {
    /* Add a smooth transition for the shadow and scale */
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

.card-hover-lift:hover {
    /* Lift the card up slightly */
    transform: translateY(-5px); 
    /* Change the shadow to a larger one for a "popping" effect */
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2) !important; 
    /* The !important overrides the default Bootstrap shadow which is good for custom effects */
}
/* Animation for the Add to Cart button */
.btn-primary {
    /* Sets the transition duration for smooth effect */
    transition: background-color 0.2s ease, transform 0.1s ease;
}

.btn-primary:hover {
    /* Slightly darkens the background on hover */
    background-color: #0056b3; /* A darker shade of Bootstrap's blue */
    /* Add a subtle "push down" effect */
    transform: translateY(1px); 
    box-shadow: none; /* Optional: remove shadow on hover */
}

/* CSS Animation Keyframes for a heartbeat pulse */
@keyframes pulse-once {
  0% { transform: scale(1); }
  50% { transform: scale(1.01); }
  100% { transform: scale(1); }
}

/* Apply the animation to the Welcome message */
.welcome-heading {
    animation: pulse-once 2s ease-out 1; /* Runs the animation once, over 2 seconds */
}
@keyframes subtle-pulse {
    0% { box-shadow: 0 0 0 0 rgba(108, 117, 125, 0.5); }
    70% { box-shadow: 0 0 0 10px rgba(108, 117, 125, 0); }
    100% { box-shadow: 0 0 0 0 rgba(108, 117, 125, 0); }
}

/* Target the Proceed to Checkout button */
.btn-group-lg>.btn, .btn-lg {
    animation: subtle-pulse 2s infinite; 
    background-color:#f5b800 !important;
    color: black;
}
/* Target the plus/minus buttons */
.input-group-sm .btn {
    transition: transform 0.1s ease, background-color 0.1s ease;
}

.input-group-sm .btn:active {
    transform: scale(0.95); 
    background-color: #e9ecef !important; 
    border-color: #ced4da !important;
}

/* --- ICON SWAP LOGIC --- */

/* 1. By default, hide the 'Hover' icon */
.icon-hover {
    display: none;
}

/* 2. When hovering the BUTTON, hide the 'Default' icon... */
.btn:hover .icon-default {
    display: none;
}

/* 3. ...and show the 'Hover' icon instead */
.btn:hover .icon-hover {
    display: inline-block;
}

.btn-outline-success:hover, .btn-outline-danger:hover, .btn-primary:hover {
        transform: translateY(-1px);
        transition: all 0.2s ease-in-out;
    }
    
.card:hover {
        transform: translateY(-5px);
        transition: transform 0.3s ease;
        box-shadow: 0 10px 20px rgba(0,0,0,0.1) !important;
    }

    /* 1. Force the carousel items to be short (25% of screen height) */
/* We use min-height to stop it from breaking on mobile phones */
.hero-carousel-item {
    height: 25vh;         /* Adjust this number (20vh - 30vh) to taste */
    min-height: 250px;    /* Safety net: never gets smaller than this */
    position: relative;
    overflow: hidden;     /* Hides any overflow */
}

/* 2. Ensure the background/image covers the whole area */
.hero-carousel-item img, 
.hero-carousel-item svg {
    object-fit: cover;    /* Crops the image to fit the strip */
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

/* 3. Center the text vertically and fix sizing */
.hero-caption {
    top: 50%;             /* Move top edge to center */
    transform: translateY(-50%); /* Pull back up by 50% to perfectly center */
    bottom: auto;         /* Override default Bootstrap bottom positioning */
    padding-bottom: 0;    /* Remove extra padding */
}

/* 4. Make text smaller so it fits in the short strip */
.hero-caption h1 {
    font-size: 1.5rem;    /* Smaller headline */
    font-weight: bold;
    text-shadow: 1px 1px 5px rgba(0,0,0,0.7); /* Shadow helps read text on images */
}

.hero-caption p {
    font-size: 0.9rem;
    margin-bottom: 10px;
}

.navbar {
    background-color: #5a189a;
}

.navbar-dark {
    --bs-navbar-color: white;
}

.btn-primary {
    --bs-btn-bg: #ffc107;
    --bs-btn-border-color: #ffc107;
    --bs-btn-hover-bg: #F5B800;
    --bs-btn-hover-border-color: #f5b800;
    --bs-btn-active-bg: #E0A800;
    --bs-btn-active-border-color: #E0A800;
    --bs-btn-disabled-bg: #FFC71F;
    --bs-btn-disabled-border-color: #FFC71F;
    --bs-btn-color: black;
    --bs-btn-hover-color: black;
    --bs-btn-active-color: black;
}

.btn-primary:hover {
    background-color: #F5B800;
}

body {
    position: relative;
    min-height: 100vh;
    /* Optional: Prevents horizontal scrollbar if blur bleeds out */
    overflow-x: hidden; 
}

body::before {
    content: "";
    position: fixed; /* Fixes image in place (scrolling effect) */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* Image Reference */
    background-image: url('images/bg/bg.jpg'); 
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    
    /* --- THE BLUR --- */
    filter: blur(4px); /* Adjust this number to make it more/less blurry */
    
    /* Send to back so text sits on top */
    z-index: -1;
    
    /* Pro Tip: Scale it up slightly to hide the white faded edges caused by the blur */
    transform: scale(1.1); 
}

/* --- 1. SEARCH BUTTON (Transparent) --- */
.btn-transparent { 
    background-color: white;
    color: #5a189a;
    display: inline-flex; 
    align-items: center;
    justify-content: center;
}

.btn-transparent:hover {
    background-color: white;
    color: #F5B800;
}

.btn-transparent i,
.btn-transparent svg {
    transition: transform 0.3s ease;
}

.btn-transparent:hover i,
.btn-transparent:hover svg {
    transform: scale(1.25);
}

/* --- 2. NAVBAR ICONS LOGIC --- */

/* A. Base settings for ALL icons (Cart, Globe, Person) */
.nav-link i,
.nav-link svg {
    transition: transform 0.3s ease;
    display: inline-block;
}

/* B. CART SPECIAL LOGIC (Scales the wrapper so Badge + Icon move together) */
.cart-effect {
    transition: transform 0.3s ease;
    display: inline-block;
}

.nav-link:hover .cart-effect {
    transform: scale(1.25);
}

/* C. STANDARD ICONS LOGIC (Globe, Person) */
/* When hovering a link, scale the icon... */
.nav-link:hover i,
.nav-link:hover svg {
    transform: scale(1.25);
}

/* ...BUT reset the icon inside the cart to 1x. 
   Why? Because the .cart-effect wrapper is already scaling to 1.25x.
   If we don't do this, the cart icon scales twice (1.25 * 1.25) and looks huge. */
.nav-link:hover .cart-effect i,
.nav-link:hover .cart-effect svg {
    transform: scale(1) !important;
}

/* D. Color Change for all */
.nav-link:hover {
    color: #F5B800;
}

.text-muted {
    color: black !important; 
}

/* --- CAROUSEL FIXES --- */
/* Default (Desktop) */
.hero-carousel-item {
    height: 300px; /* Fixed height for consistency */
    overflow: hidden; 
}
@media (max-width: 768px) {

    /* 1. Reset row behavior */
    .request-list .row, 
    .admin-sticker-list-custom .row {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center;
        padding: 10px 5px !important;
    }

    /* 2. Image Column: Keep it small and fixed */
    .col-md-1-custom, .col-3-custom, .col-4-custom {
        flex: 0 0 60px !important;
        width: 60px !important;
        max-width: 60px !important;
        padding: 0 !important;
    }

    /* 3. Text Column: Allow it to fill middle space */
    .col-md-3-custom, .col-md-6-custom, .col-8-custom, .col-9-custom {
        flex: 1 1 auto !important;
        padding-left: 10px !important;
        min-width: 0; /* Important for text truncation */
    }

    /* 4. Action Column (Price & Buttons): Fixed width to align everything */
    .col-md-2-custom, .col-md-6-custom.text-end, .col-6-custom, .col-12-custom {
        flex: 0 0 110px !important; /* Width of the button column */
        width: 110px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important; /* Makes buttons same width */
        gap: 5px; /* Spacing between Price and Buttons */
        text-align: right !important;
    }

    /* 5. Uniform Button Sizing */
    .admin-sticker-list .btn, 
    .request-list .btn {
        width: 100% !important; /* Buttons fill the 110px container */
        margin: 0 !important;
        display: block !important;
        font-size: 0.8rem !important;
        padding: 5px 0 !important;
    }

    /* 6. Price Alignment */
    .admin-sticker-list .fw-bold.text-dark {
        width: 100%;
        margin-bottom: 5px;
    }

    /* Hide unnecessary columns to save space */
    .text-muted.small.text-center {
        display: none !important;
    }
    .mx-2{
        margin-right: 0px !important;
       
    }
}

/* Mobile: Show more of the image by changing how it fits */
@media (max-width: 576px) {
    .hero-carousel-item {
        min-height: auto;
        height: 150px; /* Slightly shorter on phone */
    /* ... existing code for .request-list and .admin-sticker-list ... */
    }
    /* NEW: Specific fix for Admin Orders */
    .admin-orders-list .row {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center;
    }

    /* Pushes the Order Info to the left and Buttons to the right */
    .admin-orders-list .col-md-2-custom, 
    .admin-orders-list .col-md-3-custom {
        flex: 1 1 auto !important;
    }

    /* Action Column for Orders */
    .admin-orders-list .col-md-5-custom.text-end {
        flex: 0 0 120px !important; /* Fixed width for button stack */
        display: flex !important;
        flex-direction: column !important;
        gap: 4px; /* Space between buttons */
    }

    /* Make every status button the same size */
    .admin-orders-list .btn-sm {
        width: 100% !important;
        margin: 0 !important;
        text-align: center;
    }
    
    .hero-carousel-item img {
        /* "contain" ensures the whole image is visible (letterboxed) 
           OR keep "cover" but center it better if you hate black bars */
        object-fit: cover; 
        object-position: center center; 
    }

     .carousel-inner {
        height: 150px;
    }

    .carousel-indicators {
        margin-bottom: 0;
    }

    /* .carousel-caption {
        background-color: rgba(var(--bs-dark-rgb), var(--bs-bg-opacity)) !important;
        border-radius: var(--bs-border-radius) !important;
        --bs-bg-opacity: 0.5;
        
       } */

    .caption-h1 {
        font-size: 1.2rem !important;
    }

    .caption-p {
        font-size: 0.7rem !important;
    }

    .btn-sm {
        --bs-btn-font-size: 0.7rem;
    }
}

/* --- CARD FIXES --- */

/* 1. GLOBAL STYLES (Applies to Desktop, Tablet, and Mobile) */
.card {
    border-radius: 15px !important; /* Always rounded */
    overflow: hidden; /* Ensures image doesn't stick out of corners */
    border: none; /* Optional: cleaner look */
}

/* Default Image Height (Large Desktop Screens only) */
.sticker-img-container {
    height: 250px;
    width: 100%;
}

/* 2. TABLET & MOBILE FIXES (Max-width 991px covers Tablets like iPad & Phones) */
@media (max-width: 991px) {
    
    /* Aggressively reduce image height for square look */
    .sticker-img-container {
        height: 100px !important; /* slightly taller than phone, but short enough */
        min-height: 0 !important;
        margin-bottom: 0.25rem !important;
    }

    /* Reduce padding inside the card */
    .card .p-3 {
        padding: 0.5rem !important; 
    }
    
    /* Kill margins */
    .mb-2 {
         margin-bottom: 0 !important;
    }

    /* Compact text */
    .card-title {
        font-size: 0.9rem !important;
        line-height: 1.1;
    }
    
    /* Shrink button */
    form button.rounded-circle {
        width: 35px !important;
        height: 35px !important;
    }
    
    .card-text.fs-5 {
        font-size: 1rem !important; 
    }
}

/* 3. EXTRA SMALL PHONES (Max-width 576px) - Even tighter */
@media (max-width: 576px) {
    .sticker-img-container {
        height: 80px !important; /* The very short height you liked */
    }
    
    .card-title {
        font-size: 0.8rem !important;
    }
    
    form button.rounded-circle {
        width: 32px !important;
        height: 32px !important;
    }
}

@media (max-width: 376px) {
    .mx-2 {
        margin-right: 0 !important;
        margin-left: 0 !important;
    }
}

.navbar-toggler {
    border: none;
}

/* --- ANIMATION KEYFRAMES --- */
/* Simple slide down and fade in effect */
@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Ensure Desktop Dropdowns still look standard */
@media (min-width: 769px) {
    .slide-animation {
        animation: slideDown 0.2s ease forwards;
        display: block; /* Required to override display:none triggers */
        visibility: hidden; /* Hide it visually */
    }
    
    /* Only show when the parent has the .show class (Bootstrap adds this) */
    .dropdown:hover .slide-animation, 
    .dropdown .dropdown-menu.show {
        visibility: visible;
    }
}


.btn-blue{
    background-color: #007bff;
    color: white;
}

.btn-blue:hover{
     background-color: #007bff;
    color: white;

}
.btn-outline-blue{
     background-color: white;
    color: #007bff;
    border: 1px solid #007bff;
}

.btn-outline-blue:hover{
    background-color: #007bff;
    color: white;

}

/* --- MOBILE MENU FIXES --- */
@media (max-width: 768px) {
    
    /* 1. The Main Container */
    .mobile-menu-container {
        position: absolute;
        top: 100%;
        right: 0;
        width: auto;
        min-width: 250px; 
        
        /* Flexbox Stack */
        display: flex;
        flex-direction: column;
        align-items: flex-end; /* CHANGED: Aligns blocks to the right */
        gap: 20px; /* Equal spacing between blocks */
        
        background-color: #5a189a;
        border-bottom-left-radius: 10px;
        border-bottom-right-radius: 10px;
        box-shadow: -5px 10px 15px rgba(0,0,0,0.2);
        padding: 20px;
        z-index: 1000;
    }

    /* 2. Fix the Lists (Categories & Icons) */
    .mobile-menu-container .navbar-nav {
        flex-direction: column;
        align-items: flex-end !important; /* CHANGED: Force right alignment */
        width: 100%;
        gap: 20px !important; 
        margin: 0 !important; 
    }

    

    /* 3. Fix the Search Bar */
    .mobile-menu-container form {
        width: 100%; 
        max-width: 220px;
        margin-left: auto; /* Pushes form to the right */
        margin-right: 0;
    }

    /* 4. Ensure Links and Text are Right Aligned */
    .mobile-menu-container .nav-link {
        display: flex;
        justify-content: flex-end; /* CHANGED: Aligns content inside link to right */
        align-items: center;
        text-align: right;
        width: 100%;
        padding: 0; 
    }

    /* 5. Dropdowns (Categories/Profile/etc) */
    .mobile-menu-container .dropdown-menu {
        position: static !important;
        float: none;
        background: transparent;
        border: none;
        text-align: right; /* CHANGED: Right align text */
        margin-top: 10px; 
        padding-right: 0;
    }

    .mobile-menu-container .dropdown-item {
        color: rgba(255,255,255,0.7);
        display: flex;
        justify-content: flex-end; /* CHANGED: Right align item content */
        padding-right: 0;
    }
    
    .mobile-menu-container .dropdown-item:hover {
        color: #F5B800;
        background: transparent;
    }
}

/* --- EXTRA SMALL DEVICES (iPhone SE / Fold / etc) --- */
@media (max-width: 410px) {
    
    /* Target the form that holds the search bar */
    form.d-md-none {
        /* Remove the side margins that squish it */
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 50%; /* Force full width */
    }

    /* Target the input group itself to ensure it fills the space */
    form.d-md-none .input-group {
        width: 100% !important;
    }

    /* Optional: Make the text inside slightly smaller to fit better */
    form.d-md-none input.form-control {
        font-size: 0.8rem !important; 
        padding-left: 5px !important;
    }
}



/* --- DESKTOP ONLY FIXES --- */
@media (min-width: 769px) {
    
    /* 1. Force Right Alignment (Anchor Right, Expand Left) */
    .dropdown-menu-end {
        right: 0 !important;
        left: auto !important;
        transform: none !important; /* Disables Popper.js dynamic positioning conflicts */
        text-align: left; /* Keep the text inside readable (optional) */
    }

    /* 2. Slide Animation (Existing code, keep this) */
    .slide-animation {
        animation: slideDown 0.2s ease forwards;
        display: block; 
        visibility: hidden;
    }
    
    .dropdown:hover .slide-animation, 
    .dropdown .dropdown-menu.show {
        visibility: visible;
    }
}
.bg-purple {
    background-color:#5a189a !important;
}

    /* --- MOBILE "ZOOM" STYLE (Max-width 768px covers all phones) --- */
    @media (max-width: 768px) {

        /* 2. Force Container to Fill Screen */
        .container.py-2 {
            padding: 0 !important;
            margin: 0 !important;
            max-width: 100% !important;
            width: 100% !important;
        }
        
        /* 3. Strip Card Styling for "App-like" feel */
        .card.checkoutPage {
            border: none !important;
            border-radius: 0 !important;
            box-shadow: none !important;
            min-height: 100vh; /* Fills height */
        }

        .card-body.checkoutPage {
            padding: 20px !important;
        }

        /* 4. Make Inputs Big and Tappable */
        input.form-control, select.form-select, .btn {
            font-size: 18px !important; /* Matches base text */
            padding: 12px !important;   /* Fat finger friendly */
            height: auto !important;
        }

        /* 5. Adjust Layout for Inputs */
        .col-md-6 {
            margin-bottom: 15px; /* Adds space between stacked date/time on mobile */
        }
        
        /* 6. Radio Buttons Scale */
        .form-check-input {
            transform: scale(1.5);
            margin-right: 10px;
        }
    }

/* --- CAROUSEL CAPTION FIXES --- */

.hero-carousel-item {
    position: relative;
}

.hero-caption {
    /* 1. Vertical Centering */
    top: 50%;
    transform: translateY(-50%);
    bottom: auto;
    padding-bottom: 0;

    /* 2. Shrink Background to Text Content */
    width: fit-content !important;   /* Only be as wide as the text */
    max-width: 80%;                  /* Prevent it from hitting the very edge */
    display: inline-block !important; 
}

/* 3. Handle Left-Aligned Slides (Slide 1 & 3) */
.hero-caption.text-start {
    left: 5% !important;  /* Position from left */
    right: auto !important;
    text-align: left;
}

/* 4. Handle Right-Aligned Slides (Slide 2) */
.hero-caption.text-end {
    right: 5% !important; /* Position from right */
    left: auto !important;
    text-align: right;
}

/* 5. Handle Center Slides (Slide 4 - Default) */
/* We target captions that do NOT have text-start or text-end */
.hero-caption:not(.text-start):not(.text-end) {
    left: 50% !important;
    /* Move back 50% left and 50% up to perfectly center */
    transform: translate(-50%, -50%) !important; 
    text-align: center;
}

/* Mobile Adjustment: Make text box a bit wider on phones so text doesn't squish */
@media (max-width: 576px) {
    .hero-caption {
        max-width: 90%;
        padding: 10px !important; /* Reduce padding inside the black box */
    }
.py-2 {
    padding-top: 0px !important;
}
}

/* --- CAROUSEL CONTROLS --- */
/* Move arrows closer to the edge by reducing the clickable area width */
.carousel-control-prev, 
.carousel-control-next {
    width: 5% !important; /* Default is 15%, reducing this pulls them to the edge */
}

/* Optional: Ensure they stay exactly on the edge */
.carousel-control-prev {
    left: 0 !important;
}

.carousel-control-next {
    right: 0 !important;
}

/* Optional: Make the icons slightly bigger/bolder if they feel too small near the edge */
.carousel-control-prev-icon, 
.carousel-control-next-icon {
    width: 3rem;
    height: 3rem;
}
.bg-primary, .btn-blue{
    color: black !important;
    background-color: rgb(82 147 243) !important;
}

.bg-danger, .btn-danger, .btn-outline-danger-deny:hover, .btn-danger-deny:hover {
    color: black !important;
    background-color: rgb(241 58 76) !important;
     border-color: rgb(241 58 76) !important;
}
 .btn-outline-danger-deny, .btn-danger-deny {
    color: rgb(241 58 76) !important;
    background-color: rgb(255, 255, 255) !important;
    border-color: rgb(241 58 76) !important;
}



.bg-warning{
    color: black !important;
}

.btn-success-yellow{
    background-color:#f5b800 !important;
}

.btn-outline-success-approve, .btn-success-approve{
    background-color:#ffffff !important;
    color: #18ac67 ;
    border-color: #18ac67 ;
}
.btn-outline-success-approve:hover{
    background-color:#18ac67 !important;
    color: black ;
}

.btn-success {
    background-color: #18ac67 !important;
    border-color:#18ac67 !important;
    color: rgb(0, 0, 0) !important;
}


#peter {
    border: none;
    background-color: transparent;
    
    width: 10px;
    height: auto;
}
 /* --- PETER BUTTON STYLES --- */
    #peter-btn {
        position:relative; /* Keeps it in the same spot on screen even when scrolling */
        bottom: -10vh;    /* Distance from bottom */
        right: -70vw;     /* Distance from right */
        width: 60px;     /* Make it smaller */
        height: 60px;
        background: transparent; /* Remove button gray background */
        border: none;            /* Remove button border */
        cursor:default;
        z-index: 1000;           /* Ensure it sits on top of other elements */
        padding: 0;
        transition: transform 0.2s ease;
        filter: blur(4px);
    }

    #peter-btn:hover {
        transform: scale(1.1); /* Slight zoom on hover */
    }

    #peter-btn img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
    .text-primary-door {
        color: black !important;
    }
    .text-decoration-none-link{
        color: black !important;
    }

    .text-info{
       color: rgba(255, 255, 255, .5) !important;
    }


    html {
  scroll-behavior: smooth;
}

.btn-secondary {

--bs-btn-border-color: none;
}

@media (max-width:426px) {
    #myCarousel {
        display: none;
    }
}

/* --- MOBILE LAYOUT FIXES (Max-width 768px) --- */
@media (max-width: 768px) {
    
    /* 1. NARROWER NAVBAR */
    .navbar {
        padding-top: 5px !important;
        padding-bottom: 5px !important;
        min-height: 50px; /* Force it to be thinner */
    }

    /* Shrink the logo */
    .navbar-brand img {
        width: 30px !important;
        height: 30px !important;
    }

    /* 2. NARROWER SEARCH BAR (Height & Width) */
    form.d-md-none {
        flex-grow: 0 !important;   /* Don't let it take all space */
        width: 55% !important;     /* Only take 55% of the width */
    }

    /* Make the input box thinner (height) */
    form.d-md-none .form-control {
        height: 32px !important;   
        font-size: 0.85rem !important;
        padding: 0 10px !important;
    }
    
    /* Make the search button match */
    form.d-md-none .btn {
        height: 32px !important;
        padding: 0 10px !important;
        display: flex;
        align-items: center;
    }

    /* 3. ADJUST BODY PADDING */
    /* Since navbar is thinner, we don't need 10vh padding on body */
    body {
        padding-top: 70px !important; 
    }
}

/* --- EXTRA SMALL SCREENS (Phones) --- */
@media (max-width: 576px) {
    
    /* 1. HIDE CAROUSEL (As you requested) */
    #myCarousel {
        display: none !important;
    }

    /* 2. BIGGER ITEMS (The Fix) */
    /* Previously this was 80px. We change it to 350px to fill the screen */
    .sticker-img-container {
        height: 350px !important; 
    }

    /* Make the card title bigger */
    .card-title {
        font-size: 1.2rem !important;
        font-weight: bold;
    }

    /* Make the price bigger */
    .card-text.fs-5 {
        font-size: 1.2rem !important;
    }

    /* Make the cart button bigger */
    form button.rounded-circle {
        width: 45px !important;
        height: 45px !important;
    }
}
#stockInput{
    width: 100%;
}

.row-add {
   display: flex;
   gap: 10px;
   margin: 0px !important;
}

.btn.disabled, .btn:disabled, fieldset:disabled .btn {
    color: #000000;
    pointer-events: none;
    background-color: #f5b800;
    border-color: #f5b800;
    opacity: 100;
}
/* Force only the 'Approved' waiting button to be green when disabled */
.btn-approved-waiting:disabled {
    background-color: #18ac67 !important;
    border-color: #18ac67 !important;
    color: rgb(0, 0, 0) !important;
    opacity: 1 !important; /* Removes the faded/gray look */
    cursor: not-allowed;
   
}