/* Subscription notices live in a standalone stylesheet so an unrelated
   malformed component rule cannot leave this critical UI unstyled. */
.subscription-limit-notice {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483647 !important;
  display: grid !important;
  visibility: hidden !important;
  place-items: start center;
  padding: max(14px, env(safe-area-inset-top)) 12px 12px;
  pointer-events: none;
  font-family: Vazirmatn, Inter, system-ui, sans-serif;
  color: #5b4300;
  direction: inherit;
}

.subscription-limit-notice.is-visible {
  visibility: visible !important;
}

.subscription-limit-notice__backdrop {
  position: fixed !important;
  inset: 0 !important;
  display: none !important;
  background: rgba(7, 14, 20, .68) !important;
  backdrop-filter: blur(4px);
  pointer-events: auto;
}

.subscription-limit-notice__panel {
  position: relative !important;
  inset: auto !important;
  z-index: 1;
  display: grid !important;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  width: min(720px, calc(100vw - 24px)) !important;
  margin: 0 !important;
  padding: 13px 15px !important;
  border: 2px solid #d6a900 !important;
  border-radius: 15px !important;
  background: #fff1a8 !important;
  color: #5b4300 !important;
  box-shadow: 0 14px 38px rgba(77, 57, 0, .28) !important;
  opacity: 0;
  transform: translateY(-140%);
  transition: transform .24s ease, opacity .24s ease;
  pointer-events: auto;
}

.subscription-limit-notice.is-visible .subscription-limit-notice__panel {
  opacity: 1;
  transform: translateY(0);
}

.subscription-limit-notice.is-violation .subscription-limit-notice__panel {
  border-color: #b42318 !important;
  background: #ffe3e0 !important;
  color: #7a1710 !important;
  box-shadow: 0 14px 38px rgba(122, 23, 16, .3) !important;
}

.subscription-limit-notice.is-violation .subscription-limit-notice__close {
  background: rgba(180, 35, 24, .12) !important;
  color: #7a1710 !important;
}

.subscription-limit-notice__title {
  display: block;
  margin: 0 0 3px;
  color: inherit;
  font-size: 15px;
  font-weight: 900;
}

.subscription-limit-notice p {
  margin: 0;
  color: inherit;
  font-size: 13px;
  line-height: 1.7;
  text-align: start;
}

.subscription-limit-notice__close,
.subscription-limit-notice__upgrade {
  box-sizing: border-box;
  font: inherit;
}

.subscription-limit-notice__close {
  display: grid;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  place-items: center;
  background: rgba(91, 67, 0, .1);
  color: #5b4300;
  cursor: pointer;
  font-size: 21px;
  line-height: 1;
}

.subscription-limit-notice__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.subscription-limit-notice__upgrade {
  display: inline-flex;
  min-height: 40px;
  padding: 0 15px;
  border-radius: 11px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-weight: 850;
  text-decoration: none;
  white-space: nowrap;
}

.subscription-limit-notice__upgrade {
  border: 1px solid #075db7;
  background: #0878df;
  color: #ffffff;
  box-shadow: 0 7px 18px rgba(8, 120, 223, .28);
}

/* The first locked action is a centered modal. */
.subscription-limit-notice.is-modal {
  place-items: center;
  padding: 16px;
}

.subscription-limit-notice.is-modal .subscription-limit-notice__backdrop {
  display: block !important;
}

.subscription-limit-notice.is-modal .subscription-limit-notice__panel {
  grid-template-columns: 30px minmax(0, 1fr);
  width: min(540px, calc(100vw - 32px)) !important;
  padding: 22px !important;
  border-color: #16814a !important;
  background: #f4fff8 !important;
  color: #173d2a !important;
  box-shadow: 0 24px 80px rgba(0, 0, 0, .34) !important;
  transform: translateY(20px) scale(.98);
}

.subscription-limit-notice.is-modal.is-visible .subscription-limit-notice__panel {
  transform: translateY(0) scale(1);
}

.subscription-limit-notice.is-modal .subscription-limit-notice__close {
  background: #e3f4ea;
  color: #173d2a;
}

.subscription-limit-notice.is-modal .subscription-limit-notice__actions {
  grid-column: 1 / -1;
}

@media (max-width: 600px) {
  .subscription-limit-notice__panel {
    grid-template-columns: 28px minmax(0, 1fr);
  }

  .subscription-limit-notice__actions {
    grid-column: 1 / -1;
    width: 100%;
  }

  .subscription-limit-notice__upgrade {
    flex: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .subscription-limit-notice__panel {
    transition: none;
  }
}