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

/*

@layer components {
  .btn-primary {
    @apply py-2 px-4 bg-blue-200;
  }
}

*/

/* Estilos Material Design adicionais */
@layer components {
  /* Cards com elevação Material */
  .material-card {
    @apply bg-white rounded-xl shadow-lg border border-gray-100 hover:shadow-xl transition-all duration-300;
  }
  
  /* Botões Material Design */
  .btn-material-primary {
    @apply inline-flex items-center px-6 py-3 border border-transparent text-sm font-medium rounded-lg shadow-sm text-white bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-all duration-200 transform hover:scale-105;
  }
  
  .btn-material-secondary {
    @apply inline-flex items-center px-6 py-3 border border-gray-300 shadow-sm text-sm font-medium rounded-lg text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-all duration-200 transform hover:scale-105;
  }
  
  .btn-material-success {
    @apply inline-flex items-center px-6 py-3 border border-transparent text-sm font-medium rounded-lg shadow-sm text-white bg-gradient-to-r from-green-600 to-emerald-600 hover:from-green-700 hover:to-emerald-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 transition-all duration-200 transform hover:scale-105;
  }
  
  /* Inputs Material Design */
  .input-material {
    @apply w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all duration-200 text-gray-900 placeholder-gray-500;
  }
  
  /* Stepper Material Design */
  .stepper-container {
    @apply relative flex items-center justify-between w-full max-w-4xl mx-auto;
  }
  
  .stepper-background-line {
    @apply absolute left-0 top-1/2 h-1 w-full -translate-y-1/2 bg-gray-200 rounded-full;
  }
  
  .stepper-progress-line {
    @apply absolute left-0 top-1/2 h-1 bg-gradient-to-r from-blue-500 to-indigo-600 transition-all duration-700 ease-out -translate-y-1/2 rounded-full;
  }
  
  .stepper-step {
    @apply relative z-10 flex flex-col items-center;
  }
  
  .stepper-circle {
    @apply grid w-12 h-12 text-sm font-semibold text-white bg-gradient-to-r from-blue-500 to-indigo-600 rounded-full place-items-center transition-all duration-300 shadow-lg hover:shadow-xl transform hover:scale-105;
  }
  
  .stepper-circle.completed {
    @apply bg-gradient-to-r from-green-500 to-emerald-600;
  }
  
  .stepper-circle.pending {
    @apply bg-gray-300 text-gray-900;
  }
  
  .stepper-label {
    @apply mt-3 text-sm font-medium text-gray-600;
  }
  
  .stepper-label.active {
    @apply text-blue-600 font-semibold;
  }
  
  .stepper-label.completed {
    @apply text-green-600 font-semibold;
  }
  
  /* Animações Material Design */
  .material-ripple {
    @apply relative overflow-hidden;
  }
  
  .material-ripple::after {
    content: '';
    @apply absolute inset-0 bg-white opacity-0 transition-opacity duration-300;
  }
  
  .material-ripple:active::after {
    @apply opacity-20;
  }
  
  /* Transições suaves */
  .transition-material {
    @apply transition-all duration-300 ease-out;
  }
  
  /* Gradientes Material */
  .gradient-primary {
    @apply bg-gradient-to-r from-blue-600 via-blue-700 to-indigo-800;
  }
  
  .gradient-success {
    @apply bg-gradient-to-r from-green-600 to-emerald-600;
  }
  
  .gradient-warning {
    @apply bg-gradient-to-r from-yellow-500 to-orange-500;
  }
  
  .gradient-danger {
    @apply bg-gradient-to-r from-red-500 to-pink-500;
  }
  
  /* Sombras Material */
  .shadow-material-1 {
    @apply shadow-sm;
  }
  
  .shadow-material-2 {
    @apply shadow-md;
  }
  
  .shadow-material-3 {
    @apply shadow-lg;
  }
  
  .shadow-material-4 {
    @apply shadow-xl;
  }
  
  .shadow-material-5 {
    @apply shadow-2xl;
  }
  
  /* Estados de hover melhorados */
  .hover-material {
    @apply hover:shadow-lg hover:scale-105 transition-all duration-200;
  }
  
  /* Loading states */
  .loading-material {
    @apply relative overflow-hidden;
  }
  
  .loading-material::before {
    content: '';
    @apply absolute inset-0 bg-gradient-to-r from-transparent via-white to-transparent opacity-20 animate-pulse;
  }
}

/* Animações customizadas */
@keyframes material-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

@keyframes material-slide-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes material-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.animate-material-pulse {
  animation: material-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.animate-material-slide-up {
  animation: material-slide-up 0.5s ease-out;
}

.animate-material-fade-in {
  animation: material-fade-in 0.3s ease-out;
}

/* Responsividade Material */
@media (max-width: 640px) {
  .stepper-container {
    @apply max-w-sm;
  }
  
  .stepper-circle {
    @apply w-10 h-10;
  }
  
  .stepper-label {
    @apply text-xs;
  }
}

/* Dark mode support (opcional) */
@media (prefers-color-scheme: dark) {
  .material-card {
    @apply bg-gray-800 border-gray-700;
  }
  
  .input-material {
    @apply bg-gray-700 border-gray-600 text-white placeholder-gray-400;
  }
}
/* Mobile Optimizations for Menu */

/* Line clamp utilities for text truncation */
.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;
}

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

/* Item layout improvements */
.item-container {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  width: 100%;
}

.item-image-container {
  flex-shrink: 0;
  width: 4rem;
  height: 4rem;
}

@media (min-width: 768px) {
  .item-image-container {
    width: 5rem;
    height: 5rem;
  }
}

.item-image {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 0.5rem;
}

.item-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 4rem;
  position: relative;
}

@media (min-width: 768px) {
  .item-content {
    min-height: 5rem;
  }
}

.item-header {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  margin-bottom: 0.5rem;
  min-height: 0;
}

.item-header h4 {
  margin-bottom: 0.25rem;
  line-height: 1.2;
}

.item-header p {
  line-height: 1.4;
  margin: 0;
}

.item-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  margin-top: auto;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}

/* Prevent zoom on input focus for iOS */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
  select,
  textarea,
  input {
    font-size: 16px;
  }
}

/* Better touch feedback */
.touch-target {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
  touch-action: manipulation;
}

/* Smooth animations for mobile */
@media (prefers-reduced-motion: no-preference) {
  .card-hover {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
  
  .modal-transition {
    transition: opacity 0.3s ease, transform 0.3s ease;
  }
}

/* Horizontal Scroll Styles */
#offers-scroll-container {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
}

#offers-scroll-container::-webkit-scrollbar {
  display: none; /* Chrome, Safari and Opera */
}

#offers-scroll {
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  display: flex;
  min-width: -moz-max-content;
  min-width: max-content;
  gap: 1rem; /* 16px */
}

@media (min-width: 768px) {
  #offers-scroll {
    gap: 1.5rem; /* 24px */
  }
}

.offer-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  flex-shrink: 0;
  width: 320px; /* w-80 */
}

@media (min-width: 768px) {
  .offer-card {
    width: 384px; /* w-96 */
  }
}

.offer-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
}

/* Scroll Indicators */
.scroll-indicator {
  cursor: pointer;
  transition: all 0.3s ease;
}

.scroll-indicator:hover {
  transform: scale(1.2);
}

.scroll-indicator.active {
  background-color: #3b82f6;
  transform: scale(1.1);
}

/* Navigation Buttons */
#scroll-left,
#scroll-right {
  transition: all 0.3s ease;
  z-index: 10;
}

#scroll-left:hover,
#scroll-right:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

#scroll-left:disabled,
#scroll-right:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

/* Gradient Overlays */
.gradient-overlay-left,
.gradient-overlay-right {
  pointer-events: none;
  z-index: 5;
}

/* Mobile-specific scroll optimizations */
@media (max-width: 768px) {
  #offers-scroll {
    scroll-snap-type: x mandatory;
  }
  
  .offer-card {
    scroll-snap-align: start;
    min-width: 280px;
  }
  
  .scroll-indicator {
    min-width: 8px;
    min-height: 8px;
  }
}

/* Touch scroll improvements */
@media (hover: none) and (pointer: coarse) {
  .offer-card {
    cursor: grab;
  }
  
  .offer-card:active {
    cursor: grabbing;
  }
}

/* Mobile-specific spacing */
@media (max-width: 768px) {
  /* Reduce padding on mobile */
  .mobile-padding {
    padding: 0.75rem;
  }
  
  /* Better button spacing */
  .mobile-button-group {
    gap: 0.5rem;
  }
  
  /* Optimize text sizes for mobile */
  .mobile-heading {
    font-size: 1.25rem;
    line-height: 1.4;
  }
  
  .mobile-subheading {
    font-size: 1rem;
    line-height: 1.5;
  }
  
  /* Better modal positioning */
  .mobile-modal {
    margin: 1rem;
    max-height: calc(100vh - 2rem);
  }
  
  /* Improve scrolling performance */
  .mobile-scroll {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
  }
  
  /* Better image handling */
  .mobile-image {
    -o-object-fit: cover;
       object-fit: cover;
    width: 100%;
    height: 100%;
  }
  
  /* Optimize grid for mobile */
  .mobile-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  /* Better spacing for mobile */
  .mobile-spacing {
    margin-bottom: 1rem;
  }
  
  .mobile-spacing-lg {
    margin-bottom: 1.5rem;
  }
}

/* Landscape mobile optimizations */
@media (max-width: 768px) and (orientation: landscape) {
  .mobile-modal {
    max-height: 80vh;
  }
  
  .mobile-heading {
    font-size: 1.125rem;
  }
}

/* High DPI display optimizations */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .mobile-image {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
  }
}

/* Dark mode support for mobile */
@media (prefers-color-scheme: dark) {
  .mobile-dark {
    background-color: #1a1a1a;
    color: #ffffff;
  }
  
  .mobile-dark-card {
    background-color: #2d2d2d;
    border-color: #404040;
  }
}

/* Accessibility improvements for mobile */
@media (max-width: 768px) {
  /* Larger touch targets */
  .mobile-accessible {
    min-height: 48px;
    min-width: 48px;
  }
  
  /* Better focus indicators */
  .mobile-focus:focus {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
  }
  
  /* Improved contrast for small text */
  .mobile-text {
    color: #374151;
  }
  
  .mobile-text-light {
    color: #6b7280;
  }
}

/* Performance optimizations */
.mobile-optimized {
  will-change: transform;
  backface-visibility: hidden;
  transform: translateZ(0);
}

/* Loading states for mobile */
.mobile-loading {
  opacity: 0.7;
  pointer-events: none;
}

.mobile-loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 20px;
  margin: -10px 0 0 -10px;
  border: 2px solid #f3f4f6;
  border-top: 2px solid #3b82f6;
  border-radius: 50%;
  animation: mobile-spin 1s linear infinite;
}

@keyframes mobile-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Mobile-specific animations */
@media (max-width: 768px) {
  .mobile-fade-in {
    animation: mobile-fade-in 0.3s ease-in-out;
  }
  
  .mobile-slide-up {
    animation: mobile-slide-up 0.3s ease-out;
  }
}

@keyframes mobile-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes mobile-slide-up {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Mobile gesture support */
.mobile-swipe {
  touch-action: pan-y;
}

.mobile-pinch {
  touch-action: pinch-zoom;
}

/* Mobile-specific utility classes */
.mobile-hidden {
  display: none !important;
}

.mobile-visible {
  display: block !important;
}

@media (min-width: 769px) {
  .mobile-hidden {
    display: block !important;
  }
  
  .mobile-visible {
    display: none !important;
  }
} 
/*
 * 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.
 *


 */