/* =============================================================================
   55-quick-add-modal.css  (v12.789 / renamed v12.793)

   Styling for the QUICK ADD MODAL — the poster long-press popout (Add to
   Library · Share · Add to Lists · Favorite) and its status-picker step.
   First used on "More Like This" but generic; paired with its JS module
   assets/public/js/57-quick-add-modal.js.

   The modal reuses the shared .media-profile-more-menu backdrop/sheet chrome;
   only the Quick-Add-specific bits live here.
   ========================================================================== */

.quick-add-modal {
  z-index: 2000001;
}
.quick-add-modal-sheet {
  flex-direction: column;
  align-items: center;
  gap: 18px;
  min-width: min(88vw, 340px);
  padding: 22px 22px 20px;
}
.quick-add-modal-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
}
.quick-add-modal-poster {
  width: 118px;
  aspect-ratio: 2 / 3;
  border-radius: 8px;
  object-fit: cover;
  display: block;
  box-shadow: 0 18px 42px rgba(0,0,0,0.42), inset 0 0 0 1px rgba(255,255,255,0.08);
}
.quick-add-modal-poster-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.82);
  font-size: 34px;
  font-weight: 600;
}
.quick-add-modal-title {
  max-width: 100%;
  color: #ffffff;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.2;
  text-align: center;
}
.quick-add-modal-sub {
  color: rgba(255,255,255,0.56);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0;
  text-align: center;
}
.quick-add-modal-row {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 8px;
  width: 100%;
}
.quick-add-modal-row .media-profile-more-menu-item {
  width: 72px;
}
.quick-add-modal-row .quick-add-action-btn {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.22);
  background: rgba(255,255,255,0.13);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), 0 4px 18px rgba(0,0,0,0.22);
  -webkit-backdrop-filter: blur(18px) saturate(1.8);
  backdrop-filter: blur(18px) saturate(1.8);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}
.quick-add-modal-row .quick-add-action-btn svg {
  width: 20px;
  height: 20px;
  display: block;
  fill: none;
  stroke: currentColor;
}
.quick-add-modal-row .quick-add-action-btn:active {
  transform: scale(0.96);
}
.quick-add-modal-row .quick-add-action-label {
  font-size: 11px;
  color: rgba(255,255,255,0.62);
  letter-spacing: 0;
  text-align: center;
  white-space: nowrap;
}
.quick-add-action-favorite.is-favorite {
  background: rgba(255,59,92,0.16);
  border-color: rgba(255,59,92,0.6);
  color: #ff3b5c;
}
.quick-add-action-favorite.is-favorite svg {
  fill: #ff3b5c;
  stroke: #ff3b5c;
}

/* --- Status-picker step (v12.789) ----------------------------------------- */
.quick-add-status-head {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}
.quick-add-status-back {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.08);
  color: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}
.quick-add-status-back:active { transform: scale(0.94); }
.quick-add-status-back svg { width: 18px; height: 18px; display: block; }
.quick-add-status-heading {
  flex: 1 1 auto;
  text-align: center;
  color: #ffffff;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0;
}
.quick-add-status-headspacer { flex: 0 0 auto; width: 32px; }
.quick-add-status-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}
.quick-add-status-choice {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  padding: 13px 16px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  color: #ffffff;
  cursor: pointer;
  text-align: left;
  transition: background 140ms ease, border-color 140ms ease, transform 140ms ease;
}
.quick-add-status-choice:active { transform: scale(0.985); background: rgba(255,255,255,0.11); }
.quick-add-status-choice-label {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0;
}
.quick-add-status-choice-detail {
  font-size: 12px;
  font-weight: 400;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0;
}
/* status accents mirroring the library dock */
.quick-add-status-choice.watching { border-color: rgba(122,162,255,0.42); }
.quick-add-status-choice.planned  { border-color: rgba(196,181,253,0.42); }
.quick-add-status-choice.paused   { border-color: rgba(255,196,127,0.42); }
.quick-add-status-choice.watched  { border-color: rgba(126,214,164,0.42); }