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

/* Telegram Mini App CSS Variables */
:root {
  /* Safe area environment variables with fallbacks */
  --safe-area-inset-top: env(safe-area-inset-top, 20px);
  --safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);
  --safe-area-inset-left: env(safe-area-inset-left, 0px);
  --safe-area-inset-right: env(safe-area-inset-right, 0px);
  
  /* Legacy support variables (can be overridden by JS if needed) */
  --tg-safe-area-inset-top: var(--safe-area-inset-top);
  --tg-safe-area-inset-bottom: var(--safe-area-inset-bottom);
  --tg-safe-area-inset-left: var(--safe-area-inset-left);
  --tg-safe-area-inset-right: var(--safe-area-inset-right);
}

svg {
  fill: currentColor;
}

@layer components {
  /* Safe Area Utility Classes */
  .pt-safe {
    padding-top: var(--safe-area-inset-top);
  }
  
  .pb-safe {
    padding-bottom: var(--safe-area-inset-bottom);
  }
  
  .px-safe {
    padding-left: var(--safe-area-inset-left);
    padding-right: var(--safe-area-inset-right);
  }
  
  .p-safe {
    padding-top: var(--safe-area-inset-top);
    padding-bottom: var(--safe-area-inset-bottom);
    padding-left: var(--safe-area-inset-left);
    padding-right: var(--safe-area-inset-right);
  }

  /* Fullscreen mode adjustments (optional, if needed) */
  .tg-fullscreen-mode {
    /* Additional fullscreen-specific styling if needed */
    /* Note: Safe areas are handled by body padding now */
  }

  .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;
  }

  /* Heart icon states for post interactions */
  .heart-liked {
    @apply text-red-500 transition-colors duration-200;
  }

  .heart-unliked {
    @apply text-gray-600 transition-colors duration-200;
  }

  .heart-unliked:hover {
    @apply text-red-500;
  }

  .bottom-padding {
    bottom: calc(2rem + env(safe-area-inset-bottom));
  }
}
/*
 * 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.
 *


 */