/* MR Corn — Delivery Driver portal (front-end app on /driver/).
   Ported from preview/driver-portal.html. Mobile-first; the page IS the app. */

:root{
  --mcd-green:#0e6e63; --mcd-green-d:#0b5751;
  --mcd-gold:#c8911a; --mcd-gold-2:#e0a92e; --mcd-amber-d:#b8731a;
  --mcd-ok:#1f9d57; --mcd-ink:#1d2433; --mcd-mut:#7b8499; --mcd-line:#e3e7ee;
}

/* ── clean, full-screen app: hide the site chrome on this page ── */
body.mcd-page .mcgb-band,
body.mcd-page #header,
body.mcd-page .ct-header,
body.mcd-page .mc-footer,
body.mcd-page .ct-footer,
body.mcd-page .ct-breadcrumbs,
body.mcd-page .page-title,
body.mcd-page .entry-header{ display:none !important; }
/* Zero the body + every theme wrapper so nothing adds a top gap (the global
   glass-bar offsets the body to clear its fixed bar) or side padding. */
body.mcd-page{ background:#eef1f5; margin:0 !important; padding:0 !important; }
body.mcd-page #main,
body.mcd-page #content,
body.mcd-page main,
body.mcd-page article,
body.mcd-page .ct-main,
body.mcd-page .ct-container,
body.mcd-page .ct-content-block,
body.mcd-page .entry-content,
body.mcd-page .content-area,
body.mcd-page [class*="ct-container"]{ max-width:none !important; margin:0 !important; padding:0 !important; }

.mcd-app{
  max-width:480px; margin:0 auto; min-height:100vh; background:#eef1f5;
  display:flex; flex-direction:column; color:var(--mcd-ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  box-shadow:0 0 40px rgba(0,0,0,.12);
}
/* Phones: pin the app to the whole viewport — full width, edge-to-edge, no top
   gap from theme spacing, fits any mobile screen. */
@media (max-width:600px){
  /* !important defeats WordPress's .is-layout-constrained child rule, which
     otherwise forces max-width + margin:auto on the app and centres it. */
  body.mcd-page .mcd-app{
    position:fixed !important; inset:0 !important;
    width:auto !important; max-width:none !important; margin:0 !important;
    min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch;
    z-index:100000; box-shadow:none;
  }
}
.mcd-boot{ padding:40px 16px; text-align:center; color:var(--mcd-mut); font-size:14px; }
.mcd-app *{ box-sizing:border-box; }

/* header */
.mcd-head{ background:linear-gradient(180deg,var(--mcd-green),var(--mcd-green-d)); color:#fff;
  padding:14px 16px 13px; display:flex; align-items:center; gap:10px; position:sticky; top:0; z-index:5; }
.mcd-wm{ font-weight:800; font-size:16px; letter-spacing:.4px; }
.mcd-pt{ font-size:11px; opacity:.85; }
.mcd-acct{ margin-left:auto; position:relative; }
.mcd-drv{ display:flex; align-items:center; gap:7px; font-size:12px; cursor:pointer; color:#fff;
  background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.25); border-radius:999px; padding:4px 8px 4px 4px; max-width:200px; }
.mcd-drv .nm{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mcd-caret{ width:12px; height:12px; opacity:.9; flex:0 0 auto; }
.mcd-menu{ position:absolute; right:0; top:40px; background:#fff; border:1px solid var(--mcd-line); border-radius:12px;
  box-shadow:0 10px 26px rgba(0,0,0,.22); min-width:188px; overflow:hidden; z-index:20; display:none; }
.mcd-menu.open{ display:block; }
.mcd-mi{ display:flex; align-items:center; gap:10px; width:100%; border:0; background:none; cursor:pointer;
  padding:12px 14px; font-size:13.5px; color:var(--mcd-ink); text-align:left; }
.mcd-mi:hover,.mcd-mi:active{ background:#f4f6fa; }
.mcd-mi + .mcd-mi{ border-top:1px solid #eef1f5; }
.mcd-mi.danger{ color:#b32d2e; }
.mcd-mi svg{ width:17px; height:17px; flex:0 0 auto; }
.mcd-av{ width:20px; height:20px; border-radius:50%; background:var(--mcd-gold-2); color:#231a05;
  font-weight:800; font-size:11px; display:flex; align-items:center; justify-content:center; flex:0 0 auto; }

/* tabs */
.mcd-tabs{ display:flex; background:#fff; border-bottom:1px solid var(--mcd-line); position:sticky; top:47px; z-index:4; }
.mcd-tab{ flex:1; border:0; background:none; padding:11px 4px 9px; font-size:12px; font-weight:700; color:var(--mcd-mut);
  cursor:pointer; border-bottom:3px solid transparent; }
.mcd-tab .mcd-cnt{ display:inline-block; min-width:17px; font-size:10.5px; background:#e6eaf1; color:#5a6478;
  border-radius:999px; padding:0 5px; margin-left:4px; line-height:16px; vertical-align:middle; }
.mcd-tab.on{ color:var(--mcd-green); border-bottom-color:var(--mcd-green); }
.mcd-tab.on .mcd-cnt{ background:var(--mcd-green); color:#fff; }

.mcd-body{ padding:14px; flex:1; }

.mcd-scan{ display:flex; align-items:center; justify-content:center; gap:9px; width:100%; border:0; cursor:pointer;
  border-radius:12px; padding:14px; font-size:14.5px; font-weight:800; margin-bottom:14px;
  background:linear-gradient(180deg,var(--mcd-gold-2),var(--mcd-gold)); color:#231a05; box-shadow:0 4px 12px rgba(200,145,26,.32); }
.mcd-scan svg{ width:20px; height:20px; }
.mcd-scan:active{ transform:translateY(1px); }

.mcd-empty{ text-align:center; color:#8a92a4; font-size:13px; padding:34px 14px; line-height:1.5; }

/* list card */
.mcd-card{ background:#fff; border:1px solid var(--mcd-line); border-radius:12px; padding:13px 13px 12px; margin-bottom:11px;
  box-shadow:0 1px 3px rgba(0,0,0,.04); cursor:pointer; }
.mcd-card:active{ box-shadow:0 1px 2px rgba(0,0,0,.10) inset; }
.mcd-card-top{ display:flex; align-items:center; gap:8px; margin-bottom:4px; }
.mcd-num{ font-size:15px; font-weight:800; }
.mcd-pill{ font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.4px; border-radius:999px; padding:3px 8px; }
.mcd-pill.proc{ background:#e3edf7; color:#2c6aa8; }
.mcd-pill.ood{ background:#fbeede; color:#a9711a; }
.mcd-pill.done{ background:#e6f3ec; color:#1f7a48; }
.mcd-who{ font-size:13px; font-weight:600; color:#2a3346; }
.mcd-ad{ font-size:12px; color:var(--mcd-mut); margin:1px 0 8px; line-height:1.4; }
.mcd-ft{ display:flex; align-items:center; gap:10px; font-size:11.5px; color:var(--mcd-mut); border-top:1px solid #eef1f5; padding-top:8px; }
.mcd-tot{ margin-left:auto; font-weight:800; color:var(--mcd-ink); font-size:13px; }
.mcd-go{ display:block; text-align:right; margin-top:6px; font-size:11px; color:var(--mcd-green); font-weight:700; }

/* detail */
.mcd-back{ display:inline-flex; align-items:center; gap:5px; font-size:12.5px; color:var(--mcd-green); font-weight:700;
  background:none; border:0; cursor:pointer; padding:0; margin-bottom:12px; }
.mcd-ocard{ background:#fff; border:1px solid var(--mcd-line); border-radius:12px; padding:15px; box-shadow:0 1px 3px rgba(0,0,0,.04); }
.mcd-on{ font-size:16px; font-weight:800; margin:0 0 2px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.mcd-od{ font-size:11.5px; color:var(--mcd-mut); margin:0 0 12px; }
.mcd-addr{ font-size:13px; color:#3a4760; line-height:1.5; margin-bottom:10px; }
.mcd-addr strong{ color:var(--mcd-ink); }
.mcd-rowl{ display:flex; justify-content:space-between; gap:10px; font-size:12.5px; padding:7px 0; border-top:1px solid #eef1f5; }
.mcd-rowl .lk{ color:var(--mcd-mut); }
.mcd-rowl .lv{ font-weight:600; text-align:right; }
.mcd-total{ display:flex; justify-content:space-between; font-size:15px; font-weight:800; padding:10px 0 2px; border-top:2px solid var(--mcd-ink); margin-top:6px; }

.mcd-btn{ display:block; width:100%; border:0; border-radius:11px; padding:15px; font-size:15px; font-weight:800; cursor:pointer; margin-top:14px; text-align:center; }
.mcd-btn.gold{ background:linear-gradient(180deg,var(--mcd-gold-2),var(--mcd-gold)); color:#231a05; box-shadow:0 4px 12px rgba(200,145,26,.32); }
.mcd-btn.amber{ background:linear-gradient(180deg,#d99227,var(--mcd-amber-d)); color:#fff; box-shadow:0 4px 12px rgba(184,115,26,.32); }
.mcd-btn.ghost{ background:#fff; color:var(--mcd-ink); border:1px solid #cfd5e0; }
.mcd-btn:active{ transform:translateY(1px); }
.mcd-btn[disabled]{ opacity:.6; cursor:default; }
.mcd-hint{ font-size:11px; color:var(--mcd-mut); text-align:center; margin-top:9px; line-height:1.45; }

/* change-password form */
.mcd-label{ display:block; font-size:12px; font-weight:700; color:#3a4760; margin:12px 0 5px; }
.mcd-inwrap{ position:relative; }
.mcd-input{ width:100%; border:1px solid #cfd5e0; border-radius:11px; padding:13px 46px 13px 13px; font-size:15px; color:var(--mcd-ink);
  background:#fff; -webkit-appearance:none; appearance:none; }
.mcd-input:focus{ outline:none; border-color:var(--mcd-green); box-shadow:0 0 0 3px rgba(14,110,99,.14); }
.mcd-input.err{ border-color:#d9534f; }
.mcd-eye{ position:absolute; right:7px; top:50%; transform:translateY(-50%); border:0; background:none; cursor:pointer;
  color:var(--mcd-mut); font-size:11px; font-weight:700; padding:6px 8px; letter-spacing:.3px; }
.mcd-rules{ margin:11px 0 2px; padding:0; list-style:none; }
.mcd-rules li{ font-size:12px; color:var(--mcd-mut); display:flex; align-items:center; gap:8px; padding:2px 0; }
.mcd-rules li .dot{ width:15px; height:15px; border-radius:50%; border:1.5px solid #c6ccd8; display:inline-flex;
  align-items:center; justify-content:center; font-size:10px; color:#fff; flex:0 0 auto; line-height:1; }
.mcd-rules li.ok{ color:#2a3346; }
.mcd-rules li.ok .dot{ background:var(--mcd-ok); border-color:var(--mcd-ok); }

/* camera scan */
.mcd-cam{ flex:1; display:flex; flex-direction:column; background:#10131c; color:#fff; min-height:60vh; }
.mcd-view{ flex:1; position:relative; display:flex; align-items:center; justify-content:center; overflow:hidden;
  background:radial-gradient(circle at 50% 42%,#2a2f3e,#10131c 72%); }
.mcd-view video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.mcd-view canvas{ display:none; }
.mcd-retic{ width:200px; height:200px; position:relative; z-index:2; }
.mcd-retic span{ position:absolute; width:34px; height:34px; border:3px solid var(--mcd-gold-2); }
.mcd-retic .tl{ top:0; left:0; border-right:0; border-bottom:0; border-radius:10px 0 0 0; }
.mcd-retic .tr{ top:0; right:0; border-left:0; border-bottom:0; border-radius:0 10px 0 0; }
.mcd-retic .bl{ bottom:0; left:0; border-right:0; border-top:0; border-radius:0 0 0 10px; }
.mcd-retic .br{ bottom:0; right:0; border-left:0; border-top:0; border-radius:0 0 10px 0; }
.mcd-laser{ position:absolute; left:6px; right:6px; height:2px; background:var(--mcd-gold-2); box-shadow:0 0 10px var(--mcd-gold-2);
  top:8px; animation:mcd-scan 1.7s ease-in-out infinite; }
@keyframes mcd-scan{ 0%,100%{ top:8px; } 50%{ top:188px; } }
.mcd-ctxt{ padding:14px 16px 8px; text-align:center; font-size:13px; color:#cdd4e4; z-index:2; }
.mcd-cact{ padding:0 16px 18px; z-index:2; }
.mcd-cancel{ width:100%; background:none; color:#cdd4e4; border:1px solid #39415a; border-radius:11px; padding:12px; font-size:13px; cursor:pointer; }

/* success */
.mcd-ok{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:34px 24px; }
.mcd-okring{ width:88px; height:88px; border-radius:50%; background:#e6f6ec; border:3px solid var(--mcd-ok);
  display:flex; align-items:center; justify-content:center; font-size:46px; color:var(--mcd-ok); margin-bottom:18px; }
.mcd-ok h2{ margin:0 0 6px; font-size:19px; }
.mcd-ok p{ margin:0 0 6px; font-size:13px; color:#5a6478; line-height:1.5; }
.mcd-okpill{ margin-top:10px; font-size:11.5px; background:#e6efe9; color:#1f7a48; border:1px solid #bfe0cc; border-radius:999px; padding:4px 12px; }

/* toast */
.mcd-toast{ position:fixed; left:50%; transform:translateX(-50%) translateY(10px); bottom:18px; max-width:440px; width:calc(100% - 28px);
  background:var(--mcd-ink); color:#fff; border-radius:10px; padding:11px 14px; font-size:12.5px; text-align:center;
  opacity:0; transition:opacity .2s,transform .2s; pointer-events:none; box-shadow:0 6px 18px rgba(0,0,0,.35); z-index:100001; }
.mcd-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* error banner */
.mcd-err{ background:#fdecea; color:#9b2c20; border:1px solid #f3c0ba; border-radius:10px; padding:11px 13px; font-size:12.5px; margin-bottom:12px; line-height:1.45; }

/* gate (login / no-access) */
.mcd-gate{ min-height:60vh; display:flex; align-items:center; justify-content:center; padding:30px 16px;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; }
.mcd-gatecard{ background:#fff; border:1px solid var(--mcd-line); border-radius:14px; padding:26px 22px; max-width:380px; width:100%;
  text-align:center; box-shadow:0 4px 18px rgba(0,0,0,.08); }
.mcd-gatecard h2{ margin:0 0 8px; font-size:19px; color:var(--mcd-ink); }
.mcd-gatecard p{ margin:0 0 16px; font-size:13.5px; color:var(--mcd-mut); line-height:1.5; }
.mcd-gatecard .mcd-btn{ display:inline-block; width:auto; min-width:160px; text-decoration:none;
  background:linear-gradient(180deg,var(--mcd-gold-2),var(--mcd-gold)); color:#231a05; }
.mcd-gatecard .mcd-btn.ghost{ background:#fff; color:var(--mcd-ink); border:1px solid #cfd5e0; }