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

@import "./main.css";

@layer base {
  @font-face {
    font-family: 'Audiowide';
    src: url('/font/Audiowide-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
  }
  
  :root {
    --color-primary: #F8C630;
    --color-primary-light: #F8C630/90;
    --color-primary-lighter: #F8C630/80;
    --color-primary-lightest: #F8C630/60;
    --color-primary-very-light: #F8C630/50;
    --color-primary-ultra-light: #F8C630/30;
    --color-primary-minimal: #F8C630/20;
    --color-primary-trace: #F8C630/10;
    --color-primary-5: #F8C630/5;
    
    --color-background: #1A1A2E;
    --color-background-light: #1A1A2E/80;
    
    --color-surface: #FFFFFF33;
    --color-surface-light: #FFFFFF20;
    --color-surface-lighter: #FFFFFF10;
    
    --color-border: #F8C630/20;
    --color-border-light: #F8C630/10;
    --color-border-lighter: #F8C630/5;
  }
  
  body {
    @apply bg-[#1A1A2E] text-[#F8C630];
  }
}

@layer utilities {
  /* Responsive Logo/Text Display */
  .mobile-logo {
    display: none;
  }
  .desktop-text {
    display: block;
  }
  
  /* @media (min-width: 640px) {
    .mobile-logo {
      display: none;
    }
    .desktop-text {
      display: block;
    }
  } */

  /* Text Utilities */
  .text-primary { @apply text-[#F8C630]; }
  .text-primary-light { @apply text-[#F8C630]/80; }
  .text-primary-lighter { @apply text-[#F8C630]/60; }
  .text-primary-lightest { @apply text-[#F8C630]/40; }
  .text-primary-very-light { @apply text-[#F8C630]/30; }
  .text-primary-ultra-light { @apply text-[#F8C630]/20; }
  .text-primary-minimal { @apply text-[#F8C630]/15; }
  .text-primary-trace { @apply text-[#F8C630]/10; }
  .text-primary-5 { @apply text-[#F8C630]/5; }
  
  .text-background { @apply text-[#1A1A2E]; }
  .text-background-light { @apply text-[#1A1A2E]/80; }
  
  .text-surface { @apply text-[#FFFFFF33]; }
  .text-surface-light { @apply text-[#FFFFFF20]; }
  
  /* Background Utilities */
  .bg-primary { @apply bg-[#F8C630]; }
  .bg-primary-light { @apply bg-[#F8C630]/90; }
  .bg-primary-lighter { @apply bg-[#F8C630]/80; }
  .bg-primary-lightest { @apply bg-[#F8C630]/60; }
  .bg-primary-very-light { @apply bg-[#F8C630]/50; }
  .bg-primary-ultra-light { @apply bg-[#F8C630]/30; }
  .bg-primary-minimal { @apply bg-[#F8C630]/20; }
  .bg-primary-trace { @apply bg-[#F8C630]/10; }
  .bg-primary-5 { @apply bg-[#F8C630]/5; }
  
  .bg-background { @apply bg-[#1A1A2E]; }
  .bg-background-light { @apply bg-[#1A1A2E]/80; }
  
  .bg-surface { @apply bg-[#FFFFFF33]; }
  .bg-surface-light { @apply bg-[#FFFFFF20]; }
  .bg-surface-lighter { @apply bg-[#FFFFFF10]; }
  
  /* Border Utilities */
  .border-primary { @apply border-[#F8C630]; }
  .border-primary-light { @apply border-[#F8C630]/80; }
  .border-primary-lighter { @apply border-[#F8C630]/60; }
  .border-primary-lightest { @apply border-[#F8C630]/40; }
  .border-primary-very-light { @apply border-[#F8C630]/30; }
  .border-primary-ultra-light { @apply border-[#F8C630]/20; }
  .border-primary-minimal { @apply border-[#F8C630]/15; }
  .border-primary-trace { @apply border-[#F8C630]/10; }
  .border-primary-5 { @apply border-[#F8C630]/5; }
  
  .border-background { @apply border-[#1A1A2E]; }
  .border-background-light { @apply border-[#1A1A2E]/80; }
  
  .border-surface { @apply border-[#FFFFFF33]; }
  .border-surface-light { @apply border-[#FFFFFF20]; }
  
  .border-border { @apply border-[#F8C630]/20; }
  .border-border-light { @apply border-[#F8C630]/10; }
  .border-border-lighter { @apply border-[#F8C630]/5; }
  
  /* Placeholder Utilities */
  .placeholder-primary { @apply placeholder-[#F8C630]; }
  .placeholder-primary-light { @apply placeholder-[#F8C630]/80; }
  .placeholder-primary-lighter { @apply placeholder-[#F8C630]/60; }
  .placeholder-primary-lightest { @apply placeholder-[#F8C630]/40; }
  .placeholder-primary-very-light { @apply placeholder-[#F8C630]/30; }
  .placeholder-primary-ultra-light { @apply placeholder-[#F8C630]/20; }
  .placeholder-primary-minimal { @apply placeholder-[#F8C630]/15; }
  .placeholder-primary-trace { @apply placeholder-[#F8C630]/10; }
  .placeholder-primary-5 { @apply placeholder-[#F8C630]/5; }
  
  /* Gradient Utilities */
  .from-primary-trace { @apply from-[#F8C630]/10; }
  .to-primary-5 { @apply to-[#F8C630]/5; }
}

@layer components {
  /* Button Components */
  .btn-primary {
    @apply bg-transparent text-primary px-6 py-3 rounded-lg font-semibold border-2 border-primary hover:bg-primary hover:text-background transition-all duration-300;
  }
  
  /* Form Components */
  .form-input {
    @apply w-full px-4 py-3 bg-surface border border-border rounded-lg text-primary placeholder-primary-very-light focus:outline-none focus:ring-2 focus:ring-primary focus:border-transparent transition-all duration-300;
  }
  
  .form-label {
    @apply block text-sm font-medium text-primary mb-2;
  }
  
  .form-error {
    @apply text-red-400 text-sm mt-1;
  }
  
  /* Card Components */
  .card {
    @apply bg-surface border border-border rounded-lg p-6 shadow-lg;
  }
  
  .card-header {
    @apply border-b border-border pb-4 mb-4;
  }
  
  .card-title {
    @apply text-2xl font-bold text-primary;
  }
  
  .card-subtitle {
    @apply text-primary-light mt-2;
  }
  
  /* Navigation Components */
  .nav-link {
    @apply text-primary-light hover:text-primary transition-colors duration-300 px-3 py-2 rounded-md text-sm font-medium;
  }
  
  .nav-link.active {
    @apply text-primary bg-primary-trace;
  }
  
  /* Section Components */
  .section-title {
    @apply text-4xl font-bold text-primary text-center;
  }
  
  .section-subtitle {
    @apply text-xl text-primary-light text-center max-w-2xl mx-auto;
  }
  
  /* Container Components */
  .container-custom {
    @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
  }
  
  /* Hero Section */
  .hero-section {
    @apply min-h-screen flex items-center justify-center;
  }

  .main-container {
    @apply flex flex-1 flex-col gap-4 px-4 my-4;
  }
  
  .hero-content {
    @apply text-center max-w-4xl mx-auto px-4;
  }
  
  /* Search Form */
  .search-form {
    @apply max-w-md mx-auto bg-surface border border-border rounded-lg p-6 shadow-lg;
  }
  
  .search-input-group {
    @apply mb-4;
  }
  
  .search-button {
    @apply w-full btn-primary;
  }
  
  /* How It Works */
  .how-it-works {
    @apply py-16 bg-surface-light;
  }
  
  .step-card {
    @apply text-center p-6;
  }
  
  .step-number {
    @apply w-16 h-16 bg-primary text-background rounded-full flex items-center justify-center text-2xl font-bold mx-auto mb-4;
  }
  
  .step-title {
    @apply text-xl font-semibold text-primary mb-4;
  }
  
  .step-description {
    @apply text-primary-light;
  }
  
  /* Footer */
  .footer {
    @apply bg-background-light border-t border-border py-8 mt-16;
  }
  
  .footer-content {
    @apply container-custom text-center;
  }
  
  .footer-copyright {
    @apply text-primary;
  }
  
  /* Modal Components */
  .modal {
    @apply fixed inset-0 bg-black flex items-center justify-center z-[9999] opacity-0 pointer-events-none transition-all duration-300;
    /* Prevent body scrolling when modal is open */
    overflow: hidden;
  }
  
  .modal.show {
    @apply opacity-100 pointer-events-auto;
  }
  
  .modal-content {
    @apply bg-background border border-border rounded-lg p-6 max-w-md w-full mx-4 transform scale-95 transition-transform duration-300;
    max-height: 90vh;
    overflow-y: auto;
    background-color: #1A1A2E !important;
    opacity: 1 !important;
  }
  
  .modal.show .modal-content {
    @apply scale-100;
  }
  
  .modal-content-inner {
    background-color: #1A1A2E !important;
    opacity: 1 !important;
  }
  
  /* Photo grid styling */
  .photo-item {
    @apply transition-all duration-300;
  }
  
  .photo-item:hover {
    @apply shadow-xl;
  }
  
  .photo-item img {
    @apply transition-all duration-300;
  }
  
  .photo-item:hover img {
    @apply transform scale-105;
  }
  
  /* Photo modal specific styling - make it truly fullscreen */
  .modal.photo-modal {
    @apply bg-black;
  }
  
  .modal.photo-modal .modal-content {
    @apply max-w-none w-full h-full mx-0 p-0 border-0 rounded-none bg-transparent;
    max-height: none;
    overflow: hidden;
  }
  
  .modal.photo-modal .modal-header {
    @apply absolute top-4 right-4 z-10 bg-black bg-opacity-50 rounded-lg p-2;
  }
  
  .modal.photo-modal .modal-body {
    @apply h-full flex items-center justify-center p-0;
  }
  
  .modal.photo-modal .modal-content img {
    @apply max-h-none h-full w-full object-contain;
    /* Ensure image fits within viewport without overflow */
    max-width: 100vw;
    max-height: 100vh;
    width: auto;
    height: auto;
  }
  
  /* Image loading states */
  .modal.photo-modal .image-container {
    @apply relative w-full h-full flex items-center justify-center;
  }
  
  .modal.photo-modal .image-loading {
    @apply absolute inset-0 flex items-center justify-center bg-black bg-opacity-20;
    z-index: 5;
  }
  
  .modal.photo-modal .loading-spinner {
    @apply w-16 h-16 border-4 border-white border-t-transparent rounded-full animate-spin;
  }
  
  .modal.photo-modal .loading-text {
    @apply text-white text-lg font-medium mt-4;
  }
  
  .modal.photo-modal .image-placeholder {
    @apply w-full h-full bg-gray-800 flex items-center justify-center;
  }
  
  .modal.photo-modal .image-placeholder-text {
    @apply text-white text-xl opacity-60;
  }
  
  /* Download button in photo modal */
  .modal.photo-modal .download-btn {
    @apply absolute bottom-4 left-1/2 transform -translate-x-1/2 bg-black bg-opacity-50 hover:bg-opacity-70 text-white border-0;
  }
  
  /* Navigation arrows in photo modal */
  .modal.photo-modal .left-arrow,
  .modal.photo-modal .right-arrow {
    @apply absolute top-1/2 transform -translate-y-1/2 bg-black bg-opacity-60 hover:bg-opacity-80 text-white p-4 rounded-full transition-all duration-200 z-20;
    font-size: 2rem;
    font-weight: bold;
    min-width: 4rem;
    min-height: 4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  }
  
  .modal.photo-modal .left-arrow {
    @apply left-4;
  }
  
  .modal.photo-modal .right-arrow {
    @apply right-4;
  }
  
  /* Right arrow indicator - always visible when there are more photos */
  .modal.photo-modal .right-arrow-indicator {
    @apply absolute right-4 top-1/2 transform -translate-y-1/2 text-white text-5xl opacity-40 pointer-events-none z-10;
    animation: pulse-right 2s infinite;
    font-weight: bold;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
  }
  
  /* Left arrow indicator - always visible when there are previous photos */
  .modal.photo-modal .left-arrow-indicator {
    @apply absolute left-4 top-1/2 transform -translate-y-1/2 text-white text-5xl opacity-40 pointer-events-none z-10;
    animation: pulse-left 2s infinite;
    font-weight: bold;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
  }
  
  /* Pulse animations for indicators */
  @keyframes pulse-right {
    0%, 100% { opacity: 0.4; transform: translateY(-50%) translateX(0); }
    50% { opacity: 0.7; transform: translateY(-50%) translateX(-8px); }
  }
  
  @keyframes pulse-left {
    0%, 100% { opacity: 0.4; transform: translateY(-50%) translateX(0); }
    50% { opacity: 0.7; transform: translateY(-50%) translateX(8px); }
  }
  
  /* Enhanced hover effects for interactive arrows */
  .modal.photo-modal .left-arrow:hover,
  .modal.photo-modal .right-arrow:hover {
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
  }
  
  /* Arrow indicator hover effects */
  .modal.photo-modal .left-arrow-indicator:hover,
  .modal.photo-modal .right-arrow-indicator:hover {
    opacity: 0.8 !important;
    transform: translateY(-50%) scale(1.05);
  }
  
  /* Photo counter in modal */
  .modal.photo-modal .photo-counter {
    @apply absolute top-4 left-4 bg-black bg-opacity-50 text-white px-3 py-1 rounded-lg text-sm z-20;
  }
  
  /* Download button states */
  .download-btn:disabled {
    @apply opacity-50 cursor-not-allowed;
  }
  
  .download-btn .download-icon {
    @apply transition-all duration-200;
  }
  
  .download-btn:disabled .download-icon {
    @apply animate-pulse;
  }
  
  .modal-header {
    @apply flex justify-between items-center mb-4 pb-2 border-b border-border gap-4;
  }
  
  .modal-title {
    @apply text-xl font-semibold text-primary;
  }
  
  .modal-close {
    @apply text-primary-light hover:text-primary text-2xl font-bold cursor-pointer transition-colors duration-200;
  }
  
  .modal-body {
    @apply text-primary-light;
  }
  
  /* Alert Components */
  .alert {
    @apply p-4 rounded-lg mb-4;
  }
  
  .alert-success {
    @apply bg-green-500/20 border border-green-500/30 text-green-400;
  }
  
  .alert-error {
    @apply bg-red-500/20 border border-red-500/30 text-red-400;
  }
  
  .alert-warning {
    @apply bg-yellow-500/20 border border-yellow-500/30 text-yellow-400;
  }
  
  .alert-info {
    @apply bg-blue-500/20 border border-blue-500/30 text-blue-400;
  }
  
  /* Loading Spinner */
  .loading-spinner {
    @apply inline-block w-6 h-6 border-2 border-primary border-t-transparent rounded-full animate-spin;
  }
  
  /* Responsive Utilities */
  .mobile-only {
    @apply block md:hidden;
  }
  
  .desktop-only {
    @apply hidden md:block;
  }
  
  /* Custom font class for BibSpot branding */
  .font-bibspot {
    font-family: 'Audiowide', cursive;
  }
}