/* =========================================================
   DF BUTTON SYSTEM – UPDATED
   ========================================================= */


/* =========================================================
   BASE
   ========================================================= */

.nectar-button,
.df-button,
.df-slider-button,
.df-button-dark,
.df-slider-button-dark{

  display:inline-flex;

  justify-content:center;
  align-items:center;

  padding:12px 28px;

  border-radius:10px;

  font-size:14px;
  font-weight:450;
  letter-spacing:.045em;

  line-height:1;
  text-decoration:none;

  max-width:max-content;

  cursor:pointer;

  transition:
    transform .14s cubic-bezier(0.33,0,0.2,1),
    background .22s ease,
    box-shadow .28s ease,
    border-color .22s ease,
    color .22s ease;
}


/* =========================================================
   CENTERING
   ========================================================= */

.wpb_text_column p > .df-button:only-child,
.wpb_text_column p > .df-slider-button:only-child,
.boxzilla-content p > .df-button:only-child,
.boxzilla-content p > .df-slider-button:only-child{

  display:inline-flex;
  margin-left:auto;
  margin-right:auto;
  width:fit-content;
}


/* =========================================================
   LIGHT (NEW DF BASELINE)
   ========================================================= */

.nectar-button,
.df-button,
.df-slider-button{

  border:1px solid rgba(147,84,59,0.05);

  background: rgba(252,244,245,0.46);

  backdrop-filter: blur(5px) saturate(102%);
  -webkit-backdrop-filter: blur(5px) saturate(102%);

  color: rgba(147,84,59,0.92);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.40),
    inset 0 0 0 0.5px rgba(215,130,140,0.09);
}


/* Hover */

.nectar-button:hover,
.df-button:hover,
.df-slider-button:hover{

  background: rgba(252,244,245,0.54);

  color: rgba(147,84,59,0.92);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.44),
    inset 0 0 0 0.5px rgba(215,130,140,0.12);

  transform: translateY(0.2px);
}


/* Active */

.nectar-button:active,
.df-button:active,
.df-slider-button:active{

  transform: translateY(0.45px);
}


/* =========================================================
   DARK (TRANSLATED DF SYSTEM)
   ========================================================= */

.df-button-dark,
.df-slider-button-dark{

  border:1px solid rgba(255,255,255,0.08);

  background: rgba(40,24,24,0.82);

  backdrop-filter: blur(6px) saturate(105%);
  -webkit-backdrop-filter: blur(6px) saturate(105%);

  color: rgba(255,240,240,0.92);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.16),
    inset 0 0 0 0.5px rgba(255,200,200,0.10);
}


/* Hover */

.df-button-dark:hover,
.df-slider-button-dark:hover{

  background: rgba(52,30,30,0.88);

  color: rgba(255,240,240,0.92);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.20),
    inset 0 0 0 0.5px rgba(255,200,200,0.14);

  transform: translateY(0.2px);
}


/* Active */

.df-button-dark:active,
.df-slider-button-dark:active{

  transform: translateY(0.45px);
}