/* Staff order-details on phones. Desktop ≥768 untouched.
   Native section order. No display:contents. No snapshot/products swap. */

@media (max-width: 767.98px) {
  html:not([data-gm-public="1"]) .order-details-page {
    padding-inline: 0 !important;
    padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)) !important;
    overflow-x: clip !important;
    max-width: 100% !important;
  }

  html:not([data-gm-public="1"]) main:has(.order-details-page).app-scroll-viewport > div,
  html:not([data-gm-public="1"]) main.app-scroll-viewport:has(.order-details-page) > div {
    padding-inline: 10px !important;
    max-width: 100% !important;
  }

  html:not([data-gm-public="1"]) .order-details-page > .sticky {
    position: sticky !important;
    top: 0 !important;
    z-index: 24 !important;
    margin-inline: -10px;
    padding: 6px 10px 8px !important;
    background: color-mix(in srgb, hsl(var(--card)) 94%, hsl(var(--background))) !important;
    border-bottom: 1px solid hsl(var(--border) / 0.7) !important;
  }

  html:not([data-gm-public="1"]) .order-details-toolbar {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 0 !important;
    max-width: 100% !important;
  }

  html:not([data-gm-public="1"]) .order-details-toolbar > [data-orientation="vertical"],
  html:not([data-gm-public="1"]) .order-details-toolbar > .h-5.shrink-0 {
    display: none !important;
  }

  html:not([data-gm-public="1"]) .order-details-toolbar > button:first-child {
    width: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    border-radius: 10px !important;
  }

  html:not([data-gm-public="1"]) .order-details-identity {
    flex: 1 1 calc(100% - 52px) !important;
    min-width: 0 !important;
    gap: 6px !important;
  }

  html:not([data-gm-public="1"]) .order-details-identity > span:first-child,
  html:not([data-gm-public="1"]) .order-details-page h1 {
    font-size: 17px !important;
    line-height: 1.2 !important;
    letter-spacing: -0.03em !important;
    overflow-wrap: anywhere !important;
    max-width: 100% !important;
  }

  html:not([data-gm-public="1"]) .order-details-identity [class*="rounded-full"] {
    font-size: 11px !important;
    padding: 3px 8px !important;
    max-width: 100%;
  }

  html:not([data-gm-public="1"]) .order-details-toolbar > button.h-8,
  html:not([data-gm-public="1"]) .order-details-toolbar > button[class*="font-extrabold"] {
    flex: 1 1 100% !important;
    min-height: 44px !important;
    height: 44px !important;
    font-size: 14px !important;
    border-radius: 12px !important;
  }

  html:not([data-gm-public="1"]) .order-details-actions {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    margin: 0 !important;
  }

  html:not([data-gm-public="1"]) .order-details-actions > *,
  html:not([data-gm-public="1"]) .order-details-actions a,
  html:not([data-gm-public="1"]) .order-details-actions button {
    min-height: 44px !important;
    height: 44px !important;
    width: 100% !important;
    border-radius: 12px !important;
    font-size: 12px !important;
    padding-inline: 6px !important;
    font-weight: 800 !important;
  }

  /* One column, source order: snapshot / journey / main / side stay as React rendered them. */
  html:not([data-gm-public="1"]) .order-details-page [data-gm="order-grid"] {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 10px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  html:not([data-gm-public="1"]) .order-details-page [data-gm="order-main"],
  html:not([data-gm-public="1"]) .order-details-page [data-gm="order-side"] {
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 10px !important;
  }

  html:not([data-gm-public="1"]) .order-details-page [class*="rounded-2xl"],
  html:not([data-gm-public="1"]) .order-details-page [class*="rounded-xl"],
  html:not([data-gm-public="1"]) .order-details-page [data-gm="customer-panel"],
  html:not([data-gm-public="1"]) .order-details-page [data-gm="shipping-panel"],
  html:not([data-gm-public="1"]) .order-details-page [data-gm="confirm-cards"],
  html:not([data-gm-public="1"]) .order-details-page [data-gm="journey"] {
    max-width: 100% !important;
    min-width: 0 !important;
    border-radius: 14px !important;
    box-shadow: none !important;
    overflow-x: clip;
  }

  html:not([data-gm-public="1"]) .order-details-page h2,
  html:not([data-gm-public="1"]) .order-details-page h3 {
    font-size: 15px !important;
    line-height: 1.3 !important;
    letter-spacing: -0.02em !important;
  }

  html:not([data-gm-public="1"]) [data-gm="customer-panel"] .gm-od-cust-namewrap .text-sm,
  html:not([data-gm-public="1"]) [data-gm="customer-panel"] .gm-od-cust-name {
    font-size: 16px !important;
    line-height: 1.3 !important;
  }

  html:not([data-gm-public="1"]) [data-gm="customer-panel"] .gm-od-cust-phone {
    gap: 8px !important;
  }

  html:not([data-gm-public="1"]) [data-gm="customer-panel"] .gm-od-contact-btn,
  html:not([data-gm-public="1"]) [data-gm="customer-panel"] a.gm-od-contact-btn,
  html:not([data-gm-public="1"]) [data-gm="customer-panel"] button.gm-od-contact-btn {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    border-radius: 12px !important;
  }

  html:not([data-gm-public="1"]) [data-gm="customer-panel"] button.h-8,
  html:not([data-gm-public="1"]) [data-gm="shipping-panel"] button.h-8 {
    min-height: 44px !important;
    height: 44px !important;
    font-size: 13px !important;
    border-radius: 12px !important;
  }

  html:not([data-gm-public="1"]) [data-gm="confirm-cards"] .gm-confirm-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    padding: 0 10px 12px !important;
  }

  html:not([data-gm-public="1"]) [data-gm="confirm-cards"] .gm-confirm-primary {
    min-height: 48px !important;
    margin: 0 10px 10px !important;
    width: calc(100% - 20px) !important;
    border-radius: 14px !important;
    font-size: 15px !important;
    font-weight: 900 !important;
  }

  html:not([data-gm-public="1"]) [data-gm="confirm-cards"] .gm-confirm-tile,
  html:not([data-gm-public="1"]) [data-gm="confirm-cards"] .gm-confirm-danger {
    min-height: 56px !important;
    padding: 10px 8px !important;
    border-radius: 12px !important;
  }

  html:not([data-gm-public="1"]) [data-gm="confirm-cards"] .gm-confirm-label {
    font-size: 13px !important;
    font-weight: 900 !important;
    line-height: 1.25 !important;
  }

  html:not([data-gm-public="1"]) [data-gm="confirm-cards"] .gm-confirm-tile[data-action="no_answer"] {
    background: #e8eef5 !important;
    border-color: #94a3b8 !important;
    color: #0f172a !important;
  }
  html:not([data-gm-public="1"]) [data-gm="confirm-cards"] .gm-confirm-tile[data-action="not_reachable"] {
    background: #fff4d6 !important;
    border-color: #f59e0b !important;
    color: #7c4a03 !important;
  }
  html:not([data-gm-public="1"]) [data-gm="confirm-cards"] .gm-confirm-tile[data-action="follow_up"] {
    background: #efe7ff !important;
    border-color: #8b5cf6 !important;
    color: #4c1d95 !important;
  }
  html.dark [data-gm="confirm-cards"] .gm-confirm-tile[data-action="no_answer"] {
    background: rgba(148, 163, 184, 0.22) !important;
    color: #e2e8f0 !important;
  }
  html.dark [data-gm="confirm-cards"] .gm-confirm-tile[data-action="not_reachable"] {
    background: rgba(245, 158, 11, 0.2) !important;
    color: #fde68a !important;
  }
  html.dark [data-gm="confirm-cards"] .gm-confirm-tile[data-action="follow_up"] {
    background: rgba(139, 92, 246, 0.22) !important;
    color: #ddd6fe !important;
  }

  html:not([data-gm-public="1"]) [data-gm="journey"] .snap-x,
  html:not([data-gm-public="1"]) [data-gm="journey"] .flex.snap-x {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    gap: 8px !important;
    padding-bottom: 4px !important;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity !important;
  }

  html:not([data-gm-public="1"]) [data-gm="journey"] .snap-x > div,
  html:not([data-gm-public="1"]) [data-gm="journey"] .flex.snap-x > div {
    flex: 0 0 auto !important;
    width: 112px !important;
    min-width: 112px !important;
    padding: 10px 8px !important;
    border: 1px solid hsl(var(--border)) !important;
    border-radius: 12px !important;
    background: hsl(var(--background) / 0.6) !important;
    text-align: center !important;
    scroll-snap-align: start;
  }

  html:not([data-gm-public="1"]) [data-gm="journey"] [data-gm="journey-line"] {
    display: none !important;
  }

  html:not([data-gm-public="1"]) [data-gm="journey"] .gm-journey-label,
  html:not([data-gm-public="1"]) [data-gm="journey"] .truncate {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
  }

  html:not([data-gm-public="1"]) .order-details-page table {
    min-width: 520px;
  }
  html:not([data-gm-public="1"]) .order-details-page div:has(> table) {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    max-width: 100% !important;
  }

  html:not([data-gm-public="1"]) .order-details-page input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  html:not([data-gm-public="1"]) .order-details-page select,
  html:not([data-gm-public="1"]) .order-details-page textarea,
  html:not([data-gm-public="1"]) .order-details-page [role="combobox"] {
    min-height: 44px !important;
    font-size: 16px !important;
    max-width: 100% !important;
  }

  html:not([data-gm-public="1"]) .order-details-page p,
  html:not([data-gm-public="1"]) .order-details-page span {
    overflow-wrap: anywhere;
  }
}

@media (max-width: 359.98px) {
  html:not([data-gm-public="1"]) [data-gm="confirm-cards"] .gm-confirm-grid {
    grid-template-columns: 1fr !important;
  }
  html:not([data-gm-public="1"]) .order-details-identity > span:first-child,
  html:not([data-gm-public="1"]) .order-details-page h1 {
    font-size: 15px !important;
  }
}