/* Pro on the panel page and the website (slices P1, P3): the reference's
   website styles, read from its JSX (ProModePage L43–L541; Hnt ix:158368–158500;
   Gnt ix:158640–158990; the account section ix:156020–156518). */

/* The windows: MUI's dialog with its ✕ (ix:158656–158672). */
.pro-dialog {
  width: min(430px, calc(100vw - 24px));
}

.pro-dialog.pro-prepayment {
  width: min(470px, calc(100vw - 24px));
}

.pro-dialog-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.pro-dialog-title:empty {
  margin: 0;
}

.pro-dialog-close {
  flex: 0 0 auto;
  margin: -6px -8px 0 auto;
  padding: 6px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text);
  cursor: pointer;
}

.pro-dialog-close:hover {
  background: var(--hover);
}

.pro-dialog-actions {
  justify-content: center;
  padding-bottom: 4px;
}

/* The payment's wait: a round box with the spinner, no frame (Eue, ix:158502–158545). */
.pro-dialog.pro-loading {
  width: 80px;
  height: 80px;
  padding: 0;
  border-radius: 300px;
  background: color-mix(in srgb, var(--surface-raised) 73.3%, transparent);
  display: grid;
  place-items: center;
}

.pro-loading .pro-dialog-head {
  display: none;
}

.pro-loading .pro-dialog-body {
  display: grid;
  place-items: center;
  opacity: 0.5;
}

/* The picture at the top: 220 px, 160 px on a narrow screen (ProModePage L117–L127). */
.pro-art {
  display: block;
  width: 160px;
  height: auto;
  max-width: 100%;
  margin: 0 auto 8px;
}

.pro-accent {
  color: oklch(from var(--wovia-yellow) min(l, var(--max-lightness, 1)) c h);
}

.pro-intro ul,
.pro-features {
  line-height: 1.5em;
  padding-inline-start: 20px;
}

.pro-feature {
  margin-bottom: 3px;
}

/* The plans (ProModePage L305–L451). */
.pro-plans {
  display: flex;
  flex-direction: column;
  margin: 12px auto 0;
  padding: 0 12px 12px;
}

.pro-plans.is-held {
  border: 1px solid oklch(from #ffa500 min(l, var(--max-lightness, 1)) c h);
  border-radius: 20px;
  padding-top: 8px;
}

.pro-plans-refusal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding-bottom: 4px;
  color: oklch(from orange min(l, var(--max-lightness, 1)) c h);
  text-align: center;
}

.pro-plans-label {
  padding: 4px 0 10px;
  text-align: center;
  opacity: 0.5;
}

.pro-plans-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.pro-plan {
  flex-direction: column;
  min-width: 0;
  padding: 8px 2px;
  text-transform: none;
}

.pro-plan-price {
  padding-top: 4px;
  color: #9fffb0;
  font-weight: 700;
  line-height: 1.2;
  max-width: 100%;
  overflow-wrap: anywhere;
  white-space: normal;
}

.pro-plan:disabled .pro-plan-price {
  color: grey;
}

.pro-plans-closed,
.pro-page-open {
  margin: 12px auto 0;
  text-align: center;
}

.pro-plans-problem {
  margin: 10px 0 0;
  color: var(--danger, #ef5350);
  text-align: center;
}

/* The page (ProModePage L524–L541). */
.pro-page {
  max-width: 720px;
  margin: 0 auto;
  padding: 20px 24px 60px;
}

.pro-page .pro-art {
  width: 220px;
}

.pro-page-features {
  display: flex;
  flex-direction: column;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto;
}

.pro-page-plans .pro-plans {
  max-width: 720px;
  margin: 24px auto 60px;
  padding: 20px 20px 12px;
}

.pro-block-title {
  margin: 12px 0 4px;
  font-weight: 600;
}

.pro-block-line {
  display: flex;
  gap: 8px;
  margin: 4px 0 4px 20px;
}

/* The badges: Free and Basic blue, Pro in the brand's yellow where the reference has magenta (ProModePage L43–L78;
   ix:156090–156110), its word dark to be read on it. */
.pro-pill {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  min-width: 45px;
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--on-accent);
  font-size: 0.9em;
  font-weight: 700;
  text-decoration: none;
  text-transform: uppercase;
}

.pro-pill.is-free {
  background: #3ab2cb;
}

.pro-pill.is-pro {
  background: var(--wovia-yellow);
  color: var(--inverse);
}

/* Cài đặt › Thông tin tài khoản (ix:156230–156518). */
.pro-badge-slot:empty {
  display: none;
}

.pro-account {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 750px;
  margin-bottom: 16px;
}

.pro-account:empty {
  display: none;
}

.pro-account-line {
  margin: 0;
}

.pro-account-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.pro-account-refresh {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
}

/* The admin's page. */
.pro-preview {
  max-width: 720px;
  margin: 0 auto;
  padding: 20px 24px 60px;
}

.pro-preview-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
}

.pro-preview-choice {
  max-width: 260px;
  padding: 6px 12px;
  overflow: hidden;
  border: 1px solid var(--field-border);
  border-radius: 6px;
  background: transparent;
  color: var(--text);
  font: inherit;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}

.pro-preview-choice:hover {
  background: var(--hover);
}

.pro-grant {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
}

.pro-grant-days {
  width: 100px;
}

/* Chatbot › Cài đặt without Pro: the reference's pitch under its note (Chat:6401–6416). */
.cb-memory-pitch {
  color: color-mix(in srgb, var(--ink) 60%, transparent);
  line-height: 1.6;
}

.cb-memory-pitch .link {
  color: oklch(from var(--wovia-yellow) min(l, var(--max-lightness, 1)) c h);
  font-weight: 500;
}