/*=========================================================
AGEN PAYMENT HELPERS
=========================================================*/

/*=========================================================
TEXT ALIGN
=========================================================*/

.ap-text-left {
  text-align: left;
}

.ap-text-center {
  text-align: center;
}

.ap-text-right {
  text-align: right;
}

/*=========================================================
TEXT COLOR
=========================================================*/

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

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

.ap-text-success {
  color: var(--success) !important;
}

.ap-text-danger {
  color: var(--danger) !important;
}

.ap-text-warning {
  color: var(--warning) !important;
}

.ap-text-muted {
  color: var(--text-light) !important;
}

.ap-text-white {
  color: #fff !important;
}

/*=========================================================
BACKGROUND
=========================================================*/

.ap-bg-primary {
  background: var(--primary) !important;
}

.ap-bg-secondary {
  background: var(--secondary) !important;
}

.ap-bg-light {
  background: var(--primary-light) !important;
}

.ap-bg-white {
  background: #fff !important;
}

.ap-bg-gray {
  background: var(--bg) !important;
}

.ap-bg-gradient {
  background: linear-gradient(135deg, var(--primary), #34d6b8);
}

/*=========================================================
DISPLAY
=========================================================*/

.ap-flex {
  display: flex;
}

.ap-inline-flex {
  display: inline-flex;
}

.ap-block {
  display: block;
}

.ap-inline-block {
  display: inline-block;
}

.ap-hidden {
  display: none;
}

/*=========================================================
FLEX
=========================================================*/

.ap-flex-center {
  display: flex;

  justify-content: center;

  align-items: center;
}

.ap-flex-between {
  display: flex;

  justify-content: space-between;

  align-items: center;
}

.ap-flex-column {
  display: flex;

  flex-direction: column;
}

.ap-flex-wrap {
  flex-wrap: wrap;
}

.ap-align-center {
  align-items: center;
}

.ap-justify-center {
  justify-content: center;
}

.ap-justify-between {
  justify-content: space-between;
}

/*=========================================================
POSITION
=========================================================*/

.ap-relative {
  position: relative;
}

.ap-absolute {
  position: absolute;
}

.ap-fixed {
  position: fixed;
}

/*=========================================================
WIDTH
=========================================================*/

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

.ap-w-auto {
  width: auto;
}

.ap-h-100 {
  height: 100%;
}

.ap-h-auto {
  height: auto;
}

/*=========================================================
OBJECT FIT
=========================================================*/

.ap-object-cover {
  object-fit: cover;
}

.ap-object-contain {
  object-fit: contain;
}

/*=========================================================
OVERFLOW
=========================================================*/

.ap-overflow-hidden {
  overflow: hidden;
}

.ap-overflow-auto {
  overflow: auto;
}

/*=========================================================
CURSOR
=========================================================*/

.ap-pointer {
  cursor: pointer;
}

/*=========================================================
SHADOW
=========================================================*/

.ap-shadow {
  box-shadow: var(--shadow-md);
}

.ap-shadow-sm {
  box-shadow: var(--shadow-sm);
}

.ap-shadow-lg {
  box-shadow: var(--shadow-lg);
}

/*=========================================================
BORDER RADIUS
=========================================================*/

.ap-rounded {
  border-radius: var(--radius-md);
}

.ap-rounded-lg {
  border-radius: var(--radius-lg);
}

.ap-rounded-xl {
  border-radius: var(--radius-xl);
}

.ap-rounded-pill {
  border-radius: 999px;
}

/*=========================================================
BORDER
=========================================================*/

.ap-border {
  border: 1px solid var(--border);
}

.ap-border-0 {
  border: none;
}

/*=========================================================
TRANSITION
=========================================================*/

.ap-transition {
  transition: var(--transition);
}

/*=========================================================
GRADIENT TEXT
=========================================================*/

.ap-gradient-text {
  background: linear-gradient(90deg, var(--primary), var(--secondary));

  background-clip: text;
  -webkit-background-clip: text;

  color: transparent;
  -webkit-text-fill-color: transparent;
}

/*=========================================================
GLASS EFFECT
=========================================================*/

.ap-glass {
  background: rgba(255, 255, 255, 0.75);

  backdrop-filter: blur(18px);

  -webkit-backdrop-filter: blur(18px);

  border: 1px solid rgba(255, 255, 255, 0.35);
}

/*=========================================================
DIVIDER
=========================================================*/

.ap-divider {
  width: 100%;

  height: 1px;

  background: var(--border);
}

/*=========================================================
IMAGE
=========================================================*/

.ap-img-fluid {
  width: 100%;

  height: auto;

  display: block;
}

/*=========================================================
USER SELECT
=========================================================*/

.ap-no-select {
  user-select: none;
}

/*=========================================================
Z INDEX
=========================================================*/

.ap-z-navbar {
  z-index: var(--z-navbar);
}

.ap-z-modal {
  z-index: var(--z-modal);
}

/*=========================================================
ANIMATION
=========================================================*/

.ap-hover-up {
  transition: var(--transition);
}

.ap-hover-up:hover {
  transform: translateY(-6px);
}

.ap-scale {
  transition: var(--transition);
}

.ap-scale:hover {
  transform: scale(1.04);
}

.ap-rotate {
  transition: var(--transition);
}

.ap-rotate:hover {
  transform: rotate(5deg);
}

/*=========================================================
OPACITY
=========================================================*/

.ap-opacity-0 {
  opacity: 0;
}

.ap-opacity-50 {
  opacity: 0.5;
}

.ap-opacity-75 {
  opacity: 0.75;
}

.ap-opacity-100 {
  opacity: 1;
}