/* ==========================================================================
   Tiny Valley Tots — Unified Buttons
   Central source of truth. No default colours; variants set colour.
   ========================================================================== */

/* ---- Brand tokens ---- */
:root{
  --tvt-yellow:#F6D74C;
  --tvt-green:#00B050;
  --tvt-blue:#00AEEF;
  --tvt-orange:#FF7F27;
  --tvt-pink:#ED1E79;
  --tvt-purple:#6C63FF;
  --tvt-teal:#00B8A9;
  --tvt-red:#E43A2F;
}

/* ---- Base (opt-in only via .btn / .tvt-btn) ---- */
.btn,
a.btn,
button.btn,
.tvt-btn{
  -webkit-appearance:none; appearance:none;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 16px;
  border:2px solid transparent;
  border-radius:12px;
  font-family:"Patrick Hand SC","Patrick Hand",cursive,sans-serif;
  font-size:1rem; font-weight:700; line-height:1.2;
  cursor:pointer; text-decoration:none; user-select:none;
  transition:transform .1s ease, box-shadow .2s ease, filter .15s ease, background-color .2s ease, color .2s ease;
  /* no background / color here */
}

@media (hover:hover){
  .btn:hover, a.btn:hover, button.btn:hover, .tvt-btn:hover{
    transform:translateY(-2px);
    box-shadow:0 6px 12px rgba(0,0,0,.12);
    filter:brightness(1.05);
    text-decoration:none;
  }
}
.btn:active, a.btn:active, button.btn:active, .tvt-btn:active{
  transform:translateY(0);
  box-shadow:none;
  filter:brightness(.98);
}
.btn:disabled, button.btn:disabled{
  opacity:.6; cursor:not-allowed; transform:none; box-shadow:none;
}

/* ---- Colour variants (double-hyphen canonical) ---- */
.btn--yellow  { background:var(--tvt-yellow);  color:#fff; }
.btn--green   { background:var(--tvt-green);   color:#fff; }
.btn--booking { background:var(--tvt-green);   color:#fff; } /* semantic */
.btn--blue    { background:var(--tvt-blue);    color:#fff; }
.btn--orange  { background:var(--tvt-orange);  color:#fff; }
.btn--pink    { background:var(--tvt-pink);    color:#fff; }
.btn--purple  { background:var(--tvt-purple);  color:#fff; }
.btn--teal    { background:var(--tvt-teal);    color:#fff; }
.btn--danger  { background:var(--tvt-red);     color:#fff; }

/* ---- Legacy single-hyphen aliases (old markup keeps working) ---- */
.btn-yellow { background:var(--tvt-yellow);  color:#fff; }
.btn-green  { background:var(--tvt-green);   color:#fff; }
.btn-blue   { background:var(--tvt-blue);    color:#fff; }
.btn-orange { background:var(--tvt-orange);  color:#fff; }
.btn-pink   { background:var(--tvt-pink);    color:#fff; }
.btn-purple { background:var(--tvt-purple);  color:#fff; }
.btn-teal   { background:var(--tvt-teal);    color:#fff; }
.btn-red    { background:var(--tvt-red);     color:#fff; }
.btn--book, .btn-book { background:var(--tvt-green); color:#fff; }

/* ---- Active page highlight (white gap + coloured glow) — works everywhere ---- */
/* Yellow */
.btn--yellow.is-active,  .btn-yellow.is-active{
  box-shadow:0 0 0 3px #fff, 0 0 0 6px rgba(246,215,76,.95), 0 0 14px rgba(246,215,76,.55);
}
/* Green */
.btn--green.is-active, .btn--booking.is-active, .btn--book.is-active, .btn-book.is-active, .btn-green.is-active{
  box-shadow:0 0 0 3px #fff, 0 0 0 6px rgba(0,176,80,.95), 0 0 14px rgba(0,176,80,.55);
}
/* Blue */
.btn--blue.is-active, .btn-blue.is-active{
  box-shadow:0 0 0 3px #fff, 0 0 0 6px rgba(0,174,239,.95), 0 0 14px rgba(0,174,239,.50);
}
/* Orange */
.btn--orange.is-active, .btn-orange.is-active{
  box-shadow:0 0 0 3px #fff, 0 0 0 6px rgba(255,127,39,.95), 0 0 14px rgba(255,127,39,.55);
}
/* Pink */
.btn--pink.is-active, .btn-pink.is-active{
  box-shadow:0 0 0 3px #fff, 0 0 0 6px rgba(237,30,121,.95), 0 0 14px rgba(237,30,121,.55);
}
/* Purple */
.btn--purple.is-active, .btn-purple.is-active{
  box-shadow:0 0 0 3px #fff, 0 0 0 6px rgba(108,99,255,.95), 0 0 14px rgba(108,99,255,.50);
}
/* Teal */
.btn--teal.is-active, .btn-teal.is-active{
  box-shadow:0 0 0 3px #fff, 0 0 0 6px rgba(0,184,169,.95), 0 0 14px rgba(0,184,169,.50);
}
/* Red */
.btn--danger.is-active, .btn-red.is-active{
  box-shadow:0 0 0 3px #fff, 0 0 0 6px rgba(228,58,47,.95), 0 0 14px rgba(228,58,47,.50);
}