.ts-dropdown {
    z-index: 1111;
}

form {
    margin-bottom: 0;
}

.offcanvas.offcanvas-end {
    margin: 20px;
    border-radius: 10px;
    right: 20px;
}

.card-img {
    background: color-mix(in oklab, oklch(96.7% .003 264.542) 50%, transparent);
    border-radius: 10px;
}

.card-img img {
    border-radius: 10px;
}

.img-box-200px-h {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 150px;
    width: 100%;
}

.img-box-200px-h img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.img-box-w-300 {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 300px;
}

.img-box-w-300 img {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
}

.jstree-wholerow-clicked {
    background: var(--tblr-primary-bg-subtle) !important;
}

.sortable-item {
    background: #ffffff;
    border: 1px solid #e3e6f0;
    border-radius: 0.35rem;
    padding: 0.5rem;
    margin-bottom: 8px;
    cursor: move;
    transition: all 0.3s ease;
    box-shadow: 0 0 0px 1px rgba(58, 59, 69, 0.15);
}

.sortable-item:hover {
    box-shadow: 0 0px 0px 1.3px rgba(58, 59, 69, 0.25);
    transform: translateY(-1px);
}

.section-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.section-details h5 {
    margin: 0;
    color: #5a5c69;
    font-size: 0.9rem;
}

.section-details small {
    color: #858796;
    font-size: 0.875rem;
}

.section-meta {
    text-align: right;
}

.section-order {
    background: var(--tblr-link-color);
    color: white;
    padding: 4px 8px;
    border-radius: 50%;
    font-size: 0.65rem;
    font-weight: 600;
    /* margin-top: 0.25rem; */
    display: inline-block;
    min-width: 1.5rem;
    text-align: center;
}

.sort-info {
    background: #f8f9fc;
    border-left: 4px solid #4e73df;
    padding: 1rem;
    margin-bottom: 1.5rem;
}

.pending {
    background-color: #FFF3CD; /* Light yellow for pending */
    color: #333333;
}

.awaiting_store_response {
    background-color: #FFE082; /* Light amber for awaiting store response */
    color: #333333;
}

.awaiting_seller_response {
    background-color: #FFECB3; /* Lighter amber for awaiting seller response */
    color: #333333;
}

.accepted {
    background-color: #C8E6C9; /* Light green for accepted */
    color: #333333;
}

.accepted_by_seller {
    background-color: #A5D6A7; /* Slightly darker light green for accepted by seller */
    color: #333333;
}

.partially_accepted {
    background-color: #DCEDC8; /* Pale green for partially accepted */
    color: #333333;
}

.rejected {
    background-color: #FFCDD2; /* Light red for rejected */
    color: #333333;
}

.rejected_by_seller {
    background-color: #EF9A9A; /* Slightly darker light red for rejected by seller */
    color: #333333;
}

.preparing {
    background-color: #BBDEFB; /* Light blue for preparing */
    color: #333333;
}

.assigned {
    background-color: #90CAF9; /* Light medium blue for assigned */
    color: #333333;
}

.collected {
    background-color: #B2EBF2; /* Light cyan for collected */
    color: #333333;
}

.out_for_delivery {
    background-color: #4FC3F7; /* Light bright blue for out for delivery */
    color: #333333;
}

.delivered {
    background-color: #f0fdf4;
    color: #008236;
    border-color: #b9f8cf;
}

.approved {
    background-color: #C8E6C9; /* Light green for approved (matches bg-green-lt) */
    color: #333333;
}

.visible {
    background-color: #C8E6C9; /* Light green for visible (matches bg-green-lt) */
    color: #333333;
}

.published {
    background-color: #C8E6C9; /* Light green for published (matches bg-green-lt) */
    color: #333333;
}

.inactive {
    background-color: #ffe1e4;
    color: #ff0000;
    border: solid 1px #ff3535;
}

.not_approved {
    background-color: #FFCDD2; /* Light red for not approved (matches bg-red-lt) */
    color: #333333;
}

.draft {
    background-color: #FFCDD2; /* Light red for draft (matches bg-red-lt) */
    color: #333333;
}

.pending_verification {
    background-color: #FFCDD2; /* Light red for pending verification (matches bg-red-lt) */
    color: #333333;
}

.cancelled {
    background-color: #ECEFF1; /* Light grey for cancelled (matches bg-default-lt) */
    color: #333333;
}

.failed {
    background-color: #FFCDD2; /* Light red for failed (matches bg-red-lt) */
    color: #333333;
}

[data-star-rating] .gl-active .gl-star-full {
    fill: #fdac35 !important;
    stroke: #fdac35 !important;
}

.pointer-events-none {
    pointer-events: none;
}

.badge {
    padding: 6px !important;
}

/* Collapse/Expand Styling */
.cursor-pointer {
    cursor: pointer;
}

.section-group-header {
    background-color: rgba(0, 0, 0, 0.02);
    border-radius: 0.375rem;
    padding: 0.5rem;
    transition: background-color 0.2s ease;
}

.collapse-icon {
    transition: transform 0.3s ease;
}

.section-group-header[aria-expanded="false"] .collapse-icon {
    transform: rotate(180deg);
}

.section-group {
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 0.5rem;
    padding: 1rem;
    background-color: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.section-group-header h4 {
    font-weight: 600;
}

/* Smooth collapse animation */
.collapse {
    transition: height 0.35s ease;
}

#dt-length-0 {
    margin-right: 5px;
}

@media (min-width: 992px) {
    .navbar-expand-lg.navbar-vertical ~ .navbar, .navbar-expand-lg.navbar-vertical ~ .page-wrapper {
        margin-left: 16rem;
    }

    .navbar-vertical.navbar-expand-lg {
        width: 16rem;
    }
}

div.dt-button-collection .dropdown-menu {
    background: var(--tblr-bg-surface);
    color: var(--tblr-body-color);
    box-shadow: var(--tblr-shadow-dropdown);
}

.dropdown-item {
    white-space: normal;
}

.swal2-confirm {
    background-color: var(--tblr-primary) !important;
}

.text-ellipsis-1 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.step__item.active .step__icon, .step__item.active~.step__divider, .step__item.active~.step__item .step__icon{
    background-color: var(--tblr-primary) !important;
}