/* HayOrder v1.1.42 – mobile summary + compact two-column timeline refinement.
   Scope is intentionally limited to the order-detail modal. */

@media (max-width:700px){
  /* Make "Annahme erforderlich" quieter and better proportioned inside the summary card. */
  body #orders-ajax-root.ho-orders-142 .ho124-detail .ho128-summary-row .ho132-new-waiting{
    font-size:14px!important;
    line-height:1.28!important;
    font-weight:700!important;
    letter-spacing:-.01em!important;
  }
  body #orders-ajax-root.ho-orders-142 .ho124-detail .ho128-summary-row:has(.ho132-new-waiting) small{
    font-size:10px!important;
    line-height:1.35!important;
    color:#94a3b2!important;
  }
  body #orders-ajax-root.ho-orders-142 .ho124-detail .ho128-summary-row:has(.ho132-new-waiting)>div{
    gap:4px!important;
  }

  /* Timeline typography: compact and calm on phones/tablets. */
  body #orders-ajax-root.ho-orders-142 .ho124-detail .ho55-history-section{
    padding:14px!important;
  }
  body #orders-ajax-root.ho-orders-142 .ho124-detail .ho55-section-heading{
    margin-bottom:12px!important;
    gap:8px!important;
  }
  body #orders-ajax-root.ho-orders-142 .ho124-detail .ho55-section-heading h3{
    font-size:22px!important;
    line-height:1.08!important;
    font-weight:700!important;
    letter-spacing:-.025em!important;
  }
  body #orders-ajax-root.ho-orders-142 .ho124-detail .ho55-section-heading small{
    font-size:11px!important;
    line-height:1.35!important;
  }
  body #orders-ajax-root.ho-orders-142 .ho124-detail .ho55-timeline-frame .ho54-timeline,
  body #orders-ajax-root.ho-orders-142 .ho124-detail .ho55-timeline-frame .ho54-timeline.has-cancellation,
  body #orders-ajax-root.ho-orders-142 .ho124-detail .ho55-timeline-frame .ho136-timeline-grid,
  body #orders-ajax-root.ho-orders-142 .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-142 .ho124-detail .ho55-timeline-frame .ho-timeline-event{
    min-height:82px!important;
    padding:11px 12px!important;
    border-radius:14px!important;
    gap:8px!important;
  }
  body #orders-ajax-root.ho-orders-142 .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-142 .ho124-detail .ho55-timeline-frame .ho-timeline-event strong{
    font-size:12.5px!important;
    line-height:1.24!important;
    font-weight:700!important;
    letter-spacing:-.01em!important;
  }
  body #orders-ajax-root.ho-orders-142 .ho124-detail .ho55-timeline-frame .ho-timeline-event small{
    margin-top:4px!important;
    font-size:9.75px!important;
    line-height:1.42!important;
    font-weight:500!important;
    color:#9baab8!important;
  }
}

/* Small phones: keep two cards per row instead of falling back to one giant card. */
@media (max-width:430px){
  body #orders-ajax-root.ho-orders-142 .ho124-detail .ho128-summary-row .ho132-new-waiting{
    font-size:13.5px!important;
    line-height:1.28!important;
  }
  body #orders-ajax-root.ho-orders-142 .ho124-detail .ho128-summary-row:has(.ho132-new-waiting) small{
    font-size:9.5px!important;
  }
  body #orders-ajax-root.ho-orders-142 .ho124-detail .ho55-timeline-frame .ho54-timeline,
  body #orders-ajax-root.ho-orders-142 .ho124-detail .ho55-timeline-frame .ho54-timeline.has-cancellation,
  body #orders-ajax-root.ho-orders-142 .ho124-detail .ho55-timeline-frame .ho136-timeline-grid,
  body #orders-ajax-root.ho-orders-142 .ho124-detail .ho55-timeline-frame .ho136-timeline-grid.has-cancellation{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:7px!important;
  }
  body #orders-ajax-root.ho-orders-142 .ho124-detail .ho55-timeline-frame .ho-timeline-event{
    min-height:78px!important;
    padding:10px 10px!important;
    border-radius:13px!important;
    grid-template-columns:11px minmax(0,1fr)!important;
    gap:7px!important;
  }
  body #orders-ajax-root.ho-orders-142 .ho124-detail .ho55-timeline-frame .ho-timeline-dot{
    width:11px!important;
    height:11px!important;
    min-width:11px!important;
  }
  body #orders-ajax-root.ho-orders-142 .ho124-detail .ho55-timeline-frame .ho-timeline-event strong{
    font-size:11.75px!important;
  }
  body #orders-ajax-root.ho-orders-142 .ho124-detail .ho55-timeline-frame .ho-timeline-event small{
    font-size:9px!important;
    line-height:1.35!important;
  }
}