:root {
  /* Backgrounds */
  --color-background-main: #ffffff; /* White */
  --color-background-main-hover: #E4D7C7; /* Warm cream */
  --color-background-primary: #231f20; /* Near-black */
  --color-background-primary-hover: #544F50; /* Medium warm grey */
  --color-background-secondary: #F26419; /* Vibrant orange */
  --color-background-secondary-hover: #D85410; /* Deep vibrant orange */
  --color-background-tertiary: #e7e2e1; /* Warm off-white */
  --color-background-quaternary: #F26419; /* Vibrant orange */
  --color-background-quaternary-hover: #F26419; /* Vibrant orange */
  --color-background-quinary: #eeeeee; /* Light grey */
  --color-background-senary: #cfcfcf; /* Mid grey */
  --color-background-white: #FFFFFF; /* White */
  --color-background-white-hover: #e5e5e5; /* Near white */
  --color-background-upsell: #efefef; /* Off white */
  --color-background-upsell-hover: #d9d9d9; /* Soft grey */
  --checkboxColorBackground: var(--color-background-quaternary);

  /* Accent */
  --color-accent: #F26419; /* Vibrant orange */
  --color-accent-hover: #F26419; /* Vibrant orange */

  /* Focus Ring */
  --color-focus-ring: #0066FF; /* Bright blue */
  --color-focus-ring-halo: #FFFFFF; /* White */

  /* Text */
  --color-text-primary: #231f20; /* Near-black */
  --color-text-primary-hover: #544f50; /* Medium warm grey */
  --color-text-secondary: #4D4A48; /* Dark warm grey */
  --color-text-tertiary: #AC3D1A; /* Deep ember orange */
  --color-text-tertiary-hover: #8C3A16; /* Dark ember */
  --color-text-quaternary: #AC3D1A; /* Deep ember orange */
  --color-text-quaternary-hover: #8C3A16; /* Dark ember */
  --color-text-optional: #6C6C6C; /* Mid grey */
  --color-text-white: #FFFFFF; /* White */
  --color-text-black: #000000; /* Black */
  --color-text-ember-on-dark: #F75C21; /* Bright ember orange */
  --color-text-vibrant: #F26419; /* Vibrant Orange */

    
  /* Button */
  --color-button-text: #000000; /* Black */
  --color-button-background: #F26419; /* Vibrant orange */
  --color-button-background-hover: #D85410; /* Deep vibrant orange */
  --color-button-background-hover-white: #FFFFFF; /* White */

  /* Border */
  --color-border-default: #231f20; /* Near-black */

  /* System */
  --color-error: #BE1B0A; /* Deep red */
  --color-disabled: #666666; /* Grey */
  --color-disabled-soft: #d7d7d7; /* Light grey */
  --color-coupons: #267A38; /* Forest green */

  /* Other */
  --color-deal-builder-bar: #71714D; /* Olive brown */
  --color-deal-builder-bar-light: #71714D4D; /* Olive brown, translucent */

  --shadow: 0px 4px 2px rgba(0, 0, 0, 0.35);

  --hover-transition: all 0.05s ease;
  --hover-shadow: 0 4px 2px rgba(0, 0, 0, 0.5);
  --hover-transform: scale(1.01);
    
}

/* ------ Header ------ */
.header {
  --header-background-color: var(--color-background-primary);
  --header-text-color: var(--color-text-white);
  --header-icon-color: var(--color-text-white);
  --header-cart-items-background-color: var(--color-background-quaternary);
  --header-cart-items-color: var(--color-text-black);
}

.header .cart-icon {
  color: #FFFFFF; /* White */
}

.header .cart-icon > span {
  background-color: var(--color-background-secondary);
}

.header .cart-icon > button > .item-number {
  color: var(--color-text-black);
}

.header .hamburger-icon, .header .profile-icon, .header .cart-icon {
  color: var(--color-text-white);
}

.fancy-title > div:not(:first-child) {
  color: var(--color-text-vibrant);
}

/* ------ Hamburger Menu ------ */
#modal_hamburger {
  --hamburger-ellipse-bg-color: var(--color-background-quinary);
  --hamburger-color: var(--color-accent);
  --hamburger-footer-color: var(--color-disabled);
}

#hamburger_loyalty {
  color: var(--color-background-white);
}

:is(#hamburger_items > *), #hamburger_language {
  color: var(--color-text-primary);
}

#hamburger_loyalty_points_value {
  color: var(--color-text-quaternary);
}

#hamburger_loyalty_points_text {
  color: var(--color-text-primary);
}

/* ------ Buttons ------ */
button {
  --colorActive: #267A38; /* Forest green */
  --button-color: var(--color-text-black); /* Black label on vibrant orange */
  --button-bg-color: var(--color-button-background);
  --button-bg-color-secondary-hover: var(--color-text-white);
  --button-color-disabled: #f2efef; /* Soft off-white */
}

button:hover {
  background-color: var(--color-button-background-hover);
}

button.underline:hover {
  background-color: unset;
}

.checkRadio > input:checked + label::before {
  background-color: var(--color-background-secondary);
}

/* Add More Items */
button.secondary {
  color: var(--color-text-primary);
}

button.secondary:hover {
  color: var(--color-text-quaternary);
  background-color: var(--color-background-main);
}

/* ------ Landing Location ------ */
.location-info-btn {
  --button-color: var(--color-text-primary);
}

.location-info-bar {
  color: var(--color-text-primary);
}

.location-info-bar:hover, .location-info-bar:focus {
  color: var(--color-text-primary-hover);
}

#div_header_location_bar > .location-info-bar {
  color: var(--color-text-white);
}

.search-icon {
  color: var(--color-background-primary);
  padding-right: 5px;
}

/* ------ Account Profile, Sign Up/In ------ */
.fancy-title {
  --fancy-title-first-color: var(--color-text-primary);
  --fancy-title-alt-color: var(--color-text-primary);
  font-size: 5rem;
  display: inline-block;
  margin: 0.125em auto;
}

.fancy-subtitle {
  --fancy-title-subtitle-color: var(--color-text-primary);
  --fancy-title-subtitle-color-alt: var(--color-accent);
}

#modal_header_account {
  --header-account-color: var(--color-text-primary);
}

.modal small {
  color: var(--color-text-primary);
}

#page_account .section-header {
  background: var(--color-background-quinary);
}

#page_account .section-header-edit {
  font-size: 0.85em;
}

/* ------ Favorite Items ------ */
#div_favorite_tabs .tabs-bar {
  background-color: var(--color-background-primary);
}

.no-fav-container {
  --favorite-none-background-color: var(--color-background-quinary);
  --favorite-none-color: var(--color-text-primary);
  text-align: center;
}

.favorite-container {
  --favorite-card-background-color: var(--color-background-quinary);
  --favorite-card-missing-mod-color: var(--color-error);
  --favorite-card-icon-background-color: var(--color-background-main);
  --favorite-card-icon-color: var(--color-text-tertiary);
  --favorite-card-icon-color-hover: var(--color-text-primary);
}

/* Favorite Icon */
.icon-favorites {
  --button-color: var(--color-text-primary);
  --modal-background-color: var(--color-text-primary);
}

.icon-heart-filled {
  --button-color: var(--color-text-tertiary);
  --modal-background-color: var(--color-text-tertiary);
}

/* ------ Favorite Location ------ */
.favorite-store-card {
  --favorite-store-card-background-color: var(--color-background-quinary);
  --favorite-store-card-hours-color: var(--color-text-secondary);
  background-color: var(--favorite-store-card-background-color);
}

/* ------ My Rewards ------ */
.page-rewards-body {
  --rewards-blob-bg-color: var(--color-background-primary);
  --rewards-points-bar-color: var(--color-background-primary);
  --rewards-points-bar-color-filled: var(--color-text-ember-on-dark);
  --rewards-points-bar-text-color: var(--color-text-white);
  --rewards-points-bar-text-color-filled: var(--color-text-black);
  --rewards-info-text-color: var(--color-background-primary);
  --rewards-header-bg-color: var(--color-background-quinary);
  --rewards-card-bg-color: var(--color-background-quinary);
  --rewards-card-redeem-color-active: var(--color-background-primary);
}

.header_background {
  color: var(--color-text-white);
}

.points-summary-container .rewards-user-info-greeting {
  color: var(--color-text-white);
}

.rewards-section-header {
  background: var(--color-background-quinary);
}

.icon-heart-filled.favorites {
  color: var(--color-accent);
}

.menu-item-card-small__pill--size {
  color: var(--color-text-white);
}

/* ------ Segmented Button, Order Type ------ */
.segmented-button {
  --segmented-button-bg-color: var(--color-background-white);
  --segmented-button-active-text-color: var(--color-background-white);
  --segmented-button-border-color: var(--color-border-default);
  --segmented-button-bg-color-hover: var(--color-accent-hover);
}

.segmented-button > button {
  color: var(--color-text-primary);
}

.segmented-button > button.active {
  color: var(--color-text-black);
  background-color: var(--color-background-secondary);
}

.segmented-button > button:not(.active):hover {
  color: var(--color-text-tertiary);
  background-color: var(--color-button-background-hover-white);
}

.segmented-button > [role="option"]:not(.active):hover {
  color: var(--color-text-black);
  background-color: var(--color-button-background-hover);
}

/* ------ Menu Bar ------ */
.menu-tabs {
  background-color: var(--color-background-primary);
}

.menu-tabs .tabs-bar {
  --tab-bar-text-color: var(--color-text-white);
  --tab-bar-text-color-active: #f75c21; /* Bright ember orange */
}

.tabs-bar {
  --tab-bar-text-color: var(--color-text-primary);
  --tab-bar-text-color-active: var(--color-text-tertiary);
}

@media (hover: hover) {
  .tab-bar-tab:hover {
    color: var(--tab-bar-text-color-active);
    background-color: unset;
  }
}

/* ------ Delivery Address Search ------ */
.locations-main-container {
  --locations-card-bg-color: var(--color-background-quinary);
  --locations-card-bg-color-active: var(--color-background-quinary);
  --locations-address-form-border-color: var(--color-border-default);
  --locations-selector-color: var(--color-text-primary);
}

.user-address {
  background-color: var(--color-background-primary);
  --locations-card-secondary-text-color: var(--color-text-white);
  color: var(--color-text-white);
}

.user-address p {
  color: var(--color-text-white);
}

.address-form {
  border: 2px solid var(--locations-address-form-border-color);
  border-radius: var(--radius);
  cursor: pointer;
  margin-bottom: 10px;
  background-color: var(--locations-card-bg-color);
  transition: background-color 0.125s ease-in-out;
}

/* ------ Take Out/Dine In Search ------ */
.store-list-selector > div.active {
  color: var(--color-text-vibrant);
  border-bottom: 3px solid currentColor;
}

.store-list-selector > div.active:hover {
  color: var(--color-text-tertiary-hover);
  border-bottom: 3px solid currentColor;
}

.store-address:hover {
  color: var(--color-text-black);
  --locations-card-secondary-text-color: var(--color-text-black);
  background-color: var(--color-background-senary);
}

.store-address.active {
  color: var(--color-text-white);
  --address-card-secondary-text-color: var(--color-text-white);
  background-color: var(--color-background-primary);
}

/* ------ Menu Category Pill Bar ------ */
.pill-bar-container {
  --pill-bar-background-color: var(--color-background-primary);
  --pill-bar-text-color: var(--color-text-white);
  --pill-bar-background-color-disabled: var(--color-disabled);
  --pill-bar-background-color-active: var(--color-background-secondary);
  --pill-bar-background-color-hover: var(--color-button-background-hover);
  --pill-bar-text-color-active: var(--color-text-black);
}

/* ------ Menu Item Cards ------ */
.menu-item-card-small {
  --menu-item-card-bg-color: var(--color-background-white);
  --menu-item-card-bg-color-hover: var(--color-background-white-hover);
  box-shadow: var(--shadow);
  transition: var(--hover-transition);
}

.menu-item-card-small:not(.selected):hover {
  box-shadow: var(--hover-shadow);
  transform: var(--hover-transform);
  background-color: var(--color-background-white-hover);
}

.menu-item-card-small.horizontal {
  --meal-deal-section-card-background-color: var(--color-background-white);
  --meal-deal-section-card-background-color-selected: var(--color-background-quinary);
  --meal-deal-section-card-border-color-selected: var(--color-text-primary);
  background-color: var(--meal-deal-section-card-background-color);
}

.menu-item-card-small.horizontal.selected {
  color: var(--color-text-primary);
  border: 1px solid var(--meal-deal-section-card-border-color-selected);
}

@media (max-width: 700px) {
  .menu-parent-wrapper .menu-item-card-parent {
    padding: 9px 15px;
  }
}

/* ------ Meal Deal Card ------ */
.meal-deal-card {
  --meal-deal-card-background-color: var(--color-background-white);
  --meal-deal-card-background-color-hover: var(--color-background-white-hover);
  --meal-deal-card-border-color: var(--color-border-default);
  --meal-deal-card-content-color: var(--color-text-primary);
  --color-background-secondary: var(--color-background-white-hover);
  background-color: var(--meal-deal-card-background-color);
  border: 1px solid var(--meal-deal-card-border-color);
  box-shadow: var(--shadow);
  transition: var(--hover-transition);
}

.meal-deal-card:hover {
  box-shadow: var(--hover-shadow);
  transform: var(--hover-transform);
  background-color: var(--color-background-secondary);
  --meal-deal-card-border-color: var(--color-border-default);
}

.button-link {
  font-size: 12px;
  color: var(--color-text-tertiary);
}

button.button-link:hover {
  color: var(--color-text-tertiary-hover);
}

/* ------ Recently Ordered ------ */
.recent-order-main-card {
  --recent-orders-card-background-color: var(--color-background-quinary);
  --recent-orders-card-order-status-background-color: var(--color-background-primary);
  --recent-orders-card-order-status-text-color: var(--color-text-white);
  background-color: var(--recent-orders-card-background-color);
}

.recent-order-card-header .order-status {
  background-color: var(--color-background-primary);
  color: var(--color-text-white);
}

.recent-orders-parent .no-recent-orders-message {
  background-color: var(--color-background-quinary);
  padding: 20px;
  border-radius: 8px;
}

/* ------ Customize Item ------ */
.customize-item-container {
  --customize-item-half-card: var(--color-background-secondary);
  --customize-item-calorie-price-color: var(--color-text-secondary);
  --customize-item-section-header-bg-color: var(--color-background-quinary);
  --customize-item-section-header-option-color: var(--color-text-tertiary);
  --customize-item-footer-bg-color: var(--color-background-quinary);
  --customize-item-footer-quantity-bg-color: var(--color-background-white);
  --customize-item-footer-quantity-bg-color-hover: var(--color-background-quaternary-hover);
  --customize-item-footer-quantity-border-color: var(--color-text-primary);
}

#btn_customize_item_favorite, #btn_customize_item_favorite_half {
  background-color: var(--color-background-white);
}

#btn_customize_item_favorite:hover, #btn_customize_item_favorite_half:hover {
  opacity: 0.75;
  transition: all 0.25s ease;
}

.custom-radio {
  --rad-chk-bg-color: var(--color-background-main);
  --rad-chk-checked-bg-color: var(--color-background-secondary);
}

.item-section-header > h2 {
  color: var(--color-text-primary);
}

.item-section-header > span {
  color: var(--color-text-primary);
  font-size: 14px;
}

.bottom-bar {
  background-color: var(--color-background-white);
}

.bottom-bar.scrolled {
  box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.5);
}

/* Half and Half */
.customize-item-header-multi-card {
  align-items: center;
  background-color: var(--color-background-quinary);
}

/* ------ Second Half Selection Modal ------ */
#modal_select_second_half > .modal-header {
  width: 100%;
}

/* ------ Quantity Selector ------ */
.quantity-selector {
  --radius: 42px;
  border-radius: var(--radius);
}

.quantity-selector button {
  color: var(--color-text-primary);
}

/* ------ Hot Deals (Deal Builder) ------ */
.deal-builder-container {
  --deal-builder-header-shadow-color: rgba(0, 0, 0, 0.4);
  --deal-builder-header-complete-color: var(--color-background-secondary);
  --deal-builder-header-incomplete-color: var(--color-background-white);
  --deal-builder-group-header-bg-color: var(--color-background-quinary);
  --deal-builder-group-header-color: var(--color-text-tertiary);
  --deal-builder-group-header-added-bg-color: var(--color-background-primary);
  --deal-builder-group-header-added-color: var(--color-background-main);
  --deal-builder-footer-bg-color: var(--color-background-primary);
  --deal-builder-footer-color: var(--color-text-ember-on-dark);
}

.deal-builder-container .deal-builder-header {
  background-color: var(--color-background-primary);
}

.deal-progress-header > h2 {
  color: var(--color-text-white) !important;
}

.deal-builder-selected-status {
  font-size: 13px;
  color: var(--color-background-white);
}

/* ------ Order Cart ------ */
.menu-item-cart-card-parent {
  --menu-item-cart-card-price-color: var(--color-text-primary);
  --menu-item-cart-card-quantity-background-color: var(--color-background-primary);
  --redeemed-label-color: var(--color-coupons);
  --menu-item-cart-card-quantity-background-color-disabled: var(--btnColorBgSecondaryDisabled);
  background-color: var(--color-background-quinary);
}

.menu-item-cart-card-actions .item-quantity {
  background-color: var(--color-background-main);
}

.menu-item-cart-card-actions .item-quantity .quantity-btn {
  background-color: unset;
  color: var(--color-text-primary);
}

.cart-no-items {
  background-color: var(--color-background-quinary);
}

/* --- Gift Card Button --- */
.checkout-gift-card-add-button {
  background-color: var(--color-button-background);
  color: var(--color-text-primary);
}

.challenge-main-div {
  --challenge-border-color: var(--color-border-default);
  --challenge-member-list-background-color: var(--modal-background-color);
  --challenge-member-background-color: var(--color-background-senary);
  --challenge-group-title-color: var(--color-background-secondary);
  --challenge-title-color: var(--color-background-primary);
}

/* ------ Upsell Row ------ */
.upsell-wrapper {
  --upsell-background-color: var(--color-background-white);
  --upsell-background-color-hover: var(--color-background-white-hover);
}

/* ------ Rewards & Offers (Cart) ------ */
.cart-reward-section {
  --cart-reward-bg-color: var(--color-background-quinary);
  --cart-reward-arrow-color: var(--color-background-quinary);
  --cart-reward-card-bg-color: var(--color-background-primary);
  --cart-reward-card-bg-color-hover: var(--color-background-primary-hover);
  --cart-reward-card-expiry-color: var(--color-text-secondary);
}

.cart-reward-card {
  color: var(--color-text-black);
  background-color: var(--color-background-quaternary);
}

.cart-reward-card:hover {
  background-color: var(--color-background-secondary-hover);
}

.cart-reward-card .expiry {
  font-size: 14px;
  color: var(--color-text-black);
}

/* ------ Redeem Points Toggle ------ */
.toggle-control {
  --toggle-control-bg-color: var(--color-background-main);
  --selected-bg-color: var(--color-background-quaternary);
  --selected-text-color: var(--color-text-black);
  --toggle-control-lock-color: var(--btnColorDisabled);
  --toggle-shadow: var(--shadow);
  display: inline-flex;
  background: var(--toggle-control-bg-color);
}

.toggle-control div.active {
  color: var(--color-text-black);
}

/* ------ Arrow Scroller ------ */
.arrow-scroller-container {
  --arrow-bg-color: var(--color-background-quinary);
  --arrow-bg-color-hover: rgba(145, 122, 122, 0.133);
}

/* Scrollers on the white page background (menu categories bar, upsell
   row): the fade gradient must match the surface behind it */
.categories-bar .arrow-scroller-container,
.arrow-scroller-container:has(.upsell-wrapper) {
  --arrow-bg-color: var(--color-background-main);
}

/* ------ Promo Code ------ */
.promo-input-container > button {
  color: var(--color-text-primary);
}

/* ------ Order Confirmation ------ */
.modal :is(.modal-header, .modal-footer) .header-title {
  color: var(--color-text-white);
}

#modal_confirmation_delete {
  color: var(--color-text-white);
}

/* ------ Order Tracker ------ */
.track-order-container {
  --track-order-bar-background-color: var(--color-background-quinary);
  --track-order-bar-color: var(--color-text-primary);
  --track-order-call-background-color: var(--color-background-main);
  --track-order-call-border-color: var(--color-border-default);
  --track-order-call-color: var(--color-accent);
  --track-order-dots-complete: var(--color-accent);
  --track-order-dots-incomplete: var(--color-text-primary);
  --track-order-text-incomplete: var(--color-text-primary);
}

.dotted-line {
  margin-top: -15px;
}

/* Store Bar */
.store-location-bar-container {
  display: flex;
  background-color: var(--track-order-bar-background-color);
}

/* ------ Mobile App Customization ------ */
body.mobile {
  --layout-header-height: 60px;
}

.bottom-nav {
  background-color: var(--color-background-quinary);
}

#nav_bottom {
  --navbar-background-color: var(--color-background-quaternary-hover);
  --navbar-icon-color: var(--color-text-primary);
  --navbar-icon-active-color: var(--color-text-white);
  --navbar-active-blob: var(--color-background-quaternary);
}

#nav_order {
  --order-type-navbar-background-color: var(--color-background-primary);
  --order-type-navbar-color: var(--color-text-white);
  background-color: var(--order-type-navbar-background-color);
  color: var(--order-type-navbar-color);
}

/* ------ Language / Country Select ------ */
#header_account_language_select {
  color: var(--color-text-white);
  background-color: var(--color-background-primary);
  --colorInputBg: var(--color-background-primary);
}

#header_account_language_select option {
  background-color: var(--color-background-white);
  color: var(--color-text-primary);
}

/* ------ WCAG Compliance Adjustments ------ */

/* Focus Indicators */

/* Global keyboard focus: two-layer outer ring (white halo + blue
   outline) so the indicator is visible on light, dark, and orange
   surfaces alike */
:focus-visible {
  outline: 3px solid var(--color-focus-ring) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 2px var(--color-focus-ring-halo) !important;
}

/* Controls inside clipped or height-locked frames (segments, steppers,
   toggles, tab bars, upsell scroller) where an outer ring cannot
   render: two-layer inset ring instead */
.segmented-button button:focus-visible,
.quantity-selector button:focus-visible,
.toggle-control div:focus-visible,
.tab-bar-tab:focus-visible,
.upsell-card:focus-visible,
.upsell-wrapper:focus-visible {
  outline: none !important;
  box-shadow: inset 0 0 0 2px var(--color-focus-ring-halo),
              inset 0 0 0 4px var(--color-focus-ring) !important;
}

/* Active orange segments: blue fails contrast on orange, so the inner
   ring switches to near-black */
.segmented-button button.active:focus-visible,
.toggle-control div.active:focus-visible {
  box-shadow: inset 0 0 0 2px var(--color-focus-ring-halo),
              inset 0 0 0 4px var(--color-text-primary) !important;
}

/* Text fields keep the base theme's grey-to-black border change as
   their focus indicator; the ring is removed so indicators don't
   double up. Checkboxes and radios are excluded ? they have no border
   change and keep the global ring */
input:not([type="checkbox"]):not([type="radio"]):focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

/* Promo/fundraiser code groups: field and button sit flush inside a
   bordered frame, so they use the inset ring (selector mirrors the
   rule above to keep higher specificity) */
.promo-input-container input:not([type="checkbox"]):not([type="radio"]):focus-visible,
.promo-input-container > button:focus-visible {
  outline: none !important;
  box-shadow: inset 0 0 0 2px var(--color-focus-ring-halo),
              inset 0 0 0 4px var(--color-focus-ring) !important;
}

/* Focus Ring Clearance */

/* Pill bars clip at their own edges; padding gives the ring room and
   the negative margin cancels the visual shift */
ul.pill-bar-container {
  height: auto !important;
  min-height: 46px;
  padding-block: 6px;
  padding-inline: 6px;
  margin-inline: -6px;
  align-items: center;
}

/* Menu categories wrapper gives back the height the pill bar gained,
   keeping the bar at its original 54px */
#div_menu_categories_bar.categories-bar {
  padding-block: 4px;
}

/* Checkout section clips all five checkout pill bars; padding only ?
   a negative margin here removes the mobile side spacing */
.checkout-first-section {
  padding-inline: 6px;
}

/* Cart Add More Items sits at the edge of a clipping wrapper */
button.add-more-items-button {
  margin-block: 6px;
}

/* Target Size */

/* 24px minimum height for interactive controls (SC 2.5.8). Height
   only: a min-width would override flexbox's content-size floor and
   let flex rows crush cards */
button,
[role="button"],
input:not([type="hidden"]),
select,
.tab-bar-tab,
.pill-bar-container li,
.store-list-selector > div,
.checkRadio > label {
  min-height: 24px;
}

a.button-link, .skip-link {
  display: inline-block;
  min-height: 24px;
}

/* Track Order Page */

/* Order-number subtitle inherited near-black text on the near-black
   header (invisible) */
.header .header-center {
  color: var(--color-text-white);
}

/* The base bundle turns buttons orange on hover/focus/active, which
   made the circular route/call buttons' orange icons blend in; all
   three states stay neutral (focus is shown by the ring) */
button.track-order-route-button:hover,
button.track-order-route-button:focus,
button.track-order-route-button:active,
button[class*="track-order-call"]:hover,
button[class*="track-order-call"]:focus,
button[class*="track-order-call"]:active {
  background-color: var(--color-background-white-hover);
}

/* The base theme dims upcoming tracker steps to opacity 0.5, dropping
   the status text below 4.5:1; 0.7 keeps the dimmed look and passes */
.tracker-uncompleted {
  opacity: 0.7;
}

/* Reduced Motion */

/* Honor the user's motion preference: neutralize transitions and the
   hover scale transform */
@media (prefers-reduced-motion: reduce) {
  :root {
    --hover-transition: none;
    --hover-transform: none;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

/* Screen Reader & Bypass Utilities */

/* Remove the iOS grey tap flash; safe only because a visible focus
   indicator is provided above ? keep the two paired */
* {
  -webkit-tap-highlight-color: transparent;
}

/* Skip Navigation link (SC 2.4.1 Bypass Blocks): hidden above the
   viewport until keyboard focus reveals it */
.skip-link {
  position: absolute;
  top: -100%;
  left: 0;
  background: #F26419; /* Vibrant orange */
  color: #000000; /* Black */
  padding: 10px 18px;
  font-size: 1rem;
  font-weight: 600;
  z-index: 99999;
  text-decoration: none;
  border-radius: 0 0 6px 0;
  transition: top 0.1s ease;
}

.skip-link:focus {
  top: 0;
}

/* Visually hidden text that remains readable to screen readers */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}