/* public/css/layouts/layout.css (CDN: https://cdn.pedidos.vip/css/layouts/layout.css?v=1) */
/* charset: UTF-8 (no BOM) */

/* =========================================================
   DEFAULT — Sticky vars (compatível com show.php e sidebar)
   ========================================================= */
html[data-layout="default"]{
  --sticky-top-hidden: 20px;
  --sticky-top-visible: 90px;
  --sticky-top: var(--sticky-top-visible);
}

@media (min-width: 1200px){
  html[data-layout="default"] .sidebar-cats{
    position: sticky;
    top: var(--sticky-top, 20px);
    align-self: flex-start;
    height: fit-content;
  }
}

@media (min-width: 768px){
  html[data-layout="default"] .sticky-column-wrapper{
    position: -webkit-sticky;
    position: sticky;
    top: var(--sticky-top, 20px);
    align-self: flex-start;
    height: fit-content;
  }
}

/* =========================================================
   MOBILE TOP v3 — TOP BUTTONS 100% FIÉIS A "BOTÕES GLOBAIS"
   - m-top__btn (button / a) herda:
     --btnBg, --btnText, --btnBgActive, --btnTextActive, --btnBorder, --btnShadow, --radiusButton
   - Sem "glass" / sem derivar do topbar: é o botão global mesmo.
   ========================================================= */
@media (max-width: 767.98px){

  html[data-layout="default"] .m-top{
    padding-top: calc(10px + env(safe-area-inset-top));
    padding-bottom: 10px;
  }

  /* Appbar: respeita topbar (fundo/texto/borda) */
  html[data-layout="default"] .m-top__bar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap: 10px;
    padding: 10px;
    color: var(--topbarText, var(--text, #171717));
  }

  /* ---------------------------------------------------------
     BOTÕES DO TOPO (menu / sacola) = "BOTÕES GLOBAIS"
     --------------------------------------------------------- */
  html[data-layout="default"] .m-top__btn{
    /* dimensões */
    width: 55px;
    height: 44px;

    display:flex;
    flex-direction: column;
    align-items:center;
    justify-content: space-between;

    padding: 0;
    line-height: 1;
    text-decoration: none;

    /* coerência com tema (BOTÕES GLOBAIS) */
    border-radius: var(--radiusButton, 16px);
    background: var(--btnBg, var(--brand, #ea1d2c));
    color: var(--btnText, #fff);
    border: none;
    box-shadow: none;

    /* UX */
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    user-select: none;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .06s ease;
  }

  /* Hover (somente ponteiro fino) usando o "ativo" global */
  @media (hover:hover) and (pointer:fine){
    html[data-layout="default"] .m-top__btn:hover{
      background: var(--btnBgActive, var(--btnBg, var(--brand, #ea1d2c)));
      color: var(--btnTextActive, var(--btnText, #fff));
      border-color: var(--btnBorder, transparent);
    }
  }

  /* Estado pressionado/selecionado = "ativo" global */
  html[data-layout="default"] .m-top__btn:active,
  html[data-layout="default"] .m-top__btn.is-active,
  html[data-layout="default"] .m-top__btn[aria-current="page"]{
    background: var(--btnBgActive, var(--btnBg, var(--brand, #ea1d2c)));
    color: var(--btnTextActive, var(--btnText, #fff));
    border-color: var(--btnBorder, transparent);
    transform: translateY(1px);
  }

  /* Focus visível: contorno coerente (derivado de btnBorder / btnText) */
  html[data-layout="default"] .m-top__btn:focus{ outline: none; }
  html[data-layout="default"] .m-top__btn:focus-visible{
    outline: 2px solid var(--btnBorder, var(--btnText, #fff));
    outline-offset: 2px;
  }

  @supports (color: color-mix(in srgb, #000, #fff)){
    html[data-layout="default"] .m-top__btn:focus-visible{
      outline-color: color-mix(in srgb,
        var(--btnBorder, var(--btnText, #fff)) 70%,
        transparent
      );
    }
  }

  /* Badge da sacola (remove inline style) */
  html[data-layout="default"] .m-top__badge{
    font-size: .65rem;
  }

  /* ---------------------------------------------------------
     Brand central (sem forçar cores; herda topbarText/brandHead*)
     --------------------------------------------------------- */
  html[data-layout="default"] .m-top__brand{
    flex: 1 1 auto;
    min-width: 0;
    display:flex;
    align-items:center;
    justify-content:center;
    gap: 10px;
    text-decoration:none;
    color: inherit;
  }

  html[data-layout="default"] .m-top__brand-name{
    font-weight: 900;
    letter-spacing: .2px;
    font-size: 1.02rem;
    max-width: min(72vw, 340px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--brandHeadText, var(--topbarText, var(--text, #171717)));
  }

  html[data-layout="default"] .m-top__brand-icon{
    font-size: 1.35rem;
    color: var(--brandHeadIcon, var(--topbarText, var(--brand, #ea1d2c)));
  }

  html[data-layout="default"] .m-top__brand-logo{
    max-height: 28px;
    width: auto;
    display:block;
  }

  html[data-layout="default"] .m-top__brand-img{
    width: 30px;
    height: 30px;
    border-radius: calc(var(--radiusButton, 16px) - 4px);
    object-fit: cover;
    display:block;
  }

  /* =========================================================
     Busca (compatível com seu HTML atual: .search-wrap/.search-input)
     - Usa tokens de form do tema
     ========================================================= */
  html[data-layout="default"] .search-wrap{
    position: relative;
    display:flex;
    align-items:center;
    gap: 10px;

    background: var(--formBg, var(--surface, #fff));
    color: var(--formText, var(--text, #171717));
    border: 1px solid var(--formBorder, var(--cardBorder, #e5e7eb));

    border-radius: var(--radiusButton, 16px);
    padding: 0 10px;
    height: 48px;

    box-shadow: var(--cardShadow, none);
  }

  html[data-layout="default"] .search-wrap > .bi{
    position:absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--textMutedGlobal, var(--muted, #6b7280));
    font-size: 1.05rem;
    pointer-events:none;
  }

  html[data-layout="default"] .search-input{
    width: 100%;
    height: 48px;

    /* remove bordas do bootstrap para não duplicar */
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;

    padding-left: 36px; /* ícone está em left:16px */
    padding-right: 12px;

    color: var(--formText, var(--text, #171717));
    outline: none;
  }

  html[data-layout="default"] .search-input::placeholder{
    color: var(--textPlaceholder, rgba(0,0,0,.55));
  }

  /* chips: aproxima um pouco no mobile, sem “apertar” */
  html[data-layout="default"] .chip-scroller{
    margin-top: 10px !important;
  }
}