/* Malavia Beta Zero — mobile pilot interaction polish
   Scope: rating modal, meaningful motion, state badges, return anchors and
   narrow-screen overflow fixes. No product architecture or data contract changes. */

/* Small, meaningful motion. */
.fz-main > * {
  animation: mlv-page-enter 180ms ease-out both;
}

.mlv-poster-card,
.fz-poster-card {
  scroll-margin-top: 82px;
}

.mlv-poster-open,
.fz-poster-open,
.fz-btn,
.button,
.head-action,
.fz-pill,
.fz-tag {
  -webkit-tap-highlight-color: transparent;
}

.mlv-poster-wrap,
.fz-poster-wrap {
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.mlv-poster-img,
.fz-poster-img {
  transition: transform 220ms ease, filter 180ms ease, opacity 180ms ease;
}

.fz-btn,
.button,
.head-action,
.fz-pill,
.fz-tag,
.mlv-state-dot,
.fz-poster-state > span {
  transition: transform 130ms ease, background-color 150ms ease, border-color 150ms ease, color 150ms ease, opacity 150ms ease;
}

.fz-btn:active,
.button:active,
.head-action:active,
.fz-pill:active,
.fz-tag:active {
  transform: scale(.975);
}

@media (hover: hover) and (pointer: fine) {
  .mlv-poster-open:hover .mlv-poster-wrap,
  .fz-poster-open:hover .fz-poster-wrap {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(0,0,0,.28);
  }

  .mlv-poster-open:hover .mlv-poster-img,
  .fz-poster-open:hover .fz-poster-img {
    transform: scale(1.018);
  }
}

/* Catalog and personal-library state badges describe state rather than looking like action buttons. */
.mlv-state-dot svg,
.fz-poster-state svg,
.fz-rail-badge.is-watchlisted svg,
.fz-collection-overlay.is-watchlisted svg {
  width: 13px;
  height: 13px;
  display: block;
}

.mlv-state-dot.is-watchlisted,
.fz-poster-state .is-watchlisted,
.fz-rail-badge.is-watchlisted,
.fz-collection-overlay.is-watchlisted {
  color: #ffd36d;
  background: rgba(15,18,22,.90);
  border-color: rgba(244,174,43,.38);
}

.mlv-state-dot.is-watched,
.fz-poster-state .is-watched {
  animation: mlv-state-pop 220ms ease-out both;
}

/* Public person names are deliberately English-first while Persian remains searchable. */
.fz-person-name,
.fz-person-heading {
  direction: ltr;
  unicode-bidi: plaintext;
  letter-spacing: 0;
}

.fz-person-heading {
  text-align: left;
}

/* Rating summary trigger. Raw numeric values are intentionally absent. */
.fz-rating-trigger {
  width: 100%;
  min-height: 52px;
  padding: 9px 11px;
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  align-items: center;
  gap: 10px;
  text-align: right;
  cursor: pointer;
}

.fz-rating-trigger small {
  color: #9aa2ab;
}

.fz-rating-trigger b {
  justify-self: end;
  color: #ffd36d;
}

.fz-rating-trigger-mark {
  color: #747d87;
  font-size: 22px;
  line-height: 1;
  transform: rotate(180deg);
}

.fz-rating-trigger:hover,
.fz-rating-trigger:focus-visible {
  background: #1d2228;
}

/* Small centered rating dialog; mobile-safe and keyboard accessible via <dialog>. */
.fz-rating-dialog {
  width: min(400px, calc(100vw - 24px));
  max-width: calc(100vw - 24px);
  max-height: min(86vh, 650px);
  margin: auto;
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 18px;
  background: transparent;
  color: #f2ede4;
}

.fz-rating-dialog::backdrop {
  background: rgba(4,6,8,.74);
  backdrop-filter: blur(4px);
  animation: mlv-backdrop-enter 160ms ease-out both;
}

.fz-rating-dialog[open] {
  animation: mlv-rating-enter 190ms cubic-bezier(.2,.8,.2,1) both;
}

.fz-rating-dialog-card {
  position: relative;
  max-height: min(86vh, 650px);
  overflow-y: auto;
  padding: 21px 18px 17px;
  border: 1px solid rgba(244,174,43,.28);
  border-radius: 18px;
  background:
    radial-gradient(360px 150px at 50% -50px,rgba(244,174,43,.10),transparent 72%),
    #171b20;
  box-shadow: 0 28px 80px rgba(0,0,0,.52);
}

.fz-rating-close {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: #9aa2ab;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}

.fz-rating-close:hover,
.fz-rating-close:focus-visible {
  background: #242a31;
  color: #f2ede4;
}

.fz-rating-dialog-brand {
  width: 44px;
  height: 44px;
  margin: 0 auto 10px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(244,174,43,.28);
  border-radius: 12px;
  background: rgba(244,174,43,.06);
}

.fz-rating-dialog-brand img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.fz-rating-dialog h2 {
  margin: 0;
  text-align: center;
  font-size: 19px;
  line-height: 1.5;
}

.fz-rating-dialog-card > p {
  margin: 5px auto 15px;
  max-width: 310px;
  color: #9aa2ab;
  text-align: center;
  font-size: 11.5px;
  line-height: 1.8;
}

.fz-rating-options {
  display: grid;
  grid-template-columns: repeat(5,minmax(0,1fr));
  gap: 6px;
}

.fz-rating-options form {
  margin: 0;
  min-width: 0;
}

.fz-rating-option {
  width: 100%;
  min-height: 70px;
  padding: 8px 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 1px solid #303741;
  border-radius: 12px;
  background: #12161b;
  color: #d8d1c7;
  font-weight: 900;
  font-size: 11.5px;
  cursor: pointer;
  transition: transform 130ms ease, border-color 150ms ease, background-color 150ms ease, color 150ms ease;
}

.fz-rating-option:hover,
.fz-rating-option:focus-visible {
  border-color: rgba(244,174,43,.46);
  background: #1d2228;
  color: #ffd36d;
}

.fz-rating-option:active {
  transform: scale(.96);
}

.fz-rating-option.is-selected {
  border-color: rgba(244,174,43,.58);
  background: rgba(244,174,43,.11);
  color: #ffd36d;
}

.fz-rating-current {
  color: #9aa2ab;
  font-size: 8.5px;
  font-weight: 700;
  white-space: nowrap;
}

.fz-rating-remove {
  margin: 10px 0 0;
  text-align: center;
}

/* The review composer previously widened its flex header and caused RTL
   horizontal page scrolling on narrow phones. Keep it on its own row. */
@media (max-width: 820px) {
  .fz-reviews-section .fz-section-head {
    align-items: flex-start;
    flex-wrap: wrap;
    min-width: 0;
  }

  .fz-reviews-section .fz-section-head > div {
    flex: 1 1 auto;
    min-width: 0;
  }

  .fz-review-compose-toggle {
    max-width: 100%;
    min-width: 0;
  }

  .fz-review-compose-toggle[open] {
    flex: 1 0 100%;
    width: 100%;
  }

  .fz-review-compose-toggle[open] > summary {
    margin-inline-start: auto;
    width: max-content;
  }

  .fz-review-composer {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .fz-review-composer textarea,
  .fz-review-compose-footer {
    max-width: 100%;
    min-width: 0;
  }
}

@media (max-width: 430px) {
  .fz-rating-dialog-card {
    padding: 20px 12px 14px;
  }

  .fz-rating-options {
    gap: 4px;
  }

  .fz-rating-option {
    min-height: 66px;
    padding-inline: 2px;
    font-size: 10.5px;
  }
}

@keyframes mlv-page-enter {
  from { opacity: .72; transform: translateY(3px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes mlv-rating-enter {
  from { opacity: 0; transform: translateY(10px) scale(.975); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes mlv-backdrop-enter {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes mlv-state-pop {
  0% { transform: scale(.75); opacity: .4; }
  70% { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .fz-main > *,
  .fz-rating-dialog[open],
  .fz-rating-dialog::backdrop,
  .mlv-state-dot.is-watched,
  .fz-poster-state .is-watched {
    animation: none !important;
  }

  .mlv-poster-wrap,
  .fz-poster-wrap,
  .mlv-poster-img,
  .fz-poster-img,
  .fz-btn,
  .button,
  .head-action,
  .fz-pill,
  .fz-tag,
  .mlv-state-dot,
  .fz-poster-state > span,
  .fz-rating-option {
    transition: none !important;
  }
}