/* fonts */

@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Oswald:wght@200..700&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap');

.admin-prod-order { margin:0; padding: 0; }

/* Right Header */

/* Left */
.admin-prod-order .ht-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 30px; }
.admin-prod-order .ht-header .ht-header-left h2{ font-family: "Oswald", sans-serif; font-weight: bold; font-size: 28px; text-transform: uppercase; color: #fff; }
.admin-prod-order .ht-header .ht-header-left p.ht-sub-title { font-family: "Work Sans", sans-serif; font-weight: 500; font-size: 12px; color: #fff; margin-bottom: 0;}
main.admin-prod-order .ht-header-left { width: calc(50% - 15px); display: flex; flex-direction: column; } 
main.admin-prod-order .ht-header-right { width: calc(50% - 15px); display: flex; justify-content: flex-end; }

/* Right */
.admin-prod-order .ht-header .ht-header-right button { background: linear-gradient(148deg, #D4AF37, #B8860B); padding: 15px 20px; border-radius: 5px; font-family: "Poppins", sans-serif; font-weight: 500; font-size: 14px; color: #000; border: none; text-transform: uppercase; display: flex; align-items: center; gap: 5px; border: 1px solid #B8860B; white-space: normal; word-break: break-word; }
.admin-prod-order .ht-header .ht-header-right button:hover { border: 1px solid #fff; color: #fff; }
.admin-prod-order .ht-header .ht-header-right button:hover img { filter: invert(1); }

/* End Right Header */


/* Right Search  */
.admin-prod-order .ht-search { margin: 36px 0; }
.admin-prod-order .ht-search form#ht-search-form { margin-bottom: 20px; display: flex; gap: 24px; flex-wrap: nowrap; align-items: flex-end; border: 1px solid #2A2A2A; padding: 16px; border-radius: 10px; background: #161616; position: relative; }

.admin-prod-order .ht-filter-field.searchInput::before { position: absolute; content: ""; background: url(/wp-content/plugins/ht-core-plugin/assets/icons/magnifying_glass_white_icon.png); background-repeat: no-repeat; background-size: contain; left: 14px; width: 15px; height: 15px; top: 14px; pointer-events: unset; filter: brightness(0.5); }

.admin-prod-order .ht-search form#ht-search-form input { background: #18181B; border: 1px solid #1f242c; color: rgba(255,255,255,60%); padding: 10px 14px; border-radius: 8px;  width: -webkit-fill-available; font-family: 'inter', sans-serif;
    font-weight: normal; font-size: 14px !important; height: 43px;}
.admin-prod-order .ht-search form#ht-search-form input:focus-visible{ outline: none;}
.admin-prod-order .ht-search form#ht-search-form input::placeholder{font-family: 'inter', sans-serif;  font-weight: normal;  font-size: 14px; color: rgba(255,255,255,60%);}
.admin-prod-order .ht-search form#ht-search-form .ht-filter-field.date {-webkit-appearance: none; position: relative;}
.admin-prod-order .ht-search form#ht-search-form .ht-filter-field.date input {-webkit-appearance: none;}
.admin-prod-order .ht-search form#ht-search-form .ht-filter-field label { margin-bottom: 10px; font-size: 13px; font-weight: 600; }
.admin-prod-order .ht-search form#ht-search-form .ht-filter-field  { width: 18%; }
.admin-prod-order .ht-search form#ht-search-form .ht-filter-field.searchInput  { width: 35%; position: relative;}
.admin-prod-order .ht-filter-field.searchInput input { padding-left: 42px !important; }

.admin-prod-order .ht-search form#ht-search-form .ht-filter-field.date input[type="date"]::-webkit-calendar-picker-indicator { filter: invert(0.5); }

.admin-prod-order .ht-search form#ht-search-form button { background: linear-gradient(148deg, #D4AF37, #B8860B); border: 1px solid #B8860B; width: 100%; height: 43px; border-radius: 8px; font-weight: 600; padding: 10px 5px 10px 12px; }
.admin-prod-order .ht-search form#ht-search-form button img { width: 18px; }
.admin-prod-order .ht-search form#ht-search-form button:hover { border: 1px solid #fff; }
.admin-prod-order .ht-search form#ht-search-form .ht-filter-field.select_option {position: relative; width: 15%;}
.admin-prod-order .ht-search form#ht-search-form .ht-filter-field.select_option::after { background: url(../../../assets/icons/option-arrow.svg) no-repeat;  
content:''; position: absolute; right: 5px; top: 13px; width: 24px; height: 24px; pointer-events: none; }
.admin-prod-order .ht-search form#ht-search-form .ht-filter-field.select_option select { background-color: #18181B; border: 1px solid #1f242c; color: rgba(255,255,255,60%); padding: 10px 30px 10px 14px; border-radius: 8px;
 -webkit-appearance: none; width: -webkit-fill-available; font-family: 'inter', sans-serif; font-weight: normal; font-size: 14px; height: 43px;}
 .admin-prod-order .ht-search form#ht-search-form .ht-filter-field.select_option select:focus-visible { outline: none;}
.admin-prod-order .ht-search form#ht-search-form .ht-filter-field.filter-btn  { width: 5%;}

/* End Right Search  */

/* Right Table  */

.ht-prod-table { font-family: 'poppins', sans-serif; font-weight: normal; font-size: 14px; }
.ht-prod-table .order-table { width: 100%; border-collapse: collapse; border: 1px solid #262626 !important; }
.ht-prod-table .order-table thead th { text-align: left; font-size: 12px; color: #777; padding: 15px 10px; border: none !important; font-family: 'poppins', sans-serif; font-weight: bold; border-bottom: 1px solid rgba(255, 255, 255, 5%) !important; }
.ht-prod-table .order-table tbody td { padding: 15px 10px; border: none; font-family: 'poppins', sans-serif;  font-weight: 500; font-size: 14px; color: rgba(255,255,255,60%); vertical-align: middle; border-bottom: 1px solid rgba(255, 255, 255, 5%) !important; line-height: 1.2em; }
.ht-prod-table .order-table tbody tr:nth-child(odd) td,
.ht-prod-table .order-table tbody tr:nth-child(even) td { background: none; }
.ht-prod-table .order-table tbody tr:hover { background: none; }
.ht-prod-table .order-table tbody td.price { padding: 15px 10px; border: none; font-weight: bold; font-family: 'inter', sans-serif; font-size: 14px; color: rgba(255,255,255,60%); line-height: 1.2em; }
.ht-prod-table .order-id { font-family: 'poppins', sans-serif !important; font-weight: normal !important; font-size: 14px !important; -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-image: linear-gradient(176deg, #D4AF37 40%, #B8860B 100%) !important; word-break: break-word;  }
.ht-prod-table .customer { display: flex; align-items: center; gap: 10px; } 
.ht-prod-table .avatar { width: 36px; height: 36px; border-radius: 50%; background: #E2E8F0; display: flex; align-items: center; justify-content: center; color: #0F172A; font-size: 12px; font-weight: bold; font-family: 'inter', sans-serif; }
.ht-prod-table .name { font-weight: 600; font-family: 'inter', sans-serif; font-size: 14px; line-height: 1.2em; color: #fff; }
.ht-prod-table .email { font-size: 12px;  color: #64748B; font-family: 'inter', sans-serif; font-weight: normal; line-height: 1.2em; margin-top: 5px; word-break: break-all; }
.ht-prod-table .badge { padding: 6px 14px; border-radius: 20px; font-size: 12px; font-weight: 500; }
.ht-prod-table .badge.token, 
.ht-prod-table .processing { background: rgba(69,113,254,40%); color: #4571FE; font-family: 'poppins', sans-serif; font-weight: 500; }
.ht-prod-table .badge.success,
.ht-prod-table .completed { background: rgba(52,199,89,24%); color: rgba(81,255,125,68%); font-family: 'poppins', sans-serif; font-weight: 500; }
.ht-prod-table .cancelled { background: rgba(255,45,45,40%); color: #FF2D2D; font-family: 'poppins', sans-serif; font-weight: 500; }
.ht-prod-table .shipped { background: rgba(255,123,78,40%); color: #FF7B4E; font-family: 'poppins', sans-serif; font-weight: 500; }
.ht-prod-table .download { text-align: center; color: #f6b100; font-size: 18px; }
.ht-prod-table .download button {border: none; background: none; padding: 0; border-radius:0;}
.ht-prod-table .download button:hover, .ht-prod-table .download button:focus {border: none; background: none; padding: 0; border-radius:0;}
.ht-prod-table .download:hover { opacity: 0.7; }
.ht-prod-table .pagination { margin-top: 36px; display: flex; gap: 25px; justify-content: space-between; align-items: center; font-size: 13px; color: #777; }
.ht-prod-table .pagination span {font-family: 'poppins', sans-serif; font-size: 12px; font-weight: normal; color: rgba(255,255,255,50%); }
.ht-prod-table .pages { width: calc(50% - 15px); justify-content: end; display: flex; gap: 15px; flex-wrap: wrap;}
.ht-prod-table .pages button { padding: 8px 16px; background-color: #161616; color: #fff; border: 1px solid #262626; font-weight: 600; font-size: 12px; border-radius: 8px; font-family: 'poppins', sans-serif; }
.ht-prod-table .pages button.left-nav,
.ht-prod-table .pages button.right-nav { background: none;  border: none; padding: 0; margin: 0 5px 0 10px; border-radius: 0; }
.ht-prod-table .pages button.left-nav:active,
.ht-prod-table .pages button.right-nav:active,
.ht-prod-table .pages button.left-nav:hover,
.ht-prod-table .pages button.right-nav:hover,
.ht-prod-table .pages button.left-nav:focus-visible,
.ht-prod-table .pages button.right-nav:focus-visible { background: none; border: none;}
.ht-prod-table .pages button.active { background: #d4a017; border: 1px solid #d4a017; color: #000; border-radius: 8px;}
.ht-prod-table .pages button:hover { background: #d4a017; border: 1px solid #d4a017;}

.ht-prod-table .pages button.active:hover {     background-color: #161616;
    color: #fff;
    border: 1px solid #262626; } 

.admin-prod-order .ht-search form#ht-search-form button span.search-txt { display: none; } 

/* End Right Table  */

/* Media Query */
@media screen and (max-width: 1300px) {
.admin-prod-order .ht-search form#ht-search-form { flex-wrap: wrap; }
#ht-search-form{
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

#ht-search-form .ht-filter-field{
  flex: 0 0 calc(50% - 12px) !important;
}

.admin-prod-order .ht-search form#ht-search-form .ht-filter-field.filter-btn {
  flex: 0 0 auto !important;
  width: fit-content;
}

#ht-search-form input,
#ht-search-form select{
  width: 100% !important;
}
.admin-prod-order .ht-search form#ht-search-form button {
    padding: 10px 12px 10px 12px;
}
}
@media screen and (min-width: 1200px) {
.badge-mob-wrap { display: none; }
}
@media screen and (max-width: 1200px) {
.ht-prod-table .pages { width: 100%; justify-content: center; }  
.ht-prod-table .order-table tbody td { border-bottom: unset !important; }  
main.admin-prod-order table.order-table tbody tr td:nth-child(5) { display: none; }
main.admin-prod-order table.order-table tbody tr td:nth-child(2) { order: 1; }
main.admin-prod-order table.order-table tbody tr td:nth-child(1) { order: 2; display: flex; flex-direction: column; gap: 10px; align-items: center; text-align: center; }
main.admin-prod-order table.order-table tbody tr td:nth-child(3) { order: 3; display: flex; justify-content: center; align-items: center; text-align: center; }
main.admin-prod-order table.order-table tbody tr td:nth-child(4) { order: 4; display: flex; justify-content: center; align-items: center; text-align: center; }
main.admin-prod-order table.order-table tbody tr td:nth-child(6) { order: 5; display: flex; justify-content: center; align-items: center; flex: 0 0 100%; text-align: center; }
.order-table thead{ display:none; }
.order-table tbody tr{ display:flex; flex-wrap:wrap; margin-bottom:0px; padding:0px; border-bottom: 1px solid #262626; }
.order-table tbody td{ flex:0 0 50%; box-sizing:border-box; padding:8px; }
.order-table tbody td::before{ content:attr(data-label); display:block; font-weight:600; margin-bottom:4px; }
table.order-table .ht-prod-table .customer { display: flex; align-items: flex-start; width: 100%; gap: 15px; }
table.order-table .customer { align-items: center; }
table.order-table .customer div { width: 70%; }
table.order-table .customer .avatar { width: 36px !important; height: 36px !important; }
table.order-table .download { text-align: left; }
.ht-prod-table .pagination { flex-direction: column; }
}
@media screen and (max-width: 767px) {
#ht-search-form .ht-filter-field { flex: 0 0 calc(100% - 12px) !important; }    
.order-table tbody td { flex: 0 0 50%; }
.admin-prod-order .ht-search form#ht-search-form .ht-filter-field.select_option { width: 100%; flex: 0 0 100%; }
.admin-prod-order .ht-search form#ht-search-form .ht-filter-field.filter-btn { margin: auto; width: 100%;}
.admin-prod-order .ht-header {  flex-direction: column;}
main.admin-prod-order .ht-header-left { width: 100%; text-align: center; align-items: center;}
main.admin-prod-order .ht-header-right { width: 100%; justify-content: center; }

.admin-prod-order .ht-search form#ht-search-form button { display: inline-flex; justify-content: center; color: #fff; text-transform: uppercase; align-items: center; }
.admin-prod-order .ht-search form#ht-search-form button span.search-txt { display: block; }

}