/* ADS feedback system: shared field messages, notices and transient toasts. */
:root {
  --feedback-error: #a61b34;
  --feedback-error-border: rgba(190, 24, 93, 0.2);
  --feedback-error-bg: rgba(255, 247, 248, 0.96);
  --feedback-success: #087a55;
  --feedback-success-border: rgba(5, 150, 105, 0.2);
  --feedback-success-bg: rgba(242, 252, 247, 0.97);
  --feedback-warning: #9a5a05;
  --feedback-warning-border: rgba(217, 119, 6, 0.22);
  --feedback-warning-bg: rgba(255, 250, 235, 0.97);
  --feedback-info: #1769aa;
  --feedback-info-border: rgba(37, 99, 235, 0.18);
  --feedback-info-bg: rgba(244, 249, 255, 0.97);
}

.form-error:empty,
.facebook-hierarchy-error:empty,
.facebook-report-hierarchy-message:empty {
  display: none !important;
}

.form-error:not(:empty),
.facebook-hierarchy-error:not(:empty),
.facebook-report-hierarchy-message.error:not(:empty),
.reimport-error,
.reimport-warning {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  min-height: 36px !important;
  margin: 2px 0 0 !important;
  padding: 8px 10px 8px 35px !important;
  border: 1px solid var(--feedback-error-border) !important;
  border-radius: 10px !important;
  background: linear-gradient(135deg, rgba(255,255,255,.84), var(--feedback-error-bg)) !important;
  color: var(--feedback-error) !important;
  box-shadow: inset 3px 0 0 rgba(225, 29, 72, .68), 0 4px 14px rgba(78, 25, 40, .06) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.45 !important;
  text-align: left !important;
  overflow-wrap: anywhere;
  animation: feedback-message-enter 180ms cubic-bezier(.2,.75,.25,1) both;
}

.form-error:not(:empty)::before,
.facebook-hierarchy-error:not(:empty)::before,
.facebook-report-hierarchy-message.error:not(:empty)::before,
.reimport-error::before,
.reimport-warning::before {
  content: "";
  position: absolute;
  top: 9px;
  left: 10px;
  width: 16px;
  height: 16px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='black' stroke-width='1.8'/%3E%3Cpath d='M12 7.8v5.4M12 16.4h.01' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='black' stroke-width='1.8'/%3E%3Cpath d='M12 7.8v5.4M12 16.4h.01' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

#modal-root #applovin-design-add-form .form-error[data-tone="info"]:not(:empty) {
  border-color: var(--feedback-info-border) !important;
  background: linear-gradient(135deg, #fff, var(--feedback-info-bg)) !important;
  color: var(--feedback-info) !important;
  box-shadow: inset 3px 0 0 rgba(37, 99, 235, .55), 0 4px 14px rgba(24, 48, 78, .06) !important;
}

#login-screen .form-error:not(:empty) {
  min-height: 34px !important;
  margin: 0 !important;
  padding: 7px 10px 7px 34px !important;
  border-color: rgba(190, 24, 93, .19) !important;
  background: linear-gradient(135deg, rgba(255,255,255,.86), rgba(255,244,247,.82)) !important;
  color: #8f1d32 !important;
  box-shadow: inset 3px 0 0 rgba(225,29,72,.7), 0 7px 18px rgba(24,48,78,.09) !important;
  -webkit-backdrop-filter: blur(14px) saturate(135%);
  backdrop-filter: blur(14px) saturate(135%);
}

#login-screen .form-error:not(:empty)::before {
  top: 8px;
}

.facebook-auth-card > .form-error:not(:empty) {
  width: auto !important;
  max-width: 300px;
  min-height: 30px !important;
  margin: 0 !important;
  padding: 5px 8px 5px 29px !important;
  font-size: 11px !important;
}

.facebook-auth-card > .form-error:not(:empty)::before {
  top: 6px;
  left: 8px;
  width: 15px;
  height: 15px;
}

.notice,
.facebook-report-hierarchy-message:not(.error) {
  box-sizing: border-box;
  border: 1px solid var(--feedback-info-border) !important;
  border-radius: 10px !important;
  background: linear-gradient(135deg, #fff, var(--feedback-info-bg)) !important;
  color: var(--feedback-info) !important;
  box-shadow: inset 3px 0 0 rgba(37,99,235,.56), 0 4px 14px rgba(27,74,128,.05) !important;
}

.notice.success {
  border-color: var(--feedback-success-border) !important;
  background: linear-gradient(135deg, #fff, var(--feedback-success-bg)) !important;
  color: var(--feedback-success) !important;
  box-shadow: inset 3px 0 0 rgba(5,150,105,.56), 0 4px 14px rgba(7,88,61,.05) !important;
}

.notice.warning {
  border-color: var(--feedback-warning-border) !important;
  background: linear-gradient(135deg, #fff, var(--feedback-warning-bg)) !important;
  color: var(--feedback-warning) !important;
  box-shadow: inset 3px 0 0 rgba(217,119,6,.58), 0 4px 14px rgba(111,70,8,.05) !important;
}

.notice.danger {
  border-color: var(--feedback-error-border) !important;
  background: linear-gradient(135deg, #fff, var(--feedback-error-bg)) !important;
  color: var(--feedback-error) !important;
  box-shadow: inset 3px 0 0 rgba(225,29,72,.62), 0 4px 14px rgba(78,25,40,.05) !important;
}

.toast {
  --toast-tone: var(--feedback-info);
  --toast-tone-border: var(--feedback-info-border);
  --toast-tone-bg: var(--feedback-info-bg);
  display: grid !important;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  box-sizing: border-box;
  width: min(390px, calc(100vw - 32px)) !important;
  min-width: 0 !important;
  max-width: none !important;
  padding: 12px 14px !important;
  border: 1px solid var(--toast-tone-border) !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, rgba(255,255,255,.99), var(--toast-tone-bg)) !important;
  color: #1d2a39 !important;
  box-shadow: inset 3px 0 0 color-mix(in srgb, var(--toast-tone) 68%, transparent), 0 14px 38px rgba(24,48,78,.16), 0 3px 10px rgba(24,48,78,.08) !important;
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, 10px, 0) scale(.985);
  transition: opacity 160ms ease, transform 180ms cubic-bezier(.2,.75,.25,1), visibility 0s linear 180ms;
}

.toast.show {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translate3d(0, 0, 0) scale(1) !important;
  transition-delay: 0s;
}

.toast.success {
  --toast-tone: var(--feedback-success);
  --toast-tone-border: var(--feedback-success-border);
  --toast-tone-bg: var(--feedback-success-bg);
}

.toast.error {
  --toast-tone: var(--feedback-error);
  --toast-tone-border: var(--feedback-error-border);
  --toast-tone-bg: var(--feedback-error-bg);
}

.toast.warning {
  --toast-tone: var(--feedback-warning);
  --toast-tone-border: var(--feedback-warning-border);
  --toast-tone-bg: var(--feedback-warning-bg);
}

.toast.info {
  --toast-tone: var(--feedback-info);
  --toast-tone-border: var(--feedback-info-border);
  --toast-tone-bg: var(--feedback-info-bg);
}

.toast .toast-icon {
  display: grid !important;
  place-items: center;
  width: 34px !important;
  height: 34px !important;
  margin: 0 !important;
  border-radius: 10px;
  background: color-mix(in srgb, var(--toast-tone) 11%, white);
  color: var(--toast-tone) !important;
}

.toast .toast-icon svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.toast .toast-body {
  display: grid;
  min-width: 0;
  gap: 2px;
  padding-top: 1px;
}

.toast .toast-title {
  color: var(--toast-tone);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: .01em;
}

.toast .toast-copy {
  color: #3f4e60 !important;
  font-size: 12px !important;
  font-weight: 500;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

@keyframes feedback-message-enter {
  from { opacity: 0; transform: translate3d(0, -3px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@media (max-width: 600px) {
  .toast {
    width: calc(100vw - 24px) !important;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 9px;
    padding: 11px 12px !important;
  }

  .toast .toast-icon {
    width: 32px !important;
    height: 32px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .form-error:not(:empty),
  .facebook-hierarchy-error:not(:empty),
  .facebook-report-hierarchy-message:not(:empty),
  .toast {
    animation: none !important;
    transition: none !important;
  }
}