.elementor-7211 .elementor-element.elementor-element-8292854{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:2rem;--padding-bottom:8rem;--padding-left:4rem;--padding-right:4rem;}/* Start custom CSS for shortcode, class: .elementor-element-5d2dc8c *//* =========================================================
   WF TOKENS (damit Detailseite immer wie Dashboard aussieht)
   -> Variablen nicht nur in :root, sondern direkt im Wrapper
========================================================= */
.wf-orders-wrap{
  /* Card Background */
  --wf-bg: radial-gradient(circle at top left, #111827, #020617 55%, #020617);

  /* Section Background */
  --wf-section: #111827;

  --wf-border: rgba(255,255,255,.10);
  --wf-border2: rgba(255,255,255,.16);
  --wf-text: rgba(255,255,255,.92);
  --wf-muted: rgba(255,255,255,.70);
  --wf-muted2: rgba(255,255,255,.55);

  /* Webfire Orange */
  --wf-hero-orange: #f97316;
  --wf-hero-orange2: #fb923c;
  --wf-hero-orange-soft: #fed7aa;

  /* Orange Border Gradient */
  --wf-ob: linear-gradient(120deg, var(--wf-hero-orange), var(--wf-hero-orange-soft));
  --wf-ob-hover: linear-gradient(120deg, var(--wf-hero-orange), var(--wf-hero-orange2));

  --wf-r: 18px;
  --wf-shadow: 0 20px 60px rgba(0,0,0,.45);
  --wf-shadow2: 0 12px 30px rgba(0,0,0,.35);
}

/* =========================================================
   Elementor / Theme Overrides neutralisieren
   (sonst werden Farben/Opacity im Account Bereich “faded”)
========================================================= */
.elementor-shortcode .wf-orders-wrap,
.elementor-shortcode .wf-orders-wrap *{
  color: var(--wf-text) !important;
  opacity: 1 !important;
  filter: none !important;
}

/* =========================
   ORDER DETAIL PAGE (scoped)
========================= */
.wf-order-detail-page{
  margin-top: 6px;
}

/* Head */
.wf-order-detail-page .wf-order-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:18px;
  padding: 16px 0 20px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.wf-order-detail-page .wf-order-h{
  font-size: 18px;
  font-weight: 950;
  letter-spacing: -.02em;
  color: var(--wf-text) !important;
}

.wf-order-detail-page .wf-order-sub{
  margin-top:6px;
  font-size:13px;
  color: var(--wf-muted) !important;
}

/* Panels Layout */
.wf-order-detail-page .wf-order-panels{
  display:grid;
  grid-template-columns: 2fr 1fr;
  gap: 22px;
  margin-top: 22px;
}

@media (max-width: 900px){
  .wf-order-detail-page .wf-order-panels{grid-template-columns:1fr;}
}

/* Card / Panel (wie Dashboard – kein “raw var(--wf-bg)” hier) */
.wf-order-detail-page .wf-panelcard{
  border-radius: var(--wf-r);
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.22);
  padding: 18px;
  box-shadow: var(--wf-shadow2);
}

.wf-order-detail-page .wf-panelcard-title{
  font-weight: 950;
  font-size: 13px;
  letter-spacing:.02em;
  margin-bottom: 14px;
  color: var(--wf-muted) !important;
}

/* =========================
   Items
========================= */
.wf-order-detail-page .wf-items{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.wf-order-detail-page .wf-item{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:14px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.wf-order-detail-page .wf-item:last-child{
  border-bottom:none;
  padding-bottom: 0;
}

.wf-order-detail-page .wf-item-name{
  font-weight: 950;
  color: rgba(255,255,255,.94) !important;
}

.wf-order-detail-page .wf-item-meta{
  margin-top:4px;
  font-size:12px;
  color: var(--wf-muted2) !important;
}

.wf-order-detail-page .wf-item-right{
  font-weight:950;
  color: rgba(255,255,255,.92) !important;
  white-space:nowrap;
}

/* Woo Price spans dürfen nicht “grau” werden */
.wf-order-detail-page .woocommerce-Price-amount,
.wf-order-detail-page .woocommerce-Price-currencySymbol{
  color: rgba(255,255,255,.92) !important;
  font-weight: 950;
}

/* =========================
   Totals
========================= */
.wf-order-detail-page .wf-totals{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.wf-order-detail-page .wf-total-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:13px;
  color: var(--wf-muted) !important;
}

.wf-order-detail-page .wf-total-row:last-child{
  font-weight: 950;
  font-size:14px;
  color: rgba(255,255,255,.94) !important;
  padding-top:10px;
  margin-top: 4px;
  border-top:1px solid rgba(255,255,255,.10);
}

/* =========================
   Mini Box (Billing)
========================= */
.wf-order-detail-page .wf-mini{
  margin-top: 18px;
  padding: 16px;
  border-radius: var(--wf-r);
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
}

.wf-order-detail-page .wf-mini-title{
  font-size: 13px;
  font-weight: 950;
  margin-bottom: 10px;
  color: var(--wf-muted) !important;
}

.wf-order-detail-page .wf-mini-row{
  display:flex;
  justify-content:space-between;
  gap: 12px;
  font-size: 13px;
  padding: 4px 0;
}

.wf-order-detail-page .wf-mini-row span:first-child{
  color: var(--wf-muted2) !important;
}

.wf-order-detail-page .wf-mini-row span:last-child{
  color: rgba(255,255,255,.92) !important;
  font-weight: 900;
}

/* =========================
   Back Button
========================= */
.wf-order-detail-page .wf-btn-mini{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:18px;
  font-size:12px;
  font-weight:950;
  padding:10px 14px;
  border-radius:999px;
  text-decoration:none !important;
  transition:.18s ease;
}

.wf-order-detail-page .wf-btn-ghost{
  border:1px solid rgba(255,255,255,.15);
  color: rgba(255,255,255,.86) !important;
  background: rgba(0,0,0,.22);
}

.wf-order-detail-page .wf-btn-ghost:hover{
  border-color: var(--wf-hero-orange);
  color: var(--wf-text) !important;
}/* End custom CSS */