/** * Images CSS - Cloud Gaming Compare * Estilos para ícones, logos e imagens * Resolve conflitos de imagens redondas */ /* === ÍCONES REDONDOS PADRÃO === */ .cg-icon, .cg-service-icon, .cg-service-logo, .cg-service-card-image { width: var(--cg-icon-size-md); height: var(--cg-icon-size-md); min-width: var(--cg-icon-size-md); min-height: var(--cg-icon-size-md); max-width: var(--cg-icon-size-md); max-height: var(--cg-icon-size-md); border-radius: var(--cg-border-radius-round); -webkit-border-radius: var(--cg-border-radius-round); -moz-border-radius: var(--cg-border-radius-round); object-fit: cover; border: var(--cg-icon-border); background: var(--cg-white); padding: var(--cg-icon-padding); box-shadow: var(--cg-shadow-icon); transition: var(--cg-transition-smooth); display: block; overflow: hidden; flex-shrink: 0; margin-right: var(--cg-spacing-md); } /* === ÍCONES DO SELETOR (DROPDOWN - REDONDOS) === */ .cg-selector-option .cg-service-icon { width: var(--cg-icon-size-md); height: var(--cg-icon-size-md); min-width: var(--cg-icon-size-md); min-height: var(--cg-icon-size-md); max-width: var(--cg-icon-size-md); max-height: var(--cg-icon-size-md); border-radius: var(--cg-border-radius-round); object-fit: cover; object-position: center; margin-right: var(--cg-spacing-lg); border: 2px solid var(--cg-border-color); transition: var(--cg-transition-smooth); box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.05); background: var(--cg-white); padding: 2px; display: block; overflow: hidden; image-rendering: auto; image-rendering: -webkit-optimize-contrast; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .cg-selector-option:hover .cg-service-icon { border-color: var(--cg-gray-medium); transform: scale(1.1); box-shadow: 0 16px 48px rgba(107, 114, 128, 0.2), 0 6px 16px rgba(0, 0, 0, 0.15), 0 0 0 2px rgba(107, 114, 128, 0.1); } .cg-selector-option.selected .cg-service-icon { border-color: var(--cg-gray-medium); box-shadow: 0 16px 48px rgba(107, 114, 128, 0.3), 0 6px 16px rgba(0, 0, 0, 0.15), 0 0 0 2px rgba(107, 114, 128, 0.2); transform: scale(1.08); } /* === ÍCONES DOS SLOTS SELECIONADOS (QUADRADOS COM BORDAS ARREDONDADAS) === */ .cg-service-slot .cg-service-logo, .cg-service-card .cg-service-logo, .cg-selected-service .cg-service-logo { width: 64px; height: 64px; min-width: 64px; min-height: 64px; max-width: 64px; max-height: 64px; border-radius: var(--cg-border-radius); -webkit-border-radius: var(--cg-border-radius); -moz-border-radius: var(--cg-border-radius); object-fit: cover; border: 2px solid var(--cg-border-color); background: var(--cg-white); padding: 2px; box-shadow: var(--cg-shadow-icon); transition: var(--cg-transition-smooth); display: block; overflow: hidden; flex-shrink: 0; } .cg-service-card:hover .cg-service-logo { transform: scale(1.05); box-shadow: 0 8px 24px rgba(107, 114, 128, 0.15), 0 3px 12px rgba(107, 114, 128, 0.1); } /* === TAMANHOS ESPECÍFICOS === */ .cg-icon--small, .cg-service-icon--small { width: var(--cg-icon-size-sm); height: var(--cg-icon-size-sm); min-width: var(--cg-icon-size-sm); min-height: var(--cg-icon-size-sm); max-width: var(--cg-icon-size-sm); max-height: var(--cg-icon-size-sm); } .cg-icon--large, .cg-service-icon--large { width: var(--cg-icon-size-lg); height: var(--cg-icon-size-lg); min-width: var(--cg-icon-size-lg); min-height: var(--cg-icon-size-lg); max-width: var(--cg-icon-size-lg); max-height: var(--cg-icon-size-lg); } /* === ESTADOS DE HOVER === */ .cg-icon:hover, .cg-service-icon:hover, .cg-service-logo:hover, .cg-service-card-image:hover { transform: scale(1.05); box-shadow: var(--cg-shadow-icon-hover); } /* === ÍCONES EM SELETORES === */ .cg-selector-option .cg-service-icon { margin-right: var(--cg-spacing-sm); } .cg-selector-option:hover .cg-service-icon { transform: scale(1.1); border-color: var(--cg-primary-dark); box-shadow: var(--cg-shadow-icon-hover); } .cg-selector-option.selected .cg-service-icon { border-color: var(--cg-accent-green); box-shadow: 0 0 0 2px var(--cg-accent-green), var(--cg-shadow-icon); } /* === ÍCONES EM CARDS === */ .cg-service-card .cg-service-logo { margin-right: var(--cg-spacing-md); } .cg-service-card:hover .cg-service-logo { transform: scale(1.05); } /* === ÍCONES EM COMPARAÇÃO DETALHADA === */ .cg-service-card-header .cg-service-card-image { width: 60px; height: 60px; min-width: 60px; min-height: 60px; max-width: 60px; max-height: 60px; margin-right: var(--cg-spacing-md); } /* === PLACEHOLDER PARA SLOTS VAZIOS === */ .cg-slot-icon { width: var(--cg-icon-size-md); height: var(--cg-icon-size-md); border: 2px dashed var(--cg-border-color); border-radius: var(--cg-border-radius-round); display: flex; align-items: center; justify-content: center; background: var(--cg-gray-light); color: var(--cg-gray-medium); font-size: var(--cg-font-size-2xl); transition: var(--cg-transition-normal); } .cg-slot-icon:hover { transform: rotate(180deg); border-color: var(--cg-primary-dark); color: var(--cg-primary-dark); } /* === FORÇAR ESTILOS PARA RESOLVER CONFLITOS === */ .cg-service-selector .cg-service-icon, .cg-comparison-widget .cg-service-icon, .cg-comparison-results .cg-service-card-image { /* Força todos os estilos para evitar conflitos */ width: var(--cg-icon-size-md) !important; height: var(--cg-icon-size-md) !important; border-radius: var(--cg-border-radius-round) !important; object-fit: cover !important; border: var(--cg-icon-border) !important; background: var(--cg-white) !important; padding: var(--cg-icon-padding) !important; box-shadow: var(--cg-shadow-icon) !important; transition: var(--cg-transition-smooth) !important; display: block !important; overflow: hidden !important; flex-shrink: 0 !important; }