/* 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;
  /* Mobile touch improvements */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}

/* Button active state - inverts colors when clicked/tapped */
button:active, button:focus,
.btn:active, .btn:focus {
  color: #fff !important;
  background: #000 !important;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  transition: background-color 0s, color 0s;
  outline: none;
}

a.btn{
  text-decoration: none;
  color:#000;
}
a.btn:hover{
  text-decoration: none;
  color:#000;
}
a.btn:active, a.btn:focus {
  color: #fff !important;
  text-decoration: none;
  outline: none;
}

.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;
  /* Mobile touch improvements */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}
.sttBtn svg{ display: block; width: 24px; height: 24px; } /* <- no inline-gap */
.sttBtn svg path {
  stroke: #000000;
  stroke-width: 2.5;
} /* Default stroke color for the SVG path */

@media (prefers-color-scheme: light) {
  .sttBtn {
    background: #ccc;
    color: #111;
  }

  /* Explicitly set stroke color in light mode */
  .sttBtn svg path {
    stroke: #000000;
    stroke-width: 2.5;
  }
  /* Scroll-to-top button active state in light mode */
  .sttBtn:active, .sttBtn:focus {
    background: #111 !important;
    color: #ccc !important;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    transition: background-color 0s, color 0s;
    outline: none;
  }

  /* Change SVG stroke color when button is active/focused in light mode */
  .sttBtn:active svg path,
  .sttBtn:focus svg path {
    stroke: #ccc !important;
    transition: stroke 0s;
  }
}

@media (prefers-color-scheme: dark) {
  /* Base buttons in dark mode */
  button,
  .btn {
    color: #fff;
    background: #1e1e1e;
    border: 2px solid #fff;
  }

  /* Button active state - inverts colors when clicked/tapped in dark mode */
  button:active, button:focus,
  .btn:active, .btn:focus {
    color: #1e1e1e !important;
    background: #fff !important;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    transition: background-color 0s, color 0s;
    outline: none;
  }

  a.btn {
    color: #fff;
  }

  a.btn:hover {
    color: #fff;
  }

  a.btn:active, a.btn:focus {
    color: #1e1e1e !important;
    outline: none;
  }

  .sttBtn {
    background: #1e1e1e;
    color: #fff;
  }

  /* SVG path stroke color in dark mode */
  .sttBtn svg path {
    stroke: #fff;
  }

  /* Scroll-to-top button active state in dark mode */
  .sttBtn:active, .sttBtn:focus {
    background: #fff !important;
    color: #1e1e1e !important;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    transition: background-color 0s, color 0s;
    outline: none;
  }

  /* Change SVG stroke color when button is active/focused in dark mode */
  .sttBtn:active svg path,
  .sttBtn:focus svg path {
    stroke: #1e1e1e !important;
    transition: stroke 0s;
  }
}