/* ============================================================================
   Martiy landing — visual refresh
   ----------------------------------------------------------------------------
   Loaded AFTER landing.css. No markup changes: every class here already exists
   in home.blade.php and layouts/landing/app.blade.php, so all the admin-driven
   content keeps working exactly as before. Remove the one <link> tag and the
   page returns to its old appearance.

   What this page is for: it is not a shop. It is the page a shopkeeper or a
   rider lands on, and its whole job is the two buttons in the hero. Everything
   below exists to make those two feel safe to press — so the design is built
   for credibility rather than delight: one accent used sparingly, real
   hierarchy, numerals you can read across a room.

   --primary still comes from Business Settings, so changing the brand colour in
   the admin continues to work.
   ========================================================================== */

:root {
  /* Ink, not black. A slate-navy reads as considered where pure black reads as
     unset, and it keeps long paragraphs comfortable. */
  --mt-ink: #16202E;
  --mt-ink-2: #3C4A5E;
  /* Secondary text. #697588 was the first choice and measured 4.31:1 on the pale
     band -- just under the 4.5:1 small text needs. Darkened until it clears it
     on the band as well as on white, and it still reads as secondary. */
  --mt-ink-3: #5C6778;
  /* Errors and required marks. Both the red already in use (#e74c3c) and
     Bootstrap's (#dc3545) sit near 3.8:1 on white, which is thin for the one
     colour that tells somebody their form will not submit. */
  --mt-danger: #C92A1F;

  --mt-paper: #FFFFFF;
  --mt-band: #F4F6F8;
  --mt-band-2: #EDF1F5;
  --mt-line: #DFE4EA;

  --mt-accent: var(--primary, #FF6B00);
  --mt-accent-rgb: var(--primary-rgb, 255, 107, 0);
  --mt-accent-wash: rgba(var(--primary-rgb, 255, 107, 0), .08);

  --mt-radius: 14px;
  --mt-radius-sm: 10px;

  /* One scale, used everywhere, so vertical rhythm is consistent between
     sections instead of each one inventing its own spacing. */
  --mt-gap: clamp(28px, 4vw, 44px);
  /* The original sections were 40-50px top and bottom, which crowded them into
     each other. This is enough air to separate them without turning the page
     into a long scroll -- doubling it, which was the first thing I tried, made
     the page 57% taller for no gain. */
  --mt-section: clamp(48px, 5vw, 76px);

  --mt-font: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  /* Urdu and Arabic fall through to whatever the device has for those scripts;
     naming them keeps the shaping correct instead of letting the Latin face
     substitute boxes. */
  --mt-font-rtl: "Noto Naskh Arabic", "Segoe UI", "Tahoma", system-ui, sans-serif;
}

/* ─── Base ──────────────────────────────────────────────────────────────── */

body {
  font-family: var(--mt-font);
  color: var(--mt-ink-2);
  background: var(--mt-paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

html[dir="rtl"] body {
  font-family: var(--mt-font-rtl);
}

body h1,
body h2,
body h3,
body h4 {
  color: var(--mt-ink);
  font-family: var(--mt-font);
  letter-spacing: -0.02em;
  line-height: 1.12;
}

body p {
  line-height: 1.65;
}

/* Form controls don't inherit the page font on their own, and one input in
   landing.css names Lato explicitly, which is no longer loaded. */
body input,
body select,
body textarea,
body button,
body .form-control {
  font-family: var(--mt-font);
}

html[dir="rtl"] body input,
html[dir="rtl"] body select,
html[dir="rtl"] body textarea,
html[dir="rtl"] body button {
  font-family: var(--mt-font-rtl);
}

body .container {
  max-width: 1180px;
  padding-inline: 20px;
}

/* The brand accent that Helpers::highlight() wraps round $…$ phrases. Kept as
   a colour change only: underlines and background swipes on a word inside a
   headline fight the headline. */
body .hl,
body .highlight,
body h1 span.hl,
body h2 span.hl {
  color: var(--mt-accent);
}

/* ─── Navigation ────────────────────────────────────────────────────────── */

body .main-nav {
  background: rgba(255, 255, 255, .88);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--mt-line);
  box-shadow: none;
}

body .main-nav .container {
  min-height: 72px;
}

body .nav-links a {
  color: var(--mt-ink-2);
  font-weight: 500;
  font-size: 15px;
  padding-block: 6px;
  position: relative;
  transition: color .18s ease;
}

body .nav-links a:hover {
  color: var(--mt-ink);
}

/* The current page is marked by a rule under the word rather than a pill, so
   the nav stays a line of text and not a row of buttons. */
body .nav-links a.active-link {
  color: var(--mt-ink);
  font-weight: 600;
}

body .nav-links a.active-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  border-radius: 2px;
  background: var(--mt-accent);
}

body .btn-browse-web {
  background: var(--mt-ink);
  border: 1px solid var(--mt-ink);
  color: #fff;
  border-radius: 999px;
  font-weight: 600;
  font-size: 14px;
  padding: 10px 20px;
  box-shadow: none;
  transition: background .18s ease, border-color .18s ease;
}

body .btn-browse-web:hover {
  background: #0D1620;
  border-color: #0D1620;
  color: #fff;
}

body .btn-join {
  background: var(--mt-paper);
  border: 1px solid var(--mt-line);
  color: var(--mt-ink);
  border-radius: 999px;
  font-weight: 600;
  font-size: 14px;
  padding: 10px 18px;
  transition: border-color .18s ease;
}

body .btn-join:hover {
  border-color: var(--mt-ink-3);
}

body .lang-sw .lang-current {
  border: 1px solid var(--mt-line);
  border-radius: 999px;
  font-weight: 500;
  color: var(--mt-ink-2);
}

/* ─── Hero ──────────────────────────────────────────────────────────────── */

body .hero {
  background:
    radial-gradient(900px 420px at 50% -8%, var(--mt-accent-wash), transparent 70%),
    var(--mt-paper);
  padding-top: clamp(56px, 8vw, 96px);
  padding-bottom: 0;
  text-align: center;
  overflow: hidden;
}

body .hero .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 880px;
}

/* The logo moves above the headline. A brand mark introduces the sentence; sat
   between the headline and the sub-line it just interrupted it. */
body .hero .hero-logo {
  order: -1;
  margin: 0 0 26px;
}

body .hero .hero-logo img {
  height: 40px;
  width: auto;
  object-fit: contain;
}

body .hero h1 {
  font-size: clamp(34px, 5.4vw, 60px);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.04;
  margin: 0 0 18px;
  max-width: 16ch;
  color: var(--mt-ink);
}

body .hero p {
  font-size: clamp(16px, 1.5vw, 19px);
  color: var(--mt-ink-3);
  max-width: 52ch;
  margin: 0 auto 34px;
  line-height: 1.6;
}

body .hero-btns {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-bottom: clamp(44px, 6vw, 72px);
}

/* Two buttons, two jobs. Making them identical pills — which is what they were
   — forced the reader to compare two equal options; the vendor path is the one
   the business wants, so it leads and the other supports. */
body .hero-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 600;
  padding: 14px 26px;
  border: 1px solid transparent;
  transition: transform .16s ease, background .18s ease, border-color .18s ease;
}

body .hero-btn svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
}

/* White on the default brand orange (#FF6B00) is only 2.9:1 -- under the 4.5:1
   that 15px text needs, and hard work for anyone reading in sunlight, which on
   this page is most people. Mixing the brand colour toward black always raises
   white-text contrast, whatever colour is set in Business Settings, so this
   stays correct if the brand colour changes. The accent itself is untouched
   everywhere else, and the glow under the button keeps it on brand.
   Browsers without color-mix keep the first declaration. */
body .hero-btn--vendor {
  background: var(--mt-accent);
  background: color-mix(in srgb, var(--mt-accent) 76%, #000);
  color: #fff;
  box-shadow: 0 8px 20px -10px rgba(var(--mt-accent-rgb), .9);
}

body .hero-btn--vendor:hover {
  background: var(--mt-accent);
  background: color-mix(in srgb, var(--mt-accent) 86%, #000);
  color: #fff;
  transform: translateY(-1px);
}

body .hero-btn--delivery {
  background: var(--mt-paper);
  color: var(--mt-ink);
  border-color: var(--mt-line);
}

body .hero-btn--delivery:hover {
  color: var(--mt-ink);
  border-color: var(--mt-ink-3);
  transform: translateY(-1px);
}

body .hero-illustration {
  margin-top: 0;
  opacity: .9;
}

body .hero-illustration img,
body .hero-illustration svg {
  display: block;
  width: 100%;
  height: auto;
}

/* ─── Section rhythm and headers ────────────────────────────────────────── */

body .services-section,
body .features,
body .zones,
body .referral,
body .earn,
body .special,
body .stats,
body .cta-manage,
body .testimonials {
  padding-block: var(--mt-section);
}

/* Alternating surfaces give the page structure without drawing a single line.
   Paper, band, paper, band — so each section reads as its own idea. */
body .features,
body .earn,
body .testimonials {
  background: var(--mt-band);
}

body .services-section,
body .zones,
body .special,
body .stats {
  background: var(--mt-paper);
}

body .sec-header,
body .earn-top {
  max-width: 720px;
  margin: 0 auto clamp(34px, 4vw, 56px);
  text-align: center;
}

body .sec-header h2,
body .earn-top h2 {
  font-size: clamp(26px, 3.4vw, 40px);
  font-weight: 800;
  letter-spacing: -0.03em;
  margin: 0 0 14px;
}

body .sec-header p,
body .earn-top p {
  font-size: 16px;
  color: var(--mt-ink-3);
  margin: 0 auto;
  max-width: 60ch;
}

/* ─── Services ──────────────────────────────────────────────────────────── */

body .svc-icon-btn {
  background: var(--mt-paper);
  border: 1px solid var(--mt-line);
  border-radius: var(--mt-radius);
  padding: 16px 14px;
  min-width: 112px;
  transition: border-color .18s ease, background .18s ease;
}

body .svc-icon-btn .ico img {
  width: 36px;
  height: 36px;
  object-fit: contain;
}

body .svc-icon-btn .lbl {
  font-size: 14px;
  font-weight: 600;
  color: var(--mt-ink-2);
}

body .svc-icon-btn:hover {
  border-color: var(--mt-ink-3);
}

body .svc-icon-btn.active {
  border-color: var(--mt-accent);
  background: var(--mt-accent-wash);
}

body .svc-icon-btn.active .lbl {
  color: var(--mt-ink);
}

body .svc-panel {
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}

body .svc-text .venture-content-box {
  font-size: 16px;
  line-height: 1.7;
  color: var(--mt-ink-2);
  max-width: 62ch;
}

body .svc-text .venture-content-box h1,
body .svc-text .venture-content-box h2,
body .svc-text .venture-content-box h3 {
  font-size: clamp(22px, 2.6vw, 30px);
  margin-bottom: 12px;
}

body .svc-img .img-card {
  border-radius: var(--mt-radius);
  overflow: hidden;
  border: 1px solid var(--mt-line);
  background: var(--mt-band);
  box-shadow: none;
}

/* ─── Marquee ───────────────────────────────────────────────────────────── */

/* The one strip of the brand colour at full strength on the whole page. It
   earns it by being the only place a reader is told, in the shop's own words,
   what is actually for sale. */
body .marquee {
  background: var(--mt-ink);
  padding-block: 16px;
  border-block: 0;
}

body .marquee .mq-item {
  font-size: 15px;
  font-weight: 500;
  color: rgba(255, 255, 255, .72);
  letter-spacing: -0.01em;
}

body .marquee .mq-item .find {
  color: #fff;
  font-weight: 700;
}

body .marquee .mq-item .dot {
  background: var(--mt-accent);
  width: 6px;
  height: 6px;
}

/* ─── Features ──────────────────────────────────────────────────────────── */

/* Flat, hairline-separated, no shadow. These are supporting detail, so they
   stay quiet and let the earn cards below carry the weight. */
body .feat-card {
  background: var(--mt-paper);
  border: 1px solid var(--mt-line);
  border-radius: var(--mt-radius);
  padding: 28px 24px;
  box-shadow: none;
  transition: border-color .18s ease;
}

body .feat-card:hover {
  border-color: var(--mt-ink-3);
}

body .feat-card .feat-ico {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: var(--mt-accent-wash);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}

body .feat-card .feat-ico img {
  width: 26px;
  height: 26px;
  object-fit: contain;
}

body .feat-card h4 {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 8px;
}

body .feat-card p {
  font-size: 15px;
  color: var(--mt-ink-3);
  margin: 0;
}

/* ─── Zones ─────────────────────────────────────────────────────────────── */

body .zone-banner {
  background: var(--mt-band);
  border: 1px solid var(--mt-line);
  border-radius: 20px;
  padding: clamp(24px, 3.5vw, 48px);
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
  box-shadow: none;
}

body .zone-text-side h2 {
  font-size: clamp(24px, 3vw, 36px);
  margin-bottom: 14px;
}

body .zone-text-side p {
  color: var(--mt-ink-3);
  font-size: 16px;
  max-width: 54ch;
}

body .zone-img-side img {
  border-radius: var(--mt-radius);
  width: 100%;
  height: auto;
}

/* Each tag is a place you can actually order from, so it is marked like a
   status, not decorated like a pill. */
body .zone-tag {
  background: var(--mt-paper);
  border: 1px solid var(--mt-line);
  border-radius: 999px;
  padding: 8px 14px;
  font-size: 14px;
  font-weight: 500;
  color: var(--mt-ink-2);
}

body .zone-tag .zone-dot {
  background: #16A34A;
  width: 7px;
  height: 7px;
}

/* ─── Referral ──────────────────────────────────────────────────────────── */

body .referral {
  padding-block: 0;
  background: var(--mt-paper);
}

/* The card is a flex row set to space-between, but it holds exactly one child,
   so the headline was pinned to the left of a very wide dark bar with nothing
   opposite it. Centred, it reads as the single statement it is. */
body .refer-card {
  background: var(--mt-ink);
  border-radius: 20px;
  padding: clamp(32px, 5vw, 56px);
  justify-content: center;
  text-align: center;
}

body .refer-card > div {
  max-width: 34ch;
}

body .refer-card h2 {
  color: #fff;
  font-size: clamp(24px, 3.2vw, 36px);
  margin: 0;
}

body .refer-card h2 .hl {
  color: var(--mt-accent);
}

/* ─── Earn — the conversion cards ───────────────────────────────────────── */

/* This is where the boldness is spent. Everything else on the page is flat and
   quiet so that these read as the thing to act on. */
body .earn-card {
  background: var(--mt-paper);
  border: 1px solid var(--mt-line);
  border-radius: 18px;
  padding: clamp(26px, 3vw, 36px);
  box-shadow: 0 1px 2px rgba(22, 32, 46, .04), 0 12px 28px -16px rgba(22, 32, 46, .22);
  display: flex;
  flex-direction: column;
  transition: transform .18s ease, box-shadow .18s ease;
}

body .earn-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 1px 2px rgba(22, 32, 46, .05), 0 20px 40px -18px rgba(22, 32, 46, .3);
}

body .earn-card .earn-card-icon {
  width: 60px;
  height: 60px;
  border-radius: 16px;
  background: var(--mt-accent-wash);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  margin-bottom: 22px;
}

body .earn-card h3 {
  font-size: clamp(20px, 2.2vw, 25px);
  font-weight: 800;
  margin: 0 0 12px;
}

body .earn-card p {
  font-size: 15.5px;
  color: var(--mt-ink-3);
  margin: 0 0 24px;
  flex: 1;
}

body .earn-app-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Shared store-badge treatment: hero, earn cards and footer all use it, so the
   badges look like one component instead of three near-misses. */
body .app-btn,
body .f-app-link,
body .cta-app-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  border-radius: 10px;
  min-height: 44px;
  transition: border-color .18s ease, background .18s ease;
}

body .app-btn {
  background: var(--mt-ink);
  border: 1px solid var(--mt-ink);
  color: #fff;
}

body .app-btn:hover {
  background: #0D1620;
  color: #fff;
}

body .app-btn img,
body .f-app-link img,
body .cta-app-link img {
  width: 20px;
  height: 20px;
  object-fit: contain;
  flex-shrink: 0;
}

body .ab-text,
body .fal-text,
body .cal-text {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  text-align: start;
}

body .ab-sm,
body .fal-sm,
body .cal-sm {
  font-size: 10.5px;
  opacity: .78;
  /* Not uppercased: these labels are translated, and Urdu has no upper case. */
  letter-spacing: 0;
}

body .ab-lg,
body .fal-lg,
body .cal-lg {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* ─── Why choose us ─────────────────────────────────────────────────────── */

body .sp-card {
  background: var(--mt-paper);
  border: 1px solid var(--mt-line);
  border-radius: var(--mt-radius);
  padding: 28px 24px;
  box-shadow: none;
}

body .sp-card .sp-ico {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: var(--mt-band);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}

body .sp-card .sp-ico img {
  width: 30px;
  height: 30px;
  object-fit: contain;
}

body .sp-card h4 {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 8px;
}

body .sp-card p {
  font-size: 15px;
  color: var(--mt-ink-3);
  margin: 0;
}

/* ─── Stats ─────────────────────────────────────────────────────────────── */

/* Numerals are the content here, so they are the biggest thing in the card and
   everything else gets out of their way. */
body .stats {
  background: var(--mt-ink);
}

body .stat-card {
  background: transparent;
  border: 0;
  border-inline-start: 1px solid rgba(255, 255, 255, .14);
  border-radius: 0;
  padding: 10px 0 10px 28px;
  box-shadow: none;
  text-align: start;
}

html[dir="rtl"] body .stat-card {
  padding: 10px 28px 10px 0;
}

body .stat-card .stat-icon {
  color: var(--mt-accent);
  background: transparent;
  width: auto;
  height: auto;
  margin-bottom: 14px;
}

body .stat-card .stat-num {
  font-size: clamp(34px, 4.4vw, 52px);
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  margin-bottom: 8px;
}

body .stat-card .stat-num .plus {
  color: var(--mt-accent);
}

body .stat-card .stat-label {
  font-size: 14px;
  font-weight: 500;
  color: rgba(255, 255, 255, .62);
  letter-spacing: 0;
}

/* ─── App CTA ───────────────────────────────────────────────────────────── */

body .cta-box {
  background: linear-gradient(135deg, var(--mt-ink) 0%, #243449 100%);
  border-radius: 22px;
  padding: clamp(30px, 4vw, 56px);
  gap: clamp(28px, 4vw, 48px);
  align-items: center;
  overflow: hidden;
}

body .cta-info h2 {
  color: #fff;
  font-size: clamp(24px, 3.2vw, 38px);
  margin: 0 0 22px;
  max-width: 18ch;
}

body .cta-info h2 .hl {
  color: var(--mt-accent);
}

body .cta-user-btn {
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .22);
  color: #fff;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  padding: 7px 16px;
  margin-bottom: 20px;
}

body .cta-app-link {
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .2);
  color: #fff;
}

body .cta-app-link:hover {
  background: rgba(255, 255, 255, .15);
  color: #fff;
}

body .cta-phone img {
  width: 100%;
  height: auto;
  display: block;
}

/* ─── Testimonials ──────────────────────────────────────────────────────── */

body .test-card {
  background: var(--mt-paper);
  border: 1px solid var(--mt-line);
  border-radius: var(--mt-radius);
  padding: 30px 26px;
  box-shadow: none;
  position: relative;
}

/* Originally pinned to the top-right corner, where at this size it collided
   with the first line of the quote. It flows above the text instead, which is
   also where a reader expects an opening quote mark. */
body .test-card .qm {
  position: static;
  top: auto;
  right: auto;
  inset-inline: auto;
  display: block;
  color: var(--mt-line);
  font-size: 60px;
  line-height: .7;
  height: 32px;
  margin: 0 0 10px;
}

body .test-card .test-stars {
  color: #F5A623;
  font-size: 14px;
  letter-spacing: 2px;
  margin-bottom: 14px;
}

body .test-card .test-text {
  font-size: 16px;
  line-height: 1.7;
  color: var(--mt-ink-2);
  margin: 0 0 22px;
}

body .test-author {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 18px;
  border-top: 1px solid var(--mt-line);
}

body .test-av img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
}

body .test-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--mt-ink);
}

body .test-role {
  font-size: 13.5px;
  color: var(--mt-ink-3);
}

/* ─── Sliders ───────────────────────────────────────────────────────────── */

body .slider-arrow,
body .svc-arrow {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--mt-paper);
  border: 1px solid var(--mt-line);
  color: var(--mt-ink-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: border-color .18s ease, color .18s ease;
}

body .slider-arrow:hover,
body .svc-arrow:hover {
  border-color: var(--mt-ink);
  color: var(--mt-ink);
}

body .sp-dots .dot.active,
body .sp-dots span.active {
  background: var(--mt-accent);
}

/* ─── Newsletter and footer ─────────────────────────────────────────────── */

/* The footer is light because the Martiy logo is a dark navy wordmark: on the
   dark footer it was the one thing on the page you could not read, with only
   the red mark showing. Rather than recolour the logo -- which would mean a
   second logo file to keep in step with the one in Business Settings -- the
   surface under it changed.

   The page still ends on something solid: the newsletter becomes a dark panel
   sitting on the white, in the same family as the referral bar and the app
   panel higher up the page. So the footer gained light without the page losing
   its anchor.

   Two things here stay dark on purpose. The social icons are white SVG files
   (public/assets/landing/img/footer/*.svg), so they keep a dark disc behind
   them -- on a light background they would disappear exactly as the logo did.
   The store badges keep their dark fill for the same reason. */
body .footer {
  background: var(--mt-paper);
  border-top: 1px solid var(--mt-line);
  color: var(--mt-ink-2);
}

/* The newsletter block, as a contained dark panel. */
body .newsletter-area {
  text-align: center;
  background: var(--mt-ink);
  border-radius: 20px;
  padding: clamp(36px, 5vw, 56px) clamp(20px, 4vw, 48px);
  margin: clamp(40px, 5vw, 64px) 0 0;
  border-bottom: 0;
}

body .newsletter-area h2,
body .newsletter-area h3 {
  color: #fff;
  font-size: clamp(22px, 2.8vw, 32px);
  margin-bottom: 10px;
}

body .newsletter-area p {
  color: rgba(255, 255, 255, .62);
  margin-bottom: 26px;
}

body .nl-form {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 520px;
  margin-inline: auto;
}

body .nl-form input[type="email"],
body .nl-form input[type="text"] {
  flex: 1 1 260px;
  min-height: 48px;
  font-size: 16px;
  background: rgba(255, 255, 255, .08);
  /* A form field's edge has to be visible against what is behind it -- 3:1 is
     the threshold, and .18 alpha gave 1.78:1, so the box was barely there. */
  border: 1px solid rgba(255, 255, 255, .4);
  border-radius: 999px;
  padding-inline: 20px;
  color: #fff;
}

/* .5 alpha landed on exactly 4.5:1 against the field -- no margin at all. */
body .nl-form input::placeholder {
  color: rgba(255, 255, 255, .62);
  opacity: 1;
}

body .nl-form input:focus {
  outline: none;
  border-color: var(--mt-accent);
  background: rgba(255, 255, 255, .12);
}

body .nl-form button {
  min-height: 48px;
  padding-inline: 28px;
  border-radius: 999px;
  background: var(--mt-accent);
  background: color-mix(in srgb, var(--mt-accent) 76%, #000);
  border: 0;
  color: #fff;
  font-weight: 700;
  font-size: 16px;
}

body .nl-form button:hover {
  background: var(--mt-accent);
  background: color-mix(in srgb, var(--mt-accent) 86%, #000);
}

/* ── The light part ── */

body .footer-grid {
  padding-block: clamp(44px, 6vw, 72px);
  gap: clamp(32px, 5vw, 64px);
}

body .f-brand .nav-logo img {
  height: 42px;
  width: auto;
}

body .f-brand p {
  color: var(--mt-ink-3);
  font-size: 15px;
  max-width: 42ch;
  line-height: 1.7;
}

body .footer h4,
body .footer h5,
body .f-links-title {
  color: var(--mt-ink);
  font-size: 15px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: 0;
  margin-bottom: 14px;
}

body .f-links a,
body .f-contact a,
body .f-contact li {
  color: var(--mt-ink-2);
  font-size: 15px;
  line-height: 2;
  transition: color .18s ease;
}

body .f-links a:hover,
body .f-contact a:hover {
  color: var(--mt-accent);
}

/* Dark disc, because the icons inside it are white SVG files. */
body .f-social a {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--mt-ink);
  border: 1px solid var(--mt-ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .18s ease, border-color .18s ease;
}

body .f-social a img {
  width: 17px;
  height: 17px;
  object-fit: contain;
}

body .f-social a:hover {
  background: var(--mt-accent);
  background: color-mix(in srgb, var(--mt-accent) 76%, #000);
  border-color: transparent;
}

body .f-app-link {
  background: var(--mt-ink);
  border: 1px solid var(--mt-ink);
  color: #fff;
}

body .f-app-link:hover {
  background: #0D1620;
  border-color: #0D1620;
  color: #fff;
}

body .footer-bottom-bar {
  border-top: 1px solid var(--mt-line);
  padding-block: 22px;
  text-align: center;
  font-size: 14px;
  color: var(--mt-ink-3);
}

/* ─── Shared quality floor ──────────────────────────────────────────────── */

body a:focus-visible,
body button:focus-visible,
body input:focus-visible {
  outline: 2px solid var(--mt-accent);
  outline-offset: 2px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  body .marquee-track {
    animation: none !important;
  }

  body *,
  body *::before,
  body *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* ─── Narrow screens ────────────────────────────────────────────────────── */

@media (max-width: 991px) {
  body .stat-card {
    border-inline-start: 0;
    border-top: 1px solid rgba(255, 255, 255, .14);
    padding: 22px 0 0;
  }

  html[dir="rtl"] body .stat-card {
    padding: 22px 0 0;
  }
}

@media (max-width: 767px) {
  body .hero h1 {
    max-width: 100%;
  }

  body .hero-btns {
    width: 100%;
    flex-direction: column;
  }

  body .hero-btn {
    justify-content: center;
    width: 100%;
  }

  body .sec-header,
  body .earn-top {
    text-align: start;
  }

  body .refer-card h2,
  body .cta-info h2 {
    max-width: 100%;
  }

  body .nl-form {
    flex-direction: column;
  }

  body .nl-form input,
  body .nl-form button {
    width: 100%;
  }
}

/* ============================================================================
   INNER PAGES
   ----------------------------------------------------------------------------
   Everything below covers the pages that share this layout: the five policy
   pages, About Us, Contact Us, and the vendor, rider and deliveryman
   registration forms. Same markup, same content -- all of these already use the
   class names styled here.
   ========================================================================== */

/* ─── Page header (all inner pages) ─────────────────────────────────────── */

/* Was a full orange gradient with two decorative circles behind it. Against the
   restyled pages that banner was the loudest thing on screen and said nothing;
   the dark band matches the marquee, the statistics and the footer, and lets
   the page title be the only thing that speaks. */
body .page-hero {
  background: var(--mt-ink);
  padding: clamp(40px, 5vw, 64px) 0;
  text-align: center;
  color: #fff;
}

body .page-hero::before,
body .page-hero::after {
  display: none;
}

body .page-hero h1 {
  font-size: clamp(26px, 3.4vw, 40px);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #fff;
  margin: 0;
}

body .page-hero .breadcrumb {
  font-size: 14px;
  color: rgba(255, 255, 255, .58);
  margin-top: 12px;
}

body .page-hero .breadcrumb a {
  color: rgba(255, 255, 255, .78);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, .28);
  padding-bottom: 1px;
}

body .page-hero .breadcrumb a:hover {
  color: #fff;
  border-bottom-color: #fff;
}

/* ─── Policy pages: the long-read typography ────────────────────────────── */

body .page-content {
  padding: clamp(40px, 5vw, 72px) 0 clamp(48px, 6vw, 88px);
  background: var(--mt-band);
}

/* The card filled the full 1180px container, so a line of the privacy policy ran
   to about 160 characters -- roughly twice what anyone can read without losing
   their place on the way back. Capped at a measure of around 75 characters,
   which is what the text itself needed; nothing was cut. */
body .page-content .content-card {
  background: var(--mt-paper);
  border: 1px solid var(--mt-line);
  border-radius: 16px;
  max-width: 820px;
  margin: 0 auto;
  padding: clamp(28px, 4vw, 56px);
  line-height: 1.75;
  box-shadow: 0 1px 2px rgba(22, 32, 46, .04);
}

body .page-content .content-card > *:first-child {
  margin-top: 0;
}

body .page-content .content-card > *:last-child {
  margin-bottom: 0;
}

body .page-content .content-card h1,
body .page-content .content-card h2 {
  font-size: clamp(20px, 2.2vw, 25px);
  font-weight: 700;
  color: var(--mt-ink);
  letter-spacing: -0.02em;
  margin: 40px 0 12px;
  padding-top: 4px;
}

body .page-content .content-card h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--mt-ink);
  margin: 28px 0 8px;
}

body .page-content .content-card h4,
body .page-content .content-card h5,
body .page-content .content-card h6 {
  font-size: 16px;
  font-weight: 700;
  color: var(--mt-ink);
  margin: 22px 0 6px;
}

body .page-content .content-card p {
  font-size: 16.5px;
  color: var(--mt-ink-2);
  line-height: 1.75;
  margin: 0 0 18px;
}

body .page-content .content-card ul,
body .page-content .content-card ol {
  margin: 0 0 20px;
  padding-inline-start: 24px;
}

body .page-content .content-card li {
  font-size: 16.5px;
  color: var(--mt-ink-2);
  line-height: 1.7;
  margin-bottom: 8px;
  padding-inline-start: 4px;
}

body .page-content .content-card li::marker {
  color: var(--mt-accent);
}

body .page-content .content-card ul ul,
body .page-content .content-card ol ol,
body .page-content .content-card ul ol,
body .page-content .content-card ol ul {
  margin: 8px 0 0;
}

/* A link in a wall of legal text has to be findable without colour alone. */
body .page-content .content-card a {
  color: var(--mt-ink);
  text-decoration: underline;
  text-decoration-color: var(--mt-accent);
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
  font-weight: 600;
}

body .page-content .content-card a:hover {
  color: var(--mt-accent);
}

body .page-content .content-card strong,
body .page-content .content-card b {
  color: var(--mt-ink);
  font-weight: 700;
}

/* Tables had no borders or cell padding at all, so "Payment confirmations" and
   "7 years" ran into each other as one word. */
body .page-content .content-card table {
  width: 100%;
  border-collapse: collapse;
  margin: 8px 0 24px;
  font-size: 15.5px;
}

body .page-content .content-card th,
body .page-content .content-card td {
  border: 1px solid var(--mt-line);
  padding: 11px 14px;
  text-align: start;
  vertical-align: top;
  color: var(--mt-ink-2);
}

body .page-content .content-card th {
  background: var(--mt-band);
  color: var(--mt-ink);
  font-weight: 700;
}

body .page-content .content-card blockquote {
  margin: 20px 0;
  padding: 4px 0 4px 20px;
  border-inline-start: 3px solid var(--mt-accent);
  color: var(--mt-ink-2);
  font-size: 16.5px;
}

html[dir="rtl"] body .page-content .content-card blockquote {
  padding: 4px 20px 4px 0;
}

body .page-content .content-card hr {
  border: 0;
  border-top: 1px solid var(--mt-line);
  margin: 32px 0;
  opacity: 1;
}

body .page-content .content-card img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
}

body .page-content .content-card code,
body .page-content .content-card pre {
  background: var(--mt-band);
  border: 1px solid var(--mt-line);
  border-radius: 6px;
  font-size: 14.5px;
}

body .page-content .content-card code {
  padding: 2px 6px;
}

body .page-content .content-card pre {
  padding: 14px 16px;
  overflow-x: auto;
}

/* ─── Registration forms ────────────────────────────────────────────────── */

body .reg-section {
  padding: clamp(36px, 4.5vw, 64px) 0 clamp(44px, 6vw, 80px);
  background: var(--mt-band);
}

body .reg-container {
  max-width: 980px;
}

body .reg-card,
body .reg-section .card.__card {
  background: var(--mt-paper);
  border: 1px solid var(--mt-line);
  border-radius: 16px;
  padding: clamp(24px, 3.5vw, 40px);
  box-shadow: 0 1px 2px rgba(22, 32, 46, .04);
}

body .reg-section .card.__card {
  margin-bottom: 20px;
}

body .reg-section .card.__card .card-header {
  padding: 0 0 4px;
}

body .reg-section .card.__card .card-body {
  padding: 0;
}

body .sec-head,
body .reg-section .card.__card .card-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--mt-ink);
  letter-spacing: -0.01em;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--mt-line);
}

body .section-gap {
  margin-top: 36px;
}

/* Labels and fields. The fields were 13.4px, which has a specific and annoying
   consequence: iOS Safari zooms the whole page in whenever someone taps a field
   under 16px, and they then have to pinch back out to see the rest of the form.
   At 16px it stays put. These are long forms filled in on a phone, so this is
   the single most useful change on this page. */
body .reg-section .form-group {
  margin-bottom: 18px;
}

body .reg-section .form-group label,
body .reg-section .input-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--mt-ink);
  margin-bottom: 7px;
  letter-spacing: 0;
}

/* Bootstrap sets .text-danger with !important, so matching it is the only way
   to reach these. Scoped to the registration pages, which is all this file
   loads on. */
body .reg-section .form-group label .req,
body .reg-section .req,
body .reg-section .text-danger,
body .reg-section .invalid-feedback,
body .reg-section .password-feedback .invalid {
  color: var(--mt-danger) !important;
}

body .reg-section .form-group input.is-invalid,
body .reg-section .__form-control.is-invalid,
body .reg-section .is-invalid.form-control {
  border-color: var(--mt-danger) !important;
}

body .reg-section .form-group input,
body .reg-section .form-group select,
body .reg-section .form-group textarea,
body .reg-section .__form-control,
body .reg-section .form-control {
  width: 100%;
  min-height: 46px;
  padding: 11px 14px;
  font-size: 16px;
  line-height: 1.4;
  color: var(--mt-ink);
  /* background-color, not the `background` shorthand: the shorthand resets
     background-image, and that is where the select's dropdown chevron lives. */
  background-color: var(--mt-paper);
  border: 1px solid var(--mt-line);
  border-radius: 10px;
  transition: border-color .16s ease, box-shadow .16s ease;
}

/* Redrawn to match the new ink colour, and positioned with a logical property
   so the chevron moves to the left-hand end when the page is in Urdu instead of
   sitting on top of the text. */
body .reg-section .form-group select,
body .reg-section select.__form-control,
body .reg-section select.form-control {
  appearance: none;
  -webkit-appearance: none;
  padding-inline-end: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23697588' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  cursor: pointer;
}

html[dir="rtl"] body .reg-section .form-group select,
html[dir="rtl"] body .reg-section select.__form-control,
html[dir="rtl"] body .reg-section select.form-control {
  background-position: left 14px center;
}

body .reg-section .form-group input::placeholder,
body .reg-section .form-group textarea::placeholder,
body .reg-section .__form-control::placeholder {
  color: var(--mt-ink-3);
  opacity: 1;
}

body .reg-section .form-group input:focus,
body .reg-section .form-group select:focus,
body .reg-section .form-group textarea:focus,
body .reg-section .__form-control:focus,
body .reg-section .form-control:focus {
  border-color: var(--mt-accent);
  box-shadow: 0 0 0 3px var(--mt-accent-wash);
  outline: none;
}

body .reg-section .form-group textarea {
  min-height: 96px;
}

body .reg-section .form-hint {
  font-size: 13px;
  color: var(--mt-ink-3);
  margin-top: 5px;
}

body .reg-section .row-2,
body .reg-section .row-3 {
  gap: 18px;
}

/* The eye toggle was pinned with `right`, which puts it on top of the first
   character of the password once the page is in Urdu. */
body .pw-wrap .eye-btn {
  right: auto;
  inset-inline-end: 12px;
  color: var(--mt-ink-3);
}

body .pw-wrap .eye-btn:hover {
  color: var(--mt-ink);
}

/* Room for the eye button, so a long placeholder cannot run underneath it.
   This needs to out-weigh `.reg-section .form-group input`, whose `padding`
   shorthand resets the right-hand padding -- which is why the original
   `.pw-wrap input { padding-right: 40px }` never took effect either, and why
   the placeholder sat under the eye on both password fields.
   The second selector covers the vendor form, which uses .show-password with an
   absolutely positioned button instead of .pw-wrap. */
body .reg-section .form-group .pw-wrap input,
body .reg-section .pw-wrap input,
body .reg-section label.position-relative input.form-control,
body .reg-section label.position-relative input.__form-control {
  padding-right: 14px;
  padding-inline-end: 46px;
}

/* ─── Upload boxes ──────────────────────────────────────────────────────── */

body .upload-area,
body .reg-section .document-upload-wrapper,
body .reg-section .image--border {
  border: 1.5px dashed var(--mt-line);
  border-radius: 12px;
  background: var(--mt-band);
  transition: border-color .16s ease, background .16s ease;
}

body .upload-area:hover,
body .reg-section .document-upload-wrapper:hover,
body .reg-section .image--border:hover {
  border-color: var(--mt-accent);
  background: var(--mt-accent-wash);
}

body .upload-area.has-preview {
  border-style: solid;
  border-color: var(--mt-line);
  background: var(--mt-paper);
}

body .upload-area .upload-icon {
  width: 46px;
  height: 46px;
  background: var(--mt-accent-wash);
  color: var(--mt-accent);
}

body .upload-area .upload-label {
  font-size: 15px;
  font-weight: 600;
  color: var(--mt-ink);
}

body .upload-area p,
body .upload-area .upload-note,
body .upload-area .upload-hint,
body .reg-section .document-upload-wrapper .textbox p {
  font-size: 13.5px;
  color: var(--mt-ink-3);
  opacity: 1;
}

body .upload-area .upload-change {
  font-size: 13.5px;
  color: var(--mt-ink);
  text-decoration: underline;
  text-decoration-color: var(--mt-accent);
  text-underline-offset: 3px;
}

/* ─── Stepper ───────────────────────────────────────────────────────────── */

body .stepper-circle {
  width: 42px;
  height: 42px;
  font-size: 15px;
  font-weight: 700;
  border: 1.5px solid var(--mt-line);
  background: var(--mt-paper);
  color: var(--mt-ink-3);
}

body .stepper-step.active .stepper-circle,
body .stepper-step.completed .stepper-circle {
  background: var(--mt-accent);
  background: color-mix(in srgb, var(--mt-accent) 76%, #000);
  border-color: transparent;
  color: #fff;
}

body .stepper-label,
body .reg-section .stepper-item .step-name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--mt-ink-3);
}

body .stepper-step.active .stepper-label,
body .reg-section .stepper-item.active .step-name {
  color: var(--mt-ink);
  font-weight: 700;
}

body .stepper-connector {
  background: var(--mt-line);
}

/* ─── Terms row and the submit button ───────────────────────────────────── */

body .terms-check {
  margin-top: 26px;
  padding: 16px 18px;
  background: var(--mt-band);
  border: 1px solid var(--mt-line);
  border-radius: 12px;
  gap: 12px;
}

body .terms-check input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--mt-accent);
}

body .terms-check label {
  font-size: 14.5px;
  color: var(--mt-ink-2);
  line-height: 1.6;
}

/* The brand orange on white is 2.9:1 -- too faint for a link this size, and
   this one leads to the terms somebody is about to agree to. */
body .terms-check label a {
  color: var(--mt-ink);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--mt-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

body .terms-check label a:hover {
  color: var(--mt-accent);
}

/* Same contrast fix as the hero button: mixing the brand colour toward black
   raises white-text contrast whatever colour is set in Business Settings. */
body .submit-btn {
  background: var(--mt-accent);
  background: color-mix(in srgb, var(--mt-accent) 76%, #000);
  color: #fff;
  min-height: 50px;
  padding: 13px 24px;
  font-size: 16px;
  font-weight: 700;
  border-radius: 10px;
  border: 0;
  margin-top: 24px;
  transition: background .18s ease, transform .16s ease;
}

body .submit-btn:hover {
  background: var(--mt-accent);
  background: color-mix(in srgb, var(--mt-accent) 86%, #000);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px -10px rgba(var(--mt-accent-rgb), .9);
}

body .submit-btn:disabled,
body .submit-btn.disabled {
  background: var(--mt-band-2);
  color: var(--mt-ink-3);
  transform: none;
  box-shadow: none;
  opacity: 1;
}

@media (max-width: 767px) {
  body .page-hero {
    text-align: start;
  }

  body .reg-section .row-2,
  body .reg-section .row-3 {
    gap: 0;
  }
}

/* ─── select2, on the vendor form ───────────────────────────────────────── */

/* The vendor form uses select2 for business zone, module and cuisines. Its own
   stylesheet is pushed after this file, so these are written one level more
   specific rather than relying on order. Without them the select2 boxes sit at
   37px next to 46px native fields, which reads as a broken row.
   The dropdown panel is appended to <body>, so it is matched outside
   .reg-section. This file only loads on these pages, so nothing else is
   affected. */
body .reg-section .select2-container {
  width: 100% !important;
}

body .reg-section .select2-container--default .select2-selection--single,
body .reg-section .select2-container--default .select2-selection--multiple {
  min-height: 46px;
  padding: 5px 8px;
  border: 1px solid var(--mt-line);
  border-radius: 10px;
  background-color: var(--mt-paper);
}

body .reg-section .select2-container--default .select2-selection--single .select2-selection__rendered {
  line-height: 34px;
  padding-inline-start: 6px;
  font-size: 16px;
  color: var(--mt-ink);
}

body .reg-section .select2-container--default .select2-selection--single .select2-selection__placeholder {
  color: var(--mt-ink-3);
}

/* `right: 4px` in landing.css puts the arrow over the text in Urdu; clearing it
   first lets the logical property place it on the correct side either way. */
body .reg-section .select2-container--default .select2-selection--single .select2-selection__arrow {
  height: 44px;
  right: auto;
  inset-inline-end: 10px;
}

body .reg-section .select2-container--default.select2-container--open .select2-selection--single,
body .reg-section .select2-container--default.select2-container--focus .select2-selection--multiple,
body .reg-section .select2-container--default.select2-container--open .select2-selection--multiple {
  border-color: var(--mt-accent);
  box-shadow: 0 0 0 3px var(--mt-accent-wash);
}

body .reg-section .select2-container--default .select2-selection--multiple .select2-selection__choice {
  background: var(--mt-accent-wash);
  border: 1px solid rgba(var(--mt-accent-rgb), .35);
  border-radius: 7px;
  color: var(--mt-ink);
  font-size: 14px;
  padding: 3px 8px;
  margin-top: 5px;
}

body .reg-section .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  color: var(--mt-ink-3);
  margin-inline-end: 6px;
}

/* landing.css styles the dropdown twice -- once plainly and once through
   `.reg-section + .select2-container`, which is three classes deep. Both are
   matched here so this wins wherever select2 ends up putting the panel. */
body .select2-dropdown,
body .reg-section + .select2-container .select2-dropdown {
  border: 1px solid var(--mt-line);
  border-radius: 10px;
  box-shadow: 0 12px 28px -14px rgba(22, 32, 46, .3);
  overflow: hidden;
}

body .select2-container--default .select2-results__option {
  font-size: 15px;
  padding: 10px 14px;
  color: var(--mt-ink-2);
}

body .select2-container--default .select2-results__option--highlighted[aria-selected],
body .select2-container--default .select2-results__option--highlighted {
  background: var(--mt-accent-wash);
  color: var(--mt-ink);
}

body .select2-container--default .select2-results__option[aria-selected="true"] {
  background: var(--mt-band);
  color: var(--mt-ink);
  font-weight: 600;
}

body .select2-container--default .select2-search--dropdown .select2-search__field {
  font-size: 16px;
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid var(--mt-line);
  border-radius: 8px;
}

body .select2-container--default .select2-search--dropdown .select2-search__field:focus {
  border-color: var(--mt-accent);
  outline: none;
}

/* The Google Maps place-search box on the vendor form, matched to the fields
   next to it. */
body .reg-section #pac-input {
  min-height: 42px;
  font-size: 16px;
  padding: 9px 14px;
  border: 1px solid var(--mt-line);
  border-radius: 10px;
  background: var(--mt-paper);
  box-shadow: 0 2px 8px rgba(22, 32, 46, .12);
  color: var(--mt-ink);
}

body .reg-section #pac-input:focus {
  border-color: var(--mt-accent);
  outline: none;
}

/* The two one-time-code fields carry font-size:15px as an inline style
   attribute in the markup, so a stylesheet cannot reach them any other way.
   These are the fields someone taps right after typing their phone number, and
   under 16px iOS zooms the page in and leaves them hunting for the Verify
   button. The rest is brought in line with the fields around them. */
body #otpCodeInput,
body #emailOtpCodeInput {
  font-size: 16px !important;
  min-height: 44px !important;
  padding: 10px 12px !important;
  border: 1px solid var(--mt-line) !important;
  border-radius: 10px !important;
  color: var(--mt-ink);
  letter-spacing: 2px;
  text-align: center;
}

body #otpCodeInput:focus,
body #emailOtpCodeInput:focus {
  border-color: var(--mt-accent) !important;
  box-shadow: 0 0 0 3px var(--mt-accent-wash);
  outline: none;
}

/* Three error messages carry their colour as an inline style attribute, so a
   stylesheet cannot reach them without matching that weight: #pw-match-error on
   the rider and deliveryman forms, #confirm-pw-error on the vendor form. All
   three are #e74c3c, which is 3.8:1 on white -- thin for the message telling
   somebody their passwords do not match. The vendor one is also inline-sized at
   12.8px. Only the colour and size are touched; the inline display:none that
   hides them until needed is left alone. */
body #pw-match-error,
body #confirm-pw-error {
  color: var(--mt-danger) !important;
  font-size: 13.5px !important;
  font-weight: 600;
}

/* The live password-strength feedback on the vendor form uses the CSS keywords
   `green` and `red`, which are 5.1:1 and 4.0:1 on white. */
body .reg-section .password-feedback .valid,
body .reg-section .valid {
  color: #15803D;
}

body .reg-section .password-feedback .invalid,
body .reg-section .invalid {
  color: var(--mt-danger);
}

/* On the deliveryman form these boxes are followed by another row of fields in
   the same card, so they need space under them. The inline style on each box
   sets only margin-top, so this needs no !important. */
body #otpVerifyBox,
body #emailVerifyBox {
  margin-bottom: 20px;
}

/* ─── Fallback captcha ──────────────────────────────────────────────────── */

/* The built-in image captcha. It is hidden while Google reCAPTCHA is working
   and revealed only if that script fails to load -- which, until the script was
   wired up at all, could never happen, so this box had never actually been
   seen on these pages. Styled to match the fields around it. */
body #reload-captcha {
  margin-top: 10px;
  align-items: center;
}

body #reload-captcha #custome_recaptcha {
  width: 100%;
  min-height: 46px;
  padding: 11px 14px;
  font-size: 16px;
  letter-spacing: 2px;
  color: var(--mt-ink);
  background-color: var(--mt-paper);
  border: 1px solid var(--mt-line);
  border-radius: 10px;
}

body #reload-captcha #custome_recaptcha:focus {
  border-color: var(--mt-accent);
  box-shadow: 0 0 0 3px var(--mt-accent-wash);
  outline: none;
}

body #reload-captcha .bg-white {
  border: 1px solid var(--mt-line);
  border-radius: 10px;
  overflow: hidden;
  align-items: center;
  min-height: 46px;
}

body #reload-captcha .reloadCaptcha {
  cursor: pointer;
  color: var(--mt-ink-3);
  padding: 0 12px !important;
  display: flex;
  align-items: center;
}

body #reload-captcha .reloadCaptcha:hover {
  color: var(--mt-accent);
}