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

/* ========== LAYOUT PORTAL (Marketplace / Casas Bahia / Shopee) ========== */
/* Regra: este layout NÃO inventa cor. Só CONSOME as vars vindas do theme.json (via public_bootstrap). */

html[data-layout="portal"]{
  /* Base */
  --portal-bg: var(--bg, #f2f3f7);

  /* NAV/MENU (fonte de verdade) */
  --portal-nav-bg:           var(--navBg, var(--headerBg, #ffffff));
  --portal-nav-text:         var(--navText, var(--menuText, var(--text, #222222)));
  --portal-nav-link:         var(--menuText, var(--navText, var(--text, #222222)));
  --portal-nav-link-active:  var(--menuTextActive, var(--brand, #ea1d2c));
  --portal-nav-bg-active:    var(--menuBgActive, color-mix(in srgb, var(--portal-nav-bg) 92%, var(--portal-nav-link-active)));
  --portal-nav-border:       var(--menuBorder, var(--headerBorder, var(--cardBorder, #e5e7eb)));
  --portal-nav-shadow:       var(--menuShadow, var(--cardShadow, 0 1px 0 rgba(0,0,0,0.05)));

  /* CHIPS/TAGS (tag*) */
  --portal-chip-bg:            var(--tagBg, var(--chipBg, transparent));
  --portal-chip-text:          var(--tagText, var(--chipText, var(--portal-nav-text, var(--text, #222222))));
  --portal-chip-border:        var(--tagBorder, var(--portal-nav-border));
  --portal-chip-bg-active:     var(--tagBgActive, var(--menuBgActive, var(--brand, #ea1d2c)));
  --portal-chip-text-active:   var(--tagTextActive, var(--menuTextActive, #ffffff));
  --portal-chip-shadow-active: var(--tagShadowActive, var(--menuShadow, 0px 4px 12px rgba(0,0,0,.08)));

  /* Header/Topbar */
  --portal-header-bg:   var(--portal-nav-bg);
  --portal-header-text: var(--portal-nav-text);

  --portal-topbar-bg:   var(--portal-nav-bg, var(--topbarBg, #191919));
  --portal-topbar-text: var(--portal-nav-text, var(--topbarText, #ffffff));

  /* Sidebar = painel */
  --portal-sidebar-bg:     var(--panelBg, #ffffff);
  --portal-sidebar-text:   var(--panelText, var(--text, #222222));
  --portal-sidebar-border: var(--panelBorder, var(--cardBorder, #e5e7eb));

  /* Sombras */
  --portal-shadow:       var(--cardShadow, 0 2px 8px rgba(0,0,0,0.04));
  --portal-hover-shadow: var(--menuShadow, 0 8px 22px rgba(0,0,0,0.10));

  /* Sticky (fallback; JS ajusta dinamicamente) */
  --sticky-top-visible: 100px;
  --sticky-top-hidden:  20px;
  --sticky-top: var(--sticky-top-visible);
}

/* Body apenas no portal */
html[data-layout="portal"] body{
  background-color: var(--portal-bg);
  color: var(--text, #222222);
}

/* Sticky column wrapper do show.php (quando existir) */
@media (min-width: 768px){
  html[data-layout="portal"] .sticky-column-wrapper{
    position: -webkit-sticky;
    position: sticky;
    top: var(--sticky-top, 20px);
    align-self: flex-start;
    height: fit-content;
  }
}

/* --- TOP BAR --- */
html[data-layout="portal"] .portal-topbar{
  background-color: var(--portal-topbar-bg);
  border-bottom: 1px solid var(--portal-nav-border);
  font-size: .75rem;
  padding: 6px 0;
  color: var(--portal-topbar-text);
}

/* Links da topbar = chips (tag*) */
html[data-layout="portal"] .portal-topbar a{
  display: inline-flex;
  align-items: center;
  gap: 6px;

  color: var(--portal-chip-text);
  background: var(--portal-chip-bg);
  border: 1px solid var(--portal-chip-border);
  border-radius: var(--radiusChip);

  text-decoration: none;
  padding: 4px 10px;
  margin-left: 10px;

  transition: background .2s, color .2s, border-color .2s, box-shadow .2s, transform .2s;
}

html[data-layout="portal"] .portal-topbar a:hover{
  color: var(--portal-chip-text-active);
  background: var(--portal-chip-bg-active);
  border-color: var(--portal-chip-border);
  text-decoration: none;
}

html[data-layout="portal"] .portal-topbar a:focus-visible{
  outline: none;
  box-shadow: var(--portal-chip-shadow-active);
}

html[data-layout="portal"] .portal-topbar a.active{
  color: var(--portal-chip-text-active);
  background: var(--portal-chip-bg-active);
  border-color: var(--portal-chip-border);
  box-shadow: var(--portal-chip-shadow-active);
  font-weight: 700;
}

/* --- HEADER PRINCIPAL --- */
html[data-layout="portal"] .portal-header{
  background: var(--portal-header-bg);
  padding: 15px 0;
  box-shadow: var(--portal-nav-shadow);
  border-bottom: 1px solid var(--portal-nav-border);
  position: sticky;
  top: 0;
  z-index: 1020;
  color: var(--portal-header-text);
}

html[data-layout="portal"] .portal-header a:not(.brand-head){
  color: inherit;
}
html[data-layout="portal"] .portal-header a:not(.brand-head):hover{
  color: var(--portal-nav-link-active);
}

/* Botão menu mobile */
html[data-layout="portal"] .portal-header .btn-link{
  color: inherit;
  text-decoration: none;
}
html[data-layout="portal"] .portal-header .btn-link:hover{
  color: var(--portal-nav-link-active);
}

/* Brand */
html[data-layout="portal"] .brand-head-wrap{
  display:flex;
  align-items:center;
}

html[data-layout="portal"] .portal-header .brand-head{
  color: var(--brandHeadText, var(--portal-header-text));
  text-decoration: none;
}

html[data-layout="portal"] .portal-header .brand-head-icon{
  color: var(--brandHeadIcon, var(--portal-header-text));
}

html[data-layout="portal"] .portal-header .brand-head-text{
  color: var(--brandHeadText, var(--portal-header-text));
}

html[data-layout="portal"] .portal-header .brand-head:hover,
html[data-layout="portal"] .portal-header .brand-head:focus-visible{
  color: var(--brandHeadText, var(--portal-header-text));
  text-decoration: none;
}

html[data-layout="portal"] .portal-header .brand-head-img--icon,
html[data-layout="portal"] .portal-header .brand-head-img--logo{
  height: 32px;
}

/* Busca */
html[data-layout="portal"] .portal-search-form{
  position: relative;
  width: 100%;
  max-width: 680px;
}
@media (min-width: 1200px){
  html[data-layout="portal"] .portal-search-form{ max-width: 560px; }
}

html[data-layout="portal"] .portal-search-input{
  border: 2px solid var(--formBorder);
  border-radius: var(--radiusButton);
  padding: 10px 15px;
  padding-right: 58px;
  height: 48px;
  font-size: .95rem;

  background: var(--formBg);
  color: var(--formText);
}

html[data-layout="portal"] .portal-search-input::placeholder{
  color: var(--textPlaceholder);
  opacity: 1;
}

html[data-layout="portal"] .portal-search-input:focus{
  outline: none;
  border-color: var(--formFocus);
  box-shadow: var(--bs-focus-ring-x, 0) var(--bs-focus-ring-y, 0) var(--bs-focus-ring-blur, 0)
              var(--bs-focus-ring-width, .25rem) var(--bs-focus-ring-color);
}

/* Botão da busca (btn*) */
html[data-layout="portal"] .portal-header .portal-search-btn{
  position: absolute;
  right: 4px;
  top: 4px;
  height: 40px;
  width: 54px;

  background: var(--btnBg, var(--brand));
  color: var(--btnText, #ffffff);
  border: 1px solid var(--btnBorder, transparent);
  border-radius: var(--radiusButton);
  box-shadow: var(--btnShadow);

  display: inline-flex;
  align-items: center;
  justify-content: center;

  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s, box-shadow .2s, transform .08s;
}

html[data-layout="portal"] .portal-header .portal-search-btn i{
  color: currentColor;
}

html[data-layout="portal"] .portal-header .portal-search-btn:hover{
  background: var(--btnBgActive, var(--btnBg, var(--brand)));
  color: var(--btnTextActive, var(--btnText, #ffffff));
}

html[data-layout="portal"] .portal-header .portal-search-btn:active{
  background: var(--btnBgActive, var(--btnBg, var(--brand)));
  color: var(--btnTextActive, var(--btnText, #ffffff));
  transform: translateY(1px);
}

html[data-layout="portal"] .portal-header .portal-search-btn:focus-visible{
  outline: none;
  box-shadow: var(--btnShadow),
              var(--bs-focus-ring-x, 0) var(--bs-focus-ring-y, 0) var(--bs-focus-ring-blur, 0)
              var(--bs-focus-ring-width, .25rem) var(--bs-focus-ring-color);
}

/* Ações do header (chips tag*) */
html[data-layout="portal"] .portal-header .portal-action-item{
  display: flex;
  align-items: center;
  gap: 8px;

  text-decoration: none;
  padding: 6px 10px;

  border-radius: var(--radiusChip);
  background: var(--portal-chip-bg);
  color: var(--portal-chip-text);
  border: 1px solid var(--portal-chip-border);

  transition: background .2s, color .2s, border-color .2s, box-shadow .2s, transform .2s;
}

html[data-layout="portal"] .portal-header .portal-action-item:hover{
  background: var(--portal-chip-bg-active);
  color: var(--portal-chip-text-active);
  border-color: var(--portal-chip-border);
  box-shadow: none;
}

html[data-layout="portal"] .portal-header .portal-action-item:focus-visible,
html[data-layout="portal"] .portal-header .portal-action-item.active{
  background: var(--portal-chip-bg-active);
  color: var(--portal-chip-text-active);
  border-color: var(--portal-chip-border);
  box-shadow: var(--portal-chip-shadow-active);
  outline: none;
}

html[data-layout="portal"] .portal-header .portal-action-item i,
html[data-layout="portal"] .portal-header .portal-action-item span,
html[data-layout="portal"] .portal-header .portal-action-item strong{
  color: currentColor;
}

html[data-layout="portal"] .portal-action-icon{
  position: relative;
  font-size: 1.6rem;
}

html[data-layout="portal"] .portal-action-info{
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  font-size: .8rem;
  min-width: 0;
}

html[data-layout="portal"] .portal-action-info strong{
  font-size: .9rem;
}

html[data-layout="portal"] .portal-header .portal-action-item{ flex: 0 0 auto; }

html[data-layout="portal"] .portal-action-info span,
html[data-layout="portal"] .portal-action-info strong{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 14ch;
}
@media (min-width: 1200px){
  html[data-layout="portal"] .portal-action-info span,
  html[data-layout="portal"] .portal-action-info strong{ max-width: 18ch; }
}

/* Badge do carrinho */
html[data-layout="portal"] .portal-badge{
  position: absolute;
  top: -5px;
  right: -8px;
  background: var(--brand);
  color: var(--brandText)!important;
  font-size: .65rem;
  padding: 2px 6px;
  border-radius: 10px;
  border: 2px solid var(--portal-header-bg);
}

/* --- SIDEBAR --- */
html[data-layout="portal"] .portal-sidebar{
  background: var(--portal-sidebar-bg);
  color: var(--portal-sidebar-text);

  border-radius: var(--radiusCard);
  padding: 15px;

  box-shadow: var(--portal-shadow);
  height: fit-content;
  position: sticky;
  top: var(--sticky-top, 20px);

  border: 1px solid var(--portal-sidebar-border);
}

html[data-layout="portal"] .portal-sidebar-title{
  font-weight: 700;
  font-size: 1.1rem;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  gap: 8px;

  color: var(--portal-sidebar-text);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--portal-sidebar-border);
}

html[data-layout="portal"] .portal-sidebar-title i{ color: var(--brand); }

html[data-layout="portal"] .portal-cat-list{
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Itens do menu (sidebar) = menu* */
html[data-layout="portal"] .portal-cat-link{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  text-decoration: none;

  color: var(--menuText);
  border-radius: var(--radiusMenu);
  font-size: .9rem;
  font-weight: 500;

  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;

  background: var(--menuBg);
  border: 1px solid var(--menuBorder);
}

html[data-layout="portal"] .portal-cat-link:hover{
  background: var(--menuBgActive);
  color: var(--menuTextActive);
  transform: translateX(4px);
  box-shadow: var(--menuShadow);
}

html[data-layout="portal"] .portal-cat-link.active{
  background: var(--menuBgActive);
  color: var(--menuTextActive);
  font-weight: 700;
  box-shadow: var(--menuShadow);
}

html[data-layout="portal"] .portal-cat-link.active i{ color: currentColor; }

/* --- CONTEÚDO --- */
html[data-layout="portal"] .portal-main-area{
  padding-top: 20px;
  padding-bottom: 40px;
}

/* Card utilitário */
html[data-layout="portal"] .portal-card{
  background: var(--cardBg);
  border-radius: var(--radiusCard);
  border: 1px solid var(--cardBorder);
  box-shadow: var(--portal-shadow);
  transition: transform .3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow .3s cubic-bezier(0.25, 0.8, 0.25, 1);
  overflow: hidden;
}

html[data-layout="portal"] .portal-card:hover{
  box-shadow: var(--portal-hover-shadow);
  transform: translateY(-4px);
}

html[data-layout="portal"] .portal-hero-img{
  max-height: 350px;
  object-fit: cover;
}

/* Ripple (CSP-friendly: sem inline style) */
html[data-layout="portal"] .portal-ripple-host{
  position: relative;
  overflow: hidden;
}

html[data-layout="portal"] .portal-ripple{
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  border-radius: 999px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: .45;
  background: color-mix(in srgb, currentColor 40%, transparent);
  transition: width .42s ease, height .42s ease, opacity .42s ease;
}

html[data-layout="portal"] .portal-ripple.is-on{
  width: 320px;
  height: 320px;
  opacity: 0;
}

/* --- RESPONSIVIDADE --- */
@media (max-width: 1199.98px){
  html[data-layout="portal"] .portal-header{ padding: 10px 0; }
  html[data-layout="portal"] .portal-search-form{ margin: 10px 0; }
}

@media (max-width: 767.98px){
  html[data-layout="portal"] .portal-topbar{ display: none; }
  html[data-layout="portal"] .portal-action-info{ display: none; }
  html[data-layout="portal"] .portal-search-form{ max-width: 100%; }
}