/* HayOrder v1.1.43 – targeted order-detail refinement.
   Fixes: full-width mobile primary action, cleaner summary acceptance row,
   and compact/responsive order-history cards without altering the popup shell. */

/* ---------- DESKTOP SUMMARY: keep “Annahme erforderlich” compact and fully inside the card ---------- */
body #orders-ajax-root.ho-orders-143 .ho124-detail .ho128-summary-card{
  min-width:0!important;
  overflow:hidden!important;
}
body #orders-ajax-root.ho-orders-143 .ho124-detail .ho128-summary-row{
  min-width:0!important;
}
body #orders-ajax-root.ho-orders-143 .ho124-detail .ho128-summary-row>div{
  min-width:0!important;
  max-width:100%!important;
}
body #orders-ajax-root.ho-orders-143 .ho124-detail .ho128-summary-row .ho132-new-waiting{
  display:block!important;
  max-width:100%!important;
  white-space:normal!important;
  overflow:visible!important;
  overflow-wrap:anywhere!important;
  word-break:normal!important;
  font-size:14px!important;
  line-height:1.25!important;
  font-weight:700!important;
  letter-spacing:-.01em!important;
  text-align:right!important;
}
body #orders-ajax-root.ho-orders-143 .ho124-detail .ho128-summary-row:has(.ho132-new-waiting) small{
  max-width:100%!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
  font-size:9.5px!important;
  line-height:1.35!important;
}

/* ---------- ORDER HISTORY: compact cards with cleaner content alignment ---------- */
body #orders-ajax-root.ho-orders-143 .ho124-detail .ho55-history-section{
  padding:15px 16px 17px!important;
}
body #orders-ajax-root.ho-orders-143 .ho124-detail .ho55-section-heading{
  margin-bottom:11px!important;
  gap:10px!important;
}
body #orders-ajax-root.ho-orders-143 .ho124-detail .ho55-timeline-frame{
  padding:0!important;
  overflow:visible!important;
}
body #orders-ajax-root.ho-orders-143 .ho124-detail .ho55-timeline-frame .ho54-timeline,
body #orders-ajax-root.ho-orders-143 .ho124-detail .ho55-timeline-frame .ho54-timeline.has-cancellation,
body #orders-ajax-root.ho-orders-143 .ho124-detail .ho55-timeline-frame .ho136-timeline-grid,
body #orders-ajax-root.ho-orders-143 .ho124-detail .ho55-timeline-frame .ho136-timeline-grid.has-cancellation{
  display:grid!important;
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
  gap:9px!important;
  min-width:0!important;
  overflow:visible!important;
}
body #orders-ajax-root.ho-orders-143 .ho124-detail .ho55-timeline-frame .ho-timeline-event{
  display:grid!important;
  grid-template-columns:13px minmax(0,1fr)!important;
  align-items:start!important;
  align-content:start!important;
  column-gap:9px!important;
  row-gap:0!important;
  min-width:0!important;
  min-height:74px!important;
  height:auto!important;
  padding:11px 12px!important;
  border-radius:14px!important;
}
body #orders-ajax-root.ho-orders-143 .ho124-detail .ho55-timeline-frame .ho-timeline-dot{
  width:12px!important;
  height:12px!important;
  min-width:12px!important;
  margin-top:2px!important;
}
body #orders-ajax-root.ho-orders-143 .ho124-detail .ho55-timeline-frame .ho-timeline-event>div{
  min-width:0!important;
  display:block!important;
}
body #orders-ajax-root.ho-orders-143 .ho124-detail .ho55-timeline-frame .ho-timeline-event strong{
  display:block!important;
  margin:0!important;
  font-size:12.5px!important;
  line-height:1.25!important;
  font-weight:700!important;
  letter-spacing:-.01em!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
}
body #orders-ajax-root.ho-orders-143 .ho124-detail .ho55-timeline-frame .ho-timeline-event small{
  display:block!important;
  margin:4px 0 0!important;
  font-size:9.75px!important;
  line-height:1.35!important;
  font-weight:500!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
}

/* Footer button typography: Bold, not extra-bold. */
body #orders-ajax-root.ho-orders-143 .ho124-detail .ho68-footer-buttons button,
body #orders-ajax-root.ho-orders-143 .ho124-detail .ho68-footer-buttons .ho54-print{
  font-weight:700!important;
}

/* ---------- END DEVICES: use a wider breakpoint so resized desktop browsers behave like phones/tablets ---------- */
@media(max-width:960px){
  /* Mobile/tablet summary: larger than desktop, but still clean and contained. */
  body #orders-ajax-root.ho-orders-143 .ho124-detail .ho128-summary-row{
    grid-template-columns:minmax(92px,.72fr) minmax(0,1.28fr)!important;
    gap:12px!important;
  }
  body #orders-ajax-root.ho-orders-143 .ho124-detail .ho128-summary-row .ho132-new-waiting{
    font-size:18px!important;
    line-height:1.22!important;
    font-weight:700!important;
  }
  body #orders-ajax-root.ho-orders-143 .ho124-detail .ho128-summary-row:has(.ho132-new-waiting) small{
    font-size:11px!important;
    line-height:1.35!important;
  }

  /* History cards: two per row on end devices, compact and readable. */
  body #orders-ajax-root.ho-orders-143 .ho124-detail .ho55-timeline-frame .ho54-timeline,
  body #orders-ajax-root.ho-orders-143 .ho124-detail .ho55-timeline-frame .ho54-timeline.has-cancellation,
  body #orders-ajax-root.ho-orders-143 .ho124-detail .ho55-timeline-frame .ho136-timeline-grid,
  body #orders-ajax-root.ho-orders-143 .ho124-detail .ho55-timeline-frame .ho136-timeline-grid.has-cancellation{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:8px!important;
  }
  body #orders-ajax-root.ho-orders-143 .ho124-detail .ho55-timeline-frame .ho-timeline-event{
    min-height:82px!important;
    padding:12px 12px!important;
    grid-template-columns:13px minmax(0,1fr)!important;
    column-gap:9px!important;
  }
  body #orders-ajax-root.ho-orders-143 .ho124-detail .ho55-timeline-frame .ho-timeline-event strong{
    font-size:13.5px!important;
    line-height:1.25!important;
  }
  body #orders-ajax-root.ho-orders-143 .ho124-detail .ho55-timeline-frame .ho-timeline-event small{
    font-size:10.5px!important;
    line-height:1.4!important;
  }

  /* Primary action REALLY spans the whole first row from left to right. */
  body #orders-ajax-root.ho-orders-143 .ho124-detail .ho68-modal-footer{
    padding:12px 12px max(12px,env(safe-area-inset-bottom))!important;
  }
  body #orders-ajax-root.ho-orders-143 .ho124-detail .ho68-footer-buttons{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    grid-auto-flow:row!important;
    justify-content:stretch!important;
    align-items:stretch!important;
    gap:8px!important;
    width:100%!important;
    max-width:none!important;
  }
  body #orders-ajax-root.ho-orders-143 .ho124-detail .ho68-footer-buttons>.ho68-primary-form{
    grid-column:1 / -1!important;
    grid-row:auto!important;
    display:block!important;
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    margin:0!important;
    justify-self:stretch!important;
  }
  body #orders-ajax-root.ho-orders-143 .ho124-detail .ho68-footer-buttons>.ho68-primary-form>button{
    display:flex!important;
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    min-height:58px!important;
    justify-content:center!important;
  }
  body #orders-ajax-root.ho-orders-143 .ho124-detail .ho68-footer-buttons>.ho68-cancel-form{
    grid-column:1!important;
    width:100%!important;
    min-width:0!important;
    justify-self:stretch!important;
    margin:0!important;
  }
  body #orders-ajax-root.ho-orders-143 .ho124-detail .ho68-footer-buttons>.ho68-print-button{
    grid-column:2!important;
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    justify-self:stretch!important;
  }
  body #orders-ajax-root.ho-orders-143 .ho124-detail .ho68-footer-buttons>.ho68-cancel-form>button,
  body #orders-ajax-root.ho-orders-143 .ho124-detail .ho68-footer-buttons>.ho68-print-button{
    width:100%!important;
    min-width:0!important;
    max-width:none!important;
    min-height:58px!important;
  }
}

@media(max-width:520px){
  body #orders-ajax-root.ho-orders-143 .ho124-detail .ho55-history-section{
    padding:13px!important;
  }
  body #orders-ajax-root.ho-orders-143 .ho124-detail .ho55-timeline-frame .ho-timeline-event{
    min-height:78px!important;
    padding:10px 10px!important;
    grid-template-columns:12px minmax(0,1fr)!important;
    column-gap:8px!important;
  }
  body #orders-ajax-root.ho-orders-143 .ho124-detail .ho55-timeline-frame .ho-timeline-event strong{
    font-size:13px!important;
  }
  body #orders-ajax-root.ho-orders-143 .ho124-detail .ho55-timeline-frame .ho-timeline-event small{
    font-size:10px!important;
  }
  body #orders-ajax-root.ho-orders-143 .ho124-detail .ho128-summary-row .ho132-new-waiting{
    font-size:18.5px!important;
  }
}