/**
 * EasyGas mobile 2026
 * Mobile-only skin inspired by the EasyGas application mock-ups.
 */

.eg-mobile-home,
.eg-mobile-order-header,
.eg-mobile-order-intro,
.eg-mobile-gas-types,
.eg-mobile-depot-heading,
.eg-mobile-depot-price {
  display: none;
}

.eg-cylinder {
  --eg-cylinder-orange: #ff6b00;
  --eg-cylinder-dark: #d94c00;
  position: relative;
  display: inline-block;
  width: 100px;
  height: 170px;
  flex: 0 0 auto;
  filter: drop-shadow(0 16px 12px rgba(112, 42, 0, .2));
}

.eg-cylinder > span {
  position: absolute;
  display: block;
}

.eg-cylinder__handle {
  z-index: 1;
  top: 1%;
  left: 21%;
  width: 58%;
  height: 28%;
  border: 8px solid var(--eg-cylinder-dark);
  border-bottom-width: 5px;
  border-radius: 9px 9px 4px 4px;
  background: linear-gradient(90deg, #ec5700, #ff8a21 45%, #e85400);
  box-shadow: inset 0 0 0 4px rgba(255, 171, 82, .38);
}

.eg-cylinder__neck {
  z-index: 2;
  top: 14%;
  left: 40%;
  width: 20%;
  height: 15%;
  border-radius: 5px;
  background: linear-gradient(90deg, #70320e, #e0c19c 48%, #6b2f0c);
  box-shadow: 0 2px 0 rgba(0, 0, 0, .22);
}

.eg-cylinder__body {
  z-index: 3;
  top: 24%;
  left: 9%;
  width: 82%;
  height: 65%;
  display: grid !important;
  place-items: center;
  border-radius: 28% 28% 18% 18% / 18% 18% 12% 12%;
  color: #fff;
  background:
    linear-gradient(90deg, rgba(135, 36, 0, .2), transparent 20% 72%, rgba(125, 34, 0, .24)),
    linear-gradient(180deg, #ff7d0b 0%, var(--eg-cylinder-orange) 52%, #ee5700 100%);
  box-shadow:
    inset 8px 0 12px rgba(255, 178, 88, .2),
    inset -8px 0 12px rgba(119, 29, 0, .12),
    inset 0 -8px 12px rgba(131, 34, 0, .16);
}

.eg-cylinder__body::before,
.eg-cylinder__body::after {
  content: "";
  position: absolute;
  left: 4%;
  right: 4%;
  height: 3px;
  border-radius: 999px;
  background: rgba(126, 37, 0, .18);
}

.eg-cylinder__body::before { top: 28%; }
.eg-cylinder__body::after { bottom: 18%; }

.eg-cylinder__body b {
  position: relative;
  z-index: 1;
  color: #fff;
  font-size: .8rem;
  font-weight: 900;
  letter-spacing: -.04em;
  text-shadow: 0 1px 1px rgba(126, 35, 0, .25);
}

.eg-cylinder__foot {
  z-index: 2;
  left: 16%;
  bottom: 1%;
  width: 68%;
  height: 10%;
  border-radius: 4px 4px 12px 12px;
  background: linear-gradient(90deg, #c94400, #ff7a0b 48%, #c74300);
  box-shadow: 0 6px 8px rgba(101, 35, 0, .2);
}

@media (max-width: 760px) {
  /*
   * Keep every app surface inside the physical viewport.  The host theme does
   * not guarantee Bootstrap's border-box reset on all pages, so width: 100%
   * plus horizontal padding could otherwise make the EasyGas screens wider
   * than the device.
   */
  .eg-mobile-home,
  .eg-mobile-home *,
  .eg-mobile-home *::before,
  .eg-mobile-home *::after,
  .eg-app,
  .eg-app *,
  .eg-app *::before,
  .eg-app *::after {
    box-sizing: border-box;
  }

  :root {
    --easygas-orange: #ff6500;
    --easygas-orange-dark: #ed5700;
    --easygas-orange-soft: #fff2e8;
    --easygas-ink: #12131b;
    --easygas-muted: #7b7d89;
    --easygas-line: #e9e9ed;
  }

  html,
  body:has(.eg-mobile-home),
  body:has(.eg-app) {
    max-width: 100%;
    overflow-x: hidden !important;
  }

  body:has(.eg-mobile-home),
  body:has(.eg-app) {
    padding-top: 0 !important;
    padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important;
    background: #fff !important;
  }

  body:has(.eg-mobile-home) #ecm-nav,
  body:has(.eg-mobile-home) .ecm-footer-wave,
  body:has(.eg-mobile-home) .ecm-footer,
  body:has(.eg-mobile-home) .ecm-back-top,
  body:has(.eg-mobile-home) #globalChatToggle,
  body:has(.eg-mobile-home) .global-chat-container,
  body:has(.eg-app) #ecm-nav,
  body:has(.eg-app) .ecm-footer-wave,
  body:has(.eg-app) .ecm-footer,
  body:has(.eg-app) .ecm-back-top,
  body:has(.eg-app) #globalChatToggle,
  body:has(.eg-app) .global-chat-container {
    display: none !important;
  }

  body.ecm-theme-font-diamond:has(.eg-mobile-home) main h1,
  body.ecm-theme-font-diamond:has(.eg-mobile-home) main h2,
  body.ecm-theme-font-diamond:has(.eg-app) main h1,
  body.ecm-theme-font-diamond:has(.eg-app) main h2 {
    animation: none !important;
    background: none !important;
    background-clip: border-box !important;
    -webkit-background-clip: border-box !important;
    -webkit-text-fill-color: currentColor !important;
  }

  /* Shared fixed application dock */
  body:has(.eg-mobile-home) .eg-mobile-dock,
  body:has(.eg-app) .eg-mobile-dock {
    z-index: 2147483600;
    padding: 0;
  }

  body:has(.eg-mobile-home) .eg-mobile-dock-inner,
  body:has(.eg-app) .eg-mobile-dock-inner {
    width: 100%;
    max-width: none;
    min-height: 78px;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    align-items: center;
    gap: 0;
    padding: 7px 7px calc(7px + env(safe-area-inset-bottom, 0px));
    border: 1px solid rgba(255, 255, 255, .86);
    border-bottom: 0;
    border-radius: 22px 22px 0 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, .98), rgba(249, 250, 252, .95));
    box-shadow: 0 -12px 38px rgba(35, 24, 17, .12), inset 0 1px 0 #fff;
    backdrop-filter: blur(20px) saturate(1.35);
    -webkit-backdrop-filter: blur(20px) saturate(1.35);
  }

  body:has(.eg-mobile-home) .eg-dock-item,
  body:has(.eg-app) .eg-dock-item {
    min-height: 58px;
    gap: 5px;
    padding: 7px 2px 3px;
    border-radius: 14px;
    color: #555965;
    background: transparent !important;
    font-family: var(--ecm-font-body);
    font-size: .63rem;
    font-weight: 700;
    letter-spacing: 0;
  }

  body:has(.eg-mobile-home) .eg-dock-item i,
  body:has(.eg-app) .eg-dock-item i {
    color: #30323b;
    font-size: 1.22rem;
    opacity: 1;
  }

  body:has(.eg-mobile-home) .eg-dock-item.is-active,
  body:has(.eg-app) .eg-dock-item.is-active {
    color: var(--easygas-orange) !important;
  }

  body:has(.eg-mobile-home) .eg-dock-item.is-active i,
  body:has(.eg-app) .eg-dock-item.is-active i {
    color: var(--easygas-orange) !important;
  }

  body:has(.eg-mobile-home) .eg-dock-item--primary,
  body:has(.eg-app) .eg-dock-item--primary {
    position: relative;
    transform: translateY(-17px);
    color: #555965 !important;
  }

  body:has(.eg-mobile-home) .eg-dock-item--primary i,
  body:has(.eg-app) .eg-dock-item--primary i {
    width: 58px;
    height: 58px;
    display: grid;
    place-items: center;
    border: 5px solid #fff;
    border-radius: 50%;
    color: #fff !important;
    background: linear-gradient(145deg, #ff7a00, #ff5400);
    box-shadow: 0 7px 20px rgba(255, 91, 0, .34);
    font-size: 1.35rem;
  }

  body:has(.eg-mobile-home) .eg-dock-item--primary.is-active i,
  body:has(.eg-app) .eg-dock-item--primary.is-active i {
    color: #fff !important;
    box-shadow: 0 7px 20px rgba(255, 91, 0, .34), 0 0 0 3px rgba(255, 106, 0, .22);
  }

  body:has(.eg-mobile-home) .eg-dock-item--primary span,
  body:has(.eg-app) .eg-dock-item--primary span {
    margin-top: -1px;
    font-size: .59rem;
  }

  body:has(.eg-mobile-home) .eg-mobile-dock-glow,
  body:has(.eg-app) .eg-mobile-dock-glow {
    display: none;
  }

  body:has(.eg-mobile-home) .eg-dock-item > span,
  body:has(.eg-app) .eg-dock-item > span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body:has(.eg-mobile-home) .easy-ai-trigger,
  body:has(.eg-app) .easy-ai-trigger {
    display: none !important;
  }

  body:has(.eg-mobile-home) .eg-dock-item--bot.is-chat-open,
  body:has(.eg-app) .eg-dock-item--bot.is-chat-open,
  body:has(.eg-mobile-home) .eg-dock-item--bot.is-chat-open i,
  body:has(.eg-app) .eg-dock-item--bot.is-chat-open i {
    color: var(--easygas-orange) !important;
  }

  body:has(.eg-mobile-home) .eg-dock-item--bot,
  body:has(.eg-app) .eg-dock-item--bot {
    position: relative;
    color: #4d5160;
  }

  body:has(.eg-mobile-home) .eg-bot-icon,
  body:has(.eg-app) .eg-bot-icon {
    position: relative;
    display: grid;
    width: 32px;
    height: 32px;
    place-items: center;
    overflow: visible !important;
    border: 1px solid rgba(255, 101, 0, .16);
    border-radius: 11px;
    background: linear-gradient(145deg, #fff7f0, #ffe4cf);
    box-shadow: 0 5px 13px rgba(255, 101, 0, .14), inset 0 1px 0 #fff;
  }

  body:has(.eg-mobile-home) .eg-bot-icon i,
  body:has(.eg-app) .eg-bot-icon i {
    color: #f05a00;
    font-size: .95rem;
  }

  body:has(.eg-mobile-home) .eg-bot-icon b,
  body:has(.eg-app) .eg-bot-icon b {
    position: absolute;
    top: -2px;
    right: -2px;
    width: 9px;
    height: 9px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #16a34a;
    box-shadow: 0 0 0 2px rgba(22, 163, 74, .1);
  }

  body:has(.eg-mobile-home) .eg-dock-item--bot.is-chat-open .eg-bot-icon,
  body:has(.eg-app) .eg-dock-item--bot.is-chat-open .eg-bot-icon {
    border-color: transparent;
    background: linear-gradient(145deg, #ff7a00, #f04400);
    box-shadow: 0 7px 18px rgba(240, 68, 0, .28);
    transform: translateY(-2px);
  }

  body:has(.eg-mobile-home) .eg-dock-item--bot.is-chat-open .eg-bot-icon i,
  body:has(.eg-app) .eg-dock-item--bot.is-chat-open .eg-bot-icon i {
    color: #fff !important;
  }

  body:has(.eg-mobile-home) .eg-dock-item--more,
  body:has(.eg-app) .eg-dock-item--more {
    color: #4d5160;
  }

  body:has(.eg-mobile-home) .eg-more-icon,
  body:has(.eg-app) .eg-more-icon {
    width: 32px;
    height: 32px;
    grid-template-columns: repeat(2, 5px);
    grid-template-rows: repeat(2, 5px);
    gap: 4px;
    border-radius: 11px;
    background: #f1f3f6;
  }

  body:has(.eg-mobile-home) .eg-dock-item--more[aria-expanded="true"] .eg-more-icon,
  body:has(.eg-app) .eg-dock-item--more[aria-expanded="true"] .eg-more-icon {
    color: #fff;
    background: linear-gradient(145deg, #ff7a00, #f04400);
    box-shadow: 0 7px 18px rgba(240, 68, 0, .24);
  }

  body.modal-open:has(.eg-mobile-home) .eg-mobile-dock,
  body.modal-open:has(.eg-app) .eg-mobile-dock,
  body.eg-route-sheet-open:has(.eg-mobile-home) .eg-mobile-dock,
  body.eg-route-sheet-open:has(.eg-app) .eg-mobile-dock {
    z-index: 1040;
  }

  /* Home */
  .eg-mobile-home {
    position: relative;
    z-index: 2;
    display: block;
    width: 100%;
    padding: 18px 16px 28px;
    color: var(--easygas-ink);
    background: #fff;
    font-family: var(--ecm-font-body);
  }

  .easygas-page,
  .eg-ac-page,
  .eg-mobile-home,
  .eg-app,
  .eg-app-main {
    max-width: 100vw !important;
    overflow-x: clip;
  }

  .eg-ac-page > .eg-ac-landing {
    display: none !important;
  }

  .eg-mobile-home__topbar {
    min-height: 52px;
    display: grid;
    grid-template-columns: 42px 1fr 42px;
    align-items: center;
    gap: 10px;
  }

  .eg-mobile-icon-btn {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: #111219;
    background: transparent;
    text-decoration: none;
    font-size: 1.35rem;
  }

  .eg-mobile-logo {
    position: relative;
    justify-self: center;
    display: inline-flex;
    align-items: baseline;
    color: #090a0d;
    text-decoration: none;
    font-size: 2.05rem;
    font-weight: 900;
    letter-spacing: -.07em;
  }

  .eg-mobile-logo strong {
    color: var(--easygas-orange);
    font-weight: 900;
  }

  .eg-mobile-logo i {
    position: absolute;
    top: -8px;
    right: 11px;
    color: var(--easygas-orange);
    font-size: .85rem;
  }

  .eg-mobile-notification {
    position: relative;
  }

  .eg-mobile-notification span {
    position: absolute;
    top: 8px;
    right: 6px;
    width: 8px;
    height: 8px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: var(--easygas-orange);
  }

  .eg-mobile-location {
    width: 100%;
    min-height: 52px;
    margin: 14px 0 16px;
    display: grid;
    grid-template-columns: 28px 1fr 20px;
    align-items: center;
    gap: 8px;
    padding: 0 16px;
    border: 1px solid #e8e8eb;
    border-radius: 17px;
    color: #1e2028;
    background: #fff;
    box-shadow: 0 4px 12px rgba(28, 21, 16, .03);
    text-align: left;
    font-size: .92rem;
    font-weight: 600;
  }

  .eg-mobile-location .fa-location-dot {
    color: var(--easygas-orange);
    font-size: 1.25rem;
  }

  .eg-mobile-location .fa-chevron-down {
    color: #111;
    font-size: .8rem;
  }

  .eg-mobile-home__hero {
    position: relative;
    min-height: 305px;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(108px, .75fr);
    align-items: center;
    padding: 28px 18px 24px;
    border-radius: 24px;
    color: #fff;
    background:
      radial-gradient(circle at 73% 76%, rgba(255, 189, 89, .36), transparent 32%),
      linear-gradient(135deg, #ff850d 0%, #ff6500 56%, #ff7800 100%);
    box-shadow: 0 18px 36px rgba(255, 99, 0, .17);
  }

  .eg-mobile-home__hero::after {
    content: "";
    position: absolute;
    right: -60px;
    bottom: -105px;
    width: 260px;
    height: 260px;
    border: 28px solid rgba(255, 255, 255, .08);
    border-radius: 48% 52% 60% 40%;
    transform: rotate(-22deg);
  }

  .eg-mobile-home__hero-copy {
    position: relative;
    z-index: 2;
    min-width: 0;
  }

  .eg-mobile-home__hero h1 {
    margin: 0;
    color: #fff !important;
    font-family: var(--ecm-font-display) !important;
    font-size: clamp(1.72rem, 7.5vw, 2.12rem) !important;
    font-weight: 500;
    line-height: 1.18;
    letter-spacing: -.04em;
  }

  .eg-mobile-home__hero h1 span {
    font-weight: 500;
  }

  .eg-mobile-home__hero h1 strong {
    color: #fff;
    font-weight: 900;
  }

  .eg-mobile-home__proofs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    margin: 22px 0;
    font-size: .68rem;
    font-weight: 700;
  }

  .eg-mobile-home__proofs span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
  }

  .eg-mobile-home__proofs i {
    font-size: .95rem;
  }

  .eg-mobile-home__cta {
    width: max-content;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    gap: 16px;
    padding: 0 17px;
    border-radius: 15px;
    color: #18191f !important;
    background: #fff;
    box-shadow: 0 9px 22px rgba(143, 46, 0, .12);
    text-decoration: none;
    font-size: .76rem;
    font-weight: 900;
    white-space: nowrap;
  }

  .eg-cylinder--hero {
    z-index: 2;
    justify-self: end;
    width: 118px;
    height: 218px;
    transform: translate(10px, 12px);
  }

  .eg-cylinder--hero .eg-cylinder__body b {
    font-size: 1rem;
  }

  .eg-mobile-products {
    padding-top: 26px;
  }

  .eg-mobile-products h2,
  .eg-mobile-benefits h2 {
    margin: 0 0 14px;
    color: #101116 !important;
    font-family: var(--ecm-font-display) !important;
    font-size: 1.32rem !important;
    font-weight: 900;
    letter-spacing: -.04em;
  }

  .eg-mobile-products__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .eg-mobile-product {
    min-width: 0;
    min-height: 150px;
    display: grid;
    grid-template-columns: 55px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    padding: 12px 10px;
    border: 1px solid #e9e9ec;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 8px 20px rgba(29, 22, 16, .03);
  }

  .eg-cylinder--mini {
    width: 51px;
    height: 92px;
    filter: drop-shadow(0 8px 6px rgba(112, 42, 0, .16));
  }

  .eg-cylinder--mini .eg-cylinder__handle {
    border-width: 4px;
    border-bottom-width: 3px;
  }

  .eg-cylinder--mini .eg-cylinder__body b {
    font-size: .42rem;
  }

  .eg-mobile-product h3 {
    margin: 0 0 3px;
    color: #111219;
    font-size: 1rem;
    font-weight: 900;
  }

  .eg-mobile-product > div:last-child > strong {
    display: block;
    margin-bottom: 10px;
    color: var(--easygas-orange);
    font-size: .76rem;
    font-weight: 900;
    white-space: nowrap;
  }

  .eg-mobile-product a {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 13px;
    border-radius: 999px;
    color: var(--easygas-orange) !important;
    background: var(--easygas-orange-soft);
    text-decoration: none;
    font-size: .7rem;
    font-weight: 900;
  }

  .eg-mobile-track {
    min-height: 142px;
    margin-top: 24px;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    align-items: center;
    padding: 20px 16px;
    border-radius: 24px;
    color: #16171d !important;
    background: linear-gradient(135deg, #fff8f2, #fff0e4);
    text-decoration: none;
  }

  .eg-mobile-track > span:first-child {
    position: relative;
    z-index: 2;
  }

  .eg-mobile-track strong {
    display: block;
    margin-bottom: 8px;
    font-size: 1.17rem;
    font-weight: 900;
  }

  .eg-mobile-track small {
    display: block;
    color: #7c7c84;
    font-size: .77rem;
    line-height: 1.35;
  }

  .eg-mobile-track > span:first-child > i {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    margin-top: 12px;
    border-radius: 12px;
    color: var(--easygas-orange);
    background: #fff;
  }

  .eg-mobile-track__scene {
    position: relative;
    align-self: stretch;
  }

  .eg-mobile-track__scene .fa-motorcycle {
    position: absolute;
    right: -5px;
    bottom: 4px;
    color: var(--easygas-orange);
    font-size: 5.6rem;
    filter: drop-shadow(0 10px 8px rgba(99, 44, 10, .14));
  }

  .eg-mobile-track__scene b {
    position: absolute;
    z-index: 2;
    right: 2px;
    bottom: 55px;
    padding: 13px 8px;
    border-radius: 5px;
    color: #fff;
    background: #202126;
    font-size: .55rem;
  }

  .eg-mobile-benefits {
    padding: 28px 0 10px;
  }

  .eg-mobile-benefits > div {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 5px;
  }

  .eg-mobile-benefits span {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: #22232a;
    text-align: center;
    font-size: .61rem;
    line-height: 1.3;
  }

  .eg-mobile-benefits i {
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--easygas-orange);
    background: #fff2e7;
    font-size: 1.15rem;
  }

  .eg-mobile-benefits b {
    font-weight: 800;
  }

  /* Commander */
  .eg-app {
    display: block !important;
    width: 100%;
    min-height: 100vh;
    padding: 0 !important;
    color: var(--easygas-ink);
    background: #fff !important;
    font-family: var(--ecm-font-body);
  }

  .eg-app-main {
    width: 100%;
    padding: 14px 14px 112px !important;
    background: #fff;
  }

  .eg-mobile-order-header {
    min-height: 46px;
    display: grid;
    grid-template-columns: 42px 1fr 42px;
    align-items: center;
    margin-bottom: 12px;
  }

  .eg-mobile-order-header > strong {
    justify-self: center;
    font-size: 1.14rem;
    font-weight: 900;
  }

  .eg-mobile-order-header__back,
  .eg-mobile-order-header__cart {
    position: relative;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border: 1px solid #ededf0;
    border-radius: 50%;
    color: #18191f !important;
    background: #fff;
    box-shadow: 0 6px 16px rgba(26, 19, 14, .05);
    text-decoration: none;
  }

  .eg-mobile-order-header__cart span {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 18px;
    height: 18px;
    display: grid;
    place-items: center;
    border: 2px solid #fff;
    border-radius: 999px;
    color: #fff;
    background: var(--easygas-orange);
    font-size: .58rem;
    font-weight: 900;
  }

  .eg-mobile-order-intro {
    min-height: 152px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 108px;
    align-items: center;
    padding: 4px 6px 0;
  }

  .eg-mobile-order-intro h1 {
    margin: 0 0 6px;
    color: #14151d !important;
    font-family: var(--ecm-font-display) !important;
    font-size: clamp(1.65rem, 7.8vw, 2.05rem) !important;
    font-weight: 900;
    line-height: 1.08;
    letter-spacing: -.05em;
  }

  .eg-mobile-order-intro h1 span {
    color: var(--easygas-orange);
  }

  .eg-mobile-order-intro p {
    margin: 0;
    color: #81838e;
    font-size: .78rem;
  }

  .eg-cylinder--order {
    justify-self: end;
    width: 88px;
    height: 145px;
    transform: translateY(8px);
  }

  .eg-cylinder-image--order {
    z-index: 2;
    justify-self: end;
    width: 100px;
    height: 150px;
    object-fit: contain;
    transform: translateY(8px);
    filter: drop-shadow(0 12px 10px rgba(105, 41, 4, .18));
  }

  .eg-cylinder--order .eg-cylinder__body b {
    font-size: .72rem;
  }

  .eg-app-topbar {
    width: 100%;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    margin: 0 0 20px !important;
    padding: 12px !important;
    border: 1px solid #efeff1 !important;
    border-radius: 20px !important;
    background: #fff !important;
    box-shadow: 0 12px 28px rgba(40, 27, 17, .07) !important;
  }

  .eg-app-topbar-search {
    grid-column: 1 / -1;
    order: 1;
    min-height: 48px;
    padding: 0 13px !important;
    border: 0 !important;
    border-radius: 14px !important;
    background: #fff !important;
    box-shadow: inset 0 -1px #ededf0;
  }

  .eg-app-topbar-search::after {
    content: "\f1de";
    color: #4b4d57;
    font-family: "Font Awesome 6 Free";
    font-size: .95rem;
    font-weight: 900;
  }

  .eg-app-topbar-search i {
    color: #272933 !important;
    font-size: 1rem;
  }

  .eg-app-topbar-search input {
    min-width: 0;
    color: #202129;
    font-size: .79rem !important;
  }

  .eg-app-topbar-scan,
  .eg-app-topbar-location {
    min-width: 0;
    min-height: 54px;
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr);
    align-items: center;
    justify-content: start !important;
    gap: 8px;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 12px !important;
    color: #202129 !important;
    background: transparent !important;
    box-shadow: none !important;
    text-align: left;
    font-size: .78rem !important;
    font-weight: 900 !important;
  }

  .eg-app-topbar-scan {
    order: 2;
  }

  .eg-app-topbar-location {
    order: 3;
  }

  .eg-app-topbar-scan i,
  .eg-app-topbar-location > i {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    color: var(--easygas-orange) !important;
    background: #fff1e5;
    font-size: 1.05rem;
  }

  .eg-app-topbar-scan i {
    color: #2176ff !important;
    background: #eaf2ff;
  }

  .eg-app-topbar-scan::after {
    content: "Reconnaissance auto";
    position: absolute;
    margin: 29px 0 0 50px;
    color: #8b8d97;
    font-size: .6rem;
    font-weight: 500;
  }

  .eg-app-topbar-location > span {
    min-width: 0;
    color: #202129;
    font-size: 0;
    line-height: 1.15;
  }

  .eg-app-topbar-location > span::before {
    content: "Ma position";
    display: block;
    margin-bottom: 4px;
    font-size: .78rem;
    font-weight: 900;
  }

  .eg-app-topbar-location small {
    max-width: 100%;
    overflow: hidden;
    display: block !important;
    color: #8b8d97 !important;
    font-size: .59rem !important;
    font-weight: 500 !important;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .eg-app-topbar > .eg-app-topbar-icon {
    display: none !important;
  }

  .eg-mobile-gas-types {
    display: block;
    margin-bottom: 18px;
  }

  .eg-mobile-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
  }

  .eg-mobile-section-title h2 {
    margin: 0;
    color: #171820 !important;
    font-family: var(--ecm-font-display) !important;
    font-size: 1rem !important;
    font-weight: 900;
  }

  .eg-mobile-section-title a {
    color: var(--easygas-orange) !important;
    text-decoration: none;
    font-size: .72rem;
    font-weight: 800;
  }

  .eg-mobile-gas-types__rail {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 1px 0 7px;
    scrollbar-width: none;
  }

  .eg-mobile-gas-types__rail::-webkit-scrollbar { display: none; }

  .eg-mobile-gas-type {
    flex: 0 0 145px;
    min-height: 74px;
    display: grid;
    grid-template-columns: 44px 1fr;
    align-items: center;
    gap: 7px;
    padding: 8px 10px;
    border: 1px solid #e8e8ec;
    border-radius: 17px;
    color: #191a21 !important;
    background: #fff;
    text-decoration: none;
  }

  .eg-mobile-gas-type.is-active {
    border-color: var(--easygas-orange);
    background: #fffaf6;
    box-shadow: 0 6px 16px rgba(255, 102, 0, .06);
  }

  .eg-mobile-gas-type > span:last-child {
    min-width: 0;
  }

  .eg-mobile-gas-type b,
  .eg-mobile-gas-type small {
    display: block;
  }

  .eg-mobile-gas-type b {
    font-size: .78rem;
    font-weight: 900;
    white-space: nowrap;
  }

  .eg-mobile-gas-type.is-active b,
  .eg-mobile-gas-type.is-active small {
    color: var(--easygas-orange);
  }

  .eg-mobile-gas-type small {
    margin-top: 3px;
    color: #82848e;
    font-size: .59rem;
    white-space: nowrap;
  }

  .eg-cylinder--chip {
    width: 35px;
    height: 56px;
    filter: drop-shadow(0 4px 3px rgba(112, 42, 0, .14));
  }

  .eg-cylinder--chip .eg-cylinder__handle {
    border-width: 3px;
    border-bottom-width: 2px;
  }

  .eg-mobile-gas-type:not(.is-active) .eg-cylinder {
    filter: grayscale(1) opacity(.72);
  }

  .eg-app-section-head {
    display: none !important;
  }

  .eg-order-shell {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 18px !important;
    margin: 0 !important;
  }

  .eg-order-map {
    order: -1 !important;
    position: relative !important;
    top: auto !important;
    width: 100% !important;
    min-height: 246px !important;
    height: 246px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 20px !important;
    background: #edf3f6;
    box-shadow: 0 10px 28px rgba(35, 49, 55, .08) !important;
  }

  .eg-map-canvas {
    min-height: 246px !important;
    height: 246px !important;
    border-radius: 20px !important;
  }

  .eg-map-toolbar {
    top: auto !important;
    right: 12px !important;
    bottom: 12px !important;
    left: auto !important;
    width: auto !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    pointer-events: none;
  }

  .eg-map-toolbar span {
    display: none !important;
  }

  .eg-map-toolbar button {
    width: 44px !important;
    height: 44px !important;
    display: grid !important;
    place-items: center;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    color: #252730 !important;
    background: #fff !important;
    box-shadow: 0 8px 22px rgba(24, 34, 38, .15);
    font-size: 0 !important;
    pointer-events: auto;
  }

  .eg-map-toolbar button::before {
    content: "\f192" !important;
    font-family: "Font Awesome 6 Free";
    font-size: 1rem !important;
    font-weight: 900;
  }

  .eg-order-list {
    width: 100% !important;
    min-width: 0 !important;
  }

  .eg-mobile-depot-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 2px 0 12px;
  }

  .eg-mobile-depot-heading > div {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
  }

  .eg-mobile-depot-heading h2 {
    margin: 0;
    color: #171820 !important;
    font-family: var(--ecm-font-display) !important;
    font-size: .98rem !important;
    font-weight: 900;
    white-space: nowrap;
  }

  .eg-mobile-depot-heading span {
    padding: 5px 8px;
    border-radius: 999px;
    color: #27a64b;
    background: #edfaef;
    font-size: .55rem;
    font-weight: 800;
    white-space: nowrap;
  }

  .eg-mobile-depot-heading button {
    flex: 0 0 auto;
    padding: 0;
    border: 0;
    color: #555762;
    background: transparent;
    font-size: .59rem;
  }

  .eg-mobile-depot-heading button strong {
    margin-left: 3px;
    color: var(--easygas-orange);
  }

  .eg-mobile-depot-heading button i {
    margin-left: 3px;
    color: var(--easygas-orange);
    font-size: .52rem;
  }

  .eg-order-filters-form > .eg-filter-toggle {
    display: none !important;
  }

  .eg-order-filters {
    margin-bottom: 10px;
  }

  .eg-order-filters.show {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .eg-order-filters select,
  .eg-order-filters button {
    min-width: 0;
    min-height: 42px !important;
    border-radius: 12px !important;
    font-size: .68rem;
  }

  .eg-order-filters button {
    background: var(--easygas-orange) !important;
  }

  .eg-depot-stack {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .eg-depot-card {
    position: relative;
    width: 100% !important;
    min-height: 132px;
    display: grid !important;
    grid-template-columns: 112px minmax(0, 1fr) !important;
    grid-template-rows: 1fr !important;
    gap: 11px !important;
    padding: 9px !important;
    border: 1px solid #ececef !important;
    border-radius: 20px !important;
    background: #fff !important;
    box-shadow: 0 8px 22px rgba(30, 23, 18, .05) !important;
    overflow: hidden;
  }

  .eg-depot-card.is-nearest {
    border-color: #ececef !important;
  }

  .eg-nearest-badge {
    display: none !important;
  }

  .eg-depot-media {
    grid-row: 1 !important;
    width: 112px !important;
    min-height: 114px !important;
    height: 100% !important;
    border-radius: 15px !important;
    background: linear-gradient(135deg, #fff2e8, #fffaf6) !important;
  }

  .eg-depot-media-fallback {
    min-height: 114px !important;
    color: var(--easygas-orange) !important;
    background: linear-gradient(135deg, #fff0e4, #fffaf6) !important;
  }

  .eg-depot-info {
    position: relative;
    width: 100% !important;
    min-width: 0;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto 1fr;
    gap: 4px 7px !important;
    padding: 1px 0 !important;
  }

  .eg-depot-top {
    grid-column: 1 / -1;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 5px !important;
  }

  .eg-depot-top h2 {
    margin: 0 0 2px !important;
    overflow: hidden;
    color: #171820 !important;
    font-size: .86rem !important;
    font-weight: 900 !important;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .eg-depot-top p {
    margin: 0 !important;
    overflow: hidden;
    color: #777a85 !important;
    font-size: .59rem !important;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .eg-open {
    min-height: 21px !important;
    padding: 0 7px !important;
    border-radius: 999px !important;
    font-size: .52rem !important;
  }

  .eg-open.is-open {
    color: #24a74b !important;
    background: #edfaef !important;
  }

  .eg-depot-metrics {
    grid-column: 1 / -1;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 7px !important;
    overflow: hidden;
  }

  .eg-depot-metrics span {
    min-width: 0;
    padding: 0 !important;
    overflow: hidden;
    border: 0 !important;
    color: #696c77 !important;
    background: transparent !important;
    font-size: .56rem !important;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .eg-depot-metrics span i {
    color: #ffb000 !important;
  }

  .eg-depot-metrics span:nth-child(3) {
    display: none !important;
  }

  .eg-mini-grid,
  .eg-brand-row {
    display: none !important;
  }

  .eg-card-actions {
    grid-column: 2;
    grid-row: 3;
    align-self: end;
    width: auto !important;
    margin: 0 !important;
  }

  .eg-card-actions a {
    display: none !important;
  }

  .eg-card-actions button {
    width: auto !important;
    min-width: 94px;
    min-height: 35px;
    padding: 0 11px !important;
    border-radius: 11px !important;
    color: #fff !important;
    background: linear-gradient(135deg, #ff7800, #ff5700) !important;
    font-size: .62rem !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
  }

  .eg-card-actions button i {
    display: none;
  }

  .eg-mobile-depot-price {
    grid-column: 1;
    grid-row: 3;
    align-self: end;
    display: block;
    min-width: 0;
  }

  .eg-mobile-depot-price strong,
  .eg-mobile-depot-price span {
    display: block;
  }

  .eg-mobile-depot-price strong {
    color: var(--easygas-orange);
    font-size: .76rem;
    font-weight: 900;
    white-space: nowrap;
  }

  .eg-mobile-depot-price strong small {
    font-size: .55rem;
  }

  .eg-mobile-depot-price span {
    color: #565964;
    font-size: .56rem;
    text-align: center;
  }

  .eg-order-benefits {
    display: none !important;
  }

  .eg-order-modal .modal-dialog,
  .eg-scan-modal .modal-dialog {
    margin: 12px 12px calc(96px + env(safe-area-inset-bottom, 0px));
    min-height: calc(100% - 108px - env(safe-area-inset-bottom, 0px));
    align-items: center;
  }

  .eg-order-modal .modal-content {
    max-height: calc(100dvh - 108px - env(safe-area-inset-bottom, 0px));
  }

  .eg-order-modal .modal-content,
  .eg-scan-modal .modal-content {
    border-radius: 22px;
  }
}