/* 
  TP-Link Omada Touch Kiosk - Refactored Styles
  This file contains all the CSS styles organized in a more maintainable way
*/

:root { 
  --rack-ratio: 9 / 16; 
  --equip-gap: 2px; 
  --equip-overlap: 4px; 
  /* Colors for menu and gallery */
  --omada-primary: #00D4AA;
  --omada-dark: #0A0A0A;
  --omada-text: #E0E0E0;
  --glass-border: rgba(0, 212, 170, 0.2);
  
  /* Variables for TV Touch 9x16 - KIOSK MODE */
  --touch-min-size: 80px; /* Increased for kiosk */
  --touch-font-base: 22px; /* Increased for kiosk */
  --touch-font-large: 28px; /* Increased for kiosk */
  --touch-font-xl: 36px; /* Increased for kiosk */
  --touch-spacing: 24px; /* Increased for kiosk */
  --tv-width: 1080px;
  --tv-height: 1920px;
  
  /* Kiosk specific variables */
  --kiosk-padding: 40px;
  --kiosk-button-size: 100px;
  --kiosk-text-scale: 1.2;
}

* {
  margin: 0; 
  padding: 0; 
  box-sizing: border-box;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Ensure full height */
html, body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: visible;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* === BACKGROUND: Applied directly to body with local image === */
body { 
  background: #000 url('../assets/images/base/fundo.png') center/cover no-repeat;
  position: relative;
  overflow: hidden;
}

/* === ANIMATED BACKGROUND ELEMENTS === */
.background-animation {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1;
  overflow: hidden;
}

.floating-element {
  position: absolute;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(0, 212, 170, 0.05), rgba(0, 212, 170, 0.02));
  backdrop-filter: blur(2px);
  animation: float 20s infinite linear;
}

/* ... (rest of the CSS would continue here, but for brevity, 
       I'll just show the structure and key parts) ... */

/* === ANIMATIONS === */
@keyframes float {
  0% {
    transform: translateY(0px) translateX(0px) rotate(0deg) scale(1);
    opacity: 0.2;
  }
  15% {
    opacity: 0.8;
    transform: translateY(-15px) translateX(10px) rotate(45deg) scale(1.1);
  }
  30% {
    opacity: 0.4;
    transform: translateY(-30px) translateX(-5px) rotate(90deg) scale(0.9);
  }
  45% {
    opacity: 0.9;
    transform: translateY(-10px) translateX(15px) rotate(135deg) scale(1.2);
  }
  60% {
    opacity: 0.3;
    transform: translateY(-40px) translateX(-10px) rotate(180deg) scale(0.8);
  }
  75% {
    opacity: 0.7;
    transform: translateY(-25px) translateX(8px) rotate(225deg) scale(1.1);
  }
  90% {
    opacity: 0.5;
    transform: translateY(-5px) translateX(-3px) rotate(315deg) scale(0.95);
  }
  100% {
    transform: translateY(0px) translateX(0px) rotate(360deg) scale(1);
    opacity: 0.2;
  }
}

@keyframes galleryEntrance {
  0% {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes thumbPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(0, 212, 170, 0.4);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(0, 212, 170, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(0, 212, 170, 0);
  }
}

@keyframes networkPulse {
  0%, 100% {
    opacity: 0.1;
    transform: scaleX(0);
  }
  50% {
    opacity: 0.3;
    transform: scaleX(1);
  }
}

@keyframes particleMove {
  0% {
    bottom: -10px;
    opacity: 0;
    transform: translateX(0px) scale(0.5);
  }
  5% {
    opacity: 0.8;
    transform: translateX(5px) scale(1);
  }
  15% {
    opacity: 1;
    transform: translateX(-8px) scale(1.2);
  }
  30% {
    opacity: 0.9;
    transform: translateX(12px) scale(0.8);
  }
  45% {
    opacity: 1;
    transform: translateX(-6px) scale(1.1);
  }
  60% {
    opacity: 0.8;
    transform: translateX(10px) scale(0.9);
  }
  75% {
    opacity: 1;
    transform: translateX(-4px) scale(1.3);
  }
  85% {
    opacity: 0.9;
    transform: translateX(7px) scale(1);
  }
  95% {
    opacity: 0.6;
    transform: translateX(-2px) scale(0.7);
  }
  100% {
    bottom: 110vh;
    opacity: 0;
    transform: translateX(0px) scale(0.3);
  }
}

/* === MAIN LAYOUT === */
.omada-mockup {
  width: 100%;
  height: 100%;
  position: relative;
}

.omada-logo {
  position: absolute;
  top: 4vh;
  left: 50%;
  transform: translateX(-50%);
  width: clamp(90px, 9vw, 150px);
  filter: drop-shadow(0 2px 14px rgba(255,255,255,.45));
  z-index: 1000;
}

/* === RACK VIEWPORT === */
.omada-frame {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}

.omada-rack-viewport {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: flex-end; /* Align rack at bottom */
}

.omada-rack-sizer {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%) scale(1.0);
  height: calc(110% / 0.75); /* Significantly increased to maximize size */
  aspect-ratio: var(--rack-ratio);
  /* Maximize size with minimal margins */
  transform-origin: center bottom; /* Anchored at bottom */
  /* Rack almost no side margin */
  max-width: 99.5vw;
  /* IMPORTANT: This container controls scaling of rack + equipment together */
  contain: layout style;
}

.omada-rack-img {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  user-select: none;
  -webkit-user-drag: none;
  /* Equipment scales with parent container */
  transform: none; /* Remove any individual transform */
}

.omada-equip-stack {
  position: absolute;
  left: 0;
  right: 0;
  top: 5%; /* Adjusted from 8% to 5% to compensate for cut */
  height: 70%; /* Increased from 60% to 70% for better distribution */
  display: grid;
  grid-template-rows: repeat(6, 1fr);
  gap: var(--equip-gap);
  pointer-events: none;
  /* Equipment inherits scaling from parent container (.omada-rack-sizer) */
  transform: none; /* Remove any individual transform */
}

.omada-slot { 
  position: relative; 
  overflow: visible; 
  cursor: default;
  pointer-events: none;
  /* Touch optimization */
  min-height: var(--touch-min-size);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: none;
  border-radius: 8px;
  top: calc(var(--equip-overlap) * 8);
}

/* Hover removed from slot - only image should be interactive */

.omada-slot img {
  position: absolute;
  left: 0; right: 0; top: calc(var(--equip-overlap) * 8); bottom: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 1px 4px rgba(0,0,0,.35));
  cursor: pointer;
  pointer-events: auto;
  -webkit-tap-highlight-color: rgba(0, 212, 170, 0.2);
  transition: transform 0.2s ease, filter 0.2s ease;
  border-radius: 8px;
}

.omada-slot img:hover,
.omada-slot img:active {
  transform: scale(1.05);
  filter: drop-shadow(0 1px 4px rgba(0,0,0,.35)) drop-shadow(0 0 20px rgba(0, 212, 170, 0.4));
}

/* === MENU CONTAINER & CALL TO ACTION === */
.menu-container {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 1001;
  /* Ensure visibility on all screen sizes */
  min-width: var(--touch-min-size);
  max-width: 90vw;
}

.menu-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.95;
  transition: all 0.3s ease;
  position: relative;
  cursor: pointer;
  -webkit-tap-highlight-color: rgba(0, 212, 170, 0.3);
  touch-action: manipulation;
  min-height: calc(var(--touch-min-size) - 10px);
  margin-top: 0;
  /* Responsive text sizing */
  padding: 8px 12px;
  border-radius: 4px;
}

/* Responsive adjustments for menu CTA */
@media (max-width: 480px) {
  .menu-cta {
    padding: 6px 10px;
  }
  
  .cta-text {
    font-size: 12px;
  }
}

@media (orientation: portrait) and (max-aspect-ratio: 9/16) {
  .menu-cta {
    padding: 12px 18px;
    margin-top: 8px;
    /* Garantir que o CTA seja visível em 9:16 */
    max-width: calc(100vw - 80px);
    word-wrap: break-word;
  }
  
  .cta-text {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
  }
}

@media (min-width: 1920px) and (min-height: 1080px) {
  .cta-text {
    font-size: 18px;
  }
}

.menu-cta:hover {
  opacity: 1;
  transform: translateY(2px);
}

.menu-cta:active {
  transform: translateY(1px) scale(0.98);
}

/* Visual connection between elements */
.menu-container:before {
  content: '';
  position: absolute;
  top: calc(var(--touch-min-size) + 4px);
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: 4px;
  background: linear-gradient(to top, var(--omada-primary), rgba(0, 212, 170, 0.3));
  border-radius: 1px;
  opacity: 0.5;
}

.cta-text {
  color: var(--omada-text);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  text-align: center;
}

/* Hover effect for arrow when hovering container */
.menu-container:hover .cta-arrow {
  opacity: 1;
  transform: scale(1.1);
}

.cta-arrow {
  color: var(--omada-primary);
  font-size: 18px;
  font-weight: bold;
  animation: bounce 2s infinite;
  line-height: 1;
  transform: rotate(0deg);
  text-align: center;
  display: block;
  margin: 8px 0 -20px 0;
  opacity: 0.8;
  transition: opacity 0.3s ease;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-3px);
  }
  60% {
    transform: translateY(-2px);
  }
}

/* === MENU TOGGLE - Adjusted for new container === */
.menu-toggle {
  position: relative;
  left: 0;
  transform: none;
  bottom: 0;
  width: var(--touch-min-size);
  height: var(--touch-min-size);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  background: rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(15px);
  border-radius: 50%;
  border: 3px solid rgba(0, 212, 170, 0.4);
  /* Touch feedback */
  -webkit-tap-highlight-color: rgba(0, 212, 170, 0.3);
  touch-action: manipulation;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  /* Ensure minimum size for touch */
  min-width: var(--touch-min-size);
  min-height: var(--touch-min-size);
}

/* Responsive adjustments for menu toggle */
@media (max-width: 480px) {
  .menu-toggle {
    width: calc(var(--touch-min-size) + 10px);
    height: calc(var(--touch-min-size) + 10px);
    border-width: 2px;
  }
}

@media (orientation: portrait) and (max-aspect-ratio: 9/16) {
  .menu-toggle {
    width: calc(var(--touch-min-size) + 20px);
    height: calc(var(--touch-min-size) + 20px);
    border-width: 4px;
    /* Garantir visibilidade em telas muito estreitas */
    min-width: 60px;
    min-height: 60px;
  }
  
  .menu-container {
    bottom: 20px;
    right: 20px;
    /* Ajustar posicionamento para evitar corte */
    max-width: calc(100vw - 40px);
    z-index: 9999;
  }
}

@media (min-width: 1920px) and (min-height: 1080px) {
  .menu-toggle {
    width: calc(var(--touch-min-size) + 20px);
    height: calc(var(--touch-min-size) + 20px);
  }
}

.menu-toggle:hover {
  background: var(--omada-primary);
  transform: scale(1.1);
}

.menu-toggle:hover .menu-icon span {
  background: black;
}

.menu-icon {
  width: calc(var(--touch-min-size) - 12px);
  height: calc(var(--touch-min-size) - 12px);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.menu-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: brightness(0) saturate(100%) invert(61%) sepia(46%) saturate(2159%) hue-rotate(141deg) brightness(96%) contrast(101%);
  transition: all 0.3s ease;
}

.menu-toggle:hover .menu-icon img {
  filter: brightness(0) saturate(100%) invert(0%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(0%) contrast(100%);
}

.menu-toggle.active .menu-icon img {
  transform: rotate(180deg);
}

/* === FULLSCREEN FAMILY MENU === */
.side-menu {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(5, 15, 15, 0.98);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  transform: translateX(-100%);
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  overflow-y: auto;
  overflow-x: hidden; /* Sem scroll lateral */
  z-index: 1000;
  box-shadow: 0 0 30px rgba(0, 212, 170, 0.1);
  display: flex;
  flex-direction: column;
}

.side-menu.active {
  transform: translateX(0);
}

/* === FAMILY SELECTION SCREEN === */
.family-selector-screen {
  padding: 20px;
}

.family-screen-header {
  text-align: center;
  margin-bottom: 40px;
}

.family-screen-title {
  font-size: 32px;
  font-weight: 700;
  color: var(--omada-primary);
  margin-bottom: 15px;
  letter-spacing: 1.5px;
  text-align: center;
}

.family-screen-subtitle {
  font-size: 18px;
  color: var(--omada-text);
  opacity: 0.8;
  margin: 0 auto;
  max-width: 600px;
}

.family-grid-container {
  position: relative;
  width: 100%;
  height: calc(100vh - 200px);
  overflow: hidden;
  margin-bottom: 30px;
}

.family-grid {
  display: block;
  overflow-y: auto;
  overflow-x: hidden; /* Sem scroll lateral */
  padding: 20px 40px;
  scroll-behavior: smooth;
  width: 100%;
  height: 100%;
}

/* === FAMILY GRID SPECIFIC STYLES - TODOS OS PRODUTOS EM HIGHLIGHT === */
.family-grid .product-card {
  opacity: 1 !important; /* Sempre visível */
  transform: scale(1.1) !important; /* Sempre em destaque */
  z-index: 10 !important;
  cursor: default !important; /* Default cursor for family grid cards */
}

/* Family grid product card overlay - REMOVED to prevent visual duplication */

.family-grid .product-card .product-image img {
  filter: drop-shadow(0 15px 30px rgba(0, 212, 170, 0.5)) brightness(1.05) !important;
}

.family-grid .product-card .product-name {
  color: var(--omada-primary) !important;
  text-shadow: 0 0 20px rgba(0, 212, 170, 0.3) !important;
}

.family-grid .product-card:hover {
  opacity: 1 !important;
  transform: scale(1.15) !important; /* Efeito hover ainda mais destacado */
}

/* === FAMILY-SPECIFIC STYLES (Integrated with product card styles) === */
.family-count {
  font-size: 14px;
  font-weight: 600;
  color: var(--omada-primary);
  margin-bottom: 15px;
  background: rgba(0, 212, 170, 0.1);
  padding: 5px 15px;
  border-radius: 20px;
}

/* Family badge colors (keeping category-specific colors) */
.family-badge.switches {
  background: linear-gradient(45deg, #3498db, #2980b9);
  color: white;
}

.family-badge.wifi {
  background: linear-gradient(45deg, #9b59b6, #8e44ad);
  color: white;
}

.family-badge.security {
  background: linear-gradient(45deg, #e74c3c, #c0392b);
  color: white;
}

.family-badge.management {
  background: linear-gradient(45deg, #f39c12, #d35400);
  color: white;
}

.family-instructions {
  text-align: center;
  margin-top: 20px;
}

.family-instructions p {
  font-size: 16px;
  color: var(--omada-text);
  opacity: 0.7;
}

.family-selector-screen .vertical-products-container {
  height: calc(100vh - 200px);
}

/* === FAMILY PRODUCTS SCREEN === */
.family-products-screen {
  padding: 20px;
}

.family-header {
  display: flex;
  align-items: center;
  margin-bottom: 30px;
  gap: 20px;
}

.family-title-section {
  flex: 1;
}

.selected-family-title {
  font-size: 28px;
  font-weight: 700;
  color: var(--omada-primary);
  margin-bottom: 8px;
  letter-spacing: 1.5px;
}

.selected-family-description {
  font-size: 16px;
  color: var(--omada-text);
  opacity: 0.8;
  margin: 0;
}

/* === VERTICAL PRODUCTS CONTAINER === */
.vertical-products-container {
  position: relative;
  width: 100%;
  height: calc(100vh - 200px);
  overflow: hidden;
}

/* === PRODUCTS SCROLL - ALL PRODUCTS HIGHLIGHTED === */
.products-scroll .product-card {
  opacity: 1 !important; /* Always visible */
  transform: scale(1.1) !important; /* Always highlighted */
  z-index: 10 !important;
  cursor: default !important; /* Default cursor for products scroll cards */
}

.products-scroll .product-card .product-image img {
  filter: drop-shadow(0 15px 30px rgba(0, 212, 170, 0.5)) brightness(1.05) !important;
}

.products-scroll .product-card .product-name {
  color: var(--omada-primary) !important;
  text-shadow: 0 0 20px rgba(0, 212, 170, 0.3) !important;
}

.products-scroll .product-card:hover {
  opacity: 1 !important;
  transform: scale(1.15) !important; /* Even more highlighted on hover */
}

.vertical-products-container::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(0, 212, 170, 0.4), transparent);
  z-index: 0; /* Changed from -1 to 0 to place behind product images but in front of product card background */
  pointer-events: none;
  opacity: 0.7;
  transition: opacity 0.3s ease;
  box-shadow: 0 0 10px rgba(0, 212, 170, 0.2);
}

.vertical-products-container:hover::before {
  opacity: 0.8;
}

.vertical-products-container::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 6px;
  height: 6px;
  background: var(--omada-primary);
  border-radius: 50%;
  z-index: 0; /* Changed from -1 to 0 to place behind product images but in front of product card background */
  pointer-events: none;
  opacity: 0.8;
  box-shadow: 0 0 15px rgba(0, 212, 170, 0.6);
  animation: focusPulse 3s ease-in-out infinite;
}

@keyframes focusPulse {
  0%, 100% {
    opacity: 0.8;
    transform: translate(-50%, -50%) scale(1);
  }
  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.2);
  }
}

.products-container {
  position: relative;
  width: 100%;
  height: calc(100vh - 200px);
  overflow: hidden;
}

.products-scroll {
  display: block; /* Simpler layout */
  overflow-y: auto;
  overflow-x: hidden; /* Sem scroll lateral */
  height: 100%;
  padding: 0 40px 20vh 40px; /* Removed top padding - no space before first product */
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: y mandatory; /* More reliable snapping */
  overscroll-behavior: contain;
  touch-action: pan-y;
  box-sizing: border-box;
  position: relative;
}

/* === VERTICAL PRODUCT CARDS === */
.product-card {
  width: 100%;
  max-width: 580px;
  background: none;
  border: none;
  padding: 0;
  margin: 5vh auto; /* Reduced margin for first product to have less space at top */
  cursor: default; /* Default cursor for card container */
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  position: relative;
  overflow: visible;
  display: block; /* Simpler display */
  text-align: center;
  opacity: 0.4; /* Increased visibility when not focused */
  transform: scale(0.9); /* Larger when not focused for better visibility */
  scroll-snap-align: center;
  will-change: transform, opacity;
  min-height: 450px;
}

/* Overlay for non-focused products - REMOVED to prevent visual duplication */

.product-card.center-focus {
  opacity: 1;
  transform: scale(1.15); /* Slightly more prominent when focused */
  z-index: 10;
}

/* Reduce overlay on focused product - REMOVED to prevent visual duplication */

/* Ensure content stays above overlay */
.product-image,
.product-info {
  position: relative;
  z-index: 2;
}

.product-card.center-focus .product-image img {
  filter: drop-shadow(0 15px 30px rgba(0, 212, 170, 0.6)) brightness(1.1);
}

.product-card.center-focus .product-name {
  color: var(--omada-primary);
  text-shadow: 0 0 25px rgba(0, 212, 170, 0.4);
}

.product-card:hover:not(.center-focus) {
  opacity: 0.4;
  transform: scale(0.8);
}

.product-card.center-focus:hover {
  opacity: 1;
  transform: scale(1.2);
}

/* === BOTTOM SECTION: INFORMATION (BELOW FOCAL POINT) === */
.product-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  margin-top: 0; /* Removed all spacing to be flush with image */
  width: 100%;
  pointer-events: none; /* Prevent clicks on product info area */
}

/* === TOP SECTION: IMAGE (ABOVE FOCAL POINT) === */
.product-image {
  width: 350px;
  height: 250px;
  margin-bottom: 10px; /* Reduced from 25px for better balance */
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
  cursor: pointer; /* Only the image area is clickable */
}

.product-image img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 8px 16px rgba(0, 0, 0, 0.2));
  transition: all 0.3s ease;
}

.product-card.center-focus .product-image {
  width: 450px;
  height: 320px;
  margin-bottom: 20px; /* Reduced from 40px when in focus */
}

.product-card.center-focus .product-image img {
  filter: drop-shadow(0 12px 24px rgba(0, 212, 170, 0.5));
}

/* === BOTTOM SECTION: INFORMATION (BELOW FOCAL POINT) === */
.product-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  margin-top: 15px; /* Further reduced spacing for better balance */
  width: 100%;
  cursor: pointer; /* Only the info area is clickable */
}

.product-name {
  font-size: 28px;
  font-weight: 700;
  color: var(--omada-text);
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  transition: all 0.3s ease;
  text-align: center;
}

.product-card.center-focus .product-name {
  font-size: 36px;
  letter-spacing: 2px;
  color: var(--omada-primary);
  text-shadow: 0 0 15px rgba(0, 212, 170, 0.3);
}

/* Subtle separator line for focused products - REMOVED to prevent visual duplication */

/* === VERTICAL SCROLL INDICATORS === */
.scroll-nav {
  display: none;
}

.scroll-indicator {
  position: fixed;
  right: 30px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 15px;
  z-index: 100;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(10px);
  padding: 20px 8px;
  border-radius: 25px;
  border: 1px solid rgba(0, 212, 170, 0.2);
}

.scroll-indicator::before {
  content: '';
  position: absolute;
  top: 15px;
  left: 2px;
  width: 20px;
  height: calc(100% - 30px);
  background: linear-gradient(180deg, transparent, rgba(0, 212, 170, 0.1), transparent);
  border-radius: 10px;
  z-index: -1;
}

.scroll-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  cursor: pointer;
  position: relative;
  border: 2px solid transparent;
}

.scroll-dot::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 6px;
  height: 6px;
  background: transparent;
  border-radius: 50%;
  transition: all 0.4s ease;
}

.scroll-dot.active {
  background: var(--omada-primary);
  box-shadow: 0 0 20px rgba(0, 212, 170, 0.5);
  transform: scale(1.4);
  border-color: rgba(0, 212, 170, 0.6);
}

.scroll-dot.active::before {
  background: rgba(0, 0, 0, 0.8);
  width: 4px;
  height: 4px;
}

.scroll-dot:hover {
  background: rgba(0, 212, 170, 0.7);
  transform: scale(1.2);
  border-color: rgba(0, 212, 170, 0.4);
}

/* === INFO PANEL WITH GALLERY - OTIMIZADO PARA 9x16 === */
.info-panel {
  position: fixed;
  left: 0; top: 0; right: 0; bottom: 0;
  width: 100vw;
  height: 100vh;
  background: linear-gradient(135deg, rgba(5, 15, 25, 0.98) 0%, rgba(10, 20, 30, 0.95) 100%);
  backdrop-filter: blur(30px);
  -webkit-backdrop-filter: blur(30px);
  transform: translateX(100%);
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  overflow-y: auto; /* Scroll vertical permitido */
  overflow-x: hidden; /* Sem scroll lateral na tela principal */
  z-index: 1000;
  box-shadow: 
    0 0 40px rgba(0, 212, 170, 0.15),
    inset 0 0 100px rgba(0, 212, 170, 0.05);
  padding: 0; /* Remove padding for maximum space usage */
  padding-bottom: 50vh; /* Padding no final para permitir scroll de ajuste de leitura */
  border: 1px solid rgba(0, 212, 170, 0.1);
  display: flex;
  flex-direction: column;
}

.info-panel.active {
  transform: translateX(0) !important;
  visibility: visible !important;
  opacity: 1 !important;
  animation: panelEntrance 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

@keyframes panelEntrance {
  0% {
    transform: translateX(100%) scale(0.95);
    opacity: 0;
  }
  100% {
    transform: translateX(0) scale(1);
    opacity: 1;
  }
}

.panel-header {
  padding: 10px 15px 5px 15px;
  border-bottom: 1px solid rgba(0, 212, 170, 0.15);
  background: linear-gradient(180deg, rgba(0, 212, 170, 0.08) 0%, transparent 100%);
  position: relative;
  border-radius: 0;
  margin-bottom: 0; /* Remove margin for compact layout */
  backdrop-filter: blur(8px);
  flex-shrink: 0; /* Prevent header from shrinking */
}

.panel-title {
  font-size: 28px;
  font-weight: 800; 
  color: var(--omada-primary);
  text-align: center;
  margin-bottom: 5px;
  text-shadow: 0 2px 8px rgba(0, 212, 170, 0.3);
  letter-spacing: 1px;
}

.panel-subtitle {
  font-size: 14px;
  color: var(--omada-text); 
  text-align: center;
  margin-bottom: 0; /* Remove margin for compact layout */
  opacity: 0.9;
}

/* === ENHANCED GALLERY LAYOUT FOR BETTER FLEXIBILITY - OTIMIZADO 9x16 === */
.gallery-section {
  position: relative; /* Enable absolute positioning for specs */
  display: flex;
  flex-direction: column;
  height: calc(100vh - 120px); /* Altura otimizada para 9x16 */
  overflow: hidden; /* Sem overflow na seção principal */
}

.gallery-main {
  flex: 1;
  min-height: 0;
  background: transparent;
  border-radius: 0;
  overflow: hidden;
  border: none;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
  padding: 5px; /* Minimal padding for image breathing room */
  margin: 0;
  transition: none;
}

.gallery-main img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  transition: none;
  filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.2));
  border-radius: 0;
  opacity: 1;
  transform: none;
}

/* === CONTAINER ESPECÍFICO PARA THUMBNAILS COM SCROLL HORIZONTAL === */
.gallery-thumbs-container {
  flex-shrink: 0;
  width: 100%;
  height: 100px;
  background: rgba(10, 20, 30, 0.8);
  border-top: 2px solid rgba(0, 212, 170, 0.2);
  overflow: hidden;
  position: relative;
}

.gallery-thumbs {
  display: flex;
  flex-direction: row;
  gap: 8px;
  overflow-x: auto; /* Scroll horizontal APENAS no container de thumbs */
  overflow-y: hidden;
  padding: 10px;
  margin: 0;
  align-items: center;
  background: transparent;
  border: none;
  border-radius: 0;
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 100px;
  max-height: 100px;
  justify-content: flex-start;
  box-sizing: border-box;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  backdrop-filter: none;
  /* Estilização da scrollbar para melhor UX */
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 212, 170, 0.6) rgba(0, 0, 0, 0.3);
}

/* Scrollbar personalizada para WebKit */
.gallery-thumbs::-webkit-scrollbar {
  height: 6px;
}

.gallery-thumbs::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 3px;
}

.gallery-thumbs::-webkit-scrollbar-thumb {
  background: rgba(0, 212, 170, 0.6);
  border-radius: 3px;
}

.gallery-thumbs::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 212, 170, 0.8);
}

.gallery-thumb {
  width: 80px;
  height: 80px;
  background: rgba(25, 35, 45, 0.8);
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer; 
  flex-shrink: 0;
  border: 2px solid transparent;
  transition: all 0.3s ease;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  margin: 0;
  backdrop-filter: none;
  transform: none;
  box-sizing: border-box;
}

.gallery-thumb:hover {
  transform: scale(1.05);
  border-color: rgba(0, 212, 170, 0.5);
  box-shadow: 0 4px 12px rgba(0, 212, 170, 0.3);
}

.gallery-thumb.active {
  border-color: var(--omada-primary);
  box-shadow: 
    0 0 0 2px var(--omada-primary),
    0 4px 16px rgba(0, 212, 170, 0.4);
  background: rgba(0, 212, 170, 0.15);
  transform: scale(1.1);
}

.gallery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: none;
  margin: 0 !important;
  padding: 0 !important;
  border: none;
  display: block;
  border-radius: 0;
  box-shadow: none;
  box-sizing: border-box;
  opacity: 0.9;
}

.gallery-thumb.active img {
  opacity: 1;
  border: none;
  box-shadow: none;
}

/* Specifications section - COMPACT FOR 9:16 COM SCROLL VERTICAL OTIMIZADO */
.specs-section { 
  padding: 15px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  background: rgba(15, 25, 35, 0.2);
  border-radius: 0;
  backdrop-filter: blur(8px);
  border: none;
  box-shadow: none;
  animation: fadeIn 0.5s ease-out;
  flex-shrink: 0; /* Prevent specs from shrinking */
  max-height: none; /* Permitir altura natural para scroll vertical */
  overflow: visible; /* Permitir overflow para scroll da tela principal */
  margin-bottom: 30px; /* Espaçamento adicional para melhor leitura */
}

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

.spec-group {
  margin-bottom: 8px;
  background: linear-gradient(135deg, rgba(20, 30, 40, 0.6) 0%, rgba(10, 20, 30, 0.7) 100%);
  border-radius: 8px;
  padding: 10px;
  border: 1px solid rgba(0, 212, 170, 0.15);
  backdrop-filter: blur(3px);
  box-shadow: none;
}

.spec-group-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase; 
  color: var(--omada-primary);
  margin-bottom: 8px;
  letter-spacing: 0.5px;
  text-align: center;
  padding-bottom: 5px;
  border-bottom: 1px solid rgba(0, 212, 170, 0.2);
}

.spec-item {
  display: flex; 
  align-items: flex-start;
  padding: 5px 0;
  border-bottom: 1px solid rgba(0, 212, 170, 0.08);
  transition: all 0.2s ease;
}

.spec-item:last-child { 
  border-bottom: none; 
}

.spec-item:hover {
  transform: translateX(3px);
  background: rgba(0, 212, 170, 0.05);
  border-radius: 5px;
  padding-left: 8px;
}

.spec-icon {
  width: 16px; 
  height: 16px; 
  margin-right: 10px;
  margin-top: 2px; 
  color: var(--omada-primary); 
  flex-shrink: 0;
  filter: drop-shadow(0 2px 4px rgba(0, 212, 170, 0.3));
}

.spec-text {
  flex: 1; 
  font-size: 13px; 
  color: var(--omada-text); 
  line-height: 1.5;
  opacity: 0.9;
}

/* === SCREENSAVER/EVENT FEATURES === */
.screensaver {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 10, 10, 0.6); /* More transparent dark background */
  backdrop-filter: blur(8px); /* Frosted glass effect */
  -webkit-backdrop-filter: blur(8px); /* Safari compatibility */
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  color: var(--omada-primary);
  text-align: center;
}

.screensaver.active {
  display: flex;
}

.screensaver-logo {
  width: clamp(90px, 9vw, 150px);
  margin-bottom: 40px;
  animation: pulse 3s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 0.8; }
  50% { transform: scale(1.1); opacity: 1; }
}

.screensaver-text {
  font-size: var(--touch-font-xl);
  font-weight: 300;
  margin-bottom: 20px;
  animation: fadeInOut 4s ease-in-out infinite;
}

.screensaver-subtitle {
  font-size: var(--touch-font-large);
  opacity: 0.7;
  animation: fadeInOut 4s ease-in-out infinite 2s;
}

@keyframes fadeInOut {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

/* Status indicators */
.status-indicator {
  position: fixed;
  top: 20px;
  right: 20px;
  display: flex;
  gap: 10px;
  z-index: 1500;
}

.indicator {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transition: all 0.3s ease;
}

.indicator.active {
  background: var(--omada-primary);
  box-shadow: 0 0 10px var(--omada-primary);
}

.indicator.loading {
  animation: blink 1s infinite;
}

@keyframes blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0.3; }
}

/* Loading overlay */
.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 1800;
  color: var(--omada-primary);
}

.loading-overlay.active {
  display: flex;
}

.loading-spinner {
  width: 60px;
  height: 60px;
  border: 4px solid rgba(0, 212, 170, 0.3);
  border-top: 4px solid var(--omada-primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 20px;
}

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

.loading-text {
  font-size: var(--touch-font-large);
  margin-bottom: 10px;
}

.loading-progress {
  font-size: var(--touch-font-base);
  opacity: 0.7;
}

/* Touch ripple effect */
.touch-ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(0, 212, 170, 0.3);
  transform: scale(0);
  animation: ripple 0.6s linear;
  pointer-events: none;
}

@keyframes ripple {
   to {
     transform: scale(4);
     opacity: 0;
   }
 }

/* === TOUCH ACCESSIBILITY ENHANCEMENTS === */
.touch-target {
  position: relative;
  min-width: var(--touch-min-size);
  min-height: var(--touch-min-size);
}

.touch-target::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: max(100%, var(--touch-min-size));
  height: max(100%, var(--touch-min-size));
  z-index: -1;
}

.touch-feedback {
  transition: all 0.15s ease;
  transform-origin: center;
}

.touch-feedback:active {
  transform: scale(0.95);
  filter: brightness(1.2);
}

.focusable:focus {
  outline: none;
}

.omada-slot.focusable:focus img {
  outline: 2px solid var(--omada-primary);
  outline-offset: 0px;
  box-shadow: 0 0 0 2px rgba(0, 212, 170, 0.3);
}

/* === GALLERY ANIMATIONS === */
.gallery-section {
  animation: galleryEntrance 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.gallery-thumb.active {
  animation: thumbPulse 2s infinite;
}

/* === HOVER EFFECTS === */
.gallery-main, .gallery-thumb {
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.gallery-main:hover, .gallery-thumb:hover {
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* State indicators */
.state-indicator {
  position: relative;
}

.state-indicator::after {
  content: '';
  position: absolute;
  top: -2px;
  right: -2px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--omada-primary);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.state-indicator.active::after {
  opacity: 1;
}

/* Improvements for small elements */
.gallery-thumb {
  min-width: var(--touch-min-size);
  min-height: var(--touch-min-size);
  display: flex;
  align-items: center;
  justify-content: center;
}

.gallery-thumb img {
  /* Removed max-width and max-height constraints to allow images to fill container */
}

/* Touch optimized spacing */
.touch-spacing {
  margin: var(--touch-spacing);
}

/* === SCROLLBAR CUSTOMIZATION === */
::-webkit-scrollbar {
  width: 10px;
  height: 8px; /* Horizontal scrollbar height */
}

::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1);
  border-radius: 5px;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--omada-primary), #00a88a);
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #00f7c3, var(--omada-primary));
}

/* Custom scrollbar for gallery thumbs */
.gallery-thumbs::-webkit-scrollbar {
  height: 8px;
}

.gallery-thumbs::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}

.gallery-thumbs::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, var(--omada-primary), #00a88a);
  border-radius: 4px;
}

.gallery-thumbs::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(90deg, #00f7c3, var(--omada-primary));
}

/* Visual audio feedback (for devices without sound) */
.audio-feedback {
  position: relative;
}

.audio-feedback::before {
  content: '♪';
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 16px;
  color: var(--omada-primary);
  opacity: 0;
  animation: audioFeedback 0.5s ease;
  pointer-events: none;
}

@keyframes audioFeedback {
  0% { opacity: 0; transform: translateX(-50%) translateY(0); }
  50% { opacity: 1; transform: translateX(-50%) translateY(-10px); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-20px); }
}

/* === RESPONSIVE STYLES === */
@media (orientation: landscape) {
  .omada-logo { width: clamp(90px, 8vw, 140px); margin-top: 5vh; margin-bottom: 1vh; }
  
  /* Maximize rack in landscape - UNIFIED SCALING */
  .omada-rack-sizer {
    max-width: 99.5vw; /* Almost full width in landscape */
    max-height: 90vh; /* Use height in landscape */
    transform: translateX(-50%) scale(1.1); /* Scale rack + equipment together */
    transform-origin: center bottom; /* Maintain bottom anchoring */
  }
}

@media (orientation: portrait) {
  .omada-logo { width: clamp(90px, 11vw, 150px); margin-top: 6vh; margin-bottom: 1vh; }
  
  /* Maximize rack in portrait - UNIFIED SCALING */
  .omada-rack-sizer {
    max-width: 99.5vw; /* Almost no side margins */
    max-height: 88vh; /* Reduced to give top space for logo */
    transform: translateX(-50%) scale(1.0); /* Scale rack + equipment together */
    transform-origin: center bottom; /* Maintain bottom anchoring */
  }
  
  /* Specific adjustments for portrait on mobile devices */
  @media (max-width: 768px) {
    .omada-rack-sizer {
      max-width: 99.5vw; /* Almost no side margins */
      max-height: 88vh; /* Reduced to give top space for logo */
      transform: translateX(-50%) scale(1.0); /* Scale rack + equipment together */
      transform-origin: center bottom; /* Maintain bottom anchoring */
    }
  }
}

@media (max-width: 768px) {
  .info-panel { 
    width: 100vw;
    height: 100vh;
  }
  .side-menu { 
    width: 100vw !important; 
    max-width: none !important;
  }
  
  .menu-title {
    font-size: 20px;
    margin-bottom: 25px;
  }
  
  .family-title {
    font-size: 16px;
  }
  
  .family-description {
    font-size: 12px;
  }
  
  .product-card {
    flex: 0 0 180px;
    min-height: 240px;
    padding: 15px;
  }
  
  .product-image {
    width: 100px;
    height: 70px;
  }
  
  .product-name {
    font-size: 14px;
  }
  
  .product-description {
    font-size: 11px;
  }
  
  .scroll-nav {
    width: 35px;
    height: 35px;
    font-size: 14px;
  }
  
  .menu-container {
    bottom: 15px;
  }
  
  .menu-toggle { 
    width: 40px; 
    height: 40px; 
  }
  
  .cta-text {
    font-size: 12px;
  }
  
  .cta-arrow {
    font-size: 14px;
  }
  
  .menu-cta {
    margin-top: 0;
  }
  
  .cta-arrow {
    margin: 6px 0 -8px 0;
  }
  
  /* Fix to avoid rack cutting on mobile devices */
  .omada-rack-viewport {
    overflow: visible; /* Avoid side cutting */
  }
  
  /* Fine adjustment of rack for mobile devices - UNIFIED SCALING */
  .omada-rack-sizer {
    max-width: 99.8vw; /* Maximize to use available width */
    max-height: 80vh; /* Increased to use height */
    transform: translateX(-50%) scale(0.9); /* Scale rack + equipment together */
    transform-origin: center bottom; /* Maintain bottom anchoring */
  }
}

/* Adjustments for very small screens */
@media (max-width: 480px) {
  .omada-rack-sizer {
    max-width: 99.8vw; /* Use almost all available width */
    max-height: 80vh; /* Increased to use height */
    transform: translateX(-50%) scale(0.95); /* Scale rack + equipment together */
    transform-origin: center bottom; /* Maintain bottom anchoring */
  }
}

/* === CONSOLIDATED 9:16 PORTRAIT OPTIMIZATIONS === */
/* Single, comprehensive media query for 9:16 aspect ratio */
@media (orientation: portrait) and (max-aspect-ratio: 9/16) {
  
  /* === MAIN LAYOUT OPTIMIZATIONS === */
  .omada-rack-sizer {
    max-width: 99.5vw;
    max-height: 85vh;
    transform: translateX(-50%) scale(1.0);
    transform-origin: center bottom;
  }
  
  .side-menu {
    width: 100vw !important;
    max-width: none !important;
  }
  
  /* === INFO PANEL COMPLETE REDESIGN FOR 9x16 === */
  .info-panel {
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    height: 100vh !important;
    overflow-y: auto !important; /* Enable vertical scrolling */
    overflow-x: hidden !important;
    scroll-behavior: smooth !important; /* Scroll suave */
    -webkit-overflow-scrolling: touch !important; /* Scroll touch otimizado */
  }
  
  /* === PANEL HEADER - ULTRA COMPACT === */
  .panel-header {
    padding: 8px 15px 5px 15px !important;
    margin-bottom: 0 !important;
    border-radius: 0 !important;
    flex-shrink: 0 !important;
    background: linear-gradient(180deg, rgba(0, 212, 170, 0.12) 0%, rgba(0, 212, 170, 0.04) 100%) !important;
    border-bottom: 2px solid rgba(0, 212, 170, 0.2) !important;
  }
  
  .panel-title {
    font-size: 22px !important;
    margin-bottom: 3px !important;
    text-shadow: 0 1px 4px rgba(0, 212, 170, 0.4) !important;
  }
  
  .panel-subtitle {
    font-size: 12px !important;
    margin-bottom: 0 !important;
    opacity: 0.8 !important;
  }
  
  /* === GALLERY SECTION - MAXIMUM SPACE UTILIZATION === */
  .gallery-section {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
    margin: 0 !important;
    gap: 0 !important;
    border-radius: 0 !important;
    border: none !important;
    background: transparent !important;
    backdrop-filter: none !important;
    min-height: 0 !important;
    overflow: hidden !important;
    height: calc(100vh - 140px) !important; /* Altura específica para evitar corte */
  }
  
  /* === GALLERY MAIN - OPTIMIZED IMAGE DISPLAY === */
  .gallery-main {
    flex: 1 !important;
    min-height: 0 !important;
    padding: 12px !important; /* Padding aumentado para melhor respiração */
    margin: 0 !important;
    border-radius: 0 !important;
    background: rgba(5, 15, 25, 0.3) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    max-height: calc(100vh - 210px) !important; /* Altura máxima para evitar corte */
  }
  
  .gallery-main img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    border-radius: 8px !important;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.3)) !important;
  }
  
  /* === GALLERY THUMBNAILS - COMPACT HORIZONTAL STRIP === */
  .gallery-thumbs-container {
    flex-shrink: 0 !important;
    height: 80px !important; /* Altura aumentada para melhor UX */
    min-height: 80px !important;
    max-height: 80px !important;
    width: 100% !important;
    background: rgba(10, 20, 30, 0.9) !important;
    border-top: 2px solid rgba(0, 212, 170, 0.3) !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    padding: 5px 0 !important; /* Padding vertical para melhor visual */
  }
  
  .gallery-thumbs {
    flex-shrink: 0 !important;
    height: 70px !important;
    min-height: 70px !important;
    max-height: 70px !important;
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 0 10px !important; /* Padding horizontal para melhor espaçamento */
    margin: 0 !important;
    gap: 8px !important; /* Gap entre thumbnails */
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    scroll-behavior: smooth !important;
    -webkit-overflow-scrolling: touch !important;
  }
  
  .gallery-thumb {
    width: 60px !important; /* Largura reduzida para melhor fit */
    height: 60px !important; /* Altura reduzida para melhor fit */
    flex-shrink: 0 !important;
    background: rgba(25, 35, 45, 0.9) !important;
    border: 2px solid transparent !important; /* Border transparente inicial */
    border-radius: 8px !important; /* Border radius para melhor visual */
    margin: 0 !important;
    padding: 2px !important; /* Padding interno para melhor visual */
    cursor: pointer !important;
    transition: all 0.3s ease !important; /* Transição mais suave */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) !important; /* Sombra para profundidade */
  }
  
  .gallery-thumb:hover {
    background: rgba(0, 212, 170, 0.15) !important;
    transform: scale(1.08) translateY(-2px) !important; /* Efeito hover melhorado */
    border-color: rgba(0, 212, 170, 0.5) !important;
    box-shadow: 0 4px 12px rgba(0, 212, 170, 0.3) !important;
  }
  
  .gallery-thumb.active {
    background: rgba(0, 212, 170, 0.2) !important;
    border-color: var(--omada-primary) !important;
    transform: scale(1.12) translateY(-3px) !important; /* Efeito ativo mais pronunciado */
    box-shadow: 
      0 0 0 2px var(--omada-primary) !important,
      0 6px 16px rgba(0, 212, 170, 0.4) !important;
  }
  
  .gallery-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    border-radius: 6px !important; /* Border radius para combinar com o container */
    transition: all 0.3s ease !important; /* Transição suave */
  }
  
  .gallery-thumb.active img {
    filter: brightness(1.15) contrast(1.1) saturate(1.1) !important; /* Filtros aprimorados */
  }
  
  /* === SPECIFICATIONS SECTION - OPTIMIZED FOR 9:16 === */
  .specs-section {
    flex-shrink: 0 !important;
    padding: 15px !important; /* Padding otimizado */
    margin: 0 !important;
    background: rgba(10, 20, 30, 0.95) !important;
    border-top: 2px solid rgba(0, 212, 170, 0.3) !important;
    border-radius: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important; /* Gap otimizado entre elementos */
  }
  }
  
  /* === SPECIFICATIONS SECTION - COMPACT OVERLAY === */
  .specs-section {
    position: static !important; /* Change from absolute to static for normal flow */
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    max-height: none !important; /* Remove height restriction */
    padding: 15px !important;
    margin: 10px !important; /* Add margin for spacing */
    background: rgba(5, 15, 25, 0.95) !important;
    backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(0, 212, 170, 0.3) !important;
    border-radius: 12px !important;
    overflow-y: visible !important; /* Remove scroll restriction */
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 8px !important;
    box-shadow: 
      0 8px 32px rgba(0, 0, 0, 0.4),
      0 0 0 1px rgba(0, 212, 170, 0.1) !important;
    z-index: 10 !important;
    flex-shrink: 0 !important; /* Prevent shrinking */
    margin-bottom: 100px !important; /* Add extra space at bottom for scrolling */
  }
  
  .spec-group {
    margin-bottom: 10px !important; /* Increase spacing between groups */
    padding: 12px !important; /* Increase padding for better readability */
    background: rgba(20, 30, 40, 0.7) !important;
    border: 1px solid rgba(0, 212, 170, 0.2) !important;
    border-radius: 8px !important; /* Slightly larger border radius */
    backdrop-filter: blur(5px) !important;
  }
  
  .spec-group-title {
    font-size: 13px !important; /* Slightly larger font for better readability */
    font-weight: 700 !important;
    color: var(--omada-primary) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 8px !important; /* Increase margin for better spacing */
    padding-bottom: 5px !important; /* Increase padding */
    border-bottom: 1px solid rgba(0, 212, 170, 0.3) !important;
    text-align: center !important;
  }
  
  .spec-item {
    display: flex !important;
    align-items: flex-start !important;
    padding: 5px 0 !important; /* Increase padding for better readability */
    border-bottom: 1px solid rgba(0, 212, 170, 0.1) !important;
    font-size: 12px !important; /* Slightly larger font */
    line-height: 1.5 !important; /* Better line height for readability */
  }
  
  .spec-item:last-child {
    border-bottom: none !important;
  }
  
  .spec-icon {
    width: 14px !important; /* Slightly larger icon */
    height: 14px !important;
    margin-right: 10px !important; /* Increase margin for better spacing */
    margin-top: 1px !important;
    color: var(--omada-primary) !important;
    flex-shrink: 0 !important;
  }
  
  .spec-text {
    flex: 1 !important;
    color: var(--omada-text) !important;
    opacity: 0.95 !important; /* Slightly more opaque for better readability */
  }
  
  /* === PRODUCT CARDS OPTIMIZATION - ALL PRODUCTS ALWAYS HIGHLIGHTED === */
  .product-card {
    margin: 4vh auto !important;
    min-height: 320px !important;
    max-width: 90vw !important;
    /* Apply highlight styles to ALL products in 9x16 mode */
    transform: scale(1.08) !important;
    box-shadow: 0 8px 32px rgba(0, 212, 170, 0.2) !important;
  }
  
  /* Remove the center-focus specific styling since all products are highlighted */
  .product-card.center-focus {
    /* No additional styling needed - all products are already highlighted */
  }
  
  .product-image {
    /* Apply focused image size to ALL products */
    width: 300px !important;
    height: 180px !important;
    margin-bottom: 20px !important;
  }
  
  .product-image img {
    /* Apply focused image effects to ALL products */
    filter: drop-shadow(0 12px 24px rgba(0, 212, 170, 0.5)) !important;
  }
  
  .product-name {
    /* Apply focused text size to ALL products */
    font-size: 24px !important;
    letter-spacing: 2px !important;
    color: var(--omada-primary) !important;
    text-shadow: 0 0 15px rgba(0, 212, 170, 0.3) !important;
  }
  
  /* === FOCUS CIRCLE - REMOVE FOR 9x16 SINCE ALL PRODUCTS ARE HIGHLIGHTED === */
  .product-card::before {
    display: none !important; /* Hide the focus circle since all products are highlighted */
  }
}

/* REMOVED - CONFLICTING 9:16 RULES - CONSOLIDATED BELOW */

/* === KIOSK MODE OPTIMIZATIONS FOR 9x16 SCREENS === */
@media (min-width: 1000px) and (min-height: 1800px) and (orientation: portrait) {
  /* Enhanced layout for kiosk mode */
  .omada-logo {
    width: clamp(140px, 14vw, 220px);
    margin-top: 4vh;
    margin-bottom: 3vh;
  }
  
  .omada-rack-sizer {
    max-width: 99.5vw;
    max-height: 82vh;
    transform: translateX(-50%) scale(1.15); /* Increased scale for kiosk visibility */
    transform-origin: center bottom;
  }
  
  /* Enhanced menu container for kiosk */
  .menu-container {
    bottom: var(--kiosk-padding);
    padding: 0 var(--kiosk-padding);
  }
  
  /* Larger menu toggle for kiosk touch */
  .menu-toggle {
    width: var(--kiosk-button-size);
    height: var(--kiosk-button-size);
    border-width: 5px;
    font-size: calc(var(--touch-font-xl) * var(--kiosk-text-scale));
  }
  
  /* Enhanced CTA for kiosk */
  .menu-cta {
    margin-top: 0;
    min-height: calc(var(--kiosk-button-size) - 20px);
    padding: var(--touch-spacing);
    border-radius: 20px;
  }
  
  .cta-text {
    font-size: calc(var(--touch-font-large) * var(--kiosk-text-scale));
    font-weight: 600;
    line-height: 1.3;
  }
  
  .cta-arrow {
    font-size: calc(var(--touch-font-large) * var(--kiosk-text-scale));
    margin: 12px 0 -8px 0;
  }
  
  /* Enhanced menu items for kiosk */
  .menu-icon {
    width: calc(var(--kiosk-button-size) - 10px);
    height: calc(var(--kiosk-button-size) - 10px);
  }
  
  /* Enhanced text sizes for kiosk readability */
  .family-screen-title {
    font-size: calc(var(--touch-font-xl) * var(--kiosk-text-scale));
  }
  
  .family-item h3 {
    font-size: calc(var(--touch-font-large) * var(--kiosk-text-scale));
  }
  
  .family-item p {
    font-size: calc(var(--touch-font-base) * var(--kiosk-text-scale));
  }
  
  /* Enhanced gallery for kiosk */
  .info-panel {
    padding: var(--kiosk-padding);
  }
  
  .panel-title {
    font-size: calc(var(--touch-font-xl) * var(--kiosk-text-scale));
  }
  
  .panel-subtitle {
    font-size: calc(var(--touch-font-large) * var(--kiosk-text-scale));
  }
  
  /* Enhanced touch targets */
  .touch-target {
    min-width: var(--kiosk-button-size);
    min-height: var(--kiosk-button-size);
  }
  
  /* Enhanced screensaver for kiosk */
  .screensaver-title {
    font-size: calc(var(--touch-font-xl) * 1.5);
  }
  
  .screensaver-subtitle {
    font-size: calc(var(--touch-font-large) * var(--kiosk-text-scale));
  }
    width: 36px;
    height: 36px;
  }
  
  .menu-icon span {
    height: 3px;
  }
  
  /* Panels optimized for touch - FULL WIDTH */
  .side-menu {
    width: 100vw !important;
    font-size: var(--touch-font-base);
  }
  
  .menu-title {
    font-size: 36px;
    margin-bottom: 40px;
  }
  
  .family-title {
    font-size: 24px;
  }
  
  .product-card {
    flex: 0 0 250px;
    min-height: 300px;
    padding: 25px;
  }
  
  .product-image {
    width: 150px;
    height: 100px;
  }
  
  .product-name {
    font-size: 18px;
  }
  
  .scroll-nav {
    width: 45px;
    height: 45px;
    font-size: 18px;
  }
  
  .info-panel {
    width: 100vw;
    height: 100vh;
    font-size: var(--touch-font-base);
  }
  
  /* Menu items larger */
  .menu-item {
    padding: var(--touch-spacing) 20px;
    font-size: var(--touch-font-large);
    min-height: var(--touch-min-size);
  }
  
  /* Larger titles */
  .menu-title {
    font-size: var(--touch-font-base);
  }
  
  .panel-title {
    font-size: var(--touch-font-xl);
  }
  
  .panel-subtitle {
    font-size: var(--touch-font-base);
  }
  
  /* Adjust header padding for TV Touch */
  .panel-header {
    padding: 30px 30px 30px 30px; /* Adjusted padding without close button */
  }
  
  /* Gallery optimized for touch */
  .gallery-thumb {
    width: 80px;
    height: 80px;
    border-width: 3px;
  }
  
  /* REMOVED - CONFLICTING 9:16 RULES - CONSOLIDATED BELOW */
  
  /* Larger specifications */
  .spec-item {
    font-size: var(--touch-font-base);
    padding: 15px 0;
  }
  
  .spec-group-title {
     font-size: var(--touch-font-large);
     margin-bottom: 20px;
   }
 }

/* === ADDITIONAL TV RESOLUTION OPTIMIZATIONS === */

/* TV 4K Portrait (2160x3840) */
@media (min-width: 2000px) and (min-height: 3500px) and (orientation: portrait) {
  :root {
    --touch-min-size: 100px;
    --touch-font-base: 28px;
    --touch-font-large: 36px;
    --touch-font-xl: 48px;
    --touch-spacing: 30px;
  }
  
  .omada-logo {
    width: clamp(200px, 15vw, 300px);
  }
  
  .menu-container {
    bottom: 10px;
  }
  
  .menu-toggle {
    width: 120px;
    height: 120px;
  }
  
  .menu-cta {
    margin-top: 0;
    min-height: calc(var(--touch-min-size) - 10px);
  }
        
  .cta-arrow {
    font-size: 22px;
    margin: 12px 0 -4px 0;
  }
  
  .cta-text {
    font-size: var(--touch-font-large);
  }
  
  .cta-arrow {
    font-size: 24px;
  }
  
  .menu-icon {
    width: 48px;
    height: 48px;
  }
  
  .side-menu {
    width: 100vw !important;
  }
        
  .menu-title {
    font-size: 48px;
    margin-bottom: 60px;
  }
        
  .family-title {
    font-size: 36px;
  }
        
  .product-card {
    flex: 0 0 320px;
    min-height: 380px;
    padding: 40px;
  }
        
  .product-image {
    width: 200px;
    height: 140px;
  }
        
  .product-name {
    font-size: 28px;
  }
        
  .scroll-nav {
    width: 60px;
    height: 60px;
    font-size: 24px;
  }
  
  .info-panel {
    width: 100vw;
    height: 100vh;
  }
}

/* Adjustments for smaller TVs (HD Portrait) */
@media (min-width: 720px) and (max-width: 999px) and (min-height: 1200px) and (orientation: portrait) {
  :root {
    --touch-min-size: 50px;
    --touch-font-base: 16px;
    --touch-font-large: 20px;
    --touch-font-xl: 28px;
    --touch-spacing: 15px;
  }
  
  .omada-logo {
    width: clamp(100px, 10vw, 160px);
  }
  
  .menu-container {
    bottom: 10px;
  }
  
  .menu-toggle {
    width: 70px;
    height: 70px;
  }
  
  .cta-text {
    font-size: 12px;
  }
  
  .cta-arrow {
    font-size: 14px;
  }
  
  .menu-cta {
    margin-top: 0;
  }
        
  .cta-arrow {
    margin: 6px 0 -8px 0;
  }
  
  .side-menu {
    width: 100vw !important;
  }
  
  .menu-title {
    font-size: 24px;
    margin-bottom: 30px;
  }
  
  .family-title {
    font-size: 18px;
  }
  
  .product-card {
    flex: 0 0 220px;
    min-height: 280px;
    padding: 20px;
  }
  
  .product-image {
    width: 120px;
    height: 80px;
  }
  
  .product-name {
    font-size: 16px;
  }
  
  .scroll-nav {
    width: 40px;
    height: 40px;
    font-size: 16px;
  }
  
  .info-panel {
    width: 100vw;
    height: 100vh;
  }
}

/* General optimizations for portrait */
@media (orientation: portrait) {
  /* Better height utilization in portrait */
  .omada-frame {
    flex: 1 1 auto;
    min-height: 0;
  }
  
  /* Adjust rack viewport for portrait */
  .omada-rack-viewport {
    height: 100%;
    padding-bottom: 3vh; /* Reduced padding */
  }
  
  /* Menu should take full width in portrait */
  .side-menu {
    width: 100vw !important;
    max-width: none !important;
  }
  
  /* Optimized spacing for portrait */
  .specs-section {
    padding: 15px; /* Reduced padding */
  }
  
  .spec-group {
    margin-bottom: 15px; /* Reduced margin */
  }
  
  /* Custom scrollbar for touch */
  .side-menu::-webkit-scrollbar,
  .info-panel::-webkit-scrollbar {
    width: 8px; /* Reduced width */
  }
  
  .side-menu::-webkit-scrollbar-track,
  .info-panel::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 4px; /* Reduced radius */
  }
  
  .side-menu::-webkit-scrollbar-thumb,
  .info-panel::-webkit-scrollbar-thumb {
    background: var(--omada-primary);
    border-radius: 4px; /* Reduced radius */
    min-height: 30px; /* Reduced height */
  }
  
  .side-menu::-webkit-scrollbar-thumb:hover,
  .info-panel::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 212, 170, 0.8);
  }  
  
  /* Touch-specific optimizations for gallery */
  .gallery-section {
    padding: 12px; /* Optimized padding */
    gap: 6px; /* Reduced gap */
    height: calc(100vh - 70px); /* Better height utilization */
    margin-bottom: 12px; /* Reduced margin */
  }
  
  .gallery-main {
    min-height: 42vh; /* Optimized height */
  }
  
  .gallery-thumbs {
    padding: 5px 10px; /* Reduced padding */
    min-height: 150px; /* Reduced minimum height */
    gap: 5px; /* Reduced gap */
  }
  
  .gallery-thumb {
    width: 135px; /* Optimized size */
    height: 135px; /* Optimized size */
    margin: 0 2px; /* Reduced margin */
  }
}

/* === CLOSE BUTTON STYLES === */

/* Close Button Styles */
.close-button {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 44px;
  height: 44px;
  background: rgba(0, 0, 0, 0.1);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #666;
  transition: all 0.3s ease;
  z-index: 1000;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.close-button:hover {
  background: rgba(0, 0, 0, 0.2);
  color: #333;
  transform: scale(1.1);
}

.close-button:active {
  transform: scale(0.95);
}

.close-button svg {
  width: 20px;
  height: 20px;
}

/* Gallery Close Button - positioned over the gallery */
.gallery-close-btn {
  background: rgba(0, 0, 0, 0.3);
  color: white;
}

.gallery-close-btn:hover {
  background: rgba(0, 0, 0, 0.5);
  color: white;
}

/* Menu Close Button - positioned over the menu */
.menu-close-btn {
  background: rgba(255, 255, 255, 0.1);
  color: #00d4aa;
  border: 1px solid rgba(0, 212, 170, 0.3);
}

.menu-close-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  color: #00d4aa;
  border-color: rgba(0, 212, 170, 0.5);
}

/* Products Close Button - positioned over the products screen */
.products-close-btn {
  background: rgba(255, 255, 255, 0.1);
  color: #00d4aa;
  border: 1px solid rgba(0, 212, 170, 0.3);
}

.products-close-btn:hover {
  background: rgba(255, 255, 255, 0.2);
  color: #00d4aa;
  border-color: rgba(0, 212, 170, 0.5);
}

/* Touch feedback for close buttons */
.close-button.touch-feedback:active {
  background: rgba(0, 212, 170, 0.2);
  transform: scale(0.9);
}

/* Responsive adjustments for close buttons */
@media (max-width: 768px) {
  .close-button {
    width: 48px;
    height: 48px;
    top: 15px;
    right: 15px;
  }
  
  .close-button svg {
    width: 22px;
    height: 22px;
  }
}

/* 9x16 mode adjustments for close buttons */
@media (aspect-ratio: 9/16) {
  .close-button {
    width: 52px;
    height: 52px;
    top: 25px;
    right: 25px;
  }
  
  .close-button svg {
    width: 24px;
    height: 24px;
  }
}