/* Create-listing "single screen" chrome: the inline RNAL field, the payout
 * card and the publish actions + fine print.
 * Replaces create-listing-publish-gate.css (the modal is gone). */

/* Top-of-page publish progress. One step per strictly-required field, so it
 * fills to 100% exactly when the Publicar button unlocks. Sits under the map's
 * faux-fullscreen (z-index 2147483000) on purpose. */
body.create-listing-page .cl-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2147482000;
  height: 3px;
  background: color-mix(in srgb, var(--theme-text) 12%, transparent);
  pointer-events: none;
}
body.create-listing-page .cl-progress__fill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: 0 999px 999px 0;
  background: linear-gradient(90deg, #6a84ff, #b45bff 58%, #ff3d7f);
  box-shadow: 0 0 12px rgba(122, 96, 255, 0.55);
  transition:
    width 0.45s cubic-bezier(0.22, 0.9, 0.24, 1),
    background 0.35s ease,
    box-shadow 0.35s ease;
}
body.create-listing-page .cl-progress.is-complete .cl-progress__fill {
  background: linear-gradient(90deg, #b81769, #e44c98);
  box-shadow: 0 0 14px rgba(205, 38, 121, 0.62);
}

/* What is still missing, right above the publish button. */
body.create-listing-page .cl-missing {
  margin: 0 0 8px;
  color: var(--theme-text);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  opacity: 0.6;
}
body.create-listing-page .cl-missing[hidden] {
  display: none;
}

/* "opcional" tag next to a field label. */
body.create-listing-page .cl-optional {
  font-size: 0.74rem;
  font-style: normal;
  font-weight: 600;
  opacity: 0.55;
}

/* Hint text shared by the location feedback + RNAL helper. */
body.create-listing-page .cl-hint {
  margin: 0;
  color: var(--theme-text);
  font-size: 0.8rem;
  line-height: 1.45;
  opacity: 0.62;
}

/* Inline Alojamento Local registration number. */
body.create-listing-page .cl-rnal {
  display: grid;
  gap: 5px;
  margin-top: 12px;
}
body.create-listing-page .cl-rnal[hidden] {
  display: none;
}
body.create-listing-page .cl-rnal__label {
  font-size: 0.86rem;
  font-weight: 700;
}
body.create-listing-page .cl-rnal__input {
  width: 100%;
  min-height: 46px;
  padding: 0 14px;
  border: 1px solid var(--liquid-glass-border);
  border-radius: 14px;
  background: var(--create-chip-bg);
  color: var(--theme-text);
  font: 600 0.94rem/1.3 inherit;
}
body.create-listing-page .cl-rnal__input:focus-visible {
  outline: 2px solid rgba(94, 120, 255, 0.48);
  outline-offset: 1px;
}
body.create-listing-page .cl-rnal__input.is-invalid {
  border-color: #e2686855;
  box-shadow: 0 0 0 3px #e2686822;
}

/* Payout card. */
body.create-listing-page .cl-payout {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
body.create-listing-page .cl-payout__copy {
  display: grid;
  gap: 3px;
  min-width: 0;
  flex: 1 1 220px;
}
body.create-listing-page .cl-payout__copy strong {
  font-size: 0.98rem;
}
body.create-listing-page .cl-payout__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0 20px;
  border: 1px solid var(--liquid-glass-border);
  border-radius: 999px;
  background: var(--create-chip-bg);
  color: var(--theme-text);
  font: 700 0.9rem/1 inherit;
  cursor: pointer;
}
body.create-listing-page .cl-payout__btn:is(:hover, :focus-visible) {
  outline: 0;
  border-color: rgba(94, 120, 255, 0.42);
}
body.create-listing-page .cl-payout__btn.is-connected {
  border-color: rgba(168, 52, 108, 0.5);
  color: #8f2e5d;
}
body.create-listing-page .cl-payout__btn:disabled {
  opacity: 0.7;
  cursor: default;
}
body.create-listing-page .cl-payout__spinner {
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: cl-payout-spin 0.8s linear infinite;
}
@keyframes cl-payout-spin {
  to { transform: rotate(360deg); }
}
body.create-listing-page .cl-payout__secure {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 10px 0 0;
  color: var(--theme-text);
  font-size: 0.76rem;
  opacity: 0.55;
}
body.create-listing-page .cl-payout__stripe {
  width: 42px;
  height: 18px;
}
body.create-listing-page .cl-payout__notice {
  margin: 10px 0 0;
  color: #d76b6b;
  font-size: 0.8rem;
  line-height: 1.4;
}

/* End-of-form actions — the single publish CTA on every screen size. (The old
 * fixed mobile bar was dead: create-listing-topbar.css display:none'd it.) */
body.create-listing-page .cl-actions {
  grid-column: 1;
  width: 100%;
  margin-top: 4px;
}
body.create-listing-page .cl-actions[hidden] {
  display: none;
}
body.create-listing-page .cl-actions__publish {
  position: relative;
  overflow: hidden;
  width: 100%;
  min-height: 52px;
  border-radius: 18px;
  transition:
    opacity 0.25s ease,
    filter 0.25s ease,
    box-shadow 0.25s ease;
}
body.create-listing-page .cl-actions__publish:disabled {
  opacity: 0.42;
  filter: saturate(0.3);
  box-shadow: none;
  cursor: not-allowed;
}

/* Plays once, the moment the last required field is filled. */
@keyframes cl-unlock-pop {
  0% { transform: scale(1); }
  38% { transform: scale(1.035); }
  100% { transform: scale(1); }
}
@keyframes cl-unlock-sheen {
  from { transform: translateX(-160%) skewX(-18deg); }
  to { transform: translateX(320%) skewX(-18deg); }
}
body.create-listing-page .cl-actions__publish.is-unlocked {
  animation: cl-unlock-pop 0.6s cubic-bezier(0.22, 0.9, 0.24, 1);
}
body.create-listing-page .cl-actions__publish.is-unlocked::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 38%;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0),
    rgba(255, 255, 255, 0.5),
    rgba(255, 255, 255, 0)
  );
  animation: cl-unlock-sheen 0.95s ease-out;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  body.create-listing-page .cl-progress__fill {
    transition: none;
  }
  body.create-listing-page .cl-actions__publish.is-unlocked {
    animation: none;
  }
  body.create-listing-page .cl-actions__publish.is-unlocked::after {
    display: none;
  }
}

/* Publish fine print + the pending-draft escape hatch. */
body.create-listing-page .cl-consent {
  margin: 8px 2px 0;
  color: var(--theme-text);
  font-size: 0.72rem;
  line-height: 1.4;
  text-align: center;
  opacity: 0.55;
}
body.create-listing-page .cl-consent a {
  color: inherit;
  text-decoration: underline;
}
body.create-listing-page .cl-later {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 9px 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--theme-text);
  font: 700 0.84rem/1.2 inherit;
  text-decoration: underline;
  opacity: 0.68;
  cursor: pointer;
}
body.create-listing-page .cl-later:is(:hover, :focus-visible) {
  opacity: 1;
  outline: 0;
}

:root[data-theme="night"] body.create-listing-page .cl-payout__btn.is-connected {
  color: #dc6fa4;
}