/* reset code  */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    font-family: Arial, sans-serif;
    box-sizing: border-box;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}

#spinner-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.9); /* semi-transparent */
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
}

.spinner-logo {
    width: 100px;      /* logo size */
    height: 100px;
    animation: spin 1.5s linear infinite; /* optional rotation */
}

/* Optional: spinning effect */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}




/* index css */

.login-cont{
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.login-inner-cont{
    width: 25%;
    height: auto;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    padding: 10px;
}

#login-logo{
    width: 50%;
    padding-top: 50px;
}

.login-inner-cont .login-text{
    padding-top: 10px;
    font-size: 1.2rem;
    font-weight: 600;
}
.login-form{
    width: 100%;
    height: auto;
    padding-top: 20px;
    display: flex;
    flex-direction: column;
}

.login-username-cont, .login-pass-cont, .login-store-code-cont{
    width: 100%;
    padding-top: 10px;
    display: flex;
    flex-direction: column;
    align-items: start;
}

.login-form label{
    font-weight: 500;
}

.login-form input{
    width: 100%;
    height: 35px;
    border-radius: 5px;
    border: 1px solid #ccc;
}

.login-btn-cont{
    width: 100%;
    height: auto;
    padding-top: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
#login-btn{
    width: 100%;
    height: 35px;
    border-radius: 5px;
    border: none;
    background-color: #91c63f;
    color: #fff;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
}



#login-btn:hover{
    background-color: #00467a;
}

.login-btn-cont p{
    padding-top: 15px;
    font-size: 0.8rem;
}

/* header css */

.header-cont{
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #ffffff;
    position: sticky;
    top: 0;
    z-index: 1000;
    height: 60px;
    padding: 10px;
    padding-left: 30px;
    padding-right: 30px;
    box-shadow: 3px 0 10px rgba(0, 0, 0, 0.3); /* Subtle shadow for a modern look */
    
}

.header-cont1{
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 20px;

}

.header-inner-cont1, .header-inner-cont2, .header-inner-cont3{
    height: 100%;

}

.header-inner-cont1 img{
    height: 40px;
    cursor: pointer;
}

.menu li a.active, .menu li a:hover {
    background-color: #91c63f; /* highlight color */
    color: white;              /* text color on highlight */
    border-radius: 4px;
}

.header-inner-cont2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 10000; /* Ensure nav is above other elements */
}

.header-inner-cont2 ul {
    list-style-type: none;
    display: flex;
    
    
}

.header-inner-cont2 ul li {
    position: relative;
    margin-right: 20px;
    
}

.header-inner-cont2 ul li a {
    color: #00467a; /* Primary blue color for menu text */
    text-decoration: none;
    padding: 10px;
    display: block;
    
}

.header-inner-cont2 ul li:hover > a {
    background-color: #91c63f; /* Green background on hover */
    color: white;
    border-radius: 5px;
    
}

.notification-popup {
    width: 400px;
    max-height: 400px;
    overflow-y: auto;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.25);
    z-index: 1000;
    display: none;
    position: absolute;
    top: 40px;
    right: 0;
    padding: 0;
    font-family: 'Arial', sans-serif;
    border: 1px solid #ddd;
    animation: fadeIn 0.3s ease;
}

.notification-popup ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.notification-popup ul li {
    padding: 12px 15px;
    border-bottom: 1px solid #f1f1f1;
    transition: background 0.2s ease;
    cursor: pointer;
}

.notification-popup ul li:last-child {
    border-bottom: none;
}

.notification-popup ul li:hover {
    background: #91c63f; /* subtle hover color */
}

.notification-popup.show {
    display: block !important;
}

/* Smooth fade-in animation */
@keyframes fadeIn {
    from {opacity: 0; transform: translateY(-10px);}
    to {opacity: 1; transform: translateY(0);}
}






/* Submenu Styling */
.header-inner-cont2 ul li .submenu {
    display: none;
    position: absolute;
    background-color: #00467a;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Shadow for submenu */
    top: 100%;
    left: 0;
    width: 200px;
    z-index: 99999999 !important; /* Ensure it's above other elements */
    
}

.header-inner-cont2 ul li:hover .submenu {
    display: block;
    
}

.header-inner-cont2 ul li .submenu li {
    margin: 5px 0;
    
}

.header-inner-cont2 ul li .submenu li a {
    color: #ffffff;
    padding: 5px;
    
}

.header-inner-cont2 ul li .submenu li a:hover {
    background-color: #91c63f; /* Green background on hover */
    color: white;
    border-radius: 5px;
    
}

.header-inner-cont3{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.header-inner-cont3 i{
    font-size: 1.5rem;
    cursor: pointer;
}

.notification-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    background: red;
    color: white;
    font-size: 12px;       /* bigger font for readability */
    font-weight: bold;
    border-radius: 50%;
    padding: 4px 7px;      /* bigger padding for bigger circle */
    display: none;
    min-width: 18px;        /* ensures circle even for single digits */
    text-align: center;
    line-height: 1;
    pointer-events: none;   /* badge doesnтАЩt block bell click */
}



/* setup store css */

.setup-store-cont{
    height: calc(100vh - 80px);
    width: 100vw;
    padding: 20px;
    
}

.setup-store-inner-cont{
    height: 100%;
    width: 100%;
    border-radius: 10px;
    border: 2px solid #00467a;
}

.setup-store-header{
    height: 40px;
    width: 100%;
    background-color: #00467a;
    display: flex;
    justify-content: start;
    align-items: center;
    padding-left: 30px;
}

.setup-store-header p{
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
}


.setup-store-tab-container {
      display: flex;
      height: calc(100% - 120px);
    }

    .setup-store-tab-menu {
      width: 300px;
      padding: 20px;
      background-color: #f0f0f0;
      border-right: 1px solid #ccc;
    }

    .setup-store-tab-menu button {
      display: block;
      width: 100%;
      padding: 15px;
      border: none;
      background-color: inherit;
      text-align: left;
      cursor: pointer;
      font-size: 16px;
      border-bottom: 1px solid #ddd;
      transition: background 0.3s;
    }

    .setup-store-tab-menu button:hover,
    .setup-store-tab-menu button.active {
      background-color: #91c63f;
      color: #fff;
    }


    .setup-store-tab-content {
      flex-grow: 1;
      padding: 20px;
    }

    .setup-store-tab-pane {
      display: none;
    }

    .setup-store-tab-pane.active {
      display: block;
    }

.setup-store-submit-cont{
    width: 100%;
    height: 80px;
    display: flex;
    justify-content: end;
    align-items: center;
    padding-right: 50px;
    border-top: 1px solid #ddd;
}

#setup-store-submit-btn{
    width: 150px;
    height: 35px;
    background-color: #91c63f;
    color: #fff;
    border-radius: 5px;
    border: none;
    cursor: pointer;
}

#setup-store-submit-btn:hover{
    background-color: #00467a;
}

.setup-store-details{
    width: 100%;
    height: auto;
    border: 1px solid #ddd;
    border-radius: 10px;
    

}

.setup-store-details-heading{
    width: 100%;
    height: 30px;
    background-color: #ddd;
    display: flex;
    justify-content: start;
    align-items: center;
    padding-left: 20px;
}

.setup-store-details-2{
    width: 100%;
    height: auto;
}

.setup-store-details-input-cont{
    width: 80%;
    height: auto;
    display: flex;
    justify-content: start;
    align-items: center;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.setup-store-name{
    width: 20%;
    height: 35px;
    background-color: #91c63f;
    display: flex;
    justify-content: start;
    align-items: center;
    padding-left: 10px;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

.setup-store-name p{
    color: #fff;
}

.setup-store-details-2 input, .setup-order-details-inp1-cont input, .setup-order-details-inp1-cont select{
    height: 35px;
    width: 80%;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    border: 1px solid #91c63f;
}

.setup-store-mob-cont{
    width: 50%;
    display: flex;
    justify-content: start;
    align-items: baseline;
}

.setup-store-details-input-cont-mob{
    gap: 10px;
}

.setup-store-details-3{
    padding: 20px;
}

.setup-order-details-inner{
    width: 80%;
    height: auto;
    padding: 10px;
    display: flex;
    justify-content: start;
    align-items: start;
    gap: 10px;
    flex-direction: column;
    
}

.setup-order-details-child{
    width: 100%;
    height: auto;
    /* padding-bottom: 20px; */
    border: 1px solid #ddd;
    border-radius: 5px;
}

.setup-order-details-sub-heading{
    width: 100%;
    height: 35px;
    background-color: #ddd;
    display: flex;
    justify-content: start;
    align-items: center;
    padding-left: 30px;
}

.setup-order-details-inp-cont{
    height: auto;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.setup-order-details-inp1-cont{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50%;
    height: auto;
    padding: 10px;
}

.setup-tax-switch {
      position: relative;
      display: inline-block;
      width: 60px;
      height: 34px;
    }

    .setup-tax-switch input {
      opacity: 0;
      width: 0;
      height: 0;
    }

    .setup-tax-slider {
      position: absolute;
      cursor: pointer;
      top: 0; left: 0; right: 0; bottom: 0;
      background-color: #ccc;
      transition: 0.4s;
      border-radius: 34px;
    }

    .setup-tax-slider:before {
      content: "";
      position: absolute;
      height: 26px;
      width: 26px;
      left: 4px;
      bottom: 4px;
      background-color: white;
      transition: 0.4s;
      border-radius: 50%;
    }

    input:checked + .setup-tax-slider {
      background-color: #4CAF50;
    }

    input:checked + .setup-tax-slider:before {
      transform: translateX(26px);
    }

    .setup-tax-status {
      margin-top: 10px;
      font-weight: bold;
    }

    /* add service css */

    .add-service-main-cont{
        display: flex;
        justify-content: start;
        align-items: center;
        flex-direction: column;
        gap: 10px;
    }
    .add-service-inner-cont{
        width: 40%;
        height: auto;
        display: flex;
        justify-content: start;
        align-items: start;
        flex-direction: column;
        gap: 10px;
        
    }

    .add-service-sub-heading{
        font-size: 1rem;

    }

   .add-service-radio-btn input[type="radio"] {
  display: none; /* ЁЯСИ hide default radio */
}

.add-service-radio-btn span {
  display: inline-block;
  padding: 8px 16px;
  background-color: #c1c1c1;
  color: white;
  border-radius: 5px;
  cursor: pointer;
  user-select: none;
  transition: background-color 0.3s ease;
  margin-right: 5px;
}

.add-service-radio-btn input[type="radio"]:checked + span {
  background-color: #91c63f; /* тЬЕ change color when selected */
}

.add-service-input{
    height: 35px;
    width: 100%;
    border-radius: 5px;
}

.add-service-code-cont{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.add-service-code-inner{
    width: 50%;
    display: flex;
    justify-content: start;
    align-items: start;
    flex-direction: column;
    gap: 10px;
}



.add-service-discription{
    font-size: 0.8rem;
    color: #c1c1c1;
}

.add-service-icon-div, .package-icon-cont{
    width: 60px;
    height: 60px;
    background-image: url('../img/img_logo.png');
    background-size: cover;      /* тЬЕ Cover full div */
    background-position: center; /* тЬЕ Center the image */
    background-repeat: no-repeat;
}

.add-service-btn-cont{
    width: 100%;
    height: 80px;
    border-top: 1px solid #ddd;
    margin-top: auto;
    display: flex;
    justify-content: end;
    align-items: center;
    padding-right: 50px;
    gap: 10px;
}

.add-service-btn-cont button{
    width: 100px;
    height: 35px;
    background-color: #91c63f;
    border: none;
    border-radius: 5px;
    color: #fff;
    cursor: pointer;
}

.add-service-btn-cont button:hover{
    background-color: #00467a;
}

/* service page css */

.service-main-cont{
    width: 100%;
    height: calc(100vh - 80px);
    padding: 10px;
}

.service-main-inner-cont{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 10px;
    border-radius: 10px;
    border: 2px solid #00467a;
    flex-direction: column;

}

.service-page-header{
    width: 100%;
    height: 40px;
    background-color: #00467a;
    display: flex;
    justify-content: start;
    align-items: center;
    padding-left: 30px;
}

.service-page-header p{
    color: #fff;
}


.service-cont{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: start;
    align-items: center;
    flex-direction: column;
    gap: 10px;
    padding: 10px;
}

.service-filter-cont{
    height: 60px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    padding-left: 30px;
    padding-right: 30px;
}

.service-filter-1{
    width: 80%;
    height: auto;
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 20px;
}

.service-filter-1 select{
    width: 300px;
    height: 35px;
    border-radius: 5px;
}

.service-filter-2{
    display: flex;
    justify-content: end;
    align-items: center;
    width: 20%;
}

.service-filter-2 button{
    width: 200px;
    height: 35px;
    background-color: #91c63f;
    color: #fff;
    border-radius: 5px;
    border: none;
}

.service-filter-2 button:hover{
    background-color: #00467a;
    
}

.service-table-cont {
    width: 100%;
    height: 70%;
    overflow-y: auto;
    /* REMOVE flex properties */
    /* display: flex;
    justify-content: center;
    align-items: start; */
}

.service-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
    margin: 0 auto;
}

.service-table thead th {
  position: sticky;
  top: 0;
  background-color: #fff;
  z-index: 1;
  height: 70px;
  text-align: center;
  vertical-align: middle;
  border-bottom: 1px solid #ddd;
  padding: 0;
}

.service-table th > div,
.service-table td > div {
  display: flex;
  justify-content: center; /* Horizontal center */
  align-items: center;     /* Vertical center */
  height: 100%;
  width: 100%;
}

.service-table tbody td {
  height: 70px;
  text-align: center;
  vertical-align: middle;
  padding: 0;
  
}


.service-table-body img{
    width: 60px;
}

.service-table-body tr:hover{
    background-color: #91c63f;
    cursor: pointer;
}

/* add customer css */

.add-cust-main-cont{
    width: 100%;
    height: calc(100vh - 80px);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
}

.add-cust-inner-cont{
    width: 100%;
    height: 100%;
    border: 2px solid #00467a;
    border-radius: 10px;
    display: flex;
    justify-content: start;
    align-items: start;
    flex-direction: column;
    gap: 10px;
}

.add-cust-heading-cont{
    width: 100%;
    height: 40px;
    background-color: #00467a;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    display: flex;
    justify-content: start;
    align-items: center;
    padding-left: 30px;
}

.add-cust-heading-cont p{
    color: #fff;
}

.add-cust-body{
    width: 100%;
    height: calc(100% - 40px);
    display: flex;
    justify-content: start;
    align-items: start;
    flex-direction: column;
    gap: 10px;
    
}

.add-cust-search-cont{
    width: 100%;
    height: 70px;
    padding: 10px;
    padding-left: 40px;
    padding-right: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    

}

.add-cust-icon{
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #91c63f;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    border: 1px solid #91c63f;
}

.add-cust-icon i{
    color: #fff;
    font-weight: 600;
    font-size: 1.2rem;
    
}

.add-cust-search-cont input{
    width: calc(100% - 40px);
    height: 40px;
    border: 1px solid #91c63f;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    padding-left: 10px;
}

.add-cust-cont{
    width: 100%;
    height: calc(100% - 170px);
    padding-left: 35px;
    padding-right: 35px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.add-cust-inner-body1{
    width: 49%;
    height: 100%;
    padding: 5px;
    display: flex;
    justify-content: start;
    align-items: start;
    flex-direction: column;
    gap: 20px;
}

.add-cust-name{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.add-cust-name-icon{
    width: 35px;
    height: 35px;
    background-color: #00467a;
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom-left-radius: 5px;
    border-top-left-radius: 5px;
}

.add-cust-name i{
    color: #fff;
}

.add-cust-cont input{
    width: 70%;
    height: 35px;
    border: 1px solid #00467a;
    padding-left: 20px;
    border-bottom-right-radius: 5px;
    border-top-right-radius: 5px;
}

.add-cust-cont select{
    width: calc(100% - 70% - 35px);
    height: 35px;
    border: 1px solid #00467a;
    padding-left: 20px;
}

.add-cust-name textarea{
    width: 50%;
    height: 70px;
    border: 1px solid #00467a;
    
}

.add-cust-textarea{
    gap: 10px;
}

.add-cust-textarea textarea{
    padding: 10px;
}

.add-text{
    border-bottom-left-radius: 5px;
    border-top-left-radius: 5px;
}

.loc-text{
    border-bottom-right-radius: 5px;
    border-top-right-radius: 5px;
}

.add-cust-state{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: start;
    align-items: start;
    gap: 10px;
}

.add-cus-state-cont{
    width: 50%;
    height: auto;
    display: flex;
    justify-content: start;
    align-items: start;
}

.add-cust-toggle{
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
}

.add-cust-toggle input{
    display: none;
}

/* Slider */
.add-cust-slider{
    width: 46px;
    height: 24px;
    background: #ccc;
    border-radius: 50px;
    position: relative;
    transition: 0.3s;
}

.add-cust-slider::before{
    content: '';
    width: 18px;
    height: 18px;
    background: #fff;
    border-radius: 50%;
    position: absolute;
    top: 3px;
    left: 3px;
    transition: 0.3s;
}

/* ON State */
.add-cust-toggle input:checked + .add-cust-slider{
    background: #28a745;
}

.add-cust-toggle input:checked + .add-cust-slider::before{
    transform: translateX(22px);
}

.add-cust-label-text{
    font-size: 14px;
    font-weight: 500;
}


.add-cust-state-icon{
    width: 35px;
    height: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #00467a;
    border: 1px solid #00467a;
    border-bottom-left-radius: 5px;
    border-top-left-radius: 5px;
}

.add-cust-state-icon i{
    color: #fff;
}

.add-cust-state input, .add-cust-state select{
    width: calc(100% - 35px);
    height: 35px;
    border: 1px solid #00467a;
    border-bottom-right-radius: 5px;
    border-top-right-radius: 5px;
}

.add-cust-email{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: start;
    align-items: start;
}

.add-cust-email input{
    width: calc(100% - 35px);
}

.add-cust-email i{
    color: #fff;
}

.add-cust-btn-cont{
    width: 100%;
    height: 100px;
    display: flex;
    justify-content: end;
    align-items: center;
    padding-right: 30px;
    gap: 20px;;
    
}

.add-cust-btn-cont button{
    width: 150px;
    height: 35px;
    border-radius: 5px;
    background-color: #91c63f;
    border: none;
    color: #fff;
    cursor: pointer;
}

.add-cust-btn-cont button:hover{
    background-color: #00467a;
}

.search-wrapper {
    position: relative;
    width: 100%;
}

/* Keep your existing input styles */
#customerSearchBox {
    width: 100%;
    height: 40px;
    border: 1px solid #91c63f;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    padding-left: 10px;
}

/* Dropdown suggestion box */
#suggestionBox {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: #fff;
    border: 1px solid #ccc;
    max-height: 200px;
    overflow-y: auto;
    display: none;
    z-index: 999;
    border-top: none;
}

.suggestion-item{
    height: 60px;
    display: flex;
    justify-content: start;
    align-items: center;
}

.suggestion-item:hover{
    background-color: #91c63f;
}


/* customer profile css */

.customer-pro-main-cont{
    width: 100%;
    height: calc(100vh - 80px);
    padding: 10px;
    
}

.cust-pro-inner{
    height: 100%;
    width: 100%;
    padding: 20px;
}

.cust-pro-heading-cont{
    height: 70px;
    width: 100%;
    display: flex;
    justify-content: start;
    align-items: center;
    border-bottom: 1px solid #ddd;
}
.cust-prof-heading{
    font-size: 1.2rem;
    font-weight: 600;
}

.cust-pro-mid-cont{
    width: 100%;
    height: calc(100% - 140px);
    display: flex;
    justify-content: center;
    align-items: start;
}

.cust-pro-bottom-cont{
    width: 100%;
    height: 70px;
    border-top: 1px solid #ddd;
    display: flex;
    justify-content: center;
    align-items: center;
}

.cust-prof-body{
    width: 40%;
    height: 100%;
    display: flex;
    justify-content: start;
    align-items: center;
    flex-direction: column;
    padding-top: 20px;
    gap: 10px;
    border-right: 1px solid #ddd;
}

.cust-prof-body-border {
  width: 60%;
  height: 80%;
  
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 20px;
  box-sizing: border-box;
}

.cust-prof-icon{
    width: 150px;
    height: 150px;
    border-radius: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.cust-prof-icon img{
    width: 100%;
}

.cust-prof-name{
    font-size: 1.5rem;
    font-weight: 600;
}

.cust-active{
    font-size: 1rem;
    color: #91c63f;
}



.cust-inactive{
    font-size: 2rem;
    color: red;
}



.cust-prof-details-cont {
  width: calc(33.33% - 10px);
  text-align: center;
  padding: 10px; /* optional */
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 10px;
}

.cust-prof-details-cont img{
    width: 70px;
}

.cust-prof-details-cont p:first-of-type {
  font-size: 1.2rem;
  font-weight: 600;
  color: #00467a;
}

.cust-prof-details-cont p:last-of-type {
  color: #a3a3a3;
}


.cust-pro-btn-cont{
    width: 50%;
    height: 100%;
    display: flex;
    justify-content: start;
    align-items: center;
    padding-left: 30px;
    gap: 20px;
}

.cust-pro-btn-cont2{
    width: 50%;
    height: 100%;
    display: flex;
    justify-content: end;
    align-items: center;
    padding-right: 30px;
    gap: 20px;
}

.cust-pro-bottom-cont button{
    width: 150px;
    height: 50px;
    background-color: #91c63f;
    border: none;
    border-radius: 5px;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
}

.cust-pro-bottom-cont button:hover{
    background-color: #00467a;
}

/* home page css */

.home-container{
    width: 100%;
    height: calc(100vh - 80px);
    display: flex;
    justify-content: center;
    align-items: center;
}

.home-inner-cont{
    width: 70%;
    height: 50%;
    background-color: #fff;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    display: flex;
    justify-content: start;
    align-items: center;
    padding: 20px;
    flex-direction: column;
    gap: 15px;
}

.home-heading{
    font-size: 1.5rem;
    font-weight: 600;
    color: #00467a;
}

.home-radio-cont{
    width: 100%;
    height: 100px;
    padding: 20px;
}

.customer-radio, .order-radio{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 10px;
    padding-top: 10px;
}

.customer-radio p, .order-radio p{
    font-size: 1.2rem;
    font-weight: 500;
    color: #a3a3a3;
}

.customer-radio input[type="radio"], .order-radio input[type="radio"]{
    appearance: none; /* Remove default styling */
  -webkit-appearance: none;
  -moz-appearance: none;

  width: 20px;
  height: 20px;
  border: 2px solid #91c63f; /* Outer ring */
  border-radius: 50%;
  position: relative;
  cursor: pointer;
}

.customer-radio input[type="radio"]:checked::before, .order-radio input[type="radio"]:checked::before{
   content: '';
  position: absolute;
  top: 4px;
  left: 4px;
  width: 10px;
  height: 10px;
  background-color: #91c63f; /* Inner dot color */
  border-radius: 50%;
}

.home-searchbox-cont {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: start;
    align-items: start;
    padding-left: 30px;
    padding-right: 30px;
    position: relative; /* тЬЕ Added */
}

.home-search-icon-cont{
    width: 40px;
    height: 40px;
    background-color: #00467a;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #00467a;
}

.home-search-icon-cont i{
    font-size: 1.2rem;
    color: #fff;
}

.home-searchbox-cont input{
    width: calc(100% - 40px);
    height: 40px;
    border: 1px solid #00467a;
    border-bottom-right-radius: 5px;
    border-top-right-radius: 5px;
    padding-left: 30px;
}

#home-add-cust-btn{
    width: 50%;
    height: 40px;
    border-radius: 5px;
    background-color: #91c63f;
    color: #fff;
    border: none;
    cursor: pointer;
}

#home-add-cust-btn:hover{
    background-color: #00467a;
}
.home-search-input-wrap {
    position: relative;
    width: calc(100% - 40px);
}

.home-search-input-wrap input {
    width: 100%;
    height: 40px;
    border: 1px solid #00467a;
    border-bottom-right-radius: 5px;
    border-top-right-radius: 5px;
    padding-left: 30px;
}

/* Suggestion Box */
.home-suggestion-box {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: #fff;
    border: 1px solid #00467a;
    border-top: none;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    max-height: 300px;
    overflow-y: auto;
    z-index: 1000;
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

/* Suggestion Row */
.home-suggestion-item {
    padding: 14px 18px;
    font-size: 1rem;
    color: #333;
    border-bottom: 1px solid #eee;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

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

.home-suggestion-item:hover {
    background-color: rgb(223, 240, 216);
    color: #00467a;
}

/* Name + Mobile row */
.home-suggestion-top {
    display: flex;
    justify-content: space-between; /* Name left, Mobile right */
    align-items: center;
}

.home-suggestion-top strong {
    font-weight: 600;
    color: #00467a;
}

.home-suggestion-top span {
    font-size: 0.95rem;
    color: #555;
}

/* Address line */
.home-suggestion-item small {
    display: block;
    font-size: 0.85rem;
    color: #777;
    margin-top: 3px;
}

/* Suggestion box width thodi badhaye */
.home-suggestion-box {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: #fff;
    border: 1px solid #00467a;
    border-top: none;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    max-height: 300px;
    overflow-y: auto;
    z-index: 1000;
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.home-suggestion-item.active {
    background-color: rgb(223, 240, 216);
}

/* Order suggestion row - style pehle jaisa */
.hm-od-suggestion-item {
    padding: 14px 18px;
    font-size: 1rem;
    color: #333;
    border-bottom: 1px solid #eee;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
    line-height: 1.4;
}

.hm-od-suggestion-item:hover {
    background-color: rgb(223, 240, 216);
    color: #00467a;
}

/* Row layout same: icon-left, middle info, right info */
.hm-od-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.hm-od-icon-col {
    flex: 0 0 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hm-od-icon {
    font-size: 1.6rem;
}

.hm-od-middle-col {
    flex: 1;
    padding-left: 10px;
}

.hm-od-order-id {
    font-weight: 600;
    color: #00467a;
}

.hm-od-order-date {
    font-size: 0.9rem;
    color: #555;
}

.hm-od-right-col {
    flex: 0 0 150px;
    text-align: right;
}

.hm-od-total {
    font-weight: 600;
    color: #00467a;
}

.hm-od-garments {
    font-size: 0.9rem;
    color: #555;
}


/* package page css */


.package-main-cont{
    width: 100%;
    height: calc(100vh - 80px);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
}

.package-inner-cont{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: start;
    align-items: start;
    flex-direction: column;
    gap: 10px;
    padding: 20px;
}

.package-heading-cont{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.package-heading-inner{
    width: 50%;
    height: auto;
}

.package-heading-inner p{
    font-size: 1.5rem;
    font-weight: 600;
}

.package-create-cont{
    width: 50%;
    height: auto;
    display: flex;
    justify-content: end;
    align-items: center;
    gap: 20px;
}

.package-create-cont button{
    width: 150px;
    height: 40px;
    background-color: #91c63f;
    border: none;
    border-radius: 5px;
    color: #fff;
}

.package-create-cont button:hover{
    background-color: #00467a;
}

.package-tab-cont{
    width: 100%;
    height: 90%;
    
}

.package-tab-header{
    width: 100%;
    height: auto;
    padding-top: 20px;
    
}

.package-tab-name{
    list-style-type: none;
    display: flex;
    gap: 30px;
    font-weight: 600;
}

.package-tab{
    padding: 10px 20px;
    cursor: pointer;
}

.package-tab.active {
    border-bottom: 5px solid #91c63f; /* only for active tab */
}

.package-content{
    width: 100%;
    height: 90%;
    margin-top: 30px;
    padding: 10px;
    
}

.package-tab-panel{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: start;
    align-items: start;
    flex-direction: column;
    gap: 20px;
}

.package-filter-cont{
    width: 100%;
    height: 40px;
    display: flex;
    align-items: end;
    justify-content: end;
}

.package-filter-cont select{
    width: 300px;
    height: 40px;
    border-radius: 5px;
    border: 1px solid #91c63f;
}

.package-list-table-cont {
  width: 100%;
  height: calc(100% - 40px);
  overflow: hidden;
  border: 1px solid #00467a;
  border-radius: 10px;
}

.package-list-table {
  width: 100%;
  border-collapse: collapse;
}

.package-list-table thead {
  background-color: #00467a;
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 2;
}

.package-list-table th,
.package-list-table td {
  text-align: center;
  vertical-align: middle;
  padding: 10px;
}

.package-list-table tbody {
  display: block;
  height: auto;
  max-height: 500px; /* or 400px */
  overflow-y: auto;
}

.package-list-table thead,
.package-list-table tbody tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}

.package-list-table tbody tr:nth-child(even) {
  background-color: #ddd;
}

.package-2nd-tab-cont{
    width: 100%;
    height: 100%;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 20px;
}

.package-search-cx-cont {
    width: 100%;
    height: 40px;
    position: relative; /* relative positioning for suggestion box */
}

.package-search-cx-cont input {
    width: 40%;
    height: 40px;
    padding-left: 20px;
    border-radius: 5px;
    border: 1px solid #91c63f;
    text-align: start;
}

#packageSuggestionBox {
    position: absolute;
    top: 40px; /* input рдХреЗ рдиреАрдЪреЗ рджрд┐рдЦреЗрдЧрд╛ */
    left: 0;
    width: 40%; /* input рдХреЗ рдмрд░рд╛рдмрд░ width */
    border: 1px solid #ccc;
    background: #fff;
    max-height: 200px;
    overflow-y: auto;
    display: none;
    z-index: 999;
}

.pkg-suggestion-item:hover {
    background: #f0f0f0;
}


.package-list-cont{
    width: 100%;
    height: calc(100% - 60px);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.package-list-tbl{
    width: 40%;
    height: 100%;
    border-radius: 5px;
    border: 2px solid #91c63f;
    padding: 10px;
    display: flex;
    justify-content: start;
    align-items: start;
    flex-direction: column;
    gap: 20px;
}

.package-list-tbl p{
    font-weight: 600;
}

.pckg-list-cont {
  width: 100%;
  height: 400px; /* or 90%, as needed */
  overflow-y: auto;
  border: 1px solid #00467a;
  border-radius: 5px;
}

.pckg-list-cont table {
  width: 100%;
  border-collapse: collapse;
}

.pckg-list-cont thead th {
  position: sticky;
  top: 0;
  background-color: #00467a;
  color: #fff;
  z-index: 1;
  padding: 10px;
  text-align: center;
}

.pckg-list-cont td {
  text-align: center;
  vertical-align: middle;
  padding: 10px;
}

.pckg-list-cont tbody tr:nth-child(even) {
  background-color: #ddd;
}


/* Popup Overlay */
.assign-pkg-popup {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
}

/* Popup Content */
.assign-pkg-popup-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 95%;
    height: 95%;
    background: #fff;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    overflow-y: auto;
}

/* Close Button */
.assign-pkg-close {
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 24px;
    color: #333;
    cursor: pointer;
}

#assign-pkg-popup-body{
    width: 100%;
    height: 90%; 
    padding: 20px;
    margin-top: 20px;
    

    
    
}

.assign-pkg-inner-cont{
    display: flex;
    justify-content: start;
    align-items: start;
    width: 100%;
    height: 95%;
    
}

.assign-pkg-left, .assign-pkg-right{
    width: 50%;
    height: 100%;
    padding: 20px;              
}

.assign-pkg-left{
    border-right: 1px solid #ddd;
}

.assign-pkg-left p{
    font-size: 1rem;
    font-weight: 600;
    border-bottom: 1px solid #ddd;
    padding-top: 20px;
}

.assign-pkg-details-tbl {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
    font-size: 0.8rem;
}

.assign-pkg-details-tbl td {
    padding: 8px 10px;
    vertical-align: middle;

}

.assign-pkg-details-tbl td:first-child {
    width: 10%;
    white-space: nowrap; /* text break рди рд╣реЛ */
    font-weight: 600;
}

.assign-pkg-details-tbl td:last-child {
    width: 90%;
    text-align: end;
}

.assign-pkg-payment{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: start;
    align-items: start;
    flex-direction: column;
    gap: 10px;
}

.assign-pkg-right p{
    font-size: 1rem;
    font-weight: 600;
}

.assign-pkg-payment select, .assign-pkg-payment input{
    width: 70%;
    height: 40px;
    border: 1px solid #91c63f;
    border-radius: 5px;
    padding-left: 20px;
}

.pkg-invoice-slider {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 15px;
}

.pkg-invoice-switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 24px;
}

.pkg-invoice-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.pkg-invoice-slider-round {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: 0.4s;
    border-radius: 34px;
}

.pkg-invoice-slider-round:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    transition: 0.4s;
    border-radius: 50%;
}

.pkg-invoice-switch input:checked + .pkg-invoice-slider-round {
    background-color: #4caf50;
}

.pkg-invoice-switch input:checked + .pkg-invoice-slider-round:before {
    transform: translateX(26px);
}

.pkg-invoice-label {
    font-size: 14px;
    color: #333;
}

.assign-pkg-inner-cont{
    height: auto;
    width: 100%;
    display: flex;
    justify-content: end;
    align-items: center;
    padding-right: 30px;
    padding-top: 20px;
    border-top: 1px solid #ddd;
}

.submit-btn{
    width: 200px;
    height: 40px;
    background-color: #91c63f;
    color: #fff;
    border: none;
    border-radius: 5px;
}

.submit-btn:hover{
    background-color: #00467a;
}




/* create package page css */

.create-package-main-cont{
    width: 100%;
    height: calc(100vh - 80px);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;

}

.create-package-inner-cont{
    display: flex;
    justify-content: start;
    align-items: start;
    flex-direction: column;
    height: 100%;
    width: 100%;
    padding: 20px;
    gap: 20px;
}

.create-package-inner-cont p{
    font-size: 1.2rem;
    font-weight: 600;
}

.create-package-tab-cont{
    width: 100%;
    height: 100%;
}

.create-package-tab-cont .tab-container {
      width: 400px;
      margin: auto;
    }

    .create-package-tab-cont .tab-content {
        width: 100%;
        height: 90%;
      display: none;
      padding: 20px;
      /* border: 1px solid #00467a; */
      border-radius: 10px;
      
    }

    .create-package-tab-cont .tab-content.active {
      display: block;
    }

    .create-package-tab-cont .tab-header {
      display: flex;
      justify-content: start;
      gap: 20px;
      margin-bottom: 10px;
    }

    .create-package-tab-cont .tab-header button {
      width: 100px;
      padding: 10px;
      border: none;
      background-color: #fff;
      cursor: pointer;
      transition: background-color 0.3s ease;
      font-size: 1rem;
      font-weight: 600;
    }

    .create-package-tab-cont .tab-header button.active {
      border-bottom: 5px solid #91c63f;
      
    }

    .create-package-tab-cont .next-btn {
      margin-top: 20px;
      padding: 10px 20px;
      background-color: #91c63f;
      color: white;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      width: 150px;
      height: 40px;
    }

    .create-package-tab-cont .next-btn:disabled {
      background-color: #aaa;
      cursor: not-allowed;
    }

    .package-active1-tab-cont{
        display: flex;
        justify-content: space-between;
        align-items: start;
        height: 100%;
        width: 100%;
        
    }

    .package-left-cont, .package-right-cont{
        width: 50%;
        height: 100%;
        padding: 20px;
        display: flex;
        justify-content: start;
        align-items: start;
        flex-direction: column;
        gap: 20px;
    }

    .package-left-cont{
        border-right: 1px solid #ddd;
    }

    .package-tab-inner-cont{
        width: 100%;
        height: auto;
        display: flex;
        justify-content: start;
        align-items: start;
        flex-direction: column;
        gap: 5px;
        
    }

       .package-tab-inner-cont p{
        font-size: 1rem;
        font-weight: 500;
       }

    .package-tab-inner-cont input{
        width: 100%;
        height: 40px;
        border-radius: 5px;
        border: 1px solid #91c63f;
        padding-left: 10px;
    }

    .package-tab-inner-cont textarea{
        width: 100%;
        height: 120px;
        border-radius: 5px;
        border: 1px solid #91c63f;
        padding-left: 10px;
    }

    #package-icon{
        height: auto;
        border: none;
        padding-left: 0px;
    }

    #package-icon-tc{
        font-size: 0.8rem;
        color: #a3a3a3;
    }

    .package-aval-cont{
        width: 100%;
        height: auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .package-from-cont{
        width: 45%;
        height: 35px;
        display: flex;
        justify-content: space-between;  
        align-items: center;  
        padding-bottom: 20px;
    }

    .package-from-cont input{
        width: 85%;
        height: 40px;
        border: 1px solid #91c63f;
        border-radius: 5px;
        padding-left: 20px;
    }

    .package-validity-cont{
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        height: auto;
    }

    .package-validity-toggle {
      position: relative;
      display: inline-block;
      width: 60px;
      height: 30px;
    }

    .package-validity-toggle input {
      opacity: 0;
      width: 0;
      height: 0;
    }

    .slider {
      position: absolute;
      cursor: pointer;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: #ccc;
      transition: 0.4s;
      border-radius: 30px;
    }

    .slider:before {
      position: absolute;
      content: "";
      height: 24px;
      width: 24px;
      left: 3px;
      bottom: 3px;
      background-color: white;
      transition: 0.4s;
      border-radius: 50%;
    }

    .package-validity-toggle input:checked + .slider {
      background-color: #4CAF50;
    }

    .package-validity-toggle input:checked + .slider:before {
      transform: translateX(30px);
    }

    .validity-date-cont{
        width: 100%;
        height: 40px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        
    }

    .package-validity-input{
        width: 30%;
        height: auto;
    }

    .package-validity-input select{
        width: 100%;
        height: 40px;
        border: 1px solid #91c63f;
        border-radius: 5px;
        padding-left: 10px;
    }

    .package-amount-input-cont{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-top: 20px;
        width: 100%;
        height: auto;

    }

    .package-amount-input{
        width: 45%;
        height: auto;
        
    }

    .package-amount-input input{
        width: 100%;
        height: 40px;
        border: 1px solid #91c63f;
        border-radius: 5px;
        padding-left: 20px;
    }

.package-btn-div{
    display: flex;
    justify-content: end;
    align-items: center;
    width: 100%;
    height: auto;
    padding-right: 30px;
}

.package-right-cont p{
    font-size: 1rem;
    font-weight: 500;
}

.font-weight{
    font-weight: 600 !important;
}

.package-based-cont{
    width: 100%;
    height: 100%;
   
}

.package-check-cont{
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 10px;
}

.package-check-cont input{
    width: 20px;
    height: 20px;
    border: 1px solid #91c63f;
    border-radius: 5px;
}

.pckage-font{
    font-size: 1rem !important;
    font-weight: 600 !important;
}

.package-hint{
    font-size: 0.8rem !important;
    color: #a3a3a3 !important;
}

.package-service-tabs {
      width: 100%;
      margin: auto;
      padding-top: 20px;
    }

    .package-service-tab-buttons {
      display: flex;
      margin-bottom: 10px;
      gap: 10px;
    }

    .package-service-tab-button {
      width: 150px;
      padding: 10px;
      background-color: #e0e0e0;
      border: 1px solid #ccc;
      cursor: pointer;
      font-weight: bold;
      transition: 0.3s;
    }

    .package-service-tab-button.active {
      background-color: #91c63f;
      color: white;
    }

    .package-service-tab-content {
      display: none;
      padding: 20px;
      /* border: 1px solid #007BFF; */
      border-radius: 5px;
      background-color: #f9f9f9;
      height: 80%;              /* тЬЕ Set height here */
  overflow-y: auto; 
    }

    .package-service-tab-content.active {
      display: block;
      
    }

    .package-service-item {
      margin-bottom: 10px;
      padding: 10px;
      background-color: #fff;
      border: 1px solid #ddd;
      border-radius: 5px;
    }
.package-dc-service-table {
    width: 100%;
    height: 400px; /* Set height to enable scroll */
    overflow-y: auto;
    
}

.package-1-dc-table {
    width: 100%;
    border-collapse: collapse;
    text-align: center;
    table-layout: fixed;
}

.package-1-dc-table thead th {
    position: sticky;
    top: 0;
    background-color: #f0f0f0;
    z-index: 1;
    height: 40px;
}

.package-1-dc-table tbody tr {
    height: 50px;
}

.package-1-dc-table th,
.package-1-dc-table td {
    padding: 0;
    vertical-align: middle;
}

.package-1-dc-table input,
.package-1-dc-table select {
    width: 70%;
    height: 35px;
    border: 1px solid #91c63f;
    border-radius: 5px;
    box-sizing: border-box;
    vertical-align: middle;
    padding-left: 30px;
}

.package-1-dc-table input[type="checkbox"] {
    width: 20px;
    height: 20px;
    cursor: pointer;
}

.package-1-dc-table th:first-child,
.package-1-dc-table td:first-child {
    width: 30px;
    min-width: 30px;
    max-width: 30px;
}

.package-garment-tab-cont{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: start;
    align-items: start;
    flex-direction: column;
    /* background-color: #00467a; */
    padding: 30px;
    gap: 20px;
}

.package-garment-1st-cont{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: start;
    align-items: center;
}

.package-1st-div-heading p{
    padding-left: 20px;
    padding-bottom: 10px;
}

.package-garment-1st-cont input{
    width: 20px;
    height: 20px;
}

.package-garment-2nd-cont{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 5%;
}

.package-garment-2nd{
    width: 30%;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: start;
    flex-direction: column;
    
}

.package-garment-2nd select, .package-garment-2nd input{
    height: 40px;
    width: 100%;
    border-radius: 5px;
    border: 1px solid #91c63f;
    padding-left: 20px;
}



#package-store-table th:first-child,
#package-store-table td:first-child{
    width: 60% !important;
    min-width: 60% !important;
}


.package-popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  display: none;
  justify-content: center;   /* Horizontally center */
  align-items: center;       /* Vertically center */
  z-index: 9999;
}

.package-popup-content {
  background-color: rgba(0, 0, 0, 0.5);
  width: 100vw;        /* 90% of screen width */
  height: 100vh;       /* 90% of screen height */
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: auto;     /* Enables scroll if content overflows */
}

.package-popup-inner{
    width: 99%;
    height: 99%;
    background-color: #fff;
    border-radius: 10px;
    padding: 30px;
    display: flex;
    justify-content: start;
    align-items: start;
    flex-direction: column;
    gap: 20px;
}

.package-pop-heading-cont{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.package-pop-heading-cont p{
    font-size: 1.2rem;
    font-weight: 600;
}

.package-pop-garment-tab-cont{
    width: 100%;
    height: 90%;
    
}

.package-pop-btn-cont{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: end;
    align-items: center;
    gap: 30px;
    padding-right: 30px;
}

.package-pop-btn-cont button{
    width: 150px;
    height: 40px;
    border: none;
    border-radius: 5px;
    background-color: #91c63f;
    color: #fff;
}

.package-pop-btn-cont button:hover{
    background-color: #00467a;
}

.package-pop-tab-buttons,
.package-pop-subtab-buttons {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}

.package-pop-tab-btn,
.package-pop-subtab-btn {
  padding: 8px 16px; 
  cursor: pointer;
  border: none;
  background-color: #fff;
  font-size: 1rem;
  font-weight: 600;
}

.package-pop-tab-btn.active,
.package-pop-subtab-btn.active {
  border-bottom: 5px solid #91c63f;
  color: #00467a;
  
}

.package-pop-tab-content {
  border: 1px solid #ccc;
  padding: 15px;
  border-radius: 8px;
  height: 90%;
}

.package-pop-subtab-content {
  display: none;
  padding: 10px;
  border-top: 1px solid #ccc;
  margin-top: 10px;
  height: 100%;
}

.package-pop-subtab-content.active {
  display: block;
}

.package-garment-list-cont{
    width: 100%;
    height: 90%;
    padding: 20px;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    align-content: flex-start; /* important for multiple lines */
    gap: 20px;
    flex-wrap: wrap;
    overflow-y: auto;
}

.package-garment{
    
    width: 90px;
    height: 130px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
}

.package-garment-icon{
    width: 90%;
    height: 90px;
    background-image: url('../upload/icon_6878f73f7c4ee9.23033444.png');
    background-size: cover;
    display: flex;
    justify-content: start;
    align-items: start;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
     
}

.package-garment-icon p{
    background-color: #303030;
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
}

.package-garment-name{
    font-size: 0.8rem;
    font-weight: 600;
    
}

.package-garment-icon input{
    width: 30px;
    height: 30px;
}

.package-sammury-cont{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    
}

.package-summry-1{
    width: 70%;
    height: 100%;
    border-right: 1px solid #ddd;
    padding: 10px;
}

.package-summry-2{
    width: 30%;
    height: 100%;
    padding: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    
}

.package-sammury-cont table{
   width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
}

.package-sammury-cont table td{
   padding: 5px;
  
}

.package-sammury-cont table td:first-child {
  width: 20%;
  font-weight: 600;
  font-size: 0.8rem;
}

.package-sammury-cont table td:last-child {
  width: 80%;
  text-align: end;
  font-size: 0.8rem;
}

.package-summry-1 p{
    padding-bottom: 10px;
    padding-top: 20px;
    border-bottom: 1px solid #ddd;
}

.package-summ-inner-cont{
    width: 80%;
    height: 90%;
    background: linear-gradient(to bottom, #91c63f, #4CAF50);
    border-radius: 15px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
}

.package-pop-btn-cont-div{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: end;
    align-items: center;
    padding-right: 30px;
    gap: 30px;
}

.error {
    border: 2px solid red !important;
}

/* package invoice css */

.package-invoice-main-cont{
    height: auto;
    width: 100%;
    padding: 20px;

}

.package-invoice-inner-cont{
    width: 7.9in;
    margin-left: 15px;
    display: flex;
    justify-content: start;
    align-items: start;
    flex-direction: column;
    gap: 30px;
}

.package-inovice-btn-cont{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
}


.package-inovice-btn-cont button{
    width: 130px;
    height: 40px;
    background-color: #91c63f;
    border: none;
    border-radius: 5px;
    color: #fff;
}

.package-invoice-body-cont{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: start;
    align-items: center;
    flex-direction: column;
    gap: 5px;
}

.hr{
    width: 100%;
    height: 1px;
    background-color: black;

}

.package-order-details-cont{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#package-invoice-table1 {
    width: 100%;
    border-collapse: collapse;
}

#package-invoice-table1 th,
#package-invoice-table1 td {
    padding: 3px;
    vertical-align: top;
    font-size: 0.8rem;
}

#package-invoice-table1 th:nth-child(1) {
    text-align: left;
    font-weight: 600;
}

#package-invoice-table1 th:nth-child(2) {
    text-align: right;
    font-weight: 600;
}

#package-invoice-table1 th:nth-child(1),
#package-invoice-table1 td:nth-child(1) {
    width: 80%;
}

#package-invoice-table1 th:nth-child(2),
#package-invoice-table1 td:nth-child(2) {
    width: 20%;
    text-align: right;
}

#package-invoice-total-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
    font-weight: 600;
}

#package-invoice-total-table th,
#package-invoice-total-table td {
    vertical-align: left;
    padding: 1px;
}

/* Column widths */
#package-invoice-total-table th:nth-child(1),
#package-invoice-total-table td:nth-child(1) {
    width: 60%;
    text-align: left;
}

#package-invoice-total-table th:nth-child(2),
#package-invoice-total-table td:nth-child(2) {
    width: 20%;
    text-align: right;
}



/* Header alignment override */
#package-invoice-total-table thead th:nth-child(1) {
    text-align: left;
}

#package-invoice-total-table thead th:nth-child(2) {
    text-align: right;
}

#package-invoice-amount-cont{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: end;
    padding: 0px !important;
}

#package-invoice-amount-cont p{
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0px !important;
}

#package-invoice-company{
    font-size: 25px;
    font-weight: 600;
}

#package-invoice-add, #package-invoice-cont{
    font-size: 14px;
    font-weight: 600;
}

.package-invoice-company-details{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 3px;
}

.package-order-details4{
    width: 40%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.package-order-details2, .package-order-details3{
    width: 20%;
    
    display: flex;
    justify-content: center;
    align-items: center;
}

.package-order-details1{
    width: 15%;
    display: flex;
    align-items: center;
    justify-content: start;
}

#package-od-id{
    font-size: 25px;
    font-weight: 600;
}

.package-order-details2 p, .package-order-details3 p, .package-order-details4 p{
    font-size: 0.8rem;
    font-weight: 600;
    text-align: end;
}

#package-tagline{
    font-size: 0.8rem;
}

#package-last-cont{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: start;
    padding-top: 0px !important;
}

#package-inovice-tc-cont{
    width: 60%;
}

#pckage-subtotal-cont{
    width: 40%;
}

#package-inovice-tc-cont p{
    font-size: 0.8rem;
    font-weight: 600;
}

/* order per weight css */

.order-per-weight-main{
    width: 100%;
    height: calc(100vh - 80px);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.order-weight-inner-left{
    width: 70%;
    height: 100%;
    border-right: 2px solid #ddd;
}

.order-weight-inner-right{
    width: 30%;
    height: 100%;
    padding: 20px;
    background-color: #f0f0f0;
}

.order-weight-service-cont{
    width: 100%;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
    padding: 20px;
    border-bottom: 2px solid #ddd;
}


.order-per-weight-div{
    width: 180px;
    height: 110px;
    border-radius: 10px;
    background-color: #f9f9f9;
    border: 5px solid #00467a;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 10px;
    cursor: pointer;
}



.order-per-weight-div img{
    width: 70px;
}

.order-per-weight-div p{
    font-size: 1rem;
    font-weight: 600;
}

.order-per-weight-div input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.order-per-weight-div:has(input[type="radio"]:checked) {
  border-color: #91c63f;
  box-shadow: 0 0 8px #a1cd60;
}

.order-weight-service-details-cont{
    width: 100%;
    height: auto;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 20px;
}

.order-weight-inp-cont{
    width: 70%;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;

}

.order-weight-inp-head{
    width: 20%;
    background-color: #91c63f;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom-left-radius: 5px;
    border-top-left-radius: 5px;
}

.order-weight-inp-head p{
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
}

.order-weight-inp-cont input{
    width: 60%;
    height: 40px;
    border-bottom-right-radius: 5px;
    border-top-right-radius: 5px;
    text-align: center;
    font-size: 1.2rem;
    font-weight: 500;
    border: 2px solid #91c63f;
}

.order-weight-inp-cont button{
    width: 80%;
    height: 40px;
    border: none;
    border-radius: 5px;
    background-color: #00467a;
    color: #fff;
    font-size: 1.2rem;
    font-weight: 500;
}

.order-weight-inp-cont button:hover{
    background-color: #91c63f;
}

.order-weight-inner-upper{
    width: 100%;
    height: 80%;
    display: flex;
    justify-content: start;
    align-items: start;
    flex-direction: column;
    gap: 10px;
    
}

.order-weight-inner-upper p{
    font-size: 1rem;
    font-weight: 600;
}

.selected-service-cont{
    width: 100%;
    height: 80px;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
}

.order-weight-selected-serv-child1{
    width: 20%;
    height: 100%;
    padding: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.order-weight-selected-serv-child1 img{
    width: 60px;
}

.order-weight-selected-serv-child2{
    width: 73%;
    height: 100%;
    padding: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.order-weight-sub-child{
    width: 100%;
    height: 50%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.order-weight-sub-child p{
    font-weight: 600;
    font-size: 0.8rem;
}

.order-weight-selected-serv-child3{
    width: 7%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px;
    cursor: pointer;
    color: red;
}

.order-weight-inner-lower{
    width: 100%;
    height: 20%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 10px;
}

.order-weight-ser-main{
    width: 100%;
    height: 90%;
    display: flex;
    justify-content: start;
    align-items: start;
    flex-direction: column;
    overflow-y: auto;
    gap: 5px;
    -webkit-overflow-scrolling: touch;
}

.order-weight-cont{
    width: 100%;
    height: 60%;
    border: 2px solid #00467a;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px;
}

.order-weight-inner-lower button{
    width: 100%;
    height: 40%;
    background-color: #91c63f;
    border: none;
    color: #fff;
    border-radius: 5px;
}

.order-weight-inner-lower button:hover{
    background-color: #00467a;
}

.order-weight-child-cont1{
    width: 50%;
    height: 100%;
    display: flex;
    justify-content: space-evenly;
    align-items: start;
    flex-direction: column;
    border-right: 2px solid #00467a;
    
}

.order-weight-child-cont2{
    width: 50%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

}

.order-weight-child-cont2 p{
    font-size: 1.2rem;
    font-weight: 600;
}

.order-weight-child-cont1 p{
    font-size: 0.9rem;
}


.order-weight-popup-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.order-weight-popup {
  background: white;
  padding: 5px;
  border-radius: 10px;
  width: 30%;
  height: 90%;
  max-width: 90%;
  box-shadow: 0 4px 15px rgba(0,0,0,0.3);
  position: relative;
  text-align: center;
}

.order-weight-pop-inner{
    width: 100%;
    height: 100%;
    border-radius: 10px;
    border: 1px solid #00467a;
    background-color: #f9f9f9;
    padding: 10px;
    display: flex;
    justify-content: start;
    align-items: start;
    flex-direction: column;
    gap: 5px;
}

#order-weight-datepicker{
    height: 30px;
    font-size: 1rem;
    font-weight: 600;
    border: none;
    background-color: #f9f9f9;
    cursor: pointer;
}

#order-weight-datepicker:focus{
    border: none;
    outline: none;
}

.order-weight-cx-cont{
    width: 100%;
    height: auto;
    background-color: #fff;
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.order-weight-cx-inner1{
    width: 50%;
    height: 40px;
    display: flex;
    justify-content: space-between;
    align-items: start;
    flex-direction: column;
}

.order-weight-cx-inner2{
    width: 50%;
    height: 40px;
    display: flex;
    justify-content: space-between;
    align-items: end;
    flex-direction: column;
}

.order-weight-cx-cont p{
    font-size: 0.8rem;
    margin: 0; /* unnecessary spacing remove */
    text-align: left; /* text ko left me force karega */
    white-space: normal; /* wrap allow karega */
    word-break: break-word; /* agar word bahut bada ho to break karega */
}

.order-weight-due-date{
    width: 100%;
    height: 40px;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.order-weight-due-date p{
    font-size: 0.8rem;
    font-weight: 600;
}

.order-weight-due-date input{
    width: 100px;
    height: 30px;
    text-align: center;
    cursor: pointer;
}

.order-weight-sum{
    width: 100%;
    height: auto;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
}

#order-weight-sum-table {
        width: 90%;
        border-collapse: collapse;
        font-size: 0.8rem;
    }

    #order-weight-sum-table td {
        width: 50%;
        padding: 5px;
    }

    #order-weight-sum-table td:first-child {
        text-align: left;
        font-weight: 600;
        
    }

    #order-weight-sum-table td:last-child {
        text-align: right;
    }

    .weight-flex-cell-left{
        width: auto;
        height: 100%;
        display: flex;
        justify-content: start;
        align-items: center;
        gap: 5px;
    }

     .weight-flex-cell-right{
        width: auto;
        height: 100%;
        display: flex;
        justify-content: end;
        align-items: center;
        gap: 5px;
    }

    .order-weight-dis{
        width: auto;
        height: auto;
        padding: 5px;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #ccc;
        border: 1px solid #00467a;
    }

    .order-weight-inp input{
        width: 50%;
        height: 25px;
    }

    #order-weight-coupon{
        width: 90%;
        height: 25px;
    }

    .order-weight-delivery-amnt{
        width: 90%;
        height: 25px;
    }

    .weight-flex-cell-left input{
        width: 15px;
        height: 15px;
    }

    #order-weight-grand-total{
        border-top: 3px solid #00467a;
        font-weight: 600;
        font-size: 1rem;
    }
    
    .order-weight-advance-cont{
        width: 100%;
        height: auto;
        background-color: #fff;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .order-weight-advance-inner-cont{
        width: 90%;
        height: auto;
        padding: 10px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 3px solid #00467a;
    }

    #weight-payment-mode{
        width: 150px;
        height: 35px;
    }

    #weight-advance-amt{
        width: 100px;
        height: 35px;
    }

    .weight-btn-cont{
        width: 90%;
        height: auto;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        padding: 20px;
    }

    .weight-btn-cont button{
        width: 150px;
        height: 35px;
        border: none;
        border-radius: 5px;
        background-color: #91c63f;
        color: #fff;
        cursor: pointer;
    }

    .weight-btn-cont button:hover{
        background-color: #00467a;
    }


#order-weight-pkg-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 99999;
    }

    /* Popup */
    #order-weight-pkg-popup {
        /* display: none; */
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 60%;
        height: 70%;
        background: #fff;
        border-radius: 8px;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
        z-index: 99999;
        overflow: hidden;
        padding: 3px;
    }

    

    
    #order-weight-pkg-close {
        cursor: pointer;
        font-size: 18px;
    }

    .order-weight-pkg-pop-cont{
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: start;
        align-items: center;
        flex-direction: column;
        border-radius: 8px;
        border: 2px solid #00467a;
    }

    .order-weight-pkg-header-cont{
        width: 100%;
        height: 40px;
        background-color: #00467a;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-left: 20px;
        padding-right: 20px;
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
    }

    .order-weight-pkg-header-cont{
        font-size: 1rem;
        font-weight: 600;
        color: #fff;
    }

    .order-weight-pkg-body{
        width: 100%;
        height: calc(83% - 40px);
        padding: 20px;
        
    }

    .order-weight-pkg-cont{
        width: 100%;
        height: 100%;
        border: 1px solid #ddd;
        padding: 10px;
        overflow-y: auto;
    }

    .order-weight-pkg-details{
        width: 100%;
        height: auto;
        padding: 10px;
        border-bottom: 1px solid #ddd;
        display: flex;
        justify-content: start;
        align-items: start;
    }

    .order-weight-pkg-details-inner1{
        width: 5%;
        height: auto;
        display: flex;
        align-items: flex-start !important;
    }

    .order-weight-pkg-details-inner1 input{
        transform: scale(1.4); /* thoda bada karega */
        cursor: pointer;
    }

    .order-weight-pkg-details-inner2{
        width: 70%;
        height: auto;
        display: flex;
        justify-content: start;
        align-items: start;
        flex-direction: column;
        gap: 10px;
    }

    .order-weight-pkg-details-inner3{
        width: 25%;
        height: auto;
        display: flex;
        justify-content: end;
        align-items: center;
        flex-direction: column;
        gap: 10px;
    }

    .order-weight-pkg-name{
        font-size: 1rem;
        font-weight: 600;
    }

    .order-weight-pkg-description{
        font-size: 0.8rem;
        color: #303030;
    }

    #order-weight-pkg-bal {
    width: 100%;
    height: auto;
    border-collapse: collapse;
}

#order-weight-pkg-bal td {
    width: 50%;
    border: none;
    padding: 3px;
    font-size: 0.8rem;
    padding-left: 10px;
}

#order-weight-pkg-bal td:first-child {
    text-align: left;
}

#order-weight-pkg-bal td:last-child {
    text-align: right;
}

.order-weight-recharge-cont{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: end;
    flex-direction: column;
    gap: 10px;
}

.order-weight-pkg-footer{
    width: 100%;
    height: 17%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
}   

.order-weight-pkg-footer button{
    width: 150px;
    height: 35px;
    background-color: #91c63f;
    border: none;
    border-radius: 5px;
    color: #fff;
    cursor: pointer;
}

.order-weight-pkg-footer button:hover{
    background-color: #00467a;
}


/* invoice per weight order css */

.invoice-per-weight-amount{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    
}

.invoice-per-amount-cont-sign{
    width: 5%;
    height: auto;
    display: flex;
    justify-content: center;
}

.invoice-per-amount-cont-sign p{
    font-weight: 600;
    font-size: 1.2rem;
}

.invoice-per-amount-cont{
    width: 16%;
    height: auto;
    display: flex;
    justify-content: center; 
    align-items: center;     
    text-align: center;      
    flex-direction: column;  
   
}

.invoice-per-amount-cont p{
    margin: 0;
    font-size: 0.8rem;
}

.invoice-per-weight-delivery-main-cont{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.invoice-per-weight-delivery-main-cont p{
    font-size: 0.8rem;
    font-weight: 600;
}

.invoice-per-weight-cont{
    width: 50%;
    height: auto;
    display: flex;
    justify-content: start;
    align-items: center;
}

.invoice-per-weight-delivery-cont{
    width: 50%;
    height: auto;
    display: flex;
    justify-content: end;
    align-items: center;
}

#invoice-per-weight-table1 {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;   /* рд╕рднреА columns fix рд░рд╣реЗрдВрдЧреЗ */
}

/* Header styling */
#invoice-per-weight-table1 thead th {
    font-weight: bold;
    font-size: 0.8rem;
    text-align: center;
}

/* Body styling */
#invoice-per-weight-table1 tbody {
    min-height: 100px;   /* body рдХрд╛ minimum height */
}

/* рд╣рд░ row fix 20px */
#invoice-per-weight-table1 tbody tr {
    height: 20px;
}

#invoice-per-weight-table1 tbody td {
    padding: 2px 5px;
    font-size: 0.8rem;
    vertical-align: top;  /* content рдКрдкрд░ рд╕реЗ fix рд░рд╣реЗ */
}

/* Column alignment */
#invoice-per-weight-table1 tbody td:first-child,
#invoice-per-weight-table1 thead th:first-child {
    width: 34%;
    text-align: start;
}

#invoice-per-weight-table1 tbody td:last-child,
#invoice-per-weight-table1 thead th:last-child {
    text-align: end;
}

#invoice-per-weight-table1 tbody td:not(:first-child):not(:last-child),
#invoice-per-weight-table1 thead th:not(:first-child):not(:last-child) {
    text-align: center;
}


.invoice-per-weight-package-cont{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.invoice-per-weight-pkg-inner{
    width: 25%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex-direction: column;
}

.invoice-per-weight-pkg-inner p{
    margin: 0;
    font-size: 0.8rem;
}





.tag-main-cont{
    width: 100%;
    min-height: calc(100% - 60px);
    background-color: #91c63f;
    display: flex;
    justify-content: center;
    align-items: start;
}

.tag-body-cont{
    width: 143px;
    height: auto;
    display: flex;
    justify-content: start;
    align-items: center;
    flex-direction: column;
    padding: 5px;
    background-color: #fff;
    gap: 20px;
}

.tag-body-cont p{
    font-size: 0.8rem;
    font-weight: 600;
    
}

.tag-inner-body{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: start;
    align-items: center;
    flex-direction: column;
    gap: 5px;
    
}

.tag-service-cont{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}

#tag-order-no{
    font-size: 1.2rem;
    font-weight: 600;
}

.tag-defect{
    text-align: center;
    font-size: 0.6rem !important;
}






/* customer pending order css */

.cx-pdg-main-cont{
    width: 100%;
    height: calc(100vh - 80px);
    display: flex;
    justify-content: start;
    align-items: start;
    padding: 20px;
    gap: 10px;
}

.cx-pdg-inner-main-cont{
    height: auto;
    width: 100%;
    display: flex;
    justify-content: start;
     align-items: stretch; 
    gap: 10px;
    
}

.cs-pdg-inner-cont{
    width: 75%;
    height: auto;
    border: 2px solid #00467a;
    border-radius: 10px;
    display: flex;
    justify-content: start;
    align-items: center;
    flex-direction: column;
    gap: 10px;
    flex: 1; 
}

.cx-pdg-payment-cont{
    height: auto;
    width: 25%;
    background-color: #00467a;
    display: flex;
    justify-content: start;
    align-items: center;
    flex-direction: column;
    padding-top: 30px;
    gap: 20px;
}

.cx-pdg-heading-cont{
    width: 100%;
    height: 40px;
    background-color: #00467a;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    display: flex;
    justify-content: start;
    align-items: center;
    padding-left: 30px;
}

.cx-pdg-heading-cont p{
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
}

.cx-pdg-details-main-cont{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: start;
    align-items: start;
    gap: 10px;
    padding-left: 20px;
    padding-right: 20px;
    border-bottom: 1px solid #a3a3a3;
}

.cx-pdg-details-inner{
    width: 25%;
    height: auto;
    display: flex;
    justify-content: start;
    align-items: start;
    flex-direction: column;
    gap: 10px;
    padding-bottom: 10px;
}

.cx-pdg-revanue{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: start;
    align-items: start;
    gap: 10px;
}

.cx-pdg-revanue i{
    font-size: 1.6rem;
}

.cx-pdg-details-inner p{
    font-size: 0.8rem;
    font-weight: 600;
}

.cx-pdg-details-inner-btn{
    width: 25%;
    height: auto;
    display: flex;
    justify-content: end;
    align-items: start;
}
.cx-pdg-details-inner-btn button{
    width: 50%;
    height: 50px;
    background-color: #91c63f;
    color: #fff;
    border-radius: 5px;
    border: none;
}

.cx-pdg-payment-details-cont{
    height: auto;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 10px;
}

.cx-pdg-payment-details-cont p{
    font-weight: 600;
}

.cx-pdg-payment-details-cont select{
    width: 250px;
    height: 35px;
}

.cx-pdg-order-tble-main-cont{
    width: 100%;
    height: auto;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 10px;
}

.cx-pdg-order-tble-cont {
    width: 100%;
    min-height: 200px;
    max-height: 250px;
    border: 2px solid #00467a;
    border-radius: 10px;
    padding: 0;
    overflow: hidden; /* ЁЯСИ pura table ke round corner ke liye */
}

/* Table */
.cx-pdg-order-tble-cont table {
    width: 100%;
    height: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    text-align: center;
    vertical-align: middle;
}

/* Header fix */
.cx-pdg-order-tble-cont thead {
    background-color: #00467a;
    color: #fff;
    font-weight: 600;
    height: 40px;
    position: sticky;
    top: 0; /* ЁЯСИ scroll hone pe bhi header fix rahe */
    z-index: 2;
    display: table;
    width: 100%;
    table-layout: fixed;
}

/* Body scroll */
.cx-pdg-order-tble-cont tbody {
    display: block;
    max-height: calc(250px - 40px); /* ЁЯСИ parent max-height - header height */
    overflow-y: auto;
    width: 100%;
}

/* Row cells fix alignment */
.cx-pdg-order-tble-cont thead tr,
.cx-pdg-order-tble-cont tbody tr {
    display: table;
    table-layout: fixed;
    width: 100%;
}

.cx-pdg-order-tble-cont th,
.cx-pdg-order-tble-cont td {
    text-align: center;
    vertical-align: middle;
    padding: 8px;
    font-size: 0.8rem;
}

.cx-pdg-order-tble-cont td {
    border-bottom: 1px solid #a3a3a3;
}

/* Row height */
.cx-pdg-order-tble-cont tbody tr td {
    height: 30px;
    line-height: 30px;
}


.cx-pdg-btn-cont{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 10px;
}

.cx-pdg-btn-right-cont{
    width: 50%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 20px;
}

.cx-pdg-btn-left-cont{
    width: 50%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: end;
    gap: 20px;
}

.cx-pdg-btn-cont button{
    width: 90px;
    height: 90px;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 600;
    border-radius: 15px;
}

.cx-pdg-btn-left-cont button{
    background-color: #91c63f;
    color: #fff;
    border: none;
    cursor: pointer;
    border-radius: 15px;
    font-size: 0.8rem;
    font-weight: 600;
}

.cx-pdg-btn-left-cont button:hover{
    background-color: #00467a;
}

.cx-pdg-payment-cont #datepicker{
    width: 80%;
    height: 40px;
    text-align: center;
    font-size: 1rem;
    font-weight: 600;
}

.cx-pdg-payment-cont table {
    width: 80%;
    border-collapse: collapse;
    color: #fff;
}

.cx-pdg-payment-cont table td:first-child {
    text-align: left;   /* ЁЯСИ рдкрд╣рд▓рд╛ рдХреЙрд▓рдо left */
    padding: 5px 10px;
}

.cx-pdg-payment-cont table td:last-child {
    text-align: right;  /* ЁЯСИ рджреВрд╕рд░рд╛ рдХреЙрд▓рдо right */
    padding: 5px 10px;
    font-weight: 600;
}

.cx-pdg-payment-cont button{
    width: 80%;
    height: 40px;
    border: none;
    background-color: #91c63f;
    color: #fff;
    cursor: pointer;
}

#cx-pdg-exit{
    background-color: red;
}


/* order per pcs css */

.od-pc-main-cont{
    width: 100%;
    height: calc(100vh - 80px);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    gap: 10px;
}

.od-pc-inner-left-cont{
    width: 75%;
    height: 100%;
    display: flex;
    justify-content: start;
    align-items: start;
    flex-direction: column;
    gap: 5px;
}

.od-pc-add-garment-cont {
    width: 100%;
    height: 100px;
    background: linear-gradient(to bottom, #a6dc54, #91c63f, #7fb934); 
    display: flex;
    justify-content: center;
    align-items: center;
    
    border: 1px solid #7fb934; /* outline */
    cursor: pointer;
}

/* Hover pe thoda zyada glossy lage */
.od-pc-add-garment-cont:hover {
    background: linear-gradient(to bottom, #b8ea63, #91c63f, #72a72c);
}

.od-pc-add-garment-inner1 {
    width: 100px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-right: 1px solid rgba(255, 255, 255, 0.5);
}

.od-pc-add-garment-inner1 i {
    color: #fff;
    font-size: 3rem;
    font-weight: 100;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3); /* thoda ubhra hua icon */
}

.od-pc-add-garment-inner2 {
    width: calc(100% - 100px);
    height: 100%;
    display: flex;
    justify-content: start;
    align-items: center;
    padding-left: 20px;
}

.od-pc-add-garment-inner2 p {
    color: #fff;
    font-size: 1rem;
    text-shadow: 0 1px 3px rgba(0,0,0,0.3); /* text ko bhi depth milegi */
}

.od-pc-cart-cont {
    width: 100%;
    height: calc(100% - 200px);
    display: flex;
    justify-content: flex-start;   /* start se arrange karo */
    align-items: center;       /* center ki jagah start */
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;
    padding: 7px 0;                /* sirf top-bottom padding */
    scroll-padding: 10px 0;        /* optional: scroll ke liye safe space */
}


.od-pc-cart-garment {
    width: 98%;
    height: 100px;
    border: 2px solid #00467a;
    display: flex;
    justify-content: start;
    align-items: start;
    position: relative; /* important for absolute child */
    
}

.od-pc-cart-icon {
    width: 100px;
    height: 100%;
    border-right: 1px solid #00467a;
    display: flex;
    justify-content: center;
    align-items: center;
}

.od-pc-cart-icon img {
    width: 80px;
    height: 80px;
}

.od-pc-cart-garment-details {
    width: 65%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: start;
    flex-direction: column;
    padding: 10px;
}

.od-pc-garment-name-cont {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: space-between;
    align-items: start;
    flex-direction: column;
    gap: 5px;
}

.od-pc-garment-price-cont {
    width: 100%;
    height: auto;
    display: flex;
    justify-content: start;
    align-items: start;
    gap: 15px;
}

.od-pc-garment-name {
    font-size: 0.8rem;
    font-weight: 600;
}

.od-pc-qty {
    font-size: 0.8rem;
    color: #a3a3a3;
}

.od-pc-garment-price-cont p {
    font-size: 0.8rem;
    font-weight: 600;
}

.od-pc-topup-pricing-cont {
    width: calc(100% - 100px - 65%);
    height: 100px;
    padding: 10px;
}

.od-pc-topup-pricing-cont table {
    width: 90%;
    border-collapse: collapse;
    table-layout: fixed; /* equal column widths */
    font-size: 0.8rem;
    font-weight: 600;
}

.od-pc-topup-pricing-cont table tr {
    height: auto; /* row height = content ke hisaab se */
}

.od-pc-topup-pricing-cont table td {
    width: 50%; 
    padding: 1px;
    vertical-align: middle;
    word-wrap: break-word;
}

.od-pc-topup-pricing-cont table td:first-child {
    text-align: left;
}

.od-pc-topup-pricing-cont table td:last-child {
    text-align: right;
}

/* тЬЕ Cross Button */
.od-pc-remove-btn {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 20px;
    height: 20px;
    background: #ff4d4d;
    color: #fff;
    font-size: 14px;
    font-weight: bold;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: 0.2s;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.od-pc-remove-btn:hover {
    background: #e60000;
    transform: scale(1.1);
}

.od-pc-btn-cont{
    width: 100%;
    height: 100px;
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 15px;
    padding: 10px;
    background-color: #ddd;
}

.od-pc-btn-cont textarea{
    width: 250px;
    height: 80px;
    padding: 10px;
}

.check-tile {
  position: relative;
  display: inline-block;
  line-height: 0;
  cursor: pointer;
  user-select: none;
}

.check-tile input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  margin: 0;
}

.tile {
  width: 80px;
  height: 80px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: 600 12px/1.2 system-ui, sans-serif;
  color: #fff;
  background: #00467a;
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
  position: relative;
  box-sizing: border-box;
  text-align: center;
  padding: 6px;
  word-break: break-word;
}

/* hover / focus */
.check-tile:hover .tile {
  transform: translateY(-1px);
}


/* тЬЕ Top-right tick (no circle) */
.check-tile input:checked + .tile::after {
  content: "тЬУ";
  position: absolute;
  top: 1px;   /* рдереЛрдбрд╝рд╛ adjust рдХрд┐рдпрд╛ */
  right: 1px;
  font-size: 1.6rem;   /* рдмрдбрд╝рд╛ tick */
  font-weight: 600;  /* рдореЛрдЯрд╛ tick */
  color: #91c63f;    /* green tick */
  line-height: 1;
}



.od-pc-inner-right-cont{
    width: 25%;
    height: 100%;
    padding: 10px;
    background-color: #00467a;
    display: flex;
    justify-content: start;
    align-items: start;
    flex-direction: column;
}

.od-pc-inner-right-inner-div{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: start;
    align-items: start;
    flex-direction: column;
    gap: 5px;
}

#order-per-pcs-datepicker{
    width: 100%;
    height: auto;
    font-size: 1rem;
    font-weight: 600;
    background-color: #00467a;
    border: none;
    outline: none;
    color: #fff;
    cursor: pointer;
}

.hr-fff{
    width: 100%;
    height: 1px;
    background-color: #fff;
}

#od-pc-cx-add, #od-pc-cx-contact, #od-pc-cx-emial{
    font-size: 0.8rem;
    color: #fff;
}

#od-pc-cx-name{
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
}

.od-pc-due-cont{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 5px;
    margin-bottom: 5px;
}

#order-pcs-due-date{
    width: 59%;
    height: 40px;
    text-align: center;
    font-size: 0.8rem;
    font-weight: 600;
}

#order-pcs-due-time{
    width: 40%;
    height: 40px;
    text-align: center;
    font-size: 0.8rem;
    font-weight: 600;
}

#od-pc-qty{
    font-size: 0.8rem;
    font-weight: 600;
    color: #fff;
}

#od-pc-table {
    width: 100%;
    border-collapse: collapse;
}

#od-pc-table td {
    width: 50%;
    border: none;
    color: #fff;
    vertical-align: middle;
    white-space: nowrap;
    padding-top: 5px;
    font-size: 0.8rem;
}

#od-pc-table td:first-child {
    text-align: left;   /* рдкрд╣рд▓рд╛ column left aligned */
}

#od-pc-table td:last-child {
    text-align: right;  /* рджреВрд╕рд░рд╛ column right aligned */
}

#od-pc-coupon{
    width: 90%;
    height: 30px;
}

#od-pc-pflat{
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 10px;
    width: 100%;
    height: auto;
}

.od-pc-per, .od-pc-flat{
    width: 40px;
    height: 25px;
    background-color: #ddd;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid black;
}

.od-pc-per p, .od-pc-flat p{
    font-size: 0.8rem;
    color: black;
    font-weight: 600;
}



#od-pc-dicount-cont{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: end;
    align-items: center;
    gap: 5px;
}

#od-pc-dicount-cont input{
    width: 50%;
    height: 30px;
}

#od-pc-dicount-cont p{
    font-size: 0.8rem;
}

#delivery-charge, #min-pickup-charge, #od-pc-adv-amt{
    width: 90%;
    height: 30px;
    padding-left: 10px;
}

.od-pc-gt-txt{
    font-size: 1rem;
    font-weight: 600;
}

#od-pc-adv-mode{
    width: 90%;
    height: 30px;
}

.od-pc-last-row{
    border-bottom: 2px solid #fff;
}

.od-pc-last-row p{
    font-size: 1.2rem;
    font-weight: 600;
    padding: 5px;
}

#od-pc-save{
    width: 100%;
    height: 40px;
    background-color: #91c63f;
    color: #fff;
    border: none;
    cursor: pointer;
    margin-top: 10px;
}

.od-pc-tb-cont{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: start;
    align-items: start;
}

.od-pc-tb{
    width: 100% !important;
}

.od-pc-action{
    width: 15%;
    height: 100%;
    display: flex;
    justify-content: start;
    align-items: center;
    flex-direction: column;
    gap: 10px;
}

.od-pc-pop-qty-cont{
    height: auto;
    width: 100%;
    display: flex;
    justify-content: center;
}

.od-pc-minus, .od-pc-plus{
    width: 40px;
    height: 40px;
    background-color: #00467a;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #00467a;
    cursor: pointer;
}

.od-pc-minus p, .od-pc-plus p{
    font-size: 1.6rem;
    font-weight: 600;
    color: #fff;
}

#od-pc-gr-qty{
    width: 100px;
    height: 40px;
    border: 1px solid #00467a;
    text-align: center;
    font-weight: 600;
}

#od-pc-pop-price{
    width: 100px;
    height: 40px;
    border: 1px solid #00467a;
    text-align: center;
    font-weight: 600;
    margin-bottom: 50px;
}

.od-pc-btn{
    width: 150px;
    height: 40px;
    background-color: #91c63f;
    color: #fff;
    border: none;
    cursor: pointer;
}

.od-pc-btn-cls{
    width: 150px;
    height: 40px;
    background-color: red;
    color: #fff;
    border: none;
    cursor: pointer;
}


.defect-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  display: none;
  justify-content: center;   /* Horizontally center */
  align-items: center;       /* Vertically center */
  z-index: 9999;
}

.defect-content {
  background-color: rgba(0, 0, 0, 0.5);
  width: 100vw;        /* 90% of screen width */
  height: 100vh;       /* 90% of screen height */
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: auto;     /* Enables scroll if content overflows */
}

.defect-inner {
    width: 50%;
    height: 80%;
    background-color: #fff;
    border-radius: 10px;
    padding: 30px;
    display: flex;
    justify-content: start;
    align-items: start;
    flex-direction: column;
    gap: 20px;
    position: relative;  /* ЁЯСИ close btn ke liye */
}

.od-pc-defect-inner-cont{
    width: 100%;
    height: 90%;
    border: 1px solid #ddd;
    border-radius: 10px;
    display: flex;
    justify-content: start;
    align-items: start;
    flex-direction: column;
    padding: 10px;
}

.od-pc-defect-search-cont{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: start;
    align-items: start;
    gap: 20px;
}

#od-pc-defect-search{
    width: 50%;
    height: 30px;
    border: 1px solid #00467a;
    border-radius: 5px;
    padding-left: 20px;
    font-size: 0.8rem;
    font-weight: 600;
}

#od-pc-add-defect-btn{
    width: 150px;
    height: 30px;
    border: none;
    background-color: #00467a;
    color: #fff;
    border-radius: 5px;
    cursor: pointer;
  
}

#od-pc-add-defect-btn:hover{
    background-color: #91c63f;
}

#od-pc-pro-defect-btn{
    width: 150px;
    height: 30px;
    border: none;
    background-color: #00467a;
    color: #fff;
    border-radius: 5px;
    cursor: pointer;
    margin-left: auto;
}

#od-pc-pro-defect-btn:hover{
    background-color: #91c63f;
}

.od-pc-defect-list-cont {
    display: flex;
    flex-wrap: wrap;     /* row full hone ke baad naya row start */
    gap: 10px;
    padding-top: 20px;
}

.od-pc-defect-box {
    width: 150px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #aaa;
    border-radius: 6px;
    cursor: pointer;
    user-select: none;
    transition: all 0.2s ease-in-out;
}

/* тЬЕ selected (checkbox checked) */
.od-pc-defect-box input:checked + span {
    background-color: #91c63f;
    border: 1px solid #91c63f;
    color: #fff;
    border-radius: 6px;
    padding: 12px 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* тЭМ Close Button */
.defect-close-btn {
    position: absolute;
    top: -10;
    right: -16;
    border: none;
    font-size: 24px;
    font-weight: bold;
    color: #fff;
    cursor: pointer;
    transition: 0.2s;
    background-color: red;
    border-radius: 100%;
    width: 30px;
    height: 30px;
}

.defect-close-btn:hover {
    color: #fff;
    transform: scale(1.1);
}

.topup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  display: none;
  justify-content: center;   /* Horizontally center */
  align-items: center;       /* Vertically center */
  z-index: 9999;
} 

.topup-content {
  background-color: rgba(0, 0, 0, 0.5);
  width: 100vw;        /* 90% of screen width */
  height: 100vh;       /* 90% of screen height */
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: auto;     /* Enables scroll if content overflows */
}

.topup-inner{
    width: 50%;
    height: 50%;
    background-color: #fff;
    border-radius: 10px;
    padding: 30px;
    display: flex;
    justify-content: start;
    align-items: start;
    flex-direction: column;
    gap: 20px;
    position: relative;  /* ЁЯСИ close btn ke liye */
    
}


.od-pc-topup-body {
    width: 100%;
    height: 75%;
    display: flex;
    flex-wrap: wrap;   /* row full hone ke baad naya row */
    gap: 10px;         /* bas 10px ka gap */
    padding: 10px;
    align-content: flex-start; /* row gap ko control karega */
}

.od-pc-topup-box {
    width: 250px;
    height: 60px;
    border: 1px solid #aaa;
    border-radius: 6px;
    cursor: pointer;
    transition: 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;  /* extra height na badhe */
    padding: 0;              /* default padding remove */
    margin: 0;               /* default margin remove */
}

.od-pc-topup-content {
    width: 90%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 5px;
}

.od-pc-topup-content span {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin: 0; /* extra space remove */
    padding: 0;
}

.od-pc-topup-content input {
    width: 80px;
    height: 30px;
    border: 1px solid #00467a;
    border-radius: 4px;
    padding: 2px 5px;
    font-size: 12px;
    margin: 0; /* default input margin remove */
    box-sizing: border-box;
}

/* тЬЕ selected state */
.od-pc-topup-box input:checked + .od-pc-topup-content {
    background-color: #91c63f;
    border-radius: 6px;
    color: #fff;
}

.od-pc-topup-btn-cont{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: end;
    align-items: center;
}

#add-topup-service{
    width: 200px;
    height: 35px;
    border: none;
    background-color: #91c63f;
    color: #fff;
    border-radius: 5px;
    cursor: pointer;
}

#add-topup-service:hover{
    background-color: #00467a;
}

.od-pc-tab-cont{
    display: flex;
    justify-content: start;
    align-items: start;
    width: 100%;
    height: 100%;
}


.package-garment-label {
     width: 90px;
    height: auto; 
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
    
}

.package-garment-icon {
    width: 70px;
    height: 70px;
    background-size: cover;
    background-position: center;
    margin-bottom: 5px;
}


.package-garment-lable:hover{
    outline: 5px solid #91c63f;
    background-color: rgba(0, 0, 0, 0.3);

}

.package-garment-label:has(input[type="radio"]:checked) {
    border: 5px solid #91c63f;
    background-color: rgba(0, 0, 0, 0.3);
}

#od-pc-per-sign{
    display: none;
}

.topup-row .topup-name {
    font-style: italic;
}

.defect-text{
    font-size: 0.6rem;
    font-weight: 600;
}


/* order details css */

.od-main-cont{
    width: 100%;
    height: calc(100vh - 80px);
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.od-inner-left-cont{
    width: 75%;
    height: 100%;
    display: flex;
    justify-content: start;
    align-items: start;
    flex-direction: column;
    gap: 10px;
    border: 2px solid #00467a;
    padding: 10px;
}


.od-left-top-cont {
    display: flex;
    width: 100%;
    gap: 15px;           /* boxes ke beech ka gap */
    flex-wrap: nowrap;   /* ek line me hi saare */
}


.od-int-lable-cont p {
    margin: 0;             /* default margin hata do */
    font-size: 0.8rem;
}

.od-top-ipt-cont {
    flex: 1 1 0;         /* grow, shrink, base 0 - sab equal width lenge */
    display: flex;
    align-items: center;
    border: 2px solid #00467a;
    border-radius: 5px;
    overflow: visible;
    position: relative;   /* suggestion box ke liye */
}

.od-int-lable-cont {
    padding: 0 8px;
    height: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #00467a;
    color: #fff;
    flex-shrink: 0;
}

.od-input {
    height: 35px;
    border: none;
    outline: none;
    flex: 1;                  /* remaining space le */
    padding: 0 5px;
    border-left: 1px solid #00467a;
}

.od-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    max-height: 250px;
    overflow-y: auto;    /* vertical scroll */
    overflow-x: hidden;  /* horizontal scroll disable */
    background: #ffffff;
    border: 1px solid #ddd;
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
    z-index: 1000;
    display: none;
    transition: all 0.25s ease-in-out;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.od-suggestion-item {
    padding: 12px 20px;
    cursor: pointer;
    font-size: 0.95rem;
    color: #333;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #f0f0f0;
    transition: all 0.2s ease;
}

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

.od-suggestion-item:hover {
    background: linear-gradient(90deg, #91c63f, #6cbf3f);
    color: #fff;
    transform: scale(1.03);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.od-suggestion-item i {
    margin-right: 8px; /* agar aap icon bhi add karte ho */
    color: #fff;
}

.od-suggestions::-webkit-scrollbar {
    width: 6px;
}

.od-suggestions::-webkit-scrollbar-thumb {
    background-color: rgba(145, 198, 63, 0.6);
    border-radius: 10px;
}

.od-suggestions::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 10px;
}


.od-table-cont {
  width: 100%;
  height: 400px;
  border: 2px solid #00467a;
  overflow-y: auto;   
}

.od-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
}

.od-table th,
.od-table td {
border-bottom: 1px dotted #00467a;
  padding: 6px;
  text-align: center;
}

.od-table td {
  padding: 6px;
  text-align: center;
  height: 60px;          /* ЁЯСИ рд╕рд┐рд░реНрдл rows ki height fix */
  vertical-align: middle; /* text center me rahe */
}

.od-table th:nth-child(2),
.od-table td:nth-child(2) {
  width: 60px;   /* ЁЯСИ 2nd column ka fixed width */
}

.od-table thead th {
  position: sticky;
  top: 0;
  background-color: #00467a;
  color: white;
  z-index: 2;
  font-weight: 600;
}

.d-table td{
    height: 50px;
}

.od-bottom-cont{
    width: 100%;
    height: 100px;
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 20px;
}

.od-bottom-cont button{
    width: 80px;
    height: 80px;
    border: none;
    background-color: #91c63f;
    color: #fff;
    border-radius: 5px;
    cursor: pointer;
}

.od-left-button-cont{
    width: 50%;
    height: 100%;
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 10px;

}

.od-right-button-cont{
    width: 50%;
    height: 100%;
    display: flex;
    justify-content: end;
    align-items: center;
    gap: 10px;
}

.od-left-button-cont textarea{
    width: 200px;
    height: 80px;
    border-radius: 5px;
    border: 1px solid #00467a;

}

.od-check-tile {
  position: relative;
  display: inline-block;
  line-height: 0;
  cursor: pointer;
  user-select: none;
}

.od-check-tile input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  margin: 0;
}

.od-tile {
  width: 80px;
  height: 80px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: 600 12px/1.2 system-ui, sans-serif;
  color: #fff;
  background: #91c63f;
  transition: transform .12s ease, border-color .12s ease, background .12s ease;
  position: relative;
  box-sizing: border-box;
  text-align: center;
  padding: 6px;
  word-break: break-word;
  border-radius: 5px;
}

/* hover / focus */
.od-check-tile:hover .od-tile {
  transform: translateY(-1px);
}


/* тЬЕ Top-right tick (no circle) */
.od-check-tile input:checked + .od-tile::after {
  content: "тЬУ";
  position: absolute;
  top: 1px;   /* рдереЛрдбрд╝рд╛ adjust рдХрд┐рдпрд╛ */
  right: 1px;
  font-size: 1.6rem;   /* рдмрдбрд╝рд╛ tick */
  font-weight: 600;  /* рдореЛрдЯрд╛ tick */
  color: #00467a;    /* green tick */
  line-height: 1;
}

.od-bottom-cont button:hover{
    background-color: #00467a;
}

.od-inner-right-cont{
    width: 25%;
    height: 100%;
    background-color: #00467a;
    padding: 10px;
    display: flex;
    justify-content: start;
    align-items: start;
    flex-direction: column;
    gap: 10px;
    position: relative;  /* рддрд╛рдХрд┐ absolute panel рдЗрд╕реА рдХреЗ рдЕрдВрджрд░ рд░рд╣реЗ */
    overflow: hidden;    /* transition рдХреЗ рджреМрд░рд╛рди рдмрд╛рд╣рд░ рди рдирд┐рдХрд▓реЗ */
}

.od-inner-right-1st-cont{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: start;
    align-items: start;
    flex-direction: column;
    gap: 10px;
}

.od-order-no-cont{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.od-order-no-cont p{
    font-size: 1.2rem;
    color: #fff;
    font-weight: 600;
}

.od-hr{
    width: 100%;
    height: 1px;
    background-color: #fff;
}

.od-cx-details {
    width: 80%;
    height: auto;
    display: flex;
    justify-content: flex-start;  /* vertical ke liye */
    align-items: flex-start;      /* ЁЯСИ horizontal left align */
    flex-direction: column;
    gap: 5px;
}

.od-cx-details p{
    font-size: 0.8rem;
    color: #fff;
}

.od-packet-cont, .od-due-cont{
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.od-packet-cont p, .od-due-cont p{
    font-size: 0.8rem;
    font-weight: 600;
    color: #fff;
}

.od-payment-table-cont table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;   /* ЁЯСИ columns equal width le sakte hain */
    color: #fff;
}

.od-payment-table-cont td {
    border: none;
    padding: 6px 8px;
    font-size: 0.8rem;
    font-weight: 600;
}

/* first column (labels) */
.od-payment-table-cont td:first-child {
    width: 50%;
    text-align: right;   /* ЁЯСИ left aligned */
}

/* second column (values) */
.od-payment-table-cont td:last-child {
    width: 50%;
    text-align: right;  /* ЁЯСИ right aligned */
}

/* last row ka font size */
.od-payment-table-cont tr:last-child td {
    font-size: 1rem;
}

/* last 2 rows ke 2nd column me pseudo-element se half border */
.od-payment-table-cont tr:nth-last-child(-n+2) td:last-child {
    position: relative;
}

.od-payment-table-cont tr:nth-last-child(-n+2) td:last-child::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 30%;                  /* ЁЯСИ 25% se start karega */
    width: 70%;                 /* ЁЯСИ sirf 50% width */
    border-bottom: 2px solid #fff;  /* ЁЯСИ border style */
}

.od-right-side-btn-cont{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: start;
    align-items: center;
    flex-direction: column;
    gap: 10px;
    padding-top: 20px;
}

.od-right-side-btn-cont button{
    height: 35px;
    width: 90%;
    background-color: #91c63f;
    color: #fff;
    border: none;
    border-radius: 3px;
    cursor: pointer;
}

.od-right-side-btn-cont button:hover{
    background-color: #7cc70b;
}

.od-inner-right-2nd-cont{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: start;
    align-items: center;
    flex-direction: column;
    gap: 10px;
}

.slide-panel {
    transform: translateY(100%);   /* рдиреАрдЪреЗ рд╕реЗ рдмрд╛рд╣рд░ */
    opacity: 0;
    transition: all 0.4s ease-in-out;
}

.slide-panel.active {
    /* force visible */
    transform: translateY(0);      /* рдКрдкрд░ slide */
    opacity: 1;
}

.od-payment-date{
    width: 100%;
    height: 35px;
    text-align: center;
    border: none;
    font-size: 0.8rem;
    font-weight: 600;
    border-radius: 5px;
}

.od-selected-garment-cont{
    width: 100%;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.od-left-selected-garment, .od-right-selected-garment{
    width: 50%;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.od-left-selected-garment p, .od-right-selected-garment p{
    color: #fff;
    font-size: 0.8rem;
    font-weight: 600;
}

.od-amount-cont{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: start;
    align-items: start;
}



.od-amt-text-cont {
    height: 35px;
    background-color: #91c63f;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 10px;
    border-bottom-left-radius: 5px;
    border-top-left-radius: 5px;
}

.od-amt-text-cont p {
    font-size: 0.8rem;
    color: #fff;
    margin: 0;   /* extra space remove */
}

.od-amount-cont input {
    height: 35px;
    width: 150px;
    border: 1px solid #91c63f;
    border-bottom-right-radius: 5px;
    border-top-right-radius: 5px;
    outline: none;
    padding: 0 8px;
}

.od-payment-mode-cont{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: start;
    align-items: start;
    flex-direction: column;
    border: 1px solid #91c63f;
    border-radius: 5px;
    overflow: hidden;
}

.od-payment-heading{
    width: 100%;
    height: 30px;
    display: flex;
    justify-content: start;
    align-items: center;
    padding-left: 10px;
    background-color: #91c63f;
}

.od-payment-heading p{
    font-size: 0.8rem;
    color: #fff;
    font-weight: 600;
}


.od-payment-mode {
    display: flex;
    flex-wrap: wrap;    /* jagah khatam hone pe new line */
    gap: 10px;          /* boxes ke beech spacing */
    padding: 10px;
}

.od-payment-option {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100px;       /* box ka width */
    height: 40px;       /* box ka height */
    border: 2px solid #00467a;
    border-radius: 6px;
    background: #f8f8f8;
    font-size: 0.9rem;
    font-weight: 600;
    color: #00467a;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 0.8rem;
}

/* radio hide */
.od-payment-option input[type="radio"] {
    display: none;
}

/* hover effect */
.od-payment-option:hover {
    background: #91c63f;
    color: #fff;
}

/* checked hone par */
.od-payment-option input[type="radio"]:checked + span {
    background: #91c63f;
    color: #fff;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
}

.od-payment-btn{
    width: 100%;
    height: 35px;
    border-radius: 3px;
    border: none;
    background-color: #91c63f;
    color: #fff;
    cursor: pointer;
}

.od-payment-btn:hover{
    background-color: #7cc70b;
}

.od-inner-right-3rd-cont{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: start;
    align-items: center;
    flex-direction: column;
    gap: 10px;
}

.od-accpt-payment{
    width: 100%;
    height: auto;
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 10px;
    background-color: #91c63f;
}

.od-accpt-payment p{
    font-size: 0.8rem;
    font-weight: 600;
    color: #fff;

}

.od-lst-curnt-due{
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
}

.od-delivered{
    width: 100%;
    height: 35px;
    background-color: #91c63f;
    border: none;
    border-radius: 5px;
    color: #fff;
    cursor: pointer;
}

.od-delivered:hover{
    background-color: #7cc70b;
}

#od-leave-blnce {
    width: auto;
    height: 35px;
    background-color: #91c63f;  /* тЬЕ Green background */
    color: #fff;                /* White text */
    border: none;               /* No border */
    outline: none;              /* No outline */
    padding: 5px 10px;
    border-radius: 5px;

    /* Remove default arrow */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    background-image: none;
}

/* тЬЕ Dropdown (options) ka background white */
#od-leave-blnce option {
    background-color: #fff;   /* White background */
    color: #000;              /* Black text */
}

#adjustment-type{
    height: 35px;
    width: auto;
    border: none;
    padding: 8px;
    border-bottom-right-radius: 5px;
    border-top-right-radius: 5px;
}

#cancel-order-btn{
    background-color: red;
}

#od-pop-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.6);
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

#od-pop-box {
    background: #fff;
    width: 95%;
    height: 95%;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    animation: od-pop-fadeIn 0.3s ease;
}

.od-pop-body{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: start;
    align-items: start;
    flex-direction: column;
}

.od-pop-heading-cont{
    width: 100%;
    height: 80px;
    background-color: #00467a;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
}



.od-pop-heading-inner-cont{
    width: 80%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: start;
    gap: 5px;
    flex-direction: column;
}

.od-pop-heading{
    font-size: 1.2rem;
    font-weight: 600;
    color: #fff;
}

.od-pop-sub-heading{
    font-size: 0.8rem;
    font-weight: 600;
    color: #94a3b8;
}

.od-pop-close-cont{
    width: 20%;
    height: 100%;
    display: flex;
    justify-content: end;
    align-items: center;
}

#od-pop-close{
    font-size: 2rem;
    color: #94a3b8;
    cursor: pointer;
}

@keyframes od-pop-fadeIn {
    from { transform: scale(0.8); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.od-pop-summary-cont{
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    gap: 10px;
    padding: 20px;
    box-sizing: border-box;   /* important */
}

.od-pop-box-item{
    flex: 0 0 calc((100% - 60px) / 7);
    height: 100px;
    border-radius: 10px;
    padding: 12px;
    box-sizing: border-box;
    font-family: sans-serif;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: 0.3s;
}

.od-pop-box-item:hover{
    transform: translateY(-3px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.od-pop-icon{
    font-size: 22px;
}

.od-pop-box-item h4{
    margin: 0;
    font-size: 12px;
    font-weight: 600;
}

.od-pop-box-item p{
    margin: 3px 0 0;
    font-size: 16px;
    font-weight: bold;
}

/* 🎨 Color Themes */

.od-pop-total{
    background: #e3f2fd;
    border-left: 5px solid #2196f3;
    color: #0d47a1;
}

.od-pop-paid{
    background: #e8f5e9;
    border-left: 5px solid #4caf50;
    color: #1b5e20;
}

.od-pop-due{
    background: #ffebee;
    border-left: 5px solid #f44336;
    color: #b71c1c;
}

.od-pop-delivered{
    background: #f3e5f5;
    border-left: 5px solid #9c27b0;
    color: #4a148c;
}

.od-pop-ready{
    background: #e0f7fa;
    border-left: 5px solid #00acc1;
    color: #006064;
}

.od-pop-unprocessed{
    background: #fff8e1;
    border-left: 5px solid #ff9800;
    color: #e65100;
}

.od-pop-status{
    background: #ede7f6;
    border-left: 5px solid #673ab7;
    color: #311b92;
}

.od-pop-payment-garment-details-cont{
    width: 100%;
    height: calc(85%);
    overflow-y: auto;
    overflow-x: hidden;
    scroll-behavior: smooth;
    padding: 20px;
    display: flex;
    justify-content: start;
    align-items: start;
    flex-direction: column;
    gap: 10px;
}

.od-pop-payment-details{
    font-size: 1rem;
    font-weight: 600;
    color: #00467a;
}

.od-pop-line{
    width: 100%;
    height: 1px;
    background-color: #e5e7eb;
}

.od-pop-payment-details-table{
    width: 100%;
    border-collapse: collapse;
    font-family: sans-serif;
}

.od-pop-payment-details-table th{
    background: #f5f5f5;
    padding: 10px;
    text-align: left;
    font-size: 13px;
    border-bottom: 2px solid #ddd;
}

.od-pop-payment-details-table td{
    padding: 10px;
    font-size: 13px;
    border-bottom: 1px solid #eee;
}

.od-pop-payment-details-table tr:hover{
    background: #fafafa;
}

.od-pop-garment-details-table{
    width: 100%;
    border-collapse: collapse;
    font-family: sans-serif;
}

.od-pop-garment-details-table th{
    background: #f0f0f0;
    padding: 10px;
    text-align: left;
    font-size: 13px;
    border-bottom: 2px solid #ccc;
}

.od-pop-garment-details-table td{
    padding: 10px;
    font-size: 13px;
    border-bottom: 1px solid #eee;
}

.od-pop-garment-details-table tr:hover{
    background: #fafafa;
}

.od-pop-garment-details-table td[colspan]{
    font-weight: 600;
    background: #f9f9f9;
}

.od-pop-footer-cont{
    width: 100%;
    height: auto;
    background-color: #91c63f;
    border-radius: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 20px;
}

#od-pop-order-overall-status{
    font-size: 0.8rem;
    font-weight: 600;
    color: fff;
}

#od-pop-order-overall-delivered{
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
}

/* tag list css */

.tagl-main-cont{
    width: 100%;
    height: calc(100vh - 80px);
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: start;
}

.tagl-inner-cont{
    width: 100%;
    height: 80%;
    border: 2px solid #00467a;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    justify-content: start;
    align-items: start;
    flex-direction: column;
    gap: 10px;
}

.tagl-heading-cont{
    width: 100%;
    height: 40px;
    background-color: #00467a;
    display: flex;
    justify-content: start;
    align-items: center;
    padding-left: 20px;
}

.tagl-heading-cont p{
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
}

.tagl-inp-cont {
    width: 100%;
    display: flex;
    justify-content: space-between; /* Left inputs & right button */
    align-items: center;
    padding: 20px;
    gap: 20px; /* space between inputs */
    box-sizing: border-box;
}

/* Left inputs container */
.tagl-inp-left {
    display: flex;
    gap: 10px; /* space between input/select */
}

/* Inner input + label container */
.tagl-inp-inner {
    display: flex;
    align-items: center;
    border-radius: 5px; /* rounded corners for container */
    overflow: hidden;
    border: 1px solid #91c63f; /* outer border */
}

/* Label */
.tag-inp-lable-cont {
    height: 35px;
    padding: 0 8px;
    background-color: #91c63f;
    display: flex;
    justify-content: center;
    align-items: center;
}

.tag-inp-lable-cont p {
    font-size: 0.8rem;
    font-weight: 600;
    color: #fff;
    margin: 0;
}

/* Input / Select */
.tagl-inp-cont input, 
.tagl-inp-cont select {
    width: 250px;
    height: 35px;
    border: none; /* no border */
    padding: 0 8px;
    outline: none; /* no outline on focus */
    border-radius: 0 5px 5px 0; /* rounded right corners */
    box-sizing: border-box;
}

/* Focus state: no border */
.tagl-inp-cont input:focus,
.tagl-inp-cont select:focus {
    outline: none;
    box-shadow: none;
    border: none;
}

/* Button */
.tagl-inp-cont button {
    height: 35px;
    width: 250px;
    padding: 0 15px;
    background-color: #00467a;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.2s;
}

.tagl-inp-cont button:hover {
    background-color: #91c63f;
}

.tagl-hr{
    width: 100%;
    height: 1px;
    background-color: #00467a;
}

.tagl-tabl-cont {
    width: 100%;
    max-height: 400px;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: start;
}

.tagl-tabl-inner {
    width: 100%;
    height: 250px;
    max-height: 300px; /* Scroll height */
    overflow-y: auto;
    overflow-x: auto;   /* Horizontal scroll if needed */
    border: 2px solid #91c63f;
}

.tagl-table-nine {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    
}

/* Center all text and add borders */
.tagl-table-nine th,
.tagl-table-nine td {
    border-bottom: 1px solid #91c63f;
    text-align: center;
    vertical-align: middle;
    padding: 5px;
    font-size: 0.8rem;
    height: 35px;
}

/* Sticky header with explicit top & bottom borders */
.tagl-table-nine thead th {
    color: #fff;
    font-size: 0.8rem;
    font-weight: 600;
    position: sticky;
    top: 0;
    background-color: #91c63f;
}

/* Fixed widths for first two columns */
.tagl-table-nine th:nth-child(1),
.tagl-table-nine td:nth-child(1),
.tagl-table-nine th:nth-child(2),
.tagl-table-nine td:nth-child(2) {
    width: 100px;
}

/* order repost css */

.od-re-main-cont{
    width: 100%;
    height: calc(100vh - 80px);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    overflow: hidden;
}

.od-re-inner{
    width: 100%;
    height: 100%;
    border: 2px solid #00467a;
    border-radius: 10px;
    display: flex;
    justify-content: start;
    align-items: start;
    flex-direction: column;
    overflow: hidden;
    gap: 10px;
}

.od-re-heading-cont{
    width: 100%;
    height: 40px;
    background-color: #00467a;
    display: flex;
    justify-content: start;
    align-items: center;
    padding-left: 20px;
}

.od-re-heading-cont p{
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
}

.od-re-action-cont{
    width: 100%;
    height: auto;
    padding-left: 20px;
    padding-right: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.od-re-left-cont{
    width: 50%;
    height: auto;
    display: flex;
    justify-content: start;
    align-items: center;
}

.od-re-right-cont{
    width: 50%;
    height: auto;
    display: flex;
    justify-content: end;
    align-items: center;
    gap: 30px;
}

.od-re-date-filter {
    position: relative;
    display: inline-block;
    margin: 10px 0;
}

#od-re-date-range {
    width: 250px;
    height: 35px;
    padding: 8px; /* right padding for icon */
    font-size: 0.8rem;
    border: 2px solid #91c63f;
    border-radius: 5px;
    background-color: #f9fff9;
    color: #333;
    cursor: pointer;
    transition: 0.3s all;
    font-weight: 600;
}

#od-re-date-range:hover {
    border-color: #91c63f;
    background-color: #f0fff0;
}

#od-re-date-range:focus {
    outline: none;
    border-color: #3e8e41;
    box-shadow: 0 0 8px rgba(62, 142, 65, 0.4);
}

/* Calendar Icon */
.od-re-calendar-icon {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    color: #91c63f;
    pointer-events: none; /* click passes to input */
}

.od-re-toggle-label {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
    font-family: Arial, sans-serif;
}

/* Hide default checkbox */
.od-re-toggle-label input {
    display: none;
}

/* Slider (toggle switch) */
.od-re-toggle-slider {
    position: relative;
    width: 50px;
    height: 26px;
    background-color: #ccc;
    border-radius: 13px;
    margin-right: 10px;
    transition: 0.3s;
}

.od-re-toggle-slider::before {
    content: "";
    position: absolute;
    width: 22px;
    height: 22px;
    left: 2px;
    top: 2px;
    background-color: white;
    border-radius: 50%;
    transition: 0.3s;
}

/* Checked state */
.od-re-toggle-label input:checked + .od-re-toggle-slider::before {
    transform: translateX(24px);
}

.od-re-toggle-label input:checked + .od-re-toggle-slider {
    background-color: #91c63f;
}

/* Text */
.od-re-toggle-text {
    font-size: 0.8rem;
    color: #333;

}


.od-re-export-dropdown {
    position: relative;
    display: inline-block;
    font-family: Arial, sans-serif;
}

.od-re-export-dropdown select {
    appearance: none; /* hide default arrow */
    -webkit-appearance: none;
    -moz-appearance: none;
    border: 2px solid #91c63f;
    border-radius: 5px;
    padding: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    background-color: #f9fff9;
    color: #333;
    cursor: pointer;
    outline: none;
    width: 160px;
    height: 35px;
}

.od-re-export-dropdown::after {
    content: "тЦ╝"; /* custom arrow */
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: #91c63f;
    font-size: 12px;
}

.od-re-export-dropdown select:hover {
    border-color: #91c63f;
    background-color: #f0fff0;
}

.od-re-export-dropdown select:focus {
    border-color: #91c63f;
    box-shadow: 0 0 6px rgba(62,142,65,0.4);
}

.od-re-filter-cont {
    position: relative;
    display: inline-block;
}

#od-re-filter-btn {
    padding: 8px;
    border: 2px solid #91c63f;
    border-radius: 5px;
    background-color: #f9fff9;
    color: #333;
    cursor: pointer;
    font-size: 0.8rem;
    font-weight: 600;
    transition: 0.3s all;
    width: 150px;
    height: 35px;
}

#od-re-filter-btn:hover {
    background-color: #f0fff0;
    border-color: #91c63f;
}

.od-re-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* center align */
    width: 60%;
    height: auto;
    background-color: #fff;
    border: 2px solid #91c63f;
    border-radius: 10px;
    box-shadow: 0 6px 20px rgba(0,0,0,0.25);
    z-index: 1000;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Header */
.od-re-popup-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #91c63f;
    color: #fff;
    padding: 12px 18px;
    font-size: 18px;
    font-weight: bold;
}

.od-re-popup-title {
    margin: 0;
}

.od-re-popup-close {
    font-size: 22px;
    cursor: pointer;
    font-weight: bold;
    transition: 0.2s;
}

.od-re-popup-close:hover {
    color: #ffcccc;
}

/* Body */
.od-re-popup-body {
    flex: 1;
    padding: 20px;
    font-size: 14px;
    color: #333;
    overflow-y: auto; /* scroll if content big */
}

/* Optional overlay behind popup */
.od-re-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.4);
    z-index: 999;
}

.od-re-popup-inner{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: start;
    align-items: start;
    flex-direction: column;
    gap: 30px;
}

.od-re-inner-pop-1st{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: center;
    align-items: start;
    gap: 20px;
}



.od-re-search-cx label{
    width: 20%;
    height: 35px;
    background-color: #91c63f;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #fff;
}

.od-re-search-cx input, .od-re-search-cx select{
    width: 80%;
    height: 35px;
    border-bottom-right-radius: 5px;
    border-top-right-radius: 5px;
    border: 1px solid #91c63f;
    padding: 8px;
}

.od-re-inner-pop-2nd{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: start;
    align-items: center;

}


.od-re-search-cx2{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: start;
    align-items: center;

}

.od-re-search-cx2 label{
    width: 10%;
    height: 35px;
    background-color: #91c63f;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #fff;
}

.od-re-search-cx2 input, .od-re-search-cx2 select{
    width: 90%;
    height: 35px;
    border-bottom-right-radius: 5px;
    border-top-right-radius: 5px;
    border: 1px solid #91c63f;
    padding: 8px;
}

.od-re-inner-pop-3rd{
    width: 100%;
    height: 35px;
    margin: auto;
    display: flex;
    justify-content: end;
    align-items: center;
    gap: 30px;
    padding-right: 20px;
}

.od-re-inner-pop-3rd button{
    width: 250px;
    height: 35px;
    border-radius: 5px;
    border: none;
    background-color: #91c63f;
    color: #fff;
    padding: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
}

.od-re-inner-pop-3rd button:hover{
    background-color: #00467a;
}
.od-re-tbl-cont {
    width: 100%;
    height: 70%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.od-re-tbl-inner {
    width: 100%;
    height:100%;              /* vertical scroll ke liye height fix */
    border: 2px solid #00467a;
    border-radius: 15px;        /* ЁЯСИ radius container par */
    overflow: hidden;           /* scrollbars clip ke liye */
    position: relative;
}

.od-re-tbl-scroll {
    width: 100%;
    height: 100%;
    overflow: auto;             /* ЁЯСИ scrollable wrapper alag */
}

/* Default = Expand Mode */
.od-re-tbl-inner table {
    border-collapse: collapse;
    font-size: 0.9rem;
    table-layout: fixed;           
    width: max-content;   /* expand default */
}

.od-re-tbl-inner thead th {
    position: sticky;
    top: 0;
    background-color: #00467a;
    color: #fff;
    font-weight: 600;
    height: 35px;
    z-index: 5;
    text-align: center;       /* expand mode me start */
    vertical-align: middle;
    padding: 8px;
}

.od-re-tbl-inner tfoot td {
    position: sticky;
    bottom: 0;
    background: #eee;
    font-weight: bold;
    height: 40px;
    z-index: 5;
    text-align: center;
    vertical-align: middle;
}

.od-re-tbl-inner tbody td {
    border-bottom: 1px solid #91c63f;
    height: auto;                  /* height auto for wrapping */
    text-align: center;             /* expand mode me start */
    vertical-align: middle;
    overflow: hidden;              
    text-overflow: clip;           /* ellipsis hata diya */
    white-space: normal;           /* wrap enable */
    word-wrap: break-word;         /* long words wrap */
    overflow-wrap: break-word;     /* modern browsers ke liye wrap */
    padding: 10px 20px;            /* top-bottom 10px, left-right 20px */
    max-width: 200px; 
    font-size: 0.8rem;
    color: #777;
}

.od-re-tbl-inner tbody tr:hover {
    background-color: rgb(223, 240, 216);
    cursor: pointer;           /* optional: cursor pointer on hover */
}

/* ========================= */
/* ЁЯФ╣ Compact Mode Override  */
/* ========================= */
.od-re-compact .od-re-tbl-inner table {
    width: 100%; /* full width */
}

.od-re-compact .od-re-tbl-inner thead th,
.od-re-compact .od-re-tbl-inner tbody td {
    text-align: center !important; /* compact me center */
}

.od-re-search-cx {
    width: 50%;
    height: auto;
    display: flex;
    position: relative; /* make child absolute relative to this container */
    justify-content: start;
    align-items: flex-start;
}

.od-re-customer-suggestions {
    position: absolute; /* now relative to .od-re-search-cx */
    top: 100%; /* right below the input */
    left: 0;
    width: 100%; /* match input width */
    background: #fff;
    border: 1px solid #ccc;
    max-height: 200px;
    overflow-y: auto;
    z-index: 999;
    display: none;
}

.od-re-customer-suggestions div {
    padding: 8px;
    cursor: pointer;
    
}

.od-re-customer-suggestions div:hover {
    background-color: #f0f0f0;
}

/* whatsapp notification css */

.wn-main-cont{
    width: 100%;
    height: calc(100vh - 80px);
    padding: 20px;
    display: flex;
    justify-content: start;
    align-items: start;
    gap: 20px;
}

.wn-inner-cont{
    width: 100%;
    height: 100%;
    border: 2px solid #00467a;
    border-radius: 10px;
    display: flex;
    justify-content: start;
    align-items: start;
    flex-direction: column;
    overflow: hidden;
    gap: 10px;
    background-color: #eee;
}

.wn-heading-cont{
    width: 100%;
    height: 40px;
    background-color: #00467a;
    display: flex;
    justify-content: start;
    align-items: center;
    padding-left: 20px;
}

.wn-heading-cont p{
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
}

.wn-body-cont{
    width: 100%;
    height: calc(100% - 40px);
    display: flex;
    justify-content: space-between;
    align-items: start;
}

.wn-body-inner-cont1{
    width: 60%;
    height: 100%;
    overflow-y: auto;
}

.wn-noti-cont{
    width: 100%;
    height: auto;
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: start;
    flex-direction: column;
    padding: 10px;
    border-radius: 10px;
    border: 2px solid #91c63f;
    gap: 10px;
    
}

.wn-scroller-cont{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: start;
    align-items: center;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
}

.wn-top-cont{
    display: flex;
    justify-content: start;
    align-items: start;
    width: 100%;
    height: auto;
    gap: 20px;
    cursor: pointer;
}
.wn-icon-cont{
    width: 50px;
    height: 50px;
}

.wn-icon-cont img{
    width: 50px;
    height: 50px;
}

.wn-body-heading-cont{
    width: calc(100% - 240px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: start;
    height: 50px;
}

.wn-heading{
    font-size: 0.8rem;
    font-weight: 600;
}

.wn-heading-sub{
    font-size: 0.8rem;
    padding-top: 5px;
}

.wn-action-cont{
    width: 200px;
    height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Container for toggle */
.wn-toggle {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 28px;
}

/* Hide default checkbox */
.wn-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* Slider */
.wn-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: 0.4s;
  border-radius: 28px;
}

/* Circle */
.wn-slider:before {
  position: absolute;
  content: "";
  height: 22px;
  width: 22px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: 0.4s;
  border-radius: 50%;
}

/* Checked state */
.wn-toggle input:checked + .wn-slider {
  background-color: #91c63f;
}

.wn-toggle input:checked + .wn-slider:before {
  transform: translateX(22px);
}

.wn-status-cont{
    width: 50%;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.wn-status {
    display: inline-block;            /* text ke around fit ho jaye */
    padding: 6px 22px;                /* thoda aur spacious */
    opacity: 0.9;                     /* thodi transparency */
    border-radius: 12px;              /* smooth corners */
    box-shadow: 0 4px 10px rgba(0,0,0,0.2); /* subtle shadow */
    transition: transform 0.2s, box-shadow 0.2s; /* hover effect smooth */
}

.wn-status.active {
    background-color: #91c63f;
   
}

.wn-status.inactive {
    background-color: red;
    
}


.wn-status p {
    margin: 0;                        /* remove default margin */
    font-size: 0.85rem;
    font-weight: 700;
    color: #fff;                       /* white text for contrast */
    text-align: center;
    letter-spacing: 0.5px;
}

.wn-bottom-cont{
    display: flex;
    justify-content: end;
    align-items: end;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

.wn-bottom-cont textarea{
    width: 100%;
    height: 150px;
    border: 1px solid #91c63f;
    border-radius: 10px;
    padding: 10px;
}

.wn-noti-cont button{
    width: 100px;
    height: 35px;
    background-color: #91c63f;
    border: none;
    border-radius: 5px;
    color: #fff;
}

.wn-body-inner-cont2{
    
    width: 35%;
    height: 100%;
    padding: 20px;
    display: flex;
    justify-content: start;
    align-items: start;
    flex-direction: column;
    
}

.wn-cont2-inner{
    width: 100%;
    height: 100%;
    border: 2px solid #00467a;
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    justify-content: start;
    align-items: start;
    flex-direction: column;
    gap: 10px;
}

.wn-cont2-heading{
    width: 100%;
    height: 40px;
    background-color: #00467a;
    display: flex;
    justify-content: start;
    align-items: center;
    padding-left: 20px;
}

.wn-cont2-heading p{
    font-size: 0.8rem;
    font-weight: 600;
    color: #fff;
}

.wn-variable-cont {
    width: 100%;
    max-height: 100%; /* рдЬрд░реВрд░рдд рдХреЗ рд╣рд┐рд╕рд╛рдм рд╕реЗ height set рдХрд░реЛ */
    overflow-y: auto;
    border-radius: 8px;

}

.wn-variable-cont table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed; /* columns ke liye fixed layout */
}

.wn-variable-cont thead {
    position: sticky;
    top: 0;
    background: #00467a;
    z-index: 2;
    color: #fff;
}

.wn-variable-cont th,
.wn-variable-cont td {
    text-align: left;
    padding: 8px;
    height: 40px;
    vertical-align: middle;
    font-size: 0.8rem;
}

.wn-variable-cont th:first-child,
.wn-variable-cont td:first-child {
    width: 35%;
    padding-left: 20px;
}

.wn-variable-cont th:last-child,
.wn-variable-cont td:last-child {
    width: 65%;
}

.wn-variable-cont tbody tr:nth-child(even) {
    background: #fafafa;
}

.wn-variable-cont button {
    padding: 6px 12px;
    border: none;
    background: #007bff;
    color: #fff;
    border-radius: 6px;
    cursor: pointer;
}

.wn-variable-cont button:hover {
    background: #0056b3;
}


/* order status css */

.od-st-main-cont{
    width: 100%;
    height: calc(100vh - 80px);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
}

.od-st-inner-cont{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: start;
    align-items: start;
    flex-direction: column;
    gap: 10px;
    border-radius: 10px;
    overflow: hidden;
    border: 2px solid #00467a;
}

.od-st-heading-cont{
    width: 100%;
    height: 40px;
    background-color: #00467a;
    display: flex;
    justify-content: start;
    align-items: center;
    padding-left: 20px;
}

.od-st-heading-cont p{
    font-size: 0.8rem;
    font-weight: 600;
    color: #fff;
}

.od-st-1st-fltr-cont {
    width: 100%;
    display: flex;
    gap: 10px; /* boxes ke beech gap (optional) */
    padding-left: 20px;
    padding-right: 20px;
}

.od-st-1st-inner-flrt {
    height: 35px;
    flex: 1;                /* sab equal width */
    text-align: center;           /* spacing (optional) */
    display: flex;
            /* jitna content utni hi width */
    white-space: nowrap;
}

.od-cx-name-heading {
    flex: 0 0 auto;                  /* text jitna ho utna space */
    white-space: nowrap;             /* ek hi line me text */
    background-color: #00467a;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px;               /* thoda balanced padding */
    border: 1px solid #00467a;
    border-right: none;              /* border overlap na ho input ke sath */
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

.od-cx-name-heading p {
    font-size: 0.85rem;
    font-weight: 600;
    color: #fff;
    margin: 0;                       /* default margin remove */
}

.od-st-1st-inner-flrt input, .od-st-1st-inner-flrt select {
    flex: 1;                         /* bachi hui width input le */
    padding: 6px 10px;
    box-sizing: border-box;
    border: 1px solid #00467a;
    border-left: none;               /* label ke border se double line na bane */
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    outline: none;                   /* focus outline remove */
}

.od-st-suggestion-box {
    position: absolute;
    top: 100%;                  /* input ke niche */
    left: 0;
    width: 100%;                /* parent div ke equal width */
    background: #fff;
    border: 1px solid #00467a; /* input ke border ke saath match kare */
    border-top: none;           /* input ke niche seamlessly attach ho */
    max-height: 200px;          /* scroll ke liye */
    overflow-y: auto;
    z-index: 9999;
    display: none;              /* by default hide */
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
    box-sizing: border-box;
}

.od-st-suggestion-item {
    padding: 6px 10px;          /* input padding ke similar */
    cursor: pointer;
    font-size: 0.85rem;
    background-color: #fff;
    text-align: start;
    border-bottom: 1px solid #00467a;
}

.od-st-suggestion-item:hover {
    background-color: #f0f0f0;
}


#od-st-order-from{
    border-radius: 0px;
    width: 40%;
}

#od-st-order-to{
    width: 40%;
}

.od-st-table-main-cont{
    width: 100%;
    height: calc(100% - 150px);
    padding: 10px;
}

.od-st-table-inner{
    width: 100%;
    height: 100%;
    border: 1px solid #00467a;
    border-radius: 10px;
    display: flex;
    justify-content: start;
    align-items: start;
    flex-direction: column;
    gap: 10px;
    overflow: hidden;
}

.od-st-tbl-heading{
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 10px;
    padding-right: 10px;
    background-color: #00467a;
}

.od-st-tbl-heading p{
    font-size: 0.8rem;
    font-weight: 600;
    color: #fff;
}

.od-st-down{
    width: auto;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.od-st-down{
    font-size: 1.5rem;
    color: #fff;
    cursor: pointer;
}

.od-st-report-details{
    width: 100%;
    height: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 10px;
    padding-right: 10px;
}

.od-st-report-details p{
    font-size: 0.7rem;
}

.od-st-tbl-cont {
  width: 100%;
  height: 400px;       /* jitna chahiye utna set karo */
  overflow-y: auto;    /* body scroll hogi */
  border: 1px solid #ccc;
}

.tbl {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto;  /* columns text ke hisab se adjust honge */
  text-align: center;
}

.tbl th, .tbl td {
  padding: 5px;
  border: 1px solid #ddd;
  font-size: 0.8rem;
  width: auto;
}

/* Sticky header */
.tbl thead th {
  position: sticky;
  top: 0;
  background: #00467a;
  color: #fff;
  z-index: 2;
 
}

/* Sticky footer */
.tbl tfoot td {
  position: sticky;
  bottom: 0;
  background: #f5f5f5;
  font-weight: 600;
  z-index: 1;

}

#ordersTable tbody tr:nth-child(even) {
    background-color: #f2f2f2; /* light gray for even rows */
}

#ordersTable tbody tr:nth-child(odd) {
    background-color: #ffffff; /* white for odd rows */
}


/* garment price css */

.gp-main-cont{
    width: 100%;
    height: calc(100vh - 80px);
    display: flex;
    justify-content: start;
    align-items: start;
    padding: 20px;
}


.gp-popup-inner{
    width: 99%;
    height: 99%;
    background-color: #fff;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: start;
    flex-direction: column;
    border: 2px solid #00467a;
    overflow: hidden;
}

.gp-pop-heading-cont{
    width: 100%;
    height: 40px;
    background-color: #00467a;
    display: flex;
    justify-content: start;
    align-items: center;
    padding-left: 20px;
}

.gp-pop-heading-cont p{
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
}

.gp-tab-body{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-left: 20px;
    padding-right: 20px;
}

.gp-price{
    width: 80px;
    height: 25px;
    text-align: center;
    font-size: 0.8rem;
    font-weight: 600;
    border: 2px solid #00467a;
    border-radius: 3px;
}

.dp-add-garment{
    width: 90px;
    height: 120px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid #00467a;
    background-color: #eee;
}

.add-btn{
    width: 90px;
    height: 120px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;

    /* Visual with #91c63f theme */
    background: linear-gradient(180deg, #91c63f 0%, #6fa32d 100%);
    color: white;
    border: none;
    border-radius: 12px;
    box-shadow: 0 8px 18px rgba(145,198,63,0.35), inset 0 -2px 6px rgba(255,255,255,0.08);
    cursor: pointer;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    transition: transform 160ms cubic-bezier(.2,.9,.3,1), box-shadow 160ms;
    -webkit-tap-highlight-color: transparent;
  }

  .add-btn .plus{
    font-size: 44px;
    line-height: 1;
    letter-spacing: 0;
    transform: translateY(-2px);
    text-shadow: 0 2px 6px rgba(0,0,0,0.18);
    font-weight: 700;

    width: 56px;
    height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(255,255,255,0.15);
    box-shadow: inset 0 -2px 4px rgba(0,0,0,0.12);
  }

  .add-btn .label{
    font-size: 13px;
    font-weight: 600;
    opacity: 0.98;
    padding: 0 6px;
  }

  .add-btn:hover{
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 18px 30px rgba(145,198,63,0.45);
  }

  .add-btn:active{
    transform: translateY(0) scale(0.99);
    box-shadow: 0 6px 14px rgba(111,163,45,0.45);
  }

  .add-btn:focus{
    outline: 3px solid rgba(145,198,63,0.35);
    outline-offset: 4px;
  }

  /* Overlay */
  .gp-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.55);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 1000;
  }

  /* Popup Box */
  .gp-popup {
    width: 90%;
    height: 90%;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 10px 28px rgba(0,0,0,0.28);
    position: relative;
    padding: 20px;
    display: flex;
    flex-direction: column;
  }

  /* Close Button */
  .gp-close {
    position: absolute;
    top: 12px;
    right: 16px;
    font-size: 28px;
    font-weight: bold;
    color: #444;
    cursor: pointer;
    transition: color 0.2s;
  }
  .gp-close:hover { color: #91c63f; }

  /* Title + Content */
  .gp-title {
    margin: 0 0 10px 0;
    font-size: 20px;
    font-weight: 600;
    color: #222;
  }
   .gp-content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 10px;
    box-sizing: border-box;
  }

  /* Search row */
  .gp-search {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 14px;
  }

  /* Garment list row (left to right) */
.gp-list-row {
  flex: 1 1 auto;
  border: 1px solid #eee;
  border-radius: 12px;
  padding: 12px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;   /* тЬЕ allow wrapping */
  gap: 16px;
  background: #fafafa;
  overflow-y: auto;  /* тЬЕ agar zyada rows ho to scroll */
  overflow-x: hidden; /* тЬЕ no horizontal scroll */
  max-height: 400px; /* optional: limit height */
}


/* Garment card */
.gp-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 100px;
  height: 110px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  font-size: 14px;
  color: #333;
  transition: all 0.2s ease-in-out;
  cursor: pointer;
  padding: 8px;
}
.gp-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 12px rgba(0,0,0,0.15);
}

/* Checkbox overlay */
.gp-checkbox {
  position: absolute;
  top: 6px;
  left: 6px;
  transform: scale(1.2);
  cursor: pointer;
}

/* Highlight on select */
.gp-checkbox:checked + .gp-icon,
.gp-checkbox:checked ~ .gp-name {
  filter: brightness(0.9);
}


.gp-item:has(.gp-checkbox:checked) {
  border: 2px solid #91c63f;
  background: #f6fdf0;
}

/* Icon & Name */
.gp-icon {
  width: 50px;
  height: 50px;
  object-fit: contain;
  margin-bottom: 6px;
}
.gp-name {
  font-size: 13px;
  font-weight: 500;
  text-align: center;
}

/* Footer row */
.gp-footer-row {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: auto;
}
.gp-btn {
  padding: 10px 20px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  transition: all 0.2s ease-in-out;
}
.gp-close-btn {
  background: #f1f1f1;
  color: #333;
}
.gp-close-btn:hover {
  background: #ddd;
}
.gp-add-btn {
  background: linear-gradient(135deg, #91c63f, #6fa32d);
  color: #fff;
  box-shadow: 0 4px 10px rgba(145,198,63,0.35);
}
.gp-add-btn:hover {
  background: linear-gradient(135deg, #6fa32d, #5c8f26);
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(145,198,63,0.45);
}

/* Open button */
.gp-open-btn {
  padding: 12px 24px;
  background: linear-gradient(135deg, #91c63f, #6fa32d);
  border: none;
  border-radius: 12px;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  box-shadow: 0 4px 10px rgba(145,198,63,0.35);
}
.gp-open-btn:hover {
  background: linear-gradient(135deg, #6fa32d, #5c8f26);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(145,198,63,0.45);
}

.gp-item.disabled {
    opacity: 0.5;
    pointer-events: none; /* Prevent clicking the label */
}

/* sales and delivery css */

.sd-main-cont{
    width: 100%;
    height: calc(100vh - 80px);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

.sd-inner-cont{
    width: 100%;
    height: 100%;
    border-radius: 10px;
    border: 2px solid #00467a;
    overflow: hidden;
    display: flex;
    justify-content: start;
    align-items: center;
    flex-direction: column;
    gap: 10px;
}

.sd-heading-cont{
    width: 100%;
    height: 40px;
    background-color: #00467a;
    display: flex;
    justify-content: start;
    align-items: center;
    padding-left: 20px;
}

.sd-heading-cont p{
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
}

.sd-body-cont{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: start;
    align-items: start;
    padding: 10px;
    flex-direction: column;
    gap: 10px;
}

.sd-1st-filter-cont { 
    width: 100%; 
    display: flex; 
    gap: 10px; /* boxes ke beech gap (optional) */ 
    
} 

/* Default filter box */
.sd-1st-filter-inner-cont { 
    height: 35px; 
    flex: 1;
    text-align: start;  
    display: flex; 
    white-space: nowrap; 
    border: 1px solid #00467a;
    border-radius: 5px;
    
}

/* тЬЕ Only for Customer Search box */


.sd-customer-search-wrapper {
    position: relative; /* suggestion рдХреЛ рд╕рд╣реА рдЬрдЧрд╣ рджрд┐рдЦрд╛рдиреЗ рдХреЗ рд▓рд┐рдП */
}

.sd-suggestions-box {
    position: absolute;
    top: 100%; /* input рдХреЗ рдиреАрдЪреЗ */
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #00467a;
    border-radius: 5px;
    max-height: 200px;
    overflow-y: auto;
    display: none;
    z-index: 1000;
}

.sd-suggestions-box div {
    padding: 6px 10px;
    cursor: pointer;
    text-align: left;
    border-bottom: 1px solid #eee;
}

.sd-suggestions-box div:hover {
    background: #f0f8ff;
}


.sd-filter-heading-cont {
    background: #00467a;       /* Date ke liye background color */
    padding: 0 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-right: 1px solid #ccc; /* input se separate karne ke liye */
    height: 100%;
    width: 20%;
}

.sd-filter-heading-cont p {
    margin: 0;
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    white-space: nowrap;
}

.sd-1st-filter-inner-cont input, .sd-1st-filter-inner-cont select{
    flex: 1;
    height: 100%;
    border: none;
    outline: none;
    font-size: 14px;
    padding: 0 10px;
    background: #fff;
    box-sizing: border-box;
}

.sd-filter{
    width: 30% !important;
}

.sd-st-tbl-cont {
  width: 100%;
  height: 400px;       /* jitna chahiye utna set karo */
  overflow-y: auto;    /* body scroll hogi */
  border: 1px solid #ccc;
}

.sd-suggestions-box {
    position: absolute;
    top: 100%; /* input ke niche */
    left: 0;
    width: 100%; /* parent ke equal width */
    background: #fff;
    border: 1px solid #ccc;
    border-top: none;
    max-height: 200px;
    overflow-y: auto;
    z-index: 9999;
    
}

.sd-suggestions-box div {
    padding: 8px;
    cursor: pointer;
}

.sd-suggestions-box div:hover {
    background: #f0f0f0;
}


/* edit order page css */
/* 🔹 Main Container */
.edit-order-main-cont {
    width: 100%;
    height: calc(100% - 60px);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    background: #f8f9fa;
}

/* 🔹 Inner Card */
.edit-order-inner-cont {
    width: 400px;
    background: #fff;
    padding: 25px 30px;
    border-radius: 14px;
    box-shadow: 0px 4px 15px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    gap: 15px;
    transition: transform 0.2s ease;
}
.edit-order-inner-cont:hover {
    transform: translateY(-3px);
}

/* 🔹 Heading */
.edit-order-heading {
    font-size: 1.3rem;
    font-weight: 600;
    color: #00467a;
    text-align: center;
    margin-bottom: 10px;
}

/* 🔹 Radio Buttons */
.edit-radio-btn-cont {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.edit-radio-btn-cont input[type="radio"] {
    display: none;
}
.edit-radio-btn-cont label {
    background: #f1f3f5;
    padding: 12px 15px;
    border-radius: 10px;
    cursor: pointer;
    border: 2px solid transparent;
    font-weight: 500;
    transition: all 0.3s ease;
}
.edit-radio-btn-cont input[type="radio"]:checked + label {
    background: #91c63f;
    color: #fff;
    border-color: #00467a;
}
.edit-radio-btn-cont label:hover {
    background: #e9ecef;
}

/* 🔹 Order ID Input */
.edit-order-no-cont {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.edit-order-no-cont label {
    font-weight: 500;
    font-size: 0.9rem;
    color: #00467a;
}
.edit-order-no-cont input {
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid #ced4da;
    outline: none;
    font-size: 0.95rem;
    transition: border 0.2s ease, box-shadow 0.2s ease;
}
.edit-order-no-cont input:focus {
    border-color: #91c63f;
    box-shadow: 0px 0px 6px rgba(145,198,63,0.5);
}

/* 🔹 Button */
.edit-order-inner-cont button {
    background: #00467a;
    color: #fff;
    padding: 12px;
    border: none;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    margin-top: 10px;
    transition: background 0.3s ease, transform 0.2s ease;
}
.edit-order-inner-cont button:hover {
    background: #91c63f;
    transform: translateY(-2px);
}
.edit-order-inner-cont button:active {
    transform: scale(0.97);
}


/* apply coupon css */

#apply-coupon{
    width: 200px;
    height: 30px;
    border: none;
    border-radius: 3px;
    background-color: #00467a;
    color: #fff;
}

#apply-coupon:hover{
    background-color: #91c63f;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(145, 198, 63, 0.35);
}

/* Overlay */
#lv-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    display: none;
    z-index: 9999;
}

/* Popup box */
#lv-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 450px;
    height: 700px;
    background: #fff;
    transform: translate(-50%, -50%);
    display: none;
    z-index: 9999;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    overflow: visible;   /* 🔥 UPDATED */
}

/* Header */
.lv-popup-header {
    background: #91c63f;
    color: #fff;
    padding: 10px;
    font-size: 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Close button */
.lv-close-btn {
    background: none;
    border: none;
    color: #fff;
    font-size: 18px;
    cursor: pointer;
}

/* Body */

    .lv-popup-body {
    padding: 10px;
    font-size: 13px;
    height: calc(100% - 50px);
    overflow-y: auto;
    overflow-x: visible;   /* 🔥 ADD THIS */
    -webkit-overflow-scrolling: touch;
}


/* Manual coupon dashed style */
.lv-manual-style {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 2px dashed #d6dbe5;
    padding: 10px;
    border-radius: 10px;
    background: #fff;
}

.lv-manual-style input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 12px;
    font-weight: 600;
    color: #666;
}

.lv-manual-icon {
    font-size: 16px;
}

/* Divider */
.lv-divider {
    text-align: center;
    margin: 18px 0;
    position: relative;
    font-size: 11px;
    font-weight: 600;
    color: #999;
}

.lv-divider span {
    background: #fff;
    padding: 0 10px;
}

.lv-divider::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: #e0e0e0;
    z-index: -1;
}

/* Coupon card */
.lv-coupon-card {
    border: 2px dashed #d6dbe5;   /* outline */
    background: #fff;
    border-radius: 14px;
    padding: 14px;
    margin-bottom: 18px;
    position: relative;
    box-shadow: 0 4px 14px rgba(0,0,0,0.06);
}

/* Left half circle cut */
.lv-coupon-card::before {
    content: "";
    position: absolute;
    left: -10px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    background: #f5f5f5;   /* page / popup bg color */
    border-radius: 50%;
    border-right: 2px dashed #d6dbe5;
}

/* Right half circle cut */
.lv-coupon-card::after {
    content: "";
    position: absolute;
    right: -10px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    background: #f5f5f5;   /* page / popup bg color */
    border-left: 2px dashed #d6dbe5;
}

.lv-coupon-left h3 {
    margin: 6px 0;
    color: #2c5f2d;
    font-size: 2rem;
}

.lv-badge {
    font-size: 1rem;
    padding: 3px 8px;
    border-radius: 6px;
    font-weight: 700;
}

.lv-badge.percent {
    background: #e9f7ec;
    color: #2ea44f;
}

.lv-badge.flat {
    background: #fff3e0;
    color: #f57c00;
}

.lv-code {
    font-size: 11px;
    color: #666;
}

.lv-coupon-right {
    position: absolute;
    top: 14px;
    right: 14px;
}

.lv-apply-btn {
    background: #91c63f;
    border: none;
    color: #fff;
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
}

.lv-coupon-info {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
    font-size: 11px;
    margin-top: 10px;
    color: #555;
}

.lv-manual-coupon{
    position:relative;
}

.lv-suggestions{
    border:1px solid #ddd;
    border-radius:6px;
    margin-top:6px;
    display:none;
    max-height:150px;
    overflow-y:auto;
    background:#fff;
    position:absolute;
    z-index: 99999; 
    top:45px;
    left:0;
    width:100%;
}

.lv-suggestion-item{
    padding:8px 10px;
    cursor:pointer;
    font-size:12px;
}

.lv-suggestion-item:hover{
    background:#f2f2f2;
}

.applied-coupon {
    display: flex;
    gap: 10px;
    align-items: center;
}

.coupon-code {
    font-weight: 600;
}

.coupon-status {
    color: green;
    font-size: 12px;
}

.remove-coupon {
    background: none;
    border: none;
    color: red;
    cursor: pointer;
}

/* -------------------------------------------------------------
Schedule Delivery Page Css
------------------------------------------------------------- */

.sch-dlv-main-cont{
    width: 100%;
    height: calc(100% - 60px);
    display: flex;
    justify-content: start;
    align-items: start;
    flex-direction: column;
    
    
}

.sch-dlv-search-cont{
    width: 100%;
    height: 100px;
    border-bottom: 2px solid #e5e7eb;
    border-top: 2px solid #e5e7eb;
    display: flex;
    justify-content: start;
    align-items: center;
    flex-shrink: 0; /* important */
}

.sch-dlv-search-inner-cont{
    height: 100%;
    width: 70%;
    display: flex;
    justify-content: center;
    align-items: center;
    
}

.sch-dlv-search-inner-inp-cont{
    width: 90%;
    height: 50%;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    display: flex;
    justify-content: start;
    align-items: center;
    padding-left: 10px;
    padding-right: 10px;
}

.sch-dlv-search-icon{
    color: rgb(0 70 122 / 0.4);
    width: 20px;
}

.sch-dlv-search-input{
    width: calc(100% - 20px);
    height: 100%;
    border: none;

}


.sch-dlv-search-input:focus {
    outline: none;
    box-shadow: none;
    border-color: inherit; /* ya jo normal border color ho */
}

.sch-dlv-total-dlv{
    width: 15%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: end;
    flex-direction: column;
    padding-right: 20px;
}

.sch-dlv-total-dlv{
    font-size: 1rem;
    font-weight: 600;
    color: #94a3b8;
}

.sch-dlv-total-count{
    font-size: 1.4rem;
    font-weight: 600;
    color: #00467a;
}

.sch-dlv-total-dlv2{
    width: 15%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: start;
    flex-direction: column;
    padding-left: 20px;
}

.sch-dlv-total-dlv2{
    font-size: 1rem;
    font-weight: 600;
    color: #94a3b8;
}

.sch-dlv-total-revanue{
    font-size: 1.4rem;
    font-weight: 600;
    color: #91c63f;
}



.sch-dlv-search-line{
    width: 2px;
    height: 80%;
    background-color: #e5e7eb;
}

.sch-dlv-inner-cont{
    width: 100%;
    flex: 1;                /* remaining height le lega */
    overflow-y: auto; 
    padding: 30px;
    
}

.sch-dlv-heading-cont{
    width: 100%;
    height: 150px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    
}

.sch-dlv-inner-heading-cont{
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: start;
    gap: 10px;
}

.sch-dlv-heading{
    font-size: 1.6rem;
    font-weight: 600;
    color: #00467a; 
}

.sch-dlv-sub-heading{
    font-size: 0.8rem;
    color: #64748b;
}

.sch-dlv-inner-heading-btn-cont{
    display: flex;
    justify-content: end;
    align-items: center;
    gap: 20px;
}

#sch-dlv-fltr, .sch-dlv-status-filter{
    height: 40px;
    width: 250px;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
}

#sch-dlv-fltr:hover{
    border: 2px solid #91c63f;
}


.sch-dlv-btn{
    width: auto;
    height: 40px;
    background-color: #91c63f;
    color: #fff;
    border-radius: 10px;
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 10px;
    font-weight: 600;
    cursor: pointer;
}

#sch-dlv-btn:hover{
    background-color: #00467a;
}

.sch-dlv-card-cont{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: start;
    align-items: center;
    flex-direction: column;
    gap: 15px;
    padding-left: 30px;
    padding-right: 30px;

}

.sch-dlv-card{
    width: 100%;
    height: 170px;
    background-color: #91c63f;
    border-radius: 15px;
    padding-left: 5px;
}

.sch-dlv-inner-card{
    width: 100%;
    height: 170px;
    background-color: #fff;
    border-radius: 15px;
    border: 2px solid #e2e8f0;
    border-left: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sch-dlv-card-details-cont{
    width: 25%;
    height: 100%;
    padding: 20px;
    display: flex;
    justify-content: start;
    align-items: start;
    flex-direction: column;
    gap: 10px;
}

.sch-dlv-order-details-cont{
    width: 300px;
    height: auto;
    display: flex;
    justify-content: space-between;
    text-align: center;
}

.sch-dlv-order-id-badge{
    width: auto;
    height: 35px;
    background-color: #DBEAFE;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
}

.sch-dlv-od-id{
    font-size: 0.8rem;
    font-weight: 600;
    color: #00467a;
}

.sch-dlv-order-service-badge{
    width: auto;
    height: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    background-color: #00467a;
    border-radius: 10px;
}

.sch-dlv-od-service{
    font-size: 0.8rem;
    font-weight: 600;
    color: #fff;
}

#sch-dlv-customer-name{
    font-size: 1.2rem;
    font-weight: 600;
    color: #00467a;
}

.sch-dlv-cont-cont{
    display: flex;
    justify-content: start;
    align-items: start;
    gap: 10px;
}

.sch-dlv-call-icon{
    font-size: 1rem;
    color: #00467a;
}

.sch-dlv-cust-call{
    font-size: 1rem;
    color: #00467a;
}

.sch-dlv-clock-icon{
    font-size: 1rem;
    color: #91c63f;
}

.sch-dlv-atten-icon{
    font-size: 1rem;
    color: red;
}

.sch-dlv-cust-clock{
    font-size: 1rem;
    color: #64748b;
}

.sch-dlv-cust-delay{
    font-size: 1rem;
    color: red;
}

.sch-dlv-add-cont{
    width: 800px;
    height: 50px;
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 10px;
}

.sch-dlv-pin{
    color: #00467a;
    font-size: 1rem;
}

.sch-dlv-loca{
    font-size: 1rem;
    color: #475569;
}

.sch-dlv-bal-cont{
    width: 800px;
    height: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 20px;
    padding-right: 20px;
}

.sch-dlv-inner-bln-cont{
    width: 50%;
    height: auto;
    display: flex;
    justify-content: start;
    align-items: start;
    flex-direction: column;
    gap: 15px;
}

.sch-dlv-bln-text{
    font-size: 0.8rem;
    font-weight: 600;
    color: #94a3b8;
}

.sch-dlv-bln-amt{
    font-size: 1.4rem;
    color: red;
    font-weight: 600;
}

.sch-dlv-bln-paid{
    font-size: 1.4rem;
    color: #91c63f;
    font-weight: 600;
}

.sch-dlv-serv-amt{
    font-size: 1.4rem;
    color: #00467a;
    font-weight: 600;
}

.sch-dlv-per-details{
    width: 300px;
    height: 70px;
    border: 1px solid #91c63f;
    border-radius: 15px;
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 10px;
    padding: 10px;
}

.sch-dlv-name-logo{
    width: 50px;
    height: 50px;
    background-color: #91c63f;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.sch-dlv-name-details-cont{
    width: calc(100% - 70px);
}

.sch-dlv-logo{
    font-size: 1.4rem;
    color: #fff;
    
}

.sch-dlv-delivery-name{
    font-size: 1rem;
    font-weight: 600;
    color: #00467a;
}

.sch-dlv-time{
    font-size: 0.8rem;
    font-weight: 600;
    color: #91c63f;
    font-style: italic;
}

.sch-dlv-resch-btn-cont{
    width: 300px;
    height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sch-dlv-resch-btn{
    width: 140px;
    height: 50px;
    border: 1px solid #00467a;
    background-color: #fff;
    border-radius: 15px;
    color: #00467a;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
}

.sch-dlv-unassign-btn{
    width: 140px;
    height: 50px;
    border: 1px solid red;
    background-color: #fff;
    border-radius: 15px;
    color: red;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
}

.sch-dlv-resch-btn:hover{
    background-color: #00467a;
    color: #fff;
}

.sch-dlv-unassign-btn:hover{
    background-color: red;
    color: #fff;
}

.sch-dlv-assigne-btn{
    width: 300px;
    height: 50px;
    border: none;
    border-radius: 15px;
    background-color: #00467a;
    color: #fff;
    font-weight: 600;
    font-size: 0.8rem;
    cursor: pointer;
}

.sch-dlv-assigne-btn:hover{
    background-color: #91c63f;
}


.sch-dlv-overlay, .sch-dlv-overlay2{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.4);
    z-index: 999;
}

.sch-dlv-popup{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 500px;
    height: 600px;
    background: #fff;
    border-radius: 15px;
    z-index: 1000;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    font-family: Arial, sans-serif;
}

.sch-dlv-pop-header{
    width: 100%;
    height: 20%;
    background-color: #00467a;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
}

.sch-dlv-pop-heading{
    font-size: 1.4rem;
    font-weight: 600;
    color: #fff;
}

.sch-dlv-pop-sub-heading{
    font-size: 0.8rem;
    color: #fff;
    margin-top: 10px;
}

.sch-dlv-popup-close, .sch-dlv-popup-close2{
    width: 35px;
    height: 35px;
    border-radius: 100%;
    border: none;
    background-color: #ffffff33;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
}

.sch-dlv-popup-close:hover{
    background-color: #ffffff4d;
}

.sch-dlv-pop-body{
    width: 100%;
    height: 80%;
    padding: 20px;
    display: flex;
    justify-content: start;
    align-items: start;
    flex-direction: column;
    gap: 10px;
}

.sch-dlv-slct-dr-hding{
    font-size: 0.8rem;
    font-weight: 600;
    color: #94a3b8;
    text-transform: uppercase;
}

.sch-dlv-driver-list{
    width: 100%;
    height: 50%;                 /* fixed height */
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;            /* 🔁 scroll yahin hoga */
    position: relative;          /* page ke sath fixed nahi */
}

/* Default driver card */
.sch-dlv-pop-driver-cont{
    width: 100%;
    min-height: 90px;
    flex-shrink: 0;
    border-radius: 15px;

    /* default border (light) */
    border: 2px solid #e0e0e0;

    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;

    cursor: pointer;
    transition: all 0.2s ease;
}

/* Active (selected) driver */
.sch-dlv-pop-driver-cont.active {
    border: 2px solid #91c63f;
    background: #f6fff1;
}

/* Radio button color */
.sch-dlv-pop-driver-cont input[type="radio"] {
    accent-color: #91c63f;
    cursor: pointer;
}

/* Optional hover effect */
.sch-dlv-pop-driver-cont:hover {
    border-color: #91c63f;
}

.sch-dlv-pop-driver-inner1{
    width: 60px;
    height: 60px;
    border-radius: 100%;
    background-color: #91c63f;
    display: flex;
    justify-content: center;
    align-items: center;
}

.sch-dlv-pop-driver-inner1 p{
    font-size: 1.6rem;
    color: #fff;
}

.sch-dlv-pop-driver-inner2{
    width: 70%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: start;
    flex-direction: column;
    gap: 10px;
    
}

.sch-dlv-pop-driver-inner2 p{
    font-size: 1.2rem;
    font-weight: 600;
    color: #00467a;
}

.sch-dlv-pop-driver-inner3{
    width: auto;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

}

.sch-dlv-pop-driver-inner3 i{
    color: #91c63f;
    font-size: 1.2rem;
}

.sch-dlv-pop-date-time-cont{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sch-dlv-date-cont{
    width: 50%;
    height: auto;
    display: flex;
    justify-content: start;
    align-items: start;
    gap: 10px;
    flex-direction: column;

}

.sch-dlv-date-cont input{
    width: 90%;
    height: 50px;
    border-radius: 15px;
    border: 2px solid #e2e8f0;
    padding: 10px;
    cursor: pointer;
}

.sch-dlv-date-cont p{
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    color: #94a3b8;
}

.sch-dlv-pop-can{
    margin-top: 20px;
    width: 35%;
    height: 50px;
    background-color: #fff;
    border: 2px solid #e2e8f0;
    color: #475569;
    font-size: 0.8rem;
    font-weight: 600;
    border-radius: 15px;
    cursor: pointer;
}

.sch-dlv-pop-can:hover{
    color: #fff;
    background-color: red;
}

.sch-dlv-pop-assigne{
    margin-top: 20px;
    width: 60%;
    height: 50px;
    background-color: #91c63f;
    border: 2px solid #e2e8f0;
    color: #fff;
    font-size: 0.8rem;
    font-weight: 600;
    border-radius: 15px;
    cursor: pointer;
}

.sch-dlv-pop-assigne:hover{
    background-color: #00467a;
}

.sch-dlv-pop-search-cont{
    width: 100%;
    height: 50px;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 10px;
    padding: 10px;
    position: relative;

}

.order-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #ddd;
    border-top: none;
    max-height: 220px;
    overflow-y: auto;
    display: none;
    z-index: 9999;
}

.order-suggestions .item {
    padding: 10px 12px;
    cursor: pointer;
    border-bottom: 1px solid #f1f1f1;
}

.order-suggestions .item:hover {
    background: #f5f5f5;
}

.order-suggestions .item small {
    display: block;
    color: #666;
    font-size: 12px;
}

.sch-dlv-pop-search-cont i{
    color: #00467a66;
}

.sch-dlv-pop-search-cont input{
    width: 95%;
    height: 100%;
    border: none;

}

.sch-dlv-pop-search-cont input,
.sch-dlv-pop-search-cont input:focus,
.sch-dlv-pop-search-cont input:active{
    outline: none;
    border: none;
    box-shadow: none;
}

.sch-dlv-pop-order-details-cont{
    width: 80%;
    height: 100%;
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: start;
    flex-direction: column;
    gap: 5px;
}

.sch-dlv-pop-od-id{
    font-size: 1rem;
    font-weight: 600;
    color: #00467a;
}

.sch-dlv-pop-od-ser{
    font-size: 0.8rem;
    color: #64748b;
}

.sch-dlv-pop-od-status{
    font-size: 0.8rem;
    font-weight: 600;
    color: #91c63f;
}

.sch-dlv-popup2{
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 500px;
    height:90%;
    background: #fff;
    border-radius: 15px;
    z-index: 1000;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    font-family: Arial, sans-serif;
}

.sch-dlv-driver-list2{
    width: 100%;
    height: 35%;                 /* fixed height */
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow-y: auto;            /* 🔁 scroll yahin hoga */
    position: relative;          /* page ke sath fixed nahi */
}

.sch-dlv-pop-header2{
    width: 100%;
    height: 15%;
    background-color: #00467a;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
}



/* ---------------------------------------------
customer Insights CSS
---------------------------------------------- */

.cx-ins-main-cont{
    width: 100%;
    height: calc(100% - 60px);
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: start;
    padding: 20px;
}

.cx-ins-header-cont{
    width: 100%;
    height: 15%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
}

.cx-ins-header-inner-cont1, .cx-ins-header-inner-cont2{
    height: 100%;
    width: 50%;
    display: flex;
    
}

.cx-ins-header-inner-cont1{
    flex-direction: column;
    align-items: start;
    justify-content: center;
    gap: 10px;
}

.cx-ins-header-inner-cont1 div{
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 10px;
}

.cx-ins-heading{
    font-size: 1.8rem;
    font-weight: 600;
    color: #00467a;
}

.cx-ins-header-inner-cont1 div i, .cx-ins-header-inner-cont1 div p{
    font-size: 1rem;
    color: #64748b;
}

.cx-ins-header-inner-cont2{
    justify-content: end;
    align-items: center;
}

.cx-ins-gen-coupon-btn{
    width: auto;
    height: 50px;
    padding: 20px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    gap: 10px;
    border: none;
    border-radius: 15px;
    background-color: #91c63f;
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
}

.cx-ins-gen-coupon-btn i{
    font-size: 2rem;
}

.cx-ins-gen-coupon-btn:hover{
    background-color: #00467a;
}

.cx-ins-body-cont{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: space-between;
    align-items: start;
    gap: 20px;
    padding: 20px;
}

.cx-ins-body-left-cont{
    width: 70%;
    height: auto;
    display: flex;
    justify-content: start;
    align-items: start;
    gap: 10px;
    flex-direction: column;
}

.cx-ins-body-right-cont{
    width: 30%;
    height: 300px;
    border-radius: 15px;
    border: 1px solid #d1d5db;
    padding: 15px;
    background: #fff;
}

.cx-ins-chart-header{
    margin-bottom: 10px;
}

.cx-ins-chart-title{
    font-size: 14px;
    font-weight: 700;
    color: #00467a;
}

.cx-ins-chart-subtitle{
    font-size: 11px;
    color: #6b7280;
}



.cx-ins-count-main-cont {
    width: 100%;
    display: flex;
    gap: 20px;              /* boxes ke beech ka gap */
    
}

.cx-ins-count-box {
    flex: 1;                /* sabka size equal */
    height: 120px;
    border-radius: 15px;
    border: 2px solid #e2e8f0;
    display: flex;
    align-items: start;
    justify-content: center;
    flex-direction: column;
    padding: 20px;
    gap: 10px;
    
}

.cx-ins-hg-progress-bar {
    width: 100%;
    height: 8px;
    background-color: #f1f5f9;
    border-radius: 10px;
    overflow: hidden;
}



.cx-ins-hg-progress-fill, .cx-ins-mr-progress-fill,
.cx-ins-lr-progress-fill, .cx-ins-nr-progress-fill{
    height: 100%;
    border-radius: 10px;
    transition: width 0.4s ease;
}

.cx-ins-hg-progress-fill{
    background-color: #ef4444;
}

.cx-ins-mr-progress-fill{
    background-color: #f97316;
}

.cx-ins-lr-progress-fill{
    background-color: #facc15;
}

.cx-ins-nr-progress-fill{
    background-color: #91c63f;
}



.cx-ins-hg-heading, .cx-ins-mr-heading,
.cx-ins-lr-heading, .cx-ins-nr-heading{
    font-size: 0.8rem;
    font-weight: 600;
}

.cx-ins-hg-heading{
    color: #ef4444;
}

.cx-ins-mr-heading{
    color: #f97316;
}

.cx-ins-lr-heading{
    color: #facc15;
}

.cx-ins-nr-heading{
    color: #91c63f;
}

.cx-ins-risk-per-cont{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: auto;
}

.cx-ins-hg-per-txt{
    font-size: 1.8rem;
    font-weight: 600;
    color: #00467a;
}

.cx-ins-hg-user-txt{
    font-size: 0.8rem;
    color: #94a3b8;
}

.cx-ins-cx-list-main-cont{
    width: 100%;
    min-height: 300px;
    border: 2px solid #e2e8f0;
    border-radius: 15px;
    padding: 20px;
    display: flex;
    justify-content: start;
    align-items: start;
    flex-direction: column;
    gap: 20px;
}

.cx-ins-search-cont{
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cx-ins-inner-search-box{
    width: 70%;
    height: 40px;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    display: flex;
    justify-content: start;
    align-items: center;
    padding-left: 10px;
    padding-right: 10px;
}

.cx-ins-inner-search-box i{
    font-size: 1rem;
    color: #94a3b8;
}

.cx-ins-inner-search-box input{
    width: 100%;
    height: 100%;
    border: none;
    margin-left: 10px;
}

.cx-ins-inner-search-box input:focus {
    outline: none;
    box-shadow: 0 0 0 1px transparent;
}

.cx-ins-inner-fltr-cont{
    width: 30%;
    height: 40px;
    display: flex;
    justify-content: end;
    align-items: center;
    gap: 20px;
}

.cx-ins-inner-fltr-cont i{
    font-size: 2rem;
    color: #94a3b8;
}

.cx-ins-inner-fltr-cont select{
    width: 70%;
    height: 100%;
    border-radius: 10px;
    border: 2px solid #e2e8f0;
    text-align: center;
}

.cx-ins-cx-table-inner-cont {
    width: 100%;
    min-height: 300px;
    padding: 20px;
}

/* scroll wrapper */
.cx-ins-table-scroll-wrap {
    max-height: 260px;        /* body scroll height */
    overflow-y: auto;
    border-radius: 10px;
}

/* table */
.cx-ins-cx-table {
    width: 100%;
    border-collapse: collapse;
}

/* header */
.cx-ins-cx-table thead th {
    position: sticky;
    top: 0;
    text-align: center;
    padding: 12px;
    font-weight: 600;
    background-color: #fff;
    z-index: 2;
    font-size: 0.8rem;
    color: #00467a;
    font-weight: 600;
}

/* body cells */
.cx-ins-cx-table td {
    text-align: center;
    padding: 12px;
   
}

/* row hover */
.cx-ins-cx-table tbody tr:hover {
   border-left: 5px solid #00467a;
}

.cx-ins-cx-details-tbl{
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 20px;

}

.cx-ins-cx-name-badge{
    width: 40px;
    height: 40px;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #00467a;
}

.cx-ins-cx-name-badge i{
    font: 1.6rem;
    color: #fff;
}

.cx-ins-name{
    font-size: 1rem;
    font-weight: 600;
    color: #00467a;
}

.cx-ins-no{
    font-size: 0.8rem;
    font-weight: 600;
    color: #64748b;
}

.cx-ins-cx-name-no{
    display: flex;
    justify-content: start;
    align-items: start;
    flex-direction: column;
    gap: 5px;
}

.cx-ins-address-td {
    max-width: 180px;          /* apne layout ke hisaab se adjust karo */
    white-space: nowrap;       /* single line */
    overflow: hidden;          /* extra text hide */
    text-overflow: ellipsis;   /* ... show */
}

.cx-ins-cx-table thead th:nth-child(2) {
    text-align: left;
    width: 30%;
}

.cx-ins-cx-table thead th:nth-child(1) {
    width: 10%;
}

.cx-ins-cx-table thead th:nth-child(3) {
    width: 20%;
}

.cx-ins-cx-table thead th:nth-child(4) {
    width: 10%;
}

.cx-ins-cx-table thead th:nth-child(5) {
    width: 20%;
}

/* Overlay */
.cx-ins-gen-modal-overlay {
    position: fixed;           /* Page pe fixed rahe */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5); /* semi-transparent background */
    display: flex;
    justify-content: center;   /* horizontal center */
    align-items: center;       /* vertical center */
    z-index: 9999;             /* sabke upar */
    overflow: auto;            /* agar content bada ho toh scroll aaye */
}

/* Modal content box */
.cx-ins-gen-modal-content {
    background: #fff;
    padding: 25px 30px;
    border-radius: 12px;
    width: 400px;
    max-width: 90%;           /* Mobile friendly */
    box-shadow: 0 8px 25px rgba(0,0,0,0.3);
    animation: fadeInScale 0.25s ease-in-out;
    position: relative;
}

/* Header */
.cx-ins-gen-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.cx-ins-gen-modal-header h3 {
    margin: 0;
    font-size: 1.3rem;
    color: #333;
}

.cx-ins-gen-close-btn {
    background: transparent;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
}

/* Modal body fields */
.cx-ins-gen-field {
    margin-bottom: 15px;
}

.cx-ins-gen-label {
    display: block;
    margin-bottom: 5px;
    font-weight: 500;
    color: #555;
}

.cx-ins-gen-input,
.cx-ins-gen-select,
.cx-ins-gen-calendar {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 0.95rem;
}

/* Radio group */
.cx-ins-gen-radio-group label {
    margin-right: 15px;
    font-size: 0.95rem;
    color: #555;
}

/* Toggle */
.cx-ins-gen-toggle-label {
    display: flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
}

.cx-ins-gen-toggle-label .cx-ins-gen-toggle-text {
    margin-right: 10px;
}

.cx-ins-gen-toggle {
    position: relative;
    width: 40px;
    height: 20px;
    -webkit-appearance: none;
    background: #ccc;
    outline: none;
    border-radius: 20px;
    transition: background 0.3s;
}

.cx-ins-gen-toggle:checked {
    background: #4caf50;
}

.cx-ins-gen-toggle::before {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    top: 1px;
    left: 1px;
    background: #fff;
    transition: transform 0.3s;
}

.cx-ins-gen-toggle:checked::before {
    transform: translateX(20px);
}

/* Footer buttons */
.cx-ins-gen-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
}

.cx-ins-gen-done-btn,
.cx-ins-gen-close-btn-btm {
    padding: 8px 16px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.95rem;
}

.cx-ins-gen-done-btn {
    background-color: #91c63f;
    color: #fff;
}

.cx-ins-gen-close-btn-btm {
    background-color: #ccc;
    color: #333;
}

/* Animation */
@keyframes fadeInScale {
    0% { opacity: 0; transform: scale(0.8);}
    100% { opacity: 1; transform: scale(1);}
}

/* 
------------------------------------------------------
Predictive Reminder Page Css
------------------------------------------------------ */


.pr-main-cont{
    width: 100%;
    height: calc(100% - 60px);
    display: flex;
    justify-content: start;
    align-items: start;
    flex-direction: column;
    padding: 20px;
}

.pr-1st-cont{
    width: 100%;
    height: 15%;
    display: flex;
    justify-content: space-between;
    align-items: start;
}

.pr-heading-cont{
    width: 50%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: start;
    flex-direction: column;
    gap: 10px;
}

.lp-laundry{
    color: #91c63f; /* Green */
    font-size: 2rem;
    font-weight: 600;
}

.lp-predict{
    color: #00467a; /* Blue */
    font-size: 2rem;
    font-weight: 600;
}

.pr-sub-heading{
    font-size: 1rem;
    color:#64748b;
}

.pr-heading-btn-cont{
    width: 50%;
    height: 100%;
    display: flex;
    justify-content: end;
    align-items: center;
    gap: 30px;
}

.pr-radio-btn input{
    display: none;
}

/* button look */
.pr-radio-btn span{
    padding: 12px 22px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 600;   /* 👈 yeh line */
    color: #475569;
    transition: all 0.3s ease;
}

/* active button */
.pr-radio-btn input:checked + span{
    background-color: #00467a;
    color: #fff;
}

/* hover effect */
.pr-radio-btn span:hover{
    background-color: #e6f0f8;
}

.pr-2nd-cont{
    width: 100%;
    height: 20%;
    display: flex;
    gap: 30px;              /* cards ke beech space */
}

.pr-ana-card{
    flex: 1;                /* 👈 sab equal size */
    height: 80%;
    border-radius: 15px;
    display: flex;
    justify-content: space-around;
    justify-content: center;
    padding: 20px;
}

.pr-ana-card-border-gary{
    border: 2px solid #e5e7eb;
    background-color: #fff;
}

.pr-ana-card-border-orange{
    border: 2px solid #ffedd5;
    background-color: #fff7ed;
}

.pr-ana-card-border-red{
    border: 2px solid #fee2e2;
    background-color: #fef2f2;
}

.pr-ana-card-border-green{
    border: 2px solid #91c63f;
}

.pr-ana-card-inner-left, .pr-ana-card-inner-right{
    width: 50%;
    height: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    gap: 10px;
}

.pr-ana-card-inner-right{
    align-items: end;
}

.pr-ana-card-inner-left{
    align-items: start;
}

.pr-ana-card-inner-right i{
    font-size: 2.6rem;
}

.pr-ana-heading{
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
}

.pr-ana-count{
    font-size: 2rem;
    font-weight: 600;
}

.pr-blue-icon{
    color: #00467a;
}

.pr-dark-icon{
    color: #334155;
}

.pr-orange-icon{
    color: #fb923c;
}

.pr-red-icon{
    color: #f87171;
}

.pr-green-icon{
    color: #91c63f;
}

.pr-3rd-cont{
    width: 100%;
    height: 70%;
    display: flex;
    justify-content: space-between;
    align-items: start;
    gap: 10px;
}

.pr-3rd-left-cont{
    width: 70%;
    height: 100%;
    display: flex;
    justify-content: start;
    align-items: start;
    flex-direction: column;
    gap: 20px;
    overflow-y: auto;  
    scroll-behavior: smooth;
}

.pr-3rd-right-cont{
    width: 30%;
    height: 100%;
    display: flex;
    justify-content: start;
    align-items: start;
    flex-direction: column;
    border: 2px solid #e5e7eb;
    border-radius: 15px;
    gap: 20px;
    padding: 20px;
}

.flow-up-record-heading{
    font-size: 1rem;
    font-weight: 600;
    color: #00467a;
    text-transform: uppercase;
}

.pr-followup-msz-cont{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: start;
    align-items: start;
    flex-direction: column;
    overflow-y: auto;
    scroll-behavior: smooth;
    padding-right: 10px;
}

.pre-followup-inner-msz-cont{
    width: 100%;
    height: 60px;
    display: flex;
    justify-content: start;
    align-items: center;
}

.pre-followup-msz-dot{
    width: 10px;
    height: 10px;
    border-radius: 10px;
    background-color: #94a3b8;
}

.pre-followup-msz-dot-cont{
    width: 15px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: start;
    padding-top: 10px;
    border-left: 1px dotted #94a3b8;
}

.pre-followup-msz-body{
    width: calc(100% - 15px);
    height: 100%;
    padding-top: 10px;
    padding-left: 15px;
    padding-bottom: 10px;
    
}

.followup-msz{
    font-size: 0.9rem;
    color: #334155;
}

.pre-followup-msz-1st{
    width: 100%;
    height: 20px;
    display: flex;
    justify-content: space-between;
    align-items: start;
}

.follow-type{
    font-size: 0.8rem;
    font-weight: 600;
    color: #00467a;
}

.follow-date-time{
    font-size: 0.6rem;
    font-weight: 600;
    color: #94a3b8;
}

.pr-cust-card{
    width: 100%;
    min-height: 170px;
    height: auto;
    border: 2px solid #e5e7eb;
    border-radius: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
}

.pr-cust-inner-card-cont1{
    width: 65%;
    height: 150px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 20px;
    padding-bottom: 20px;
}

.pr-cust-name-badge{
    width: 150px;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.pr-cust-inner-name-badge{
    width: 100px;
    height: 100px;
    background-color: #00467a;
    border-radius: 20px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.35); /* 👈 all sides shadow */
    display: flex;
    justify-content: center;
    align-items: center;
}

.pr-cust-inner-name-badge p{
    font-size: 2rem;
    font-weight: 600;
    color: #fff;
}

.pr-cust-details-cont{
    width: calc(100% - 150px);
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: start;
    flex-direction: column;
    gap: 5px;
}

.pr-cust-name-cont{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 20px;
}

.pr-cust-name{
    font-size: 1.6rem;
    font-weight: 600;
    color: #00467a;
}

.pr-cust-status-badge{
    width: auto;
    height: auto;
    border-radius: 50px;
    padding-left: 5px;
    padding-right: 5px;
    padding-top: 5px;
    padding-bottom: 5px;
    
}

/* .pr-cust-status-badge{
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
} */

.pr-cust-status-badge p {
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
    text-transform: capitalize;
}

/* upcoming */
.status-upcoming {
    background-color: #00467a;
    border: 1px solid #00467a;
    color: #fff;
}

/* send reminders */
.status-send-reminders {
    background-color: #334155;
    border: 1px solid #334155;
    color: #fff ;
}

/* follow-ups (tumne send remnder likha tha – assume follow-ups) */
.status-follow-ups {
    background-color: #fff7ed;
    color: #fb923c;
    border: 1px solid #fb923c;
}

/* overdue */
.status-overdue {
    background-color: #fef2f2;
    color: #f87171;
    border: 1px solid #f87171;
}

/* order done */
.status-order-done {
    background-color: #91c63f;
    color: #ffffff;
    border: 1px solid #ffffff;
}

.pr-cust-card.overdue-card {
    border: 1px solid #f87171;        /* same as overdue text */
    box-shadow: 0 0 12px rgba(248, 113, 113, 0.45);
}

.pr-cust-card.overdue-card .pr-cust-inner-name-badge {
    background-color: #f87171;   /* overdue red */
    color: #ffffff;
}

.pr-cycle-count{
    font-size: 0.8rem;
    font-weight: 600;
    color: #94a3b8;
}

.pr-cust-inner-card-cont2{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    padding-right: 30px;
}

.pr-cust-inner-card-cont2 button{
    width: auto;
    height: auto;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    border: none;
    border-radius: 15px;
    color: #fff;
    padding: 16px;
    cursor: pointer;
    
}

.pr-reminder-btn{
    background-color: #91c63f;
}

.pr-follow-details-btn{
    background-color: #00467a;
}

.pr-follow-up-cont{
    width: 400px;
    height: 150px;
    border: 2px solid #fee2e2;
    background-color: #fef2f2;
    border-radius: 15px;
    margin-bottom: 10px;
    display: flex;
    justify-content: start;
    align-items: start;
    gap:10px;
    padding-top: 20px;
    padding-left: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
}

.pr-follow-point{
    width: 10%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: start;

}

.pr-follow-up-dot{
    width: 10px;
    height: 10px;
    border-radius: 10px;
    background-color: #ef4444;
}

.pr-follow-up-text-cont{
    width: 90%;
    height: 100%;
    display: flex;
    justify-content: start;
    align-items: start;
    gap: 5px;
    flex-direction: column;
}

.pr-follow-up-msz{
    font-size: 1rem;
    font-weight: 600;
    color: #ef4444;
}

.pr-follow-up-sub-msz{
    font-size: 0.7rem;
    font-weight: 600;
    color: #ef4444;
}

.pre-follow-overlay{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.5);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 999;
}

.pre-follow-popup{
    width: 30%;
    height: 70%;
    background: #fff;
    border-radius: 14px;
    padding: 22px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.35);
    text-align: center;
}

.pre-pop-up-inner-cont{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: start;
    align-items: start;
    flex-direction: column;
    gap: 5px;
}

.pre-pop-up-cx-name{
    font-size: 2rem;
    color: #00467a;
    font-weight: 600;
}

.pre-pop-up-cx-sub-heading{
    font-size: 0.8rem;
    color: #64748b;
}

.pre-Platform{
    font-size: 0.8rem;
    color: #64748b;
    font-weight: 600;
    text-transform: uppercase;
    padding-top: 20px;
}

.pre-platform-main-cont{
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

/* hide default radio */
.pre-pop-up-radio-btn input{
    display: none;
}

.pre-pop-up-radio-btn{
    width: 50%;
}

/* button style */
.pre-pop-up-radio-btn span{
    display: flex;              /* 👈 IMPORTANT */
    align-items: center;
    justify-content: center;
    width: 100%;                /* 👈 50% ka effect yahan aayega */
    height: 50px;
    border-radius: 15px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 600;
    background: #fff;
    color: #cbd5e1;
    transition: all 0.3s ease;
    border: 2px solid #cbd5e1;
}

/* active button */
.pre-pop-up-radio-btn input:checked + span{
    background: #fff;
    color: #91c63f;
    border: 2px solid #91c63f;
}

/* hover */
.pre-pop-up-radio-btn span:hover{
    background: #e2e2e2;
}

.pre-next-follow-up-date-time-cont{
    width: 100%;
    height: 100px;
    padding-top: 20px;
    display: flex;
    gap: 12px;
}

.pre-next-follow-up-field{
    width: 50%;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pre-next-follow-up-label{
    font-size: 0.85rem;
    font-weight: 600;
    color: #64748b;
    text-align: left;   /* 👈 left aligned */
}

.pre-next-follow-up-input{
    height: 50px;
    padding: 0 12px;
    border-radius: 12px;
    border: 2px solid #cbd5e1;
    font-size: 0.95rem;
    transition: all 0.3s ease;
    background-color: #f8fafc;
}

.pre-next-follow-up-input:focus{
    outline: none;
    border-color: #91c63f;
}

.pre-pop-up-notes-cont{
    width: 100%;
}

.pre-pop-up-notes-field{
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.pre-pop-up-notes-label{
    font-size: 0.85rem;
    font-weight: 600;
    color: #64748b;
    text-align: left;
}

.pre-pop-up-notes-textarea{
    width: 100%;
    min-height: 90px;
    padding: 12px;
    border-radius: 15px;
    border: 2px solid #cbd5e1;
    font-size: 0.95rem;
    resize: vertical;
    transition: all 0.3s ease;
    background-color: #f8fafc;
}

.pre-pop-up-notes-textarea:focus{
    outline: none;
    border-color: #91c63f;
}

.pre-pop-btn-cont{
    width: 100%;
    display: flex;
    gap: 12px;
    margin-top: 30px;
}

.pre-pop-btn{
    width: 50%;              /* 👈 50% each */
    height: 42px;
    border-radius: 14px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
}

/* cancel button */
.pre-pop-btn-cancel{
    background: #e5e7eb;
    color: #374151;
}

.pre-pop-btn-cancel:hover{
    background: #d1d5db;
}

/* save button */
.pre-pop-btn-save{
    background: #91c63f;
    color: #fff;
}

.pre-pop-btn-save:hover{
    background: #7fb22f;
}

.pr-3rd-left-cont > div {
    cursor: pointer;
}

/* 
----------------------------------------------
customer package details css 
---------------------------------------------- */

.cx-pkg-main-cont{
    width: 100%;
    height: calc(100% - 60px);
    display: flex;
    justify-content: start;
    align-items: start;
    flex-direction: column;
    gap: 10px;
    padding: 30px;
}

.cx-pkg-heading{
    font-size: 2rem;
    font-weight: 600;
    color: #00467a;

}

.cx-pkg-sub-heading{
    font-size: 1rem;
    font-weight: 400;
    color: #64748b;
}

.cx-pkg-card-cont{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: start;
    align-items: center;
    flex-direction: column;
    gap: 20px;
}

.cx-pkg-card-status{
    width: 70%;
    height: auto;
    background-color: #91c63f;
    border-radius: 15px;
    padding-top: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
}

.cx-inner-card{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: start;
    align-items: start;
    flex-direction: column;
    background-color: #fff;
     border-radius: 15px;
}

.cx-upper-card-details-cont{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    border-bottom: 1px solid #e5e7eb;
}

.cx-pkg-upper-left-cont{
    width: 70%;
    height: auto;
    padding: 20px;
    display: flex;
    justify-content: start;
    align-items: start;
    flex-direction: column;
    gap: 10px;
}

.cx-pkg-upper-right-cont{
    width: 30%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 20px;
}

.cx-pkg-left-heading-cont{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 20px;
}

.cx-pkg-icon-cont{
    width: 70px;
    height: 70px;
    border-radius: 15px;
    background-color: #00467a;
    display: flex;
    justify-content: center;
    align-items: center;
}

.cx-pkg-icon-cont i{
    font-size: 2rem;
    color: #fff;
}

.cx-pkg-name-cont{
    display: flex;
    justify-content: center;
    align-items: start;
    flex-direction: column;
    height: 70px;
    gap: 10px;
}

.cx-pkg-package-name{
    font-size: 1.6rem;
    font-weight: 600;
    color: #00467a;
}

.cx-pkg-status-badge{
    width: auto;
    height: auto;
    padding: 5px 15px;
    background-color: #91c63f;
    border-radius: 50px;
}

.cx-pkg-status-badge p{
    font-size: 0.8rem;
    font-weight: 600;
    color: #fff;
}

.cx-pkg-description{
    font-size: 0.8rem;
    color: #475569;
}

.cx-pkg-bln-cont{
    width: 100%;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 20px;
}

.cx-pkg-validity-cont, .cx-pkg-blnc-cont{
    width: 40%;
    height: 70px;
    background-color: #f8fafc;
    border-radius: 15px;
    border: 2px solid #f1f5f9;
    padding: 15px;
    display: flex;
    justify-content: space-between;
    align-items: start;
    flex-direction: column;
}

.cx-pkg-validity-heading, .cx-pkg-balance-heading{
    font-size: 0.8rem;
    font-weight: 600;
    color: #94a3b8;
    text-transform: uppercase;
}

.cx-pkg-validity-date, .cx-pkg-balance-remain{
    font-size: 1.2rem;
    color: #1e293b;
    font-weight: 600;
}

.cx-pkg-recharge-btn{
    width: 80%;
    height: 50px;
    border-radius: 15px;
    border: none;
    background-color: #00467a;
    color: #fff;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 600;
}

.cx-pkg-recharge-btn:hover{
    background-color: #91c63f;
}

.cx-pkg-deactive-btn{
    width: 80%;
    height: 50px;
    border-radius: 15px;
    border: 2px solid red;
    background-color: #fff;
    color: red;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 600;
}

.cx-pkg-deactive-btn:hover{
    background-color: red;
    color: #fff;
    
}

.cx-buttom-card-details-cont{
    width: 100%;
    height: auto;
    background-color: #f8fafc80;
    display: flex;
    justify-content: start;
    align-items: start;
    flex-direction: column;
    gap: 10px;
    padding: 20px;
}

.cx-pkg-include-service-heading{
    font-size: 1rem;
    font-weight: 400;
    color: #64748b;
}

.cx-pkg-service-cont{
    display: flex;
    flex-wrap: wrap;          /* Important */
    gap: 10px;                /* Space between boxes */
}

.cx-service-box{
    padding: 8px 15px;
    background: #fff;
    border-radius: 6px;
    border: 1px solid #e2e8f0;
    width: auto;              /* Auto width */
    white-space: nowrap;      /* Text break na ho */
}


/* --------------------------------------------------
track staff css
-------------------------------------------------- */

:root {
    --brand-blue: #00467a;
    --brand-green: #91c63f;
}

.staff-track-main-cont {
    width: 100%;
    height: calc(100% - 60px);
    display: flex;
    flex-direction: column;
    background: #0f172a;
    font-family: 'Segoe UI', sans-serif;
    position: relative;
}

/* Header Section */
.staff-tk-header {
    height: 70px;
    padding: 0 20px;
    background: #1e293b;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 3px solid var(--brand-blue);
    z-index: 999;
}
.staff-tk-info h3 { margin: 0; font-size: 18px; color: white; }
.staff-tk-info p { margin: 0; font-size: 12px; color: #94a3b8; }

.staff-tk-controls { display: flex; gap: 12px; align-items: center; }
.staff-tk-select-box { 
    background: #0f172a; 
    padding: 6px 12px; 
    border-radius: 8px; 
    display: flex; 
    align-items: center; 
    gap: 8px; 
    color: #94a3b8; 
    font-size: 11px; 
    border: 1px solid #334155; 
}

/* Updated Select Background */
#staff-switcher { 
    background: #0f172a; 
    color: white; 
    border: none; 
    font-weight: bold; 
    cursor: pointer; 
    outline: none; 
}
#staff-switcher option {
    background: #1e293b;
    color: white;
}

#get-gps-btn {
    background: var(--brand-green);
    color: #0f172a;
    border: none;
    padding: 8px 16px;
    border-radius: 8px;
    font-weight: 800;
    font-size: 12px;
    cursor: pointer;
    transition: 0.2s;
}
#get-gps-btn:hover { opacity: 0.9; transform: translateY(-1px); }

/* Map Section */
#map-canvas {
    flex-grow: 1;
    width: 100%;
    z-index: 1;
    background: #e5e7eb;
}

/* Custom Marker Styling */
.staff-dot-icon {
    background: var(--brand-blue);
    width: 14px; height: 14px;
    border-radius: 50%;
    border: 2px solid white;
    box-shadow: 0 0 10px rgba(0,70,122,0.5);
}
.staff-dot-icon::after {
    content: ''; position: absolute; top: -2px; left: -2px;
    width: 14px; height: 14px; border-radius: 50%;
    border: 2px solid var(--brand-blue);
    animation: pulse 1.5s infinite;
}
@keyframes pulse {
    0% { transform: scale(1); opacity: 1; }
    100% { transform: scale(3); opacity: 0; }
}

/* Indicators/Labels on Map */
.marker-label {
    background: rgba(0, 70, 122, 0.9);
    color: white;
    border: 1px solid white;
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 10px;
    font-weight: bold;
    white-space: nowrap;
}
.label-you { background: #91c63f; color: #000; }
.label-target { background: #ef4444; color: #fff; }

/* HUD / Status Card */
.staff-tk-hud {
    position: absolute;
    bottom: 30px; left: 30px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    width: 260px;
    border-radius: 15px;
    box-shadow: 0 20px 25px -5px rgba(0,0,0,0.3);
    border-left: 6px solid var(--brand-blue);
    z-index: 1000;
}
.hud-header { padding: 15px; border-bottom: 1px solid #f1f5f9; display: flex; align-items: center; gap: 10px; }
.hud-dot { width: 10px; height: 10px; background: var(--brand-blue); border-radius: 50%; }
.hud-body { padding: 15px; }
.hud-row { display: flex; justify-content: space-between; margin-bottom: 10px; font-size: 13px; }
.hud-row span:first-child { color: #64748b; font-weight: 600; }
.val-green { color: #15803d; font-weight: 800; }
.val-blue { color: var(--brand-blue); font-weight: 800; }
.hud-footer { padding: 8px 15px; background: #f8fafc; border-radius: 0 0 15px 0; font-size: 10px; color: #94a3b8; text-align: center; }

/* Toast */
.staff-tk-toast {
    position: absolute;
    top: 90px; left: 50%; transform: translateX(-50%);
    background: var(--brand-blue); color: white;
    padding: 10px 25px; border-radius: 50px;
    font-size: 13px; font-weight: 600;
    box-shadow: 0 10px 15px rgba(0,0,0,0.2);
    display: none; z-index: 2000;
}

.my-location-icon {
    background: transparent;
}

.shop-marker {
    width: 36px;
    height: 36px;
    background: #16a34a;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 16px;
    border: 3px solid white;
    box-shadow: 0 3px 8px rgba(0,0,0,0.3);
}

.staff-truck-icon {
    background: transparent;
}

.truck-marker {
    width: 38px;
    height: 38px;
    background: #ef4444;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 18px;
    border: 3px solid white;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

.target-user-icon {
    background: transparent;
}

.user-marker {
    width: 36px;
    height: 36px;
    background: #2563eb;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 16px;
    border: 3px solid white;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}


/* 
-------------------------------------------------------------
Delivery Report CSS
------------------------------------------------------------- */

.dlv-rep-main-cont{
    width: 100%;
    height: auto;
    display: flex;
    justify-content: start;
    align-items: start;
    flex-direction: column;
    gap: 10px;
    padding: 20px;
}

.dlv-rep-heading-cont{
    width: 100%;
    height: 80px;
    display: flex;
    justify-content: start;
    align-items: center;
}

.dlv-rep-heading-inner-cont, .dlv-rep-heading-inner-cont2{
    width: 50%;
    height: 100%;
    display: flex;
}

.dlv-rep-heading-inner-cont{
    justify-content: center;
    align-items: start;
    gap: 5px;
    flex-direction: column;
}

.dlv-rep-heading{
    font-size: 2rem;
    font-weight: 600;
    color: #00467a;
}

.dlv-rep-sub-heading{
    font-size: 1rem;
    color: #6b7280;
}

.dlv-rep-heading-inner-cont2{
    justify-content: end;
    align-items: center;
    gap: 20px;
}

.dlv-rep-heading-inner-cont2 button{
    padding: 16px 16px;
    border: none;
    border-radius: 15px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;

}

#dlv-rep-generate-reprt{
    border: 2px solid #00467a;
    background-color: #00467a;
    color: #fff;
}

#dlv-rep-generate-reprt:hover{
    border: 2px solid #91c63f;
    background-color: #91c63f;
}

#dlv-rep-exp-pdf{
    border: 2px solid #91c63f;
    background-color: #fff;
    color: #6b7280;
}

#dlv-rep-exp-pdf:hover{
    border: 2px solid #91c63f;
    background-color: #91c63f;
    color: #fff;
}

.dlv-rep-summary-cont{
    width:100%;
    height:150px;
    display:flex;
    gap:20px;
}

.dlv-rep-card{
    flex:1;
    border-radius:12px;
    padding:18px;
    display:flex;
    align-items:center;
    gap:15px;
    color:#fff;
    box-shadow:0 5px 15px rgba(0,0,0,0.12);
    transition:0.3s;
}

.dlv-rep-card:hover{
    transform:translateY(-4px);
    box-shadow:0 8px 20px rgba(0,0,0,0.18);
}

.dlv-rep-icon{
    width:55px;
    height:55px;
    border-radius:12px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:24px;
    background:rgba(255,255,255,0.2);
}

.dlv-rep-info p{
    margin:0;
    font-size:14px;
    opacity:0.9;
}

.dlv-rep-info h3{
    margin:4px 0 0 0;
    font-size:26px;
    font-weight:600;
}

/* Gradient Colors */

.dlv-rep-orders{
    background:linear-gradient(135deg,#4facfe,#00f2fe);
}

.dlv-rep-garments{
    background:linear-gradient(135deg,#43e97b,#38f9d7);
}

.dlv-rep-shop{
    background:linear-gradient(135deg,#fa709a,#fee140);
}

.dlv-rep-home{
    background:linear-gradient(135deg,#667eea,#764ba2);
}

#dlv-rep-filter-toggle {
    font-size: 14px;
    font-weight: 600;
    color: #5a67ff;
    user-select: none;
    padding-top: 10px;
    width: 100%;
    display: flex;
    justify-content: end;
}

#dlv-rep-filter-toggle i {
    font-size: 14px;
}

.dlv-rep-filter-cont{
width:100%;
padding:24px;
border-radius:14px;
background:#ffffff;
box-shadow:0 6px 25px rgba(0,0,0,0.07);
border:1px solid #edf0f7;
}

/* grid */

.dlv-rep-filter-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:22px;
}

/* item */

.dlv-rep-filter-item{
display:flex;
flex-direction:column;
}

/* label */

.dlv-rep-filter-item label{
font-size:12px;
font-weight:600;
margin-bottom:7px;
color:#555;
display:flex;
align-items:center;
gap:6px;
letter-spacing:.3px;
}

.dlv-rep-filter-item label i{
color:#5a67ff;
font-size:12px;
}

/* inputs */

.dlv-rep-filter-item input,
.dlv-rep-filter-item select{
height:40px;
border-radius:10px;
border:1px solid #e4e7f2;
padding:0 14px;
font-size:13px;
background:#f8f9fd;
transition:all .25s;
}

/* hover */

.dlv-rep-filter-item input:hover,
.dlv-rep-filter-item select:hover{
background:#fff;
border-color:#6c79ff;
}

/* focus */

.dlv-rep-filter-item input:focus,
.dlv-rep-filter-item select:focus{
outline:none;
border-color:#5a67ff;
background:#fff;
box-shadow:0 0 0 3px rgba(90,103,255,0.12);
}

/* date range */

.dlv-rep-date-range{
display:flex;
gap:10px;
}

/* dropdown arrow */

.dlv-rep-filter-item select{
appearance:none;
background-color:#f8f9fd;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' fill='%235a67ff' viewBox='0 0 16 16'%3E%3Cpath d='M2 5l6 6 6-6'/%3E%3C/svg%3E");
background-repeat:no-repeat;
background-position:right 12px center;
background-size:12px;
cursor:pointer;
}

/* search box */

#dlv-rep-search{
padding-left:14px;
}

/* subtle hover lift */

.dlv-rep-filter-item input:hover,
.dlv-rep-filter-item select:hover{
transform:translateY(-1px);
}

.dlv-rep-table-cont{
width:100%;
margin-top:20px;
}

.dlv-rep-table-wrapper{
width:100%;
max-height:270px;
overflow-y:auto;
border-radius:12px;
border:1px solid #e6e9f2;
box-shadow:0 5px 18px rgba(0,0,0,0.06);
}

/* table */

.dlv-rep-table{
width:100%;
border-collapse:collapse;
font-size:13px;
background:#fff;
}

/* header */

.dlv-rep-table thead th{
position:sticky;
top:0;
background:#f6f8ff;
z-index:2;
padding:12px 14px;
text-align:left;
font-weight:600;
color:#444;
border-bottom:1px solid #e6e9f2;
}

/* body */

.dlv-rep-table tbody td{
padding:11px 14px;
border-bottom:1px solid #f0f2f8;
color:#555;
}

/* zebra */

.dlv-rep-table tbody tr:nth-child(even){
background:#fafbff;
}

/* hover */

.dlv-rep-table tbody tr:hover{
background:#eef2ff;
}