/* ============================================================
   DRE BUTTON SYSTEM — GLOBAL PRIMITIVES
   Controls size, radius, font, animation.
   Variants ONLY control colour.
============================================================ */

.dre-btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:10px 26px;
    border-radius:50px;
    border-width:1px;
    border-style:solid;

    font-family:"Nunito", sans-serif !important;
    font-weight:800;
    font-size:1.05rem;
    letter-spacing:0.2px;

    cursor:pointer;
    user-select:none;
    box-sizing:border-box !important;
    text-decoration:none !important;

    /* Motion */
    transition:
        transform .15s ease,
        background-color .20s ease,
        color .20s ease,
        border-color .20s ease;

    /* Stop Astra adding shadows or odd background layers */
    appearance:none !important;
    background-image:none !important;
    box-shadow:none !important;
}

/* Hover float */
.dre-btn:hover {
    transform:translateY(-1px);
}

/* Press shrink */
.dre-btn:active {
    transform:scale(0.96);
}

/* Disabled */
.dre-btn.disabled,
.dre-btn:disabled {
    opacity:0.55;
    cursor:not-allowed;
    transform:none;
}

/* ============================================================
   COLOUR VARIANTS
============================================================ */

/* PINK */
.dre-btn-pink {
    background:#ffffff !important;
    border-color:#ed4db4 !important;
    color:#ed4db4 !important;
}
.dre-btn-pink:hover {
    background:#ed4db4 !important;
    color:#ffffff !important;
    border-color:transparent !important;
}
.dre-btn-pink:active {
    background:#f279c9 !important;
    color:#ffffff !important;
    border-color:transparent !important;
}

/* DARK GREY */
.dre-btn-darkgrey {
    background:#ffffff !important;
    border-color:#4F535D !important;
    color:#4F535D !important;
}
.dre-btn-darkgrey:hover {
    background:#4F535D !important;
    color:#ffffff !important;
    border-color:transparent !important;
}
.dre-btn-darkgrey:active {
    background:#6a6e78 !important;
    color:#ffffff !important;
    border-color:transparent !important;
}

/* LIGHT GREY */
.dre-btn-lightgrey {
    background:#ffffff !important;
    border-color:#bfc2c7 !important;
    color:#bfc2c7 !important;
}
.dre-btn-lightgrey:hover {
    background:#bfc2c7 !important;
    color:#ffffff !important;
    border-color:transparent !important;
}
.dre-btn-lightgrey:active {
    background:#d2d5d9 !important;
    color:#ffffff !important;
    border-color:transparent !important;
}

/* BLUE-WHITE */
.dre-btn-bluewhite {
    background:#ffffff !important;
    border-color:#18a5dd !important;
    color:#18a5dd !important;
}
.dre-btn-bluewhite:hover {
    background:#18a5dd !important;
    color:#ffffff !important;
    border-color:transparent !important;
}
.dre-btn-bluewhite:active {
    background:#4cc4f0 !important;
    color:#ffffff !important;
    border-color:transparent !important;
}
/* ============================================================
   DRE NATIVE COMPLETED BUTTON — SHARED RESTORED STATE
============================================================ */

.dre-native-completed-btn,
.dre-native-completed-btn:hover,
.dre-native-completed-btn:focus,
.dre-native-completed-btn:active{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;

  min-width:145px !important;
  height:37px !important;
  padding:10px 26px !important;

  border-radius:50px !important;
  border:1px solid #bfc2c7 !important;
  background:#ffffff !important;
  color:#bfc2c7 !important;

  font-family:Nunito, Arial, sans-serif !important;
  font-size:1.05rem !important;
  font-weight:800 !important;
  line-height:1 !important;
  letter-spacing:0.2px !important;

  opacity:1 !important;
  cursor:default !important;
  pointer-events:none !important;
  user-select:none !important;
  box-shadow:none !important;
  transform:none !important;
  appearance:none !important;
}