/* ============================================================
   Gerivas Technology - Refinamentos NCR Angola Style
   Ficheiro de ajustes visuais inspirados em ncrangola.com
   Carregado por último para unificar e corrigir conflitos
   ============================================================ */

/* === DESIGN TOKENS ATUALIZADOS === */
:root {
  --gt-navbar-bg: #FFFFFF;
  --gt-navbar-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  --gt-navbar-border: #E5E5E7;
  --gt-hero-gradient-1: #1a0533;
  --gt-hero-gradient-2: #2d1266;
  --gt-hero-gradient-3: #4a1a8a;
  --gt-hero-accent: #6b3fa0;
  --gt-benefits-bg: #FFFFFF;
  --gt-benefits-border: #E5E5E7;
  --gt-section-bg: #F5F5F7;
  --gt-footer-bg: #111111;
  --gt-footer-text: #888888;
  --gt-footer-accent: #FFFFFF;
  --gt-card-radius: 12px;
  --gt-transition-fast: all 0.25s ease;
  --gt-transition-smooth: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* === 1. NAVBAR — Os estilos estão agora em css/navbar_fix.css (gt-navbar) === */
/* Mantemos apenas a compatibilidade com a classe .navbar legada (se surgir) */
.navbar {
  display: none !important; /* A navbar antiga foi substituída por .gt-navbar */
}


/* === 2. HERO SLIDER - Fundo gradiente vibrante como NCR === */
.hero-slider {
  margin-top: 120px !important;
  background: linear-gradient(135deg, var(--gt-hero-gradient-1) 0%, var(--gt-hero-gradient-2) 40%, var(--gt-hero-gradient-3) 70%, var(--gt-hero-accent) 100%) !important;
  border-bottom: none !important;
  min-height: 420px !important;
  overflow: hidden !important;
  position: relative !important;
}

.swiper-slide {
  background: transparent !important;
  min-height: 420px !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 2rem 4rem !important;
  gap: 3rem !important;
}

/* Conteúdo textual do slide à esquerda */
.slide-content {
  text-align: left !important;
  max-width: 450px !important;
  margin: 0 !important;
  order: -1 !important;
  flex-shrink: 0 !important;
}

.slide-content h1 {
  color: #FFFFFF !important;
  text-shadow: none !important;
  font-size: clamp(1.6rem, 3.5vw, 2.8rem) !important;
  margin-bottom: 0.8rem !important;
  line-height: 1.15 !important;
}

.slide-content h1 span {
  color: #FFD700 !important;
  display: inline !important;
}

.slide-content p {
  color: rgba(255, 255, 255, 0.85) !important;
  font-size: 1rem !important;
  line-height: 1.6 !important;
  max-width: 400px !important;
  margin: 0 !important;
}

/* Imagem do produto à direita com destaque */
.slide-media {
  max-width: 380px !important;
  height: auto !important;
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 20px !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3) !important;
  padding: 2rem !important;
  margin: 0 !important;
  backdrop-filter: blur(10px) !important;
}

.slide-media img {
  max-height: 280px !important;
  filter: drop-shadow(0 10px 30px rgba(0, 0, 0, 0.2)) !important;
}

/* Navegação do slider */
.hero-slider .swiper-button-next,
.hero-slider .swiper-button-prev {
  background: rgba(255, 255, 255, 0.15) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  color: #FFFFFF !important;
  width: 48px !important;
  height: 48px !important;
  border-radius: 50% !important;
  backdrop-filter: blur(10px) !important;
  transition: var(--gt-transition-fast) !important;
}

.hero-slider .swiper-button-next:hover,
.hero-slider .swiper-button-prev:hover {
  background: rgba(255, 255, 255, 0.3) !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
  transform: scale(1.05) !important;
}

.hero-slider .swiper-button-next {
  right: 3% !important;
}

.hero-slider .swiper-button-prev {
  left: 3% !important;
}

.hero-slider .swiper-button-next::after,
.hero-slider .swiper-button-prev::after {
  font-size: 1.1rem !important;
  font-weight: 900 !important;
}

/* Barra de progresso */
.hero-progress-container {
  background: rgba(255, 255, 255, 0.15) !important;
}

.hero-progress-bar {
  background: #FFD700 !important;
  box-shadow: 0 0 10px rgba(255, 215, 0, 0.5) !important;
}

/* === 3. BENEFÍCIOS - Strip horizontal com separadores (NCR Style) === */
.benefits-grid-premium {
  display: flex !important;
  justify-content: center !important;
  align-items: stretch !important;
  max-width: 1250px !important;
  margin: 1.5rem auto !important;
  padding: 0.8rem 1rem !important;
  gap: 0 !important;
  background: #FFFFFF !important;
  border: 1px solid #E5E5E7 !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03) !important;
}

.benefits-grid-premium .benefit-item {
  flex: 1 !important;
  background: transparent !important;
  border: none !important;
  border-right: 1px solid #E5E5E7 !important;
  padding: 0.7rem 1.2rem !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 0.9rem !important;
  text-align: left !important;
  transition: all 0.2s ease !important;
}

.benefits-grid-premium .benefit-item:last-child {
  border-right: none !important;
}

.benefits-grid-premium .benefit-item ion-icon {
  font-size: 1.6rem !important;
  color: var(--primary) !important;
  opacity: 0.9 !important;
}

.benefits-grid-premium .benefit-text strong {
  display: block !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
  color: #222 !important;
  margin-bottom: 2px !important;
}

.benefits-grid-premium .benefit-text span {
  display: block !important;
  font-size: 0.72rem !important;
  color: #777 !important;
  line-height: 1.2 !important;
}

.benefits-grid-premium .benefit-item:hover {
  background: #FAFAFA !important;
}

/* === 4. SECÇÃO DE PRODUTOS - Layout refinado === */
.products-section {
  padding-top: 3rem !important;
  padding-bottom: 4rem !important;
}

.products-section-header {
  border-bottom: 2px solid var(--primary) !important;
  margin-bottom: 2.5rem !important;
  padding-bottom: 1rem !important;
}

.products-section-title {
  font-size: 1.5rem !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  font-weight: 800 !important;
}

/* Cards de produto com fundo #F2F2F2 estilo NCR */
.product-grid {
  gap: 1.5rem !important;
}

.premium-card {
  background-color: #F8F8F8 !important; /* Cinza muito suave */
  border-radius: 12px !important;
  border: 1px solid #EDEDED !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03) !important;
  transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1) !important;
}

.premium-card:hover {
  background-color: #FFFFFF !important;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1) !important;
  transform: translateY(-8px) !important;
  border-color: var(--primary) !important;
}

.product-image-container {
  background-color: #FFFFFF !important; /* Imagem fica no fundo branco */
  height: 220px !important;
  padding: 1rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-bottom: 1px solid #F2F2F2 !important;
}

.product-image-container img {
  mix-blend-mode: multiply !important; /* Ajuda a fundir fundos brancos */
}

.premium-card .product-content {
  padding: 1.2rem !important;
  text-align: center !important;
}

.premium-card .product-category {
  font-size: 0.65rem !important;
  text-transform: uppercase !important;
  letter-spacing: 1.2px !important;
  color: #999 !important;
  margin-bottom: 6px !important;
}

.premium-card .product-title {
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  color: #1a1a1a !important;
  height: 2.8rem !important;
  overflow: hidden !important;
  margin-bottom: 12px !important;
  line-height: 1.4 !important;
}

.premium-card .product-price {
  font-weight: 800 !important;
  font-size: 1.25rem !important;
  color: #111 !important;
  margin-bottom: 15px !important;
}

.premium-card .premium-add-btn {
  background: #111 !important;
  color: #FFF !important;
  border: none !important;
  border-radius: 6px !important;
  padding: 10px 15px !important;
  font-size: 0.75rem !important;
  font-weight: 600 !important;
  width: 100% !important;
  transition: all 0.2s ease !important;
}

.premium-card .premium-add-btn:hover {
  background: var(--primary) !important;
  transform: scale(1.02) !important;
}

/* === 5. FOOTER - Estilo NCR (Deep Navy / Professional Black) === */
.footer {
  background: #0A0A0B !important;
  border-top: 3px solid var(--primary) !important;
  padding: 0 !important;
  margin-top: 5rem !important;
  color: #FFFFFF !important;
}

.footer-content {
  display: grid !important;
  grid-template-columns: 1.5fr 1fr 1.5fr !important;
  gap: 4rem !important;
  padding: 5rem 5% !important;
  max-width: 1300px !important;
  margin: 0 auto !important;
}

.footer-brand .footer-img-logo {
  height: 50px !important;
  margin-bottom: 1.5rem !important;
}

.footer-desc {
  font-size: 0.9rem !important;
  line-height: 1.7 !important;
  color: var(--gt-footer-text) !important;
}

.footer h3 {
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  margin-bottom: 2rem !important;
  color: #FFFFFF !important;
  position: relative !important;
}

.footer h3::after {
  content: '' !important;
  position: absolute !important;
  bottom: -8px !important;
  left: 0 !important;
  width: 40px !important;
  height: 2px !important;
  background: var(--primary) !important;
}

.footer-links a,
.footer-contacts a {
  color: var(--gt-footer-text) !important;
  font-size: 0.9rem !important;
  padding: 0.3rem 0 !important;
}

.footer-links a:hover,
.footer-contacts a:hover {
  color: #FFFFFF !important;
  transform: translateX(3px) !important;
}

.footer-newsletter {
  background: rgba(255, 255, 255, 0.03) !important;
  padding: 2.5rem !important;
  border: 1px solid rgba(255, 255, 255, 0.05) !important;
  border-radius: 12px !important;
  margin-top: 1.5rem !important;
}

.newsletter-form {
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  background: rgba(0, 0, 0, 0.3) !important;
}

.newsletter-form input {
  border-radius: 0 !important;
  font-size: 0.85rem !important;
}

.newsletter-form .btn {
  border-radius: 0 !important;
  padding: 0 1.2rem !important;
}

.social-links {
  padding-top: 2.5rem !important;
  gap: 2rem !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.social-links a {
  font-size: 1.5rem !important;
  color: rgba(255, 255, 255, 0.6) !important;
  transition: var(--gt-transition-fast) !important;
}

.social-links a:hover {
  color: var(--primary) !important;
  transform: translateY(-3px) !important;
}

/* === 6. DRAWER SIDEBAR - Mais polido === */
.drawer-sidebar {
  box-shadow: 8px 0 30px rgba(0, 0, 0, 0.15) !important;
  background: #FFFFFF !important;
}

.menu-header {
  background: var(--primary) !important;
  font-size: 1.1rem !important;
  padding: 16px 20px !important;
  font-weight: 700 !important;
  letter-spacing: 0.5px !important;
}

.menu-container summary {
  font-size: 0.95rem !important;
  padding: 14px 20px !important;
}

.menu-container .submenu a {
  font-size: 0.88rem !important;
  padding: 10px 25px !important;
}

/* === 7. WHATSAPP FLOAT - Arredondado === */
.whatsapp-float {
  border-radius: 50% !important;
  box-shadow: 0 4px 15px rgba(37, 211, 102, 0.3) !important;
}

.whatsapp-float:hover {
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4) !important;
  transform: scale(1.1) !important;
}

/* === 8. THEME SWITCHER - Mais discreto === */
#theme-switcher {
  bottom: 80px !important;
  right: 20px !important;
  background: rgba(255, 255, 255, 0.95) !important;
  border: 1px solid #E5E5E7 !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important;
  padding: 8px !important;
  border-radius: 30px !important;
}

.theme-btn {
  width: 22px !important;
  height: 22px !important;
  border: 2px solid #ddd !important;
}

/* === 9. MODAIS - Refinamentos visuais === */
.product-modal-card {
  border-radius: var(--gt-card-radius) !important;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.3) !important;
}

.checkout-modal-card {
  border-radius: var(--gt-card-radius) !important;
}

.info-modal-card {
  border-radius: var(--gt-card-radius) !important;
}

.form-group input,
.form-group textarea {
  border-radius: 8px !important;
  border: 1px solid #E5E5E7 !important;
  background: #F5F5F7 !important;
  color: #111 !important;
}

.form-group input:focus,
.form-group textarea:focus {
  border-color: var(--primary) !important;
  background: #FFFFFF !important;
  box-shadow: 0 0 0 3px rgba(227, 30, 37, 0.1) !important;
}

/* === 10. CART SIDEBAR - Mais limpo === */
.cart-sidebar {
  background: #FFFFFF !important;
  box-shadow: -5px 0 30px rgba(0, 0, 0, 0.1) !important;
}

.cart-header {
  border-bottom: 1px solid #E5E5E7 !important;
  padding: 1.5rem 2rem !important;
}

.cart-header h2 {
  color: #111 !important;
  font-size: 1.3rem !important;
}

.close-btn {
  color: #111 !important;
}

.cart-item {
  background: #F5F5F7 !important;
  border-radius: 10px !important;
  border: 1px solid #E5E5E7 !important;
}

.cart-item-title {
  color: #111 !important;
}

.cart-item-price {
  color: var(--primary) !important;
}

.cart-footer {
  border-top: 1px solid #E5E5E7 !important;
  background: #FAFAFA !important;
}

.cart-total {
  color: #111 !important;
}

/* === 11. SKELETON LOADING - Refinado === */
.skeleton-card {
  border-radius: var(--gt-card-radius) !important;
}

/* === MOBILE RESPONSIVENESS === */
@media (max-width: 768px) {
  .hero-slider {
    margin-top: 140px !important;
    min-height: 350px !important;
  }

  .swiper-slide {
    flex-direction: column !important;
    padding: 2rem 1.5rem !important;
    min-height: 350px !important;
    gap: 1.5rem !important;
    text-align: center !important;
  }

  .slide-content {
    text-align: center !important;
    order: 1 !important;
    max-width: 100% !important;
  }

  .slide-content h1 {
    font-size: clamp(1.3rem, 5vw, 1.8rem) !important;
  }

  .slide-content p {
    font-size: 0.9rem !important;
    max-width: 100% !important;
  }

  .slide-media {
    max-width: 250px !important;
    padding: 1.2rem !important;
    order: 0 !important;
  }

  .slide-media img {
    max-height: 180px !important;
  }

  /* Benefícios mobile - 2 colunas */
  .benefits-grid-premium {
    flex-wrap: wrap !important;
    padding: 1rem !important;
    border-bottom: 1px solid var(--gt-benefits-border) !important;
  }

  .benefits-grid-premium .benefit-item {
    flex: 0 0 50% !important;
    border-right: none !important;
    border-bottom: 1px solid #F0F0F0 !important;
    padding: 0.8rem !important;
    flex-direction: column !important;
    text-align: center !important;
    gap: 0.5rem !important;
  }

  .benefits-grid-premium .benefit-item:nth-child(odd) {
    border-right: 1px solid #F0F0F0 !important;
  }

  .benefits-grid-premium .benefit-item:nth-child(n+3) {
    border-bottom: none !important;
  }

  .benefits-grid-premium .benefit-item ion-icon {
    font-size: 1.5rem !important;
  }

  .benefits-grid-premium .benefit-text strong {
    font-size: 0.8rem !important;
  }

  .benefits-grid-premium .benefit-text span {
    font-size: 0.72rem !important;
  }

  /* Setas do slider escondidas no mobile */
  .hero-slider .swiper-button-next,
  .hero-slider .swiper-button-prev {
    display: none !important;
  }

  /* Footer mobile */
  .footer-content {
    grid-template-columns: 1fr !important;
    text-align: center !important;
    padding: 3rem 1.5rem !important;
    gap: 2.5rem !important;
  }

  .footer h3::after {
    left: 50% !important;
    transform: translateX(-50%) !important;
  }

  .footer-newsletter {
    border-left: none !important;
    border-top: 3px solid var(--primary) !important;
    border-radius: 8px !important;
  }

  .footer-desc {
    margin: 0 auto !important;
  }
}

@media (max-width: 480px) {
  .nav-text-links {
    gap: 0.8rem !important;
    font-size: 0.7rem !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
  }

  .nav-text-links::-webkit-scrollbar {
    display: none;
  }
}

/* === DARK THEME OVERRIDES === */
body.theme-dark .navbar {
  background-color: #111 !important;
  border-bottom-color: #222 !important;
}

body.theme-dark .nav-text-links a {
  color: #ccc !important;
}

body.theme-dark .benefits-grid-premium {
  background: #111 !important;
  border-bottom-color: #222 !important;
}

body.theme-dark .benefits-grid-premium .benefit-item {
  border-right-color: #222 !important;
}

body.theme-dark .benefits-grid-premium .benefit-text strong {
  color: #eee !important;
}

body.theme-dark .benefits-grid-premium .benefit-text span {
  color: #888 !important;
}

body.theme-dark .premium-card {
  border-color: #222 !important;
  background: #111 !important;
}

body.theme-dark .search-input {
  background: #1a1a1a !important;
  border-color: #333 !important;
  color: #fff !important;
}

body.theme-dark #theme-switcher {
  background: rgba(30, 30, 30, 0.95) !important;
  border-color: #333 !important;
}

body.theme-dark .cart-sidebar {
  background: #111 !important;
}

body.theme-dark .cart-header {
  border-bottom-color: #222 !important;
}

body.theme-dark .cart-header h2 {
  color: #fff !important;
}

body.theme-dark .cart-item {
  background: #1a1a1a !important;
  border-color: #333 !important;
}

body.theme-dark .cart-item-title {
  color: #fff !important;
}

body.theme-dark .cart-footer {
  background: #0a0a0a !important;
  border-top-color: #222 !important;
}

body.theme-dark .cart-total {
  color: #fff !important;
}

body.theme-dark .close-btn {
  color: #fff !important;
}

body.theme-dark .form-group input,
body.theme-dark .form-group textarea {
  background: #1a1a1a !important;
  border-color: #333 !important;
  color: #fff !important;
}

/* === RED THEME OVERRIDES === */
body.theme-red .navbar {
  background-color: var(--primary) !important;
  border-bottom-color: #B71C1C !important;
}

body.theme-red .nav-text-links a {
  color: rgba(255, 255, 255, 0.9) !important;
}

body.theme-red .search-input {
  background: rgba(255, 255, 255, 0.15) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  color: #fff !important;
}

body.theme-red .search-input::placeholder {
  color: rgba(255, 255, 255, 0.6) !important;
}

body.theme-red .icon-btn {
  color: #fff !important;
}

body.theme-red .benefits-grid-premium {
  background: #B71C1C !important;
  border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}

body.theme-red .benefits-grid-premium .benefit-item {
  border-right-color: rgba(255, 255, 255, 0.1) !important;
}

body.theme-red .benefits-grid-premium .benefit-item ion-icon {
  color: #FFD700 !important;
}

body.theme-red .benefits-grid-premium .benefit-text strong {
  color: #fff !important;
}

body.theme-red .benefits-grid-premium .benefit-text span {
  color: rgba(255, 255, 255, 0.7) !important;
}


/* Responsividade do Carrossel de Marcas - REMOVIDO */