/* ==========================================================================
   v2-chrome.css -- Header + footer, FULL redesign, 2026-09-05, round 2.

   Round 1 only re-skinned the old "floating pill" header in place. This
   round changes the actual visual structure: the header becomes one
   continuous glass bar (matching autopostin-v2's own header) instead of
   separate floating pill islands, and the footer is an entirely new
   layout (glowing CTA+newsletter band, brand column, link columns, slim
   bottom bar) -- see frontend/partials/footer.blade.php, rewritten
   alongside this file.

   Every functional class/JS hook is left exactly where app.js and
   Bootstrap's own JS expect it (.header/.sticky, .sidebar/.sidebar-trigger/
   .sidebar-overlay/.closer-sidebar, .menu-list/.menu-link, .mega-menu/
   .mega-menu-tab, #theme-toggle > i, the Bootstrap .dropdown-toggle/
   .dropdown-menu pairs for language/currency/profile) -- only the visual
   treatment around them changed. Everything rides root.css tokens, so
   light/dark (existing toggle, untouched) both work.
   ========================================================================== */

/* ---------------------------------------------------------------------- */
/* Header: one continuous glass bar, not floating pill islands            */
/* ---------------------------------------------------------------------- */

.header {
  top: 0 !important;
  padding: 0 !important;
  background: color-mix(in srgb, var(--header-bg) 88%, transparent);
  border-bottom: 1px solid var(--border-one);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}
/* Round 5: a faint accent glow-line under the header border instead of
   a flat single-color rule -- a small, deliberate touch that reads as
   "designed" in both themes since it rides --color-primary, not a
   hardcoded shade. */
.header::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--color-primary) 45%, transparent) 50%, transparent);
  pointer-events: none;
}

.header.sticky {
  box-shadow: 0 10px 40px -20px rgba(0, 0, 0, 0.5);
  background: color-mix(in srgb, var(--header-bg) 96%, transparent);
}

.header .header-container {
  max-width: 1520px;
  margin: 0 auto;
  padding: 0 32px;
  height: 82px;
}

@media (max-width: 991px) {
  .header .header-container {
    padding: 0 20px;
    height: 70px;
  }
}

.header-logo {
  display: flex;
  align-items: center;
  min-width: 0;
  max-width: 210px;
  height: 58px;
}
.header-logo img {
  width: auto;
  height: 100%;
  max-width: 100%;
  -o-object-fit: contain;
  object-fit: contain;
}
/* Round 6: real theme-specific logo assets (header.blade.php's
   .logo-light / .logo-dark pair) replace the old white-chip-background
   hack -- the admin's CMS logo is dark-text-on-transparent (fine on a
   light header), and a second dark-mode variant with light text now
   exists as a static asset for when the header background is dark.
   Plain show/hide by theme, no background trick needed any more. */
.logo-dark { display: none; }
[data-bs-theme="dark"] .logo-light { display: none; }
[data-bs-theme="dark"] .logo-dark { display: inline-block; }
/* Mobile sidebar logo -- same asset pair, bumped up to match the bigger
   header/footer logos. */
.mobile-logo-wrap > a {
  max-width: 180px !important;
}

/* The old design gave the nav-links wrapper and the icon-cluster wrapper
   their own separate floating pill backgrounds; now the header bar itself
   is the single surface, so both become plain flex containers. */
.sidebar .sidebar-body {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  border-radius: 0;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.nav-right {
  background: transparent;
  border-radius: 0;
}
@media (max-width: 991px) {
  .nav-right {
    background: transparent !important;
  }
}

.sidebar .sidebar-body .menu-list {
  gap: 30px;
}
.sidebar .sidebar-body .menu-list .menu-item .menu-link {
  height: auto;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-secondary);
  transition: color 0.2s ease;
}
.sidebar .sidebar-body .menu-list .menu-item .menu-link:hover,
.sidebar .sidebar-body .menu-list .menu-item .menu-link.active {
  color: var(--text-primary);
}
.sidebar .sidebar-body .menu-list .menu-item .menu-link.active {
  position: relative;
}
/* app.js toggles .active on ANY menu-link click (originally just for a
   mobile-accordion open state) -- for a real nav-link that's genuinely
   "this is the current page", but the mega-menu trigger (.mega-menu-click)
   also gets .active the moment someone opens the dropdown, which isn't
   the same thing and looked like a permanently "selected" tab. Excluded
   here so only true active-page links get the underline. */
.sidebar .sidebar-body .menu-list .menu-item .menu-link.active:not(.mega-menu-click)::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -29px;
  height: 2px;
  border-radius: 2px;
  background: var(--color-primary);
  box-shadow: 0 0 10px color-mix(in srgb, var(--color-primary) 70%, transparent);
}

.nav-right {
  gap: 10px !important;
}

/* Round 10: per direct feedback -- the language switcher was dead
   weight (this install only has one active language), and three
   separate floating circles (theme/currency/profile) read as generic
   template chrome rather than something deliberately designed. Replaced
   with one unified "utility pill": a single segmented container with
   thin internal dividers, still built from the exact same functional
   elements (#theme-toggle, .currency's Bootstrap dropdown,
   .profile-dropdown's Bootstrap dropdown) so nothing JS-wise changes. */
.v2-utility-pill {
  display: flex;
  align-items: stretch;
  height: 42px;
  border-radius: 50px;
  /* v2 redesign, 2026-09-06: was overflow:hidden -- that clipped the
     Bootstrap .dropdown-menu popups of .currency / .profile-dropdown
     (both are descendants of this pill), so clicking either trigger
     opened nothing. The first/last :first-child/:last-child radius
     below keeps the hover highlight from squaring off the pill's
     rounded ends now that clipping is gone. */
  overflow: visible;
  background: color-mix(in srgb, var(--color-primary) 14%, var(--card-bg));
}
[data-bs-theme="dark"] .v2-utility-pill {
  background: var(--card-bg);
  border: 1px solid var(--border-one);
}
@media (max-width: 991px) {
  .v2-utility-pill { height: 36px; }
}

/* .currency / .profile-dropdown are the pre-existing Bootstrap dropdown
   wrappers (untouched) -- stretched to fill the pill's height so the
   divider between segments runs edge to edge. */
.v2-utility-pill > .currency,
.v2-utility-pill > .profile-dropdown {
  display: flex;
  align-items: stretch;
}
.v2-utility-pill > *:not(:last-child) {
  border-right: 1px solid color-mix(in srgb, var(--color-primary) 18%, transparent);
}
[data-bs-theme="dark"] .v2-utility-pill > *:not(:last-child) {
  border-right-color: var(--border-one);
}

.v2-utility-seg {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-width: 42px;
  padding: 0 15px;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 800;
  transition: background-color 0.2s ease;
}
@media (max-width: 991px) {
  .v2-utility-seg { min-width: 36px; padding: 0 12px; }
}
.v2-utility-seg:hover {
  background: color-mix(in srgb, var(--color-primary) 16%, transparent) !important;
}
/* Matches the outer two segments' hover-highlight corners to the pill's
   own rounded ends, now that overflow:visible (above) no longer clips
   them square. Covers both a segment that's a direct pill child
   (theme-toggle) and one nested inside the first/last wrapper div
   (.currency, .profile-dropdown). */
.v2-utility-pill > .v2-utility-seg:first-child,
.v2-utility-pill > *:first-child .v2-utility-seg {
  border-top-left-radius: 50px !important;
  border-bottom-left-radius: 50px !important;
}
.v2-utility-pill > .v2-utility-seg:last-child,
.v2-utility-pill > *:last-child .v2-utility-seg {
  border-top-right-radius: 50px !important;
  border-bottom-right-radius: 50px !important;
}
.v2-utility-seg i {
  color: var(--color-primary);
  font-size: 16px;
}
/* Round 11: !important + flex-shrink guard against a global img reset
   (max-width:100%; height:auto is a common one) stretching this out of
   its 24px circle inside the flex-centered pill segment. */
.v2-avatar-img {
  width: 24px !important;
  height: 24px !important;
  max-width: 24px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  flex-shrink: 0;
  display: block;
}

.v2-nav-divider {
  width: 1px;
  height: 26px;
  background: var(--border-one);
  margin: 0 4px;
}
@media (max-width: 991px) {
  .v2-nav-divider { display: none; }
}

.v2-nav-login {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-secondary);
  padding: 10px 4px;
  transition: color 0.2s ease;
  white-space: nowrap;
}
.v2-nav-login:hover {
  color: var(--text-primary);
}

/* Round 11: was plain var(--card-bg) -- flat grey next to the new green
   utility pill, per direct feedback. Given the same subtle green-tinted
   glass treatment as the pill itself, plus a proper accent-colored
   currency-code badge per row instead of bare text. */
.language .dropdown-menu,
.currency .dropdown-menu,
.profile-dropdown .dropdown-menu {
  background: color-mix(in srgb, var(--color-primary) 6%, var(--card-bg));
  border: 1px solid color-mix(in srgb, var(--color-primary) 20%, transparent);
  border-radius: 16px;
  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.55);
  padding: 8px;
  margin-top: 10px !important;
  min-width: 140px;
}
.language .dropdown-menu .dropdown-item,
.currency .dropdown-menu .dropdown-item {
  color: var(--text-primary);
  font-weight: 700;
  font-size: 13px;
  border-radius: 10px;
  padding: 9px 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.language .dropdown-menu .dropdown-item:hover,
.currency .dropdown-menu .dropdown-item:hover {
  background: color-mix(in srgb, var(--color-primary) 14%, transparent);
  color: var(--text-primary);
}
.language .dropdown-menu .dropdown-item img {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  -o-object-fit: cover;
  object-fit: cover;
}
/* Small colored dot ahead of each currency code -- reads as a
   deliberate list rather than plain text in a box. */
.currency .dropdown-menu .dropdown-item::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-primary);
  flex-shrink: 0;
}

/* Mega menu panel + tabs re-skinned onto the token system. */
.mega-menu-wrapper {
  background: var(--card-bg);
  border: 1px solid var(--border-one);
  border-radius: 24px;
  box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.5);
}
.mega-menu-integra .nav-item .mega-menu-tab.active,
.mega-menu-integra .nav-item .mega-menu-tab:hover {
  background: color-mix(in srgb, var(--color-primary) 8%, transparent);
  border-radius: 14px;
}

/* Mobile slide-in sidebar panel: same JS-toggled transform mechanics
   (untouched), softened border + a touch of blur for the new glass look. */
@media (max-width: 991px) {
  .header .sidebar .sidebar-body {
    border-inline-end: 1px solid var(--border-one);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
  }
  .header .sidebar .sidebar-body .closer-sidebar {
    background-color: var(--card-bg);
    border: 1px solid var(--border-one);
  }
  .header .sidebar .sidebar-body .closer-sidebar:hover {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
  }
}
/* Round 6: mobile sidebar logo now uses the same real .logo-light/
   .logo-dark asset pair (see the header-logo note above) -- no white
   chip needed here any more either. */

/* ---------------------------------------------------------------------- */
/* Footer: new layout entirely (see footer.blade.php)                     */
/* ---------------------------------------------------------------------- */

.v2-footer {
  position: relative;
  background: var(--footer-bg);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding-top: 90px;
  overflow: hidden;
}

.v2-footer-cta-wrap {
  max-width: 1480px;
  margin: 0 auto 80px;
  padding: 0 24px;
}
.v2-footer-cta {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 40px;
  padding: 56px;
  border-radius: 32px;
  border: 1px solid color-mix(in srgb, var(--color-primary) 20%, transparent);
  background: color-mix(in srgb, var(--color-primary) 6%, #0e1015);
}
.v2-footer-cta-aura {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 15% 20%, color-mix(in srgb, var(--color-primary) 25%, transparent), transparent 60%);
  pointer-events: none;
}
.v2-footer-cta-text {
  position: relative;
  z-index: 1;
  flex: 1 1 380px;
  max-width: 520px;
}
.v2-footer-cta-text h2 {
  color: #fff;
  font-size: 34px;
  font-weight: 800;
  line-height: 1.25;
  margin-bottom: 14px;
}
.v2-footer-cta-text p {
  color: rgba(255, 255, 255, 0.6);
  font-size: 15px;
  line-height: 1.7;
}
.v2-footer-cta-actions {
  position: relative;
  z-index: 1;
  flex: 1 1 360px;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 18px;
}
@media (max-width: 767px) {
  .v2-footer-cta-actions { align-items: stretch; }
}
.v2-footer-cta-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.v2-footer-newsletter {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 8px 8px 18px;
  border-radius: 50px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.v2-footer-newsletter i.bi-envelope {
  color: rgba(255, 255, 255, 0.5);
  font-size: 15px;
}
.v2-footer-newsletter input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  color: #fff;
  font-size: 14px;
}
.v2-footer-newsletter input::placeholder {
  color: rgba(255, 255, 255, 0.45);
}
.v2-footer-newsletter-btn.i-btn {
  background: var(--color-primary);
  color: var(--color-primary-text);
  border: none;
  white-space: nowrap;
  flex-shrink: 0;
}

.v2-footer-main {
  max-width: 1480px;
  margin: 0 auto;
  padding: 0 24px 60px;
  display: flex;
  gap: 60px;
  flex-wrap: wrap;
}
.v2-footer-brand {
  flex: 1 1 240px;
  max-width: 280px;
}
/* Round 6: footer.blade.php now points straight at the real dark-mode
   logo asset (footer background is always near-black, both themes) --
   no white chip needed any more. */
.v2-footer-logo {
  display: inline-block;
  max-width: 190px;
  height: 50px;
  margin-bottom: 18px;
}
.v2-footer-logo img {
  width: auto;
  height: 100%;
  max-width: 100%;
  -o-object-fit: contain;
  object-fit: contain;
}
.v2-footer-tagline {
  color: rgba(255, 255, 255, 0.5);
  font-size: 14px;
  line-height: 1.7;
  margin-bottom: 20px;
}
.v2-footer-social {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.v2-footer-social li a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 15px;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.v2-footer-social li a:hover {
  background: var(--color-primary);
  border-color: var(--color-primary);
}

.v2-footer-links {
  flex: 2 1 600px;
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
}
.v2-footer-col {
  flex: 1 1 140px;
  min-width: 140px;
}
.v2-footer-col-title {
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 20px;
  opacity: 0.9;
}
.v2-footer-col-list li {
  margin-bottom: 12px;
}
.v2-footer-col-list li:last-child {
  margin-bottom: 0;
}
.v2-footer-col-list li a {
  color: rgba(255, 255, 255, 0.55);
  font-size: 14px;
  transition: color 0.2s ease;
}
.v2-footer-col-list li a:hover {
  color: var(--color-primary);
}
.v2-footer-col-list--blog li {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.v2-footer-col-list--blog li span {
  color: rgba(255, 255, 255, 0.35);
  font-size: 11px;
}

.v2-footer-bottom {
  max-width: 1480px;
  margin: 0 auto;
  padding: 24px 24px 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}
.v2-footer-copyright {
  color: rgba(255, 255, 255, 0.45);
  font-size: 13px;
  margin: 0;
}
.v2-footer-payment img {
  max-height: 26px;
  width: auto;
  opacity: 0.85;
}

@media (max-width: 575px) {
  .v2-footer-cta { padding: 32px 24px; }
  .v2-footer-cta-text h2 { font-size: 26px; }
}