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

@layer base {
    * {
        box-sizing: border-box;
    }
    
    body {
        box-sizing: border-box;
        overflow-x: hidden;
        margin: 0;
        padding: 0;
    }
    
    html {
        overflow-x: hidden;
    }
}

@layer components {
    .product-card {
        @apply transition-all duration-200;
        max-width: 100%;
    }
    
    /* Modal scroll improvements for mobile */
    .modal-scroll {
        max-height: calc(100vh - 2rem);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }
    
    .product-card:hover {
        @apply -translate-y-1 shadow-2xl;
    }
    
    .search-input:focus {
        @apply outline-none ring-4 ring-yellow-400/30;
    }
    
    /* Previne zoom no mobile ao focar no input de busca */
    @media (max-width: 640px) {
        .search-input {
            font-size: 16px !important;
        }
        
        input[type="text"].search-input,
        input[type="search"].search-input {
            font-size: 16px !important;
        }
    }
    
    .carousel-track {
        padding-left: 1rem;
        padding-right: 1rem;
        transition: transform 0.3s ease;
    }
    
    /* Responsive containers */
    .carousel-container {
        overflow-x: auto;
        width: 100%;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        scrollbar-color: rgba(59, 130, 246, 0.5) transparent;
    }
    
    .carousel-container::-webkit-scrollbar {
        height: 8px;
    }
    
    .carousel-container::-webkit-scrollbar-track {
        background: transparent;
    }
    
    .carousel-container::-webkit-scrollbar-thumb {
        background-color: rgba(59, 130, 246, 0.5);
        border-radius: 4px;
    }
    
    .carousel-container::-webkit-scrollbar-thumb:hover {
        background-color: rgba(59, 130, 246, 0.7);
    }
    
    /* Mobile specific fixes */
    @media (max-width: 640px) {
        .product-card {
            min-width: 0;
        }
        /* Remove zoom on images in mobile */
        img.card-zoom {
            transform: none !important;
        }
    }
}

@layer utilities {
    .scrollbar-hide {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
    
    .scrollbar-hide::-webkit-scrollbar {
        display: none;
    }
}

/* Desktop zoom for product card images */
img.card-zoom {
    transform: scale(1.25);
    transition: transform 0.2s ease;
}

/* Hide only text and buttons inside banner slides */
#bannerSlides h2,
#bannerSlides p,
#bannerSlides button[type="button"] {
    display: none !important;
}

/* Hide navigation arrows */
button[onclick="previousBanner()"],
button[onclick="nextBanner()"] {
    display: none !important;
}

/* Header Fixed Styles */
header {
    background: linear-gradient(90deg, #141722 60%, #251d1c 100%);
    backdrop-filter: blur(2.5px);
    border-bottom: 2.5px solid #ff6a00;
    box-shadow: 0 2px 32px 0 #0c0a13b3;
    opacity: 0.97;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 9999 !important;
}

/* Garantir que o body não tenha scroll horizontal e o header sempre visível */
body {
    padding-top: 0;
}

/* Banner Carousel - Mobile Fix */
#bannerSlides {
    display: flex;
    width: 100%;
}

#bannerSlides > div {
    min-width: 100%;
    width: 100%;
    max-width: 100%;
    flex: 0 0 100%;
}

/* Mobile específico - garantir uma imagem por vez */
@media (max-width: 640px) {
    #bannerSlides {
        width: 100% !important;
    }
    
    #bannerSlides > div {
        min-width: 100% !important;
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
    
    #bannerSlides img {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
    }
}

.input-glass {
  background: rgba(7,12,24,0.65);
  backdrop-filter: blur(2px);
  border: 1.2px solid #ff6a00;
  box-shadow: 0 1.5px 12px 0 #ff6a0022;
  color: #fff;
  padding: 0.8rem 0.9rem 0.8rem 2.2rem;
  font-size: 1.13rem;
  font-weight: 500;
  border-radius: 1.5rem;
  outline: none;
}
.input-glass::placeholder {
  color: #b8b9c4;
  font-weight: 400;
}

.logo-glow {
  display: block;
  width: 120px;
  height: 120px;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  background: radial-gradient(circle, rgba(255,255,255,0.49) 0%, rgba(255,255,255,0.14) 68%, rgba(255,255,255,0.00) 100%);
  filter: blur(18px);
  opacity: 0.36;
  pointer-events: none;
  z-index: 0;
}
@media (max-width: 640px) {
  .logo-glow {
    width: 64px;
    height: 64px;
    filter: blur(12px);
  }
}

.card-neon {
  border: 1.2px solid #ff6a00 !important;
  border-radius: 1.35rem;
  box-shadow: 0 1px 8px 0 #ff6a0026;
  transition: box-shadow 0.2s;
}
.card-neon:hover, .card-neon:focus {
  box-shadow: 0 2.5px 18px 0 #ffb70044;
}

.btn-orange {
  background: linear-gradient(90deg, #ffae42 40%, #ff6a00 100%);
  color: #fff !important;
  border-radius: 0.6rem;
  font-weight: 700;
  box-shadow: 0 1.5px 8px #ff6a0022;
  border: none;
  transition: background 0.22s, box-shadow 0.18s;
}
.btn-orange:hover {
  background: linear-gradient(90deg, #ff9900 10%, #ffb93c 100%);
  color: #fff;
  box-shadow: 0 4px 16px #ff950044;
}

/* Azul para laranja custom Romeu/Aztex */
.text-blue-600, .text-blue-500 { color: #ff6a00 !important; }
.hover\:text-blue-600:hover { color: #ff6a00 !important; }
.bg-blue-50 { background-color: #fff6ec !important; }
.border-blue-600 { border-color: #ff6a00 !important; }
.bg-gradient-to-r.from-blue-500.to-blue-600 { background: linear-gradient(90deg,#ffae42 40%, #ff6a00 100%) !important; }
.bg-blue-500, .bg-to-blue-600 { background: linear-gradient(90deg,#ffae42 10%, #ff6a00 100%) !important; }

/* Aba de categoria ativa, paginação, detalhes do produto */
.category-btn.border-b-2.border-blue-600 { border-color: #ff6a00 !important; }
.category-btn .group-hover\:text-blue-600:hover, .category-btn .text-blue-600 { color: #ff6a00 !important; }

/* Cart modal, modals, e resumos */
.bg-blue-50, .cart-summary, .cart-modal-custom, .modal-custom-pane {
  background: linear-gradient(90deg, rgba(255,246,236,0.94) 80%, #fff2d6 100%) !important;
  border-left: 2.5px solid #ff6a00 !important;
}

/* Modals premium: vidro esfumado laranja */
.modal-custom-pane {
  background: linear-gradient(90deg, #fff6ec 60%, #fff0d0 100%) !important;
  border-radius: 1.5rem;
  border-bottom: 3px solid #ff6a00 !important;
  box-shadow: 0 2px 24px #ff6a001c;
}

/* Títulos laranja igual topo */
.heading-orange, .text-product-title {
 color: #ff6a00 !important;
 font-weight: bold;
 letter-spacing: 0.01em;
}

#backToTopBtn {
  background: #ececec !important;
  color: #ff6a00 !important;
  box-shadow: 0 2px 14px #e2e2e2b0;
  border: none;
}
#backToTopBtn:hover {
  background: #f5f2ef !important;
  color: #ff9500 !important;
}

/* Banner full width na versão PC */
@media (min-width: 768px) {
  section.banner-full-width {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
  }
}