/* buttons.css */
.sttBtn[hidden] { display: none !important; }

/* Base button styles */
button,
.btn {
  cursor: pointer;
  margin: 0 auto;
  width: 230px;
  font-family: sans-serif;
  font-weight: 400;
  font-size: 1em;
  text-transform: uppercase;
  text-align: center;
  letter-spacing: 1px;
  vertical-align: middle;
  display: inline-block;
  white-space: nowrap;
  border-radius: 4px;
  line-height: 1.75em;
  padding: 10px;
  color: #000;
  background: #fff;
  border: 2px solid #000;
}

a.btn{
  text-decoration: none;
  color:#000;
}
a.btn:hover{
  text-decoration: none;
  color:#000;
}

/* Compact button */
.btncp {
  font-family: sans-serif;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 13px;
  padding: 6px 6px;
  color: #666;
  background-color: #fff;
}

.sttBtn{
  position: fixed;
  right: 10px; bottom: 10px;
  z-index: 99;
  width: 40px; height: 40px;
  border: 0; border-radius: 4px;
  background: #ccc; color: #000;
  padding: 0; line-height: 0;           /* <- no baseline shift */
  display: inline-grid; place-items: center; /* <- exact centering */
  cursor: pointer;
}
.sttBtn svg{ display: block; width: 24px; height: 24px; } /* <- no inline-gap */

/* make the hidden attribute actually hide the button */

/* === Light mode overrides merged from theme_light.erb === */
@media (prefers-color-scheme: light) {
  .sttBtn {
    background: #ccc;
    color: #111;
  }
  .btncp {
    color: #666;
    background-color: #fff;
  }
}

/* === Dark mode overrides merged from theme_dark.erb === */
@media (prefers-color-scheme: dark) {
  .btncp {
    color: #aaa;
    background-color: #1e1e1e;
  }
  .sttBtn {
    background: #555;
    color: #fff;
  }
}