.elementor-11968 .elementor-element.elementor-element-3e435f2:not(.elementor-motion-effects-element-type-background), .elementor-11968 .elementor-element.elementor-element-3e435f2 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#F8F8F8;}.elementor-11968 .elementor-element.elementor-element-3e435f2{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;}.elementor-11968 .elementor-element.elementor-element-3e435f2 > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-11968 .elementor-element.elementor-element-76b89bb:not(.elementor-motion-effects-element-type-background) > .elementor-widget-wrap, .elementor-11968 .elementor-element.elementor-element-76b89bb > .elementor-widget-wrap > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FFFFFF;}.elementor-11968 .elementor-element.elementor-element-76b89bb > .elementor-element-populated{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;}.elementor-11968 .elementor-element.elementor-element-76b89bb > .elementor-element-populated > .elementor-background-overlay{transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-11968 .elementor-element.elementor-element-1a8213f > .elementor-widget-container{padding:20px 20px 0px 20px;}.elementor-11968 .elementor-element.elementor-element-1a8213f{text-align:center;font-size:16px;font-weight:700;color:#000000;}.elementor-11968 .elementor-element.elementor-element-d659176 > .elementor-container > .elementor-column > .elementor-widget-wrap{align-content:center;align-items:center;}.elementor-11968 .elementor-element.elementor-element-d380803 .elementor-button{background-color:#FFFFFF;font-weight:600;fill:#000000;color:#000000;border-style:solid;border-color:#060606;border-radius:10px 10px 10px 10px;}.elementor-11968 .elementor-element.elementor-element-d380803 .elementor-button-content-wrapper{flex-direction:row;}.elementor-11968 .elementor-element.elementor-element-f478b08 > .elementor-widget-container{background-color:#FEFFE8;padding:5px 5px 5px 5px;border-radius:10px 10px 10px 10px;}.elementor-11968 .elementor-element.elementor-element-f478b08 .elementor-icon-list-icon i{color:#000000;transition:color 0.3s;}.elementor-11968 .elementor-element.elementor-element-f478b08 .elementor-icon-list-icon svg{fill:#000000;transition:fill 0.3s;}.elementor-11968 .elementor-element.elementor-element-f478b08{--e-icon-list-icon-size:16px;--icon-vertical-offset:0px;}.elementor-11968 .elementor-element.elementor-element-f478b08 .elementor-icon-list-item > .elementor-icon-list-text, .elementor-11968 .elementor-element.elementor-element-f478b08 .elementor-icon-list-item > a{font-size:16px;font-weight:700;}.elementor-11968 .elementor-element.elementor-element-f478b08 .elementor-icon-list-text{color:#000000;transition:color 0.3s;}.elementor-11968 .elementor-element.elementor-element-f2a8823 > .elementor-widget-container{padding:20px 20px 20px 20px;}@media(min-width:768px){.elementor-11968 .elementor-element.elementor-element-900559b{width:20%;}.elementor-11968 .elementor-element.elementor-element-76b89bb{width:59.332%;}.elementor-11968 .elementor-element.elementor-element-49508ad{width:20%;}}@media(max-width:1024px) and (min-width:768px){.elementor-11968 .elementor-element.elementor-element-900559b{width:30%;}.elementor-11968 .elementor-element.elementor-element-76b89bb{width:40%;}.elementor-11968 .elementor-element.elementor-element-49508ad{width:30%;}}/* Start custom CSS *//* ===============================
   CHAT UNTUK ORDER BUTTON
   =============================== */

.elementor-widget-html button {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  border: none;
  border-radius: 10px;
  padding: 0;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(37, 99, 235, 0.25);
  transition: all 0.25s ease;
}

.elementor-widget-html button a {
  display: inline-block;
  padding: 14px 26px;
  color: #ffffff;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  border-radius: 10px;
}

.elementor-widget-html button:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(37, 99, 235, 0.35);
}

.elementor-widget-html button:active {
  transform: translateY(0);
  box-shadow: 0 6px 14px rgba(37, 99, 235, 0.25);
}

/* Accessibility */
.elementor-widget-html button:focus-visible {
  outline: 3px solid rgba(37, 99, 235, 0.4);
  outline-offset: 3px;
}

/* Mobile friendly */
@media (max-width: 480px) {
  .elementor-widget-html button a {
    padding: 14px 20px;
    font-size: 14px;
  }
}

/* ===============================
   ORDER CARDS WRAPPER
   =============================== */

#order-cards-wrapper {
  display: grid;
  gap: 16px;
}

/* ===============================
   ORDER CARD
   =============================== */

.order-card {
  background: #ffffff;
  border: 1px solid #e5e7eb !important;
  border-radius: 14px !important;
  padding: 16px !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.04);
  transition: transform .2s ease, box-shadow .2s ease;
}

.order-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(0,0,0,0.08);
}

/* ===============================
   ORDER HEADER
   =============================== */

.order-card h3 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 10px;
  color: #111827;
}

/* ===============================
   ORDER META
   =============================== */

.order-card p {
  font-size: 13px;
  margin: 6px 0;
  color: #374151;
}

.order-card strong {
  color: #111827;
  font-weight: 500;
}

/* ===============================
   PRICE
   =============================== */

.order-card .woocommerce-Price-amount {
  font-weight: 600;
  color: #111827;
}

/* ===============================
   STATUS BADGE
   =============================== */

.order-card p span {
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px !important;
  border-radius: 999px !important;
  display: inline-block;
}

/* Success / Done */
.order-card p span:contains("Selesai"),
.order-card p span:contains("Completed") {
  background: #ecfdf5 !important;
  color: #065f46 !important;
}

/* Cancelled */
.order-card p span:contains("Cancelled") {
  background: #fee2e2 !important;
  color: #991b1b !important;
}

/* Failed */
.order-card p span:contains("Failed") {
  background: #fef3c7 !important;
  color: #92400e !important;
}

/* In progress / Proses */
.order-card p span:contains("Proses") {
  background: #ecfeff !important;
  color: #0369a1 !important;
}

/* ===============================
   ACTION BUTTONS
   =============================== */

.mark-done-button {
  background: linear-gradient(135deg, #f59e0b, #facc15) !important;
  color: #111827 !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 10px 16px !important;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 12px;
  transition: all .2s ease;
}

.mark-done-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(0,0,0,0.15);
}

/* ===============================
   LOAD MORE BUTTON
   =============================== */

#load-more-orders {
  background: #111827 !important;
  color: #ffffff !important;
  border-radius: 10px !important;
  padding: 12px 22px !important;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s ease;
}

#load-more-orders:hover {
  background: #000000 !important;
  transform: translateY(-1px);
}

/* ===============================
   HIDDEN STATE
   =============================== */

.order-card-wrapper.hidden {
  display: none;
}

/* ===============================
   MOBILE
   =============================== */

@media (max-width: 600px) {
  .order-card {
    padding: 14px !important;
  }

  .order-card h3 {
    font-size: 15px;
  }
}/* End custom CSS */