/* ==========================================================================
   Screening pass pages: Watch (pay), Sign In extras and My Film.
   Built on the studio styles in style.css.
   ========================================================================== */

/* Header account menu ------------------------------------------------------- */

.account-menu {
  position: relative;
}

.account-menu-btn {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  max-width: 240px;
  padding: 0;
  background: none;
  border: 0;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.75);
  cursor: pointer;
  transition: color var(--t-fast);
}

.account-menu-btn:hover,
.account-menu-btn[aria-expanded="true"] {
  color: #FFFFFF;
}

.account-menu-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-menu-chevron {
  flex-shrink: 0;
  transition: transform var(--t-fast);
}

.account-menu-btn[aria-expanded="true"] .account-menu-chevron {
  transform: rotate(180deg);
}

.account-menu-panel {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  width: max-content;
  min-width: 200px;
  max-width: 280px;
  padding: 0.4rem;
  background: rgba(14, 20, 19, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
}

.account-menu-panel[hidden] {
  display: none;
}

.account-menu-email {
  display: block;
  padding: 0.55rem 0.75rem 0.65rem;
  margin-bottom: 0.3rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.8rem;
  color: rgba(247, 244, 238, 0.55);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.account-menu-link {
  display: block;
  padding: 0.6rem 0.75rem;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
}

.account-menu-link:hover,
.account-menu-link:focus-visible {
  background: rgba(255, 255, 255, 0.06);
  color: #FFFFFF;
}

/* On phones and tablets the greeting heads the menu overlay. */
.nav-item-mobile-account {
  display: none;
}

@media (max-width: 1080px) {
  .nav-menu li.nav-item-mobile-account {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 0 1.25rem;
    max-width: 440px;
    margin: 0 0 0.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 0.95rem;
    color: rgba(247, 244, 238, 0.6);
  }

  .nav-account-signout {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--accent-gold);
    font-weight: 600;
  }
}

/* Safari notice -------------------------------------------------------------- */

.safari-notice {
  position: fixed;
  left: 50%;
  bottom: 1.5rem;
  z-index: 1100;
  display: flex;
  align-items: center;
  gap: 1.25rem;
  width: min(560px, calc(100vw - 2rem));
  padding: 1rem 1.25rem;
  background: #0E1413;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.55);
  color: rgba(247, 244, 238, 0.75);
  font-family: var(--font-sans);
  font-size: 0.9rem;
  line-height: 1.5;
  transform: translateX(-50%);
}

.safari-notice[hidden] {
  display: none;
}

.safari-notice-text {
  flex: 1;
  min-width: 0;
}

.safari-notice strong {
  display: block;
  margin-bottom: 0.15rem;
  font-size: 1rem;
  font-weight: 600;
  color: #FFFFFF;
}

.safari-notice p {
  margin: 0;
}

.safari-notice-ok {
  flex-shrink: 0;
  min-height: 44px;
  padding: 0 1.35rem;
  background: var(--accent-terracotta);
  border: 0;
  border-radius: 10px;
  font: inherit;
  font-weight: 600;
  color: #FFFFFF;
  cursor: pointer;
}

.safari-notice-ok:hover {
  background: var(--accent-terracotta-hover);
}

/* WordPress toolbar ---------------------------------------------------------- */
/* Signed in admins get WordPress's toolbar across the top (32px, 46px on small screens), and
   WordPress moves the page down for it. The fixed header and the menu overlay don't move with
   the page, so they move here. */

.admin-bar .site-header {
  top: 32px;
}

/* The blur on a scrolled header would pin the overlay to the header instead of the screen. */
.admin-bar .site-header.menu-open {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

@media (max-width: 1080px) {
  .admin-bar .nav-menu {
    padding-top: calc(32px + 76px + env(safe-area-inset-top, 0px) + 1.5rem);
  }
}

@media screen and (max-width: 782px) {
  .admin-bar .site-header {
    top: 46px;
  }

  .admin-bar .nav-menu {
    padding-top: calc(46px + 76px + env(safe-area-inset-top, 0px) + 1.5rem);
  }
}

/* On phones WordPress lets the toolbar scroll away, which would leave a gap above the header. */
@media screen and (max-width: 600px) {
  html #wpadminbar {
    position: fixed;
  }
}

/* Contact email -------------------------------------------------------------- */
/* The address is long, so on phones it wraps instead of running off the page. The theme's own
   copies mark the word breaks with <wbr>; the legal pages and the settings text can't. */

.letter-inline-email,
.direct-email-address,
.footer-email-badge,
.legal-content-prose a,
.platform-choice-item span,
.studio-alert-banner,
.studio-switch a,
.film-help a,
.film-player-message p {
  word-break: normal;
  overflow-wrap: anywhere;
}

/* On small phones the Connect cards' buttons used to push the cards past the screen edge. */
@media (max-width: 520px) {
  .connect-action-cards-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .connect-feature-card {
    padding: 1.5rem;
  }

  .feature-card-links .cinema-btn {
    white-space: normal;
  }

  .direct-email-actions {
    flex-wrap: wrap;
  }
}

.studio-submit-pay {
  background: var(--accent-terracotta);
}

.studio-submit-pay:hover {
  background: var(--accent-terracotta-hover);
}

a.studio-submit-btn {
  text-decoration: none;
}

.studio-submit-btn:disabled {
  opacity: 0.7;
  cursor: wait;
}

.studio-alert-banner a,
.studio-switch a,
.pass-fineprint a {
  color: var(--accent-gold);
  font-weight: 600;
  text-decoration: none;
}

.studio-switch {
  margin-top: 1.25rem;
  font-size: 0.88rem;
  text-align: center;
  color: rgba(247, 244, 238, 0.65);
}

.pass-summary {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1rem 1.25rem;
  margin-bottom: 1.75rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
}

.pass-summary-price {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  color: #FFFFFF;
}

.pass-summary-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.86rem;
  line-height: 1.65;
  color: rgba(247, 244, 238, 0.7);
}

.pass-fineprint {
  margin: -0.35rem 0 0;
  font-size: 0.8rem;
  line-height: 1.5;
  text-align: center;
  color: rgba(247, 244, 238, 0.5);
}

/* My Film ------------------------------------------------------------------ */

.film-welcome {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.75rem;
  padding: 0.9rem 1.2rem;
  margin-bottom: 1.25rem;
  border-radius: 10px;
  border: 1px solid rgba(34, 197, 94, 0.35);
  background: rgba(34, 197, 94, 0.12);
  font-size: 0.92rem;
  color: #BBF7D0;
}

.film-welcome strong {
  color: #4ADE80;
}

.film-player-message {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 2rem;
  text-align: center;
  color: rgba(247, 244, 238, 0.75);
}

.film-player-message h2 {
  margin: 0;
  font-size: clamp(1.25rem, 2.4vw, 1.75rem);
  color: #FFFFFF;
}

.film-player-message p {
  margin: 0;
  max-width: 34rem;
  font-size: 0.95rem;
  line-height: 1.6;
}

.film-player-message .cinema-btn {
  margin-top: 0.5rem;
}

.film-details {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem 2rem;
  margin-top: 1.75rem;
}

.film-title {
  margin: 0;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 800;
  color: #FFFFFF;
}

.film-meta {
  margin: 0.35rem 0 0;
  font-size: 0.92rem;
  color: rgba(247, 244, 238, 0.6);
}

.film-help a {
  color: var(--accent-gold);
  font-weight: 600;
  text-decoration: none;
}

.film-help {
  margin: 1.25rem 0 0;
  font-size: 0.85rem;
  line-height: 1.6;
  color: rgba(247, 244, 238, 0.5);
}

/* On phones the 16:9 box is too short for a message, so let it grow. */
@media (max-width: 600px) {
  .screening-aspect-16-9:has(.film-player-message) {
    height: auto;
    padding-bottom: 0;
  }

  .film-player-message {
    position: relative;
    min-height: 260px;
  }
}