/* Navbar bg */

.navbar {
    /*background-color: #CD7F6D;*/
    background-color: #f2e8e5;
}


/* Make cards appear as clickable icon */

.text-primary-tpsw {
    color: #4F0A0A;
}

.cardBtn {
    transition: all 0.3s ease;
    /* Smooth transitions */
    cursor: pointer;
    /* Indicates clickability */
}

.cardBtn:hover {
    /*background-color: #f8f9fa; */
    /* Light gray for hover */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    /* Slight shadow */
    transform: scale(1.02);
    /* Slight zoom effect */
}

.cardBtn:hover .editIcon {
    display: block !important;
}


/* Order card img  */

.thumbnail-container {
    width: 100px;
    /* Set the desired width */
    height: 100px;
    /* Set the desired height */
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.thumbnail-container img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* Ensures the image covers the container */
}

.prod-container {
    width: 100%;
    /* Set the desired width */
    height: 100%;
    /* Set the desired height */
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.thumbnail-container img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* Ensures the image covers the container */
}


/* Paymethod img */

.ccimg-container {
    width: 50px;
    /* Set the desired width */
    height: 50px;
    /* Set the desired height */
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 5px;
}

.ccimg-container img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* Ensures the image covers the container */
}

.list-group-item {
    cursor: pointer;
    /* Make the label appear clickable */
    border: 1px solid #dee2e6;
    /* Optional: Matches Bootstrap default */
}

.list-group-item:hover {
    background-color: #f8f9fa;
    /* Optional: Highlight on hover */
}

.list-group-item:has(input[type="radio"]:checked) {
    background-color: #cfe2ff;
    /* Bootstrap primary blue */
    border-color: #cfe2ff;
    /* Match the background */
}

.list-group-item input[type="radio"] {
    display: none;
    /* Completely hide the radio button */
}


/* Custom scrollbar */

.custom-scrollbar {
    overflow-x: auto;
    max-width: 100%;
    height: 200px;
    /* Set a height for demo purposes */
}

.custom-scrollbar::-webkit-scrollbar {
    height: 12px;
    /* Set the height for horizontal scrollbar */
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: #f1f1f1;
    /* Track color */
    border-radius: 10px;
    /* Round corners */
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #888;
    /* Thumb color */
    border-radius: 10px;
    /* Round corners */
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #555;
    /* Thumb color on hover */
}


/* Firefox customization */

.custom-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: #888 #f1f1f1;
}

.custom-hr {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 20px 0;
}

.custom-hr::before,
.custom-hr::after {
    content: "";
    flex: 1;
    border-bottom: 1px solid #000;
    margin: 0 10px;
}

.custom-hr span {
    font-size: 14px;
    /* Adjust the font size as needed */
    white-space: nowrap;
    /* Prevent text from wrapping */
}


/* Custom TPS btn */

.btn-tps {
    color: #fff;
    background-color: #662a27;
    border-color: #662a27;
}


.btn-tps:hover {
    color: #fff;
    /* Text color on hover */
    background-color: #b8837f;
    /* Slightly darker background for hover */
    border-color: #b36d66;
    /* Slightly darker border for hover */
}

.btn-tps:focus,
.btn-tps.focus {
    color: #fff;
    /* Text color on focus */
    background-color: #b8837f;
    /* Slightly darker background for focus */
    border-color: #b36d66;
    /* Slightly darker border for focus */
    box-shadow: 0 0 0 0.25rem rgba(203, 150, 141, 0.5);
    /* Focus outline */
}

.btn-tps:disabled,
.btn-tps.disabled {
    color: #fff;
    /* Text color for disabled */
    background-color: #cb968d;
    /* Base background for disabled */
    border-color: #cb968d;
    /* Base border for disabled */
    opacity: 0.65;
    /* Reduced opacity for disabled */
}

.btn-tps:not(:disabled):not(.disabled):active,
.btn-tps:not(:disabled):not(.disabled).active,
.show>.btn-tps.dropdown-toggle {
    color: #fff;
    /* Text color for active */
    background-color: #a7706d;
    /* Darker background for active */
    border-color: #9e645f;
    /* Darker border for active */
}

.btn-tps:active:focus,
.btn-tps.active:focus {
    box-shadow: 0 0 0 0.25rem rgba(203, 150, 141, 0.5);
    /* Active focus outline */
}


/* Custom tps btn outline */

.btn-outline-tps {
    color: #cb968d;
    /* Base text color */
    background-color: transparent;
    /* Transparent background */
    border-color: #cb968d;
    /* Base border color */
}

.btn-outline-tps:hover {
    color: #fff;
    /* Text color on hover */
    background-color: #cb968d;
    /* Base background color on hover */
    border-color: #cb968d;
    /* Base border color on hover */
}

.btn-outline-tps:focus,
.btn-outline-tps.focus {
    color: #cb968d;
    /* Base text color on focus */
    background-color: transparent;
    /* Transparent background */
    border-color: #cb968d;
    /* Base border color on focus */
    box-shadow: 0 0 0 0.25rem rgba(203, 150, 141, 0.5);
    /* Focus outline */
}

.btn-outline-tps:disabled,
.btn-outline-tps.disabled {
    color: #cb968d;
    /* Base text color for disabled */
    background-color: transparent;
    /* Transparent background for disabled */
    border-color: #cb968d;
    /* Base border color for disabled */
    opacity: 0.65;
    /* Reduced opacity for disabled */
}

.btn-outline-tps:not(:disabled):not(.disabled):active,
.btn-outline-tps:not(:disabled):not(.disabled).active,
.show>.btn-outline-tps.dropdown-toggle {
    color: #fff;
    /* Text color for active */
    background-color: #b8837f;
    /* Slightly darker background for active */
    border-color: #b36d66;
    /* Slightly darker border for active */
}

.btn-outline-tps:active:focus,
.btn-outline-tps.active:focus {
    box-shadow: 0 0 0 0.25rem rgba(203, 150, 141, 0.5);
    /* Active focus outline */
}


/* back to top button */

#backToTopBtn {
    display: none;
    background-color: #590F0F;
    color: white;
    font-weight: bolder;
    font-size: 24px;
    width: 60px;
    height: 60px;
    line-height: 1;
    border: solid 1px #000;
    z-index: 99999 !important;
}


/* Custom loading animation */

.loaderDots,
.loaderDotsOutline {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    /* Space between dots */
}

.loaderDots span,
.loaderDotsOutline span {
    width: 10px;
    /* Size of each dot */
    height: 10px;
    border-radius: 50%;
    /* Make dots circular */
    animation: jump 1.5s infinite ease-in-out;
}

.loaderDots span {
    background-color: #cb968d;
}

.loaderDotsOutline span {
    background-color: white;
    border: solid 1px #cb968d;
}

.loaderDots span:nth-child(1),
.loaderDotsOutline span:nth-child(1) {
    animation-delay: 0s;
}

.loaderDots span:nth-child(2),
.loaderDotsOutline span:nth-child(2) {
    animation-delay: 0.3s;
}

.loaderDots span:nth-child(3),
.loaderDotsOutline span:nth-child(3) {
    animation-delay: 0.6s;
}

@keyframes jump {
    0%,
    80%,
    100% {
        transform: translateY(0);
        /* Original position */
    }
    40% {
        transform: translateY(-15px);
        /* Jump up */
    }
}