/* ==========================================================================
   Ensure Labs — cross-browser layer
   Loaded last on the public site so Firefox, Safari and Edge render the same
   as Chrome. Everything here is standard CSS with the prefixed variants kept
   alongside, never instead of, the standard property.
   ========================================================================== */

/* ── Offer ticker ─────────────────────────────────────────────────────────
   Replaces <marquee>, which is non-standard: every browser picks its own
   scroll speed and the stop()/start() methods it needed are not part of any
   spec. This animation runs identically everywhere and pauses on hover with
   no JavaScript at all.                                                    */
.el-ticker {
  position: relative;
  width: 100%;
  overflow: hidden;
  z-index: 10;
  margin-top: 0;
  padding: 6px 0;
  background-color: rgba(255, 255, 255, 0.32);
  color: #003e47;
  font-size: 14px;
  line-height: 1.5;
}

.el-ticker__track {
  display: flex;
  width: max-content;
  will-change: transform;
  -webkit-animation: el-ticker-scroll 28s linear infinite;
          animation: el-ticker-scroll 28s linear infinite;
}

.el-ticker__item {
  display: inline-block;
  white-space: nowrap;
  padding-right: 4rem; /* gap between the two copies */
}

.el-ticker__code {
  color: rgb(151, 7, 7);
  font-weight: 600;
}

.el-ticker:hover .el-ticker__track,
.el-ticker:focus-within .el-ticker__track {
  -webkit-animation-play-state: paused;
          animation-play-state: paused;
}

@-webkit-keyframes el-ticker-scroll {
  from { -webkit-transform: translateX(0);      transform: translateX(0); }
  to   { -webkit-transform: translateX(-50%);   transform: translateX(-50%); }
}
@keyframes el-ticker-scroll {
  from { -webkit-transform: translateX(0);      transform: translateX(0); }
  to   { -webkit-transform: translateX(-50%);   transform: translateX(-50%); }
}

/* Respect the OS "reduce motion" setting instead of scrolling regardless */
@media (prefers-reduced-motion: reduce) {
  .el-ticker__track {
    -webkit-animation: none;
            animation: none;
  }
  .el-ticker__item:nth-child(2) { display: none; }
  .el-ticker__item { white-space: normal; padding-right: 0; }
  .el-ticker { text-align: center; }
}

/* ── Scrollbars ───────────────────────────────────────────────────────────
   The theme styles scrollbars with ::-webkit-scrollbar only, which Firefox
   ignores — so scrollable panels looked different there. These two standard
   properties are Firefox's equivalent.                                     */
.scroll-y,
.modal,
.modal-body,
.bs-stepper,
.tabs-navigation,
.cart-items,
.mob-suggestion-box,
.search-suggestions {
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 77, 102, 0.45) transparent;
}

/* ── Form controls ────────────────────────────────────────────────────────
   Selects otherwise use each browser's own arrow and metrics.              */
select.form-control,
select.form-select {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23667' d='M1.4 0 6 4.6 10.6 0 12 1.4 6 7.4 0 1.4z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 11px 7px;
  padding-right: 34px;
}

/* Firefox keeps an inner focus ring and a dotted outline on selects */
select.form-control:-moz-focusring,
select.form-select:-moz-focusring {
  color: transparent;
  text-shadow: 0 0 0 #333;
}
select::-ms-expand { display: none; } /* legacy Edge/IE arrow */

/* Placeholder colour was only set for WebKit */
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { color: #aab; opacity: 1; }
input::-moz-placeholder,          textarea::-moz-placeholder          { color: #aab; opacity: 1; }
input:-ms-input-placeholder,      textarea:-ms-input-placeholder      { color: #aab; opacity: 1; }
input::placeholder,               textarea::placeholder               { color: #aab; opacity: 1; }

/* Firefox adds an inner border/padding to buttons and file inputs */
button::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner {
  border: 0;
  padding: 0;
}

/* Number inputs: hide the spinners consistently */
input[type="number"] {
  -moz-appearance: textfield;
       appearance: textfield;
}
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Date inputs sit slightly differently in Firefox without this */
input[type="date"],
input[type="time"] {
  min-height: calc(1.5em + 0.75rem + 2px);
}

/* ── Text rendering ───────────────────────────────────────────────────────
   Without this Firefox renders the same font noticeably heavier than Chrome. */
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ── Images ───────────────────────────────────────────────────────────────
   Keeps aspect ratio consistent when only one dimension is set.            */
img {
  max-width: 100%;
  height: auto;
}