/* Header pentru comenzile Woo */

@import url('https://fonts.googleapis.com/css2?family=REM:ital,wght@0,100..900;1,100..900&display=swap');
.woo-orders-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    background-color: #fff;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.woo-orders-logo img {
    max-height: 40px;
}

.woo-orders-search input {
    padding: 10px;
    font-size: 15px;
    width: 300px;
    border-radius: 20px;
    border: 1px solid #ddd;
    background-color: #fff;
    height: 35px;
}

/* Popupuri */
.woo-orders-popup-overlay, .menu-dropdown {
    display: none;
    position: fixed;
    top: 70px;
    right: 0;
    width: 100px;
    height: 100%;
    background-color: #fff;
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);
    z-index: 1000;
}

.woo-orders-popup-overlay {
    display: none;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
}

.woo-orders-popup, .woo-orders-footer {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 15px;
    background-color: #fff;
    border-radius: 10px;
    margin: 10px;
}

.woo-orders-footer {
    position: fixed;
    bottom: 10px; /* Ridică bara un pic deasupra marginii de jos */
    left: 50%;
    transform: translateX(-50%); /* Centrează bara pe orizontală */
    background-color: #1b1b2f;
    color: #fff;
    padding: 10px;
    border-radius: 10px;
    width: 100%;
    max-width: 500px; /* Max width pentru ecrane mari */
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); /* Adaugă un efect de umbră */
    z-index: 1000; /* Asigură-te că bara are un z-index suficient de mare pentru a fi deasupra altor elemente */
}

.woo-orders-footer .item-count {
    display: flex;
    align-items: center;
}

.woo-orders-footer .item-count span {
    background-color: #333;
    border-radius: 50%;
    padding: 5px 10px;
    margin-right: 10px;
    color: #fff;
}

.woo-orders-footer .action-buttons {
    display: flex;
    gap: 10px;
}

.woo-orders-footer button {
    padding: 10px 15px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    background-color: #444;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 5px;
}

.woo-orders-footer button.delete {
    background-color: #f44336;
}

.woo-orders-footer button:hover {
    opacity: 0.9;
}

.woo-orders-footer button svg {
    width: 16px;
    height: 16px;
    fill: #fff;
}

/* Tabelul comenzilor */
.woo-orders-table {
    width: 100%;
    overflow-x: auto;
    margin-bottom: 80px; /* Pentru a evita suprapunerea cu bara din jos */
}

.woo-orders-table table {
    width: 100%;
    border-collapse: collapse;
    table-layout: auto;
}

.woo-orders-table th,
.woo-orders-table td {
    padding: 10px;
    text-align: left;
    border-bottom: 1px solid #ddd;
    font-family: "REM", sans-serif;
    font-optical-sizing: auto;
}

.woo-orders-table th {
    background-color: #F4F4FB;
    color: #7a7d8d;
}

.product-name{
    cursor: pointer;
}
.woo-orders-table .status-column span {
    display: inline-block;
    padding: 5px 10px;
    border-radius: 20px;
    font-weight: bold;
    color: #fff;
}

.status-column{
    text-wrap:nowrap;
}

.woo-orders-table .status-column .fulfilled {
    background-color: #28a745;
}

.woo-orders-table .status-column .confirmed {
    background-color: #17a2b8;
}

.woo-orders-table .status-column .partially-shipped {
    background-color: #ffc107;
}

.woo-orders-table .status-column .shipped {
    background-color: #007bff;
}

.woo-orders-table tr.selected {
    background-color: #e9ecef;
}

.woo-orders-table tr.selected .status-column span {
    color: #fff;
}

.woo-orders-table input[type="checkbox"] {
    transform: scale(1.5);
    margin-right: 10px;
}

/* Tooltip pentru produs */
.product-tooltip {
    position: absolute;
    background: #fff;
    border: 1px solid #ccc;
    padding: 10px;
    z-index: 1000;
    display: none;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}

.product-tooltip img {
    max-width: 150px;
    margin-top: 5px;
}

#message-purchased{
    display: none !important;
}

.woo-orders-table tr:nth-child(even){background-color: #FAFAFC;}

.item-selected{
    background-color: transparent !important;
}

.no-access-message {
    text-align: center;
    margin-top: 50px;
}

.login-form-wrapper {
    max-width: 400px;
    margin: 50px auto;
    padding: 20px;
    background: #f7f7f7;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.login-form-wrapper h2 {
    font-size: 18px;
    margin-bottom: 20px;
}

.login-form-wrapper form {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.login-form-wrapper form p {
    width: 100%;
}

.woo-order-status-tabs {
    display: inline-block;
    border-bottom: 1px solid #e0e0e0;
    padding: 10px 0;
    background-color: #f9f9f9;
    border-radius: 8px;
    padding-left: 15px;
    overflow-x: auto; /* Permite scroll pe orizontală */
    white-space: nowrap; /* Menține taburile pe o singură linie */
    width: 100%;
    vertical-align: middle;
}

.woo-order-status-tabs .tab {
    display: inline-block;
    align-items: center;
    padding: 10px 20px;
    margin-right: 10px;
    text-decoration: none;
    color: #555;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.3s ease;
        vertical-align: middle;
}

.woo-order-status-tabs .tab.active {
    color: #fff;
    background-color: #3f51b5;
    border-color: #3f51b5;
}

.woo-order-status-tabs .tab:hover {
    background-color: #eee;
}

.woo-order-status-tabs .tab span {
    display: inline-block;
    margin-left: 8px;
    background-color: #f5f5f5;
    color: #555;
    padding: 3px 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
}

.woo-order-status-tabs .tab.active span {
    background-color: #fff;
    color: #3f51b5;
}

.woo-order-status-tabs .tab.active:hover{
     color: #3f51b5;
}

.pickup-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 9999;
    display: none; /* Se va afișa doar când este nevoie */
}

.pickup-popup-content {
    background-color: #fff;
    width: 100%;
    max-width: 100%;
    margin: 0px;
    padding: 10px;
    border-radius: 0px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    position: relative;
}

.close-popup {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: #f44336;
    color: #fff;
    border: none;
    padding: 2px 10px;
    cursor: pointer;
    border-radius: 50%;
}

.pickup-table {
    width: 100%;
    border-collapse: collapse;
    flex-grow: 1; /* Permite tabelului să ocupe spațiul rămas */
    overflow-y: auto; /* Activează scroll-ul vertical */
    margin-top: 20px;
    height: 85vh;
    display: block;
    margin-bottom: 200px;
}

.pickup-table th, .pickup-table td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
    width: 100%;
    font-size: 18px;
}

.pickup-table th {
    background-color: #f4f4f4;
}

.pickup-table img {
    max-width: 100px;
    height: auto;
}

.pickup-notification {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #4caf50;
    color: white;
    padding: 10px;
    border-radius: 5px;
    display: none;
    z-index: 10000;
}

.green-notification {
    background-color: green;
}

.red-notification {
    background-color: red;
}

.pickup-table tr.collected {
    background-color: green;
    color: white;
}

#pick-list-popup,#pick-up-lists-popup {
    max-width: 500px;
    width: 100%;
    height: auto;
    background-color: transparent;
    position: fixed;
    inset: 0;
    margin: auto;
    box-shadow: -2px 0px 5px rgba(0, 0, 0, 0);
    z-index: 10000; /* Asigură-te că popup-ul este deasupra overlay-ului */
    display: flex;
    justify-content: center;
    align-items: center;
}

#pick-list-popup::after ,#pick-up-lists-popup::after{
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.7); /* Culoarea și transparența overlay-ului */
    z-index: -1; /* Asigură că overlay-ul este sub popup */
}

#pick-list-popup .woo-orders-popup,#pick-up-lists-popup .woo-orders-popup {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    position: relative;
    z-index: 10001; /* Popup-ul trebuie să fie deasupra overlay-ului */
}

#pick-list-popup .woo-orders-popup{
    box-shadow: -2px 0px 5px rgba(0, 0, 0, 0.5);
}

/* Stilizare pentru butonul WhatsApp */
.whatsapp-button {
    display: inline-flex;
    align-items: center;
    background-color: #fff; /* Culoarea verde specifică WhatsApp */
    color: #000;
    border:1px solid #25D366;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    margin-top: 10px;
    margin-right: 10px;
        vertical-align: bottom;
}


/* Stilizare pentru butonul de Print */
.print-button {
    display: inline-flex;
    align-items: center;
    background-color: #fff; /* Albastru pentru Print */
     color: #000;
      border:1px solid #000;
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    margin-top: 10px;
    width: 46%;
}

/* Style for the list container */
#pick-up-lists-popup .popup-content{
    width: 500px;
    padding: 20px;
}
#pick-up-lists-files {
    list-style-type: none; /* Remove bullet points */
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px; /* Space between links */
    max-width: 500px;
    max-height: 400px;
    overflow-y: auto;
}

/* Style for each list item */
#pick-up-lists-files li {
    margin: 0;
    padding-left: 10px;
    padding-right: 10px;
}

/* Style for links within the list */
#pick-up-lists-files li a {
    display: block;
    width: 100%;
    padding: 10px;
    background-color: #4CAF50; /* Green background */
    color: white; /* White text */
    text-decoration: none; /* Remove underline */
    border-radius: 5px; /* Rounded corners */
    font-size: 16px; /* Larger text */
    text-align: center; /* Center the text */
    transition: background-color 0.3s, transform 0.2s;
}

/* Hover effect for links */
#pick-up-lists-files li a:hover {
    background-color: #45a049; /* Slightly darker green on hover */
   
}

/* Active effect for links */
#pick-up-lists-files li a:active {
    background-color: #3e8e41; /* Even darker green when active */
    transform: scale(1); /* Return to original size */
}

.wp-list-table tbody tr {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.wp-list-table tbody tr:hover,.pickup-table  tbody tr:hover  {
    box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.1), /* Umbră deasupra */
                0 4px 10px rgba(0, 0, 0, 0.1);  /* Umbră dedesubt */
    z-index: 1; /* Aduce rândul în față */
    position: relative; /* Face ca z-index-ul să funcționeze */
}



td[data-label="Select Order"]{
    width: 95px;
}

/* Stil pentru butonul suplimentar */
.change-status-button {
    background: none;
    border: none;
    cursor: pointer;
}

/* Stil pentru popup-ul de schimbare a statusului */
#change-status-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 10000;
    display: flex;
    justify-content: center;
    align-items: center;
}

#change-status-popup .woo-orders-popup {
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    width: 300px;
    text-align: center;
}

#change-status-popup h3 {
    margin-bottom: 15px;
    font-size: 18px;
}

#change-status-popup select {
    margin-bottom: 15px;
    width: 100%;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #ccc;
}

#change-status-popup button {
    margin-right: 10px;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    width: 100%;
}

.change-status-button{
    background-color: #fff !important;
}

.change-status-button img{
    width: 20px;
    height: 20px;
    vertical-align: middle;
}

#close-change-status-popup{
    position: relative;
    background-color: #000;
    top: unset;
    right: unset;
    display: inline-block;
    margin-top: 15px;
}

.hamburger-icon span{
    font-size: 25px;
    font-weight: bold;
}



/* Popup overlay */
#order-details-popup .order-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

/* Popup content */
#order-details-popup .order-popup-content {
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    width: 80%;
    max-width: 600px;
    position: relative;
}

/* Close button */
#order-details-popup .close-popup {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: red;
    border: none;
    font-size: 18px;
    cursor: pointer;
}

/* Tabs container */
#order-details-popup .tabs {
    display: flex;
    justify-content: space-around;
    margin-bottom: 20px;
}

/* Tab buttons */
#order-details-popup .tablink {
    padding: 10px;
    cursor: pointer;
    border: none;
    font-size: 16px;
    flex: 1; /* To make all tabs equal in width */
    text-align: center;
}

/* Active tab */


/* Tab content */
#order-details-popup .tabcontent {
    display: none;
}

/* Display the first tab by default */
#order-details-popup .tabcontent:first-child {
    display: block;
}

#order-details-popup .tabcontent h3 {
    margin-top: 0;
}

/* Styling the unordered lists within the popup */
#order-details-popup ul {
    list-style-type: none; /* Remove bullet points */
    padding: 0;
}

#order-details-popup ul li {
    margin-bottom: 10px;
    padding-left: 20px;
    position: relative;
}


.tabcontent {
    display: none;
}
.tabcontent:first-child {
    display: block;
}

.tablink.active {
    background-color: #ccc;
}

.woo-orders-popup{
    /* stilurile tale pentru overlay */
    animation: bounceIn 0.5s; /* adăugăm și o animație dacă dorești */
}

@keyframes bounceIn {
    0% {
        opacity: 0;
        transform: scale(0.3);
    }
    50% {
        opacity: 0.9;
        transform: scale(1.05);
    }
    70% {
        opacity: 1;
        transform: scale(0.9);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Stilul general pentru popup */
.order-details-popup-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 9999;
}

.order-details-popup {
    max-width: 680px;
    margin: 100px auto;
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    position: relative;
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.5);
}

/* Stil pentru butonul de închidere */
.order-details-popup .close-popup {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: transparent;
    border: none;
    font-size: 20px;
    cursor: pointer;
}

.Actions button, .made-text, .confirmation-text{
    width: 100%;
    margin-bottom: 5px;
    display: block;
}

.order-made-button{
    background-color: #00B000;
}
.confirm-order-button{
    background-color: #255FF4;
}

/* Stilul taburilor */
.tab {
    overflow: hidden;
    border-bottom: 1px solid #ccc;
}

.tab button:hover {
    background-color: #ddd;
}

.tab button.active {
    background-color: #ccc;
}

/* Conținutul taburilor */
.tabcontent {
    display: none;
    padding: 10px;
}

/* Stil pentru lista de notițe */
#order-notes-content ul {
    list-style: none;
    padding: 0;
    margin: 0;
    height: 200px;
    overflow-y: auto;
}

#order-notes-content ul li {
    background-color: #f0f0f0;
    margin-bottom: 5px;
    padding: 10px;
    border-radius: 5px;
}

#order-notes-content {
    background-color: #f9f9f9;
    padding: 10px;
    border-radius: 5px;
}

#order-notes-content li {
    list-style: none;
    padding: 5px;
    margin-bottom: 5px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 3px;
}

#custom-note{
    width: 100%;
    height: 50px;
}

#save-note-button{
    width: 100%;
    margin-top: 15px;
}

.custom-note-count {
    background-color: #000;
    color: #ffffff;
    border-radius: 50%;
    padding: 2px 6px;
    font-size: 12px;
    margin-left: 5px;
    vertical-align: middle;
    position: absolute;
    left: 0px;
    top: -10px;
}

[data-tooltip] {
    position: relative;
    cursor: pointer;
}

[data-tooltip]:before {
    content: attr(data-tooltip);
    position: absolute;
    left: 50%;
    bottom: 100%;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.8);
    color: #fff;
    padding: 5px;
    border-radius: 3px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s;
    z-index: 1000;
    width: 100px;
}

[data-tooltip]:hover:before {
    opacity: 1;
    visibility: visible;
}

.notification-icon {
    display: inline-block;
    margin-right: 15px;
    cursor: pointer;
    position: relative;
}

.notification-icon img {
    width: 36px;
}
.woo-orders-menu{
    display: inline-flex;
}


#notification-counter {
    position: absolute;
    top: 0;
    right: 0;
    background-color: red;
    color: white;
    border-radius: 50%;
    padding: 2px 6px;
    font-size: 12px;
}




#notification-popup .close-popup {
    position: absolute;
    top: 5px;
    right: 5px;
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
}

#notification-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

#notification-list li {
    border-bottom: 1px solid #ddd;
    cursor: pointer;
}



#notification-popup {
    position: fixed;
    top: 60px; /* Ajustează această valoare în funcție de înălțimea meniului sticky */
    right: 10px;
    width: 350px; /* Poți ajusta dimensiunea în funcție de necesități */
    padding: 0;
    background-color: #fff;
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    z-index: 1000; /* Asigură-te că este deasupra altor elemente */
}

.notification-popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    border-bottom: 1px solid #eee;
    background-color: #f9f9f9;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.notification-popup-header span {
    font-weight: bold;
    font-size: 16px;
}

#close-notification-popup {
    background-color: transparent;
    border: none;
    font-size: 16px;
    cursor: pointer;
}

.notification-item {
    display: flex;
    align-items: center;
    padding: 10px 15px;
    border-bottom: 1px solid #eee;
    transition: background-color 0.3s;
}

.notification-item:last-child {
    border-bottom: none;
}

.notification-item:hover {
    background-color: #f0f0f0;
}

.notification-icon img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
}

.notification-content {
    margin-left: 10px;
    flex-grow: 1;
}

.notification-content p {
    margin: 0;
    font-size: 14px;
    color: #333;
}

.notification-time {
    font-size: 12px;
    color: #999;
}


#play-notification-sound {
    display: none;
}

#close-notification-popup{
    background-color: #f44336;
    color: #fff;
    border: none;
    padding: 2px 10px;
    cursor: pointer;
    border-radius: 50%;
}

.notification-popup-content{
        height: 350px;
    overflow-y: auto;
}

.menu-item .icon-button{
    background-color: transparent !important;
}

#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ffffff; /* Fundalul pentru preloader */
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999; /* Asigură-te că preloader-ul este deasupra altor elemente */
}

#preloader svg {
    width: 100px;
    height: 100px;
}

.new-order-row {
    animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}



#bulk-popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 9999;
}

#bulk-popup .woo-orders-popup{
    max-width: 680px;
    margin: 100px auto;
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    position: relative;
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.5);
}
/* Responsive adjustments */
@media (max-width: 768px) {
    .woo-orders-table table,
    .woo-orders-table tbody,
    .woo-orders-table th,
    .woo-orders-table td,
    .woo-orders-table tr {
        display: block;
        padding-left: 5px;
        padding-right: 5px;
    }

    .woo-orders-table thead {
        display: none;
    }

    .woo-orders-table tr {
        margin-bottom: 1rem;
    }

    .woo-orders-table td {
        padding-left: 50%;
        position: relative;
    }

    .menu-dropdown{
      width: 80%;
    }

    .woo-orders-table tr{
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    }

    .woo-orders-table td::before {
        content: attr(data-label);
        position: absolute;
        left: 0;
        width: calc(50% - 10px);
        padding-right: 10px;
        white-space: nowrap;
        font-weight: bold;
        padding-left: 10px;
    }
    .item-selected{
        display: none;
    }
    .pickup-notification {
        right: unset;
        width: 100%;
        padding-left: 10px;
        padding-right: 10px;
    }
   
    td[data-label="Select Order"]{
        width: auto;
    }
    #woo-orders-search{
        width: 180px;
    }
    .notification-icon img {
        width: 75px;

    }


}