@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@500;600;700;800&display=swap');
:root{--green:#173d2d;--orange:#f28a2e;--ink:#17231c;--muted:#68756c;--line:#e2e9e3;--bg:#f4f7f4}*{box-sizing:border-box}body.rider-body{margin:0;background:var(--bg);color:var(--ink);font-family:'DM Sans',sans-serif}h1,h2,h3,.rider-brand{font-family:Manrope,sans-serif}button,input{font:inherit}button{cursor:pointer;border:0;border-radius:11px;font-weight:700;padding:12px 16px}button:disabled{opacity:.6}.rider-auth{min-height:100vh;display:grid;grid-template-columns:1fr 1fr}.rider-brand-panel{background:linear-gradient(145deg,#102820,#245b40);color:white;padding:7vw;display:flex;flex-direction:column;justify-content:center}.rider-brand{display:flex;gap:12px;align-items:center;color:white;text-decoration:none;font-weight:700}.rider-brand b{color:#ffb66f}.rider-brand-mark{background:var(--orange);padding:12px;border-radius:12px}.rider-eyebrow{color:var(--orange);font-weight:800;letter-spacing:.15em;font-size:11px}.rider-brand-panel h1{font-size:clamp(34px,5vw,56px);line-height:1.1}.rider-form-panel{display:grid;place-items:center;padding:24px}.rider-card{background:white;border:1px solid var(--line);border-radius:20px;padding:36px;width:min(100%,420px)}.rider-card h2{margin:0}.muted{color:var(--muted);line-height:1.6}.rider-card label{display:block;margin:18px 0 7px;font-weight:700}.rider-card input{width:100%;padding:14px;border:1px solid var(--line);border-radius:10px}.rider-card button{width:100%;margin-top:22px;background:var(--green);color:white}.rider-card a{display:block;margin-top:20px;text-align:center;color:var(--muted)}.rider-topbar{display:flex;justify-content:space-between;align-items:center;padding:16px 5vw;background:white;border-bottom:1px solid var(--line)}.rider-topbar>div{display:flex;align-items:center;gap:14px}.secondary{background:white;border:1px solid var(--line)}.rider-dashboard{max-width:1180px;margin:auto;padding:36px 24px}.heading{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:22px}.heading h1{margin:0;font-size:36px}.summary{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:24px 0}.summary>div,.order-card,.history-item{background:white;border:1px solid var(--line);border-radius:15px;padding:20px}.summary span,.order-head small{display:block;color:var(--muted);font-size:12px}.summary strong{font:800 28px Manrope;margin-top:8px;display:block}.orders-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.order-head{display:flex;justify-content:space-between;gap:12px}.order-head h3{margin:7px 0}.status{background:#e3f4e8;color:#17683a;padding:6px 10px;border-radius:30px;font-size:11px;height:max-content}.order-card dl{display:grid;grid-template-columns:130px 1fr;gap:9px;font-size:13px}.order-card dt{color:var(--muted)}.order-card dd{margin:0;overflow-wrap:anywhere;font-weight:600}.order-card a{color:var(--green)}.pay{background:var(--orange);color:#27190d}.history-section{margin-top:38px}.history{display:grid;gap:10px}.history-item{display:grid;grid-template-columns:1fr auto;gap:7px}.history-item small{grid-column:1/-1;color:var(--muted)}.empty{background:white;border:1px dashed #cbd7ce;border-radius:14px;padding:24px;text-align:center;color:var(--muted)}.message{background:#e3f4e8;color:#17683a;padding:12px;border-radius:10px;margin:12px 0}.message.error{background:#fff1e7;color:#8b3f0b}.message[hidden]{display:none}@media(max-width:760px){.rider-auth{grid-template-columns:1fr}.rider-brand-panel{display:none}.orders-grid{grid-template-columns:1fr}.summary{gap:8px}.summary>div{padding:12px}.summary span{font-size:10px}.summary strong{font-size:22px}.rider-dashboard{padding:22px 15px}.heading{align-items:flex-start}.heading h1{font-size:28px}.rider-topbar{padding:12px 15px}.rider-topbar>div{gap:7px;flex-direction:column;align-items:flex-end}.order-card dl{grid-template-columns:110px 1fr}}

/* Glossy interaction layer */
:root{--gloss-shadow:0 14px 35px rgba(16,40,32,.10)}
button,.rider-card,.summary>div,.order-card,.history-item{transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease,background .22s ease,filter .22s ease}
button{position:relative;overflow:hidden;isolation:isolate;box-shadow:0 5px 14px rgba(23,61,45,.12)}
button::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(115deg,rgba(255,255,255,.27),transparent 42%,rgba(255,255,255,.08));pointer-events:none}
button:hover:not(:disabled){transform:translateY(-2px);filter:brightness(1.07);box-shadow:0 10px 22px rgba(23,61,45,.2)}
button:active:not(:disabled){transform:translateY(1px) scale(.98);filter:brightness(.88);box-shadow:inset 0 3px 8px rgba(0,0,0,.2)}
button:focus-visible,input:focus-visible,a:focus-visible{outline:3px solid rgba(242,138,46,.45);outline-offset:3px}
.rider-card{box-shadow:0 24px 65px rgba(16,40,32,.12)}
.rider-card:hover,.summary>div:hover,.order-card:hover,.history-item:hover{transform:translateY(-3px);box-shadow:var(--gloss-shadow);border-color:#c7d8ca}
.rider-card input{transition:border-color .2s,box-shadow .2s}
.rider-card input:focus{outline:none;border-color:var(--orange);box-shadow:0 0 0 4px rgba(242,138,46,.13)}
.rider-card button,.pay{background:linear-gradient(135deg,#f6a34e,#e87920);color:#25170d}
.rider-card button:hover:not(:disabled),.pay:hover:not(:disabled){background:linear-gradient(135deg,#ffc078,#f28a2e)}
.rider-card button:active:not(:disabled),.pay:active:not(:disabled){background:#c96518}
.secondary{background:linear-gradient(135deg,#fff,#edf3ee);color:var(--green);border:1px solid #dce7dd}
.secondary:hover:not(:disabled){background:linear-gradient(135deg,#e8f3eb,#dcebe0);border-color:#b9d0be}
.secondary:active:not(:disabled){background:#c8ddce}
.rider-topbar{box-shadow:0 5px 20px rgba(16,40,32,.05)}
.rider-brand-mark{box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 5px 12px rgba(0,0,0,.12)}
.status{box-shadow:inset 0 1px 0 rgba(255,255,255,.8)}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;scroll-behavior:auto!important}}


/* Premium glossy rider dashboard cards and typography */
.rider-dashboard .summary>div{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  min-height:126px;
  padding:22px 23px;
  border:1px solid rgba(255,255,255,.82);
  border-radius:19px;
  background:linear-gradient(135deg,#ffffff 0%,#f1f8f2 55%,#e4f1e7 100%);
  box-shadow:0 12px 28px rgba(20,60,39,.09),inset 0 1px 0 rgba(255,255,255,.95);
}
.rider-dashboard .summary>div::before,
.rider-dashboard .order-card::before,
.rider-dashboard .history-item::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:linear-gradient(125deg,rgba(255,255,255,.72),transparent 42%,rgba(255,255,255,.12));
}
.rider-dashboard .summary>div:nth-child(2){
  background:linear-gradient(135deg,#fffaf2 0%,#fff0dc 58%,#ffe3c2 100%);
}
.rider-dashboard .summary>div:nth-child(3){
  background:linear-gradient(135deg,#f4fbff 0%,#e6f2fa 58%,#d7e9f5 100%);
}
.rider-dashboard .summary span{
  color:#53675a;
  font-size:12px;
  font-weight:800;
  letter-spacing:.075em;
  text-transform:uppercase;
}
.rider-dashboard .summary strong{
  margin-top:12px;
  color:#173d2d;
  font:800 clamp(27px,3vw,34px)/1.1 Manrope,sans-serif;
  letter-spacing:-.045em;
  text-shadow:0 1px 0 rgba(255,255,255,.9);
}
.rider-dashboard .orders-grid{gap:19px}
.rider-dashboard .order-card{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding:22px;
  border:1px solid rgba(205,224,209,.95);
  border-radius:19px;
  background:linear-gradient(145deg,#ffffff 0%,#f8fcf8 56%,#edf6ef 100%);
  box-shadow:0 13px 30px rgba(20,60,39,.085),inset 0 1px 0 rgba(255,255,255,.96);
}
.rider-dashboard .order-card::after{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:4px;
  background:linear-gradient(90deg,#1d7048,#75bd87 52%,#f28a2e);
  opacity:.9;
}
.rider-dashboard .order-head{
  align-items:flex-start;
  padding-bottom:13px;
  border-bottom:1px solid #e4eee6;
}
.rider-dashboard .order-head small{
  color:#718078;
  font-size:10px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.rider-dashboard .order-head h3{
  margin:6px 0 0;
  color:#173d2d;
  font-size:19px;
  font-weight:800;
  letter-spacing:-.025em;
}
.rider-dashboard .order-card dl{
  grid-template-columns:120px minmax(0,1fr);
  gap:11px 13px;
  margin:17px 0;
  font-size:13px;
  line-height:1.5;
}
.rider-dashboard .order-card dt{
  color:#718078;
  font-size:11px;
  font-weight:700;
  letter-spacing:.035em;
}
.rider-dashboard .order-card dd{
  color:#263c2e;
  font-weight:700;
}
.rider-dashboard .order-card a{
  color:#17643c;
  font-weight:800;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
}
.rider-dashboard .status{
  padding:7px 11px;
  border:1px solid #a8d8b7;
  background:linear-gradient(135deg,#e9faef,#c9efd5);
  color:#116338;
  font-weight:800;
  letter-spacing:.035em;
  text-transform:capitalize;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 3px 8px rgba(17,99,56,.08);
}
.rider-dashboard .order-card .pay{
  min-height:42px;
  padding:11px 17px;
  border:1px solid rgba(255,255,255,.65);
  border-radius:11px;
  background:linear-gradient(120deg,#ffc078 0%,#f28a2e 56%,#dc701c 100%);
  color:#38200c;
  font-weight:800;
  box-shadow:0 7px 16px rgba(217,106,25,.2),inset 0 1px 0 rgba(255,255,255,.65);
}
.rider-dashboard .history-section h2{
  color:#173d2d;
  font:800 23px Manrope,sans-serif;
  letter-spacing:-.025em;
}
.rider-dashboard .history-item{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  padding:16px 19px;
  border:1px solid #dce9df;
  border-radius:15px;
  background:linear-gradient(135deg,#fff 0%,#f1f8f2 100%);
  box-shadow:0 7px 18px rgba(20,60,39,.055),inset 0 1px 0 rgba(255,255,255,.95);
}
.rider-dashboard .history-item strong{
  color:#173d2d;
  font-size:14px;
  font-weight:800;
}
.rider-dashboard .history-item small{
  color:#718078;
  font-size:11px;
  font-weight:600;
}
.rider-dashboard .empty{
  border:1px dashed #a9c5af;
  background:linear-gradient(135deg,#fff,#eef7f0);
  color:#587061;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95);
}
.rider-dashboard .message{
  border:1px solid #b6dfc2;
  background:linear-gradient(135deg,#edfff2,#d4f3dd);
  color:#17683a;
  box-shadow:0 6px 16px rgba(23,104,58,.08),inset 0 1px 0 rgba(255,255,255,.9);
}
.rider-dashboard .message.error{
  border-color:#f1c2a8;
  background:linear-gradient(135deg,#fff5ed,#ffe4d4);
  color:#8b3f0b;
}
@media(max-width:760px){
  .rider-dashboard .summary>div{min-height:108px;padding:14px 12px;border-radius:15px}
  .rider-dashboard .summary span{font-size:9px;letter-spacing:.045em}
  .rider-dashboard .summary strong{font-size:23px;margin-top:9px}
  .rider-dashboard .order-card{padding:18px;border-radius:16px}
  .rider-dashboard .order-head h3{font-size:17px}
  .rider-dashboard .order-card dl{grid-template-columns:105px minmax(0,1fr);gap:9px 10px;font-size:12px}
}


/* Glossy payment history cards and clearly distinguished outcomes */
.rider-dashboard .history-item{
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:10px 16px;
  padding:18px 20px;
  border:1px solid #d5e6d9;
  border-radius:17px;
  background:linear-gradient(135deg,#ffffff 0%,#f4faf5 54%,#eaf5ed 100%);
  box-shadow:0 10px 24px rgba(20,60,39,.075),inset 0 1px 0 rgba(255,255,255,.98);
}
.rider-dashboard .history-item::after{
  content:"";
  position:absolute;
  top:0;
  left:0;
  bottom:0;
  width:4px;
  background:linear-gradient(180deg,#27764c,#83c895 58%,#f28a2e);
}
.rider-dashboard .history-item .history-order{
  color:#173d2d;
  font:800 14px/1.45 Manrope,sans-serif;
  letter-spacing:-.015em;
}
.rider-dashboard .history-item .history-status{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:82px;
  padding:7px 12px;
  border:1px solid transparent;
  border-radius:999px;
  font:800 10px/1.2 'DM Sans',sans-serif;
  letter-spacing:.055em;
  text-transform:uppercase;
  white-space:nowrap;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 3px 8px rgba(20,40,28,.06);
}
.rider-dashboard .history-item .payment-paid{
  color:#116338;
  border-color:#9ed9b3;
  background:linear-gradient(135deg,#e5faed,#bcebcf);
}
.rider-dashboard .history-item .payment-failed{
  color:#a51f2b;
  border-color:#f0a5aa;
  background:linear-gradient(135deg,#fff0f0,#ffc9cc);
}
.rider-dashboard .history-item .payment-canceled{
  color:#514b69;
  border-color:#c8c0df;
  background:linear-gradient(135deg,#f1eff8,#dcd7eb);
}
.rider-dashboard .history-item .payment-pending{
  color:#87500a;
  border-color:#f2d18a;
  background:linear-gradient(135deg,#fff7df,#ffe3a3);
}
.rider-dashboard .history-item .payment-other{
  color:#36516b;
  border-color:#c0d8f0;
  background:linear-gradient(135deg,#edf5ff,#d8e8fa);
}
.rider-dashboard .history-item small{
  grid-column:1/-1;
  padding-top:9px;
  border-top:1px solid rgba(210,226,214,.8);
  color:#718078;
  font-size:11px;
  font-weight:600;
  line-height:1.5;
}
@media(max-width:520px){
  .rider-dashboard .history-item{padding:15px 14px;gap:9px 10px}
  .rider-dashboard .history-item .history-order{font-size:12px}
  .rider-dashboard .history-item .history-status{min-width:70px;padding:6px 9px;font-size:9px}
}


/* Rider dashboard header: CF left, Fish Point centered, account actions right */
.rider-topbar {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  min-height: 76px;
}
.rider-topbar > .rider-brand {
  grid-column: 1;
  justify-self: start;
}
.rider-topbar-title {
  grid-column: 2;
  justify-self: center;
  color: var(--green);
  font-family: Manrope, sans-serif;
  font-size: clamp(20px, 2.5vw, 27px);
  font-weight: 800;
  letter-spacing: -.04em;
  text-decoration: none;
  white-space: nowrap;
}
.rider-topbar-actions {
  grid-column: 3;
  justify-self: end;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  min-width: 0;
}
.rider-topbar-actions strong {
  color: var(--green);
  white-space: nowrap;
}
.rider-topbar-actions .rider-logout-button {
  flex: 0 0 auto;
  min-width: max-content;
  white-space: nowrap;
}

/* Keep refresh labels readable on one line at every viewport size. */
#riderRefreshButton,
#riderRefreshPayments {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: auto;
  min-width: max-content;
  max-width: 100%;
  padding: 12px 18px;
  white-space: nowrap;
  word-break: keep-all;
  overflow-wrap: normal;
  line-height: 1.2;
  text-align: center;
}
@media (max-width: 760px) {
  .rider-topbar {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 8px;
    min-height: 66px;
    padding: 10px 12px;
  }
  .rider-topbar-title {
    font-size: 19px;
  }
  .rider-topbar-actions {
    gap: 7px;
  }
  .rider-topbar-actions strong {
    font-size: 11px;
    max-width: 76px;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .rider-topbar-actions .rider-logout-button {
    padding: 9px 11px;
    font-size: 12px;
  }
  #riderRefreshButton,
  #riderRefreshPayments {
    padding: 10px 12px;
    font-size: 12px;
  }
}
@media (max-width: 380px) {
  .rider-topbar {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 6px;
    padding-left: 9px;
    padding-right: 9px;
  }
  .rider-topbar-title { font-size: 16px; }
  .rider-topbar-actions {
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 3px;
  }
  .rider-topbar-actions strong {
    display: block;
    max-width: 100px;
    overflow: visible;
    text-overflow: clip;
    font-size: 10px;
    line-height: 1.2;
    white-space: nowrap;
  }
  .rider-topbar-actions .rider-logout-button {
    padding: 6px 9px;
    font-size: 11px;
  }
}


/* Keep the rider's name with the page heading, not in the centered topbar. */
.rider-heading-name{
  display:block;
  width:fit-content;
  margin:0 0 7px;
  color:var(--orange);
  font:800 11px/1.25 Manrope,sans-serif;
  letter-spacing:.15em;
  text-transform:uppercase;
}
.rider-dashboard .heading .rider-eyebrow{
  margin-top:0;
}
@media(max-width:760px){
  .rider-heading-name{font-size:13px;margin-bottom:6px}
}

/* Delivery controls */
.delivery-controls{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin:14px 0 4px}
.delivery-action{background:linear-gradient(120deg,#1c7046,#145536);color:#fff;box-shadow:0 7px 16px rgba(20,85,54,.18)}
.delivery-complete{display:inline-flex;padding:10px 13px;border-radius:10px;background:#e4f5e9;color:#17683a;font-weight:800;font-size:12px}
.map-link{display:inline-flex;align-items:center;padding:10px 13px;border:1px solid #d8e7db;border-radius:10px;color:#17643c;font-size:12px;font-weight:800;text-decoration:none;background:#f5faf6}
.order-note{color:#7a6547;font-size:12px;line-height:1.5;margin:10px 0}