/*
 * Keep the navigation gutter identical across both header implementations.
 * The catalog pages use `.stream-nav`, while legal/account pages use
 * `.site-header`; both should align the wordmark to the same page grid.
 */
:root {
  --cineplus-nav-inline-padding: clamp(18px, 4vw, 64px);
  --cp-header-h: 92px;
}

.site-header,
.stream-nav {
  padding-inline: var(--cineplus-nav-inline-padding);
}

.site-header {
  height: auto;
  min-height: var(--cp-header-h);
  padding-block: 12px;
}

.site-header__inner {
  width: 100%;
  max-width: none;
  min-height: 68px !important;
  padding: 0 !important;
}

/* One shared navbar language control: the flag is the dropdown trigger. */
.cp-language {
  display: none !important;
}

.flag-picker-native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: 0 !important;
  padding: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.flag-dropdown {
  position: relative;
  z-index: 120;
  flex: 0 0 auto;
}

.flag-dropdown__trigger {
  width: 58px;
  min-width: 58px;
  height: 44px;
  padding: 0 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 12px;
  background: rgba(10, 25, 43, .92);
  color: #fff;
  cursor: pointer;
}

.flag-dropdown img {
  display: block;
  width: 26px;
  height: 18px;
  object-fit: cover;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .16);
}

.flag-dropdown__chevron {
  width: 12px;
  height: 12px;
  display: grid;
  place-items: center;
  color: #c8d8e8;
  line-height: 0;
  transition: transform .18s ease;
}

.flag-dropdown__chevron svg {
  display: block;
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.flag-dropdown.is-open .flag-dropdown__chevron {
  transform: rotate(180deg);
}

.flag-dropdown__menu {
  position: absolute;
  top: calc(100% + 9px);
  inset-inline-end: 0;
  width: 178px;
  padding: 7px;
  background: #0b1728;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 13px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .55);
}

.flag-dropdown__menu[hidden] {
  display: none;
}

.flag-dropdown__menu button {
  width: 100%;
  min-height: 44px;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  gap: 12px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #fff;
  text-align: start;
  cursor: pointer;
}

.flag-dropdown__menu button:hover,
.flag-dropdown__menu button:focus-visible,
.flag-dropdown__menu button[aria-current="true"] {
  background: rgba(34, 143, 255, .18);
}

/* Match legacy-page navigation geometry to the catalog navbar. */
.site-header__nav {
  gap: clamp(12px, 2vw, 30px);
  margin-inline: auto;
}

.site-header__link {
  padding: 9px 0;
  font-weight: 700;
  white-space: nowrap;
}

.site-header__actions {
  gap: 9px;
}

.site-header__actions .icon-btn,
.site-header__actions .avatar-btn {
  width: 44px;
  height: 44px;
  margin: 0;
  border-width: 1px;
  border-radius: 50%;
  flex: 0 0 44px;
}

.site-header__actions .btn-primary {
  min-height: 44px;
  padding: 10px 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

/* Preserve the supplied CinePlus+ STREAM wordmark's native 2:1 proportions. */
.site-header__logo,
.stream-brand img,
.auth-brand img,
.creator-brand img,
.top-brand__logo,
.verify-logo,
.admin-brand__dashboard-logo {
  display: block;
  width: clamp(112px, 12vw, 150px) !important;
  height: auto !important;
  max-width: min(38vw, 100%);
  max-height: 68px;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  object-fit: contain !important;
  object-position: center;
}

.site-footer__logo,
.stream-footer > img,
.auth-footer > img,
footer > img[src*="cineplus-official-stream.png"] {
  display: block;
  width: clamp(92px, 10vw, 126px) !important;
  height: auto !important;
  max-width: min(38vw, 100%);
  max-height: 62px;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  object-fit: contain !important;
  object-position: center;
}

/* Shared V4.5 footer treatment, also used by the legal pages. */
.stream-footer {
  min-height: 150px;
  padding: 35px clamp(18px, 4vw, 64px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-top: 1px solid rgba(255, 255, 255, .14);
  background: #020711;
  color: #a9b8c9;
}

.stream-footer > div,
.stream-footer__socials {
  display: flex;
  align-items: center;
  justify-content: center;
}

.stream-footer > div { flex-wrap: wrap; gap: 22px; }
.stream-footer > div a { color: inherit; text-decoration: none; }
.stream-footer > div a:hover,
.stream-footer > div a:focus-visible { color: #65d8ff; }
.stream-footer > p { margin: 0; color: inherit; text-align: center; }
.stream-footer__socials { flex: 0 0 auto; gap: 10px; }
.stream-footer__socials a {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(101, 216, 255, .22);
  border-radius: 50%;
  background: rgba(8, 24, 42, .8);
  color: #c9e7f7;
  transition: color .18s ease, border-color .18s ease, background .18s ease, transform .18s ease;
}
.stream-footer__socials a:hover,
.stream-footer__socials a:focus-visible {
  color: #fff;
  border-color: #65d8ff;
  background: rgba(20, 138, 255, .18);
  transform: translateY(-2px);
}
.stream-footer__socials a:focus-visible { outline: 2px solid #65d8ff; outline-offset: 3px; }
.stream-footer__socials svg { display: block; width: 19px; height: 19px; fill: currentColor; }

@media (max-width: 640px) {
  :root {
    --cineplus-nav-inline-padding: 14px;
    --cp-header-h: 116px;
  }

  .site-header {
    padding-block: 10px;
  }

  .flag-dropdown__trigger {
    width: 52px;
    min-width: 52px;
    height: 40px;
  }

  .site-header__actions .icon-btn,
  .site-header__actions .avatar-btn {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
  }

  .site-header__logo,
  .stream-brand img,
  .auth-brand img,
  .creator-brand img,
  .top-brand__logo,
  .verify-logo,
  .admin-brand__dashboard-logo {
    width: clamp(100px, 32vw, 124px) !important;
    max-height: 58px;
  }

  .site-footer__logo,
  .stream-footer > img,
  .auth-footer > img,
  footer > img[src*="cineplus-official-stream.png"] {
    width: 108px !important;
    max-height: 54px;
  }

  .stream-footer { flex-direction: column; gap: 18px; text-align: center; }
  .stream-footer > div { gap: 14px; }
  .stream-footer__socials { gap: 12px; }
}

/* Keep the legacy fixed-style navbar in document flow so hero content cannot sit beneath it. */
.site-header {
  position: sticky !important;
  top: 0;
  inset-inline: auto;
}

.site-header ~ main {
  padding-block-start: 0 !important;
}

.site-header ~ main > :first-child {
  padding-block-start: clamp(28px, 4vw, 44px) !important;
}