/* kftc-trailer.css — shared trailer dialog styling only. */
body.kftc-trailer-open { overflow: hidden; }
.kftc-trailer-trigger {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 10px 14px; border: 1px solid #82aca8;
  border-radius: 4px; background: #08191fd9; color: #ecf3ed;
  font: 600 13px/1.4 Arial, sans-serif; cursor: pointer;
}
.kftc-trailer-trigger:hover { background: #173236; border-color: #dccc93; }
.kftc-trailer-trigger svg { width: 19px; height: 19px; flex: none; }
.kftc-trailer-trigger:focus-visible, .kftc-trailer-dialog button:focus-visible {
  outline: 3px solid #8de0d4; outline-offset: 3px;
}
.kftc-trailer-dialog {
  padding: 0;
  border: none;
  border-radius: 8px;
  background: #0a0a0a;
  color: #f4f4f4;
  max-width: none;
  max-height: calc(100svh - 24px);
  max-height: calc(100dvh - 24px);
  width: min(460px, calc(100% - 24px));
  margin: auto;
  overflow: hidden;
  text-align: left;
  overscroll-behavior: contain;
}

.kftc-trailer-dialog::backdrop {
  background: rgba(0, 0, 0, 0.72);
}

.kftc-trailer-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-height: inherit;
  padding: env(safe-area-inset-top, 0) env(safe-area-inset-right, 0)
    env(safe-area-inset-bottom, 0) env(safe-area-inset-left, 0);
  border: 1px solid rgba(212, 175, 55, 0.35);
  border-radius: 8px;
  overflow: hidden;
}

.kftc-trailer-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 62px;
  padding: 8px 10px 8px 16px;
  border-bottom: 1px solid rgba(64, 224, 208, 0.18);
}

.kftc-trailer-dialog .kftc-trailer-title {
  margin: 0;
  font: 500 19px/1.2 Georgia, serif;
  letter-spacing: 0;
  color: #f4f4f4;
}

.kftc-trailer-sub {
  font-size: 0.8rem;
  color: #a8a8a8;
  letter-spacing: 0;
  margin-right: auto;
}

.kftc-trailer-close {
  width: 44px;
  height: 44px;
  min-width: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid rgba(212, 175, 55, 0.4);
  border-radius: 8px;
  color: #f4f4f4;
  cursor: pointer;
}

.kftc-trailer-close:hover,
.kftc-trailer-close:focus-visible {
  border-color: rgba(64, 224, 208, 0.6);
}

.kftc-trailer-close svg {
  width: 20px;
  height: 20px;
}

.kftc-trailer-stage {
  position: relative;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
  min-height: 0;
}

.kftc-trailer-video {
  width: 100%;
  height: min(720px, calc(100svh - 112px - env(safe-area-inset-top) - env(safe-area-inset-bottom)));
  height: min(720px, calc(100dvh - 112px - env(safe-area-inset-top) - env(safe-area-inset-bottom)));
  object-fit: contain;
  background: #000;
  display: block;
}

@media (max-height: 480px) and (orientation: landscape) {
  .kftc-trailer-dialog {
    width: min(680px, calc(100% - 32px));
  }
}

.kftc-trailer-status {
  position: absolute;
  top: 37%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.78rem;
  color: #d4af37;
  background: rgba(0, 0, 0, 0.6);
  padding: 0.25rem 0.6rem;
  border-radius: 8px;
  text-align: center;
  max-width: calc(100% - 32px);
  pointer-events: none;
}

.kftc-trailer-retry {
  position: absolute;
  top: 52%;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.4rem 0.9rem;
  font-size: 0.8rem;
  background: #111;
  color: #f4f4f4;
  border: 1px solid rgba(64, 224, 208, 0.5);
  border-radius: 8px;
  cursor: pointer;
  min-height: 44px;
}

.kftc-trailer-retry:hover,
.kftc-trailer-retry:focus-visible {
  border-color: #d4af37;
}
.kftc-trailer-status[hidden], .kftc-trailer-retry[hidden] { display: none; }
@media (forced-colors: active) {
  .kftc-trailer-dialog, .kftc-trailer-trigger, .kftc-trailer-dialog button { border: 2px solid ButtonText; }
}