/* Current plan */
.ap-plan-banner {
  background: linear-gradient(135deg, var(--ap-primary), #7C74F0);
  border-radius: var(--ap-radius);
  padding: 1.5rem;
  color: #fff;
  position: relative;
  overflow: hidden;
}

.ap-plan-banner::after {
  content: '';
  position: absolute;
  right: -40px;
  top: -40px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
}

.ap-plan-badge {
  font-size: .7rem;
  font-weight: 700;
  background: rgba(255, 255, 255, .2);
  padding: .3rem .7rem;
  border-radius: 20px;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
}

.ap-plan-price {
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -.02em;
}

.ap-plan-price small {
  font-size: .9rem;
  font-weight: 500;
  opacity: .85;
}

.ap-plan-meta {
  font-size: .8rem;
  opacity: .9;
}

/* Usage bars */
.ap-usage-row {
  margin-bottom: 1.1rem;
}

.ap-usage-row:last-child {
  margin-bottom: 0;
}

.ap-usage-label {
  display: flex;
  justify-content: space-between;
  font-size: .82rem;
  margin-bottom: .4rem;
}

.ap-usage-label .name {
  color: var(--ap-text-strong);
  font-weight: 600;
}

.ap-usage-label .val {
  color: var(--ap-secondary);
}

.ap-usage-bar-bg {
  background: var(--ap-bg);
  border-radius: 20px;
  height: 8px;
  overflow: hidden;
}

.ap-usage-bar {
  height: 100%;
  border-radius: 20px;
  transition: width .4s ease;
}

/* Payment method */
.ap-pm-card {
  border: 1px solid var(--ap-border);
  border-radius: var(--ap-radius-sm);
  padding: 1rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.ap-pm-icon {
  width: 46px;
  height: 34px;
  border-radius: 6px;
  background: var(--ap-primary-100);
  color: var(--ap-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  flex-shrink: 0;
}

.ap-pm-default {
  font-size: .68rem;
  font-weight: 700;
  background: var(--ap-success-100);
  color: var(--ap-success);
  padding: .2rem .5rem;
  border-radius: 20px;
}

/* Table */
.ap-table thead th {
  font-size: .72rem;
  color: var(--ap-secondary);
  font-weight: 700;
  border-bottom: 1px solid var(--ap-border);
  padding: .75rem .6rem;
  white-space: nowrap;
}

.ap-table tbody td {
  padding: .8rem .6rem;
  border-bottom: 1px solid var(--ap-border);
  vertical-align: middle;
  font-size: .85rem;
  color: var(--ap-text);
}

/* Plan compare cards */
.ap-plan-card {
  border: 1px solid var(--ap-border);
  border-radius: var(--ap-radius);
  padding: 1.4rem;
  height: 100%;
  position: relative;
}

.ap-plan-card.current {
  border-color: var(--ap-primary);
  box-shadow: 0 0 0 3px var(--ap-primary-100);
}

.ap-plan-card .name {
  font-weight: 700;
  font-size: 1rem;
  color: var(--ap-text-strong);
}

.ap-plan-card .price {
  font-size: 1.7rem;
  font-weight: 800;
  color: var(--ap-text-strong);
  margin: .5rem 0 .2rem;
}

.ap-plan-card .price small {
  font-size: .8rem;
  font-weight: 500;
  color: var(--ap-secondary);
}

.ap-plan-card ul {
  list-style: none;
  padding: 0;
  margin: 1rem 0;
  font-size: .83rem;
}

.ap-plan-card ul li {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .35rem 0;
  color: var(--ap-text);
}

.ap-plan-card ul li i {
  color: var(--ap-success);
}

.ap-current-pill {
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-size: .68rem;
  font-weight: 700;
  background: var(--ap-primary-100);
  color: var(--ap-primary);
  padding: .25rem .6rem;
  border-radius: 20px;
}

/* ============ Utility classes (extracted from inline styles) ============ */

/* Font sizes */
.ap-fs-13 {
  font-size: 1.3rem;
}

.ap-fs-06 {
  font-size: .6rem;
}

.ap-fs-085 {
  font-size: .85rem;
}

.ap-fs-08 {
  font-size: .8rem;
}

/* Text colors */
.ap-color-strong {
  color: var(--ap-text-strong);
}

.ap-color-secondary {
  color: var(--ap-secondary);
}

.ap-color-primary {
  color: var(--ap-primary);
}

/* Transparent button (topbar user) */
.ap-btn-transparent {
  background: transparent;
}

/* Small dropdown menu */
.ap-menu-sm {
  font-size: .85rem;
}

/* Payment method icon variants */
.ap-pm-icon-primary {
  background: var(--ap-primary-100);
  color: var(--ap-primary);
}

.ap-pm-icon-warning {
  background: var(--ap-warning-100);
  color: var(--ap-warning);
}

/* Usage bar widths */
.ap-w-72 {
  width: 72%;
}

.ap-w-84 {
  width: 84%;
}

.ap-w-60 {
  width: 60%;
}

/* Usage bar fills */
.ap-usage-primary {
  background: var(--ap-primary);
}

.ap-usage-info {
  background: var(--ap-info);
}

.ap-usage-warning {
  background: var(--ap-warning);
}

.ap-usage-success {
  background: var(--ap-success);
}

/* Plan banner action buttons */
.ap-btn-plan-light {
  background: #fff;
  color: var(--ap-primary);
  border: 1px solid #fff;
  font-weight: 600;
}

.ap-btn-plan-light:hover {
  background: rgba(255, 255, 255, .9);
  color: var(--ap-primary-600);
}

.ap-btn-plan-ghost {
  background: rgba(255, 255, 255, .15);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .3);
  font-weight: 600;
}

.ap-btn-plan-ghost:hover {
  background: rgba(255, 255, 255, .25);
  color: #fff;
}

/* Border top divider (billing email row) */
.ap-border-top {
  border-top: 1px solid var(--ap-border);
}

/* Invoice search input */
.ap-invoice-search {
  max-width: 200px;
  background: var(--ap-bg);
  border-color: var(--ap-border);
  color: var(--ap-text-strong);
}

/* Modal overrides */
.ap-modal-content {
  background: var(--ap-surface);
  border-color: var(--ap-border);
}

.ap-modal-header,
.ap-modal-footer {
  border-color: var(--ap-border);
}

.ap-modal-title {
  color: var(--ap-text-strong);
}

.ap-modal-label {
  font-size: .8rem;
  font-weight: 600;
  color: var(--ap-text-strong);
}

.ap-modal-control {
  background: var(--ap-bg);
  border-color: var(--ap-border);
  color: var(--ap-text-strong);
}

/* Footer */
.ap-footer {
  color: var(--ap-secondary);
}