/***********
*************** BUTTONS
*****************************************/

/*************************************************************         BUTTON STYLES          ********************/

/* #region GLOBAL BUTTONS */

/*=========================================================================
|                          CTA BUTTON 1 (BRIGHT)                          |
==========================================================================*/

/* #region CTA BUTTON 1 */

.nav-cta{
  display: inline-flex;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(212,175,55,0.14);          /* NOTE: hard-coded gold tint */
  border: 1px solid rgba(212,175,55,0.35);    /* NOTE: hard-coded gold tint */
  color: var(--text);
  font-weight: 650;
  box-shadow: 0 2px 0 rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.06);
  transition: transform 100ms ease, box-shadow 100ms ease;
}

.nav-cta:hover{
  transform: translateY(2px);
  box-shadow: 0 1px 0 rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.06);
  text-decoration: none;
}

.nav-cta:active{
  transform: translateY(3px);
  box-shadow: none;
}

/* #endregion CTA BUTTON 1 */

/*==========================================================================
|                           CTA BUTTON 2 (MUTED)                           |
==========================================================================*/

/* #region CTA BUTTON 2 */

.btn-primary{
  background: var(--accentSoft_B);
  border-color: var(--accentLine_B);
}

/* #endregion CTA BUTTON 2 */

/*==========================================================================
|                             STANDARD BUTTON                              |
==========================================================================*/

/* #region STANDARD BUTTON */

.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.04);
  color: var(--text);
  font-weight: 650;
  cursor: pointer;
  box-shadow: 0 2px 0 rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.06);
  transition: transform 100ms ease, background 150ms ease, border-color 150ms ease, box-shadow 100ms ease;
}

.btn:hover{
  transform: translateY(2px);
  background: rgba(255,255,255,0.06);
  box-shadow: 0 1px 0 rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.06);
  text-decoration: none;
}

.btn:active{
  transform: translateY(3px);
  box-shadow: none;
}

/* #endregion STANDARD BUTTON */

/*==========================================================================
|                              GHOST BUTTON                                |
==========================================================================*/

/* #region GHOST BUTTON */

.btn-ghost{
  background: transparent;
}

/* #endregion GHOST BUTTON */

/*==========================================================================
|                            MINIATURE BUTTON                              |
==========================================================================*/

/* #region MINI BUTTON */

.btn-small{
  padding: 9px 12px;
  border-radius: 14px;
  font-size: 0.92rem;
}

/* #endregion MINI BUTTON */

/*==========================================================================
|                            PRE-ORDER BUTTON                              |
==========================================================================*/

/* #region PRE-ORDER BUTTON */

.btn-preorder{
  width: 100%;
  background: var(--accent);
  border-color: var(--accent);
  color: #0a0a0a;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.btn-preorder:hover{
  background: #f5b040;
  border-color: #f5b040;
  color: #0a0a0a;
}

.btn-preorder--trance{
  background: var(--accent-trance);
  border-color: var(--accent-trance);
  color: #0a0a0a;
}

.btn-preorder--trance:hover{
  background: #cc90e0;
  border-color: #cc90e0;
  color: #0a0a0a;
}

/* #endregion PRE-ORDER BUTTON */


/* #endregion GLOBAL BUTTONS */