/* --- Bulletproof scope --- */
.ma-taxi.ma-scope, .ma-taxi.ma-scope *{box-sizing:border-box !important}
.ma-taxi.ma-scope{
  width:100%;
  max-width:980px;
  margin:24px auto;
  padding:0 14px;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial !important;

  --ma-dark:#111827;
  --ma-blue:#1d4ed8;
  --ma-yellow:#fcd34d;
}
.ma-taxi.ma-scope input,
.ma-taxi.ma-scope select,
.ma-taxi.ma-scope button,
.ma-taxi.ma-scope textarea{font-family:inherit !important}
.ma-taxi.ma-scope *{text-transform:none !important; letter-spacing:normal !important}

/* Card */
.ma-card{background:#fff !important;border:1px solid #e8e8ee !important;border-radius:18px !important;box-shadow:0 10px 30px rgba(0,0,0,.06) !important;overflow:hidden}
.ma-head{padding:18px 18px 12px;border-bottom:1px solid #f0f0f4}
.ma-h1{font-size:20px;font-weight:900;line-height:1.2;margin:0;color:var(--ma-dark) !important}
.ma-h2{margin-top:6px;font-size:13px;opacity:.7;color:var(--ma-dark) !important}
.ma-form{padding:18px}

/* Toggle */
.ma-toggle{display:flex;gap:10px;margin-bottom:14px}
.ma-toggle-btn{
  flex:1;
  border:2px solid var(--ma-blue) !important;
  background:var(--ma-yellow) !important;
  border-radius:999px !important;
  padding:12px 12px !important;
  font-weight:1000 !important;
  cursor:pointer !important;
  color:var(--ma-dark) !important;
}
.ma-toggle-btn.is-active{background:var(--ma-blue) !important;color:#fff !important}

/* Rows */
.ma-row{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:860px){.ma-row-2{grid-template-columns:1fr 1fr}}
.ma-row-1{grid-template-columns:1fr !important}
.ma-row-gap{margin-top:6px}

/* Fields */
.ma-field{display:flex;flex-direction:column;gap:8px;min-width:0}
.ma-label{font-size:13px;font-weight:900;opacity:.75;color:var(--ma-dark) !important}
.ma-help{font-size:12px;opacity:.7;color:var(--ma-dark) !important}
.ma-help.is-error{opacity:1;color:#b91c1c !important;font-weight:800}

/* Inputs */
.ma-taxi.ma-scope{--ma-h:52px}
.ma-input{
  width:100% !important;
  border:1px solid #dfe3f0 !important;
  border-radius:999px !important;
  background:#fff !important;
  padding:0 16px !important;
  height:var(--ma-h) !important;
  font-size:16px !important;
  outline:none !important;
  color:var(--ma-dark) !important;
}
.ma-input:focus{border-color:var(--ma-dark) !important;box-shadow:0 0 0 3px rgba(17,24,39,.08) !important}

/* Textarea */
.ma-textarea{
  width:100% !important;
  border:1px solid #dfe3f0 !important;
  border-radius:16px !important;
  background:#fff !important;
  padding:12px 14px !important;
  font-size:15px !important;
  outline:none !important;
  color:var(--ma-dark) !important;
  resize:vertical !important;
  min-height:90px;
}
.ma-textarea:focus{border-color:var(--ma-dark) !important;box-shadow:0 0 0 3px rgba(17,24,39,.08) !important}

/* Badges */
.ma-badges{display:flex;gap:12px;flex-wrap:wrap;margin:18px 0 14px}
.ma-pill{border:1px solid #e8e8ee !important;background:#fafafe !important;border-radius:999px !important;padding:10px 14px !important;font-size:13px !important;display:flex !important;gap:8px !important;align-items:center !important;color:var(--ma-dark) !important}

/* Compact distance/price row */
.ma-badges-compact{flex-wrap:nowrap}
.ma-badges-compact .ma-pill{flex:1;justify-content:space-between}
.ma-badges-compact .ma-pill strong{white-space:nowrap}
.ma-badges-compact .ma-pill span{white-space:nowrap; font-weight:900}
@media(max-width:420px){
  .ma-badges-compact{gap:10px}
  .ma-badges-compact .ma-pill{padding:10px 12px !important; font-size:12.5px !important}
}

/* Inline note (no bubble) */
.ma-inline-note{font-size:13px;line-height:1.45;color:var(--ma-dark);opacity:.82}

/* Map */
.ma-map-wrap{margin-top:6px}
.ma-map{width:100%;height:260px;border-radius:16px;border:1px solid #e8e8ee;overflow:hidden;background:#f6f7fb;position:relative}
@media(max-width:520px){.ma-form{padding:14px}.ma-map{height:220px}}
.ma-map-fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:18px;text-align:center;font-size:13px;opacity:.85;color:var(--ma-dark) !important}
.ma-map-hint{margin-top:8px;font-size:12px;opacity:.7;color:var(--ma-dark) !important}

/* Step 1 price bar */
.ma-pricebar{
  margin-top:14px;
  margin-bottom:14px;
  border:2px solid var(--ma-blue) !important;
  background:var(--ma-yellow) !important;
  border-radius:16px;
  padding:14px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  color:var(--ma-dark) !important;
}
.ma-price-title{font-weight:1000;font-size:14px}
.ma-price-sub{font-size:12px;opacity:.75;margin-top:2px}
.ma-price-value{font-weight:1000;font-size:22px;white-space:nowrap}

/* CTA */
.ma-cta-wrap{display:flex;flex-direction:column;gap:8px}
.ma-cta{
  width:100% !important;
  border-radius:999px !important;
  border:1px solid var(--ma-dark) !important;
  background:var(--ma-dark) !important;
  color:#fff !important;
  font-weight:1000 !important;
  padding:14px 16px !important;
  cursor:pointer !important;
}
.ma-cta[disabled]{background:#e5e7eb !important;border-color:#e5e7eb !important;color:#6b7280 !important;cursor:not-allowed !important}
.ma-cta-help{font-size:12px;opacity:.75;color:var(--ma-dark) !important}
.ma-cta-help.is-ok{opacity:1;font-weight:800}

/* Step containers */
.ma-step2, .ma-step3{
  margin-top:14px;
  border:1px solid #e8e8ee;
  background:#fafafe;
  border-radius:16px;
  padding:14px 16px;
  color:var(--ma-dark) !important;
}
.ma-step2-title{font-weight:1000;font-size:14px}
.ma-step2-sub{margin-top:4px;font-size:12px;opacity:.75}

/* Vehicles */
.ma-vehicles{margin-top:12px;display:grid;grid-template-columns:1fr;gap:10px}
@media(min-width:860px){.ma-vehicles{grid-template-columns:repeat(3,minmax(0,1fr))}}
.ma-taxi.ma-scope button.ma-vehicle{
  background:#fff !important;
  border:1px solid #e8e8ee !important;
  border-radius:16px !important;
  padding:12px 12px !important;
  cursor:pointer !important;
  width:100% !important;
  display:flex !important;
  flex-direction:column !important;
  gap:8px !important;
  text-align:left !important;
  color:var(--ma-dark) !important;
  overflow:hidden !important;
  position:relative !important;
}
.ma-taxi.ma-scope button.ma-vehicle:hover{border-color:#cfd5e6 !important}
.ma-taxi.ma-scope button.ma-vehicle.is-active,
.ma-taxi.ma-scope button.ma-vehicle[aria-checked="true"]{
  border:2px solid var(--ma-blue) !important;
  background:var(--ma-yellow) !important;
  box-shadow:0 0 0 3px rgba(29,78,216,.14) !important;
}
.ma-vehicle-name{font-weight:1000;font-size:13px;line-height:1.2}
.ma-vehicle-meta{font-size:11px;color:#374151;line-height:1.25;overflow-wrap:anywhere}

/* Add-ons */
.ma-addons{margin-top:14px;border:1px solid #e8e8ee;background:#fff;border-radius:16px;padding:14px 14px}
.ma-addons-title{font-weight:1000;font-size:14px}
.ma-addons-sub{margin-top:4px;font-size:12px;opacity:.75}
.ma-addon-row{margin-top:12px;padding-top:12px;border-top:1px solid #f0f0f4;display:flex;align-items:center;justify-content:space-between;gap:14px}
.ma-addon-left{min-width:0}
.ma-addon-name{font-weight:1000;font-size:13px}
.ma-addon-desc{margin-top:2px;font-size:12px;opacity:.75}
.ma-addon-right{display:flex;align-items:center;gap:12px}
.ma-addon-price{font-weight:1000;min-width:46px;text-align:right}

/* Switch */
.ma-switch{position:relative;display:inline-block;width:46px;height:26px}
.ma-switch input{opacity:0;width:0;height:0}
.ma-slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background:#e5e7eb;border-radius:999px;transition:.18s}
.ma-slider:before{position:absolute;content:"";height:20px;width:20px;left:3px;top:3px;background:white;border-radius:999px;transition:.18s;box-shadow:0 2px 6px rgba(0,0,0,.12)}
.ma-switch input:checked + .ma-slider{background:var(--ma-dark)}
.ma-switch input:checked + .ma-slider:before{transform:translateX(20px)}

/* Small controls */
.ma-mini-select{height:40px;border-radius:999px;border:1px solid #dfe3f0;padding:0 12px;background:#fff;font-weight:900;min-width:86px}
.ma-mini-num{height:40px;border-radius:999px;border:1px solid #dfe3f0;padding:0 12px;background:#fff;font-weight:900;width:86px;text-align:center}

/* Step 2 smart bar */
.ma-step2-barwrap{margin-top:12px}
.ma-step2-bar{
  border:2px solid var(--ma-blue) !important;
  background:var(--ma-yellow) !important;
  border-radius:16px !important;
  padding:12px 14px !important;
  box-shadow:0 16px 34px rgba(0,0,0,.14) !important;
}
.ma-step2-bar.is-floating{
  position:fixed;
  left:50%;
  transform:translateX(-50%);
  bottom:12px;
  width:min(860px, calc(100% - 40px));
  z-index:9999;
}
.ma-totalbar{display:flex;align-items:center;justify-content:space-between;gap:12px}
.ma-total-title{font-weight:1000;font-size:13px}
.ma-total-sub{margin-top:3px;font-size:11px;opacity:.75}
.ma-total-value{font-weight:1000;font-size:20px;white-space:nowrap}
.ma-step2-bar .ma-cta{margin-top:10px;padding:12px 14px !important}

/* Panels */
.ma-panel{
  border:1px solid #e8e8ee;
  background:#fff;
  border-radius:16px;
  padding:14px 14px;
}
.ma-panel-title{font-weight:1000;font-size:14px;color:var(--ma-dark)}

/* Review */
.ma-review{
  border:2px solid var(--ma-blue);
  background:var(--ma-yellow);
  border-radius:16px;
  padding:14px 14px;
}
.ma-review-grid{display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:860px){.ma-review-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ma-review-k{font-size:12px;opacity:.75;font-weight:900}
.ma-review-v{font-size:13px;font-weight:900;word-break:break-word}
.ma-line{height:1px;background:rgba(17,24,39,.18);margin:12px 0}
.ma-review-break{display:flex;flex-direction:column;gap:8px}
.ma-break-row{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:13px}
.ma-break-total{font-size:14px;font-weight:1000}

/* Payment */
.ma-pay{display:flex;flex-direction:column;gap:10px}
.ma-radio{
  display:flex;
  gap:10px;
  align-items:flex-start;
  padding:12px 12px;
  border:1px solid #e8e8ee;
  border-radius:14px;
  background:#fff;
  cursor:pointer;
}
.ma-radio input{margin-top:3px}
.ma-radio-sub{display:block;font-size:12px;opacity:.75;margin-top:2px}
.ma-paytotal{
  border:2px solid var(--ma-blue);
  background:var(--ma-yellow);
  border-radius:16px;
  padding:12px 14px;
}

/* Checkboxes */
.ma-check{display:flex;gap:10px;align-items:flex-start;margin-top:10px}
.ma-check input{margin-top:3px}
.ma-check a{color:var(--ma-blue);text-decoration:underline}

/* Footnote */
.ma-footnote{margin-top:12px;font-size:12px;opacity:.7;color:var(--ma-dark) !important}


/* =========================================================
   Date + Time alignment fix (Mobile / iOS Safari)
   ========================================================= */

/* Make date + time look consistent (same inner spacing + centered value) */
.ma-taxi.ma-scope #maTripDate,
.ma-taxi.ma-scope #maTripTime{
  padding-left:44px !important;
  padding-right:44px !important;
  text-align:center !important;
  text-align-last:center !important;
  line-height:calc(var(--ma-h) - 2px) !important;
}

/* iOS/Safari date input uses internal pseudo elements */
.ma-taxi.ma-scope #maTripDate{
  -webkit-appearance:none;
  appearance:none;
}

/* Center the date text properly on iOS */
.ma-taxi.ma-scope #maTripDate::-webkit-date-and-time-value{
  display:flex;
  align-items:center;
  justify-content:center;
  height:100%;
  text-align:center;
}

/* Remove extra internal padding that causes "off center" look */
.ma-taxi.ma-scope #maTripDate::-webkit-datetime-edit,
.ma-taxi.ma-scope #maTripDate::-webkit-datetime-edit-fields-wrapper{
  padding:0;
  margin:0;
  display:flex;
  align-items:center;
  justify-content:center;
}
/* === Popup readability fix (override JS-injected styles) === */
#ma-taxi-success-modal {
  background: rgba(15, 23, 42, 0.35) !important; /* lighter overlay */
  backdrop-filter: blur(3px) !important;
}

#ma-taxi-success-modal > div {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid rgba(15, 23, 42, 0.12) !important;
  box-shadow: 0 20px 60px rgba(15, 23, 42, 0.25) !important;
}

#ma-taxi-success-modal h3 {
  color: #0f172a !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
}

#ma-taxi-success-modal p,
#ma-taxi-success-modal div {
  color: #334155 !important;
}

#ma-taxi-success-modal a {
  border-radius: 9999px !important;
  padding: 12px 18px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 170px !important;
}

#ma-taxi-success-modal a:first-of-type {
  background: transparent !important;
  color: #1d4ed8 !important;
  border: 1px solid rgba(29, 78, 216, 0.35) !important;
}

#ma-taxi-success-modal a:last-of-type {
  background: #1d4ed8 !important;
  color: #ffffff !important;
  border: 1px solid #1d4ed8 !important;
}
/* === Strong popup override (covers any structure) === */
#ma-taxi-success-modal {
  background: rgba(15, 23, 42, 0.35) !important;
  backdrop-filter: blur(3px) !important;
  -webkit-backdrop-filter: blur(3px) !important;
}

/* force the modal card itself to be white no matter what wrapper is used */
#ma-taxi-success-modal * {
  box-sizing: border-box !important;
}

#ma-taxi-success-modal > *,
#ma-taxi-success-modal .ma-taxi-modal,
#ma-taxi-success-modal .ma-taxi-modal-content,
#ma-taxi-success-modal .ma-taxi-success-modal,
#ma-taxi-success-modal [role="dialog"] {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid rgba(15, 23, 42, 0.12) !important;
  box-shadow: 0 20px 60px rgba(15, 23, 42, 0.25) !important;
}

/* text */
#ma-taxi-success-modal h1,
#ma-taxi-success-modal h2,
#ma-taxi-success-modal h3,
#ma-taxi-success-modal strong {
  color: #0f172a !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
}

#ma-taxi-success-modal p,
#ma-taxi-success-modal span,
#ma-taxi-success-modal div {
  color: #334155 !important;
}

/* buttons – unify shape/size */
#ma-taxi-success-modal a,
#ma-taxi-success-modal button {
  border-radius: 9999px !important;
  padding: 12px 18px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 180px !important;
  height: 44px !important;
  gap: 8px !important;
}

/* first button = outline */
#ma-taxi-success-modal a:first-of-type,
#ma-taxi-success-modal button:first-of-type {
  background: transparent !important;
  color: #1d4ed8 !important;
  border: 1px solid rgba(29, 78, 216, 0.35) !important;
}

/* second button = solid */
#ma-taxi-success-modal a:last-of-type,
#ma-taxi-success-modal button:last-of-type {
  background: #1d4ed8 !important;
  color: #ffffff !important;
  border: 1px solid #1d4ed8 !important;
}
/* v0.4.81 – Driver job card header mobile fix */
.ma-driver-job-card .ma-job-header,
.ma-driver-job-card .ma-driver-job-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap; /* allow clean wrapping instead of collapsing */
}

.ma-driver-job-card .ma-job-ref,
.ma-driver-job-card .ma-driver-job-ref {
  font-size: 18px;     /* reduced */
  line-height: 1.15;
  font-weight: 800;
  max-width: 62%;
  word-break: break-word;
}

@media (max-width: 480px) {
  .ma-driver-job-card .ma-job-ref,
  .ma-driver-job-card .ma-driver-job-ref {
    font-size: 16px;   /* further reduced on small screens */
    max-width: 100%;
  }

  .ma-driver-job-card .ma-job-badges,
  .ma-driver-job-card .ma-driver-job-badges {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
  }
}

/* ------------------------------
   P0 UX fixes (mobile + portals)
--------------------------------*/

/* Ensure action links/buttons look like real buttons (no blue underlined text) */
.ma-btn,
.ma-cta-btn,
.ma-btn-danger {
  text-decoration: none;
}

/* Some themes apply strong link styles (blue/underline) even on button-like anchors.
   Force consistent button typography in all link states. */
.ma-btn,
.ma-btn:link,
.ma-btn:visited,
.ma-btn:hover,
.ma-btn:active,
.ma-cta-btn,
.ma-cta-btn:link,
.ma-cta-btn:visited,
.ma-cta-btn:hover,
.ma-cta-btn:active,
.ma-btn-danger,
.ma-btn-danger:link,
.ma-btn-danger:visited,
.ma-btn-danger:hover,
.ma-btn-danger:active {
  color: #ffffff !important;
  text-decoration: none !important;
}

.ma-btn-danger {
  background: #b00020;
  color: #ffffff;
  border: 1px solid rgba(0,0,0,0.08);
}

.ma-btn-danger:hover,
.ma-btn-danger:focus {
  filter: brightness(0.95);
  color: #ffffff;
}

/* Confirmation modal buttons: equal size + better spacing on mobile */
@media (max-width: 640px) {
  .ma-success-actions,
  .ma-cta {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }
  .ma-success-actions a,
  .ma-cta a {
    width: 100% !important;
    text-align: center;
  }
}

/* Step 3 (customer details): avoid cramped inputs on small screens */
@media (max-width: 640px) {
  .ma-row-2 {
    grid-template-columns: 1fr !important;
  }
  .ma-phone-row {
    grid-template-columns: 1fr !important;
  }
  .ma-phone-row select,
  .ma-phone-row input {
    width: 100% !important;
  }
}


/* Phone (intl-tel-input) */
.iti{width:100%;}
.iti input{width:100%;}
#maCustPhoneIti{padding-left:58px !important;}