body {
    font-family: 'Poppins', sans-serif !important;
}
#toastText {
    font-family: 'Raleway', sans-serif;
}

.vh-80 {
    height: 80vh;
}
:root {
    --blue: #1A3EA1;
    --light-blue: #7E8EBB;
    --lightest-blue: #92BBF0;
    --gray: #e9ecef;
    --white: #F2F6F8;
    --gray-transparent: #e9ecefCC;
    --white-transparent: #F2F6F8CC;
    --text-black: #333;
    --text-light-black: #71777d;
    --text-light-black-transparent: #71777d80;
    --accent-color: #4D7CFE;
    --gradient-blue: linear-gradient(90deg,var(--white) 0%, var(--blue) 0%, var(--text-black) 100%);
    --gradient-lightblue: linear-gradient(90deg,var(--lightest-blue) 0%, var(--light-blue) 0%, var(--blue) 100%);
    --gradient-black: linear-gradient(90deg,var(--white) 0%, var(--blue) 0%, var(--text-black) 100%);
    --red: #eb6254;
    --green: #5a9f68;
}

label, .detail-form-checkbox {
    display: flex;
    flex-direction: row;
}

/* Backgrounds */
.blue-bg {
    background-color: var(--blue);
}

.lightblue-bg {
    background-color: var(--light-blue);
}

.lightestblue-bg {
    background-color: var(--lightest-blue);
}

.gray-bg {
    background-color: var(--gray);
}

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

/* Text colors */
.text-black {
    color: var(--text-black) !important;
}

.text-light-black {
    color: var(--text-light-black) !important;
}

.text-blue {
    color: var(--blue) !important;
}

.text-lightblue {
    color: var(--light-blue) !important;
}

.text-lightestblue {
    color: var(--lightest-blue) !important;
}

.text-white {
    color: var(--white) !important;
}

.text-light-blue {
    color: var(--light-blue) !important;
}


/* Components */


.custom-shadow-1 {
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
}

.button-outline{
    color: var(--blue);
    border-color: var(--light-blue);
}




/* Components */

/* SHADOW */
.custom-shadow-1 {
    box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
}

/* Outlined button */
.button-outline {
    color: var(--blue);
    border-color: var(--light-blue);
}

/* Button 1*/
.button-1 {
    background-color: #c2fbd7;
    border-radius: 100px;
    box-shadow: rgba(44, 187, 99, .2) 0 -25px 18px -14px inset,rgba(44, 187, 99, .15) 0 1px 2px,rgba(44, 187, 99, .15) 0 2px 4px,rgba(44, 187, 99, .15) 0 4px 8px,rgba(44, 187, 99, .15) 0 8px 16px,rgba(44, 187, 99, .15) 0 16px 32px;
    color: green;
    cursor: pointer;
    display: inline-block;
    font-family: CerebriSans-Regular,-apple-system,system-ui,Roboto,sans-serif;
    padding: 7px 20px;
    text-align: center;
    text-decoration: none;
    transition: all 250ms;
    border: 0;
    font-size: 16px;
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
}

    .button-1:hover {
        box-shadow: rgba(44,187,99,.35) 0 -25px 18px -14px inset,rgba(44,187,99,.25) 0 1px 2px,rgba(44,187,99,.25) 0 2px 4px,rgba(44,187,99,.25) 0 4px 8px,rgba(44,187,99,.25) 0 8px 16px,rgba(44,187,99,.25) 0 16px 32px;
        transform: scale(1.05) rotate(-1deg);
    }


/* Button: bring to top */

/** HTML:

 <button class="button-back">
  <svg class="svgIcon" viewBox="0 0 384 512">
    <path
      d="M214.6 41.4c-12.5-12.5-32.8-12.5-45.3 0l-160 160c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 141.2V448c0 17.7 14.3 32 32 32s32-14.3 32-32V141.2L329.4 246.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-160-160z"
    ></path>
  </svg>
</button>

*/
.button-back {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: rgb(20, 20, 20);
    border: none;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0px 0px 0px 4px rgba(180, 160, 255, 0.253);
    cursor: pointer;
    transition-duration: 0.3s;
    overflow: hidden;
    position: relative;
}

.svgIcon {
    width: 12px;
    transition-duration: 0.3s;
}

    .svgIcon path {
        fill: white;
    }

.button-back:hover {
    width: 140px;
    border-radius: 50px;
    transition-duration: 0.3s;
    background-color: rgb(181, 160, 255);
    align-items: center;
}

    .button-back:hover .svgIcon {
        /* width: 20px; */
        transition-duration: 0.3s;
        transform: translateY(-200%);
    }

.button-back::before {
    position: absolute;
    bottom: -20px;
    content: "Back to Top";
    color: white;
    /* transition-duration: .3s; */
    font-size: 0px;
}

.button-back:hover::before {
    font-size: 13px;
    opacity: 1;
    bottom: unset;
    /* transform: translateY(-30px); */
    transition-duration: 0.3s;
}

/* Button: plus button

<button class="button plus">
  <span class="circle" aria-hidden="true">
    <span class="icon arrow"></span>
  </span>
  <span class="button-text">Learn More</span>
</button>

*/

/* Button: Actions */

.button-action {
    position: relative;
    color: #000;
    padding: 1rem;
    margin: .2rem;
    border-radius: 10px;
    width: 1rem;
    height: 1rem;
    font-size: 17px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.tooltip {
    position: absolute;
    top: -30px; 
    left: 50%;
    transform: translateX(-50%);
    font-size: 14px;
    background: #ffffff;
    color: #000; 
    padding: 5px 8px;
    border-radius: 5px;
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
    opacity: 0;
    pointer-events: none;
    z-index: 999999999999999 !important;
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

    .tooltip::before {
        position: absolute;
        content: "";
        height: 8px;
        width: 8px;
        background: #ffffff;
        top: -3px;
        left: 50%;
        transform: translate(-50%) rotate(45deg);
        transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    }

.button-action:hover .tooltip {
    top: 40px;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

svg:hover span,
svg:hover .tooltip {
    text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.1);
}

.button-action:hover,
.button-action:hover .tooltip,
.button-action:hover .tooltip::before {
    background: linear-gradient(320deg, var(--blue), var(--blue));
    color: #ffffff;
}

.edit-btn {
    background-color: var(--accent-color);
    color: #ffffff;
}
.delete-btn {
    background-color: var(--red);
    color: #ffffff;
}

.view-btn {
    background-color: var(--light-blue);
    color: #ffffff;
}

/* Action Button: container*/
.button-container {
    display: flex; 
    gap: .5rem;
}

.button-action {
    display: flex;
    align-items: center; 
}

.tooltip {
    margin-right: 5px;
}


@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600;700&display=swap");


.button-add {
    font-size: 1rem;
    font-weight: 600;
    background-color: var(--blue);
    padding: 24px 24px 24px 32px;
    display: flex;
    align-items: center;
    outline: none;
    border: none;
    border-radius: 99px;
    position: relative;
    transition: all .5s cubic-bezier(.77,0,.175,1);
    max-height: 1rem;
    max-width: 20rem;
    text-decoration: none;
    .text

{
    color: #fff;
    line-height: 1;
    position: relative;
    z-index: 5;
    margin-right: 32px;
}

svg {
    display: inline-block;
    position: relative;
    z-index: 5;
    transform: rotate(0deg) translateX(0);
    transform-origin: left;
    transition: all .5s cubic-bezier(.77,0,.175,1);
}

&::before {
    content: '';
    background-color: var(--accent-color);
    width: 32px;
    height: 32px;
    display: block;
    position: absolute;
    z-index: 1;
    border-radius: 99px;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    transition: all .5s cubic-bezier(.77,0,.175,1);
}

&.light {
    color: black;
    background-color: var(--lightest-blue);
    &::before

{
    background-color: var(--blue);
}

}
}

.button-add:hover {
    svg

{
    transform: rotate(45deg) translateX(-8px);
}

&::before {
    content: '';
    width: 100%;
    height: 100%;
    right: 0;
}

}



/* Dashboard */

#navbarSupportedContent ul li a, #iconText {
    font-family: 'Poppins', sans-serif !important;
    font-weight: 600;
    font-size: 1.2em;
}
.arial-blk {
    font-family: 'Arial Black', sans-serif !important;
}

.poppins {
    font-family: 'Poppins', sans-serif !important;
}

.raleway {
    font-family: 'Raleway', sans-serif;
}

#headerIcon, #userDropdown {
    font-size: 1.5em;
}

.square-bg-icon {
    display: inline-block;
    width: 10em;
    height: 10em;
    background: linear-gradient(to top left, var(--lightest-blue),var(--blue),var(--blue));
    text-align: center;
    line-height: 10em;
    border-radius: 50%;
}

.square-bg-icon i {
    font-size: 6em;
    color: var(--white);
}

.vertical-line {
    border-left: 2px solid #000;
    height: 100%;
}


.product-card {
    border-radius: 1rem;
    border: solid 1px #ddd;
    overflow: hidden;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
    cursor: pointer;
    height: 250px;
    position: relative;
}

    .product-card:hover {
        transform: scale(1.05);
        box-shadow: rgba(70, 130, 180, 0.2) -5px 5px, rgba(70, 130, 180, 0.15) -10px 10px, rgba(70, 130, 180, 0.1) -15px 15px, rgba(70, 130, 180, 0.07) -20px 20px, rgba(70, 130, 180, 0.04) -25px 25px;
        z-index: 10;
    }

.product-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

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

.product-title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    background-color: var(--blue);
    color: white;
    padding: 15px;
    text-align: center;
    z-index: 2;
}

.title-background {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 0;
    background-color: var(--blue);
    transition: height 0.5s ease, top 0.5s ease;
    z-index: 1;
}

.product-card:hover .title-background {
    height: 100%;
    top: 0;
}

.product-title-text {
    position: relative;
    z-index: 3;
}

@media (max-width: 991px) {
    #navbarSupportedContent ul li a {
        font-family: 'Arial Black', sans-serif;
        font-weight: 900;
        font-size: 0.8em;
    }
}

/* Customer Feedback Carousel Styles */
.feedback-carousel {
    margin-bottom: 2rem; /* Add some space below the carousel */
}

.feedback-card {
    border: 1px solid var(--text-light-black-transparent);
    background-color: #e0f2f7; /* Light blue background */
    padding: 1.5rem;
    border-radius: 0.5rem;
    height: 180px; /* Updated height */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Changed from space-between */
    overflow: hidden; /* Ensure content doesn't overflow the card */
}

    .feedback-card .bi-person-circle {
        color: #0d6efd; /* Bootstrap primary blue */
    }

.feedback-description {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3; /* Limit to 3 lines */
    -webkit-box-orient: vertical;
    line-height: 1.4em; /* Adjust as needed */
    max-height: 4.2em; /* line-height * 3 */
    margin-bottom: 0; /* Remove default paragraph margin */
    flex-grow: 1; /* Allow description to take available space */
}

.star-rating i {
    color: #ccc; /* Default empty star color */
    font-size: 1.2rem;
}

    .star-rating i.filled {
        color: #ffc107; /* Bootstrap warning yellow for filled stars */
    }

/* Adjust Carousel Controls */
.feedback-carousel .feedback-control {
    width: 5%; /* Smaller width for controls */
    opacity: 0.7;
}

    .feedback-carousel .feedback-control:hover {
        opacity: 1;
    }

.feedback-carousel .carousel-control-prev {
    left: -6%; /* Position outside the content area */
}

.feedback-carousel .carousel-control-next {
    right: -6%; /* Position outside the content area */
}

.feedback-carousel .carousel-control-prev-icon,
.feedback-carousel .carousel-control-next-icon {
    background-color: rgba(0, 0, 0, 0.5); /* Darker background for visibility */
    border-radius: 50%;
    padding: 15px; /* Increase padding to make icons larger */
    background-size: 60%, 60%; /* Adjust icon size within the background */
}

/* Media query for smaller screens to potentially adjust control positions */
@media (max-width: 768px) {
    .feedback-carousel .carousel-control-prev {
        left: -2%;
    }

    .feedback-carousel .carousel-control-next {
        right: -2%;
    }

    .feedback-card {
        height: auto; /* Allow height to adjust on smaller screens */
        min-height: 200px; /* Adjust min-height */
    }
}

@media (max-width: 576px) {
    /* Stack feedback items vertically on extra small screens */
    .feedback-carousel .carousel-item .row > div[class*='col-'] {
        margin-bottom: 1rem;
    }

    .feedback-card {
        min-height: 180px; /* Adjust min-height */
    }

    .feedback-carousel .feedback-control {
        /* Hide controls slightly off screen if needed */
        /* Example: visibility: hidden; */
    }
}

.text-justify{
    text-align:justify;
}

/* Animated Background Circles */
.bg-circles-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -2;
    pointer-events: none;
}

/* Content overlay */
.content-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(242, 246, 248, 0.60), rgba(242, 246, 248, 0.8));
    backdrop-filter: blur(2px);
    z-index: -1;
    pointer-events: none;
}

.bg-circle {
    position: absolute;
    border-radius: 50%;
    opacity: 0.12;
    transition: transform 1.2s ease-out, opacity 1.2s ease-out, border-radius 1.5s ease-in-out;
    box-shadow: 0 0 30px rgba(26, 62, 161, 0.2);
    mix-blend-mode: normal;
}

.bg-circle-1 {
    background-color: var(--blue);
    box-shadow: 0 0 40px rgba(26, 62, 161, 0.25);
}

.bg-circle-2 {
    background-color: var(--light-blue);
    box-shadow: 0 0 40px rgba(126, 142, 187, 0.25);
    border: 1px solid rgba(126, 142, 187, 0.3);
}

.bg-circle-3 {
    background-color: var(--lightest-blue);
    box-shadow: 0 0 40px rgba(146, 187, 240, 0.25);
    border: 1px solid rgba(146, 187, 240, 0.4);
}

.bg-pattern-1 .bg-circle {
    transform: translateY(0);
    opacity: 0.15;
    border-radius: 50%;
}

.bg-pattern-2 .bg-circle {
    transform: translateY(-100px) rotate(15deg);
    opacity: 0.18;
    border-radius: 60% 40% 50% 50% / 40% 50% 50% 60%;
}

.bg-pattern-3 .bg-circle {
    transform: translateY(-200px) rotate(-10deg);
    opacity: 0.16;
    border-radius: 40% 60% 70% 30% / 50% 40% 60% 50%;
}

.bg-pattern-4 .bg-circle {
    transform: translateY(-300px) rotate(25deg);
    opacity: 0.2;
    border-radius: 30% 70% 50% 50% / 40% 60% 40% 60%;
}

.bg-pattern-5 .bg-circle {
    transform: translate(-150px, -150px) rotate(-20deg);
    opacity: 0.17;
    border-radius: 60% 40% 30% 70% / 50% 50% 50% 50%;
}

/* Additional circle animations for larger screens */
@media (min-width: 992px) {
    .bg-pattern-1 .bg-circle:nth-child(odd) {
        transform: scale(1.05);
    }
    
    .bg-pattern-2 .bg-circle:nth-child(even) {
        transform: translateX(50px) translateY(-100px) rotate(15deg);
    }
    
    .bg-pattern-3 .bg-circle:nth-child(3n) {
        transform: translateX(-80px) translateY(-200px) rotate(-10deg);
    }
    
    .bg-pattern-4 .bg-circle:nth-child(4n) {
        transform: translateX(100px) translateY(-300px) rotate(25deg);
    }
    
    .bg-pattern-5 .bg-circle:nth-child(5n) {
        transform: translateX(-150px) translateY(-150px) rotate(-20deg) scale(1.1);
    }
}

/* Main content area with semi-transparent background */
.content-bg {
    border: 1px solid var(--text-light-black-transparent);
    background-color: rgba(233,236,239, 0.70); /* var(--white) with 50% opacity */
    position: relative;
    z-index: 1;
}

/* Dark overlay for carousel items - only for main carousel */
#myCarousel .carousel-item {
    position: relative;
}

#myCarousel .carousel-item::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* Dark gray with 50% opacity */
    z-index: 1;
}

#myCarousel .carousel-item .container {
    position: relative;
    z-index: 2; /* Ensure text appears above the overlay */
}

/* Carousel enhancement - makes the top and bottom more interesting */
.carousel-enhanced-bottom {
    border-radius: 1rem;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
    position: relative;
    overflow: hidden;
}

.carousel-enhanced-bottom::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 15px;
    background: var(--lightest-blue);
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
    box-shadow: 0 -5px 15px rgba(146, 187, 240, 0.4);
    z-index: 3; /* Higher than the overlay */
}

.carousel-enhanced-bottom::before {
    content: '';
    position: absolute;
    top: -2px;
    left: 0;
    width: 100%;
    height: 15px;
    background: var(--lightest-blue);
    border-radius: 0 0 50% 50% / 0 0 100% 100%;
    box-shadow: 0 5px 15px rgba(146, 187, 240, 0.4);
    z-index: 2;
}

/* Main carousel indicators styling */
#myCarousel .carousel-indicators {
    z-index: 5;
    bottom: 20px;
}

/* Make the carousel indicators more visible and interesting - only for main carousel */
#myCarousel .carousel-indicators [data-bs-target] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: var(--white);
    opacity: 0.5;
    transition: all 0.3s ease;
    margin: 0 6px;
}

#myCarousel .carousel-indicators .active {
    opacity: 1;
    background-color: var(--lightest-blue);
    transform: scale(1.2);
}

/* Carousel controllers at the sides - only for main carousel */
#myCarousel .carousel-control-prev, 
#myCarousel .carousel-control-next {
    width: 50px;
    height: 50px;
    background-color: var(--lightest-blue);
    border-radius: 50%;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0.7;
    margin: 0 15px;
    transition: all 0.3s ease;
}

#myCarousel .carousel-control-prev {
    left: 10px;
}

#myCarousel .carousel-control-next {
    right: 10px;
}

#myCarousel .carousel-control-prev:hover, 
#myCarousel .carousel-control-next:hover {
    opacity: 1;
    background-color: var(--blue);
}

/* Main carousel text styling */
#myCarousel .carousel-caption {
    padding: 1.5rem;
    max-width: 80%;
    margin: 0 auto;
}

#myCarousel .carousel-caption h1 {
    font-family: 'Arial Black', sans-serif;
    font-size: 2.8rem;
    line-height: 1.2;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
    margin-bottom: 1rem;
    color: var(--white);
    letter-spacing: -0.5px;
}

#myCarousel .carousel-caption p {
    font-family: 'Poppins', sans-serif;
    font-size: 1.2rem;
    font-weight: 400;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
    margin-bottom: 1.5rem;
    color: var(--white);
}

#myCarousel .carousel-caption .btn {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    padding: 0.8rem 2rem;
    border-radius: 50px;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
    font-size: 1rem;
    border: 2px solid transparent;
}

#myCarousel .carousel-caption .btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 7px 20px rgba(0, 0, 0, 0.3);
    background-color: var(--blue) !important;
    color: var(--white) !important;
    border-color: var(--lightest-blue);
}

/* Responsive adjustments for carousel text */
@media (max-width: 992px) {
    #myCarousel .carousel-caption h1 {
        font-size: 2.2rem;
    }
    
    #myCarousel .carousel-caption p {
        font-size: 1rem;
    }
    
    #myCarousel .carousel-caption .btn {
        padding: 0.6rem 1.5rem;
        font-size: 0.9rem;
    }
}

@media (max-width: 768px) {
    #myCarousel .carousel-caption {
        max-width: 90%;
    }
    
    #myCarousel .carousel-caption h1 {
        font-size: 1.8rem;
    }
}

.flyer {
    position: fixed;
    z-index: 9999;
    transition: all 0.8s ease-in-out;
    font-size: 1rem;
    pointer-events: none;
}

.contact-btn:hover {
    background-color: var(--bs-success) !important;
    color: white !important;
    border-color: var(--accent-color) !important;
}

.active-nav-link {
    color: var(--accent-color) !important;
    font-weight: 600 !important;
}

/* Navigation Icons Styling */
.nav-icon-wrapper {
    position: relative;
    height: 40px;
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 5px;
}

    .nav-icon-wrapper .bi {
        font-size: 1.8rem;
        line-height: 1;
    }

.badge-counter {
    position: absolute;
    top: 0;
    right: 0;
    transform: translate(25%, -25%);
    background-color: var(--bs-danger);
    color: white;
    border-radius: 50%;
    font-size: 0.7rem;
    padding: 0.25rem 0.45rem;
    min-width: 1.2rem;
    height: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Dropdown positioning fixes */
.dropdown-menu-center {
    right: auto;
    left: 50%;
    transform: translateX(-50%);
}

@media (max-width: 992px) {
    #mobileUserDropdown + .dropdown-menu {
        position: absolute !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        min-width: 180px;
    }
}

/* Footer logo with rounded white background */
.navbar-brand-footer {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #FFFFFF;
    border-radius: 0.5rem;
    padding: 0.75rem 0.9rem;
    width: fit-content;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.navbar-brand-footer:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* Order History Styles */
.history-table th {
    font-weight: 600;
    color: var(--blue);
}

.history-table img {
    transition: transform 0.3s ease;
}

.history-table img:hover {
    transform: scale(1.2);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

.history-card {
    transition: all 0.3s ease;
    border-radius: 0.7rem;
    overflow: hidden;
}

.history-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(26, 62, 161, 0.15);
}

.badge.bg-info {
    background-color: var(--lightest-blue) !important;
    color: var(--blue) !important;
    font-weight: 500;
}

.badge.bg-light {
    border: 1px solid var(--light-blue);
    background-color: rgba(146, 187, 240, 0.1) !important;
    color: var(--blue) !important;
}

/* Order History Enhancements */
.order-history-container {
    position: relative;
}

.history-card {
    transition: all 0.3s ease;
    border-radius: 0.7rem !important;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
}

.history-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 24px rgba(26, 62, 161, 0.12) !important;
}

.history-card .card-header {
    border-bottom: none;
    font-family: 'Poppins', sans-serif;
}

.history-card .progress {
    border-radius: 10px;
    overflow: hidden;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
}

.history-card .progress-bar {
    transition: width 1.5s ease;
    background-image: linear-gradient(to right, var(--green), var(--accent-color));
}

.history-card .badge {
    font-weight: 500;
    letter-spacing: 0.5px;
    padding: 0.5rem 0.75rem;
}

.order-item {
    transition: all 0.3s ease;
}

.order-details-link {
    text-decoration: none;
    color: var(--text-black);
    transition: all 0.2s ease;
}

.order-details-link:hover {
    color: var(--accent-color);
}

.bg-light {
    background-color: rgba(248, 249, 250, 0.7) !important;
}

/* Additional animations */
@keyframes slideInUp {
    from {
        transform: translateY(30px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.slide-in-up {
    animation: slideInUp 0.5s ease-out forwards;
}

/* Order card shimmer effect on hover */
.history-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        to right,
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 0.1) 50%,
        rgba(255, 255, 255, 0) 100%
    );
    transform: skewX(-25deg);
    transition: all 0.75s;
    opacity: 0;
}

.history-card:hover::before {
    left: 125%;
    opacity: 1;
}




.history-btn {
    display: block;
    width: 100%;
    text-align: left;
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    border: 1px solid var(--text-light-black-transparent);
    background: linear-gradient(45deg, var(--blue), var(--accent-color));
    color: var(--white);
    transition: all 0.3s ease;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    text-decoration: none;
}

.history-btn.active {
    background: linear-gradient(45deg, var(--blue), var(--accent-color));
    color: var(--white);
    border-color: var(--blue);
    box-shadow: 0 4px 10px rgba(26, 62, 161, 0.3);
    transform: translateX(8px);
}

    .history-btn:hover {
        background-color: var(--lightest-blue);
        border-color: var(--lightest-blue);
        transform: translateY(-5px);
    }
/* Empty state enhancements */
.animate__fadeIn {
    animation: fadeIn 1s ease forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Professional Dropdown Menu Styling */
.dropdown-menu {
    padding: 0.5rem 0;
    margin-top: 0.5rem;
    border: none;
    border-radius: 0.5rem;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
    animation: dropdown-animation 0.2s ease-out;
    overflow: hidden;
}

.dropdown-item {
    padding: 0.6rem 1.5rem;
    font-weight: 500;
    transition: all 0.2s ease;
    position: relative;
    display: flex;
    align-items: center;
}

.dropdown-item i {
    margin-right: 0.75rem;
    font-size: 1rem;
    opacity: 0.7;
}

.dropdown-item:hover, .dropdown-item:focus {
    background-color: rgba(13, 110, 253, 0.05);
    color: var(--blue);
}

.dropdown-item.active, .dropdown-item:active {
    background-color: var(--accent-color);
    color: white;
}

.dropdown-divider {
    margin: 0.5rem 0;
    opacity: 0.1;
}

.dropdown-menu-dark {
    background-color: #343a40;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

.dropdown-menu-dark .dropdown-item {
    color: rgba(255, 255, 255, 0.85);
}

.dropdown-menu-dark .dropdown-item:hover, 
.dropdown-menu-dark .dropdown-item:focus {
    background-color: rgba(255, 255, 255, 0.1);
    color: white;
}

.dropdown-menu-dark .dropdown-divider {
    border-top-color: rgba(255, 255, 255, 0.15);
}

.nav-item.dropdown {
    position: relative;
}

.nav-item.dropdown > .nav-link::after {
    display: inline-block;
    margin-left: 0.4em;
    vertical-align: middle;
    content: "";
    border-top: 0.3em solid;
    border-right: 0.3em solid transparent;
    border-bottom: 0;
    border-left: 0.3em solid transparent;
    transition: transform 0.2s ease;
}

.nav-item.dropdown:hover > .nav-link::after,
.nav-item.dropdown.show > .nav-link::after {
    transform: rotate(180deg);
}

/* Add animation for dropdowns */
@keyframes dropdown-animation {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* After the dropdown styling, add these special styles for user display and logout button */

/* User Info Styling in Dropdown */
.dropdown-item-text .fw-semibold {
    color: var(--blue);
    letter-spacing: 0.02em;
}

.dropdown-item-text .bi-person-circle {
    color: var(--accent-color);
    font-size: 1.2rem;
}

/* Special logout button styling */
form .dropdown-item {
    color: #dc3545;
    font-weight: 500;
    transition: all 0.25s ease;
}

form .dropdown-item:hover {
    background-color: rgba(220, 53, 69, 0.1);
    color: #dc3545;
}

form .dropdown-item .bi {
    color: #dc3545;
}

/* Role badge styling */
.user-role-badge {
    display: inline-block;
    font-size: 0.7rem;
    padding: 0.2rem 0.5rem;
    border-radius: 1rem;
    background-color: var(--lightest-blue);
    color: var(--blue);
    margin-left: 0.5rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    vertical-align: middle;
}

.user-role-badge.admin {
    background-color: rgba(220, 53, 69, 0.2);
    color: #dc3545;
}

/* Enhanced logout button styling */
.logout-btn {
    border-radius: 0.375rem;
    margin: 0 0.5rem;
}

.logout-btn:hover {
    color: white !important;
    background-color: #dc3545 !important;
}

.logout-btn:hover .bi {
    color: white !important;
}

/* Signup Popup Styles */
#signup-popup .modal-content {
    border-radius: 1rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    border: none;
    overflow: hidden;
}

#signup-popup .modal-header {
    padding: 1.5rem;
    border-bottom: none;
    background: linear-gradient(135deg, var(--blue) 0%, var(--accent-color) 100%);
}

#signup-popup .modal-title {
    font-weight: 600;
    font-size: 1.25rem;
    letter-spacing: 0.5px;
}

#signup-popup .modal-body {
    padding: 2rem;
}

#signup-popup .benefits-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1.5rem;
}

#signup-popup .benefit-item {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    background-color: rgba(var(--bs-primary-rgb), 0.05);
    border-radius: 0.5rem;
    transition: all 0.3s ease;
}

#signup-popup .benefit-item:hover {
    background-color: rgba(var(--bs-primary-rgb), 0.1);
    transform: translateX(5px);
}

#signup-popup .benefit-item i {
    font-size: 1.1rem;
}

#signup-popup .benefit-item span {
    font-size: 0.95rem;
    color: var(--text-black);
    font-weight: 500;
}

#signup-popup .modal-footer {
    padding: 1.5rem;
    gap: 1rem;
}

#signup-popup .btn {
    padding: 0.75rem 1.5rem;
    font-weight: 500;
    border-radius: 0.5rem;
    transition: all 0.3s ease;
}

#signup-popup .btn-light {
    background-color: #f8f9fa;
    border: 1px solid #e9ecef;
    color: var(--text-light-black);
}

#signup-popup .btn-light:hover {
    background-color: #e9ecef;
    transform: translateY(-2px);
}

#signup-popup .btn.blue-bg {
    background: linear-gradient(135deg, var(--blue) 0%, var(--accent-color) 100%);
    border: none;
    box-shadow: 0 4px 15px rgba(77, 124, 254, 0.2);
}

#signup-popup .btn.blue-bg:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(77, 124, 254, 0.3);
}

/* Animation for modal */
#signup-popup.fade.show {
    animation: fadeInUp 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Backdrop styling */
.modal-backdrop.show {
    opacity: 0.7;
    backdrop-filter: blur(5px);
}