/* Container */
.rb-track { max-width: 720px; margin: 2rem auto; padding: 1.25rem; }

/* Header */
.rb-title { margin: 0; font-size: 1.5rem; font-weight: 700; color: #111827; }
.rb-sub { margin: .25rem 0 1rem; color: #6b7280; }

/* Input group */
.rb-input-group { display: flex; gap: .5rem; align-items: stretch; border: 1px solid #e5e7eb; border-radius: .75rem; padding: .25rem; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.03); }
.rb-input-group input { flex: 1 1 auto; border: 0; outline: none; padding: .8rem .9rem; font-size: 1rem; border-radius: .5rem; }
.rb-input-group input:focus { box-shadow: inset 0 0 0 1px #0ea5e9; }

/* Button */
.rb-btn { border: 0; padding: .8rem 1rem; border-radius: .6rem; cursor: pointer; background: #0ea5e9; color: #fff; font-weight: 600; transition: transform .05s ease, opacity .2s ease; }
.rb-btn:hover { opacity: .95; }
.rb-btn:active { transform: translateY(1px); }

/* Result card */
.rb-track-result { margin-top: 1rem; }
.rb-card { border: 1px solid #e5e7eb; border-radius: .9rem; padding: 1rem; box-shadow: 0 4px 12px rgba(0,0,0,.04); background: #fff; }
.rb-row { display: flex; justify-content: space-between; gap: .75rem; margin: .6rem 0; align-items: center; }
.rb-kv { color: #6b7280; }
.rb-val { font-weight: 600; color: #111827; }

/* Status badge */
.rb-badge { display: inline-block; color: #fff; padding: .25rem .55rem; border-radius: .5rem; font-size: .9rem; line-height: 1; }

/* A11y */
.rb-visually-hidden { position: absolute !important; height: 1px; width: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }

/* --- Elementor-style button + typography overrides for tracking page --- */
.rb-track,
.rb-track * {
  font-family: var(--e-global-typography-text-font-family, "Plus Jakarta Sans"), Sans-serif;
  line-height: var(--e-global-typography-text-line-height, 24px);
  font-size: var(--e-global-typography-text-font-size, 14px);
}

/* Input font and focus color from Elementor vars */
.rb-input-group input {
  font-family: var(--e-global-typography-text-font-family, "Plus Jakarta Sans"), Sans-serif;
}
.rb-input-group input:focus {
  box-shadow: inset 0 0 0 1px var(--e-global-color-primary, #000000);
}

/* Button styled like your Elementor button */
.rb-btn {
  background-color: var(--e-global-color-primary, #000000);
  color: var(--e-global-color-secondary, #FFFEF5);
  fill: var(--e-global-color-secondary, #FFFEF5);

  font-family: var(--e-global-typography-accent-font-family, "Plus Jakarta Sans"), Sans-serif;
  font-size: var(--e-global-typography-accent-font-size, 16px);
  font-weight: var(--e-global-typography-accent-font-weight, 600);
  text-transform: var(--e-global-typography-accent-text-transform, none);
  font-style: var(--e-global-typography-accent-font-style, normal);
  text-decoration: var(--e-global-typography-accent-text-decoration, none);
  line-height: var(--e-global-typography-accent-line-height, 24px);

  border: 0;
  border-radius: 100px;
  padding: 12px 28px;
  cursor: pointer;
  transition: transform .05s ease, opacity .2s ease, box-shadow .2s ease;
}

.rb-btn:hover { opacity: .95; }
.rb-btn:active { transform: translateY(1px); }

/* Result badge text keeps good contrast on your palette */
.rb-badge {
  font-family: var(--e-global-typography-4ae68ba-font-family, "Plus Jakarta Sans"), Sans-serif;
  font-weight: var(--e-global-typography-4ae68ba-font-weight, 700);
}

/* ===== Heading style (from your reference, without globals) ===== */
.rb-title {
  font-family: "Plus Jakarta Sans", Sans-serif;
  font-size: 30px;           /* was var(--e-global-typography-9f6bfa5-font-size) */
  font-weight: 600;          /* was var(--e-global-typography-9f6bfa5-font-weight) */
  text-transform: none;      /* was var(--e-global-typography-9f6bfa5-text-transform) */
  font-style: normal;        /* was var(--e-global-typography-9f6bfa5-font-style) */
  text-decoration: none;     /* was var(--e-global-typography-9f6bfa5-text-decoration) */
  line-height: 38px;         /* was var(--e-global-typography-9f6bfa5-line-height) */
  color: #000000;            /* was var(--e-global-color-primary) */
}

/* ===== Body text style (from your reference, without globals) ===== */
.rb-track,
.rb-track p,
.rb-sub,
.rb-row span,
.rb-input-group input {
  font-family: "Plus Jakarta Sans", Sans-serif;
  font-size: 14px;           /* was var(--e-global-typography-text-font-size) */
  font-weight: 400;          /* was var(--e-global-typography-text-font-weight) */
  text-transform: none;      /* was var(--e-global-typography-text-text-transform) */
  font-style: normal;        /* was var(--e-global-typography-text-font-style) */
  text-decoration: none;     /* was var(--e-global-typography-text-text-decoration) */
  line-height: 24px;         /* was var(--e-global-typography-text-line-height) */
  color: #5D5E6F;            /* was var(--e-global-color-accent) */
}

/* If you want the small label text (left column in rows) a bit lighter: */
.rb-kv { color: #6b7280; } /* optional tweak */

/* === Make input group corners match the button (pill) === */
.rb-input-group {
  border-radius: 100px;        /* same as button */
}
.rb-input-group input {
  border-radius: 100px;        /* smooth inside corners */
}

/* === Make result cards rounded like the button === */
.rb-card {
  border-radius: 40px;        /* pill-like card corners */
  padding: 1rem 1.25rem;
}

/* === Improve status badge readability === */
.rb-badge {
  color: #ffffff !important;   /* force white text for contrast */
  font-weight: 700;
  letter-spacing: .2px;
  padding: .35rem .8rem;
  border-radius: 100px;        /* pill badge */
  display: inline-flex;
  align-items: center;
  line-height: 1;
  box-shadow: 0 1px 0 rgba(0,0,0,.05) inset;
}

/* Optional: ensure the right column doesn’t fade the badge color */
.rb-val { color: #111827; }     /* dark neutral for values */


/* ===== Labels: Customer, Device, Status ===== */
.rb-kv {
  font-weight: 700;     /* bold */
  font-style: italic;   /* italic */
  color: #111827;       /* darker for readability */
}

/* ===== Values on the right stay readable ===== */
.rb-val { color: #111827; }

/* ===== Status text only (no background, no colors) ===== */
.rb-badge {
  background: transparent !important;  /* override inline bg from JS */
  color: #111827 !important;           /* neutral text color */
  font-weight: 700;                    /* bold */
  font-style: italic;                  /* italic */
  padding: 0;                          /* no pill look */
  border: none;
  box-shadow: none;
  line-height: 1.2;
}

/* ===== Button hover like the example ===== */
.rb-btn {
  background: #000;
  color: #fff;
  border: 1.5px solid #000;
  border-radius: 100px;
  padding: 12px 28px;
  transition: transform .08s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
}

/* Hover: white bg, black border/text, subtle lift and shadow */
.rb-btn:hover {
  background: #fff;
  color: #000;
  box-shadow: 0 8px 20px rgba(0,0,0,.12);
  transform: translateY(-1px);
}

/* Pressed state: settle back a touch */
.rb-btn:active {
  transform: translateY(0);
  box-shadow: 0 4px 12px rgba(0,0,0,.10);
}

/* Optional: nicer focus ring for keyboard users */
.rb-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0,0,0,.15);
}


/* Stronger labels on the left */
.rb-kv {
  font-weight: 700 !important;      /* bolder */
  font-style: italic;
  color: #0f172a;        /* very dark for contrast */
  font-size: 15px;       /* slight bump (optional) */
}

/* Keep right-side values readable */
.rb-val { color: #0f172a; }

/* Status text only: uppercase, italic, bold, no background */
.rb-badge {
  background: transparent !important;
  color: #0f172a !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0;            /* remove pill feel */
  text-transform: uppercase !important;
  font-style: italic !important;
  font-weight: 600 !important;      /* bolder */
  letter-spacing: .2px;  /* tiny spacing helps uppercase */
  line-height: 1.2;
}




/* Harden button against theme/Elementor overrides */
.rb-track .rb-btn {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  background: #000 !important;
  color: #fff !important;
  border: 1.5px solid #000 !important;
  border-radius: 100px !important;
  padding: 12px 28px !important;

  font-family: "Plus Jakarta Sans", Sans-serif !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  line-height: 24px !important;

  transition: transform .08s ease, box-shadow .2s ease, background .2s ease, color .2s ease !important;
}

.rb-track .rb-btn:hover {
  background: #fff !important;
  color: #000 !important;
  box-shadow: 0 8px 20px rgba(0,0,0,.12) !important;
  transform: translateY(-1px) !important;
}

.rb-track .rb-btn:active {
  transform: translateY(0) !important;
  box-shadow: 0 4px 12px rgba(0,0,0,.10) !important;
}

.rb-track .rb-btn:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(0,0,0,.15) !important;
}