/*
 * Design system: shell da aplicação.
 * Header, busca, sidebar, cabeçalho de página, chips, rodapé e navegação
 * inferior no mobile.
 */

/* ---------- Header ---------- */

header.navbar-fixed-top {
  background: var(--header) !important;
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border) !important;
  box-shadow: none !important;
}

.pt_header_nav #open_slide,
.pt_header_nav .right-part > li > a {
  border-radius: var(--radius-md);
  color: var(--foreground);
  transition: background-color .15s;
}

.pt_header_nav #open_slide:hover,
.pt_header_nav .right-part > li > a:hover,
.pt_header_nav .right-part > li.open > a {
  background-color: var(--accent) !important;
}

.pt_header_nav .right-part > li > a {
  display: flex;
  align-items: center;
  height: 40px;
  margin-top: 3px;
  padding: 0 12px;
  font-size: 14px;
  font-weight: 500;
}

.pt_header_nav .right-part .header-image {
  border-radius: 9999px;
  box-shadow: 0 0 0 2px var(--background), 0 0 0 3px var(--border);
}

/* Busca: input + botão como um único "input group" */
nav.navbar-findcond .search-header .form-group,
.search-articles-form .form-group {
  display: flex;
  align-items: stretch;
}

nav.navbar-findcond .search-header input,
nav.navbar-findcond .search-header input.form-control {
  height: 40px;
  padding: 0 16px;
  border: 1px solid var(--input) !important;
  border-right: 0 !important;
  border-radius: 9999px 0 0 9999px !important;
  background-color: var(--background) !important;
  color: var(--foreground);
  font-size: 14px;
  box-shadow: var(--shadow-xs);
}

nav.navbar-findcond .search-header input:focus {
  border-color: var(--ring) !important;
  box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 30%, transparent);
}

nav.navbar-findcond .search-header .btn-main {
  width: 56px;
  height: 40px;
  min-height: 40px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--input) !important;
  border-left: 0 !important;
  border-radius: 0 var(--radius-full) var(--radius-full) 0 !important;
  background-color: var(--muted) !important;
  color: var(--foreground) !important;
  box-shadow: none;
}

nav.navbar-findcond .search-header .btn-main:hover,
nav.navbar-findcond .search-header .btn-main:focus {
  background-color: var(--accent) !important;
  color: var(--foreground) !important;
}

nav.navbar-findcond .search-header .btn-main svg {
  width: 18px;
  height: 18px;
}

nav.navbar-findcond .search-header .search-dropdown {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--popover) !important;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

/* Busca de artigos (e outras buscas em card) */
.search-articles-form .form-control {
  height: 40px;
  border-right: 0;
  border-radius: var(--radius-md) 0 0 var(--radius-md);
}

.search-articles-form .btn-main {
  height: 40px;
  margin: 0;
  border-radius: 0 var(--radius-md) var(--radius-md) 0 !important;
  box-shadow: var(--shadow-xs);
}

/* ---------- Sidebar ---------- */

.yp_side_drawer {
  background-color: var(--background) !important;
  border-right: 1px solid var(--border);
  box-shadow: none;
}

.yp_side_drawer ul.sections {
  padding: 8px;
  border-bottom-color: var(--border);
}

.yp_side_drawer ul.sections li a {
  position: relative;
  height: 44px;
  line-height: 44px;
  margin: 2px 0;
  padding: 0 8px;
  border-radius: var(--radius-md);
  color: var(--muted-foreground);
  font-size: 14px;
  font-weight: 500;
  transition: background-color .15s, color .15s;
}

.yp_side_drawer ul.sections li a svg {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  margin: 0 14px 0 4px;
}

.yp_side_drawer ul.sections li a:before {
  display: none;
}

.yp_side_drawer ul.sections li a:hover,
.yp_side_drawer ul.sections li a:focus {
  background-color: var(--accent);
  color: var(--foreground);
}

.yp_side_drawer ul.sections li.active a {
  background-color: color-mix(in oklch, var(--primary) 12%, transparent);
  color: var(--primary);
}

.yp_side_drawer ul.sections h3 {
  padding: 8px;
  color: var(--muted-foreground);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .02em;
}

/* Trilho recolhido (desktop): ícone com rótulo pequeno embaixo */
@media (min-width: 1252px) {
  body:not(.side_open) .yp_side_drawer ul.sections li a {
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    height: 60px;
    line-height: 1;
    padding: 0 2px;
  }

  body:not(.side_open) .yp_side_drawer ul.sections li a svg {
    margin: 0;
  }

  body:not(.side_open) .yp_side_drawer ul.sections li a span {
    display: block;
    max-width: 100%;
    overflow: hidden;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}


/* ---------- Cabeçalho de página ---------- */

.pt_page_headr {
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}

.pt_page_headr .page_head,
.page_head {
  margin: 0;
  color: var(--foreground);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.page_head svg,
.pt_page_headr .page_head svg {
  width: 32px;
  height: 32px;
  padding: 6px;
  border-radius: var(--radius-md);
  background-color: color-mix(in oklch, var(--primary) 12%, transparent) !important;
  color: var(--primary);
}


/* ---------- Chips de categoria (badge outline) ---------- */

.article-categories .pt_categories ul li a,
.pt_categories ul li a {
  padding: 4px 12px;
  border: 1px solid var(--border);
  border-radius: 9999px;
  background: var(--background);
  color: var(--foreground);
  font-size: 13px;
  font-weight: 500;
}

.article-categories .pt_categories ul li a:hover,
.pt_categories ul li a:hover {
  background-color: var(--accent);
  border-color: var(--border);
}

.article-categories .pt_categories ul li.active a,
.pt_categories ul li.active a {
  background-color: var(--primary);
  border-color: var(--primary);
  color: var(--primary-foreground);
}


/* Barra de categorias da home */
.pt_sec_nav_cats {
  background: var(--header) !important;
  border-bottom: 1px solid var(--border);
  box-shadow: none;
}

.pt_sec_nav_slide > div a {
  padding: 0 var(--space-3) !important;
  border: 0 !important;
  border-radius: var(--radius-md) !important;
  background: var(--secondary) !important;
  color: var(--secondary-foreground) !important;
  font-size: var(--text-base);
  font-weight: 500;
  line-height: 32px !important;
  white-space: nowrap;
}

.pt_sec_nav_slide > div a:hover {
  background: var(--accent) !important;
  color: var(--accent-foreground) !important;
}

.pt_sec_nav_slide > div a.active,
.pt_sec_nav_slide > div a.active:hover {
  background: var(--primary) !important;
  color: var(--primary-foreground) !important;
}

.pt_sec_nav_slide_prnt .swiper-button-next,
.pt_sec_nav_slide_prnt .swiper-button-prev {
  border-color: var(--border);
  background: var(--background);
  color: var(--foreground);
  box-shadow: var(--shadow-sm);
}


/* ---------- Rodapé do site ---------- */

.pt-site-footer {
  margin-top: 48px;
  border-top: 1px solid var(--border);
  background: var(--background);
  color: var(--muted-foreground);
  font-size: 14px;
}

#main-container.m_cont_full + .pt-site-footer {
  display: none;
}

.pt-site-footer-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 48px 24px 24px;
}

.pt-site-footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr));
  gap: 32px;
}

.pt-site-footer-brand img {
  height: 32px;
  width: auto;
}

.pt-site-footer-brand p {
  max-width: 320px;
  margin: 16px 0 0;
  line-height: 1.6;
}

.pt-site-footer-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.pt-site-footer-col h5 {
  margin: 0 0 4px;
  color: var(--foreground);
  font-size: 14px;
  font-weight: 600;
}

.pt-site-footer a {
  color: var(--muted-foreground);
  text-decoration: none;
  transition: color .15s;
}

.pt-site-footer a:hover,
.pt-site-footer a:focus {
  color: var(--foreground);
  text-decoration: none;
}

.pt-site-footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}

.pt-site-footer-bottom .copyright {
  margin: 0;
  font-size: 13px;
}

@media (max-width: 991px) {
  .pt-site-footer-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .pt-site-footer-brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 767px) {
  .pt-site-footer {
    margin-top: 32px;
  }

  .pt-site-footer-inner {
    padding: 32px 16px 24px;
  }

  .pt-site-footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 16px;
  }
}

/* ---------- Navegação inferior (mobile) ---------- */

.pt-bottom-nav {
  display: none;
}

@media (max-width: 767px) {
  .pt-bottom-nav {
    position: fixed;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1030;
    display: flex;
    height: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    border-top: 1px solid var(--border);
    background: var(--header);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    backdrop-filter: saturate(180%) blur(12px);
  }

  .pt-bottom-nav a {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 0;
    color: var(--muted-foreground);
    font-size: 11px;
    font-weight: 500;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }

  .pt-bottom-nav a span {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .pt-bottom-nav a svg {
    width: 22px;
    height: 22px;
  }

  .pt-bottom-nav a.active {
    color: var(--primary);
  }

  .pt-bottom-nav a.pt-bottom-nav-create svg {
    width: 40px;
    height: 32px;
    padding: 5px 10px;
    border-radius: 9999px;
    background: var(--primary);
    color: var(--primary-foreground);
  }

  .pt-bottom-nav a.pt-bottom-nav-create span {
    display: none;
  }

  body {
    padding-bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom));
  }

  body.mobi_side_open .pt-bottom-nav {
    display: none;
  }

}

/* ---------- Ajustes mobile ---------- */

@media (max-width: 767px) {
  #main-container.container:not(.container-full) {
    padding-right: 16px;
    padding-left: 16px;
  }

  .content {
    padding: 16px;
  }

  .pt_page_headr {
    flex-wrap: wrap;
    gap: 12px;
  }

  .pt_page_headr .page_head,
  .page_head {
    font-size: 18px;
  }

  /* Vídeos em uma coluna, como nos apps de vídeo */
  .home-page-categories .videos .row > [class*="col-xs-6"] {
    width: 100%;
  }

  .home-page-categories .videos .video-list .video-list-title h4 {
    font-size: 15px;
  }

  .modal-dialog {
    margin: 16px;
  }

  .login-page {
    padding: 24px 20px !important;
    border-radius: var(--radius-xl) !important;
  }

  .btn {
    min-height: 40px;
  }
}

/* ---------- Ajustes finos do shell ---------- */

/* Header: altura fixa e ícones como botões fantasmas */
.pt_header_nav #open_slide {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
}

.pt_header_nav .right-part > li > a svg {
  width: 22px;
  height: 22px;
}

.pt_header_nav .logo-img img {
  height: 30px;
  width: auto;
}

/* Cabeçalho de página: ícone discreto, sem "tile" colorido */
.page_head svg,
.pt_page_headr .page_head svg {
  width: 22px;
  height: 22px;
  padding: 0;
  margin-inline-end: var(--space-2);
  border: 0;
  background: transparent !important;
  color: var(--muted-foreground);
  vertical-align: -4px;
}

.pt_page_headr {
  border-bottom: 0;
  margin-bottom: var(--space-5);
  padding-bottom: 0;
}

.pt_page_headr .page_head,
.page_head {
  font-size: var(--text-3xl);
  letter-spacing: -0.02em;
}

/* Espaço entre título e metadados nos cards com avatar */
.pt-vcard-body .video-title {
  max-height: none;
}

.pt-vcard-body .video-info {
  margin-top: 0;
}

.pt-vcard-body .video-list-title h4,
.pt-vcard-body .video-title h4 {
  margin-bottom: var(--space-1) !important;
}

/* Sidebar: rótulo de seção e divisórias finas */
.yp_side_drawer ul.sections {
  border-bottom: 1px solid var(--border) !important;
}

.yp_side_drawer ul.sections li a svg {
  color: currentColor;
}

.yp_side_drawer ul.sections li.active a {
  background-color: var(--accent) !important;
  color: var(--foreground) !important;
  font-weight: 600;
}

.yp_side_drawer .subscribers_ img,
.yp_side_drawer li.subscribers_ img {
  width: 24px;
  height: 24px;
  border-radius: var(--radius-full);
  object-fit: cover;
}

.sidenav-overlay,
.fab-overlay {
  background-color: var(--overlay) !important;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

/* Botão flutuante "criar": neutro; no mobile a navegação inferior já tem "+" */
.btn-fab-floating {
  background-color: var(--primary) !important;
  color: var(--primary-foreground) !important;
  box-shadow: var(--shadow-lg) !important;
}

@media (max-width: 767px) {
  .fixed-action-btn {
    display: none !important;
  }

  .pt-bottom-nav a.active {
    color: var(--foreground);
  }

  .pt-bottom-nav a.pt-bottom-nav-create svg {
    background: var(--primary);
    color: var(--primary-foreground);
  }
}

.pt-vcard-body .video-title,
.pt-vcard-body .video-list-title {
  font-size: var(--text-md);
  line-height: var(--leading-tight);
}

.pt-vcard-body .video-title > a,
.pt-vcard-body .video-list-title > a {
  display: block;
}

/* Menu "Criar": ícones neutros (o markup traz cores fixas) */
.pt-create-menu > li > a svg,
.pt-create-menu > li > a svg * {
  color: var(--muted-foreground) !important;
}

.pt-create-menu > li > a svg path[fill]:not([fill="none"]) {
  fill: currentColor;
}

/* Páginas institucionais (afiliados, desenvolvedores...): sem a faixa azul legada
   atrás do título; o título vira um cabeçalho de página comum */
.wo_about_wrapper_parent {
  display: none !important;
}

.mat_header {
  margin-bottom: var(--space-6) !important;
  padding: 0 !important;
}

.mat_header h1 {
  gap: var(--space-2);
  color: var(--foreground) !important;
  font-size: var(--text-3xl) !important;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.mat_header h1 svg {
  width: 22px !important;
  height: 22px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--muted-foreground) !important;
}

/* RTL: grupo de busca espelhado (campo à direita, botão à esquerda) */
[dir="rtl"] nav.navbar-findcond .search-header input,
[dir="rtl"] nav.navbar-findcond .search-header input.form-control {
  border-right: 1px solid var(--input) !important;
  border-left: 0 !important;
  border-radius: 0 var(--radius-full) var(--radius-full) 0 !important;
}

[dir="rtl"] nav.navbar-findcond .search-header .btn-main {
  border-left: 1px solid var(--input) !important;
  border-right: 0 !important;
  border-radius: var(--radius-full) 0 0 var(--radius-full) !important;
}

[dir="rtl"] .yp_side_drawer {
  border-right: 0;
  border-left: 1px solid var(--border);
}

/* Alvos de toque do header com no mínimo 40×40 */
.pt_header_nav .right-part > li > a {
  min-width: 40px;
  min-height: 40px;
  justify-content: center;
}