/* --- Brand refresh --- */
:root{
  --brand:#62b53c;       /* Super CCC green */
  --brand-dark:#2e7d32;  /* darker shade */
}

/* Buttons */
.btn-primary{
  --bs-btn-bg: var(--brand);
  --bs-btn-border-color: var(--brand);
  --bs-btn-hover-bg: var(--brand-dark);
  --bs-btn-hover-border-color: var(--brand-dark);
  --bs-btn-focus-shadow-rgb: 98,181,60;
}
.btn-outline-primary{
  --bs-btn-color: var(--brand);
  --bs-btn-border-color: var(--brand);
  --bs-btn-hover-bg: var(--brand);
  --bs-btn-hover-border-color: var(--brand);
}

/* Accordion */
.accordion-button{
  transition: background-color .2s ease, color .2s ease, box-shadow .2s ease;
}
.accordion-button:focus{
  box-shadow: 0 0 0 .20rem rgba(98,181,60,.35);
}
.accordion-button:not(.collapsed){
  color:#fff;
  background-color: var(--brand);
  box-shadow: none;
}
.accordion-button:not(.collapsed)::after{
  /* make the chevron white on the green header */
  filter: brightness(0) invert(1);
}
.accordion-item{
  border-color: rgba(98,181,60,.25);
}
.accordion-body{
  border-top: 1px solid rgba(98,181,60,.15);
}

/* Small brand utilities */
.brand-green{color:var(--brand)}
.bg-brand-soft{background:#eaf6ec}

/* Optional: tweak link color to brand */
a{color:var(--brand)}
a:hover{color:var(--brand-dark)}

/* Mobile Action Bar (app-style footer) */
:root{ --brand:#62b53c; --brand-dark:#2e7d32; }

.mobile-action-bar{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 1030; /* above navbar */
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 8px;
  padding: 10px env(safe-area-inset-right) calc(10px + env(safe-area-inset-bottom)) env(safe-area-inset-left);
  background: rgba(255,255,255,.98);
  border-top: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 -6px 20px rgba(0,0,0,.08);
}

.mab-btn{
  display:flex; align-items:center; justify-content:center;
  gap:8px; padding:10px 8px; text-decoration:none;
  font-weight:600; border-radius:12px;
  background: var(--brand); color:#fff;
  box-shadow: 0 6px 14px rgba(98,181,60,.25);
}
.mab-btn:nth-child(2){ background: #ffffff; color: var(--brand); border:1px solid var(--brand); }
.mab-btn:nth-child(2):hover{ background: var(--brand); color:#fff; }
.mab-btn:hover{ filter: brightness(.96); }

.mab-icon{ font-size:18px; line-height:1; }
.mab-text{ font-size:14px; }

/* Give content breathing room above the bar on small screens */
@media (max-width: 991.98px){
  body{ padding-bottom: 80px; } /* keep footer from overlapping */
}