/* Plans and AI quotas (HW-3856): the settings card with its quota bars, the upgrade sheet's plan comparison, the banner
   near a limit, the used-up notice on the recipe import and the operator's overview. Colours only from the theme's
   tokens, so light and dark follow by themselves. Buttons are the shared ones. */

.hw-tier-now {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;
}

.hw-tier-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--bsft-color-text);
  background: var(--hw-accent-soft);
}

/* Coming back from the payment provider (HW-4177). The success surface of .hw-notice belongs to a plan that is really in
   place; a purchase still being switched on, a checkout that was left and the way back from the subscription management
   state a fact, and a purchase that has not arrived warns. Tokens only, so light and dark follow by themselves. */
.hw-notice.hw-tier-return-info {
  background: var(--bsft-color-info-surface);
  color: var(--bsft-color-info);
}

.hw-notice.hw-tier-return-wait {
  background: var(--bsft-color-warning-surface);
  color: var(--bsft-color-warning);
}

.hw-tier-return-contact {
  margin-left: 6px;
  color: inherit;
}

.hw-quotas {
  display: grid;
  gap: 10px;
  margin: 12px 0 4px;
}

.hw-quota-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
}

.hw-quota-amount {
  color: var(--bsft-color-muted);
  font-variant-numeric: tabular-nums;
}

.hw-quota-bar {
  margin: 6px 0 0;
}

.hw-quota-low .hw-quota-bar > i {
  background: var(--bsft-color-warning);
}

.hw-quota-out .hw-quota-bar > i {
  background: var(--bsft-color-danger);
}

.hw-quota-out .hw-quota-amount {
  color: var(--bsft-color-danger);
}

.hw-tier-members {
  margin: 8px 0 0;
}

.hw-tier-offers {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hw-tier-offer {
  display: grid;
  gap: 8px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--bsft-color-border);
  background: var(--bsft-color-surface);
}

.hw-tier-offer-current {
  border-color: var(--bsft-color-primary);
  background: var(--hw-accent-soft);
}

.hw-tier-offer-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  font-size: 16px;
}

.hw-tier-offer-price {
  color: var(--bsft-color-muted);
  font-size: 14px;
  white-space: nowrap;
}

.hw-tier-offer-facts {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: 0 0 0 18px;
  font-size: 14px;
}

.hw-tier-offer-badge {
  justify-self: start;
}

.hw-quota-banner {
  border-color: var(--bsft-color-warning);
  background: var(--bsft-color-warning-surface);
}

.hw-tier-used-up {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  margin: 0 0 12px;
  background: var(--bsft-color-warning-surface);
  color: var(--bsft-color-text);
}

.hw-operator-table-wrap {
  overflow-x: auto;
}

.hw-operator-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

.hw-operator-table th,
.hw-operator-table td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--bsft-color-border);
  text-align: left;
  white-space: nowrap;
}

.hw-operator-near-list {
  margin: 0;
  padding-left: 18px;
  font-size: 14px;
  overflow-wrap: anywhere;
}

/* --- switching AI off (HW-3874) --------------------------------------------------------- */

.hw-tier-ai-off {
  font-size: 13px;
  font-weight: 700;
  color: var(--bsft-color-text);
  background: var(--hw-surface-2);
}

.hw-tier-ai-off-hint {
  margin: 10px 0 4px;
}

.hw-ai-subtitle {
  display: block;
  margin: 16px 0 2px;
}

.hw-ai-me {
  margin-top: 8px;
  border-top: 1px solid var(--bsft-color-border);
}