/* ============================================
   SHARED UI COMPONENT: Floating Button
   ============================================ */
/* FSD: shared/ui → Universal floating action button */
/* PURPOSE: Reusable floating button for close/back actions */
/* DEPENDENCIES: CSS variables from variables.css */
/* SCALED FOR: Consistent button styling across modals and pages */

/* ANCHOR: FLOATING_BUTTON_COMPONENT */

/* ============================================
   FLOATING BUTTON BASE
   ============================================ */

/* CRITICAL: Floating action button
 * POSITION: Fixed, centered vertically (top: 50%, transform: translateY(-50%))
 * STYLE: Glassmorphism effect with backdrop-filter blur
 * INTERACTION: Fade in/out with opacity transition
 * USAGE: Close modal, back navigation
 */
.floating-button {
  position: fixed;
  top: 50%;
  width: var(--button-size, 64px);
  height: var(--button-size, 64px);
  background: var(--color-button-bg, rgba(0, 0, 0, 0.5));
  backdrop-filter: var(--button-blur, blur(2px));
  -webkit-backdrop-filter: var(--button-blur, blur(2px)); /* Safari support */
  border: none;
  border-radius: var(--radius-full, 999px);
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  z-index: 10;
  opacity: 0; /* Hidden by default */
  transform: translateY(-50%);
  transition: opacity var(--transition-normal, 0.3s ease-out), 
              background var(--transition-fast, 0.2s ease);
}

/* CRITICAL: Visible state
 * WHY: Controlled by JavaScript, fades in when needed
 */
.floating-button--visible {
  opacity: 1;
}

/* CRITICAL: Hover effect
 * WHY: Darker background for better visual feedback
 */
.floating-button:hover {
  background: rgba(0, 0, 0, 0.7);
}

/* CRITICAL: Focus state
 * WHY: Remove default outline, use custom for accessibility
 */
.floating-button:focus {
  outline: none;
}

/* CRITICAL: Focus-visible for keyboard navigation
 * ACCESSIBILITY: Shows outline only for keyboard users
 */
.floating-button:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.5);
  outline-offset: 2px;
}

/* ============================================
   BUTTON ICON
   ============================================ */

/* CRITICAL: Icon styling (SVG or IMG)
 * SIZE: controlled by --button-icon-size (desktop default: 40px)
 * COLOR: White for visibility on dark background
 */
.floating-button svg,
.floating-button img {
  width: var(--button-icon-size, 40px);
  height: var(--button-icon-size, 40px);
  color: var(--color-text-light, #FFFFFF);
  fill: var(--color-text-light, #FFFFFF);
  flex: none; /* Prevent icon from shrinking */
}

/* ============================================
   BUTTON POSITIONS
   ============================================ */

/* CRITICAL: Close button position (right side)
 * USAGE: Modal close, page close
 * EXTENDS: .floating-button base styles
 */
.modal-close {
  position: fixed;
  top: 50%;
  width: var(--button-size, 64px);
  height: var(--button-size, 64px);
  background: var(--color-button-bg, rgba(0, 0, 0, 0.5));
  backdrop-filter: var(--button-blur, blur(2px));
  -webkit-backdrop-filter: var(--button-blur, blur(2px));
  border: none;
  border-radius: var(--radius-full, 999px);
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  z-index: 10;
  opacity: 0;
  transform: translateY(-50%);
  transition: opacity var(--transition-normal, 0.3s ease-out), 
              background var(--transition-fast, 0.2s ease);
  right: 40px;
}

.modal-close--visible {
  opacity: 1;
}

.modal-close:hover {
  background: rgba(0, 0, 0, 0.7);
}

.modal-close:focus {
  outline: none;
}

.modal-close:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.5);
  outline-offset: 2px;
}

.modal-close svg,
.modal-close img {
  width: var(--button-icon-size, 40px);
  height: var(--button-icon-size, 40px);
  color: var(--color-text-light, #FFFFFF);
  fill: var(--color-text-light, #FFFFFF);
  flex: none;
}

/* CRITICAL: Back button position (left side)
 * USAGE: Page navigation back
 * EXTENDS: .floating-button base styles
 */
.page-back {
  position: fixed;
  top: 50%;
  width: var(--button-size, 64px);
  height: var(--button-size, 64px);
  background: var(--color-button-bg, rgba(0, 0, 0, 0.5));
  backdrop-filter: var(--button-blur, blur(2px));
  -webkit-backdrop-filter: var(--button-blur, blur(2px));
  border: none;
  border-radius: var(--radius-full, 999px);
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  z-index: 10;
  opacity: 0;
  transform: translateY(-50%);
  transition: opacity var(--transition-normal, 0.3s ease-out), 
              background var(--transition-fast, 0.2s ease);
  left: 40px;
}

.page-back--visible {
  opacity: 1;
}

.page-back:hover {
  background: rgba(0, 0, 0, 0.7);
}

.page-back:focus {
  outline: none;
}

.page-back:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.5);
  outline-offset: 2px;
}

.page-back svg,
.page-back img {
  width: var(--button-icon-size, 40px);
  height: var(--button-icon-size, 40px);
  color: var(--color-text-light, #FFFFFF);
  fill: var(--color-text-light, #FFFFFF);
  flex: none;
}

/* CRITICAL: Close button for pages (right side)
 * USAGE: Page close to desktop
 * EXTENDS: Same as .modal-close but for pages
 */
.page-close {
  position: fixed;
  top: 50%;
  width: var(--button-size, 64px);
  height: var(--button-size, 64px);
  background: var(--color-button-bg, rgba(0, 0, 0, 0.5));
  backdrop-filter: var(--button-blur, blur(2px));
  -webkit-backdrop-filter: var(--button-blur, blur(2px));
  border: none;
  border-radius: var(--radius-full, 999px);
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  z-index: 10;
  opacity: 0;
  transform: translateY(-50%);
  transition: opacity var(--transition-normal, 0.3s ease-out), 
              background var(--transition-fast, 0.2s ease);
  right: 40px;
}

.page-close--visible {
  opacity: 1;
}

.page-close:hover {
  background: rgba(0, 0, 0, 0.7);
}

.page-close:focus {
  outline: none;
}

.page-close:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.5);
  outline-offset: 2px;
}

.page-close svg,
.page-close img {
  width: var(--button-icon-size, 40px);
  height: var(--button-icon-size, 40px);
  color: var(--color-text-light, #FFFFFF);
  fill: var(--color-text-light, #FFFFFF);
  flex: none;
}

/* ============================================
   RESPONSIVE
   ============================================ */

/* MOBILE: Smaller button size and adjusted positions */
@media (max-width: 768px) {
  .floating-button,
  .modal-close {
    width: 40px;
    height: 40px;
  }
  
  .floating-button svg,
  .floating-button img,
  .modal-close svg,
  .modal-close img {
    width: var(--button-icon-size-mobile, 22px);
    height: var(--button-icon-size-mobile, 22px);
  }

  .page-back,
  .page-close {
    width: 40px;
    height: 40px;
  }

  .page-back svg,
  .page-back img,
  .page-close svg,
  .page-close img {
    width: var(--button-icon-size-mobile, 22px);
    height: var(--button-icon-size-mobile, 22px);
  }

  .modal-close,
  .page-close {
    right: 16px;
  }

  .page-back {
    left: 16px;
    display: none !important;
  }
}