:root {
  --fab-color: #1AAD19;
}

.fab-wrapper {
  position: fixed;
  top: 78%;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: var(--page-max-width, 1200px);
  pointer-events: none;
  display: flex;
  justify-content: flex-end;
  padding-right: var(--page-padding, 24px);
  z-index: 990;
}

.fab {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  background-color: var(--fab-color);
  border-radius: 12px;
  cursor: pointer;
  pointer-events: auto;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  gap: 3px;
  transition: transform 0.2s ease;
}

.fab:active {
  transform: scale(0.95);
}

.fab-icon {
  width: 36px;
  height: 36px;
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAADhklEQVR4AeyYC1bcMAxFk64EVlJYSWElDCuBrgS6EtjJ9N0cu1ix/MmPltOZE+HYkqX3JMWZ4dvwxT8XAn+7gJcKXCqwMQP/bwudz+c7yUnylAjzG82vkI3J7dq+qAICBegXjWd5f5I8SO4SYf6i+RsiO2xvdH/Y1UVAQMgqoAC9BBC2kEC4351Ik4DAk1HkakN0wEMC2eIng1AkIOD0McAJnm1cuYAvnpndSBQJCODSdtGWrmtXEi4BZf8kKATSkF3PWnmUvEtqV80O3zzwtf1duoyAwFPekvPHcRzvx3GE4H0lQmp3KzuPLCcasaRef2UE5IpjUYN7kdWo8EBlOpHFrgS0lKjopzkaAo3s44xThCMVQLXgD/I12WmkWuz1ZHMVDAFFAJiG4oWek4l3Qq1SqV1KlGpQRdoPob2KwXoUSwn0+PRsAH0tBaB/afwugRgnHVWNwlcRyEvdd80J9O3qt3qVKcABPYHVnJHqATQKpxICqTe1HYSYy7x+HUmArJNxACNdgAJcbCHRfOnNCdCjwcd8WDQHPO8KnhXALNqcGFMpiFCpZPnj1hDQkUfJt5JgfwT/EWn9HeCLJAyBEONnGNcOsW1K+yFY0rHu6SFBG6I34hGg/J4Ts7EwiRX02uZdFebioaZCcxctPe8VWsrsywgoAuDXVoHThpPEBAkT/IbbgSQNs0+qJxEz9TT9Mf1N/mQE0IkEb08vS6iLEvZlWQobyCCnCq3AyzAs/xlaegyxoZ24n8QlgCaA8TKF2hWd38a5YwQ5pGSHDnG2+ktFApiLBA8klUjLi8oTbErAPPu1ayZGlQARRIJ24rYlOIZEy26r3sRoEghtAbjewCZA76ZeOyXU+G8SkOO0J3kmruVk1DrfJGOLsY5oeSidIMMOH9rZuOkhwNEFOIDza2zKgEi8Sp4lJwnrCLq1R7AB5k0UJ2vnHgK32hjBeX7NmmypQJYpY7RuQrWznU0CAkRWs421Be0hU4v3VXxSabogM2kSyHb0L/CM7EEC8G72gXIYAVWB7zZ873EzR/AOmf67UbM7jEAMKiJkj2pAZI+KRNfTeDgBoogEJxYHARWBDA85hHjgEe5Zi2RZYyu/nRmL8ikE0uiBTDx6OeEQyLFGv0MWksgQXqSpC3P/6QRM9MokEIVcte3+WQIVbkZ1DAET4tjJhcCx+W17v1SgnaNjLb58BX4DAAD//2GETpgAAAAGSURBVAMAcI44cHFsML8AAAAASUVORK5CYII=');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.fab-text {
  font-size: 11px;
  color: white;
  line-height: 1;
  font-weight: 500;
}

#modal-toggle {
  display: none;
}

.image-modal-overlay {
  opacity: 0;
  visibility: hidden;
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  backdrop-filter: blur(4px);
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

#modal-toggle:checked~.image-modal-overlay {
  opacity: 1;
  visibility: visible;
}

.image-modal-content {
  position: relative;
  max-width: 90%;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.image-modal-content .modal-image {
  display: none;
  max-width: 100%;
  max-height: 70vh;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

#modal-toggle:checked~.image-modal-overlay .image-modal-content .modal-image {
  content: url('mhj.jpg');
  display: block;
}

.close-btn {
  margin-top: 20px;
  padding: 10px 30px;
  background-color: var(--fab-color);
  color: white;
  text-align: center;
  border-radius: 20px;
  cursor: pointer;
  font-size: 16px;
  font-weight: bold;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
  user-select: none;
  transition: opacity 0.2s ease;
}

.close-btn:hover {
  opacity: 0.9;
}