/* account-modal.css
 * Scoped overrides for Account Modal panel spacing to avoid clashes with generic card/panel styles.
 */

/* Remove default card body padding so panel can control its own interior spacing */
account-modal .card.account-modal__inner>.card__body {
  padding: 0;
}

/* Neutralize panel tab bar margin + background when inside account modal card */
account-modal .account-modal__panel .panel__tabs {
  margin: 0;
  background: transparent;
  border-bottom: 1px solid var(--color-border);
  /* keep subtle divider */
}

/* Remove extra top negative margin injection applied via descendant selector in panel.css */
account-modal .card .panel__tabs {
  margin: 0;
}

/* Reset pane padding inherited from .card .panel__pane rule; we'll add modest custom padding */
account-modal .card .panel__pane {
  padding: 0;
}

account-modal .account-modal__panel .panel__pane {
  padding: var(--spacing-lg);
}

/* Provide consistent spacing for grids inside panes */
account-modal .account-modal__panel .detail-grid>div+div,
account-modal .account-modal__panel [data-pane-id]>div+div {
  margin-top: var(--spacing-md);
}

/* Adjust heading spacing inside modal */
account-modal .account-modal__panel label {
  display: block;
  margin-bottom: 0.25rem;
}

/* Inline form styling - smooth integration within panel content */
account-modal .account-inline-form {
  margin-top: var(--spacing-sm);
  padding: var(--spacing-md);
  background: var(--color-gray-50);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  animation: slideDown 0.2s ease-out;
}

account-modal .account-inline-form__content {
  max-width: 100%;
}

account-modal .account-credit-card {
  display: grid;
  gap: var(--spacing-sm);
  padding: var(--spacing-md);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-gray-50);
}

account-modal .account-credit-card--eligible {
  border-color: var(--color-success, #22c55e);
}

account-modal .account-credit-card--ineligible {
  border-color: var(--color-border);
}

account-modal .account-credit-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-sm);
}

account-modal .account-credit-card__stats {
  display: grid;
  gap: var(--spacing-sm);
}

@media (min-width: 520px) {
  account-modal .account-credit-card__stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

account-modal .account-credit-card__criteria {
  display: grid;
  gap: var(--spacing-xs);
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
    max-height: 0;
  }
  to {
    opacity: 1;
    transform: translateY(0);
    max-height: 200px;
  }
}

/* Responsive tweaks */
@media (max-width: 520px) {
  account-modal .account-modal__panel .panel__pane {
    padding: var(--spacing-md);
  }

  account-modal .account-inline-form {
    padding: var(--spacing-sm);
  }
}