/* ============================================================
   BWLMC Nabu — Member Fees Payment (New)
   File: /data/css/glass-buttons.css
   ============================================================ */

:root{
  --petrol: #4284b5;
  --bronze: #be905d;
  --white: #ffffff;

  --glass-bg: rgba(255,255,255,0.06);
  --glass-bg-hover: rgba(255,255,255,0.10);
  --glass-border: rgba(255,255,255,0.14);
  --glass-border-hover: rgba(255,255,255,0.22);
  --glass-shadow: 0 8px 20px rgba(0,0,0,0.22);
}

/* ============================================================
   Base Glass Button (lists-btn + glass-btn are identical)
   ============================================================ */

.lists-btn,
.glass-btn{
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;

  padding: 10px 14px;
  border-radius: 14px;

  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  color: var(--white);
  text-decoration: none;

  cursor: pointer;
  user-select: none;

  transition:
    background .18s ease,
    border-color .18s ease,
    transform .12s ease,
    color .18s ease,
    box-shadow .18s ease;
}

.glass-btn,
.glass-btn:hover,
.glass-btn:focus,
.glass-btn:active{
  text-decoration: none;
}

.lists-btn:hover,
.glass-btn:hover{
  background: var(--glass-bg-hover);
  border-color: var(--glass-border-hover);
}

.lists-btn:active,
.glass-btn:active{
  transform: translateY(1px);
}

.lists-btn:focus-visible,
.glass-btn:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(66,132,181,0.25);
}


/* ============================================================
   Variants (lists-btn-* + glass-btn-* siblings)
   ============================================================ */

/* Primary (petrol tint) */
.lists-btn-primary,
.glass-btn-primary{
  border-color: rgba(66,132,181,0.40);
  background: rgba(66,132,181,0.14);
}
.lists-btn-primary:hover,
.glass-btn-primary:hover{
  border-color: rgba(66,132,181,0.55);
  background: rgba(66,132,181,0.20);
}


/* Secondary */
.lists-btn-secondary,
.glass-btn-secondary{
  border-color: rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.06);
}
.lists-btn-secondary:hover,
.glass-btn-secondary:hover{
  border-color: rgba(255,255,255,0.24);
  background: rgba(255,255,255,0.10);
}


/* Success (green tint) */
.lists-btn-success,
.glass-btn-success{
  border-color: rgba(34,197,94,0.34);
  background: rgba(34,197,94,0.12);
}
.lists-btn-success:hover,
.glass-btn-success:hover{
  border-color: rgba(34,197,94,0.50);
  background: rgba(34,197,94,0.18);
}


/* Danger (red tint) */
.lists-btn-danger,
.glass-btn-danger{
  border-color: rgba(239,68,68,0.40);
  background: rgba(239,68,68,0.12);
}
.lists-btn-danger:hover,
.glass-btn-danger:hover{
  border-color: rgba(239,68,68,0.58);
  background: rgba(239,68,68,0.18);
}


/* ============================================================
   Active / selected (petrol highlight)
   ============================================================ */

.lists-btn.is-active,
.glass-btn.is-active{
  border-color: rgba(66,132,181,0.65);
  background: rgba(66,132,181,0.22);
  color: #ffffff;

  box-shadow:
    inset 0 0 0 1px rgba(66,132,181,0.35);
}

.lists-btn.is-active:hover,
.glass-btn.is-active:hover{
  background: rgba(66,132,181,0.30);
  border-color: rgba(66,132,181,0.80);
}


/* ============================================================
   Disabled
   ============================================================ */

.lists-btn:disabled,
.glass-btn:disabled,
.lists-btn.is-disabled,
.glass-btn.is-disabled{
  opacity: .55;
  cursor: not-allowed;
  transform: none;
}

/* ============================================================
   Toggle switch (same as /admin/lists modal)
   ============================================================ */

.nabu-toggle{
  display:inline-flex;
  align-items:center;
  gap:10px;
  cursor:pointer;
  user-select:none;
}

.nabu-toggle input{
  position:absolute;
  opacity:0;
  width:1px;
  height:1px;
  pointer-events:none;
}

.nabu-toggle .track{
  width:46px;
  height:26px;
  border-radius:999px;
  background:rgba(255,255,255,0.10);
  border:1px solid rgba(255,255,255,0.18);
  position:relative;
  flex:0 0 auto;
  transition: background .18s ease, border-color .18s ease;
}

.nabu-toggle .thumb{
  width:22px;
  height:22px;
  border-radius:999px;
  background:rgba(255,255,255,0.92);
  position:absolute;
  top:1px;
  left:1px;
  transition: transform .18s ease;
}

.nabu-toggle input:checked + .track{
  background:rgba(66,132,181,0.35);
  border-color:rgba(66,132,181,0.55);
}

.nabu-toggle input:checked + .track .thumb{
  transform: translateX(20px);
}

.nabu-toggle input:focus-visible + .track{
  outline:2px solid rgba(241,241,241,0.55);
  outline-offset:2px;
}

/* Disabled look */
.nabu-toggle.is-disabled{
  opacity:.55;
  cursor:not-allowed;
}

.nabu-toggle.is-disabled{ opacity:.55; cursor:not-allowed; }

/* Warning (yellow tint) */
.lists-btn-warning,
.glass-btn-warning{
  border-color: rgba(234,179,8,0.45);   /* amber-500-ish */
  background: rgba(234,179,8,0.14);
}
.lists-btn-warning:hover,
.glass-btn-warning:hover{
  border-color: rgba(234,179,8,0.65);
  background: rgba(234,179,8,0.22);
}