/**
 * XISPEÇAS Portal — Extra CSS
 * Estilos complementares ao style.css principal
 */

/* ── Themify Builder custom modules ── */
.themify_builder_content-wrap .module_row {
  border: none !important;
  box-shadow: none !important;
}

/* ── Search form no header ── */
.header-search .search-form { display: flex; align-items: center; gap: 0; }
.header-search .search-form label { display: none; }
.header-search .search-form .search-field {
  background: transparent !important;
  border: none !important;
  outline: none !important;
  color: var(--xs-text) !important;
  font-family: 'Barlow', sans-serif !important;
  font-size: 13px !important;
  width: 160px !important;
  padding: 0 !important;
  box-shadow: none !important;
}
.header-search .search-form .search-field::placeholder { color: var(--xs-text-muted); }
.header-search .search-form .search-submit { display: none; }

/* ── Navigation menu overrides ── */
.main-navigation ul {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0; padding: 0;
}

.main-navigation ul ul {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 200px;
  background: var(--xs-dark-3);
  border: 1px solid var(--xs-border-muted);
  border-radius: var(--xs-radius-sm);
  flex-direction: column;
  gap: 0;
  padding: 6px 0;
  box-shadow: 0 12px 32px rgba(0,0,0,0.5);
  z-index: 999;
}

.main-navigation ul li { position: relative; }

.main-navigation ul li:hover > ul { display: flex; }

.main-navigation ul ul li a {
  padding: 9px 16px;
  border-radius: 0;
  display: block;
  width: 100%;
}

/* ── Portal layout — body class overrides ── */
.is-portal-layout .site-main { padding: 0; }

/* ── Full-page portal (page-portal.php) ── */
.portal-full-page { background: var(--xs-dark); }
.portal-full-page .site-main { min-height: 0; }

/* ── Widget area na sidebar ── */
.xs-widget { margin-bottom: 0; }

/* ── Themify Ultra builder in dark mode ── */
.themify_builder .module_text_content { color: var(--xs-text-muted) !important; }
.themify_builder .module_text_content h1,
.themify_builder .module_text_content h2,
.themify_builder .module_text_content h3,
.themify_builder .module_text_content h4 { color: var(--xs-text) !important; }

/* Highlight Themify editable border */
.themify_builder_active .module { border-color: var(--xs-orange) !important; }

/* ── Custom post type archive page ── */
.post-type-archive-xs_app .site-main,
.tax-xs_app_category .site-main {
  padding: 48px 0;
}

/* ── Single app page ── */
.single-xs_app .entry-header { margin-bottom: 24px; }
.single-xs_app .entry-title { color: var(--xs-orange); }

/* ── WP login page (se customizar) ── */
body.login {
  background: var(--xs-dark) !important;
}

body.login #login h1 a {
  background-image: none !important;
  color: var(--xs-orange);
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900;
  font-size: 32px;
  text-shadow: none;
  height: auto;
  width: auto;
}

body.login #loginform,
body.login #lostpasswordform {
  background: var(--xs-dark-2) !important;
  border: 1px solid var(--xs-border-muted) !important;
  border-radius: var(--xs-radius) !important;
  box-shadow: 0 16px 48px rgba(0,0,0,0.5) !important;
}

body.login .input {
  background: var(--xs-dark-3) !important;
  border: 1px solid var(--xs-border-muted) !important;
  color: var(--xs-text) !important;
  border-radius: var(--xs-radius-sm) !important;
}

body.login .input:focus {
  border-color: var(--xs-orange) !important;
  box-shadow: 0 0 0 3px var(--xs-orange-glow) !important;
  outline: none !important;
}

body.login .button-primary {
  background: var(--xs-orange) !important;
  border: none !important;
  border-radius: var(--xs-radius-sm) !important;
  font-family: 'Barlow Condensed', sans-serif !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  color: #000 !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

body.login .button-primary:hover {
  background: var(--xs-orange-dark) !important;
}

body.login #nav a,
body.login #backtoblog a { color: var(--xs-orange) !important; }

body.login #login_error { border-left-color: var(--xs-red) !important; background: rgba(239,68,68,0.07) !important; color: var(--xs-red) !important; }

/* ── Animação entrance nos app-cards ── */
.apps-grid .app-card {
  opacity: 0;
  animation: xs-fadeUp 0.4s ease forwards;
}
.apps-grid .app-card:nth-child(1) { animation-delay: 0.05s; }
.apps-grid .app-card:nth-child(2) { animation-delay: 0.10s; }
.apps-grid .app-card:nth-child(3) { animation-delay: 0.15s; }
.apps-grid .app-card:nth-child(4) { animation-delay: 0.20s; }
.apps-grid .app-card:nth-child(5) { animation-delay: 0.25s; }
.apps-grid .app-card:nth-child(6) { animation-delay: 0.30s; }
.apps-grid .app-card:nth-child(7) { animation-delay: 0.35s; }
.apps-grid .app-card:nth-child(8) { animation-delay: 0.40s; }

/* ── KPI cards entrance ── */
.kpi-grid .kpi-card {
  opacity: 0;
  animation: xs-fadeUp 0.4s ease forwards;
}
.kpi-grid .kpi-card:nth-child(1) { animation-delay: 0.05s; }
.kpi-grid .kpi-card:nth-child(2) { animation-delay: 0.10s; }
.kpi-grid .kpi-card:nth-child(3) { animation-delay: 0.15s; }
.kpi-grid .kpi-card:nth-child(4) { animation-delay: 0.20s; }

/* ── Gear watermark animation ── */
.xs-gear-watermark {
  position: fixed;
  bottom: -80px; right: -80px;
  width: 360px; height: 360px;
  opacity: 0.02;
  pointer-events: none;
  z-index: 0;
  animation: xs-spin-slow 70s linear infinite;
  fill: white;
}

@keyframes xs-spin-slow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ── Responsivo mobile nav ── */
@media (max-width: 1024px) {
  .portal-sidebar { transform: translateX(-100%); transition: transform 0.3s ease; position: fixed; z-index: 300; height: 100vh; top: 64px; }
  .portal-sidebar.open { transform: translateX(0); }
  .portal-sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 299; }
  .portal-sidebar.open + .portal-sidebar-overlay { display: block; }
}