/* Customer booking status colours — v10.45 */
.booking-row.status-requested,
.tracking-card.status-requested{
  background:#5a1717 !important;
  border-color:#8f2c2c !important;
}
.booking-row.status-requested:hover{
  background:#6d1c1c !important;
}
.booking-row.status-active,
.tracking-card.status-active{
  background:#153f2a !important;
  border-color:#286345 !important;
}
.booking-row.status-active:hover{
  background:#1a4d34 !important;
}
.booking-row.status-requested *,
.booking-row.status-active *,
.tracking-card.status-requested *,
.tracking-card.status-active *{
  color:#f7f7f7;
}
.booking-row.status-neutral,
.tracking-card.status-neutral{
  background:var(--card, #17191d);
}

.booking-price{
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid rgba(255,255,255,.12);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
.booking-price span,
.tracking-price span{
  opacity:.75;
  font-size:.88rem;
}
.booking-price strong,
.tracking-price strong{
  font-size:.98rem;
}
.tracking-price{
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}

.booking-card{display:block;width:100%;text-align:left}
.booking-price-stack{margin-top:10px;border-top:1px solid rgba(255,255,255,.12)}
.booking-price-stack .booking-price{border-top:0;margin-top:0;padding:8px 0}
.booking-price.current strong{font-weight:800}
.booking-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.booking-action{flex:1;min-width:120px}
.booking-row .booking-action{width:auto}
.tracking-prices{margin:14px 0}

/* v10.54 website-style tracking and attachment controls */
.site-refresh{
  border:1px solid #e21d2d;
  background:linear-gradient(180deg,#e21d2d,#b70f1c);
  color:#fff;
  border-radius:12px;
  min-height:48px;
  padding:0 18px;
  font-weight:800;
  letter-spacing:.01em;
  box-shadow:0 8px 20px rgba(0,0,0,.22);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}
.site-refresh span{font-size:1.2rem;line-height:1}
.site-refresh:active{transform:translateY(1px)}
.site-refresh:disabled{opacity:.6}

.attachment-panel{
  margin-top:18px;
  padding:16px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:16px;
  background:rgba(0,0,0,.16);
}
.attachment-head{
  display:flex;
  justify-content:space-between;
  gap:14px;
  align-items:flex-start;
  margin-bottom:12px;
}
.attachment-head div{display:flex;flex-direction:column;gap:2px}
.attachment-head small{opacity:.68}
.attachment-head strong{font-size:1.08rem}
.attachment-head>span{font-size:.78rem;opacity:.62;text-align:right}
.attachment-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:11px 0;
  border-top:1px solid rgba(255,255,255,.09);
  text-decoration:none;
  color:inherit;
}
.attachment-icon{
  width:34px;height:34px;border-radius:10px;
  display:grid;place-items:center;
  background:#171a1f;border:1px solid rgba(255,255,255,.12);
  color:#fff;font-weight:900;
}
.attachment-meta{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.attachment-meta strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.attachment-meta small{opacity:.68}
.attachment-open{font-size:.82rem;font-weight:800}
.attachment-empty{display:block;padding:10px 0;opacity:.7}
.attachment-upload-form{
  margin-top:12px;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  gap:10px;
  align-items:center;
}
.attachment-upload-form>span{
  min-width:0;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  font-size:.86rem;
  opacity:.75;
}
.attachment-choose,
.attachment-upload{
  border-radius:11px;
  min-height:42px;
  padding:0 14px;
  font-weight:800;
}
.attachment-choose{
  background:#171a1f;
  border:1px solid rgba(255,255,255,.15);
  color:#fff;
}
.attachment-upload{
  background:#e21d2d;
  border:1px solid #e21d2d;
  color:#fff;
}
@media(max-width:640px){
  .attachment-head{display:block}
  .attachment-head>span{display:block;text-align:left;margin-top:6px}
  .attachment-upload-form{grid-template-columns:1fr}
  .attachment-upload-form>span{padding:0 2px}
  .attachment-choose,.attachment-upload{width:100%}
}

/* v10.59 - website-style Track / View button */
.booking-row [data-track],
.booking-card [data-track]{
  appearance:none;
  -webkit-appearance:none;
  border:1px solid rgba(255,255,255,.18) !important;
  background:linear-gradient(180deg,#171a1f,#0e1014) !important;
  color:#fff !important;
  min-height:48px;
  padding:0 18px;
  border-radius:12px;
  font-weight:800;
  letter-spacing:.01em;
  box-shadow:0 8px 20px rgba(0,0,0,.20);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  text-decoration:none;
  cursor:pointer;
}

.booking-row [data-track]::before,
.booking-card [data-track]::before{
  content:"◉";
  color:#e21d2d;
  font-size:.95rem;
  line-height:1;
}

.booking-row [data-track]:hover,
.booking-card [data-track]:hover{
  border-color:#e21d2d !important;
  background:linear-gradient(180deg,#20242a,#12151a) !important;
}

.booking-row [data-track]:active,
.booking-card [data-track]:active{
  transform:translateY(1px);
}

.booking-row [data-track]:focus-visible,
.booking-card [data-track]:focus-visible{
  outline:2px solid #e21d2d;
  outline-offset:2px;
}

/* Make the two booking action buttons feel like one matched pair */
.booking-actions{
  align-items:stretch;
}
.booking-actions .booking-action{
  min-height:48px;
  border-radius:12px;
  font-weight:800;
}

@media(max-width:640px){
  .booking-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
  }
  .booking-actions .booking-action{
    width:100%;
    min-width:0;
  }
}

/* v10.63 - Customer status workflow mirrors Admin */
.customer-status-timeline{
  margin:18px 0;
  padding:14px 14px 8px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;
  background:rgba(0,0,0,.16);
}
.customer-status-step{
  position:relative;
  display:grid;
  grid-template-columns:22px 1fr;
  gap:10px;
  align-items:start;
  min-height:36px;
  color:rgba(255,255,255,.55);
}
.customer-status-step:not(:last-child)::after{
  content:"";
  position:absolute;
  left:7px;
  top:16px;
  bottom:-4px;
  width:2px;
  background:rgba(255,255,255,.12);
}
.customer-status-dot{
  width:16px;
  height:16px;
  border-radius:50%;
  margin-top:1px;
  border:2px solid rgba(255,255,255,.25);
  background:#111419;
  z-index:1;
}
.customer-status-step.done{
  color:#fff;
}
.customer-status-step.done .customer-status-dot{
  background:#159447;
  border-color:#159447;
}
.customer-status-step.done:not(:last-child)::after{
  background:#159447;
}
.customer-status-step.active .customer-status-name{
  font-weight:800;
}
.customer-status-step.active .customer-status-dot{
  box-shadow:0 0 0 4px rgba(21,148,71,.20);
}
.customer-status-special{
  margin:18px 0;
  padding:14px 16px;
  border-radius:12px;
  font-weight:800;
}
.customer-status-special.declined,
.customer-status-special.cancelled{
  background:rgba(153,23,23,.18);
  border:1px solid rgba(255,80,80,.32);
}

/* v10.65 customer dashboard automatic status tabs */
.customer-booking-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 16px}
.customer-booking-tab{border:1px solid rgba(255,255,255,.14);background:#171a1f;color:#fff;border-radius:10px;padding:9px 12px;font:inherit;font-weight:750;cursor:pointer}
.customer-booking-tab span{display:inline-flex;align-items:center;justify-content:center;min-width:21px;height:21px;padding:0 6px;margin-left:5px;border-radius:999px;background:rgba(255,255,255,.1);font-size:12px}
.customer-booking-tab.active{background:#d71920;border-color:#d71920}
@media(max-width:700px){.customer-booking-tabs{flex-wrap:nowrap;overflow-x:auto;padding-bottom:5px}.customer-booking-tab{flex:0 0 auto;white-space:nowrap}}

/* v10.71 - Service choices styled like ASAP delivery */
.service-choice-group{
  display:grid;
  gap:10px;
  margin:8px 0 14px;
}
.service-choice-title{
  display:block;
  font-weight:700;
  margin-bottom:1px;
}
.service-option{
  position:relative;
  display:flex !important;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  cursor:pointer;
}
.service-option > span{
  min-width:0;
  flex:1 1 auto;
}
.service-option input[type="radio"]{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.service-toggle{
  position:relative;
  flex:0 0 54px;
  width:54px;
  height:30px;
  border-radius:999px;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.25);
  transition:.18s ease;
}
.service-toggle::after{
  content:"";
  position:absolute;
  top:3px;
  left:3px;
  width:22px;
  height:22px;
  border-radius:50%;
  background:#fff;
  transition:.18s ease;
}
.service-option input[type="radio"]:checked + .service-toggle{
  background:#d71920;
  border-color:#d71920;
}
.service-option input[type="radio"]:checked + .service-toggle::after{
  transform:translateX(24px);
}
.service-option.selected{
  border-color:rgba(215,25,32,.7);
  box-shadow:0 0 0 1px rgba(215,25,32,.16);
}

/* v10.75 - Ferry routing flag */
#ferryRouteNotice{
  margin-top:8px;
  font-weight:700;
}