/* Trendyfy v0.5.14 — corrections for photo wizard only.
   Loaded after photo-create-v0513.css; no video or result-page changes. */
#modalRoot .photo-create-sheet,
#modalRoot .photo-create-sheet * { box-sizing: border-box; }

/* Reserve a real header row for Back / Close, then begin the stepper below it. */
#modalRoot .photo-create-sheet {
  width: min(calc(100vw - 14px), 520px) !important;
  max-width: 520px !important;
  max-height: min(calc(100dvh - var(--tg-popup-safe-top, 12px) - 10px), 880px) !important;
  padding: 0 17px !important;
  border-radius: 27px 27px 21px 21px !important;
  overflow: hidden !important;
  background: #fff !important;
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
}
#modalRoot .photo-create-sheet .sheet-handle {
  position: absolute !important;
  inset: 11px auto auto 50% !important;
  transform: translateX(-50%);
  margin: 0 !important;
  width: 42px !important;
  height: 4px !important;
  border-radius: 999px;
  z-index: 6;
}
#modalRoot .photo-create-sheet .modal-back.create-back,
#modalRoot .photo-create-sheet .modal-close {
  position: absolute !important;
  top: 17px !important;
  bottom: auto !important;
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  min-height: 42px !important;
  margin: 0 !important;
  padding: 10px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 50% !important;
  background: #fff !important;
  border: 1px solid #ece9fb !important;
  box-shadow: 0 5px 16px rgba(75,61,144,.08) !important;
  color: #15152c !important;
  z-index: 8 !important;
}
#modalRoot .photo-create-sheet .modal-back.create-back { left: 15px !important; right: auto !important; }
#modalRoot .photo-create-sheet .modal-close { right: 15px !important; left: auto !important; }
#modalRoot .photo-create-sheet .creation-stepper {
  display: flex !important;
  flex: 0 0 auto !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 0 !important;
  position: relative;
  width: 100% !important;
  height: 83px !important;
  min-height: 83px !important;
  margin: 70px 0 3px !important;
  padding: 0 3px 13px !important;
  overflow: visible !important;
}
#modalRoot .photo-create-sheet .creation-step-node {
  flex: 0 0 65px !important;
  width: 65px !important;
  min-width: 0 !important;
  max-width: 65px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 7px !important;
  margin: 0 !important;
  padding: 0 !important;
  position: relative !important;
  inset: auto !important;
}
#modalRoot .photo-create-sheet .creation-step-circle {
  position: static !important;
  width: 42px !important;
  height: 42px !important;
  flex: 0 0 42px !important;
  border: 3px solid white !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1 !important;
  font-size: 16px !important;
  display: grid !important;
  place-items: center !important;
}
#modalRoot .photo-create-sheet .creation-step-node small {
  position: static !important;
  display: block !important;
  text-align: center !important;
  font-size: 11px !important;
  line-height: 1.25 !important;
  margin: 0 !important;
  padding: 0 !important;
  white-space: nowrap !important;
}
#modalRoot .photo-create-sheet .creation-connector {
  flex: 1 1 0 !important;
  display: block !important;
  width: auto !important;
  min-width: 0 !important;
  margin: 20px 0 0 !important;
  padding: 0 !important;
  height: 2px !important;
  background: repeating-linear-gradient(90deg,#c5b9fb 0 3px,transparent 3px 9px) !important;
}
#modalRoot .photo-create-sheet .creation-connector i { display: none !important; }
#modalRoot .photo-create-sheet .creation-stage {
  flex: 1 1 auto !important;
  width: 100% !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: clip !important;
  scrollbar-width: none !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
#modalRoot .photo-create-sheet .creation-stage::-webkit-scrollbar { display: none !important; }
#modalRoot .photo-create-sheet .create-step-panel,
#modalRoot .photo-create-sheet .photo-create-panel { min-width: 0 !important; width: 100% !important; }
#modalRoot .photo-create-sheet .photo-create-panel .create-step-copy {
  margin: 3px 0 15px !important;
}
#modalRoot .photo-create-sheet .photo-create-panel .create-step-copy h2 {
  font-size: clamp(26px, 7.3vw, 33px) !important;
  line-height: 1.15 !important;
  margin: 0 !important;
}
#modalRoot .photo-create-sheet .photo-create-panel .create-step-copy .desc {
  font-size: 13px !important;
  line-height: 1.43 !important;
  margin: 7px 0 0 !important;
}

/* Return a compact photo picker; preview replaces the old icon inside the picker. */
#modalRoot .photo-create-sheet .photo-create-panel .flow-photo-inputs {
  display: grid !important;
  grid-template-columns: minmax(0,1fr) !important;
  gap: 9px !important;
  margin: 0 0 17px !important;
  width: 100% !important;
}
#modalRoot .photo-create-sheet .photo-create-panel .tf-photo-tile {
  position: relative !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 13px !important;
  min-height: 112px !important;
  height: auto !important;
  width: 100% !important;
  min-width: 0 !important;
  padding: 12px !important;
  margin: 0 !important;
  border: 1.5px dashed #cac0ff !important;
  border-radius: 17px !important;
  background: #f8f6ff !important;
  text-align: left !important;
  cursor: pointer;
  isolation: isolate;
}
#modalRoot .photo-create-sheet .photo-create-panel .tf-photo-tile.is-selected {
  border-color: #9378fc !important;
  background: #f5f2ff !important;
}
#modalRoot .photo-create-sheet .photo-create-panel .tf-photo-thumb {
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  flex: 0 0 78px !important;
  width: 78px !important;
  height: 86px !important;
  border: 1px solid #e6dfff;
  border-radius: 13px;
  background: #eeebff;
  overflow: hidden;
}
#modalRoot .photo-create-sheet .photo-create-panel .tf-photo-thumb__icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  color: #a48afc;
}
#modalRoot .photo-create-sheet .photo-create-panel .tf-photo-thumb__icon svg {
  width: 44px; height: 44px;
}
#modalRoot .photo-create-sheet .photo-create-panel .tf-photo-thumb__image {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  border-radius: 12px;
}
#modalRoot .photo-create-sheet .photo-create-panel .tf-photo-thumb__heic {
  font-size: 13px; color: #7554ee; font-weight: 800;
}
#modalRoot .photo-create-sheet .photo-create-panel .tf-photo-tile__copy {
  display: flex !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 3px !important;
  text-align: left !important;
}
#modalRoot .photo-create-sheet .photo-create-panel .tf-photo-tile__copy strong {
  display: block !important;
  font-size: 14px !important;
  color: #17142b !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  margin: 0 !important;
  padding: 0 !important;
}
#modalRoot .photo-create-sheet .photo-create-panel .tf-photo-tile__copy small {
  display: block !important;
  color: #7f85aa !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  line-height: 1.25 !important;
  text-wrap: pretty;
  margin: 0 !important;
}
#modalRoot .photo-create-sheet .photo-create-panel .tf-photo-tile__action {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  max-width: 100% !important;
  min-height: 32px !important;
  margin: 5px 0 0 !important;
  padding: 6px 12px !important;
  border-radius: 12px !important;
  border: 1px solid #d3c7ff !important;
  background: #fff !important;
  color: #6439f4 !important;
  font-weight: 750 !important;
  font-size: 12px !important;
  font-style: normal !important;
  white-space: normal !important;
  text-align: center !important;
  line-height: 1.25 !important;
  overflow-wrap: anywhere !important;
}
#modalRoot .photo-create-sheet .photo-create-panel .tf-photo-tile input[type=file] {
  position: absolute !important;
  inset: 0 !important;
  z-index: 3 !important;
  width: 100% !important;
  height: 100% !important;
  opacity: 0 !important;
  cursor: pointer !important;
}
#modalRoot .photo-create-sheet .photo-create-panel .tf-photo-tile:focus-within { outline: 2px solid #7450fb; outline-offset: 2px; }

/* Make controls a single shape. Older global input CSS caused double borders. */
#modalRoot .photo-create-sheet .photo-create-panel .photo-extra-fields {
  gap: 14px !important;
  margin: 0 0 12px !important;
}
#modalRoot .photo-create-sheet .photo-create-panel .tf-variable-field {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 0 !important;
  width: 100% !important;
  min-width: 0 !important;
}
#modalRoot .photo-create-sheet .photo-create-panel .tf-field-title {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
  align-items: baseline !important;
  margin: 0 0 4px !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  color: #191627 !important;
  overflow-wrap: anywhere;
}
#modalRoot .photo-create-sheet .photo-create-panel .tf-field-help {
  display: block !important;
  margin: 0 0 8px !important;
  color: #8285a4 !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1.4 !important;
}
#modalRoot .photo-create-sheet .photo-create-panel .tf-variable-control {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 50px !important;
  margin: 0 !important;
  padding: 0 12px !important;
  border: 1.5px solid #ddd7ff !important;
  border-radius: 13px !important;
  background: #fff !important;
  box-shadow: none !important;
  gap: 10px !important;
}
#modalRoot .photo-create-sheet .photo-create-panel .tf-variable-control:focus-within {
  border-color: #7955fa !important;
  box-shadow: 0 0 0 3px rgba(121,85,250,.11) !important;
}
#modalRoot .photo-create-sheet .photo-create-panel .tf-variable-control input:not([type=checkbox]),
#modalRoot .photo-create-sheet .photo-create-panel .tf-variable-control textarea,
#modalRoot .photo-create-sheet .photo-create-panel .tf-variable-control select {
  -webkit-appearance: none !important;
  appearance: none !important;
  display: block !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 47px !important;
  max-height: 160px !important;
  padding: 11px 0 !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: none !important;
  color: #1b1935 !important;
  font: 500 16px/1.35 inherit !important;
  font-size: 16px !important;
  font-family: inherit !important;
  line-height: 1.35 !important;
}
#modalRoot .photo-create-sheet .photo-create-panel .tf-variable-control textarea {
  min-height: 90px !important;
  resize: vertical !important;
}
#modalRoot .photo-create-sheet .photo-create-panel .tf-variable-control input::placeholder,
#modalRoot .photo-create-sheet .photo-create-panel .tf-variable-control textarea::placeholder {
  color: #a0a0b8 !important;
  opacity: 1;
}
#modalRoot .photo-create-sheet .photo-create-panel .tf-text-glyph {
  display: grid !important;
  flex: 0 0 28px !important;
  width: 28px !important;
  height: 28px !important;
  place-items: center !important;
  border-radius: 8px !important;
  background: #f3f0ff !important;
  color: #9186c0 !important;
  font: 700 17px Georgia,serif !important;
}
#modalRoot .photo-create-sheet .photo-create-panel .tf-select-control { padding-right: 12px !important; }
#modalRoot .photo-create-sheet .photo-create-panel .tf-select-arrow { flex: 0 0 auto; pointer-events: none; }
#modalRoot .photo-create-sheet .photo-create-panel .tf-toggle-field {
  flex-direction: row !important; align-items: center !important; justify-content: space-between !important;
}
#modalRoot .photo-create-sheet .photo-create-panel .tf-toggle-field .tf-switch input {
  position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; opacity: 0 !important;
}
#modalRoot .photo-create-sheet .photo-create-panel #previews,
#modalRoot .photo-create-sheet .photo-create-panel .selection-status { display: none !important; }
#modalRoot .photo-create-sheet .photo-create-panel .upload-legal-minimal { margin: 13px 0 12px !important; }
#modalRoot .photo-create-sheet .photo-create-panel .cta-bar.single-action {
  position: sticky !important;
  bottom: 0 !important;
  z-index: 6 !important;
  margin-top: auto !important;
  padding: 10px 0 max(9px,env(safe-area-inset-bottom,0px)) !important;
  background: linear-gradient(180deg,rgba(255,255,255,.85),#fff 30%) !important;
}
#modalRoot .photo-create-sheet .photo-create-panel .cta-bar .create-next {
  width: 100% !important;
  min-height: 53px !important;
  border-radius: 15px !important;
  border: 0 !important;
  background: linear-gradient(106deg,#9560ff,#603df5 61%,#4d64f7) !important;
  box-shadow: 0 8px 20px rgba(89,62,228,.16) !important;
  color: #fff !important;
}
#modalRoot .photo-create-sheet .photo-create-panel .cta-bar .create-next:disabled {
  background: #c7b4ff !important; box-shadow: none !important; opacity: 1 !important;
}
@media(max-width:360px){
  #modalRoot .photo-create-sheet { width: calc(100vw - 10px) !important; padding: 0 12px !important; }
  #modalRoot .photo-create-sheet .creation-step-node { flex-basis: 59px !important; max-width: 59px !important; }
  #modalRoot .photo-create-sheet .photo-create-panel .tf-photo-tile { gap: 10px !important; padding: 10px !important; }
  #modalRoot .photo-create-sheet .photo-create-panel .tf-photo-thumb { flex-basis: 68px !important; width: 68px !important; height: 78px !important; }
  #modalRoot .photo-create-sheet .photo-create-panel .create-step-copy .desc { font-size: 12px !important; }
}
@media(max-height:720px){
  #modalRoot .photo-create-sheet .creation-stepper { margin-top: 65px !important; height: 79px !important; min-height: 79px !important; }
  #modalRoot .photo-create-sheet .photo-create-panel .create-step-copy { margin-bottom: 12px !important; }
  #modalRoot .photo-create-sheet .photo-create-panel .tf-photo-tile { min-height: 97px !important; }
}


/* v0.5.15 — compact toggle stays inside its field, incl. narrow Telegram screens. */
#modalRoot .photo-create-sheet .photo-create-panel .tf-toggle-field {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 58px !important;
  align-items: center !important;
  column-gap: 10px !important;
  row-gap: 0 !important;
  width: 100% !important;
  min-width: 0 !important;
  padding: 3px 7px 3px 0 !important;
  margin-inline: 0 !important;
}
#modalRoot .photo-create-sheet .photo-create-panel .tf-toggle-field > div {
  grid-column: 1 !important;
  min-width: 0 !important;
  width: auto !important;
  max-width: 100% !important;
}
#modalRoot .photo-create-sheet .photo-create-panel .tf-toggle-field > .tf-switch {
  /* Reset global 'label' rules. This is a switch, not a full-width form field. */
  -webkit-appearance: none !important;
  appearance: none !important;
  box-sizing: border-box !important;
  display: block !important;
  position: relative !important;
  grid-column: 2 !important;
  justify-self: end !important;
  align-self: center !important;
  flex: none !important;
  width: 50px !important;
  min-width: 50px !important;
  max-width: 50px !important;
  height: 30px !important;
  min-height: 30px !important;
  max-height: 30px !important;
  margin: 0 !important;
  padding: 0 !important;
  inset: auto !important;
  transform: none !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  box-shadow: none !important;
  cursor: pointer;
}
#modalRoot .photo-create-sheet .photo-create-panel .tf-switch input[type="checkbox"] {
  position: absolute !important;
  inset: 0 !important;
  z-index: 2 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  opacity: 0 !important;
  cursor: pointer;
}
#modalRoot .photo-create-sheet .photo-create-panel .tf-switch-track {
  position: absolute !important;
  inset: 0 !important;
  box-sizing: border-box !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 999px !important;
  background: #e5e1f2 !important;
  border: 1px solid #ddd7ec !important;
  transition: background .2s ease, border-color .2s ease;
}
#modalRoot .photo-create-sheet .photo-create-panel .tf-switch-track::after {
  content: "" !important;
  position: absolute !important;
  top: 3px !important;
  left: 3px !important;
  display: block !important;
  width: 22px !important;
  height: 22px !important;
  border-radius: 50% !important;
  background: #fff !important;
  box-shadow: 0 2px 6px rgba(24, 21, 72, .17) !important;
  transform: translateX(0);
  transition: transform .2s ease;
}
#modalRoot .photo-create-sheet .photo-create-panel .tf-switch input:checked + .tf-switch-track {
  background: #7650ff !important;
  border-color: #7650ff !important;
}
#modalRoot .photo-create-sheet .photo-create-panel .tf-switch input:checked + .tf-switch-track::after {
  transform: translateX(20px) !important;
}
#modalRoot .photo-create-sheet .photo-create-panel .tf-switch:focus-within .tf-switch-track {
  outline: 2px solid #7550f5 !important;
  outline-offset: 3px !important;
}
/* SVG chevron: stable across iPhone/Android/desktop; native select remains accessible. */
#modalRoot .photo-create-sheet .photo-create-panel .tf-select-control {
  position: relative !important;
  padding-right: 8px !important;
}
#modalRoot .photo-create-sheet .photo-create-panel .tf-select-control select {
  -webkit-appearance: none !important;
  appearance: none !important;
  min-width: 0 !important;
  width: 100% !important;
  padding-right: 43px !important;
  cursor: pointer !important;
}
#modalRoot .photo-create-sheet .photo-create-panel .tf-select-arrow {
  position: absolute !important;
  top: 50% !important;
  right: 10px !important;
  transform: translateY(-50%) !important;
  box-sizing: border-box !important;
  display: grid !important;
  place-items: center !important;
  flex: none !important;
  width: 30px !important;
  height: 30px !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 0 !important;
  color: #6f4eef !important;
  border-radius: 9px !important;
  background: #f6f3ff !important;
  pointer-events: none !important;
}
#modalRoot .photo-create-sheet .photo-create-panel .tf-select-arrow svg {
  display: block !important;
  width: 19px !important;
  height: 19px !important;
  stroke: currentColor !important;
}
@media(max-width:360px) {
  #modalRoot .photo-create-sheet .photo-create-panel .tf-toggle-field {
    grid-template-columns: minmax(0,1fr) 54px !important;
    column-gap: 7px !important;
    padding-right: 5px !important;
  }
}
@media(prefers-reduced-motion:reduce) {
  #modalRoot .photo-create-sheet .photo-create-panel .tf-switch-track,
  #modalRoot .photo-create-sheet .photo-create-panel .tf-switch-track::after { transition: none !important; }
}