@tailwind base;
@tailwind components;
@tailwind utilities;

svg {
  fill: currentColor;
}

@layer components {
  .push-button-animation {
    transition: transform 50ms ease-in-out;
    transform: scale(0.97);
  }

  .turbo-progress-bar {
    @apply bg-tg-button !important;
  }

  .cta_whatsapp_main {
    @apply items-center justify-center gap-1 px-8 py-4 font-bold text-white rounded-full shadow transition cursor-pointer bg-gradient-to-r from-[#24D366] to-[#24D366] duration-200 hover:from-purple-600 hover:via-red-400 hover:to-amber-400 animate-text;
  }
  .cta_whisper_main {
    @apply items-center justify-center gap-1 px-8 py-4 font-bold text-white rounded-full shadow transition cursor-pointer bg-gradient-to-r hover:from-[#24D366] hover:to-[#24D366] duration-200 from-purple-600 via-red-400 to-amber-400 animate-text;
  }

  .bg-whatsapp {
    @apply bg-gradient-to-r hover:from-[#24D366] hover:to-[#24D366] animate-text;
  }
  .hover-gradient {
    @apply hover:from-purple-600 hover:via-red-400 hover:to-amber-400;
  }
  .hover-whatsapp {
    @apply hover:from-[#24D366] hover:to-[#24D366];
  }
  .text-gradient {
    @apply text-transparent animate-text bg-gradient-to-r from-purple-600 via-red-400 to-amber-400 bg-clip-text;
  }

  .bg-gradient-joi {
    @apply bg-gradient-to-r from-joi-pink-300 via-joi-pink-200 to-joi-pink-100 animate-text;
  }
  .text-gradient-joi {
    @apply text-transparent animate-text bg-gradient-to-r from-joi-pink-300 via-joi-pink-200 to-joi-pink-100 bg-clip-text;
  }

  .cta_joi_main {
    @apply items-center justify-center gap-1 px-8 py-4 font-bold text-white transition duration-200 transform rounded-full shadow cursor-pointer bg-gradient-to-r hover:scale-110 from-joi-red-200 to-joi-pink-200 animate-text;
  }

  .cta_joi_main_v2 {
    @apply items-center justify-center gap-1 px-8 py-4 font-bold text-white transition duration-200 transform rounded-full shadow cursor-pointer hover:scale-110 bg-joi-pink-200;
  }

  .gradient-text {
    @apply text-transparent animate-text bg-gradient-to-r from-joi-red-200 to-joi-pink-200 bg-clip-text;
  }

  .gradient-bg {
    @apply bg-gradient-to-r from-joi-red-200 to-joi-pink-200 animate-text;
  }
}
/* app/assets/stylesheets/mini_app_floating_ui.css */

/* CSS Variables for Layout Management */
:root {
  /* Floating UI spacing and positioning */
  --cta-bottom: 1rem;
  --navbar-height: 0px; /* Reserved for future navbar */
  --floating-ui-spacing: 1rem;
  
  /* Z-index scale for floating elements */
  --z-layout: 10;
  --z-cta: 20;
  --z-navbar: 30; /* Reserved for future */
  --z-modal: 40;
  --z-tooltip: 50;
  
  /* Safe area handling */
  --safe-area-inset-top: env(safe-area-inset-top);
  --safe-area-inset-right: env(safe-area-inset-right);
  --safe-area-inset-bottom: env(safe-area-inset-bottom);
  --safe-area-inset-left: env(safe-area-inset-left);
}

/* Floating UI Container */
.floating-ui-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none; /* Allow content to be clickable underneath */
  z-index: var(--z-layout);
}

.floating-ui-container > * {
  pointer-events: auto; /* Re-enable pointer events for floating elements */
}

/* Custom CTA Button Enhancements */
.custom-cta-button {
  /* Glass effect for floating button */
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  
  /* Enhanced shadow for floating effect */
  box-shadow: 
    0 8px 32px rgba(0, 0, 0, 0.3),
    0 4px 16px rgba(76, 0, 140, 0.2);
  
  /* Safe area handling */
  margin-bottom: calc(var(--safe-area-inset-bottom) + var(--cta-bottom));
  
  /* Future navbar spacing */
  bottom: calc(var(--navbar-height) + var(--cta-bottom) + var(--safe-area-inset-bottom));
}

/* Responsive adjustments */
@media (max-width: 480px) {
  .custom-cta-button {
    margin-left: 0.75rem;
    margin-right: 0.75rem;
    font-size: 1rem;
  }
}

/* Animation utilities for floating elements */
.slide-up-enter {
  transform: translateY(100%);
  opacity: 0;
}

.slide-up-enter-active {
  transform: translateY(0);
  opacity: 1;
  transition: all 0.3s ease-out;
}

.slide-up-exit {
  transform: translateY(0);
  opacity: 1;
}

.slide-up-exit-active {
  transform: translateY(100%);
  opacity: 0;
  transition: all 0.3s ease-in;
}

/* Content area adjustment for floating elements */
.mini-app-content {
  /* Add bottom padding to prevent content from being hidden behind floating elements */
  padding-bottom: calc(
    var(--navbar-height) + 
    5rem + /* CTA button height + spacing */
    var(--safe-area-inset-bottom) + 
    var(--floating-ui-spacing)
  );
}

/* Remove global padding for payment flow pages that handle CTA spacing manually */
.mini-app-content[data-controller-action="subscriptions-new"],
.mini-app-content[data-controller-action="subscriptions-review"],
.mini-app-content[data-controller-action="topups-new"],
.mini-app-content[data-controller-action="topups-review"] {
  padding-bottom: 0;
}

/* Glass effect utilities for future navbar */
.glass-effect {
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  background: rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.glass-dark {
  background: rgba(28, 28, 29, 0.8); /* tg-secondary-bg with opacity */
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Future navbar placeholder styles */
.bottom-navbar-placeholder {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: var(--navbar-height);
  z-index: var(--z-navbar);
  pointer-events: none;
  
  /* Visual indicator for development (remove in production) */
  background: linear-gradient(
    to top,
    rgba(76, 0, 140, 0.1) 0%,
    transparent 100%
  );
}

/* Smooth transitions for all floating elements */
.floating-element {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Touch-friendly interactive areas */
.touch-target {
  min-height: 44px;
  min-width: 44px;
}

/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {
  .custom-cta-button,
  .floating-element,
  .slide-up-enter-active,
  .slide-up-exit-active {
    transition: none;
  }
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */