/* Upgrade / downgrade confirmation dialog. Shared by the storefront, the account page and
   checkout, which each have their own palette, so every colour here is literal rather than
   inherited from the host page's variables. */

.plan-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(6, 8, 12, 0.74);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.plan-modal {
  background: #151920;
  border: 1px solid #232936;
  border-radius: 14px;
  padding: 24px;
  width: 100%;
  max-width: 420px;
  color: #f2f4f8;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  letter-spacing: -0.011em;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
}

.plan-modal h3 {
  font-size: 17px;
  font-weight: 700;
  margin: 0 0 18px;
}

.plan-row {
  display: flex;
  align-items: baseline;
  gap: 14px;
  font-size: 13px;
  padding: 7px 0;
}

.plan-row span {
  color: #8b94a7;
}

.plan-row b {
  margin-left: auto;
  text-align: right;
  font-weight: 600;
}

.plan-row.total {
  border-top: 1px solid #232936;
  margin-top: 6px;
  padding-top: 12px;
  font-size: 15px;
}

.plan-row.total b {
  font-size: 19px;
  font-weight: 700;
}

.plan-note {
  color: #8b94a7;
  font-size: 12.5px;
  line-height: 1.7;
  margin: 14px 0 4px;
}

.plan-error {
  background: rgba(224, 91, 91, 0.1);
  border: 1px solid rgba(224, 91, 91, 0.45);
  border-radius: 8px;
  color: #ffb3b3;
  font-size: 12.5px;
  line-height: 1.6;
  padding: 10px 12px;
  margin-top: 14px;
}

.plan-buttons {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}

.plan-buttons button {
  flex: 1;
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  padding: 12px;
  border-radius: 9px;
  border: none;
  cursor: pointer;
  transition: background 0.15s ease;
}

.plan-buttons .plan-cancel {
  flex: 0 0 auto;
  padding: 12px 18px;
  background: #1d2634;
  border: 1px solid #232936;
  color: #b9c3d4;
}

.plan-buttons .plan-cancel:hover {
  background: #232d3e;
}

.plan-buttons .plan-confirm {
  background: #2b6fe3;
  color: #fff;
}

.plan-buttons .plan-confirm:hover {
  background: #2361c9;
}

.plan-buttons .plan-confirm.danger {
  background: #6b4a12;
}

.plan-buttons .plan-confirm.danger:hover {
  background: #7d570f;
}

.plan-buttons button:disabled {
  opacity: 0.6;
  cursor: default;
}