/* UBD Visual UX · SAFE v1.6.2
   Capa global de interfaz:
   - promo pequeña más cercana a navegación
   - navegación inferior más delgada y autohide
   - navegación oculta desde carrito/checkout
   - drawers conocidos siempre por encima de la promo
   No modifica lógica de carrito, checkout, promociones ni hooks. */

:root {
  --ubd-ux-bottom-nav-height: 62px;
  --ubd-ux-bottom-nav-gap: 14px;
  --ubd-ux-bottom-nav-offset: 14px;
}

/* ------------------------------------------------------------------
   NAVEGACIÓN INFERIOR · más delgada
   ------------------------------------------------------------------ */
body:not(.ubd-ux-no-bottom-nav) :is(.ubd-mod-bottom-nav,.ubd-catalog-bottom-nav) {
  min-height:var(--ubd-ux-bottom-nav-height) !important;
  padding:5px 10px calc(5px + env(safe-area-inset-bottom,0px)) !important;
  border-radius:22px !important;
  transition:transform .24s cubic-bezier(.2,.8,.2,1),opacity .18s ease !important;
  will-change:transform,opacity;
}

body:not(.ubd-ux-no-bottom-nav) :is(.ubd-mod-bottom-nav,.ubd-catalog-bottom-nav) > :is(a,button) {
  min-height:44px !important;
  height:44px !important;
  padding-top:5px !important;
  padding-bottom:5px !important;
}

body:not(.ubd-ux-no-bottom-nav) :is(.ubd-mod-bottom-nav,.ubd-catalog-bottom-nav) > :is(a,button) svg {
  width:22px !important;
  height:22px !important;
  max-width:22px !important;
  max-height:22px !important;
}

body:not(.ubd-ux-no-bottom-nav) :is(.ubd-mod-bottom-main,.ubd-catalog-bottom-main) {
  width:52px !important;
  min-width:52px !important;
  height:52px !important;
  min-height:52px !important;
  padding:9px !important;
  transform:translateY(-2px) !important;
  border-radius:17px !important;
}

body:not(.ubd-ux-no-bottom-nav) :is(.ubd-mod-bottom-main,.ubd-catalog-bottom-main) svg {
  width:28px !important;
  height:28px !important;
  max-width:28px !important;
  max-height:28px !important;
}

body:not(.ubd-ux-no-bottom-nav) :is(.ubd-mod-bottom-nav,.ubd-catalog-bottom-nav).ubd-ux-nav-hidden {
  transform:translateY(calc(100% + 28px)) !important;
  opacity:0 !important;
  pointer-events:none !important;
}

/* Carrito y pasos posteriores: sin navegación inferior. */
body.ubd-ux-no-bottom-nav :is(.ubd-mod-bottom-nav,.ubd-catalog-bottom-nav),
body#cart :is(.ubd-mod-bottom-nav,.ubd-catalog-bottom-nav),
body#checkout :is(.ubd-mod-bottom-nav,.ubd-catalog-bottom-nav),
body#order-confirmation :is(.ubd-mod-bottom-nav,.ubd-catalog-bottom-nav) {
  display:none !important;
  visibility:hidden !important;
  pointer-events:none !important;
}

/* ------------------------------------------------------------------
   PROMO UNIVERSAL · más cerca del menú, botón X y menos invasiva
   ------------------------------------------------------------------ */
#bonito-universal-promo {
  z-index:2147481200 !important;
}

#bonito-universal-promo .bp-mini {
  bottom:calc(var(--ubd-ux-bottom-nav-offset) + var(--ubd-ux-bottom-nav-height) + var(--ubd-ux-bottom-nav-gap) + env(safe-area-inset-bottom,0px)) !important;
}

#bonito-universal-promo .bp-mini-arrow.ubd-ux-promo-close,
#bonito-universal-promo .bp-mini-arrow.is-shop-close {
  display:grid !important;
  place-items:center !important;
  width:30px !important;
  height:30px !important;
  flex:0 0 30px !important;
  border-radius:10px !important;
  color:#fff !important;
  font-size:22px !important;
  font-weight:800 !important;
  line-height:1 !important;
  cursor:pointer !important;
  user-select:none !important;
  -webkit-user-select:none !important;
  touch-action:manipulation !important;
}

#bonito-universal-promo.ubd-ux-promo-dismissed {
  pointer-events:none !important;
}

#bonito-universal-promo.ubd-ux-promo-dismissed .bp-mini {
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
  transform:translate(-50%,24px) scale(.97) !important;
}

#bonito-universal-promo.ubd-ux-promo-dismissed .bp-backdrop,
#bonito-universal-promo.ubd-ux-promo-dismissed .bp-card {
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
}

/* Los drawers propios del tema deben quedar SIEMPRE arriba de la promo. */
:is(.ubd-help-backdrop,.ubd-mod-menu-backdrop,.ubd-catalog-shell-backdrop,.ubd-delivery-intent-backdrop) {
  z-index:2147482200 !important;
}

:is(.ubd-help-sheet,.ubd-mod-menu-sheet,.ubd-catalog-shell-menu,.ubd-delivery-intent-sheet) {
  z-index:2147482300 !important;
}

/* Otros overlays funcionales ya existentes conservan su jerarquía alta. */
#extra-upsell-popup,
.ubd-p4a-overlay,
.ubd-p4-quote-overlay {
  z-index:2147483000 !important;
}

@media (max-width:767px) {
  :root {
    --ubd-ux-bottom-nav-height:58px;
    --ubd-ux-bottom-nav-gap:14px;
    --ubd-ux-bottom-nav-offset:14px;
  }

  body:not(.ubd-ux-no-bottom-nav) :is(.ubd-mod-bottom-nav,.ubd-catalog-bottom-nav) {
    min-height:58px !important;
    padding:4px 8px calc(4px + env(safe-area-inset-bottom,0px)) !important;
    border-radius:20px !important;
  }

  body:not(.ubd-ux-no-bottom-nav) :is(.ubd-mod-bottom-nav,.ubd-catalog-bottom-nav) > :is(a,button) {
    min-height:40px !important;
    height:40px !important;
    padding:4px !important;
  }

  body:not(.ubd-ux-no-bottom-nav) :is(.ubd-mod-bottom-nav,.ubd-catalog-bottom-nav) > :is(a,button) svg {
    width:21px !important;
    height:21px !important;
    max-width:21px !important;
    max-height:21px !important;
  }

  body:not(.ubd-ux-no-bottom-nav) :is(.ubd-mod-bottom-main,.ubd-catalog-bottom-main) {
    width:48px !important;
    min-width:48px !important;
    height:48px !important;
    min-height:48px !important;
    padding:8px !important;
    border-radius:16px !important;
  }

  #bonito-universal-promo .bp-mini {
    bottom:calc(var(--ubd-ux-bottom-nav-offset) + var(--ubd-ux-bottom-nav-height) + var(--ubd-ux-bottom-nav-gap) + env(safe-area-inset-bottom,0px)) !important;
    width:calc(100vw - 20px) !important;
  }
}

@media (prefers-reduced-motion:reduce) {
  body :is(.ubd-mod-bottom-nav,.ubd-catalog-bottom-nav),
  #bonito-universal-promo .bp-mini {
    transition:none !important;
  }
}