/* Make the body take the full height */

html,
body {
    height: 100%;
    font-family: 'Inter', sans-serif;
    background-color: #fff;
    color: #696763;
}


/* Add padding to account for the fixed header */

body {
    padding-top: 70px;
    /* Adjust this value based on your header height */
}

/* Upload  Photos */


/* Bean 001 - Subtle Floating Movement */


/* Default styles for large screens */

#bean-001 {
    position: absolute;
    top: -76px;
    right: 372px;
    z-index: 4;
    will-change: transform;
    animation: float-bean-001 4s ease-in-out infinite;
}

#bean-002 {
    position: absolute;
    top: -44px;
    right: 70px;
    z-index: 6;
    will-change: transform;
    animation: float-bean-002 4.5s ease-in-out infinite;
}

#bean-003 {
    position: absolute;
    top: 284px;
    right: 14px;
    z-index: 5;
    will-change: transform;
    animation: float-bean-003 5s ease-in-out infinite;
}

#bean-004 {
    position: absolute;
    top: 251px;
    left: 72px;
    z-index: 7;
    will-change: transform;
    animation: float-bean-004 5.5s ease-in-out infinite;
}


/* Responsive adjustments for screens 768px and smaller */

@media (max-width: 768px) {
    #bean-001 {
        top: -50px;
        right: 60px;
        transform: scale(0.7);
    }
    #bean-002 {
        top: -20px;
        right: 40px;
        transform: scale(0.7);
    }
    #bean-003 {
        top: 200px;
        right: 20px;
        transform: scale(0.7);
    }
    #bean-004 {
        top: 180px;
        left: 30px;
        transform: scale(0.7);
    }
}


/* Further adjustments for very small screens (e.g., 480px and below) */

@media (max-width: 480px) {
    #bean-001 {
        top: -30px;
        right: 250px;
        transform: scale(0.5);
    }
    #bean-002 {
        top: -10px;
        right: 20px;
        transform: scale(0.5);
    }
    #bean-003 {
        top: 150px;
        right: 10px;
        transform: scale(0.5);
    }
    #bean-004 {
        top: 130px;
        left: 20px;
        transform: scale(0.5);
    }
}


/* Reduced Floating Animations for Each Bean */

@keyframes float-bean-001 {
    0%,
    100% {
        transform: translateY(0) translateX(0);
    }
    25% {
        transform: translateY(-8px) translateX(-3px);
    }
    50% {
        transform: translateY(5px) translateX(6px);
    }
    75% {
        transform: translateY(-6px) translateX(3px);
    }
}

@keyframes float-bean-002 {
    0%,
    100% {
        transform: translateY(0) translateX(0);
    }
    25% {
        transform: translateY(7px) translateX(-5px);
    }
    50% {
        transform: translateY(-10px) translateX(3px);
    }
    75% {
        transform: translateY(5px) translateX(-2px);
    }
}

@keyframes float-bean-003 {
    0%,
    100% {
        transform: translateY(0) translateX(0);
    }
    25% {
        transform: translateY(-6px) translateX(5px);
    }
    50% {
        transform: translateY(10px) translateX(-7px);
    }
    75% {
        transform: translateY(-8px) translateX(2px);
    }
}

@keyframes float-bean-004 {
    0%,
    100% {
        transform: translateY(0) translateX(0);
    }
    25% {
        transform: translateY(10px) translateX(-5px);
    }
    50% {
        transform: translateY(-12px) translateX(6px);
    }
    75% {
        transform: translateY(7px) translateX(-4px);
    }
}

.main-logo {
    width: 240px;
}

.footer-logo {
    width: 240px;
}

.language-selector {
    font-size: 14px;
}

.language-selector a {
    color: #858585;
}


/*---- Start of my Colours ----*/

.btn-primary {
    background-color: #816552!important;
    border: #755b49!important;
}


/* Dark Grey (#696763) */

.bg-custom-dark-grey {
    background-color: #696763;
}

.text-custom-dark-grey {
    color: #696763;
}


/* Light Grey (#EAE7E2) */

.bg-custom-light-grey {
    background-color: #EAE7E2;
}

.text-custom-light-grey {
    color: #EAE7E2;
}


/* Off White (#F5F5F3) */

.bg-custom-off-white {
    background-color: #F5F5F3;
}

.text-custom-off-white {
    color: #F5F5F3;
}


/* Light Brown (#CBB093) */

.bg-custom-light-brown {
    background-color: #CBB093;
}

.text-custom-light-brown {
    color: #CBB093;
}


/* Dark Brown (#816552) */

.bg-custom-dark-brown {
    background-color: #816552;
}

.text-custom-dark-brown {
    color: #816552;
}


/*---- End of my Colours ----*/


/* Create a flex container for the whole page */

.container-wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}


/* Content should grow and fill the available space */

.main-content {
    flex: 1;
    margin-left: 250px;
}


/* Footer stays at the bottom */

.footer {
    position: relative;
    bottom: 0;
    width: 100%;
    background-color: #f8f9fa;
}

.sidebar {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 100;
    padding: 48px 0 0;
}

.sidebar .nav-link {
    font-weight: 500;
    color: #333;
}

.sidebar .nav-link.active {
    color: #007bff;
}

.main-content {
    margin-left: 250px;
}

@media (max-width: 768px) {
    .main-content {
        margin-left: 0;
    }
    .sidebar {
        display: none;
    }
    .mobile-nav-toggle {
        display: block;
    }
}

.mobile-nav-toggle {
    display: none;
}

.ai-oracle {
    background: #e0f7fa;
    /* Softer, friendly light blue */
    color: #00796b;
    /* Darker teal text for readability */
    font-style: normal;
    /* Removed italic for easier readability */
    padding: 12px;
    /* Increased padding for more comfortable spacing */
    margin: 10px 0;
    /* Cleaner spacing between messages */
    border-radius: 20px 20px 20px 5px;
    /* More rounded corners, bottom-left less rounded */
    position: relative;
    max-width: 90%;
    /* Limit the width to 70% for better mobile view */
    float: left;
    clear: both;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    /* Soft shadow for a more polished look */
}

.users {
    background: #4a4a4a;
    /* Dark gray for contrast */
    color: #ffffff;
    /* White text for clarity */
    font-style: normal;
    /* Keep text regular for easier readability */
    padding: 12px;
    /* Increased padding for more comfortable spacing */
    margin: 10px 0;
    /* Cleaner spacing between messages */
    border-radius: 20px 20px 5px 20px;
    /* More rounded corners, bottom-right less rounded */
    position: relative;
    max-width: 90%;
    /* Limit the width to 70% for better mobile view */
    float: right;
    clear: both;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    /* Soft shadow for a more polished look */
}

#nav-logout {
    border: 1px solid!important;
    background-color: #dc3545!important;
    border-color: #dc3545!important;
    border-radius: 5px;
    color: #fff;
    font-weight: 600;
    padding-left: 10px;
}

.typing-indicator {
    font-style: italic;
    color: #888;
    padding: 8px;
    background-color: #f1f1f1;
    border-radius: 8px;
    display: inline-block;
    margin: 10px 0;
    /* Space between the messages and the indicator */
    clear: both;
    /* Ensures the indicator appears on a new line */
    float: left;
    /* Aligns the indicator to the left side of the chatbox */
}

.how-it-works-icons {
    filter: invert(15%) sepia(35%) saturate(500%) hue-rotate(10deg) brightness(90%);
}

.coffe-cup-img-thumbnail {
    width: 100%;
    /* Makes the image take up the full width of the card */
    height: 200px;
    /* Set a fixed height for the image container */
    object-fit: cover;
    /* Ensures the image fills the container and crops excess parts */
    border-radius: 5px;
    /* Optional: Adds a slight border radius for a nicer look */
}

.my-cups-all {
    /* border: 1px solid; */
    margin-top: 10px;
    /* margin-right: 12px; */
}

.cup-creation-date {}

.book-icon {
    padding: 8px;
    position: absolute;
    top: 14px;
    right: 10px;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50%;
}

.green-bg {
    background-color: #5bc130;
}

.white-bg {
    background-color: #fff;
}

.red-bg {
    background-color: #ec6262;
}

.last-message {
    font-size: 13px;
    font-weight: 700;
}

.oracle-icons {
    width: 20px;
}

.add-photo-img {
    width: 40px;
    padding-top: 10px;
}

.add-photo-icon-box {
    background-color: #3d3d3d;
    width: 60px;
    border-radius: 50%;
    height: 60px;
    text-align: center;
    vertical-align: middle;
}

.form-group ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    padding-bottom: 15px;
    font-size: 13px;
}