/* Dynamic cart and order actions live in the mobile header without changing their behavior. */
.header-dynamic-actions { display: none; }

@media (max-width: 700px) {
  html[data-customer-view] #floating-cart .floating-cart-header-meta {
    inset: 0;
    display: block;
    pointer-events: none;
  }
  html[data-customer-view] #floating-cart-header-count,
  html[data-customer-view] #floating-cart-header-amount {
    position: absolute;
    top: 0;
    border: 1px solid #d9efff;
    border-radius: 8px;
    background: #102e68;
    color: #fff;
    font-size: 9px;
    line-height: 13px;
    padding: 0 3px;
    text-shadow: none;
  }
  html[data-customer-view] #floating-cart-header-count { left: -5px; }
  html[data-customer-view] #floating-cart-header-amount { right: -10px; top: 29px; }
  html[data-customer-view] #floating-cart .floating-cart-icon {
    color: white;
    background: transparent !important;
  }
}

@media (max-width: 700px) {
  html[data-customer-view] .header {
    box-shadow: 0 5px 16px #102a6b26;
    position: sticky;
    top: 0;
    z-index: 70;
  }

  html[data-customer-view] .header-top {
    /* Keep the fixed edge controls at the ends, and let the live actions
       share the remaining header width instead of bunching together. */
    gap: 0;
    min-height: 40px;
    min-width: 0;
    overflow: visible;
  }

  html[data-customer-view] .header-top > .customer-animated-logo,
  html[data-customer-view] .header-top > .header-search-toggle,
  html[data-customer-view] .header-top > .header-actions {
    flex: 0 0 auto;
  }

  html[data-customer-view] .header-dynamic-actions {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    overflow: visible;
  }

  html[data-customer-view] .header-dynamic-actions-scroller {
    align-items: center;
    display: flex;
    gap: 0;
    justify-content: flex-start;
    min-height: 40px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    /* Extra vertical breathing room keeps the orbit and its glow inside the
       scrollport. Negative margins preserve the original slim header height. */
    margin-block: -6px;
    padding: 8px 1px 8px 7px;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
    touch-action: pan-x;
    -webkit-overflow-scrolling: touch;
  }

  html[data-customer-view] .header-dynamic-actions-scroller::-webkit-scrollbar { display: none; }

  /* The profile remains pinned to the right edge.  Its sibling action (the
     favourites control, when it is relevant) receives an equal share of the
     header rather than being pushed against the profile button. */
  html[data-customer-view] .header-actions {
    gap: 0;
    margin-left: 0;
    min-width: 34px;
    justify-content: flex-end;
  }

  html[data-customer-view] .header-actions .language-switcher {
    display: none;
  }

  /* The optional favourite button belongs to the same visual rhythm as
     search, order tracking and the cart.  The profile button deliberately
     remains fixed against the right edge. */
  html[data-customer-view] .header-actions .restaurant-favorites-filter,
  html[data-customer-view] .header-actions .product-favorites-filter {
    position: absolute;
    right: calc(14px + (100vw - 48px) * 0.23);
    top: 50%;
    transform: translateY(-50%);
  }

  html[data-customer-view] .header-dynamic-actions .active-order-actions {
    align-items: center;
    display: flex;
    flex: 0 0 auto;
    gap: 6px;
    margin-right: 8px;
  }

  html[data-customer-view] .header-dynamic-actions .active-order-button,
  html[data-customer-view] .header-dynamic-actions .floating-cart.has-items {
    align-items: center;
    border-radius: 12px !important;
    display: grid !important;
    flex: 0 0 36px;
    height: 36px !important;
    justify-content: center;
    left: auto !important;
    min-height: 36px !important;
    padding: 0 !important;
    position: relative !important;
    right: auto !important;
    scroll-snap-align: start;
    top: auto !important;
    bottom: auto !important;
    width: 36px !important;
  }

  html[data-customer-view] .header-dynamic-actions .floating-cart.has-items {
    border-radius: 50% !important;
    flex-basis: 42px;
    height: 42px !important;
    min-height: 42px !important;
    box-sizing: border-box;
    place-items: center;
    grid-template-columns: 1fr;
    justify-content: center;
    overflow: visible;
    padding: 0 !important;
    width: 42px !important;
  }

  html[data-customer-view] .header-dynamic-actions .floating-cart.cart-bump,
  html[data-customer-view] .header-dynamic-actions .active-order-button { animation: none !important; }

  /* A control may have old drag coordinates saved from the former floating dock. */
  html[data-customer-view] .header-dynamic-actions .user-positioned-floating-control {
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
  }

  html[data-customer-view] .header-dynamic-actions .floating-cart.hidden,
  html[data-customer-view] .header-dynamic-actions .floating-cart:not(.has-items) { display: none !important; }

  html[data-customer-view] .header-dynamic-actions .floating-cart {
    background: linear-gradient(145deg, #3fd1f0 0%, #168fcf 58%, #3157dc 100%) !important;
    border: 1px solid #dff8ff !important;
    box-shadow: 0 6px 15px #087da64a, inset 0 1px 0 #ffffff8a, inset 0 -5px 9px #195bc32e !important;
  }

  html[data-customer-view] .header-dynamic-actions .floating-cart::after {
    border: 1px solid #ffffff52;
    border-radius: 50%;
    content: "";
    inset: 3px;
    pointer-events: none;
    position: absolute;
  }

  html[data-customer-view] .header-dynamic-actions .floating-cart-icon {
    background: #ffffff18 !important;
    border-radius: 8px !important;
    display: grid !important;
    height: 22px !important;
    place-items: center !important;
    width: 22px !important;
  }

  html[data-customer-view] .header-dynamic-actions .floating-cart-icon svg {
    height: 18px !important;
    stroke-width: 2.1 !important;
    width: 18px !important;
  }

  html[data-customer-view] .header-dynamic-actions .floating-cart-copy,
  html[data-customer-view] .header-dynamic-actions .floating-cart-eta { display: none !important; }

  html[data-customer-view] .header-dynamic-actions .floating-cart-header-meta {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    color: #fff;
    display: flex;
    font-size: 7px;
    font-weight: 900;
    gap: 0;
    justify-content: space-between;
    left: 4px;
    line-height: 1.1;
    min-width: 0;
    padding: 0;
    position: absolute;
    text-shadow: 0 1px 2px #08225b;
    right: 4px;
    top: 4px;
    white-space: nowrap;
  }

  html[data-customer-view] .header-dynamic-actions .floating-cart-header-meta b::after {
    content: none;
    font-weight: 800;
  }

  html[data-customer-view] .header-dynamic-actions .floating-cart-header-meta small {
    color: #ecfbff;
    font-size: 6px;
    font-weight: 900;
  }

  html[data-customer-view] .header-dynamic-actions .floating-cart.has-items .floating-cart-icon {
    margin: 0 !important;
  }

  html[data-customer-view] .header-dynamic-actions .floating-cart > strong {
    align-items: center;
    background: #ff7a3d !important;
    border: 1.5px solid #fff !important;
    border-radius: 50%;
    color: #fff;
    display: none !important;
    font-size: 8px !important;
    height: 16px !important;
    justify-content: center;
    left: auto !important;
    line-height: 1 !important;
    min-width: 16px !important;
    padding: 0 2px;
    position: absolute !important;
    right: -5px !important;
    top: -5px !important;
    width: auto !important;
    z-index: 3;
  }

  html[data-customer-view] .header-dynamic-actions .active-order-button {
    background: linear-gradient(135deg, #13bfd7 0%, #2869ed 48%, #854ce0 100%) !important;
    border: 1px solid #d9e7ff !important;
    border-radius: 50% !important;
    box-shadow: 0 5px 13px #1746b33d, inset 0 1px 0 #ffffff85, 0 0 0 2px #ffffff26 !important;
    color: #fff !important;
    grid-template-columns: 1fr !important;
    place-items: center !important;
  }

  html[data-customer-view] .header-dynamic-actions .rating-action-button {
    background: linear-gradient(145deg, #ffb52e, #f47b20) !important;
    border-color: #fff0bc !important;
    box-shadow: 0 5px 13px #bd5c2444, inset 0 1px 0 #ffffff85, 0 0 0 2px #fff7dc42 !important;
  }

  html[data-customer-view] .header-dynamic-actions .active-order-button > span:first-child {
    align-items: center;
    display: grid !important;
    font-size: 17px;
    height: 26px;
    justify-content: center;
    width: 26px;
  }

  html[data-customer-view] .header-dynamic-actions .active-order-button > span:nth-child(2),
  html[data-customer-view] .header-dynamic-actions .active-order-button > em { display: none !important; }

  html[data-customer-view] .header-dynamic-actions .active-order-button::after { content: none; }

  /* On the service chooser the logo and profile stay at their edges while
     search, tracking and cart share the centre at equal intervals. */
  html[data-customer-view="landing"] .header-dynamic-actions-scroller {
    justify-content: space-evenly;
    padding-left: 0;
    padding-right: 0;
  }

  html[data-customer-view="landing"] .header-dynamic-actions .active-order-actions {
    margin-right: 0;
  }

  html[data-customer-view] .mobile-bottom-nav {
    display: none !important;
  }
}

/* The sun travels around the complete outer edge of the tracking button. */
@media (max-width: 700px) {
  html[data-customer-view] .header-dynamic-actions .active-order-button:not(.rating-action-button)::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 7px;
    height: 7px;
    margin: -3.5px 0 0 -3.5px;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle, #fffef0 0 18%, #ffe36d 28% 48%, #ffac17 58% 72%, #ffbd2c66 74% 100%);
    box-shadow: 0 0 3px 1px #ffe169, 0 0 7px 2px #ffb51e8f;
    z-index: 4;
  }
}

@media (max-width: 700px) and (prefers-reduced-motion: no-preference) {
  html[data-customer-view] .header-dynamic-actions .floating-cart.has-items .floating-cart-icon {
    animation: mowo-cart-vibrate 3.8s ease-in-out infinite;
  }
  html[data-customer-view] .header-dynamic-actions .active-order-button:not(.rating-action-button)::before {
    animation: mowo-delivery-orbit 3.6s linear infinite;
  }
}

@keyframes mowo-cart-vibrate {
  0%, 24%, 100% { transform: translateX(0) rotate(0) scale(1); }
  3%, 9%, 15% { transform: translateX(-2px) rotate(-10deg) scale(1.12); }
  6%, 12%, 18% { transform: translateX(2px) rotate(10deg) scale(1.12); }
  21% { transform: translateX(-1px) rotate(-4deg) scale(1.04); }
}

@keyframes mowo-delivery-orbit {
  from { transform: rotate(0deg) translateX(22px) rotate(0deg); }
  to { transform: rotate(360deg) translateX(22px) rotate(-360deg); }
}
/* Fixed right controls and a separate, shrinkable tracking scrollport. */
@media(max-width:700px){
  html[data-customer-view] body .header-top{display:flex!important;gap:7px!important;min-width:0;width:100%;box-sizing:border-box}
  html[data-customer-view="grocery"] body .header-top,
  html[data-customer-view="restaurant"] body .header-top{padding-left:44px!important}
  html[data-customer-view] body .header-dynamic-actions,
  html[data-customer-view] body .header-actions{display:contents!important}
  html[data-customer-view] body .header-dynamic-actions-scroller{order:1;flex:1 1 0;min-width:0;justify-content:flex-start!important;overflow-x:auto;overflow-y:hidden;padding:10px 5px!important;margin-block:-6px;gap:8px;scrollbar-width:none}
  html[data-customer-view] body .header-search-toggle{order:2;position:relative!important;inset:auto!important;transform:none!important;margin:0!important;flex:0 0 34px!important;width:34px!important;height:34px!important}
  html[data-customer-view] body .header-actions :is(.product-favorites-filter,.restaurant-favorites-filter){order:3;position:relative!important;inset:auto!important;transform:none!important;margin:0!important;flex:0 0 34px!important;width:34px!important;height:34px!important}
  html[data-customer-view] body .header-dynamic-actions > #floating-cart{order:4;flex:0 0 36px!important;width:36px!important;height:36px!important;min-height:36px!important;margin:0 6px 0 0!important}
  html[data-customer-view] body .profile-header-button{order:5;position:relative!important;inset:auto!important;transform:none!important;margin:0!important;flex:0 0 34px!important;width:34px!important;height:34px!important}
  html[data-customer-view] body .header-dynamic-actions .active-order-actions{width:max-content;flex:0 0 auto;flex-wrap:nowrap!important;gap:10px;margin:0!important}
  html[data-customer-view] body .header-top > .customer-animated-logo{order:0}
  html[data-customer-view] body #floating-cart-header-amount{right:-5px;top:27px;font-size:8px}
}
/* The service chooser uses the header for actions, not a second brand mark. */
html[data-customer-view="landing"] body .header-top > .customer-animated-logo{display:none!important}