/* /driver/assets/css/history_orders.css — Customer history UI (LK24H) */
/* Fix Android/WebView: ensure boolean [hidden] really hides elements */
[hidden]{display:none !important;}

:root{ --brand:#c62828; --bg:#f6f7fb; --card:#fff; --muted:#6b7280; --line:#e5e7eb; --shadow: 0 8px 24px rgba(0,0,0,.08); }
*{ box-sizing:border-box; }
body{ background:var(--bg); }
.wrap{ max-width: 980px; margin: 0 auto; padding: 14px; }
.hhd{ position: sticky; top:0; z-index: 30; background: rgba(246,247,251,.92); backdrop-filter: blur(8px); border-bottom:1px solid var(--line); }
.hhd__wrap{ max-width: 980px; margin: 0 auto; padding: 12px 14px; display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.hhd__title{ font-size: 18px; font-weight: 800; }
.hhd__sub{ font-size: 12px; color: var(--muted); margin-top: 2px; }
.hhd__right{ display:flex; gap:10px; align-items:center; }

.card{ background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); padding: 12px; margin: 12px 0; }
.warn{ border-color: #fcd34d; }
.warn__t{ font-weight: 800; }
.warn__p{ color: var(--muted); margin-top: 6px; }

.btn{ appearance:none; border:1px solid var(--line); background:#fff; color:#111827; padding: 8px 10px; border-radius: 12px; cursor:pointer; font-weight:700; }
.btn:hover{ border-color:#d1d5db; }
.btn--primary{ background: var(--brand); border-color: var(--brand); color:#fff; }
.btn--ghost{ background: transparent; }
.btn--sm{ padding: 6px 8px; border-radius: 10px; font-weight:700; font-size:12px; }

.filters__row{ display:flex; gap:10px; flex-wrap:wrap; }
.filters__field{ display:flex; flex-direction:column; gap:6px; min-width: 140px; }
.filters__field--grow{ flex: 1 1 280px; min-width: 220px; }
.filters label{ font-size: 12px; color: var(--muted); font-weight:700; }
.filters input, .filters select{ border:1px solid var(--line); border-radius: 12px; padding: 9px 10px; outline:none; }
.filters__actions{ display:flex; gap:10px; justify-content:flex-end; margin-top: 10px; }
.filters__note{ font-size: 12px; color: var(--muted); margin-top: 10px; }

.chips{ display:flex; gap:8px; flex-wrap:wrap; }
.chip{ border:1px solid var(--line); background:#fff; padding: 7px 10px; border-radius: 999px; cursor:pointer; font-weight:800; font-size:12px; color:#111827; }
.chip--on{ background: rgba(198,40,40,.08); border-color: rgba(198,40,40,.35); color: #8a1d1d; }

.summary__grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.summary__item{ border:1px dashed var(--line); border-radius: 14px; padding: 10px; background: #fff; }
.summary__item .k{ font-size: 12px; color: var(--muted); font-weight:800; }
.summary__item .v{ font-size: 18px; font-weight: 900; margin-top: 4px; }

.activeChips{ display:flex; gap:8px; flex-wrap:wrap; margin: 10px 0 0; }
.achip{ display:inline-flex; padding: 6px 10px; border-radius: 999px; background:#111827; color:#fff; font-size: 12px; font-weight:800; }

.list{ margin-top: 8px; }
.dayBlock{ margin: 14px 0; }
.dayHead{ position: sticky; top: 56px; z-index: 10; display:flex; justify-content:space-between; align-items:center; padding: 8px 10px; background: rgba(255,255,255,.92); backdrop-filter: blur(6px); border:1px solid var(--line); border-radius: 14px; box-shadow: 0 6px 18px rgba(0,0,0,.05); }
.dayHead__t{ font-weight: 900; }
.dayHead__s{ color: var(--muted); font-size: 12px; font-weight:800; }

.ocard{ background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 12px; margin-top: 10px; box-shadow: 0 10px 26px rgba(0,0,0,.06); }
.ocard__top{ display:flex; justify-content:space-between; gap:10px; align-items:flex-start; flex-wrap:wrap; }
.ocard__t{ font-size: 14px; font-weight: 900; }
.ocard__m{ font-size: 12px; color: var(--muted); margin-top: 4px; display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.dot{ opacity:.6; }
.ocard__actions{ display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }

.b{ display:inline-flex; align-items:center; padding: 3px 8px; border-radius: 999px; font-weight:900; font-size:11px; border:1px solid var(--line); color:#111827; background:#fff; }
.b--ok{ background: rgba(34,197,94,.12); border-color: rgba(34,197,94,.35); color:#14532d; }
.b--bad{ background: rgba(239,68,68,.10); border-color: rgba(239,68,68,.28); color:#7f1d1d; }
.b--warn{ background: rgba(245,158,11,.12); border-color: rgba(245,158,11,.35); color:#7c2d12; }

.drv{ display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top: 10px; padding: 10px; border: 1px solid var(--line); border-radius: 14px; background: #fafafa; }
.drv--na{ color: var(--muted); font-weight:800; }
.drv__name{ font-weight: 900; }
.drv__meta{ font-size: 12px; color: var(--muted); margin-top: 2px; }
.drv__act{ display:flex; gap:8px; }

.wps{ margin-top: 10px; border-left: 3px solid rgba(198,40,40,.18); padding-left: 10px; }
.wp{ display:flex; gap:10px; align-items:flex-start; padding: 6px 0; }
.wp__tag{ min-width: 68px; font-weight: 900; color:#8a1d1d; font-size: 12px; }
.wp__addr{ color:#111827; font-weight:700; font-size: 13px; }

.ret{ margin-top: 8px; font-size: 12px; color: var(--muted); font-weight:800; }

.pager{ display:flex; justify-content:space-between; align-items:center; gap:10px; margin: 16px 0 30px; }
.pager__info{ font-weight: 900; }

.drawer{ position: fixed; inset:0; z-index: 80; background: rgba(0,0,0,.35); display:flex; align-items:flex-end; justify-content:center; padding: 12px; }
.drawer__sheet{ width: min(980px, 100%); max-height: 92vh; overflow:auto; background:#fff; border-radius: 18px; box-shadow: 0 18px 56px rgba(0,0,0,.25); }
.drawer__head{ display:flex; justify-content:space-between; align-items:flex-start; padding: 12px; border-bottom: 1px solid var(--line); gap:10px; position: sticky; top:0; background:#fff; }
.drawer__title{ font-weight: 900; font-size: 15px; }
.drawer__sub{ font-size: 12px; color: var(--muted); margin-top: 2px; }
.drawer__body{ padding: 12px; }
.drawer__foot{ display:flex; gap:10px; justify-content:flex-end; padding: 12px; border-top: 1px solid var(--line); position: sticky; bottom:0; background:#fff; flex-wrap:wrap; }

.kvgrid{ display:grid; grid-template-columns: repeat(2, 1fr); gap:10px; margin-top: 10px; }
.kv{ border: 1px dashed var(--line); border-radius: 14px; padding: 10px; }
.kv .k{ font-size: 12px; color: var(--muted); font-weight:900; }
.kv .v{ margin-top: 4px; font-weight:800; }
.sectionTitle{ margin: 12px 0 6px; font-weight: 900; }
.hint{ margin-top: 10px; font-size: 12px; color: var(--muted); font-weight:800; }

.modal{ position: fixed; inset:0; z-index: 90; background: rgba(0,0,0,.4); display:flex; align-items:center; justify-content:center; padding: 12px; }
.modal__sheet{ width: min(980px, 100%); background:#fff; border-radius: 18px; overflow:hidden; box-shadow: 0 18px 56px rgba(0,0,0,.25); }
.modal__sheet--small{ width: min(520px, 100%); }
.modal__head{ display:flex; gap:10px; align-items:flex-start; justify-content:space-between; padding: 12px; border-bottom: 1px solid var(--line); }
.modal__title{ font-weight: 900; }
.modal__sub{ font-size: 12px; color: var(--muted); font-weight:800; margin-top:2px; }
.modal__actions{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.modal__body{ padding: 0; }
.map{ width: 100%; height: 420px; }

.stars{ display:flex; gap:8px; justify-content:center; padding: 12px; }
.star{ border: 1px solid var(--line); background:#fff; font-size: 22px; border-radius: 12px; padding: 8px 12px; cursor:pointer; }
.star--on{ background: rgba(245,158,11,.18); border-color: rgba(245,158,11,.35); }
.ta{ width: calc(100% - 24px); margin: 0 12px 12px; border:1px solid var(--line); border-radius: 14px; padding: 10px; outline:none; }
.hint#rateHint{ padding: 0 12px 12px; }

.loading, .empty{ padding: 14px; color: var(--muted); font-weight: 800; text-align:center; }

@media (max-width: 720px){
  .summary__grid{ grid-template-columns: repeat(2, 1fr); }
  .kvgrid{ grid-template-columns: 1fr; }
  .dayHead{ top: 96px; }
  .hhd__wrap{ flex-direction:column; align-items:stretch; }
  .hhd__right{ justify-content:flex-end; }
}