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

@layer components {
  /* === GLASSMORPHISM CARD STYLES === */
  .glass-card {
    @apply relative overflow-hidden rounded-2xl;
    @apply bg-white/70 dark:bg-gray-900/70;
    @apply backdrop-blur-xl;
    @apply border border-white/30 dark:border-gray-700/50;
    @apply shadow-glass;
  }

  .glass-card-subtle {
    @apply relative overflow-hidden rounded-xl;
    @apply bg-white/50 dark:bg-gray-800/50;
    @apply backdrop-blur-md;
    @apply border border-white/20 dark:border-gray-700/30;
    @apply shadow-glass-sm;
  }

  /* === GLASS INPUT STYLES === */
  .glass-input {
    @apply w-full rounded-xl px-4 py-3;
    @apply bg-white/60 dark:bg-gray-800/60;
    @apply backdrop-blur-sm;
    @apply border border-gray-200/50 dark:border-gray-600/50;
    @apply text-gray-900 dark:text-white;
    @apply placeholder:text-gray-500 dark:placeholder:text-gray-400;
    @apply focus:border-emerald-500 focus:ring-2 focus:ring-emerald-500/20;
    @apply transition-all duration-200;
  }

  .glass-input:focus {
    @apply bg-white/80 dark:bg-gray-800/80;
    @apply shadow-glow-green;
  }

  /* === SEGMENTED CONTROL (Amount Buttons) === */
  .segmented-control {
    @apply inline-flex w-full rounded-xl p-1;
    @apply bg-gray-100/80 dark:bg-gray-800/80;
    @apply backdrop-blur-sm;
    @apply border border-gray-200/30 dark:border-gray-700/30;
  }

  .segmented-btn {
    @apply flex-1 px-4 py-3 text-center font-medium;
    @apply text-gray-700 dark:text-gray-300;
    @apply rounded-lg transition-all duration-200;
    @apply hover:bg-white/50 dark:hover:bg-gray-700/50;
  }

  .segmented-btn.active,
  .segmented-btn[aria-selected="true"] {
    @apply bg-white dark:bg-gray-700;
    @apply text-emerald-600 dark:text-emerald-400;
    @apply shadow-md;
    @apply font-semibold;
  }

  /* === DONATION TYPE TABS (iOS-style with slide animation) === */
  .donation-tabs {
    @apply relative inline-flex w-full rounded-xl p-1;
    @apply bg-gradient-to-r from-gray-100/90 to-gray-50/90;
    @apply dark:from-gray-800/90 dark:to-gray-900/90;
    @apply backdrop-blur-md;
    @apply border border-white/40 dark:border-gray-700/40;
    @apply shadow-glass-sm;
  }

  .donation-tab {
    @apply flex-1 px-2 sm:px-4 py-2.5 text-xs sm:text-sm font-medium text-center;
    @apply text-gray-600 dark:text-gray-400;
    @apply rounded-lg transition-all duration-300 ease-out;
    @apply relative z-10;
  }

  .donation-tab:hover:not(.donation-tab-active):not([aria-selected="true"]) {
    @apply text-gray-900 dark:text-gray-200;
  }

  .donation-tab-active,
  .donation-tab[aria-selected="true"] {
    @apply text-emerald-600 dark:text-emerald-400;
    @apply font-semibold;
  }

  /* Sliding background indicator */
  .donation-tabs::before {
    content: '';
    @apply absolute top-1 bottom-1 left-1 rounded-lg;
    @apply bg-white dark:bg-gray-700;
    @apply shadow-md;
    @apply transition-all duration-300 ease-out;
    /* Width = (container width - left padding - right padding) / tab count */
    width: calc((100% - 0.5rem) / var(--tab-count, 3));
    /* Left = padding + (slot width * active tab index) */
    transform: translateX(calc(var(--active-tab, 0) * 100%));
  }

  /* === AMOUNT BUTTON GROUP (Segmented iOS-style with slide animation) === */
  .amount-group {
    @apply relative inline-flex w-full rounded-xl p-1;
    @apply bg-gradient-to-r from-gray-100/90 to-gray-50/90;
    @apply dark:from-gray-800/90 dark:to-gray-900/90;
    @apply backdrop-blur-md;
    @apply border border-white/40 dark:border-gray-600/40;
    @apply shadow-glass-sm;
  }

  .amount-btn {
    @apply flex-1 relative py-2.5 sm:py-3 px-1 sm:px-2 text-center;
    @apply text-gray-700 dark:text-gray-300 font-medium;
    @apply rounded-lg transition-all duration-300 ease-out;
    @apply relative z-10;
  }

  .amount-btn span {
    @apply text-base sm:text-lg;
  }

  .amount-btn:hover:not(.selected) {
    @apply text-gray-900 dark:text-gray-100;
  }

  .amount-btn.selected {
    @apply text-white font-bold;
  }

  /* Sliding background for amounts */
  .amount-group::before {
    content: '';
    @apply absolute top-1 bottom-1 rounded-lg;
    @apply bg-emerald-500;
    @apply shadow-glow-green;
    @apply transition-all duration-300 ease-out;
    @apply opacity-0;
    width: calc(100% / var(--amount-count, 4) - 0.25rem);
    left: calc((100% / var(--amount-count, 4)) * var(--active-amount, 0) + 0.25rem);
  }

  .amount-group.has-selection::before {
    @apply opacity-100;
  }

  /* Popular badge styling */
  .amount-badge {
    @apply absolute -bottom-6 left-1/2 transform -translate-x-1/2;
    @apply px-2 py-0.5 text-xs font-semibold;
    @apply bg-emerald-500 text-white rounded-full;
    @apply shadow-sm whitespace-nowrap;
  }

  /* === GLASS CHECKBOX === */
  .glass-checkbox {
    @apply w-5 h-5 rounded-md;
    @apply bg-white/70 dark:bg-gray-700/70;
    @apply border-2 border-gray-300 dark:border-gray-600;
    @apply checked:bg-emerald-500 checked:border-emerald-500;
    @apply focus:ring-2 focus:ring-emerald-500/30 focus:ring-offset-0;
    @apply transition-all duration-200;
  }

  /* === GLASS SELECT === */
  .glass-select {
    @apply w-full rounded-xl px-4 py-3;
    @apply bg-white/60 dark:bg-gray-800/60;
    @apply backdrop-blur-sm;
    @apply border border-gray-200/50 dark:border-gray-600/50;
    @apply text-gray-900 dark:text-white;
    @apply focus:border-emerald-500 focus:ring-2 focus:ring-emerald-500/20;
    @apply transition-all duration-200;
  }

  /* === GLASS BUTTON === */
  .glass-btn-primary {
    @apply w-full py-4 px-6 rounded-xl;
    @apply bg-gradient-to-r from-emerald-500 to-emerald-600;
    @apply text-white font-semibold text-lg;
    @apply shadow-lg shadow-emerald-500/30;
    @apply hover:shadow-xl hover:shadow-emerald-500/40;
    @apply hover:from-emerald-600 hover:to-emerald-700;
    @apply active:scale-[0.98];
    @apply transition-all duration-200;
  }

  .glass-btn-secondary {
    @apply w-full py-3 px-6 rounded-xl;
    @apply bg-white/50 dark:bg-gray-800/50;
    @apply border border-gray-200 dark:border-gray-700;
    @apply text-emerald-600 dark:text-emerald-400 font-medium;
    @apply hover:bg-white dark:hover:bg-gray-800;
    @apply hover:text-emerald-700 dark:hover:text-emerald-300;
    @apply hover:border-emerald-300 dark:hover:border-emerald-700;
    @apply active:scale-[0.98];
    @apply transition-all duration-200;
  }

  /* === GLASS DIVIDER === */
  .glass-divider {
    @apply flex items-center my-6;
  }

  .glass-divider::before,
  .glass-divider::after {
    @apply flex-1 h-px;
    @apply bg-gradient-to-r from-transparent via-gray-300/50 to-transparent;
    content: '';
  }

  .glass-divider-text {
    @apply px-4 text-sm text-gray-500 dark:text-gray-400;
  }

  /* === GLASS ALERT/INFO BOX === */
  .glass-alert {
    @apply rounded-xl p-4;
    @apply backdrop-blur-sm;
    @apply border;
  }

  .glass-alert-info {
    @apply bg-blue-50/80 dark:bg-blue-900/30;
    @apply border-blue-200/50 dark:border-blue-700/50;
    @apply text-blue-800 dark:text-blue-200;
  }

  .glass-alert-success {
    @apply bg-emerald-50/80 dark:bg-emerald-900/30;
    @apply border-emerald-200/50 dark:border-emerald-700/50;
    @apply text-emerald-800 dark:text-emerald-200;
  }

  /* === DONATION SUMMARY CARD === */
  .summary-card {
    @apply rounded-2xl overflow-hidden;
    @apply bg-gradient-to-br from-white/80 via-white/70 to-gray-50/80;
    @apply dark:from-gray-800/80 dark:via-gray-800/70 dark:to-gray-900/80;
    @apply backdrop-blur-xl;
    @apply border border-white/40 dark:border-gray-700/40;
    @apply shadow-glass-lg;
  }

  .summary-card-header {
    @apply px-5 py-4;
    @apply bg-gradient-to-r from-emerald-500/10 to-transparent;
    @apply dark:from-emerald-500/20;
    @apply border-b border-white/30 dark:border-gray-700/30;
  }

  /* === PROCESSING OVERLAY === */
  .glass-overlay {
    @apply fixed inset-0 z-50;
    @apply bg-gray-900/60 backdrop-blur-md;
    @apply flex items-center justify-center;
  }

  .glass-overlay-content {
    @apply p-8 rounded-2xl;
    @apply bg-white/90 dark:bg-gray-800/90;
    @apply backdrop-blur-xl;
    @apply shadow-glass-lg;
    @apply text-center;
  }

  /* === PAYMENT METHOD BUTTONS === */
  .payment-method-btn {
    @apply flex-1 flex items-center justify-center gap-2 py-3 px-4;
    @apply rounded-xl font-medium;
    @apply border-2 border-gray-200 dark:border-gray-700;
    @apply text-gray-700 dark:text-gray-300;
    @apply transition-all duration-200;
    @apply hover:border-emerald-300 hover:bg-emerald-50/50;
    @apply dark:hover:border-emerald-600 dark:hover:bg-emerald-900/30;
  }

  .payment-method-btn.active {
    @apply border-emerald-500 bg-emerald-50 text-emerald-700;
    @apply dark:border-emerald-500 dark:bg-emerald-900/40 dark:text-emerald-300;
    @apply shadow-glow-green;
  }

  /* === STEP INDICATOR WITH PROGRESS BAR === */
  .step-indicator {
    @apply flex items-center justify-center gap-0;
  }

  .step-dot {
    @apply w-8 h-8 rounded-full flex items-center justify-center;
    @apply bg-gray-200 dark:bg-gray-700;
    @apply text-gray-500 dark:text-gray-400 text-sm font-semibold;
    @apply transition-all duration-500 ease-out;
    @apply relative z-10;
  }

  .step-dot.active {
    @apply bg-emerald-500 text-white;
    @apply shadow-glow-green;
    @apply scale-110;
    animation: pulse-glow 2s ease-in-out infinite;
  }

  .step-dot.completed {
    @apply bg-emerald-500 text-white;
  }

  .step-line {
    @apply w-16 h-1 rounded-full;
    @apply bg-gray-200 dark:bg-gray-700;
    @apply relative overflow-hidden;
  }

  .step-line::after {
    content: '';
    @apply absolute inset-y-0 left-0 w-0;
    @apply bg-emerald-500;
    @apply transition-all duration-500 ease-out;
    @apply rounded-full;
  }

  .step-line.active::after {
    @apply w-full;
  }

  .step-line.filling::after {
    animation: fill-progress 0.5s ease-out forwards;
  }

  @keyframes fill-progress {
    from { width: 0; }
    to { width: 100%; }
  }

  @keyframes pulse-glow {
    0%, 100% {
      box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4);
    }
    50% {
      box-shadow: 0 0 0 8px rgba(16, 185, 129, 0);
    }
  }

  /* === STEP CONTENT WITH SLIDE ANIMATION === */
  .step-content {
    @apply transition-opacity duration-200 ease-out;
  }

  .step-content.slide-out-left {
    @apply opacity-0;
    transform: translateX(-20px);
  }

  .step-content.slide-out-right {
    @apply opacity-0;
    transform: translateX(20px);
  }

  .step-content.slide-in-left,
  .step-content.slide-in-right {
    animation: fadeSlideIn 0.25s ease-out forwards;
  }

  @keyframes fadeSlideIn {
    from {
      opacity: 0;
      transform: translateY(10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes slideIn {
    from {
      opacity: 0;
      transform: translateY(10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  @keyframes slideOutLeft {
    from {
      opacity: 1;
      transform: translateX(0);
    }
    to {
      opacity: 0;
      transform: translateX(-30px);
    }
  }

  @keyframes slideOutRight {
    from {
      opacity: 1;
      transform: translateX(0);
    }
    to {
      opacity: 0;
      transform: translateX(30px);
    }
  }

  @keyframes slideInLeft {
    from {
      opacity: 0;
      transform: translateX(30px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  @keyframes slideInRight {
    from {
      opacity: 0;
      transform: translateX(-30px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  /* === EXPRESS CHECKOUT ANIMATIONS === */
  /* Smooth upward slide when hiding express checkout */
  .express-hiding {
    animation: expressSlideUp 0.3s ease-out forwards;
    overflow: hidden;
  }

  .express-hidden {
    display: none !important;
  }

  .express-showing {
    animation: expressSlideDown 0.3s ease-out forwards;
    overflow: hidden;
  }

  @keyframes expressSlideUp {
    from {
      opacity: 1;
      max-height: 200px;
      margin-bottom: 1.5rem;
      transform: translateY(0);
    }
    to {
      opacity: 0;
      max-height: 0;
      margin-bottom: 0;
      transform: translateY(-20px);
    }
  }

  @keyframes expressSlideDown {
    from {
      opacity: 0;
      max-height: 0;
      margin-bottom: 0;
      transform: translateY(-20px);
    }
    to {
      opacity: 1;
      max-height: 200px;
      margin-bottom: 1.5rem;
      transform: translateY(0);
    }
  }
}

@layer utilities {
  /* Gradient text utility */
  .text-gradient-primary {
    @apply bg-gradient-to-r from-emerald-500 to-emerald-600 bg-clip-text text-transparent;
  }

  /* Glass border glow */
  .border-glow {
    box-shadow:
      0 0 0 1px rgba(255, 255, 255, 0.1),
      inset 0 1px 0 0 rgba(255, 255, 255, 0.1);
  }

  /* Hide scrollbar for carousel */
  .scrollbar-hide {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
  }

  .scrollbar-hide::-webkit-scrollbar {
    display: none;  /* Chrome, Safari and Opera */
  }

  /* Line clamp utilities */
  .line-clamp-1 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
  }

  .line-clamp-2 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }

  /* Heartbeat animation for donate button */
  .animate-heartbeat {
    animation: heartbeat 3s ease-in-out infinite;
  }

  @keyframes heartbeat {
    0%, 100% {
      transform: scale(1);
    }
    7% {
      transform: scale(1.15);
    }
    14% {
      transform: scale(1);
    }
    21% {
      transform: scale(1.15);
    }
    28% {
      transform: scale(1);
    }
  }

  /* Subtle pulse animation for login button */
  .animate-pulse-subtle {
    animation: pulse-subtle 2s ease-in-out infinite;
  }

  @keyframes pulse-subtle {
    0%, 100% {
      opacity: 1;
      transform: scale(1);
    }
    50% {
      opacity: 0.85;
      transform: scale(1.05);
    }
  }

  /* Auth menu animations */
  .auth-menu {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.2s ease-out, transform 0.2s ease-out;
  }

  .auth-menu.menu-open {
    opacity: 1;
    transform: translateY(0);
  }

  .auth-menu-item {
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.15s ease-out, transform 0.15s ease-out;
  }

  .auth-menu.menu-open .auth-menu-item {
    opacity: 1;
    transform: scale(1);
  }

  .auth-menu.menu-open .auth-menu-item:nth-child(1) {
    transition-delay: 0.1s;
  }

  .auth-menu.menu-open .auth-menu-item:nth-child(2) {
    transition-delay: 0.05s;
  }
}
/*
 * 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.
 *


 */