/*
========================================================
Snippet Name: GeneratePress Back To Top Button Styling
Author: Arif / ChatGPT

Purpose:
- Styles the GeneratePress back-to-top button.
- Matches the Novashare floating share button style.
- Uses a circular glass-style button with stable contrast.
- Adds subtle hover/focus interaction.

Target:
- .generate-back-to-top
- .generate-back-to-top:visited
========================================================
*/


/* ==================================

Back To Top Button Base

================================== */

.generate-back-to-top,
.generate-back-to-top:visited {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px;
  min-height: 40px;

  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  padding: 0;
  border-radius: 999px !important;

  right: 50px !important;
  bottom: calc(10% + 40px + 14px) !important;
    
  background: rgba(255, 255, 255, 0.72) !important;
  border: 3px solid var(--ke-ink-4) !important;

  color: var(--ke-ink-4) !important;

  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.18) !important,
    inset 0 1px 0 rgba(255, 255, 255, 0.7) !important;

  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);

  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease,
    box-shadow 0.2s ease;
}


/* ==================================

Hover / Focus State

================================== */

.generate-back-to-top:hover,
.generate-back-to-top:focus-visible {
  background: #f8faf9 !important;
  border-color: var(--ke-green-2) !important;
  color: var(--ke-green-2) !important;

  transform: translateY(-2px) !important;

  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.2) !important,
    inset 0 1px 0 rgba(255, 255, 255, 0.75) !important;
}


/* ==================================

Icon Size

================================== */

.generate-back-to-top svg,
.generate-back-to-top .gp-icon,
.generate-back-to-top .screen-reader-text + svg {
  width: 1em !important;
  height: 1em !important;
  top: 0 !important;
}


/* ==================================

Mobile Adjustment

================================== */

@media (max-width: 767px) {
  .generate-back-to-top,
  .generate-back-to-top:visited {
    width: 40px;
    height: 40px;
    border: 1.5px solid var(--ke-ink-4) !important;

    right: 16px !important;
    bottom: calc(15% + 40px + 14px) !important;
  }
}