/* Shared long-video and short-drama unlock dialog layout. */
:is(.pc-long-detail-page, .pc-drama-detail-page, .mobile-short-drama-detail-page) .video-unlock-dialog { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; }
:is(.pc-long-detail-page, .pc-drama-detail-page, .mobile-short-drama-detail-page) .video-unlock-dialog[hidden],
:is(.pc-long-detail-page, .pc-drama-detail-page, .mobile-short-drama-detail-page) .video-unlock-dialog__condition[hidden] { display: none !important; }
:is(.pc-long-detail-page, .pc-drama-detail-page, .mobile-short-drama-detail-page) .video-unlock-dialog__backdrop { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: rgba(0,0,0,.72); }
:is(.pc-long-detail-page, .pc-drama-detail-page, .mobile-short-drama-detail-page) .video-unlock-dialog__stack { position: relative; display: flex; align-items: center; flex-direction: column; gap: 24px; }
:is(.pc-long-detail-page, .pc-drama-detail-page, .mobile-short-drama-detail-page) .video-unlock-dialog__panel { width: 400px; overflow: hidden; border-radius: 12px; background: var(--pc-surface); color: var(--pc-text); }
:is(.pc-long-detail-page, .pc-drama-detail-page, .mobile-short-drama-detail-page) .video-unlock-dialog__content { padding: 32px 24px 20px; }
:is(.pc-long-detail-page, .pc-drama-detail-page, .mobile-short-drama-detail-page) .video-unlock-dialog__title { margin: 0 0 18px; font-size: 20px; line-height: 28px; }
:is(.pc-long-detail-page, .pc-drama-detail-page, .mobile-short-drama-detail-page) .video-unlock-dialog__condition p { margin: 8px 0; color: var(--pc-text-soft); font-size: 16px; line-height: 22px; }
:is(.pc-long-detail-page, .pc-drama-detail-page, .mobile-short-drama-detail-page) .video-unlock-dialog__footer { display: flex; height: 92px; padding: 24px; gap: 12px; }
:is(.pc-long-detail-page, .pc-drama-detail-page, .mobile-short-drama-detail-page) .video-unlock-dialog__button { display: inline-flex; height: 44px; flex: 1; align-items: center; justify-content: center; border: 0; border-radius: 8px; background: var(--pc-accent); color: #111; cursor: pointer; }
:is(.pc-long-detail-page, .pc-drama-detail-page, .mobile-short-drama-detail-page) .video-unlock-dialog__button--secondary { background: rgba(255,255,255,.1); color: var(--pc-text); }
:is(.pc-long-detail-page, .pc-drama-detail-page, .mobile-short-drama-detail-page) .video-unlock-dialog__close { width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; }
:is(.pc-long-detail-page, .pc-drama-detail-page, .mobile-short-drama-detail-page) .video-unlock-dialog__close img { width: 36px; height: 36px; }

/* Long-video unlock variants, grounded from Figma 45734:217083 / 45744:218082. */
:is(.pc-long-detail-page, .pc-drama-detail-page, .mobile-short-drama-detail-page) .video-unlock-dialog__panel:focus { outline: none; }
:is(.pc-long-detail-page, .pc-drama-detail-page, .mobile-short-drama-detail-page) .video-unlock-dialog__content {
  box-sizing: border-box;
  height: 174px;
  padding: 32px 24px 0;
  text-align: center;
}
:is(.pc-long-detail-page, .pc-drama-detail-page, .mobile-short-drama-detail-page) .video-unlock-dialog[data-video-unlock-active-condition="coin"] .video-unlock-dialog__content { height: 208px; }
:is(.pc-long-detail-page, .pc-drama-detail-page, .mobile-short-drama-detail-page) .video-unlock-dialog__title { margin: 0 0 12px; }
:is(.pc-long-detail-page, .pc-drama-detail-page, .mobile-short-drama-detail-page) .video-unlock-dialog__divider { height: 1px; margin-bottom: 11px; background: rgba(255,255,255,.08); }
:is(.pc-long-detail-page, .pc-drama-detail-page, .mobile-short-drama-detail-page) .video-unlock-dialog__condition { display: flex; flex-direction: column; gap: 12px; }
:is(.pc-long-detail-page, .pc-drama-detail-page, .mobile-short-drama-detail-page) .video-unlock-dialog__condition p { margin: 0; }
:is(.pc-long-detail-page, .pc-drama-detail-page, .mobile-short-drama-detail-page) .video-unlock-dialog__balance { text-align: center; }

@media (max-width: 768px), (max-height: 768px) and (orientation: landscape) and (hover: none) and (pointer: coarse) {
  body.has-video-unlock-dialog {
    overflow: hidden;
  }

  :is(.pc-long-detail-page, .pc-drama-detail-page, .mobile-short-drama-detail-page) .video-unlock-dialog[hidden],
  :is(.pc-long-detail-page, .pc-drama-detail-page, .mobile-short-drama-detail-page) .video-unlock-dialog__condition[hidden] {
    display: none;
  }

  :is(.pc-long-detail-page, .pc-drama-detail-page, .mobile-short-drama-detail-page) .video-unlock-dialog {
    position: fixed;
    z-index: 1600;
    inset: 0;
    display: flex;
    min-height: 100vh;
    min-height: 100dvh;
    align-items: center;
    justify-content: center;
    padding: max(24px, env(safe-area-inset-top)) 32px max(24px, env(safe-area-inset-bottom));
  }

  :is(.pc-long-detail-page, .pc-drama-detail-page, .mobile-short-drama-detail-page) .video-unlock-dialog__backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
  }

  :is(.pc-long-detail-page, .pc-drama-detail-page, .mobile-short-drama-detail-page) .video-unlock-dialog__stack {
    position: relative;
    z-index: 1;
    display: flex;
    width: min(311px, calc(100vw - 64px));
    flex-direction: column;
    align-items: center;
    gap: 24px;
    transform: translateY(20px);
  }

  :is(.pc-long-detail-page, .pc-drama-detail-page, .mobile-short-drama-detail-page) .video-unlock-dialog__panel {
    width: 100%;
    overflow: hidden;
    border-radius: 12px;
    background: #0d0f10;
    color: rgba(255, 255, 255, 0.9);
    outline: none;
  }

  :is(.pc-long-detail-page, .pc-drama-detail-page, .mobile-short-drama-detail-page) .video-unlock-dialog__content {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 32px 24px 0;
  }

  :is(.pc-long-detail-page, .pc-drama-detail-page, .mobile-short-drama-detail-page) .video-unlock-dialog__title {
    margin: 0;
    color: rgba(255, 255, 255, 0.9);
    font: 500 20px/28px "PingFang SC", sans-serif;
    text-align: center;
  }

  :is(.pc-long-detail-page, .pc-drama-detail-page, .mobile-short-drama-detail-page) .video-unlock-dialog__divider {
    width: 100%;
    height: 1px;
    background: rgba(255, 255, 255, 0.05);
  }

  :is(.pc-long-detail-page, .pc-drama-detail-page, .mobile-short-drama-detail-page) .video-unlock-dialog__condition {
    display: flex;
    flex-direction: column;
    gap: 8px;
    color: rgba(255, 255, 255, 0.55);
    font: 400 16px/22px "PingFang SC", sans-serif;
  }

  :is(.pc-long-detail-page, .pc-drama-detail-page, .mobile-short-drama-detail-page) .video-unlock-dialog__condition p {
    margin: 0;
  }

  :is(.pc-long-detail-page, .pc-drama-detail-page, .mobile-short-drama-detail-page) .video-unlock-dialog__condition strong {
    color: #e9b54b;
    font-weight: 400;
  }

  :is(.pc-long-detail-page, .pc-drama-detail-page, .mobile-short-drama-detail-page) .video-unlock-dialog__balance {
    align-self: center;
  }

  :is(.pc-long-detail-page, .pc-drama-detail-page, .mobile-short-drama-detail-page) .video-unlock-dialog__footer {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 24px;
  }

  :is(.pc-long-detail-page, .pc-drama-detail-page, .mobile-short-drama-detail-page) .video-unlock-dialog__button {
    display: inline-flex;
    height: 44px;
    padding: 0 24px;
    border: 0;
    border-radius: 999px;
    align-items: center;
    justify-content: center;
    font: 500 16px/22px "PingFang SC", sans-serif;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
  }

  :is(.pc-long-detail-page, .pc-drama-detail-page, .mobile-short-drama-detail-page) .video-unlock-dialog__button--secondary {
    flex: 0 0 auto;
    background: rgba(255, 255, 255, 0.1);
    color: #a6a6a6;
  }

  :is(.pc-long-detail-page, .pc-drama-detail-page, .mobile-short-drama-detail-page) .video-unlock-dialog__button--primary {
    flex: 1 1 auto;
    min-width: 0;
    background: #f5bd43;
    color: #292929;
  }

  :is(.pc-long-detail-page, .pc-drama-detail-page, .mobile-short-drama-detail-page) .video-unlock-dialog__button:focus-visible,
  :is(.pc-long-detail-page, .pc-drama-detail-page, .mobile-short-drama-detail-page) .video-unlock-dialog__close:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
  }

  :is(.pc-long-detail-page, .pc-drama-detail-page, .mobile-short-drama-detail-page) .video-unlock-dialog__close {
    display: flex;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    background: transparent;
    cursor: pointer;
  }

  :is(.pc-long-detail-page, .pc-drama-detail-page, .mobile-short-drama-detail-page) .video-unlock-dialog__close img {
    display: block;
    width: 36px;
    height: 36px;
  }

}

body.has-short-drama-vip-dialog { overflow: hidden; }
/* Episode cost descriptions can wrap; never clip the real ticket/coin amounts. */
:is(.pc-drama-detail-page, .mobile-short-drama-detail-page) .video-unlock-dialog__content { height: auto; }
:is(.pc-drama-detail-page, .mobile-short-drama-detail-page) .video-unlock-dialog[data-video-unlock-active-condition="coin"] .video-unlock-dialog__content { height: auto; }
:is(.pc-drama-detail-page, .mobile-short-drama-detail-page) .video-unlock-dialog__button:disabled { cursor: not-allowed; opacity: .55; }