/* /assets/upgrade-modal.css */

/* Upgrade CTA button (inline, e.g. on cards) */
.cb-upgrade-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 18px;
  border-radius: 999px;
  border: none;
  background: var(--cb-accent, #1abc9c);
  color: #fff;
  font-size: 0.98rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 3px 14px rgba(26, 188, 156, 0.18);
  transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.08s ease;
}

.cb-upgrade-btn:hover {
  background: #139c83;
  box-shadow: 0 4px 16px rgba(26, 188, 156, 0.24);
  transform: translateY(-1px);
}

.cb-upgrade-btn:active {
  transform: translateY(1px) scale(0.98);
  box-shadow: 0 2px 8px rgba(26, 188, 156, 0.15);
}

/* Modal content styling to match dashboard cards */
.cb-upgrade-modal-content {
  max-width: 480px;
  border-radius: 22px;
  padding: 26px 26px 20px 26px;
  box-shadow: 0 10px 40px rgba(20, 30, 65, 0.16);
  background: #ffffff;
}

.cb-upgrade-header {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}

.cb-upgrade-icon {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: #e9faf7;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
}

.cb-upgrade-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #181f36;
  margin: 0;
}

.cb-upgrade-subtitle {
  font-size: 0.98rem;
  color: #555;
  margin: 0;
}

.cb-upgrade-body {
  margin-top: 12px;
  margin-bottom: 18px;
}

.cb-upgrade-list {
  list-style: none;
  padding: 0;
  margin: 0 0 16px 0;
}

.cb-upgrade-list li {
  font-size: 0.95rem;
  color: #444;
  padding-left: 22px;
  position: relative;
  margin-bottom: 7px;
}

.cb-upgrade-list li::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 9px;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--cb-accent, #1abc9c);
}

.cb-upgrade-meta {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 0.9rem;
}

.cb-upgrade-plan-label {
  font-weight: 600;
  color: #223046;
}

.cb-upgrade-price {
  color: #6e7a96;
}

/* Footer with buttons */
.cb-upgrade-footer {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 6px;
}

.cb-upgrade-primary {
  width: 100%;
  padding: 10px 18px;
  border-radius: 999px;
  border: none;
  background: var(--cb-accent, #1abc9c);
  color: #fff;
  font-weight: 600;
  font-size: 0.99rem;
  cursor: pointer;
  box-shadow: 0 3px 14px rgba(26, 188, 156, 0.18);
  transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.08s ease;
}

.cb-upgrade-primary:hover {
  background: #139c83;
  box-shadow: 0 4px 16px rgba(26, 188, 156, 0.24);
  transform: translateY(-1px);
}

.cb-upgrade-primary:active {
  transform: translateY(1px) scale(0.98);
  box-shadow: 0 2px 8px rgba(26, 188, 156, 0.15);
}

.cb-upgrade-secondary {
  width: 100%;
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid #e1e6f2;
  background: #f7f9fc;
  color: #55627d;
  font-size: 0.92rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.cb-upgrade-secondary:hover {
  background: #eef2fb;
  border-color: #d2daee;
  color: #39435c;
}

/* Error message */
.cb-upgrade-error {
  margin-top: 4px;
  font-size: 0.82rem;
  color: #b00020;
}

/* Success panel styling (for shortcode page) */
.cb-upgrade-success-panel {
  max-width: 720px;
  margin: 0 auto;
}

.cb-upgrade-success-panel h1 {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cb-upgrade-success-panel .cb-upgrade-success-actions {
  margin-top: 20px;
}

.cb-upgrade-back-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 22px;
  border-radius: 999px;
  background: var(--cb-accent, #1abc9c);
  color: #fff !important;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.98rem;
  box-shadow: 0 3px 14px rgba(26, 188, 156, 0.18);
  transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.08s ease;
}

.cb-upgrade-back-btn:hover {
  background: #139c83;
  box-shadow: 0 4px 16px rgba(26, 188, 156, 0.24);
  transform: translateY(-1px);
}

.cb-upgrade-session-note {
  font-size: 0.84rem;
  color: #6e7a96;
  margin-top: 10px;
}