/**handles:klds-orders**/

/* =========================================================
   KL Orders (Suite) — Toolbar + Pills + Buttons
   Scope: .kl-orders
   ========================================================= */
.kl-orders{
  --kl-brand: var(--brand, #FF7A00);
  --kl-border: #e9e9ef;
  --kl-muted: #6b7280;
  --kl-txt: #111827;
}

.kl-orders-toolbar{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  margin: 14px 0 14px;
}

.kl-orders-search{
  position:relative;
  flex: 1 1 260px;
  min-width: 200px;
}
.kl-orders-search input{
  width:100%;
  height:42px;
  padding: 0 12px 0 40px;
  border: 1px solid var(--kl-border);
  border-radius: 12px;
  background:#fff;
  outline:none;
  font-weight:600;
  color: var(--kl-txt);
}
.kl-orders-search input:focus{
  border-color: color-mix(in srgb, var(--kl-brand) 45%, var(--kl-border));
  box-shadow: 0 0 0 3px rgba(255,122,0,.18);
}

.kl-orders-search .kl-ico{
  position:absolute;
  left:12px; top:50%;
  width:16px; height:16px;
  transform: translateY(-50%);
  opacity:.65;
  background: currentColor;
  color: var(--kl-muted);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") center/contain no-repeat;
}

.kl-orders-sort{
  position:relative;
  flex: 0 0 160px;
}
.kl-orders-sort select{
  width:100%;
  height:42px;
  padding: 0 34px 0 12px;
  border: 1px solid var(--kl-border);
  border-radius: 12px;
  background:#fff;
  font-weight:700;
  color: var(--kl-txt);
  appearance:none;
  outline:none;
}
.kl-orders-sort select:focus{
  border-color: color-mix(in srgb, var(--kl-brand) 45%, var(--kl-border));
  box-shadow: 0 0 0 3px rgba(255,122,0,.18);
}
.kl-orders-sort .kl-chevron{
  position:absolute;
  right:12px; top:50%;
  width:12px; height:12px;
  transform: translateY(-50%);
  pointer-events:none;
  opacity:.6;
  background: currentColor;
  color: var(--kl-muted);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* Tabs: count badge */
.order-status-tabs .kl-tab-count{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width: 22px;
  height: 20px;
  padding: 0 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  background: rgba(17,24,39,.06);
  color: rgba(17,24,39,.70);
}
.order-status-tabs .status-tab.active .kl-tab-count{
  background: color-mix(in srgb, var(--kl-brand) 16%, white);
  color: var(--kl-brand);
}

/* Status pill */
.kl-status-pill{
  display:inline-flex;
  align-items:center;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  border: 1px solid transparent;
  white-space: nowrap;
}
.kl-status-pill.is-default{ background: rgba(107,114,128,.10); color: #374151; border-color: rgba(107,114,128,.18); }
.kl-status-pill.is-pending{ background: rgba(234,179,8,.12); color: #92400e; border-color: rgba(234,179,8,.25); }
.kl-status-pill.is-hold{ background: rgba(99,102,241,.10); color: #3730a3; border-color: rgba(99,102,241,.22); }
.kl-status-pill.is-processing,
.kl-status-pill.is-design-review,
.kl-status-pill.is-artwork-creation,
.kl-status-pill.is-production-proses,
.kl-status-pill.is-finishing-process,
.kl-status-pill.is-packing{ background: rgba(59,130,246,.10); color:#1e40af; border-color: rgba(59,130,246,.22); }
.kl-status-pill.is-completed{ background: rgba(16,185,129,.12); color:#065f46; border-color: rgba(16,185,129,.24); }
.kl-status-pill.is-rfq{ background: rgba(255,122,0,.12); color: #9a3412; border-color: rgba(255,122,0,.26); }
.kl-status-pill.is-cancelled,
.kl-status-pill.is-failed,
.kl-status-pill.is-refunded{ background: rgba(239,68,68,.10); color:#991b1b; border-color: rgba(239,68,68,.22); }

/* Total */
.kl-total strong{
  font-weight: 800;
  font-size: 14px;
  color: var(--kl-txt);
}
.kl-total--rfq strong{
  font-weight: 800;
}
.kl-total__sub{
  display:block;
  font-size: 12px;
  color: var(--kl-muted);
  margin-top: 2px;
}

/* Actions */
.kl-actions{
  display:flex;
  gap:8px;
  justify-content:flex-end;
  flex-wrap:wrap;
}
.kl-actions .button{
  border-radius: 10px !important;
  font-weight: 800 !important;
  font-size: 12px !important;
  padding: 8px 12px !important;
  line-height: 1 !important;
  text-decoration: none !important;
}

/* Pay: green */
.kl-actions .button.pay{
  background: #10b981 !important;
  border: 1px solid #10b981 !important;
  color: #fff !important;
}
.kl-actions .button.pay:hover{ filter: brightness(.95); }

/* View: outline (user request) */
.kl-actions .button.view{
  background: transparent !important;
  border: 1px solid var(--kl-brand) !important;
  color: var(--kl-brand) !important;
}
.kl-actions .button.view:hover{
  background: color-mix(in srgb, var(--kl-brand) 12%, white) !important;
}

/* Loading overlay (covers table area) */
.kl-loader[hidden]{ display:none !important; }
.kl-loader{
  position:absolute;
  inset: 0;
  background: rgba(255,255,255,.65);
  backdrop-filter: blur(2px);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index: 20;
}
.order-scroll-container{ position:relative; }
.kl-loader__inner{
  display:flex;
  align-items:center;
  gap:10px;
  padding: 10px 14px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--kl-border);
  box-shadow: 0 10px 30px rgba(17,24,39,.08);
}
.kl-spinner{
  width: 16px; height: 16px;
  border-radius:999px;
  border: 2px solid rgba(17,24,39,.12);
  border-top-color: rgba(17,24,39,.55);
  animation: klds-spin .8s linear infinite;
}
@keyframes klds-spin{ to { transform: rotate(360deg); } }
.kl-loadtext{ font-weight:800; font-size:12px; color: rgba(17,24,39,.75); }

@media (max-width: 640px){
  .kl-orders-toolbar{ flex-direction:column; align-items:stretch; }
  .kl-orders-sort{ flex: 1 1 auto; width:100%; }
  .kl-actions{ justify-content:flex-start; }
}

/*
  Mobile hotfix (XStore/Woo layouts)
  ---------------------------------
  Some themes apply flex / min-height rules to the account content area.
  When our toolbar switches to `flex-direction: column`, the desktop
  `justify-content: space-between` can create a huge vertical gap, and our
  `.kl-orders-search` block stretches tall (the search icon ends up floating
  in the middle of an empty white area).

  Fix: force the toolbar to stack naturally and prevent the search/sort blocks
  from growing.
*/
@media (max-width: 640px){
  .kl-orders .kl-orders-toolbar{
    justify-content: flex-start !important;
    align-content: flex-start !important;
    height: auto !important;
  }
  .kl-orders .kl-orders-search,
  .kl-orders .kl-orders-sort{
    flex: 0 0 auto !important;
    min-width: 0 !important;
  }
  /* Keep the search icon centered inside the input even if the wrapper stretches */
  .kl-orders .kl-orders-search .kl-ico{
    top: 21px !important; /* half of 42px input height */
    transform: none !important;
  }
}


/* Tabs (sticky, scrollable) */
.kl-orders .order-status-tabs{
  position: sticky; 
  top: 0; 
  z-index: 4; 
  display:flex; 
  gap:8px; 
  flex-wrap:nowrap;
  overflow-x:auto; 
  padding-bottom:6px; 
  margin-bottom:10px; 
  -webkit-overflow-scrolling:touch; 
  background:#fff;
}
.kl-orders .order-status-tabs::-webkit-scrollbar{ 
  display:none; 
}

.kl-orders .status-tab{ 
  flex:0 0 auto; 
  background:#f2f2f2;
  padding:8px 14px;
  border-radius:6px;
  color:#333;
  text-decoration:none;
  font-size:14px;
  border:1px solid #ddd;
  transition:.2s 
}

.kl-orders .status-tab:hover{
  background:#eee
}

.kl-orders .status-tab.active{
  background:#ff8000;
  color:#fff;
  border-color:#ff8000
}

.kl-orders {
  position:relative;
}

.kl-orders .order-scroll-container{
  position:relative; 
  max-height:460px; 
  overflow-y:auto; 
  border-radius:10px; 
  background:#fff;
  scrollbar-width:thin; 
  scrollbar-color:#ccc #f5f5f5;
}

/* Loader Overlay */
.kl-loader{
  position:absolute; 
  inset:0; 
  z-index:5; 
  background:transparent;
  opacity:0; 
  pointer-events:none; 
  transition:opacity .18s ease;
}
.kl-loader.is-visible,
.kl-loader[style*="display: block"]{ 
  opacity:1; 
  pointer-events:auto;
 }
 
.kl-loader__inner{
  position:absolute; 
  top:50%; 
  left:50%; 
  transform:translate(-50%,-50%);
  display:flex; 
  align-items:center; 
  gap:10px; 
  padding:8px 12px; 
  border-radius:999px;
  background:rgba(255,255,255,.9); 
  box-shadow:0 2px 8px rgba(0,0,0,.06);
}

.kl-spinner{ 
  width:18px; 
  height:18px; 
  border-radius:50%; 
  border:2px solid rgba(0,0,0,.12); 
  border-top-color:#ff7a00; 
  animation:kl-spin .8s linear infinite; 
 }

.kl-loadtext{
  font-size:13px; 
  color:#555 
}

@keyframes kl-spin{
  to{transform:rotate(360deg)}
}

/* Skeleton */
.kl-skel-row .skel{
  display:inline-block; height:12px; border-radius:6px;
  background:linear-gradient(90deg,#f2f2f2 25%,#eaeaea 37%,#f2f2f2 63%);
  background-size:400% 100%; animation:kl-shimmer 1.2s ease-in-out infinite;
}
.kl-skel-row td{padding:14px 18px; border-bottom:1px solid #f1f1f1}
.kl-skel-row .skel-id{width:80px}
.kl-skel-row .skel-date{width:140px}
.kl-skel-row .skel-status{width:120px}
.kl-skel-row .skel-total{width:120px}
.kl-skel-row .skel-actions{width:70px;height:28px;border-radius:8px}
@keyframes kl-shimmer{0%{background-position:100% 0}100%{background-position:0 0}}

/* Tabel Desktop */
.kl-orders .woocommerce-orders-table{width:100%;border-collapse:collapse;font-size:14px;table-layout:fixed}
.kl-orders .woocommerce-orders-table thead{position:sticky;top:0;z-index:3;background:#f9f9f9;box-shadow:0 2px 4px rgba(0,0,0,.05)}
.kl-orders .woocommerce-orders-table th,
.kl-orders .woocommerce-orders-table td{padding:14px 18px;text-align:left;border-bottom:1px solid #e0e0e0;word-wrap:break-word}

.kl-orders .order-number{width:15%}
.kl-orders .order-date{width:20%}
.kl-orders .order-status{width:25%}
.kl-orders .order-total{width:20%}
.kl-orders .order-actions{width:20%}

/* Tombol */
.kl-orders .kl-actions{display:flex;gap:8px;justify-content:flex-end;align-items:center}
.kl-orders .button{
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  box-sizing:border-box; border-radius:10px; font-weight:700; font-size:12px;
  padding:0 14px !important; min-height:36px; line-height:1 !important; text-decoration:none;
}
.kl-orders .woocommerce-orders-table .order-actions a.button.pay,
.kl-orders .order-actions a.button.pay{
  background:#10b981 !important; border-color:#10b981 !important; color:#fff !important;
}
.kl-orders .woocommerce-orders-table .order-actions a.button.view,
.kl-orders .order-actions a.button.view{
  /* legacy selector (anchors). Kept for backward compatibility. */
  background: transparent !important;
  border-color: #ff7a00 !important;
  color: #ff7a00 !important;
}

/* Stronger selector that also catches <button class="button view"> (XStore sometimes styles buttons blue) */
.kl-orders .woocommerce-orders-table .order-actions .button.view,
.kl-orders .order-actions .button.view,
.kl-orders .kl-actions .button.view{
  background: transparent !important;
  border: 1px solid #ff7a00 !important;
  color: #ff7a00 !important;
  box-shadow: none !important;
}
.kl-orders .woocommerce-orders-table .order-actions .button.view:hover,
.kl-orders .order-actions .button.view:hover,
.kl-orders .kl-actions .button.view:hover{
  background: rgba(255, 122, 0, 0.12) !important;
}
.kl-orders .button:hover{filter:brightness(.95)}

/* Cegah blur/opacity dari tema saat loading */
.kl-orders .order-scroll-container.is-loading{ pointer-events:none; }
.kl-orders .order-scroll-container,
.kl-orders .woocommerce-orders-table,
.kl-orders .woocommerce-orders-table *{
  opacity:1 !important; filter:none !important; transition:none !important;
}

/* Status Chip (legacy - aman walau sudah tidak dipakai) */
.kl-chip{
  display:inline-block; padding:4px 10px; border-radius:999px;
  font-size:12px; font-weight:700; line-height:1; border:1px solid transparent;
}
.kl-status-pending   { background:#fff7ed; color:#9a3412; border-color:#fed7aa; }
.kl-status-on-hold   { background:#fefce8; color:#854d0e; border-color:#fde68a; }
.kl-status-processing{ background:#ecfeff; color:#0e7490; border-color:#a5f3fc; }
.kl-status-completed { background:#ecfdf5; color:#065f46; border-color:#a7f3d0; }
.kl-status-cancelled { background:#fff1f2; color:#9f1239; border-color:#fecdd3; }
.kl-status-failed    { background:#fef2f2; color:#991b1b; border-color:#fecaca; }
.kl-status-new-quote-request{ background:#eef2ff; border-color:#c7d2fe; color:#3730a3;}

/* Mobile card layout */
@media (max-width: 640px) {
  /* Hide table header on mobile */
  .kl-orders .woocommerce-orders-table thead {
    display: none;
  }
  /* Turn the table into a block list */
  .kl-orders .woocommerce-orders-table,
  .kl-orders .woocommerce-orders-table tbody,
  .kl-orders .woocommerce-orders-table tr {
    display: block;
    width: 100%;
  }
  /* Each order becomes a card */
  .kl-orders .woocommerce-orders-table tr {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 12px;
    margin-bottom: 12px;
    padding: 12px;
  }
  /* Each cell is displayed as a block with label above value */
  .kl-orders .woocommerce-orders-table td {
    display: block;
    width: 100%;
    padding: 6px 0;
    font-size: 14px;
    border: none;
    white-space: normal;
  }
  /* Ensure inner elements inherit correct alignment */
  .kl-orders .woocommerce-orders-table td * {
    text-align: left !important;
  }
  /* Prepend the column label using the data-label attribute */
  .kl-orders .woocommerce-orders-table td::before {
    content: attr(data-label);
    display: block;
    font-weight: 700;
    color: #6b7280;
    margin-bottom: 2px;
    text-transform: none;
  }
  /* Highlight order number value */
  .kl-orders .woocommerce-orders-table td.order-number {
    font-weight: 700;
  }
  /* Actions cell: place label on its own line and allow buttons to wrap */
  .kl-orders .woocommerce-orders-table td.order-actions {
    display: block;
    white-space: normal !important;
  }
  .kl-orders .woocommerce-orders-table td.order-actions::before {
    margin-bottom: 6px;
  }
  .kl-orders .woocommerce-orders-table td.order-actions .kl-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-start;
    margin-left: 0;
  }
  .kl-orders .woocommerce-orders-table td.order-actions .button {
    min-height: 36px;
    font-size: 12px;
    border-radius: 8px;
    padding: 8px 12px !important;
    flex: 1 1 auto;
    max-width: 100%;
  }
  /* Remove fixed height on scroll container to allow full height on mobile */
  .kl-orders .order-scroll-container {
    max-height: none;
    overflow: visible;
  }

  /* Improve typography and spacing for mobile cards */
  .kl-orders .woocommerce-orders-table td::before {
    /* Smaller, uppercase labels with muted color */
    font-size: 11px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #9ca3af;
    margin-bottom: 2px;
  }
  /* Highlight order number */
  .kl-orders .woocommerce-orders-table td.order-number {
    font-size: 16px;
    font-weight: 700;
    color: #111827;
    margin-top: 4px;
  }
  .kl-orders .woocommerce-orders-table td.order-number::before {
    content: "Order" !important;
  }
  /* Hide the default label before date and adjust date styling */
  .kl-orders .woocommerce-orders-table td.order-date::before {
    content: "" !important;
  }
  .kl-orders .woocommerce-orders-table td.order-date {
    font-size: 14px;
    color: #6b7280;
    margin-top: -2px;
    margin-bottom: 6px;
  }
  /* Style total row */
  .kl-orders .woocommerce-orders-table td.order-total::before {
    content: "Total";
  }
  .kl-orders .woocommerce-orders-table td.order-total {
    font-weight: 700;
    font-size: 15px;
    margin-bottom: 8px;
  }
  /* Hide status label and rely on pill appearance */
  .kl-orders .woocommerce-orders-table td.order-status::before {
    content: "" !important;
  }
  .kl-orders .woocommerce-orders-table td.order-status .kl-status-pill {
    margin-top: 4px;
  }
}

/* =========================
   KLV6 Status Badge (match view-order.php)
   ========================= */
.kl-orders .klv6-status {
  display: inline-flex;
  align-items: center;
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 700;
  backdrop-filter: blur(10px);
  animation: klv6-pulse 2s infinite;
}

@keyframes klv6-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.85; }
}

/* Sub status (smaller) */
.kl-orders .klv6-status.klv6-substatus{
  padding: 5px 12px;
  border-radius: 16px;
  font-size: 12px;
  font-weight: 700;
  animation: none; /* reduce motion for list view */
}

/* Stack wrapper (Parent + Stage) */
.kl-orders .kl-status-stack{
  display:flex;
  flex-direction:column;
  gap:6px;
  align-items:flex-start;
}

/* Colors (from Order Details modal) */
.kl-orders .klv6-status.is-pending { background: rgba(251, 191, 36, 0.2); color: #FCD34D; border: 1px solid rgba(252, 211, 77, 0.3); }
.kl-orders .klv6-status.is-hold { background: rgba(239, 68, 68, 0.2); color: #FCA5A5; border: 1px solid rgba(252, 165, 165, 0.3); }
.kl-orders .klv6-status.is-processing { background: rgba(59, 130, 246, 0.2); color: #93C5FD; border: 1px solid rgba(147, 197, 253, 0.3); }
.kl-orders .klv6-status.is-completed { background: rgba(16, 185, 129, 0.2); color: #6EE7B7; border: 1px solid rgba(110, 231, 183, 0.3); }
.kl-orders .klv6-status.is-cancelled,
.kl-orders .klv6-status.is-failed { background: rgba(156, 163, 175, 0.2); color: #D1D5DB; border: 1px solid rgba(209, 213, 219, 0.3); }
.kl-orders .klv6-status.is-design-review { background: rgba(139, 92, 246, 0.2); color: #C4B5FD; border: 1px solid rgba(196, 181, 253, 0.3); }
.kl-orders .klv6-status.is-artwork-creation { background: rgba(236, 72, 153, 0.2); color: #F9A8D4; border: 1px solid rgba(249, 168, 212, 0.3); }
.kl-orders .klv6-status.is-production-proses { background: rgba(34, 211, 238, 0.2); color: #67E8F9; border: 1px solid rgba(103, 232, 249, 0.3); }
.kl-orders .klv6-status.is-finishing-process { background: rgba(251, 146, 60, 0.2); color: #FDBA74; border: 1px solid rgba(253, 186, 116, 0.3); }
.kl-orders .klv6-status.is-packing { background: rgba(74, 222, 128, 0.2); color: #86EFAC; border: 1px solid rgba(134, 239, 172, 0.3); }

.kl-orders .klv6-status.is-refunded,
.kl-orders .klv6-status.is-default{
  background: rgba(156, 163, 175, 0.16);
  color: #6B7280;
  border: 1px solid rgba(156, 163, 175, 0.25);
}

/* Mobile: allow status to wrap/stack nicely */
@media (max-width: 640px){
  .kl-orders td.order-status{
    white-space: normal !important;
    align-items: flex-start !important;
  }
  .kl-orders td.order-status .kl-status-stack{
    align-items: flex-end;
  }
}

/* =========================================
   DESKTOP: Compact pill size for Orders List
   (only affects dashboard list, not modal)
========================================= */
@media (min-width: 641px){
  .kl-orders .klv6-status{
    padding: 4px 12px !important;
    font-size: 12px !important;
    border-radius: 16px !important;
    line-height: 1 !important;
    animation: none !important; /* remove pulse for list view */
  }

  .kl-orders .klv6-status.klv6-substatus{
    padding: 3px 10px !important;
    font-size: 11px !important;
    border-radius: 14px !important;
    animation: none !important;
  }

  .kl-orders .kl-status-stack{
    gap: 4px !important;
  }
}



/* --- Suite overrides (keep last) --- */

/* Ensure table header not gigantic in some themes */
.kl-orders table.woocommerce-orders-table th{
  font-size: 12px !important;
  letter-spacing: .02em;
  color: rgba(17,24,39,.70);
}
.kl-orders table.woocommerce-orders-table td{
  font-size: 13px !important;
}