/* Elemate BTT — Back to Top (label removed) */

.elemate-btt {
  --elbtt-size: 44px;
  --elbtt-bg: #111827;
  --elbtt-bg-hover: #1f2937;
  --elbtt-fg: #ffffff;
  --elbtt-fg-hover: #ffffff;
  --elbtt-opacity: 0.95;
  --elbtt-opacity-hover: 1;
  --elbtt-offset-x: 16px;
  --elbtt-offset-y: 16px;

  --elbtt-progress: #3b82f6;
  --elbtt-progress-track: rgba(59,130,246,.15);

  position: fixed;
  inset: auto auto 16px 16px; /* overridden by .pos-* */
  z-index: 999;
  pointer-events: none; /* only button is interactive */
}

/* Position corners (safe-area aware) */
.elemate-btt.pos-br { right: max(var(--elbtt-offset-x), env(safe-area-inset-right, 0px)); bottom: calc(var(--elbtt-offset-y) + env(safe-area-inset-bottom, 0px)); left: auto; top: auto; }
.elemate-btt.pos-bl { left:  max(var(--elbtt-offset-x), env(safe-area-inset-left, 0px));  bottom: calc(var(--elbtt-offset-y) + env(safe-area-inset-bottom, 0px)); right: auto; top: auto; }
.elemate-btt.pos-tr { right: max(var(--elbtt-offset-x), env(safe-area-inset-right, 0px)); top:    calc(var(--elbtt-offset-y) + env(safe-area-inset-top, 0px));    left: auto; bottom: auto; }
.elemate-btt.pos-tl { left:  max(var(--elbtt-offset-x), env(safe-area-inset-left, 0px));  top:    calc(var(--elbtt-offset-y) + env(safe-area-inset-top, 0px));    right: auto; bottom: auto; }

/* Container visibility */
.elemate-btt .elbtt-btn {
  pointer-events: auto;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--elbtt-size);
  height: var(--elbtt-size);
  padding: 0 12px;
  background: var(--elbtt-bg);
  opacity: var(--elbtt-opacity);
  border-radius: 999px;
  cursor: pointer;
  transform: translateY(8px) scale(.95);
  transition:
    opacity .2s ease,
    color .2s ease,
    background-color .2s ease,
    transform .2s ease;
  outline-offset: 2px;
}

/* shape variants */
.elemate-btt.shape-circle .elbtt-btn { width: var(--elbtt-size); padding: 0; border-radius: 999px; }
.elemate-btt.shape-square .elbtt-btn { border-radius: 2px; }
.elemate-btt.shape-square .elbtt-ring{ display: none; }

.elemate-btt .elbtt-btn:hover,
.elemate-btt .elbtt-btn:focus-visible {
  color: var(--elbtt-fg-hover);
  background: var(--elbtt-bg-hover);
  opacity: var(--elbtt-opacity-hover);
  transform: translateY(0) scale(1);
}

/* Start hidden until JS toggles class */
.elemate-btt { opacity: 0; visibility: hidden; transition: opacity .18s ease, visibility .18s linear; }
.elemate-btt.is-visible { opacity: 1; visibility: visible; }

/* Icon */
.elemate-btt .elbtt-icon > i,
.elemate-btt .elbtt-icon svg {
  display: block;
  line-height: 1;
  width: calc(var(--elbtt-size)/2);
  height: calc(var(--elbtt-size)/2);
  fill: var(--elbtt-fg);
}

/* Progress RING (SVG) */
.elemate-btt .elbtt-ring {
  position: absolute;
  width:  calc(var(--elbtt-size) + var(--elbtt-ring-thickness, 4px) + 8px);
  height: calc(var(--elbtt-size) + var(--elbtt-ring-thickness, 4px) + 8px);
  pointer-events: none;
  overflow: visible;
}



.elemate-btt.shape-circle .elbtt-ring {
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
}
.elemate-btt .elbtt-ring__track,
.elemate-btt .elbtt-ring__progress {
  fill: none;
  stroke-width: var(--elbtt-ring-thickness, 4px);
}
.elemate-btt .elbtt-ring__track    { stroke: var(--elbtt-progress-track); }
.elemate-btt .elbtt-ring__progress {
  stroke: var(--elbtt-progress);
  stroke-linecap: round;
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
}
/* Base track */
.elemate-btt .elbtt-progress-track {
  position: fixed;
  background: transparent;
  z-index: 999;
  pointer-events: none;
}


/* Horizontal (Top/Bottom) */
.elemate-btt .elbtt-progress-track--top {
  left: 0; right: 0; top: 0;
  height: var(--elbtt-bar-thickness, 3px);
}
.elemate-btt .elbtt-progress-track--bottom {
  left: 0; right: 0; bottom: 0;
  height: var(--elbtt-bar-thickness, 3px);
}


/* Bar fill */
.elemate-btt .elbtt-progress-bar {
  width: 0%;
  height: 100%;
  background: var(--elbtt-progress);
  transition: width .08s linear, height .08s linear;
}

/* Focus sentinel hidden */
.elemate-btt .elbtt-sentinel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .elemate-btt,
  .elemate-btt .elbtt-btn,
  .elemate-btt .elbtt-progress-bar {
    transition: none !important;
  }
}

/* Left/Right progress BAR */
.elemate-btt .elbtt-progress-track--left,
.elemate-btt .elbtt-progress-track--right {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 4px; /* default; overridden inline by JS height value */
  background: transparent;
  z-index: 999;
  pointer-events: none;
}

/* Vertical (Left/Right) */
.elemate-btt .elbtt-progress-track--left {
  top: 0; bottom: 0; left: 0; right: auto;
  width: var(--elbtt-bar-thickness, 3px);
}
.elemate-btt .elbtt-progress-track--right {
  top: 0; bottom: 0; right: 0; left: auto;
  width: var(--elbtt-bar-thickness, 3px);
}

/* Vertical bars grow in height instead of width */
.elemate-btt .elbtt-progress-bar.is-vertical {
  width: 100%;
  height: 0%;
}